/* =============================================================
   LGG MOBILE — Progressive Web App styles
   Mobile-first, safe-area aware, touch-optimised
   ============================================================= */

/* ── PWA standalone mode tweaks ──────────────────────────────── */
@media (display-mode: standalone) {
  .lgc-back-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .lgc-mob-nav { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* ── Hide desktop back bar in standalone — bottom nav replaces it ─ */
@media (display-mode: standalone), (max-width: 600px) {
  .lgc-back-bar { display: none !important; }
}

/* ══════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Replaces the desktop top tab strip on phones
══════════════════════════════════════════════════ */
.lgc-mob-nav {
  display: none; /* shown only on mobile */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: #fff;
  border-top: 1.5px solid #e5e7eb;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  padding: 6px 0 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.lgc-mob-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.lgc-mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.lgc-mob-tab.on { color: #58cc02; }
.lgc-mob-tab-icon { font-size: 1.45rem; line-height: 1; }

/* Battle tab — live online dot */
#mobtab-battle { position: relative; }
#lgc-mob-battle-dot {
  position: absolute;
  top: 5px; right: calc(50% - 16px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7fff00;
  display: none;
  box-shadow: 0 0 0 2px #fff;
  animation: lgcBlink 1.5s infinite;
}
#lgc-mob-battle-dot.visible { display: block; }

/* 5-tab layout: reduce font/icon slightly so all fit */
@media (max-width: 420px) {
  .lgc-mob-tab { font-size: .55rem; padding: 6px 2px; }
  .lgc-mob-tab-icon { font-size: 1.25rem; }
}

/* Add padding to body so content isn't hidden under bottom nav */
@media (max-width: 600px) {
  body { padding-bottom: 72px; }
  .lgc-mob-nav { display: block; }
  /* Hide desktop tab strip on mobile */
  .nav-tab-strip { display: none !important; }
  /* Slim nav on mobile */
  .nav { padding: 0 14px; height: 52px; }
  .nav-logo { font-size: 1.2rem; }
  .nav-right { gap: 10px; }
  .nav-stat { font-size: .85rem; }
  .hrt { font-size: 1rem; }
  /* Gamify strip stacks nicely */
  /* Hide full strip on mobile — compact version lives in nav bar */
  #lgc-gamify-strip { display: none !important; }
}

/* ══════════════════════════════════════════════════
   LEARNING PATH — mobile card layout
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #home { padding: 12px 12px 100px; }

  /* Section header */
  .dl-section-hdr {
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }
  .dl-sec-name { font-size: .95rem !important; }
  .dl-sec-tag  { font-size: .65rem !important; }
  .lgc-perm-hint { font-size: .72rem; }

  /* Unit cards — full width on mobile */
  .dl-node-wrap { width: 100%; max-width: 100% !important; }
  .dl-card {
    border-radius: 14px !important;
    padding: 14px !important;
  }
  .dl-card-badge { font-size: .65rem; }
  .dl-card-title { font-size: .88rem; }
  .dl-card-emoji { font-size: 2rem; }
  .dl-card-img   { max-height: 120px !important; }
  .dl-card-preview { display: none; } /* hide on tiny screens */

  /* Path connector lines */
  .dl-row { margin: 4px 0; }

  /* Progress rings */
  .lgc-ring { width: 36px !important; height: 36px !important; }
}

/* ══════════════════════════════════════════════════
   UNIT HUB — mobile tile grid
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #unit-hub { padding: 10px 12px; }
  .hub-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .hub-tile {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    min-height: 90px;
  }
  .hub-tile-icon  { font-size: 1.8rem !important; }
  .hub-tile-label { font-size: .8rem !important; }
  .hub-tile-desc  { font-size: .68rem !important; max-width: 100% !important; }
  #hub-breadcrumb { font-size: .78rem; }
}

/* ══════════════════════════════════════════════════
   WORD CARDS — learn / practice
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #unit-word-screen { padding: 0; }

  /* Sticky header */
  #unit-word-screen > div > div:first-child {
    padding: 10px 12px 8px !important;
  }

  /* Card nav (prev/next arrows + card) */
  .uw-card-nav { gap: 6px; padding: 0 10px; }
  .uw-prev-btn, .uw-next-btn { width: 34px; height: 34px; font-size: 1rem; flex-shrink: 0; }

  /* Learn card */
  .learn-card {
    border-radius: 16px !important;
    padding: 16px 14px !important;
    margin: 0 !important;
  }
  .learn-card-en  { font-size: .75rem !important; letter-spacing: .12em; }
  .learn-word     { font-size: 2rem !important; }
  .learn-art-badge { font-size: .85rem !important; padding: 3px 10px !important; }
  .learn-audio-btn { font-size: 1.1rem !important; }
  .learn-hint     { font-size: .78rem !important; }
  .learn-continue-btn {
    margin: 10px 12px 0 !important;
    width: calc(100% - 24px) !important;
    border-radius: 14px !important;
    font-size: 1rem !important;
    padding: 14px !important;
  }

  /* Practice answer buttons */
  .pctrls { flex-direction: row !important; gap: 10px !important; padding: 10px 12px !important; }
  .pc { flex: 1 !important; padding: 14px 10px !important; font-size: .88rem !important; border-radius: 12px !important; }

  /* Progress stats bar */
  #uws-stats { padding: 6px 12px !important; font-size: .78rem !important; }
  #uws-prog  { margin: 0; }

  /* Lives bar */
  .lv-bar   { gap: 4px; padding: 6px 0 2px; }
  .lv-heart { font-size: 1.2rem; }

  /* Reset button */
  .lgc-reset-btn { font-size: .65rem; padding: 2px 10px; margin: 6px 12px 0 0; }

  /* Word count below card */
  #uws-area > div:last-child { font-size: .72rem !important; }
}

/* ══════════════════════════════════════════════════
   MCQ TEST — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .qopts { gap: 8px !important; padding: 0 12px !important; }
  .qopt  {
    padding: 14px 12px !important;
    font-size: .9rem !important;
    border-radius: 12px !important;
    min-height: 50px;
  }
  .qcard { padding: 16px 14px !important; margin: 0 10px !important; border-radius: 16px !important; }
  .qfb   { margin: 8px 12px 0 !important; font-size: .82rem !important; }
}

/* ══════════════════════════════════════════════════
   SPELL / ARTICLE / MATCH — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Spell screen */
  .spell-card { padding: 16px 12px !important; margin: 0 10px !important; }
  .spell-input { font-size: 1.1rem !important; padding: 12px !important; }
  .spell-btn   { padding: 13px !important; font-size: .95rem !important; }

  /* Article drums */
  .gender-drums { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; padding: 0 10px !important; }
  .gender-drum  { padding: 18px 8px !important; font-size: .9rem !important; border-radius: 12px !important; }

  /* Match pairs */
  .match-pair-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 10px !important; }
  .match-btn { padding: 12px 8px !important; font-size: .82rem !important; border-radius: 10px !important; min-height: 48px; }
}

/* ══════════════════════════════════════════════════
   STORY / CONVERSATION READER — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #reading { padding: 12px 12px 100px; }
  .seg-text { font-size: .98rem !important; line-height: 1.8 !important; }
  .seg-en   { font-size: .82rem !important; }
  .seg-img  { max-height: 180px !important; }

  /* Audio player */
  .seg-audio { width: 100% !important; }

  /* Navigation buttons */
  .seg-nav { padding: 12px !important; gap: 8px !important; }
  .seg-nav .dbtn { flex: 1 !important; padding: 13px !important; font-size: .88rem !important; }
}

/* ══════════════════════════════════════════════════
   VOCABULARY TAB — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #vocab { padding: 12px 10px 100px !important; }
  .fc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .fc-card { border-radius: 12px !important; padding: 12px 10px !important; }
  .fc-de   { font-size: .95rem !important; }
  .fc-en   { font-size: .75rem !important; }
}

/* ══════════════════════════════════════════════════
   BILDER (PICTURE EXERCISES) — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pl-grid  { grid-template-columns: 1fr !important; gap: 10px !important; padding: 10px !important; }
  .pl-card  { border-radius: 14px !important; }
  .pl-card-img { max-height: 160px !important; }
}

/* ══════════════════════════════════════════════════
   WRITING SECTION — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #lgc-writing-area { padding: 4px 0; }
  #lgc-writing-area > div { padding: 10px !important; }
  #lgc-writing-input { min-height: 220px !important; font-size: .92rem !important; }
  .lgc-corrected-text { font-size: .88rem !important; }
}

/* ══════════════════════════════════════════════════
   GAMIFICATION — mobile toasts & leaderboard
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #lgc-xp-toast  { top: auto; bottom: 80px; font-size: .85rem; }
  #lgc-mini-toast { bottom: 82px; font-size: .75rem; }
  #lgc-badge-pop { width: 88vw !important; padding: 24px 20px !important; }
  .lgc-badgepop-icon  { font-size: 2.5rem; }
  .lgc-badgepop-name  { font-size: 1.05rem; }
  #lgc-leaderboard-panel { width: 100vw !important; right: -100vw !important; }
  #lgc-leaderboard-panel.open { right: 0 !important; }
  .lgc-daily-inner { padding: 12px 14px; }
  .lgc-daily-opts  { gap: 6px; }
  .lgc-daily-btn   { padding: 8px 12px; font-size: .82rem; }
  .lgc-wb-inner    { padding: 12px 14px; }
  /* Resume screen */
  .lgc-resume-screen { padding: 24px 16px; }
  .lgc-resume-stats  { gap: 16px; padding: 12px 16px; }
  .lgc-rs-n { font-size: 1.2rem; }
}

/* ══════════════════════════════════════════════════
   GAME OVER — mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .go-screen { padding: 24px 14px; }
  .go-title  { font-size: 1.3rem; }
  .go-words  { max-width: 100%; }
}

/* ══════════════════════════════════════════════════
   BUTTONS — larger tap targets on mobile
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .dbtn {
    padding: 13px 20px !important;
    font-size: .9rem !important;
    border-radius: 12px !important;
    min-height: 46px;
  }
  /* Prevent double-tap zoom on buttons */
  button, a, .dl-card, .hub-tile, .qopt, .match-btn {
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════
   ADD TO HOME SCREEN BANNER
══════════════════════════════════════════════════ */
#lgc-install-banner {
  display: none;
  position: fixed;
  bottom: 72px;
  left: 12px; right: 12px;
  background: linear-gradient(135deg, #1e293b, #334155);
  color: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  z-index: 400;
  align-items: center;
  gap: 12px;
}
#lgc-install-banner.show { display: flex; }
.lgc-install-icon { font-size: 2rem; flex-shrink: 0; }
.lgc-install-text { flex: 1; }
.lgc-install-title { font-weight: 800; font-size: .92rem; margin-bottom: 2px; }
.lgc-install-sub   { font-size: .75rem; color: #94a3b8; }
.lgc-install-btn {
  background: #58cc02;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.lgc-install-close {
  background: none;
  border: none;
  color: #64748b;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════════ */
/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Prevent text selection on interactive elements */
.dl-card, .hub-tile, .ntab, .lgc-mob-tab, .dbtn {
  -webkit-user-select: none;
  user-select: none;
}

/* Focus rings for accessibility */
button:focus-visible, a:focus-visible {
  outline: 2px solid #58cc02;
  outline-offset: 2px;
}

/* ── Compact XP + streak in nav (mobile only) ───────────────── */
.lgc-nav-stats-mob {
  display: none; /* hidden on desktop */
  align-items: center;
  gap: 6px;
}
.lgc-nav-stats-mob span {
  font-size: .72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
#lgc-xp-nav {
  background: linear-gradient(135deg,#ffd700,#f59e0b);
  color: #7c4a00;
}
#lgc-streak-nav {
  background: linear-gradient(135deg,#ff6b35,#ff4b4b);
  color: #fff;
}
@media (max-width: 600px) {
  .lgc-nav-stats-mob { display: flex; }
  /* Also hide Bestenliste button from strip (already hidden) */
  #lgc-lb-btn { display: none; }
}

/* ── Nav bar compact on mobile ──────────────────────────────── */
@media (max-width: 600px) {
  /* Hide hearts on very narrow screens — lives shown in word screen instead */
  .nav-hearts { display: none; }
  /* Hide vocab badge from nav on mobile — it's in bottom nav */
  #vbadge { display: none; }
  /* Give more breathing room to XP + streak */
  .nav-right { gap: 6px; }
  .lgc-nav-stats-mob { gap: 5px; }
  .lgc-nav-stats-mob span { font-size: .68rem; padding: 3px 7px; }
}

@media (max-width: 380px) {
  /* Very small phones — even more compact */
  .lgc-nav-stats-mob span { font-size: .62rem; padding: 2px 6px; }
  #lgc-xp-nav-val::after { content: ''; } /* just show number, no label */
}