/* ── MENU ── */
#menuScreen{display:none;flex-direction:column;align-items:center;gap:8px;padding:16px 16px 80px;max-width:480px;width:100%;position:relative;z-index:1;height:100vh;height:100dvh;overflow:hidden;}#sec-match,#sec-learn,#sec-fun{display:flex;flex-direction:column;flex:1;width:100%;}
.menu-title{font-size:clamp(1.5rem,4.5vw,2.4rem);font-weight:800;color:var(--text);text-shadow:0 2px 0 rgba(255,255,255,.85);text-align:center;line-height:1.1;}
.menu-sub{font-size:.9rem;color:var(--text);opacity:.6;font-weight:600;text-align:center;padding:4px 0 8px;flex-shrink:0;}
.menu-lbl{font-size:.78rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#b0a090;width:100%;padding-left:4px;}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:clamp(2px,.8vw,6px);width:100%;flex:1 1 0;min-height:0;overflow:visible;}
.cat-btn{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0;padding:clamp(2px,.4vw,5px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;width:100%;height:100%;min-height:0;min-width:0;box-sizing:border-box;overflow:visible;}
.cat-btn:active{transform:scale(.9);}
/* visible, not hidden: the icon art is transparent right to its edge (no
   square corners to mask), so overflow:hidden was clipping the dark-mode
   glow's drop-shadow into a hard rectangle instead of letting it fall off
   softly — see body.dark-mode img.cat-icon-img in dark.css. */
.cat-icon-wrap{width:100%;height:100%;min-height:0;border-radius:clamp(10px,2.5vw,18px);overflow:visible;}

/* ── Hub idle attract-cycle ── one icon at a time pulses+glows after 15s
   of no activity (js/screens.js _hubStartCycle). overflow:visible on both
   parents above means the glow blooms cleanly with no clipping, same fix
   as the dark-mode shimmer. Works identically in light mode (that glow
   is dark-mode-only) since this pulse carries its own colour. */
@keyframes hubPulseScale{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
.cat-btn.cat-btn-pulse .cat-icon-wrap{animation:hubPulseScale 1.6s ease-in-out;}
.cat-btn.cat-btn-pulse .cat-icon-img{
  animation:hubPulseGlow 1.6s ease-in-out;
}
@keyframes hubPulseGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,80,0));}
  50%{filter:drop-shadow(0 0 10px rgba(255,205,90,.85)) drop-shadow(0 0 22px rgba(255,150,60,.55));}
}
@media(prefers-reduced-motion:reduce){
  .cat-btn.cat-btn-pulse .cat-icon-wrap,.cat-btn.cat-btn-pulse .cat-icon-img{animation:none;}
}
.cat-icon-img{width:100%;height:100%;object-fit:contain;display:block;}
.cn{font-size:clamp(.72rem,2vw,.88rem);font-weight:800;color:var(--text);line-height:1.2;}
.cd{font-size:clamp(.6rem,1.6vw,.7rem);font-weight:600;color:#bbb;text-align:center;line-height:1.3;}

/* SVG menu icons */
.menu-svg-icon{width:clamp(28px,7vw,44px);height:clamp(28px,7vw,44px);display:flex;align-items:center;justify-content:center;}

/* ── TOGGLE BTNS ── */
#muteBtn,#langBtn{position:relative;overflow:hidden;background:white;border:3px solid #b3e5fc;border-radius:50px;padding:10px 22px;font-size:.9rem;font-weight:800;color:var(--text);cursor:pointer;box-shadow:0 3px 12px var(--shadow);font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;user-select:none;width:100%;}
#muteBtn .hf,#langBtn .hf{position:absolute;top:0;left:0;bottom:0;width:0%;background:#ef5350;border-radius:50px;pointer-events:none;opacity:.35;}
#langBtn .hf{background:#7c4dff;}
#muteBtn span,#langBtn span{position:relative;z-index:1;}
.toggle-row{display:flex;gap:10px;width:100%;}
#hubScreen{display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:clamp(6px,1.2vh,10px) clamp(10px,3vw,18px);width:100%;max-width:480px;position:relative;z-index:1;height:100dvh;box-sizing:border-box;overflow:hidden;}
body.timer-active #hubScreen{padding-bottom:58px;}

/* ── Hub grid: widen at larger screen SIZES, not orientation ──────────────
   Jason, 2026-08-22: "I'd like the grid layout to adjust when the phone or
   tablet is in wide screen / rotated... Do not use device orientation, just
   use screen size with standard @media css." A pure width breakpoint gets
   this for free without ever checking orientation: an ordinary phone in
   portrait is under 640px wide on every real device, so it never crosses
   these thresholds; that SAME phone rotated to landscape is 640px+ wide and
   picks up the wider grid automatically. Tablets (which are already wide
   even in portrait) benefit the same way — more columns, less wasted
   margin either side of a grid capped at a phone-sized 480px. Row height
   comes along for free too: grid-auto-rows:1fr inside #hubScreen's fixed
   100dvh means fewer columns -> fewer rows -> taller cells, with no extra
   rule needed. 21 icons: 3 cols = 7 even rows (default), 6 cols = 4 rows
   (last row 3 of 6, left-aligned — standard "not a full last row" look,
   same as any home-screen grid), 7 cols = 3 even rows.
   MUST come after the plain #hubScreen rule above, not before it — an
   earlier version of this block sat right after .cat-icon-img (higher up
   the file) and never actually applied at any width: with equal
   specificity (both just "#hubScreen"), CSS resolves ties by SOURCE
   ORDER, so the plain rule below always won regardless of which media
   query matched. Found live from a real desktop screenshot (Jason,
   2026-08-22) — computed style stayed max-width:480px at a 1920px
   viewport even though the 1024px block's condition was clearly true. */
@media(min-width:640px){
  #hubScreen{max-width:760px;}
  .cat-grid{grid-template-columns:repeat(6,1fr);}
}
@media(min-width:1024px){
  /* Fluid, not a hard cap: a fixed 1080px left a real desktop monitor with
     a huge dead margin on both sides and icons no bigger than a tablet's.
     min(92vw,1600px) keeps growing with the actual screen instead of
     stopping at a tablet-sized ceiling, while the 1600px outer bound stops
     icons from becoming absurd on an ultrawide. Icon size adapts for
     free: .cat-icon-img is width/height:100% of its grid cell, so a wider
     container -> wider cells -> bigger icons, no separate sizing rule
     needed. */
  #hubScreen{max-width:min(92vw,1600px);}
  .cat-grid{grid-template-columns:repeat(7,1fr);}
}
.hub-btn{width:100%;background:white;border:3px solid #e0e0e0;border-radius:28px;padding:clamp(14px,3vh,22px) 20px;display:flex;align-items:center;gap:18px;cursor:pointer;box-shadow:0 4px 16px var(--shadow);transition:transform .15s;-webkit-tap-highlight-color:transparent;font-family:'Baloo 2',cursive;text-align:left;}
.hub-btn:active{transform:scale(.97);}
.hub-icon{font-size:clamp(2.4rem,7vw,3.2rem);line-height:1;flex-shrink:0;}
.hub-cat-img{width:clamp(64px,14vw,90px);height:clamp(64px,14vw,90px);object-fit:cover;border-radius:14px;flex-shrink:0;}
.hub-text-title{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.1;}
.hub-text-desc{font-size:.82rem;font-weight:600;color:#bbb;margin-top:3px;}.hub-cards{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(10px,2vh,16px);width:100%;}.hub-toggles{width:100%;display:flex;flex-direction:column;gap:8px;}.hub-toggle-lbl{font-size:.68rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#b0a090;text-align:center;}
.menu-back-btn{background:none;border:none;font-size:.9rem;font-weight:800;color:var(--text);opacity:.55;cursor:pointer;padding:2px 0 4px 0;font-family:'Baloo 2',cursive;-webkit-tap-highlight-color:transparent;align-self:flex-start;}
.menu-back-btn:active{opacity:.3;}
svg{overflow:visible;}