/* ───────────────────────────────────────────────────────────────────────────
   Huhu Games — shared shell chrome (the persistent game switcher).
   Injected at the top of every game (Squiggle · Groupies · Whizzy) by
   huhu-games-shell.js. Visually neutral so it sits above each game's own
   palette; the ACTIVE pill takes that game's signature color.
   Mobile-first, compact (~44px), matches the games' rounded/pastel language.
   ─────────────────────────────────────────────────────────────────────────── */

.hg-shell {
  --hg-squiggle: #0fb5c2;   /* teal  */
  --hg-groupies: #fb7185;   /* rose  */
  --hg-whizzy:   #f59e0b;   /* amber */
  --hg-mogul:    #10b981;   /* emerald */
  --hg-life:     #6366f1;   /* indigo — matches life/index.html's own accent */
  --hg-spy:      #1e293b;   /* ink — matches spy/index.html's own accent */
  --hg-twenty:   #c026d3;   /* fuchsia — matches twenty/index.html's own accent */
  --hg-sleuth:   #6b2d5c;   /* plum — matches sleuth/index.html's own accent */
  --hg-ink: #2a2230;
  --hg-sub: #8a7d76;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  box-sizing: border-box;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
.hg-wordmark {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  display: flex; align-items: baseline; gap: 5px;
}
.hg-logo-img { height: 26px; width: auto; display: block; align-self: center; }
.hg-logo-sub {        /* "games" — subsidiary label next to the huhu wordmark */
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 600; font-size: 18px; line-height: 1;
  color: #8b7cc4; letter-spacing: 0.2px; white-space: nowrap;
  position: relative; top: -1px;
}
/* ─── In-app mode (native Huhu app webview) ───────────────────────────────
   The native app already renders its own header/back-bar above this
   webview, so the site-wide switcher (wordmark + cross-game pills + "Your
   games") is redundant chrome — hiding it lets each game's own in-page tabs
   start right at the top, like a native screen instead of "a webview of the
   website". Toggled by huhu-games-shell.js adding `hg-in-app` to <html>
   (window.HuhuApp present, or ?inapp=1 to test in a desktop browser).
   The shell node is just hidden, never removed, so mount()/publishHeight()
   stay safe no-ops. Because .hg-shell sits in normal flow as body's first
   child, display:none collapses its reserved space for free — no separate
   "remove the top padding" rule needed. --hg-shell-h (used by e.g. Squiggle
   to size its board around the shell) also resolves to 0px automatically,
   since a display:none element has no bounding box. */
html.hg-in-app .hg-shell { display: none !important; }

/* The switcher holds five pills, so at ~322px it is WIDER than a 320px
   viewport. It used to be `flex: 0 0 auto` (refuse to shrink), which pushed
   the whole page 25px past the viewport: body.scrollWidth 345 vs 320, the
   switcher itself starting at left:-25, and .hg-mine-btn stranded off-screen
   at 305..345. Measured identically on every game, so this was never a
   Life-specific bug.
   Fix: let it shrink (`0 1 auto` + min-width:0 — a flex item's default
   min-width:auto is what blocks shrinking below content size) and scroll
   INSIDE itself, so narrow screens keep every pill reachable without the
   page ever scrolling sideways. No visual change at any width where the row
   already fit. */
.hg-switcher {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  overscroll-behavior-x: contain;     /* don't chain to the page/history */
}
.hg-switcher::-webkit-scrollbar { display: none; }   /* Safari/Chrome */
/* "Your games" (cross-game Mine) button */
.hg-mine-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 36px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,0.06); color: var(--hg-ink);
  cursor: pointer; transition: background .15s, transform .1s;
}
.hg-mine-btn:active { transform: scale(0.9); }
.hg-mine-btn svg { width: 20px; height: 20px; }
/* Mine overlay */
#hg-mine { --hg-ink: #2a2230; --hg-sub: #8a7d76; display: none; position: fixed; inset: 0; z-index: 300; background: rgba(42,34,48,0.5); align-items: flex-start; justify-content: center; padding: 16px; }
#hg-mine.show { display: flex; }
.hg-mine-card { background: #fffdf9; border-radius: 18px; padding: 18px 16px; width: 100%; max-width: 420px; margin-top: 8vh; position: relative; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(80,50,30,0.25); }
.hg-mine-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 18px; color: var(--hg-sub); cursor: pointer; line-height: 1; }
.hg-mine-h { font-weight: 800; font-size: 18px; color: var(--hg-ink); margin-bottom: 12px; }
.hg-mine-empty { color: var(--hg-sub); font-weight: 600; font-size: 14px; line-height: 1.4; }
.hg-mine-row { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid rgba(180,140,120,0.18); text-decoration: none; }
.hg-mine-row:last-child { border-bottom: none; }
.hg-mine-row:active { background: rgba(0,0,0,0.04); }
.hg-mine-mark { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff; background: var(--hg-sub); }
.hg-mark-squiggle { background: #0fb5c2; } .hg-mark-groupies { background: #fb7185; } .hg-mark-whizzy { background: #f59e0b; } .hg-mark-mogul { background: #10b981; } .hg-mark-life { background: #6366f1; } .hg-mark-spy { background: #1e293b; } .hg-mark-twenty { background: #c026d3; } .hg-mark-sleuth { background: #6b2d5c; }
.hg-mine-body { display: flex; flex-direction: column; min-width: 0; }
.hg-mine-title { font-weight: 700; font-size: 16px; color: var(--hg-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-mine-sub { font-size: 13px; color: var(--hg-sub); font-weight: 600; margin-top: 2px; }
/* Quiet legal links — bottom of the "Your games" panel, every game */
.hg-mine-legal { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(180,140,120,0.18); }
.hg-mine-legal a { font-size: 12px; font-weight: 700; color: var(--hg-sub); text-decoration: none; }
.hg-mine-legal a:active { color: var(--hg-ink); }
.hg-mine-legal span { font-size: 12px; color: var(--hg-sub); opacity: .6; }

/* ─── Report / flag affordance — small quiet icon button on cards + author lines ── */
.hg-flag-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,0.05); color: #8a7d76;
  cursor: pointer; transition: background .15s, transform .1s;
}
.hg-flag-btn svg { width: 14px; height: 14px; }
.hg-flag-btn:active { background: rgba(0,0,0,0.12); transform: scale(0.9); }

/* ─── Report confirm sheet (shared across all 5 games) ───────────────────────── */
#hg-report { --hg-ink: #2a2230; --hg-sub: #8a7d76; display: none; position: fixed; inset: 0; z-index: 340; background: rgba(42,34,48,0.5); align-items: flex-end; justify-content: center; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
#hg-report.show { display: flex; }
.hg-report-card { background: #fffdf9; border-radius: 20px 20px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px)); width: 100%; max-width: 460px; box-shadow: 0 -8px 30px rgba(80,50,30,0.2); }
.hg-report-title { font-weight: 800; font-size: 18px; color: var(--hg-ink); margin-bottom: 4px; }
.hg-report-sub { font-size: 14px; color: var(--hg-sub); font-weight: 600; margin-bottom: 14px; }
.hg-report-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hg-report-chip { appearance: none; border: 1.5px solid rgba(138,125,118,0.3); background: #fff; color: var(--hg-ink); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.hg-report-chip.active { background: var(--hg-ink); border-color: var(--hg-ink); color: #fff; }
.hg-report-actions { display: flex; gap: 10px; }
.hg-report-btn { flex: 1 1 0; appearance: none; border: none; font: inherit; font-weight: 800; font-size: 15px; padding: 13px 10px; border-radius: 14px; cursor: pointer; }
.hg-report-btn.ghost { background: rgba(0,0,0,0.06); color: var(--hg-ink); }
.hg-report-btn.primary { background: #d64550; color: #fff; }
.hg-report-btn:active { transform: scale(0.98); }
.hg-report-btn:disabled { opacity: .6; }
.hg-report-done { text-align: center; font-weight: 800; font-size: 16px; color: var(--hg-ink); padding: 10px 0; }

/* ─── Create gate — one-time AI/community/age notice before first generation ── */
#hg-gate { --hg-ink: #2a2230; --hg-sub: #8a7d76; display: none; position: fixed; inset: 0; z-index: 340; background: rgba(42,34,48,0.5); align-items: center; justify-content: center; padding: 18px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }
#hg-gate.show { display: flex; }
.hg-gate-card { background: #fffdf9; border-radius: 20px; padding: 22px 20px; width: 100%; max-width: 420px; box-shadow: 0 12px 40px rgba(80,50,30,0.25); }
.hg-gate-title { font-weight: 800; font-size: 19px; color: var(--hg-ink); margin-bottom: 12px; }
.hg-gate-list { margin: 0 0 18px; padding-left: 20px; }
.hg-gate-list li { font-size: 14px; line-height: 1.45; color: var(--hg-ink); font-weight: 500; margin-bottom: 9px; }
.hg-gate-list li:last-child { margin-bottom: 0; }
.hg-gate-actions { display: flex; flex-direction: column; gap: 9px; }
.hg-gate-btn { appearance: none; border: none; font: inherit; font-weight: 800; font-size: 15px; padding: 13px 10px; border-radius: 14px; cursor: pointer; width: 100%; }
.hg-gate-btn.primary { background: var(--hg-ink); color: #fff; }
.hg-gate-btn.ghost { background: rgba(0,0,0,0.06); color: var(--hg-sub); }
.hg-gate-btn:active { transform: scale(0.98); }
.hg-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  padding: 4px;
}
.hg-pill {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--hg-sub);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.hg-pill:active { transform: translateY(1px); }
.hg-pill.hg-active { color: #fff; }
.hg-pill.hg-active[data-game="squiggle"] { background: var(--hg-squiggle); box-shadow: 0 3px 0 #0a8b96; }
.hg-pill.hg-active[data-game="groupies"] { background: var(--hg-groupies); box-shadow: 0 3px 0 #d6485c; }
.hg-pill.hg-active[data-game="whizzy"]   { background: var(--hg-whizzy);   box-shadow: 0 3px 0 #c2610a; }
.hg-pill.hg-active[data-game="mogul"]    { background: var(--hg-mogul);    box-shadow: 0 3px 0 #047857; }
.hg-pill.hg-active[data-game="life"]     { background: var(--hg-life);     box-shadow: 0 3px 0 #4338ca; }
.hg-pill.hg-active[data-game="spy"]      { background: var(--hg-spy);      box-shadow: 0 3px 0 #020617; }
.hg-pill.hg-active[data-game="twenty"]   { background: var(--hg-twenty);   box-shadow: 0 3px 0 #86198f; }
.hg-pill.hg-active[data-game="sleuth"]   { background: var(--hg-sleuth);   box-shadow: 0 3px 0 #45193a; }

/* With 4 games the switcher is wider, so the header degrades gracefully as it
   narrows: drop the "games" sublabel, then tighten the pills, then drop the
   whole wordmark — the 4 game pills (navigation) always win the space. */
.hg-wordmark { flex: 0 0 auto; }        /* never shrink/clip the wordmark — hide it instead */
@media (max-width: 560px) { .hg-logo-sub { display: none; } }
@media (max-width: 430px) { .hg-pill { padding: 7px 10px; font-size: 13px; } .hg-switcher { gap: 2px; } }
@media (max-width: 400px) {
  .hg-wordmark { display: none; }       /* small phones: pills only */
  .hg-shell { justify-content: center; }
}

/* ─── Themed loading overlay (shared by all games) ───────────────────────────── */
#hg-loading { display: none; position: fixed; inset: 0; z-index: 320; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.84); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#hg-loading.show { display: flex; }
#hg-loading.hl-squiggle { background: rgba(232,247,247,0.88); }
#hg-loading.hl-groupies { background: rgba(253,241,232,0.88); }
#hg-loading.hl-whizzy   { background: rgba(255,247,237,0.88); }
#hg-loading.hl-mogul    { background: rgba(234,255,244,0.90); }
#hg-loading.hl-life     { background: rgba(238,242,255,0.90); }
#hg-loading.hl-spy      { background: rgba(238,242,247,0.92); }
#hg-loading.hl-twenty   { background: rgba(253,244,255,0.92); }
#hg-loading.hl-sleuth   { background: rgba(248,241,228,0.92); }
.hl-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; text-align: center; }
.hl-art { width: 120px; height: 48px; }
.hl-msg { font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; font-size: 17px; color: #2a2230; transition: opacity .18s; min-height: 22px; }
.hl-squig { stroke-dasharray: 230; stroke-dashoffset: 230; animation: hlDraw 1.7s ease-in-out infinite alternate; }
@keyframes hlDraw { from { stroke-dashoffset: 230; } to { stroke-dashoffset: 0; } }
.hl-bolt { width: 58px; height: 58px; animation: hlBolt 0.9s ease-in-out infinite; filter: drop-shadow(0 0 7px rgba(245,158,11,0.7)); }
@keyframes hlBolt { 0%,100% { transform: translateY(0) scale(1) rotate(-6deg); } 50% { transform: translateY(-8px) scale(1.15) rotate(6deg); } }
.hl-tiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; width: 66px; height: 66px; }
.hl-tiles span { border-radius: 9px; animation: hlPop 1.2s ease-in-out infinite; }
.hl-tiles span:nth-child(1) { background: #fbbf24; animation-delay: 0s; }
.hl-tiles span:nth-child(2) { background: #34d399; animation-delay: .15s; }
.hl-tiles span:nth-child(3) { background: #38bdf8; animation-delay: .3s; }
.hl-tiles span:nth-child(4) { background: #fb923c; animation-delay: .45s; }
@keyframes hlPop { 0%,100% { transform: scale(0.7); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.hl-coin { width: 58px; height: 58px; animation: hlCoin 1s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgba(16,185,129,0.4)); }
@keyframes hlCoin { 0%,100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-9px) rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .hl-squig, .hl-bolt, .hl-tiles span, .hl-coin { animation-iteration-count: 1 !important; } }