/* =====================================================================
   IGTT UI CORE — shared design foundation · 2026-09-25
   One final cascade layer for app chrome, notifications and reusable UI
   primitives. Page/game CSS still owns each page's distinctive artwork.
   ===================================================================== */

:root {
  --igtt-bg: #0b0907;
  --igtt-surface: #10100f;
  --igtt-surface-raised: #171412;
  --igtt-parchment: #eadfc9;
  --igtt-cream: #f5f0e8;
  --igtt-accent: #e8c9a0;
  --igtt-muted: rgba(245,240,232,.56);
  --igtt-border: rgba(245,240,232,.10);
  --igtt-radius-sm: 10px;
  --igtt-radius-md: 14px;
  --igtt-radius-lg: 20px;
  --igtt-radius-xl: 28px;
  --igtt-space-1: 4px;
  --igtt-space-2: 8px;
  --igtt-space-3: 12px;
  --igtt-space-4: 16px;
  --igtt-space-5: 24px;
  --igtt-space-6: 32px;
  --igtt-page-max: 1180px;
  --igtt-mobile-bottom-space: calc(88px + max(8px, env(safe-area-inset-bottom)));
}

/* Structural primitives. They deliberately avoid page-specific colors so
   existing visual identity remains unchanged while markup gains one system. */
.igtt-panel { box-sizing:border-box; min-width:0; }
.igtt-btn { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button.igtt-btn, .igtt-btn[role="button"] { cursor:pointer; }
.igtt-control { box-sizing:border-box; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.igtt-popover { box-sizing:border-box; overscroll-behavior:contain; }
.igtt-modal-overlay { position:fixed; inset:0; box-sizing:border-box; }
.igtt-modal-card, .igtt-dialog { box-sizing:border-box; }
dialog.igtt-dialog { overscroll-behavior:contain; }

/* Centered collection dialogs used by Arcade + Profile. Content styling stays
   local; geometry/backdrop/close chrome has one source of truth. */
dialog.igtt-dialog--collection {
  position:fixed;
  inset:0;
  width:min(1040px,calc(100% - 34px));
  max-width:none;
  max-height:min(88dvh,880px);
  margin:auto;
  padding:0 22px 24px;
  border:1px solid rgba(232,201,160,.28);
  border-radius:24px;
  background:radial-gradient(circle at 50% 0,rgba(232,201,160,.075),transparent 32%),linear-gradient(180deg,#171612,#090908 68%,#070706);
  box-shadow:0 32px 100px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:auto;
  overscroll-behavior:contain;
}
dialog.igtt-dialog--collection::backdrop { background:rgba(0,0,0,.74); backdrop-filter:blur(5px); }
dialog.igtt-dialog--collection[open] { animation:igtt-dialog-in .24s cubic-bezier(.18,.78,.22,1); }
@keyframes igtt-dialog-in { from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:none} }

.igtt-dialog-head {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 -4px;
  padding:20px 4px 16px;
  border-bottom:1px solid rgba(232,201,160,.10);
  background:linear-gradient(180deg,#171612 82%,rgba(23,22,18,.96));
}
.igtt-dialog-close {
  display:grid;
  place-items:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#eee1cd;
  font-size:17px;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.igtt-dialog-close:hover { border-color:rgba(232,201,160,.38); background:rgba(232,201,160,.08); }

@media (max-width:700px) {
  dialog.igtt-dialog--collection { width:calc(100% - 18px); max-height:calc(100dvh - 24px); padding:0 14px 18px; border-radius:20px; }
  .igtt-dialog-head { padding:16px 2px 13px; }
}

@media (max-width:760px) {
  .igtt-btn { min-height:44px; }
  .igtt-dialog, .igtt-modal-card { max-height:calc(100dvh - 24px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== APP SHELL / MENU / BOTTOM NAV ===== */
/* =========================================================
   PWA / APP SHELL
   The site is still a responsive web app in a browser, but these
   rules make the installed experience feel like a native app.
   ========================================================= */
:root {
  --app-bg: #080808;
  --app-surface: rgba(18, 18, 18, .88);
  --app-surface-strong: rgba(25, 25, 25, .96);
  --app-border: rgba(245, 240, 232, .10);
  --app-muted: rgba(245, 240, 232, .52);
  --app-cream: #f5f0e8;
  --app-accent: #e8c9a0;
  --app-bottom-space: 120px;
}

html {
  background: var(--app-bg);
  overscroll-behavior-y: auto;
}

body.app-shell {
  min-height: 100dvh;
  padding-bottom: var(--app-bottom-space);
  -webkit-tap-highlight-color: transparent;
  overflow-y: visible; /* keep document (html) as the only scroll container */
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* Landing uses the shared top chrome but has no app bottom nav. */
body.app-shell.app-landing {
  padding-bottom: 0;
}

body.app-shell .header-logo {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  height: 68px;
  min-height: 68px;
  margin: 0;
  padding: 14px 72px 10px;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.app-shell .header-logo .think-logo {
  width: auto;
  height: 36px;
  max-width: min(240px, 70vw);
}

body.app-shell .top-left-menu {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 1200;
}

body.app-shell .menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(20,20,20,.86);
  color: var(--app-cream);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.app-shell .menu-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

body.app-shell .menu-options {
  position: absolute;
  top: 52px;
  left: 0;
  width: min(290px, calc(100vw - 24px));
  margin: 0;
  padding: 10px;
  gap: 2px;
  border: 1px solid var(--app-border);
  border-radius: 20px;
  background: rgba(13,13,13,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.48);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.app-shell .menu-options.open { display: flex; animation: appMenuIn .16s ease-out; }
@keyframes appMenuIn { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }

.menu-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 12px;
  margin-bottom: 4px;
  color: rgba(245,240,232,.5);
  font: .58rem/1 'Geist Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.menu-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--app-cream);
  font-size: 22px;
  line-height: 1;
}

body.app-shell .menu-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(245,240,232,.84);
  font: 1rem 'Jua', sans-serif;
  text-align: left;
}

body.app-shell .menu-item:hover:not(.disabled),
body.app-shell .menu-item:focus-visible {
  transform: none;
  color: #fff;
  background: rgba(255,255,255,.06);
}

.menu-install { cursor: pointer; }

.menu-divider {
  height: 1px;
  margin: 7px 8px;
  background: rgba(255,255,255,.08);
}


.app-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1100;
  transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(8,8,8,.90);
  box-shadow: 0 -12px 36px rgba(0,0,0,.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.app-nav-item {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 14px;
  color: rgba(245,240,232,.48);
  text-decoration: none;
  font: .58rem/1 'Geist Mono', monospace;
  letter-spacing: .04em;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}

.app-nav-item svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-nav-item.is-active {
  color: var(--app-cream);
  background: rgba(232,201,160,.09);
}

.app-nav-item.is-active svg { color: var(--app-accent); }
.app-nav-item:active { transform: scale(.94); }

/* Keep the mobile nav pinned to the visible app viewport while scrolling. */
@media (max-width: 899px) {
  .app-bottom-nav {
    min-height: 66px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* Installed apps get a little more breathing room around the status bar. */
@media (display-mode: standalone) {
  body.app-shell .header-logo {
    padding-top: max(14px, env(safe-area-inset-top));
    height: calc(68px + env(safe-area-inset-top));
  }
  body.app-shell .top-left-menu { top: max(12px, env(safe-area-inset-top)); }
}

@media (min-width: 900px) {
  body.app-shell { padding-bottom: 110px; }
  .app-bottom-nav {
    position: fixed;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    bottom: 18px;
    width: min(680px, calc(100vw - 40px));
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    padding: 7px;
  }
  .app-nav-item { min-height: 52px; flex-direction: row; gap: 8px; padding: 0 18px; font-size: .62rem; }
  body.app-shell .header-logo { height: 100px; min-height: 100px; padding: 20px 0; margin: 0; background: transparent; border-bottom: 0; box-shadow:none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 520px) {
  body.app-shell .header-logo { height: 62px; min-height: 62px; padding-left: 64px; padding-right: 64px; }
  body.app-shell .header-logo .think-logo { height: 30px; max-width: 190px; }
  .app-nav-item { min-height: 58px; }
}

/* Make common controls comfortable for thumbs. */
body.app-shell button,
body.app-shell a,
body.app-shell input,
body.app-shell textarea,
body.app-shell select { touch-action: manipulation; }

/* Standalone mode should never look like a web page with a browser viewport. */
@media (display-mode: standalone) {
  body { min-height: 100dvh; }
  .app-landing .app-bottom-nav { display: none; }
}


/* Preserve the polished bottom-nav look and iPhone safe-area behavior that
   previously came from later override files. These now live beside the base. */
@media (max-width:899px) {
  body.app-shell { padding-bottom:var(--igtt-mobile-bottom-space); }
  body.app-shell .header-logo {
    padding-left:max(62px,calc(52px + env(safe-area-inset-left)));
    padding-right:max(62px,calc(52px + env(safe-area-inset-right)));
  }
  .app-bottom-nav {
    left:0; right:0; bottom:0; width:100%;
    padding-left:max(5px,env(safe-area-inset-left));
    padding-right:max(5px,env(safe-area-inset-right));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  .app-nav-item { min-width:0; min-height:56px; padding-inline:2px; }
  .app-nav-item svg { width:20px; height:20px; }
}
@media (max-width:699px) {
  .app-bottom-nav {
    background:rgba(7,7,7,.96);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -10px 36px rgba(0,0,0,.28);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .app-nav-item.is-primary {
    transform:translateY(-5px);
    background:rgba(232,201,160,.08);
    border:1px solid rgba(232,201,160,.18);
    box-shadow:0 8px 20px rgba(0,0,0,.26);
  }
}
@media (min-width:700px) {
  .app-bottom-nav {
    max-width:700px;
    margin:0 auto 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:rgba(7,7,7,.88);
    box-shadow:0 18px 50px rgba(0,0,0,.26);
    backdrop-filter:blur(18px);
  }
  .app-nav-item { border-radius:16px; }
}
@media (max-width:360px) {
  .app-nav-item { font-size:clamp(.43rem,2.15vw,.52rem); letter-spacing:.015em; gap:4px; }
  .app-nav-item svg { width:19px; height:19px; }
  body.app-shell .header-logo .think-logo { max-width:168px; }
}


/* Header transparency is intentional on every viewport. The wordmark floats over
   the same site world as the page; never create a separate black masthead. */
.header-logo.igtt-app-header,
body.app-shell .header-logo.igtt-app-header,
body.app-landing .header-logo.igtt-app-header,
body.app-shell header.header:not(.header-logo) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ===== RESPONSIVE HEADER / TOP CHROME ===== */
/* =====================================================================
   IGTT MOBILE HEADER V24 — unified iPhone/mobile top chrome
   Loads LAST. Desktop is intentionally untouched.
   ===================================================================== */

@media (max-width: 899px) {
  :root {
    --igtt-header-top-pad: max(20px, calc(env(safe-area-inset-top) + 8px));
    --igtt-header-bottom-pad: 14px;
    --igtt-header-logo-h: 30px;
  }

  /* Every modern IGTT logo header gets the same visual breathing room. */
  .header-logo {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    height: auto;
    margin-top: 0;
    padding-top: var(--igtt-header-top-pad);
    padding-bottom: var(--igtt-header-bottom-pad);
  }

  .header-logo .think-logo {
    display: block;
    width: auto;
    height: var(--igtt-header-logo-h);
    max-width: min(190px, 54vw);
    object-fit: contain;
  }

  /* App pages: preserve the sticky header, but stop pinning its contents
     against the very top edge of iPhones. */
  body.app-shell .header-logo {
    top: 0;
    min-height: 0;
    height: auto;
    padding-top: var(--igtt-header-top-pad);
    padding-bottom: var(--igtt-header-bottom-pad);
    padding-left: max(62px, calc(52px + env(safe-area-inset-left)));
    padding-right: max(62px, calc(52px + env(safe-area-inset-right)));
  }

  body.app-shell .header-logo .think-logo {
    height: var(--igtt-header-logo-h);
    max-width: min(190px, 54vw);
  }

  /* 44px menu button centered on the 30px logo's visual center. */
  body.app-shell .top-left-menu {
    top: max(13px, calc(env(safe-area-inset-top) + 1px));
    left: max(12px, calc(env(safe-area-inset-left) + 10px));
  }

  /* A handful of legacy question pages still use .header rather than
     .header-logo. Give them the exact same top/bottom rhythm. */
  header.header,
  .header:not(.header-logo) {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding-top: var(--igtt-header-top-pad);
    padding-bottom: var(--igtt-header-bottom-pad);
  }

  .header .title-name-image {
    display: block;
    width: auto;
    height: var(--igtt-header-logo-h);
    max-width: min(190px, 54vw);
    object-fit: contain;
  }
}

/* iPhone 11 / 12 / 13 / 14-sized portrait widths: add a tiny bit more
   optical space so the wordmark does not feel pressed into the status bar. */
@media (min-width: 375px) and (max-width: 430px) {
  :root {
    --igtt-header-top-pad: max(22px, calc(env(safe-area-inset-top) + 9px));
    --igtt-header-bottom-pad: 15px;
  }
}

/* Very small phones still get breathing room without wasting vertical space. */
@media (max-width: 360px) {
  :root {
    --igtt-header-top-pad: max(17px, calc(env(safe-area-inset-top) + 7px));
    --igtt-header-bottom-pad: 12px;
    --igtt-header-logo-h: 28px;
  }
  .header-logo .think-logo,
  body.app-shell .header-logo .think-logo,
  .header .title-name-image {
    max-width: min(174px, 55vw);
  }
  body.app-shell .top-left-menu {
    top: max(10px, env(safe-area-inset-top));
  }
}

/* 2026-09-25 · Mobile header alignment refinement.
   These four experiences intentionally use the same one-row mobile chrome as
   the rest of the app: centered wordmark with menu left, wallet + bell right.
   The header remains transparent so the page's existing world/background shows. */
@media (max-width:899px){
  /* Shared header variables and app-shell rules own the dimensions; this
     section only normalizes the one-row mobile chrome. */
  body.app-shell .header-logo,
  body.app-landing .header-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:0;
    height:auto;
    margin:0;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body.app-shell .header-logo .think-logo,
  body.app-landing .header-logo .think-logo{
    display:block;
    margin:0 auto;
    object-fit:contain;
  }

  /* Explicitly restore the standard single-row control positions. These match
     the other app pages rather than creating a second utility row. */
  body.app-shell .top-left-menu,
  body.app-landing .top-left-menu{
    position:fixed;
    top:max(13px,calc(env(safe-area-inset-top) + 1px));
    left:max(12px,calc(env(safe-area-inset-left) + 10px));
    z-index:1210;
  }
  body.app-shell .menu-toggle,
  body.app-landing .menu-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
  }
  body.app-shell .igtt-notif-bell,
  body.app-landing .igtt-notif-bell{
    position:fixed;
    top:max(16px,calc(env(safe-area-inset-top) + 4px));
    right:max(12px,env(safe-area-inset-right));
    width:36px;
    height:36px;
    border-radius:50%;
  }
  body.app-shell .igtt-coin-pill,
  body.app-landing .igtt-coin-pill{
    position:fixed;
    top:max(16px,calc(env(safe-area-inset-top) + 4px));
    right:max(64px,calc(env(safe-area-inset-right) + 52px));
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:50%;
  }
  body.app-shell .menu-options,
  body.app-landing .menu-options{top:52px}
  body.app-shell .igtt-wallet-popover,
  body.app-landing .igtt-wallet-popover{top:max(62px,calc(env(safe-area-inset-top) + 50px))}
  body.app-shell .igtt-notif-popover,
  body.app-landing .igtt-notif-popover{top:max(62px,calc(env(safe-area-inset-top) + 50px))}
}

/* ===== NOTIFICATIONS / THOUGHT COIN WALLET ===== */
.igtt-notification-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;justify-content:center;padding:clamp(18px,7vh,90px) 18px 18px;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
      .igtt-notification-card{width:min(460px,100%);border:1px solid rgba(232,201,160,.28);border-radius:28px;padding:28px;background:linear-gradient(145deg,rgba(25,24,22,.98),rgba(7,7,7,.98));box-shadow:0 28px 80px rgba(0,0,0,.5);color:#f5f0e8;text-align:center}
      .igtt-notification-icon{font-size:2.2rem;margin-bottom:10px}
      .igtt-notification-card h2{font-family:Jua,sans-serif;font-size:1.55rem;margin:0 0 10px}
      .igtt-notification-card p{font-family:"Geist Mono",monospace;font-size:.72rem;line-height:1.65;color:rgba(245,240,232,.68);margin:0 auto 20px;max-width:380px}
      .igtt-notification-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
      .igtt-notification-btn{border:0;border-radius:999px;padding:13px 18px;font-family:"Geist Mono",monospace;font-size:.68rem;letter-spacing:.08em;cursor:pointer}
      .igtt-notification-enable{background:#e8c9a0;color:#080808}
      .igtt-notification-later{background:rgba(255,255,255,.08);color:#f5f0e8}
      .igtt-notification-ios-note{margin-top:14px!important;font-size:.62rem!important}

      /* Toggle row (reused inside the popover) */
      .igtt-notification-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
      .igtt-notification-toggle-copy{min-width:0}
      .igtt-notification-toggle-title{font-family:Jua,sans-serif;font-size:1rem;color:#f5f0e8}
      .igtt-notification-toggle-sub{font-family:"Geist Mono",monospace;font-size:.58rem;color:rgba(245,240,232,.52);margin-top:4px;line-height:1.5}
      .igtt-switch{width:52px;height:30px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.08);padding:3px;cursor:pointer;flex:0 0 auto}
      .igtt-switch span{display:block;width:22px;height:22px;border-radius:50%;background:#777;transition:transform .2s ease,background .2s ease}
      .igtt-switch.is-on{background:rgba(232,201,160,.25);border-color:rgba(232,201,160,.5)}
      .igtt-switch.is-on span{transform:translateX(22px);background:#e8c9a0}

      /* Recent activity list (reused inside the popover) */
      .igtt-notification-list{display:grid;gap:8px}
      .igtt-notification-item{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(0,0,0,.18);text-align:left;transition:background .14s ease,border-color .14s ease,transform .1s ease}
      .igtt-notification-item.is-link{cursor:pointer}
      .igtt-notification-item.is-link:hover,.igtt-notification-item.is-link:focus-visible{background:rgba(232,201,160,.08);border-color:rgba(232,201,160,.35);outline:none}
      .igtt-notification-item.is-link:active{transform:scale(.99)}
      .igtt-notification-body{min-width:0;flex:1}
      .igtt-notification-item strong{display:block;font-family:Jua,sans-serif;font-size:.88rem;color:#f5f0e8;font-weight:normal}
      .igtt-notification-item p{font-family:"Geist Mono",monospace;font-size:.6rem;color:rgba(245,240,232,.62);margin:5px 0 0;line-height:1.5;white-space:pre-line}
      .igtt-notification-item small{display:block;font-family:"Geist Mono",monospace;font-size:.53rem;color:rgba(245,240,232,.35);margin-top:6px}
      .igtt-notification-item.is-unread strong{color:#e8c9a0}
      .igtt-notification-item.is-weekly-recap{border-color:rgba(232,201,160,.24);background:linear-gradient(145deg,rgba(34,28,23,.42),rgba(0,0,0,.16))}
      .igtt-notification-item.is-weekly-recap strong{color:#e8c9a0}
      .igtt-weekly-recap{width:100%;display:grid;gap:10px}
      .igtt-weekly-recap-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(232,201,160,.16)}
      .igtt-weekly-recap-head span{font:650 .5rem/1 'Geist Mono',monospace;letter-spacing:.12em;color:rgba(245,240,232,.45)}
      .igtt-weekly-recap-head b{font:400 1.05rem/1 Jua,sans-serif;color:#e8c9a0}
      .igtt-weekly-recap-boards{display:grid;gap:6px}
      .igtt-weekly-recap-board{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 9px;border-radius:12px;background:rgba(255,255,255,.035)}
      .igtt-weekly-recap-board>span{font-size:.92rem}.igtt-weekly-recap-board div{min-width:0}.igtt-weekly-recap-board div b{display:block;font:400 .7rem/1.2 Jua,sans-serif;color:#f5f0e8}.igtt-weekly-recap-board div small{margin-top:2px;font:500 .48rem/1.35 'Geist Mono',monospace;color:rgba(245,240,232,.43)}
      .igtt-weekly-recap-board>strong{font:400 .82rem/1 Jua,sans-serif!important;color:#e8c9a0!important;white-space:nowrap;text-align:right}.igtt-weekly-recap-board>strong em{display:block;margin-top:4px;font:650 .43rem/1 "Geist Mono",monospace;font-style:normal;letter-spacing:.03em;color:rgba(232,201,160,.68)}
      .igtt-weekly-recap-cta{font:650 .5rem/1 'Geist Mono',monospace;letter-spacing:.09em;color:#e8c9a0;text-align:right}
      .igtt-notification-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#e8c9a0;margin-top:6px;box-shadow:0 0 0 3px rgba(232,201,160,.18)}
      .igtt-notification-chevron{flex:0 0 auto;align-self:center;color:rgba(245,240,232,.3);font-size:1.1rem;line-height:1}
      .igtt-notification-empty{padding:20px 14px;text-align:center;font-family:"Geist Mono",monospace;font-size:.62rem;color:rgba(245,240,232,.42);border:1px dashed rgba(255,255,255,.1);border-radius:16px}

      /* Thought Coin wallet — persistent beside notifications */
      .igtt-coin-pill{position:fixed;top:max(12px,env(safe-area-inset-top));right:64px;z-index:1200;height:44px;min-width:64px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(232,201,160,.18);border-radius:14px;background:linear-gradient(145deg,rgba(27,25,22,.94),rgba(13,13,13,.9));color:#e8c9a0;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .12s ease,box-shadow .18s ease}
      .igtt-coin-pill:hover{background:linear-gradient(145deg,rgba(36,32,27,.96),rgba(17,17,17,.94));border-color:rgba(232,201,160,.34)}
      .igtt-coin-pill:active{transform:scale(.96)}
      .igtt-coin-pill.is-changing{animation:igttCoinPulse .42s cubic-bezier(.2,.8,.2,1)}
      .igtt-coin-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;font-size:21px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:drop-shadow(0 2px 3px rgba(0,0,0,.34))}
      .igtt-coin-count{font:700 .78rem/1 "Geist Mono",monospace;letter-spacing:.01em;color:#f0d7b4;font-variant-numeric:tabular-nums}
      .igtt-coin-delta{position:absolute;left:50%;top:-13px;transform:translateX(-50%);font:800 .58rem/1 "Geist Mono",monospace;letter-spacing:.04em;color:#f0d7b4;text-shadow:0 2px 8px rgba(0,0,0,.9);pointer-events:none;animation:igttCoinDelta 1.15s ease-out forwards;white-space:nowrap}
      .igtt-coin-delta.is-spend{color:rgba(245,240,232,.72)}
      @keyframes igttCoinPulse{0%{transform:scale(1)}45%{transform:scale(1.07);box-shadow:0 10px 32px rgba(232,201,160,.16)}100%{transform:scale(1)}}
      @keyframes igttCoinDelta{0%{opacity:0;transform:translate(-50%,4px)}18%{opacity:1;transform:translate(-50%,-2px)}100%{opacity:0;transform:translate(-50%,-16px)}}
      .igtt-coin-mobile-badge{display:none}
      @media (display-mode:standalone){.igtt-coin-pill{top:max(12px,env(safe-area-inset-top))}}
      @media (max-width:899px){
        .igtt-coin-pill{top:max(16px,calc(env(safe-area-inset-top) + 4px));right:max(64px,calc(env(safe-area-inset-right) + 52px));width:36px;height:36px;min-width:36px;padding:0;gap:0;border-radius:50%}
        .igtt-coin-pill .igtt-coin-icon{width:22px;height:22px;flex-basis:22px;font-size:21px}
        .igtt-coin-pill .igtt-coin-count{display:none}
        .igtt-coin-mobile-badge{position:absolute;top:-6px;right:-7px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 3px;border-radius:999px;background:#e8c9a0;color:#120d08;box-shadow:0 0 0 2px rgba(8,8,8,.92);font:800 .5rem/1 "Geist Mono",monospace;letter-spacing:-.02em;font-variant-numeric:tabular-nums;pointer-events:none}
        .igtt-coin-mobile-badge[hidden]{display:none!important}
        .igtt-coin-delta{top:-17px;font-size:.52rem}
      }
      @media (min-width:900px){.igtt-coin-pill{top:20px;right:72px}}

      .igtt-wallet-popover{display:none;position:fixed;top:64px;right:64px;z-index:1201;width:min(270px,calc(100vw - 84px));padding:18px;border:1px solid rgba(232,201,160,.18);border-radius:20px;background:linear-gradient(145deg,rgba(24,22,20,.985),rgba(9,9,9,.985));box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#f5f0e8}
      .igtt-wallet-popover.is-open{display:block;animation:igttPopIn .16s ease-out}
      .igtt-wallet-kicker{font:700 .52rem/1 "Geist Mono",monospace;letter-spacing:.15em;color:rgba(232,201,160,.62)}
      .igtt-wallet-total{display:flex;align-items:center;gap:8px;margin:9px 0 8px;font-family:Jua,sans-serif;color:#f0d7b4}
      .igtt-wallet-total .igtt-coin-icon{width:27px;height:27px;flex-basis:27px;font-size:26px}
      .igtt-wallet-total strong{font:400 2rem/1 Jua,sans-serif;font-variant-numeric:tabular-nums}
      .igtt-wallet-copy{margin:0 0 15px;font:500 .62rem/1.55 "Geist Mono",monospace;color:rgba(245,240,232,.58)}
      .igtt-wallet-action{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid rgba(232,201,160,.22);border-radius:13px;background:rgba(232,201,160,.08);color:#f0d7b4;text-decoration:none;font:700 .58rem/1 "Geist Mono",monospace;letter-spacing:.08em;transition:background .14s ease,border-color .14s ease,transform .1s ease}
      .igtt-wallet-action:hover,.igtt-wallet-action:focus-visible{background:rgba(232,201,160,.13);border-color:rgba(232,201,160,.38);outline:none}
      .igtt-wallet-action:active{transform:scale(.99)}
      @media (max-width:899px){.igtt-wallet-popover{right:max(12px,env(safe-area-inset-right));width:min(270px,calc(100vw - 24px))}}
      @media (min-width:900px){.igtt-wallet-popover{top:72px;right:72px}}

      /* Cloud button — top right, site-wide */
      .igtt-notif-bell{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:1200;width:44px;height:44px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(20,20,20,.86);color:#f5f0e8;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .12s ease}
      .igtt-notif-bell:hover{background:rgba(30,30,30,.9);border-color:rgba(255,255,255,.2)}
      .igtt-notif-bell:active{transform:scale(.94)}
      .igtt-notif-bell svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
      .igtt-notif-bell.has-unread svg{stroke:#e8c9a0}
      .igtt-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;

  /* Sunset Orange Gradient */
  background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
  color: #1a0b00; /* Darkened text color for proper contrast against light orange */

  font-family: "Geist Mono", monospace;
  font-size: .58rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(8,8,8,.9);
  pointer-events: none;
}
      body.app-shell .igtt-notif-bell{ }
      @media (display-mode: standalone){ .igtt-notif-bell{ top:max(12px,env(safe-area-inset-top)); } }
      @media (min-width:900px){ .igtt-notif-bell{ top:20px; right:20px; } }

      .igtt-notif-popover{display:none;position:fixed;top:64px;right:max(12px,env(safe-area-inset-right));z-index:1200;width:min(360px,calc(100vw - 24px));max-height:min(72vh,560px);flex-direction:column;border:1px solid rgba(245,240,232,.10);border-radius:22px;background:rgba(13,13,13,.97);box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
      .igtt-notif-popover.is-open{display:flex;animation:igttPopIn .16s ease-out}
      @media (min-width:900px){ .igtt-notif-popover{ top:72px; right:20px; } }
      @keyframes igttPopIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
      .igtt-notif-popover-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.07);flex:0 0 auto}
      .igtt-notif-popover-header span{font-family:Jua,sans-serif;font-size:1.05rem;color:#f5f0e8}
      .igtt-notif-popover-close{width:30px;height:30px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#f5f0e8;font-size:19px;line-height:1;cursor:pointer}
      .igtt-notif-popover-close:hover{background:rgba(255,255,255,.12)}
      .igtt-notif-popover-body{overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:16px}
      .igtt-notif-section-label{font:.6rem/1 "Geist Mono",monospace;letter-spacing:.14em;color:rgba(245,240,232,.42);margin-bottom:10px}
      .igtt-notif-toggle-section{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}


/* =====================================================================
   2026-09-25 — PRODUCT COHESION / ACCESSIBILITY PASS
   A final restraint layer: clearer hierarchy, larger touch/read targets,
   consistent focus treatment, and calmer motion without flattening the
   Book/Codex/Arcade personalities.
   ===================================================================== */

/* Headings should feel intentional rather than break at awkward words. */
h1,h2,h3{ text-wrap:balance; }
p,li{ text-wrap:pretty; }

/* A visible keyboard focus language across every world. */
:where(a,button,input,textarea,select,summary,[role="button"],[tabindex]):focus-visible{
  outline:2px solid rgba(232,201,160,.92);
  outline-offset:3px;
}
:where(input,textarea,select):focus-visible{
  box-shadow:0 0 0 3px rgba(232,201,160,.10);
}

/* Keep anchors from landing underneath sticky chrome. */
:where(section,[id]){ scroll-margin-top:88px; }

/* Tactile controls should be big enough to hit without becoming visually loud. */
:where(.igtt-btn,.menu-item,.app-nav-item,.igtt-dialog-close,.igtt-notif-bell,.igtt-coin-pill){
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* The bottom nav is navigation, not another content card. Keep its state clear
   while reducing the visual weight of inactive destinations. */
.app-nav-item{ border:1px solid transparent; }
.app-nav-item.is-active{
  border-color:rgba(232,201,160,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Hover only where hover actually exists; touch devices should not get sticky
   hover states after a tap. */
@media (hover:hover) and (pointer:fine){
  .igtt-btn:not(:disabled),.app-nav-item,.menu-item:not(.disabled){ transition:transform .14s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .18s ease; }
  .igtt-btn:not(:disabled):hover{ transform:translateY(-1px); }
}

@media (max-width:899px){
  /* Keep the brand visually centered between the left menu and right utilities. */
  body.app-shell .header-logo{
    height:68px;
    min-height:68px;
    padding-inline:68px;
  }
  body.app-shell .header-logo .think-logo{
    max-width:min(220px,61vw);
  }

  /* No primary action should require a precision tap on mobile. */
  :where(.igtt-btn,button.arcade-btn,a.arcade-btn,.hp-btn,.landing-game-btn,.book-nav-btn){
    min-height:42px;
  }

  /* Micro labels can stay arcade-like without dropping into 6–7px territory. */
  :where(.arcade-kicker,.hp-kicker,.questions-hub-kicker,.codex-paper-kicker,.book-page-chapter){
    line-height:1.35;
  }
}

@media (max-width:560px){
  body.app-shell .header-logo{ padding-inline:62px; }
  body.app-shell .header-logo .think-logo{ max-width:min(205px,58vw); }
  .app-nav-item{ font-size:.6rem; }
}

/* Respect users who ask for less motion. Keep state changes immediate and
   preserve essential wheel positioning, but remove decorative movement. */
@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto!important; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

/* ===== 2026-09-25 MOBILE TOP CHROME V28 — ONE SHARED ROW =====
   One geometry owns the menu, wordmark, wallet and notification bell.
   The header remains in document flow so page content always begins below it. */
@media (max-width:899px){
  :root{
    --igtt-mobile-topbar-top:max(10px,calc(env(safe-area-inset-top) + 2px));
    --igtt-mobile-topbar-control:44px;
    --igtt-mobile-topbar-logo:30px;
    --igtt-mobile-topbar-bottom:12px;
    --igtt-mobile-topbar-height:calc(var(--igtt-mobile-topbar-top) + var(--igtt-mobile-topbar-control) + var(--igtt-mobile-topbar-bottom));
  }

  /* Reserve the entire top bar as real layout space. */
  body.app-shell .header-logo,
  body.app-landing .header-logo,
  .header-logo{
    position:sticky!important;
    top:0!important;
    z-index:900!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--igtt-mobile-topbar-height)!important;
    min-height:var(--igtt-mobile-topbar-height)!important;
    margin:0!important;
    padding:calc(var(--igtt-mobile-topbar-top) + 7px) 108px var(--igtt-mobile-topbar-bottom)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  body.app-shell .header-logo .think-logo,
  body.app-landing .header-logo .think-logo,
  .header-logo .think-logo{
    display:block!important;
    width:auto!important;
    height:var(--igtt-mobile-topbar-logo)!important;
    max-width:min(190px,50vw)!important;
    margin:0!important;
    object-fit:contain!important;
  }

  /* Legacy question headers use the same center line. */
  body.app-shell header.header:not(.header-logo),
  body.app-shell .header:not(.header-logo){
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--igtt-mobile-topbar-height)!important;
    min-height:var(--igtt-mobile-topbar-height)!important;
    margin:0!important;
    padding:calc(var(--igtt-mobile-topbar-top) + 7px) 108px var(--igtt-mobile-topbar-bottom)!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  body.app-shell .header .title-name-image{
    display:block!important;
    width:auto!important;
    height:var(--igtt-mobile-topbar-logo)!important;
    max-width:min(190px,50vw)!important;
    margin:0!important;
    object-fit:contain!important;
  }

  /* Every control shares the same 44px row center. */
  body.app-shell .top-left-menu,
  body.app-landing .top-left-menu{
    position:fixed!important;
    top:var(--igtt-mobile-topbar-top)!important;
    left:max(10px,calc(env(safe-area-inset-left) + 8px))!important;
    z-index:1210!important;
  }
  body.app-shell .menu-toggle,
  body.app-landing .menu-toggle{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border-radius:14px!important;
  }
  body.app-shell .igtt-notif-bell,
  body.app-landing .igtt-notif-bell{
    position:fixed!important;
    top:calc(var(--igtt-mobile-topbar-top) + 3px)!important;
    right:max(10px,calc(env(safe-area-inset-right) + 8px))!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    border-radius:50%!important;
  }
  body.app-shell .igtt-coin-pill,
  body.app-landing .igtt-coin-pill{
    position:fixed!important;
    top:calc(var(--igtt-mobile-topbar-top) + 3px)!important;
    right:max(58px,calc(env(safe-area-inset-right) + 56px))!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    padding:0!important;
    border-radius:50%!important;
  }

  /* Menus/popovers open immediately below that same row. */
  body.app-shell .menu-options,
  body.app-landing .menu-options{
    top:calc(var(--igtt-mobile-topbar-top) + 50px)!important;
  }
  body.app-shell .igtt-wallet-popover,
  body.app-landing .igtt-wallet-popover,
  body.app-shell .igtt-notif-popover,
  body.app-landing .igtt-notif-popover{
    top:calc(var(--igtt-mobile-topbar-top) + 52px)!important;
  }

  /* Sticky anchors account for the real top-bar height too. */
  :where(section,[id]){scroll-margin-top:calc(var(--igtt-mobile-topbar-height) + 10px)!important;}
}

@media (max-width:360px){
  body.app-shell .header-logo,
  body.app-landing .header-logo,
  .header-logo,
  body.app-shell header.header:not(.header-logo),
  body.app-shell .header:not(.header-logo){
    padding-left:98px!important;
    padding-right:98px!important;
  }
  body.app-shell .header-logo .think-logo,
  body.app-landing .header-logo .think-logo,
  .header-logo .think-logo,
  body.app-shell .header .title-name-image{
    max-width:min(168px,47vw)!important;
    height:28px!important;
  }
}


/* ===== 2026-09-25 MOBILE TOP CHROME V29 — TRUE SINGLE ROW =====
   Applies regardless of page body class. All controls and the wordmark share
   one center line, and the in-flow header reserves a clean content gutter. */
@media (max-width:899px){
  :root{
    --igtt-mobile-bar-top:max(10px,calc(env(safe-area-inset-top) + 2px));
    --igtt-mobile-bar-row:44px;
    --igtt-mobile-bar-gap:16px;
    --igtt-mobile-bar-height:calc(var(--igtt-mobile-bar-top) + var(--igtt-mobile-bar-row) + var(--igtt-mobile-bar-gap));
  }
  html,body{scroll-padding-top:calc(var(--igtt-mobile-bar-height) + 8px)!important}
  .header-logo,body.app-shell .header-logo,body.app-landing .header-logo,
  header.header:not(.header-logo),body.app-shell header.header:not(.header-logo){
    position:relative!important;top:auto!important;z-index:850!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;width:100%!important;
    height:var(--igtt-mobile-bar-height)!important;min-height:var(--igtt-mobile-bar-height)!important;
    margin:0!important;padding:var(--igtt-mobile-bar-top) 108px var(--igtt-mobile-bar-gap)!important;
    background:transparent!important;border:0!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .header-logo .think-logo,body.app-shell .header-logo .think-logo,body.app-landing .header-logo .think-logo,
  header.header:not(.header-logo) .title-name-image{
    display:block!important;width:auto!important;height:30px!important;max-width:min(188px,49vw)!important;
    margin:0!important;object-fit:contain!important;transform:none!important;
  }
  .top-left-menu,body.app-shell .top-left-menu,body.app-landing .top-left-menu{
    position:fixed!important;top:var(--igtt-mobile-bar-top)!important;left:max(10px,calc(env(safe-area-inset-left) + 8px))!important;
    width:44px!important;height:44px!important;z-index:1210!important;margin:0!important;
  }
  .menu-toggle,body.app-shell .menu-toggle,body.app-landing .menu-toggle{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;border-radius:14px!important;
  }
  .igtt-notif-bell,body.app-shell .igtt-notif-bell,body.app-landing .igtt-notif-bell{
    position:fixed!important;top:calc(var(--igtt-mobile-bar-top) + 3px)!important;right:max(10px,calc(env(safe-area-inset-right) + 8px))!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;margin:0!important;border-radius:50%!important;z-index:1210!important;
  }
  .igtt-coin-pill,body.app-shell .igtt-coin-pill,body.app-landing .igtt-coin-pill{
    position:fixed!important;top:calc(var(--igtt-mobile-bar-top) + 3px)!important;right:max(58px,calc(env(safe-area-inset-right) + 56px))!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;margin:0!important;padding:0!important;border-radius:50%!important;z-index:1210!important;
  }
  .menu-options{top:calc(var(--igtt-mobile-bar-top) + 50px)!important}
  .igtt-wallet-popover,.igtt-notif-popover{top:calc(var(--igtt-mobile-bar-top) + 52px)!important}
  main,.arcade-shell,.home-v10,.landing-v3-page,.questions-hub,.codex-shell{scroll-margin-top:calc(var(--igtt-mobile-bar-height) + 8px)!important}
  :where(section,[id]){scroll-margin-top:calc(var(--igtt-mobile-bar-height) + 10px)!important}
}
@media(max-width:380px){
  .header-logo,body.app-shell .header-logo,body.app-landing .header-logo,header.header:not(.header-logo),body.app-shell header.header:not(.header-logo){padding-left:100px!important;padding-right:100px!important}
  .header-logo .think-logo,body.app-shell .header-logo .think-logo,body.app-landing .header-logo .think-logo,header.header:not(.header-logo) .title-name-image{height:28px!important;max-width:min(160px,44vw)!important}
}

/* ===== 2026-09-25 MOBILE TOP CHROME V30 — EXACT SHARED CENTERLINE =====
   The header remains in normal document flow to reserve vertical space.
   The wordmark is positioned on the exact same 44px centerline as menu,
   wallet, and notification controls so page headings can never sit underneath. */
@media (max-width:899px){
  :root{
    --igtt-mobile-bar-top:max(10px,calc(env(safe-area-inset-top) + 2px));
    --igtt-mobile-bar-row:44px;
    --igtt-mobile-logo-h:30px;
    --igtt-mobile-bar-gap:18px;
    --igtt-mobile-bar-height:calc(var(--igtt-mobile-bar-top) + var(--igtt-mobile-bar-row) + var(--igtt-mobile-bar-gap));
  }

  html,body{scroll-padding-top:calc(var(--igtt-mobile-bar-height) + 10px)!important}

  .header-logo,
  body.app-shell .header-logo,
  body.app-landing .header-logo,
  header.header:not(.header-logo),
  body.app-shell header.header:not(.header-logo){
    position:relative!important;
    top:auto!important;
    z-index:850!important;
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:var(--igtt-mobile-bar-height)!important;
    min-height:var(--igtt-mobile-bar-height)!important;
    margin:0!important;
    padding:0 108px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  .header-logo .think-logo,
  body.app-shell .header-logo .think-logo,
  body.app-landing .header-logo .think-logo,
  header.header:not(.header-logo) .title-name-image{
    position:absolute!important;
    left:50%!important;
    top:calc(var(--igtt-mobile-bar-top) + (var(--igtt-mobile-bar-row) - var(--igtt-mobile-logo-h))/2)!important;
    display:block!important;
    width:auto!important;
    height:var(--igtt-mobile-logo-h)!important;
    max-width:min(188px,49vw)!important;
    margin:0!important;
    object-fit:contain!important;
    transform:translateX(-50%)!important;
  }

  .top-left-menu,
  body.app-shell .top-left-menu,
  body.app-landing .top-left-menu{
    position:fixed!important;
    top:var(--igtt-mobile-bar-top)!important;
    left:max(10px,calc(env(safe-area-inset-left) + 8px))!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
    z-index:1210!important;
  }
  .menu-toggle,
  body.app-shell .menu-toggle,
  body.app-landing .menu-toggle{
    width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    margin:0!important;border-radius:14px!important;
  }
  .igtt-notif-bell,
  body.app-shell .igtt-notif-bell,
  body.app-landing .igtt-notif-bell{
    position:fixed!important;
    top:calc(var(--igtt-mobile-bar-top) + 3px)!important;
    right:max(10px,calc(env(safe-area-inset-right) + 8px))!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    margin:0!important;border-radius:50%!important;z-index:1210!important;
  }
  .igtt-coin-pill,
  body.app-shell .igtt-coin-pill,
  body.app-landing .igtt-coin-pill{
    position:fixed!important;
    top:calc(var(--igtt-mobile-bar-top) + 3px)!important;
    right:max(58px,calc(env(safe-area-inset-right) + 56px))!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    margin:0!important;padding:0!important;border-radius:50%!important;z-index:1210!important;
  }

  .menu-options{top:calc(var(--igtt-mobile-bar-top) + 50px)!important}
  .igtt-wallet-popover,.igtt-notif-popover{top:calc(var(--igtt-mobile-bar-top) + 52px)!important}

  /* Extra breathing room between the controls and each page's first heading. */
  body > .header-logo + main,
  body > header.header:not(.header-logo) + main{padding-top:6px!important}
  .thought-game-shell,.wars-shell,.muse-shell,.read-room-shell{margin-top:0!important}
  :where(section,[id]){scroll-margin-top:calc(var(--igtt-mobile-bar-height) + 12px)!important}
}

@media(max-width:380px){
  :root{--igtt-mobile-logo-h:28px}
  .header-logo,body.app-shell .header-logo,body.app-landing .header-logo,
  header.header:not(.header-logo),body.app-shell header.header:not(.header-logo){padding-left:100px!important;padding-right:100px!important}
  .header-logo .think-logo,body.app-shell .header-logo .think-logo,body.app-landing .header-logo .think-logo,
  header.header:not(.header-logo) .title-name-image{max-width:min(158px,43vw)!important}
}

/* ===== 2026-09-26 STORY PLATFORM V3 · CONTEXT CHROME =====
   Once signed in, the product name stops competing with the world itself.
   The quiet center label tells you where you are; Story/Arcade/Codex/You own
   the bottom navigation and the page heading owns the personality. */
body.app-shell .igtt-app-header{position:relative!important}
body.app-shell .igtt-app-header .app-context-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:28px;padding:0 10px;
  color:rgba(244,234,219,.38);
  font:700 .54rem/1 "Geist Mono",monospace;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;
}
@media(max-width:899px){
  body.app-shell .igtt-app-header .app-context-mark{
    top:calc(var(--igtt-mobile-bar-top) + (var(--igtt-mobile-bar-row) / 2));
    transform:translate(-50%,-50%);
    min-height:var(--igtt-mobile-bar-row);
    color:rgba(244,234,219,.34);font-size:.48rem;letter-spacing:.16em;
  }
}


/* Story is visually primary only while Story is actually selected. */
.app-nav-item.is-primary:not(.is-active){transform:none!important;box-shadow:none!important;background:transparent!important}
.app-nav-item.has-world-change{position:relative}.app-nav-item.has-world-change::after{content:"";position:absolute;top:8px;right:calc(50% - 17px);width:6px;height:6px;border-radius:50%;background:#d8b98c;box-shadow:0 0 10px rgba(216,185,140,.55)}

/* V25: hidden-state hardening. Prevent transient zero badges / hidden UI flashes
   when a component stylesheet declares display:flex/block. */
.igtt-notif-badge[hidden],
.igtt-coin-mobile-badge[hidden]{display:none!important;}