/* Phones (768px and under): the site works like an app.
   A tab bar at the bottom (Home · Learn · Get started/My plan · Profile · More), no hamburger: "More" opens a
   sheet above the bar with sign in and the site's other pages. Desktop is unchanged. */

.tabbar { display: none; }

@media (max-width: 768px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    background: var(--b-surface, #0f1b2d); border-top: 1px solid var(--b-line, #203047);
  }
  .tabbar .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none;
    color: var(--b-text-2, #9fb2c8); font: 600 11px var(--b-font, system-ui, sans-serif);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tab.active, .tabbar .tab-more[aria-expanded="true"] { color: var(--b-teal, #6AA59C); font-weight: 800; }
  .tabbar .ti { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  .ti-home    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3C/svg%3E"); }
  .ti-learn   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h7a3 3 0 0 1 3 3v12a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M22 5h-7a3 3 0 0 0-3 3v12a2 2 0 0 1 2-2h8z'/%3E%3C/svg%3E"); }
  .ti-plan    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='5' r='2'/%3E%3Cpath d='M8 19h6a4 4 0 0 0 0-8h-4a4 4 0 0 1 0-8h6'/%3E%3C/svg%3E"); }
  .ti-profile { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
  .ti-more    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }

  /* room for the bar under every page */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important; }

  /* no hamburger and no top-bar links on phones: the tab bar does that job */
  .topbar .nav-burger, .topbar .nav-desktop { display: none !important; }

  /* the More sheet: slides up above the tab bar */
  .topbar .nav-mobile-menu {
    position: fixed !important; top: auto !important; left: 8px !important; right: 8px !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important; z-index: 1190;
    border: 1px solid var(--b-line, #203047); border-radius: 20px; padding: 10px 0 !important;
    background: var(--b-surface, #0f1b2d) !important; box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  }
  .topbar .nav-mobile-menu:not(.is-open) { display: none !important; }
  .topbar .nav-mobile-menu .nav-link { padding: 14px 20px; font-size: 16px; }
  .topbar .nav-mobile-menu .btn { min-height: 44px; }

  /* app screens don't need the site footer (it stays on reading pages: Blog, About, FAQ, Privacy, Contact) */
  /* hidden by default, so it never flashes on a refresh; reading pages (blog, about, faq, privacy) show it */
  body:not(.reading-page) .site-footer { display: none !important; }

  /* focus mode: inside a level the top bar and tab bar step away (the level's own ✕ Leave is the way out) */
  body.in-level .topbar, body.in-level .tabbar { display: none !important; }
  body.in-level { padding-bottom: env(safe-area-inset-bottom) !important; }
}

/* Sign in / sign out at the top right (phones only) */
.nav-account { display: none; }
@media (max-width: 768px) {
  .topbar .nav-account { display: flex; margin-left: auto; }
  .nav-account .acct {
    display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--b-line, #203047); background: var(--b-surface-2, #16263c); color: var(--b-text, #e6edf6);
    font: 700 14px var(--b-font, system-ui, sans-serif); text-decoration: none; cursor: pointer;
  }
  .nav-account .ai { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  .ai-in  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E"); }
  .ai-out { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
  .nav-account a.acct { border-color: var(--b-teal, #6AA59C); color: var(--b-teal, #6AA59C); }
}
@media (max-width: 768px) {
  .topbar .nav-mobile-menu .nav-items { gap: 0 !important; }
  .topbar .nav-mobile-menu .nav-link { background: none !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
  .topbar .nav-mobile-menu .nav-link + .nav-link { border-top: 1px solid var(--b-line, #203047) !important; }
}

/* Home on phones: one column, the playable demo card shown (it's the game), the plan journey compact */
@media (max-width: 768px) {
  .nh1 .nh-hero-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .nh1 .nh-hero-right { display: block !important; }
  .nh1 .nh1-by { position: static !important; white-space: normal !important; margin-top: 8px !important; }
}
@media (max-width: 768px) {
  /* game first: headline, the playable demo, then Get started and the journey */
  .nh1 .nh-hero-left { display: contents !important; }
  .nh1 .nh-hero-headline { order: 1; font-size: 28px !important; line-height: 1.15 !important; margin: 0 !important; }
  .nh1 .nh-hero-sub { display: none !important; }
  .nh1 .nh-hero-right { order: 2; }
  .nh1 .nh-hero-actions { order: 3; margin: 0 !important; }
  .nh1 .nh-cta-sub { order: 4; margin: 0 !important; }
  .nh1 .nh1-journey { order: 5; margin: 4px 0 0 !important; padding-top: 0 !important; }
  .nh1 .nh1-by { order: 6; margin: 0 !important; }
  .nh1 .nh-hero-actions .nh-btn { flex: 1 1 auto; text-align: center; padding: 14px 20px; font-size: 16px; }
  /* the demo's tool chips on one row */
  .nh1 .nh1-pvpills { flex-wrap: nowrap !important; overflow-x: auto; gap: 6px !important; -webkit-overflow-scrolling: touch; }
  .nh1 .nh1-pvpill { flex: none !important; white-space: nowrap; }
  /* journey: short labels, no overlap */
  .nh1 .nh1-jline .nm { font-size: 11px !important; white-space: normal !important; line-height: 1.25; }
  .nh1 .nh1-jline .nm > span[aria-hidden] { display: none; }
}

/* Add to Home Screen sheet (assets/mobile_app.js) */
#bp-install { position: fixed; inset: 0; z-index: 3000; }
#bp-install .bpi-back { position: absolute; inset: 0; background: rgba(5,9,18,.72); }
#bp-install .bpi {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--b-surface, #0f1b2d); border-top: 1px solid var(--b-line, #203047); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; gap: 14px; color: var(--b-text, #e6edf6); font-family: var(--b-font, system-ui, sans-serif);
}
#bp-install .bpi-top { display: flex; align-items: center; gap: 14px; }
#bp-install .bpi-top img { border-radius: 14px; flex: none; }
#bp-install .bpi-top b { display: block; font-size: 19px; }
#bp-install .bpi-top span { font-size: 14px; color: var(--b-text-2, #9fb2c8); }
#bp-install ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
#bp-install .bpi-add { height: 52px; border: 0; border-radius: 999px; background: var(--b-teal, #6AA59C); color: #0b1220; font: 800 16px var(--b-font, system-ui, sans-serif); }
#bp-install .bpi-later { height: 44px; border: 0; background: none; color: var(--b-text-2, #9fb2c8); font: 700 15px var(--b-font, system-ui, sans-serif); }
#bp-install .bpi-ios { margin: 0; font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; background: var(--b-surface-2, #16263c); }
.topbar .nav-mobile-menu .nav-install { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--b-teal, #6AA59C); font: 700 16px var(--b-font, system-ui, sans-serif); cursor: pointer; }

@media (max-width: 768px) {
  /* "A new version is ready": one slim strip under the top bar, clear of the tab bar and the pinned buttons */
  #bp-newver { left: 8px !important; right: 8px !important; transform: none !important; max-width: none !important;
    top: calc(68px + env(safe-area-inset-top)) !important; bottom: auto !important; border-radius: 14px !important; justify-content: space-between; font-size: 14px !important; }
  #bp-newver span { flex: 1; min-width: 0; }
  #bp-newver button { flex: none; }
  body.in-level #bp-newver { top: calc(8px + env(safe-area-inset-top)) !important; }

  /* Home: Get started stays pinned just above the tab bar, so it shows on every phone height */
  .nh1 .nh-hero-actions {
    position: fixed !important; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 1100;
    padding: 10px 16px; background: var(--b-bg, #0b1220); border-top: 1px solid var(--b-line, #203047);
    display: flex !important; align-items: center; gap: 14px;
  }
  .nh1 .nh-hero-actions .nh-btn { flex: 1 1 auto; }
  .nh1 .nh-hero-actions .nh-btn-ghost { flex: none; font-size: 13px; }
  .nh1 { padding-bottom: 76px; }
}

/* Home on phones: more breathing room (16px sides, calmer sizes, a compact demo, a lighter pinned button) */
@media (max-width: 768px) {
  .nh1.nh-page .nh-hero, .nh1 .nh-hero.nh1-hero { padding: 18px 16px 24px !important; }
  .nh1 .nh-hero-inner { gap: 16px !important; }
  .nh1 .nh-hero-headline { font-size: 26px !important; text-wrap: balance; }
  .nh1 .nh1-preview { padding: 14px 14px 12px !important; gap: 10px !important; max-width: none !important; border-radius: 16px !important; }
  .nh1 .nh1-pvtop { font-size: 11px !important; }
  .nh1 .nh1-pvq { font-size: 16px !important; }
  .nh1 .nh1-sheet th, .nh1 .nh1-sheet td { padding-top: 5px !important; padding-bottom: 5px !important; font-size: 13px !important; }
  .nh1 .nh-hero-actions { padding: 8px 16px !important; border-top: 0 !important; box-shadow: 0 -10px 16px rgba(11,18,32,.9); }
  .nh1 .nh-hero-actions .nh-btn { padding: 13px 16px !important; font-size: 15px !important; }
}
/* Phones: the page's one-screen minimum height leaves out the tab bar's room (the body's padding adds it back),
   otherwise every one-screen page scrolled 62px of empty space */
@media (max-width: 768px) { #react-entry-point, #_dash-app-content { min-height: calc(100svh - 62px - env(safe-area-inset-bottom)) !important; } body.in-level #react-entry-point, body.in-level #_dash-app-content { min-height: 100svh !important; } }
/* Game frames stay invisible until ready (assets/frame_reveal.js): no white flash from Safari while they load */
iframe#play-frame { transition: opacity .15s ease; }
iframe#play-frame.frame-wait { opacity: 0; }
/* Phones: no gap under the game frame, so a one-screen page ends right above the tab bar */
@media (max-width: 768px) { #_pages_content div:has(> iframe#play-frame) { padding-bottom: 0 !important; } }

/* Home-screen app only (html.standalone, set in app.py): the page runs up under the phone's status bar there,
   so the top bar makes room for it, and a lesson (bars hidden) starts below it. The browser is unchanged. */
html.standalone .topbar { padding-top: calc(12px + env(safe-area-inset-top)) !important; }
@media (max-width: 768px) {
  html.standalone body.in-level { padding-top: env(safe-area-inset-top) !important; }
}