/* ============================================================================
   HansenHub Kids — SHARED CHROME (Brief 7)
   The unified top bar, merged coin chip + person pill, the CSS coin token, and
   the slide-in menu — ported from design/main-mockup.html so hub / Learn / Games
   look like one polished app. This file is BYTE-IDENTICAL across the three apps'
   public/ dirs (copied, not symlinked, so each app's service-worker scope can
   precache it). Loaded AFTER each app's styles.css so the chrome rules win.

   IMPORTANT: tokens are namespaced --c-* so they never clobber an app's own
   --ink/--gold/--border/etc. (the inner content — quiz, word search, cards — is
   out of scope for this brief and must keep its existing palette).
   ============================================================================ */
:root{
  --c-cream:#F6ECD7; --c-cream-2:#F0E2C6; --c-paper:#FFFDF6;
  --c-ink:#33303E; --c-ink-soft:#6B6577;
  --c-coral:#F86B5B; --c-coral-d:#CB3F2F;
  --c-teal:#37BFAD; --c-teal-d:#1C8675;
  --c-gold:#F7B63E; --c-gold-d:#CC8722;
  --c-lilac:#B49AE8; --c-lilac-d:#8364C6;
  --c-mint:#8FD3B6; --c-mint-d:#5BA684;
  --c-coin:#F4C53D; --c-coin-d:#CC9A2B; --c-coin-tx:#6E5212;
  --c-green:#4CB07A; --c-green-d:#2E8456;
  --c-border:3px solid var(--c-ink);
  --c-r-lg:26px; --c-r-md:18px; --c-r-sm:13px;
  --c-depth:7px;
  --c-ambient:0 14px 22px -10px rgba(51,48,62,.45);
}

/* ---- the one polished backdrop: warm cream + dot-grid (matches the mockup) ---- */
body{
  background:radial-gradient(120% 80% at 50% -10%,#FBF3E2 0%,var(--c-cream) 55%,var(--c-cream-2) 100%);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(51,48,62,.06) 1.5px,transparent 1.6px);
  background-size:24px 24px;background-position:6px 6px;}
.app{position:relative;z-index:1;}

/* ---------- coin token (CSS disc + $, renders identically on iPad Safari) ---------- */
.coin{display:inline-grid;place-items:center;width:1.05em;height:1.05em;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFEDB0,var(--c-coin) 68%,var(--c-coin-d));
  border:1.5px solid var(--c-coin-d);color:var(--c-coin-tx);font-size:.72em;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);font-family:'Baloo 2',cursive;line-height:1;flex:0 0 auto;
  vertical-align:baseline;}
.coin::before{content:"$";line-height:1;}
/* neutralize the old (brief-4/5) .coin::after "$" so it doesn't double up under this token */
.coin::after{content:none!important;display:none!important;}
.cv{display:inline-flex;align-items:center;gap:.26em;white-space:nowrap;}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px;min-height:46px;}
.bar-left{display:flex;align-items:center;gap:9px;min-width:0;}
.bar-right{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.bar-title{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;}

.backbtn{flex:0 0 auto;width:46px;height:46px;border:var(--c-border);border-radius:14px;background:var(--c-paper);
  font-size:1.3rem;font-weight:800;cursor:pointer;display:grid;place-items:center;color:var(--c-ink);text-decoration:none;
  box-shadow:0 4px 0 #D9CBB0;transition:transform .09s,box-shadow .09s;}
.backbtn:active{transform:translateY(4px);box-shadow:0 0 0 #D9CBB0;}

.wordmark{display:flex;align-items:center;gap:9px;font-family:'Baloo 2',cursive;font-weight:800;font-size:1.3rem;
  letter-spacing:-.01em;min-width:0;cursor:pointer;color:var(--c-ink);background:none;border:none;padding:0;}
.wordmark .logo{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;
  background:linear-gradient(150deg,#FFD27A,var(--c-gold));border:var(--c-border);box-shadow:0 3px 0 var(--c-gold-d);}
.wordmark.coral .logo{background:linear-gradient(150deg,#FF8475,var(--c-coral));box-shadow:0 3px 0 var(--c-coral-d);}
.wordmark.teal  .logo{background:linear-gradient(150deg,#52CFBE,var(--c-teal));box-shadow:0 3px 0 var(--c-teal-d);}
.wm-text{display:none;} /* wordmark text hidden on phones, shown at tablet width */

/* coin chip */
.coins{display:flex;align-items:center;gap:6px;padding:6px 13px 6px 9px;border:var(--c-border);border-radius:999px;
  background:linear-gradient(150deg,#FFEFC2,#FBDE94);font-family:'Baloo 2',cursive;font-weight:800;font-size:1rem;
  color:var(--c-coin-tx);box-shadow:0 4px 0 var(--c-coin-d);cursor:pointer;transition:transform .09s,box-shadow .09s;
  white-space:nowrap;}
.coins:active{transform:translateY(4px);box-shadow:0 0 0 var(--c-coin-d);}

/* merged person pill */
.hh-pill{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border:var(--c-border);border-radius:999px;
  background:linear-gradient(150deg,#FFD884,var(--c-gold));font-family:'Baloo 2',cursive;font-weight:700;font-size:1.02rem;
  color:var(--c-ink);cursor:pointer;box-shadow:0 4px 0 var(--c-gold-d);transition:transform .09s,box-shadow .09s;flex:0 0 auto;}
.hh-pill:active{transform:translateY(4px);box-shadow:0 0 0 var(--c-gold-d);}
.hh-pill .ava{width:30px;height:30px;border-radius:999px;background:var(--c-paper);border:2.5px solid var(--c-ink);
  display:grid;place-items:center;font-size:.95rem;flex:0 0 auto;}
.hh-pill .chev{font-size:.7rem;opacity:.6;margin-left:-2px;}
.hh-pill .who-name{display:none;}
.hh-pill .who-init{display:inline;}

@media (min-width:560px){
  .wm-text{display:inline;}
  .hh-pill .who-name{display:inline;}
  .hh-pill .who-init{display:none;}
}

/* ---------- slide-in menu ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(33,30,40,.5);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .28s;}
.scrim.open{opacity:1;pointer-events:auto;}
.menu{position:fixed;top:0;right:0;z-index:50;height:100dvh;width:min(84vw,340px);
  background:linear-gradient(180deg,#FFFDF7,#F8EFDD);border-left:var(--c-border);
  box-shadow:-12px 0 30px -8px rgba(33,30,40,.4);
  transform:translateX(105%);transition:transform .4s cubic-bezier(.3,.9,.35,1.05);
  padding:max(22px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:13px;overflow-y:auto;}
.menu.open{transform:translateX(0);}
.menu-head{display:flex;justify-content:flex-end;}
.menu-x{width:42px;height:42px;border:var(--c-border);border-radius:12px;background:var(--c-paper);font-size:1.1rem;
  font-weight:800;cursor:pointer;box-shadow:0 3px 0 #DCCDB1;color:var(--c-ink);}
.menu-x:active{transform:translateY(3px);box-shadow:0 0 0 #DCCDB1;}
.menu-person{display:flex;align-items:center;gap:14px;padding:16px;border:var(--c-border);border-radius:var(--c-r-md);
  background:linear-gradient(150deg,#FFD884,var(--c-gold));box-shadow:0 5px 0 var(--c-gold-d);margin-top:4px;}
.menu-person .ava{width:52px;height:52px;flex:0 0 auto;border-radius:999px;background:var(--c-paper);
  border:2.5px solid var(--c-ink);display:grid;place-items:center;font-size:1.6rem;}
.menu-person .who{font-family:'Baloo 2',cursive;font-weight:800;font-size:1.4rem;color:#4A2F05;line-height:1.1;}
.menu-person .mp-coins{display:flex;align-items:center;gap:5px;font-family:'Baloo 2',cursive;font-weight:800;
  font-size:.98rem;color:#5E460F;margin-top:2px;}
.menu-item{display:flex;align-items:center;gap:13px;padding:16px 18px;border:var(--c-border);border-radius:var(--c-r-md);
  background:var(--c-paper);font-family:'Baloo 2',cursive;font-weight:800;font-size:1.12rem;cursor:pointer;color:var(--c-ink);
  text-decoration:none;box-shadow:0 5px 0 #DCCDB1;transition:transform .1s,box-shadow .1s;}
.menu-item:active{transform:translateY(5px);box-shadow:0 0 0 #DCCDB1;}
.menu-item .ic{font-size:1.3rem;display:inline-grid;place-items:center;}
.menu-item .tag{margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-coin-tx);background:#FBE39A;border:2px solid var(--c-coin-d);border-radius:999px;padding:3px 9px;}
.menu-item.shop{background:linear-gradient(150deg,#FFEFC2,#FBDE94);box-shadow:0 5px 0 var(--c-coin-d);}
.menu-note{margin-top:auto;text-align:center;font-size:.74rem;font-weight:700;color:var(--c-ink-soft);opacity:.7;}

.hidden{display:none !important;}
@media (prefers-reduced-motion:reduce){
  body::before{display:none;}
  .menu,.scrim,.coins,.hh-pill,.backbtn,.menu-x,.menu-item{transition:none !important;}
}