/* ==========================================================================
   greatestjchan — handheld main menu
   Palette/typography/button styling match reference-mockup.html exactly.
   ========================================================================== */

:root{
  --dark-blue:#112D59; --deep-navy:#0C2247; --island:#204D8F; --vivid-blue:#1260C0;
  --blood-orange:#D1411B; --tangerine:#E66E2F; --grey-orange:#DE8E49; --cream:#FFF3E2; --white:#FFFFFF;
  /* Screen/boot-screen surface — a step lighter than the original deep-navy
     fill so the console doesn't read as flat-black (direct feedback: "too
     dark"). --deep-navy itself stays untouched — it's still doing real work
     as the border/shadow/text-on-tangerine color everywhere, and darkening
     that too would soften every button's crisp pixel-edge definition, the
     opposite of what "more prominent buttons" asks for. --island got the
     same lightening treatment so cards keep popping against the brighter
     screen instead of flattening into it. */
  --screen-navy:#17376A;
  --sky-text:#AEC4E6;

  --focus-ring: 3px solid var(--white);
  --focus-ring-offset: 2px;
}

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:'Segoe UI',Arial,sans-serif;
  background-color:#102750;
  background-image:radial-gradient(rgba(18,96,192,0.35) 1px, transparent 1px),radial-gradient(rgba(18,96,192,0.18) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px; background-position:0 0, 14px 14px;
  min-height:100vh;
  color:var(--cream);
}

/* Outer page fits the browser window on both axes — width AND height — not
   just a width cap with page scroll. Uses svh/dvh (falls back to vh) so
   mobile browser chrome doesn't cause a jump. */
.page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; min-height:100svh;
  padding:clamp(6px,2vh,32px) 14px;
  overflow-y:auto;
}

/* ---- skip link ---- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--cream); color:var(--deep-navy); font-weight:700;
  padding:10px 16px; border-radius:0 0 6px 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---- visually-hidden but AT-readable ---- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- focus visibility (kept real, not suppressed) ---- */
a:focus-visible,
button:focus-visible,
iframe:focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 6px rgba(12,34,71,0.55);
}

/* ==========================================================================
   HANDHELD SHELL
   ========================================================================== */
.handheld{
  width:clamp(300px, 92vw, 900px);
  background:linear-gradient(180deg, var(--vivid-blue), var(--dark-blue));
  border-radius:clamp(22px, 5vw, 40px);
  padding:clamp(16px, 3vw, 26px) clamp(16px, 3.5vw, 28px) clamp(20px, 3vw, 32px);
  box-shadow:8px 10px 0 0 var(--deep-navy), 0 20px 40px rgba(0,0,0,0.45);
  border:3px solid var(--deep-navy);
  position:relative;
  max-height:92vh; max-height:92svh;
  display:flex; flex-direction:column;
}
.brand-plate{ position:absolute; top:8px; right:24px; font-family:'Press Start 2P',monospace; font-size:6.5px; color:rgba(255,255,255,0.35); letter-spacing:1px; margin:0; }
.handheld-top{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; flex-shrink:0; }
.shoulder{ width:38px; height:14px; background:var(--deep-navy); border-radius:6px 6px 2px 2px; }

/* speaker grille — purely decorative again; the real sound control now lives
   at the bottom of the shell (.sound-bar) where it's actually noticeable */
.speaker{ display:flex; gap:4px; }
.speaker span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.25); }

.led{ width:8px; height:8px; border-radius:50%; background:var(--tangerine); box-shadow:0 0 8px var(--tangerine); }

@media (prefers-reduced-motion: no-preference){
  .led{ animation:blink 2.4s ease-in-out infinite; }
}
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* ---- screen ----
   Height responds to viewport height (vh), not just width, so short/landscape
   windows shrink the screen instead of pushing the shell off-screen. If a
   page's content is still taller than the available space, the screen
   scrolls internally rather than the whole page overflowing. */
.screen{
  background:var(--screen-navy);
  border-radius:clamp(12px, 2.5vw, 18px);
  padding:clamp(18px, 4vw, 28px) clamp(14px, 3vw, 22px);
  box-shadow:inset 0 0 0 3px #05132b, inset 0 6px 14px rgba(0,0,0,0.5);
  text-align:center;
  overflow-x:hidden; overflow-y:auto;
  min-height:clamp(280px, 52vh, 420px);
  max-height:80vh; max-height:80svh;
  position:relative;
  /* The events panel pushed real content past the visible screen height, so
     this scrollbar is now genuinely needed, not accidental — but the bare
     15px OS-default bar looked like a foreign object sitting inside an
     otherwise fully custom-skinned console. Themed instead of hidden: hiding
     it would remove the only visible cue that there's more below. Firefox
     via scrollbar-width/-color, Chrome/Safari/Edge via ::-webkit-scrollbar. */
  scrollbar-width:thin;
  scrollbar-color:var(--tangerine) var(--screen-navy);
}
.screen::-webkit-scrollbar{ width:8px; }
.screen::-webkit-scrollbar-track{ background:var(--screen-navy); }
.screen::-webkit-scrollbar-thumb{
  background:var(--tangerine); border-radius:8px; border:2px solid var(--screen-navy);
}
.screen::-webkit-scrollbar-thumb:hover{ background:var(--grey-orange); }
@media (prefers-reduced-motion: no-preference){
  .screen{ transition:filter .12s; }
}
.screen.flicker{ filter:brightness(1.6); }

.view{ text-align:left; display:flex; flex-direction:column; min-height:100%; }
.view[hidden]{ display:none; }

/* ==========================================================================
   BOOT SCREEN — shown once per session, gated behind a real "PRESS START"
   button (audio can't autoplay without a user gesture anyway, so the most
   authentic genre convention and the technical requirement solve each
   other). prefers-reduced-motion skips this entirely via JS, not just a
   simplified version — never shown, no gate, straight to the menu.
   ========================================================================== */
/* ---- Boot screen: auto-playing "blast doors" reveal, no click required.
   Two door panels cover the screen and slide apart on their own timer while
   the logo/tag fade out with them — replaces the old PRESS START gate (direct
   feedback: the click-and-wait was a barrier). See initBootScreen() in
   main.js for the timing. ---- */
.boot-screen{
  position:absolute; inset:0; z-index:20;
  border-radius:inherit;
  overflow:hidden;
}
.boot-screen[hidden]{ display:none; }

.boot-door{
  position:absolute; top:0; bottom:0; width:50%;
  background:var(--screen-navy);
  z-index:2;
}
.boot-door--left{ left:0; }
.boot-door--right{ right:0; }
@media (prefers-reduced-motion: no-preference){
  .boot-door{ transition:transform .55s cubic-bezier(.61,0,.29,1); }
}
.boot-screen.is-open .boot-door--left{ transform:translateX(-100%); }
.boot-screen.is-open .boot-door--right{ transform:translateX(100%); }

.boot-screen__content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  text-align:center;
}
@media (prefers-reduced-motion: no-preference){
  .boot-screen__content{ transition:opacity .3s ease; }
}
.boot-screen.is-open .boot-screen__content{ opacity:0; }

.boot-screen__led{
  width:10px; height:10px; border-radius:50%;
  background:var(--tangerine); box-shadow:0 0 10px var(--tangerine);
}
.boot-screen__logo{
  /* matches .logo's size — same wordmark shown twice a few hundred ms apart
     (boot doors, then the revealed menu); a size jump between the two would
     read as a mistake */
  font-family:'Press Start 2P',monospace; font-size:clamp(18px,5vw,28px); color:var(--white);
  letter-spacing:1.5px; text-shadow:2px 2px 0 rgba(0,0,0,0.4); margin:0;
}
.boot-screen__logo span{ color:var(--tangerine); }
.boot-screen__tag{
  font-family:'Press Start 2P',monospace; font-size:clamp(6.5px,1.6vw,8px); color:var(--sky-text);
  letter-spacing:1px; margin:0;
}

@media (prefers-reduced-motion: no-preference){
  .view:not([hidden]){ animation:pageIn .3s cubic-bezier(.2,.8,.3,1); }
}
@keyframes pageIn{
  from{ opacity:0; transform:translateX(18px) scale(.98); }
  to{ opacity:1; transform:translateX(0) scale(1); }
}

#view-menu{ text-align:center; }

.logo{ font-family:'Press Start 2P',monospace; font-size:clamp(18px,5vw,28px); color:var(--white); letter-spacing:1.5px; text-shadow:2px 2px 0 rgba(0,0,0,0.4); margin:0 0 6px; }
.logo span{ color:var(--tangerine); }
.logo:focus-visible{ outline-offset:6px; }
.sub{ font-family:'Press Start 2P',monospace; font-size:clamp(6.5px,1.6vw,8px); color:var(--sky-text); margin:0 0 22px; letter-spacing:1px; }
.sub--inline{ text-align:left; margin:0 0 14px; }

/* ==========================================================================
   MENU BUTTONS (pixel-bevel)
   ========================================================================== */
.menu{ display:flex; flex-direction:column; gap:clamp(12px,2.4vw,16px); }
.menu-item{
  position:relative;
  display:flex; align-items:center; gap:12px; width:100%;
  font-family:'Segoe UI',Arial,sans-serif; font-weight:800; letter-spacing:0.2px;
  font-size:clamp(16px,3.4vw,20px); color:var(--deep-navy);
  background:var(--tangerine);
  border:3px solid var(--deep-navy);
  border-radius:9px;
  padding:clamp(14px,2.8vw,18px) 16px;
  min-height:44px;
  cursor:pointer; text-align:left;
  /* Flat card + one hard drop-shadow, not the old triple-layered bevel — same
     retro "chunky button" read with a lot less going on per button (direct
     feedback: main menu felt cluttered). The shadow itself is what now does
     the "prominent" work, sized up to match the bigger label. */
  box-shadow:5px 5px 0 0 var(--deep-navy);
  overflow:visible;
}
@media (prefers-reduced-motion: no-preference){
  .menu-item{ transition:transform .06s; }
}
.menu-item i{ font-size:19px; color:var(--deep-navy); flex-shrink:0; }
.menu-item .arrow{ margin-left:auto; font-size:15px; flex-shrink:0; }
.menu-item:hover{ filter:brightness(1.05); }
.menu-item:active{ transform:translate(3px,3px); box-shadow:none; }

/* ---- "coming soon" menu item — reads like a locked/unlockable slot in a game
   menu rather than a real, working nav button. Tapping it reveals a one-line
   teaser in place (see #vpetTeaserMsg below); it never navigates anywhere. ---- */
.menu-item--locked{
  background:var(--island); color:var(--cream);
  box-shadow:4px 4px 0 0 var(--deep-navy);
}
.menu-item--locked i{ color:var(--sky-text); }
.menu-item--locked .arrow--locked{
  font-family:'Press Start 2P',monospace; font-size:8.5px; letter-spacing:0.5px; color:var(--tangerine);
}
.menu-item--locked:hover{ filter:brightness(1.12); }
.vpet-teaser-msg{
  font-size:12.5px; color:var(--sky-text); line-height:1.6;
  margin:-4px 0 0; padding:0 4px;
}

@media (prefers-reduced-motion: no-preference){
  .menu-item.pressed{ animation:pressPop .38s cubic-bezier(.34,1.8,.64,1); }
  .back-btn.pressed{ animation:pressPop .38s cubic-bezier(.34,1.8,.64,1); }
  .char-tile.pressed{ animation:pressPop .38s cubic-bezier(.34,1.8,.64,1); }
}
@keyframes pressPop{
  0%{ transform:translate(0,0); }
  35%{ transform:translate(4px,4px) scale(.96); box-shadow:none; }
  70%{ transform:translate(-1px,-3px) scale(1.03); }
  100%{ transform:translate(0,0) scale(1); }
}
.spark{
  position:absolute; width:6px; height:6px; background:var(--cream); border-radius:1px; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .spark{ animation:sparkFly .5s ease-out forwards; }
}
@keyframes sparkFly{
  0%{ opacity:1; transform:translate(0,0) scale(1); }
  100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3); }
}

/* ---- social row under the main menu ---- */
.menu-footer{ display:flex; justify-content:center; gap:14px; margin-top:22px; }
.menu-footer__link{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--island); border:2px solid var(--deep-navy);
  color:var(--cream); text-decoration:none;
  box-shadow:2px 2px 0 0 var(--deep-navy);
}
.menu-footer__link i{ font-size:17px; }
@media (prefers-reduced-motion: no-preference){
  .menu-footer__link{ transition:transform .06s; }
}
.menu-footer__link:hover{ filter:brightness(1.15); }
.menu-footer__link:active{ transform:translate(2px,2px); box-shadow:none; }

/* ---- back button, same pixel-bevel family, smaller. Lives at the bottom
   of every subpage now, so it gets margin-top (space from content above)
   instead of margin-bottom, and a top-margin on the page itself pushes it
   down when content is short. ---- */
.back-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Press Start 2P',monospace; font-size:9px; color:var(--deep-navy);
  background:var(--cream);
  border:3px solid var(--deep-navy); border-radius:7px;
  padding:9px 12px; margin-top:18px; align-self:flex-start; cursor:pointer;
  min-height:44px; flex-shrink:0;
  box-shadow:inset -3px -3px 0 0 #d8c7ae, inset 3px 3px 0 0 #fff, 4px 4px 0 0 var(--deep-navy);
  position:relative;
}
@media (prefers-reduced-motion: no-preference){
  .back-btn{ transition:transform .06s; }
}
.back-btn:active{ transform:translate(3px,3px); box-shadow:none; }

.page-body{ text-align:left; flex:1 1 auto; }
.page-body h2{ font-family:'Press Start 2P',monospace; font-size:12px; color:var(--tangerine); margin:0 0 12px; }
.page-body h2:focus-visible{ outline-offset:6px; }
.page-body h3{ font-family:'Press Start 2P',monospace; font-size:9.5px; color:var(--white); margin:20px 0 10px; display:flex; align-items:center; gap:8px; }
.page-body p{ font-size:12.5px; color:#dbe6f7; line-height:1.7; margin:0 0 12px; }
.page-body .fallback-note{ font-size:11px; color:var(--sky-text); }
.page-body .fallback-note a{ color:var(--cream); }

.home-indicator{ display:flex; justify-content:center; padding-top:clamp(10px,2vw,14px); flex-shrink:0; }
.home-indicator span{ width:72px; height:5px; border-radius:3px; background:rgba(255,255,255,0.3); }

/* ---- prominent sound control, bottom of the shell ---- */
.sound-bar{ display:flex; justify-content:center; padding-top:clamp(14px,3vw,20px); flex-shrink:0; }
.sound-toggle-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Press Start 2P',monospace; font-size:8.5px; color:var(--cream);
  background:var(--island); border:2px solid var(--deep-navy); border-radius:22px;
  padding:10px 18px; min-height:44px; cursor:pointer;
  box-shadow:2px 2px 0 0 var(--deep-navy);
}
.sound-toggle-btn i{ font-size:16px; }
@media (prefers-reduced-motion: no-preference){
  .sound-toggle-btn{ transition:transform .06s, background .15s; }
}
.sound-toggle-btn:hover{ filter:brightness(1.15); }
.sound-toggle-btn:active{ transform:translate(2px,2px); box-shadow:none; }
.sound-toggle-btn[aria-pressed="false"]{ background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.55); }
.sound-toggle-btn[aria-pressed="false"] i{ color:rgba(255,255,255,0.55); }

/* ==========================================================================
   EMBEDDED FRAMES (tracker / discord / telegram / twitch)
   ========================================================================== */
.iframe-wrap{
  position:relative;
  background:#05132b;
  border:2px solid var(--island);
  border-radius:10px;
  overflow:hidden;
  min-height:min(60vw, 420px);
}
.iframe-wrap--twitch{ min-height:min(50vw, 340px); }
.embed-frame{
  display:block; width:100%; height:100%; min-height:inherit;
  border:0; position:relative; z-index:1; background:var(--white);
}
.iframe-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--sky-text); margin:0; z-index:0;
}
.iframe-wrap.is-loaded .iframe-loading{ display:none; }

.embed-block:first-of-type{ margin-top:4px; }

/* ==========================================================================
   ACTION TILES — the one shared "button family" used everywhere a page needs
   a big tappable card: Character Select roster, the Events Tracker CTA, and
   the Business Enquiries CTAs. Same card, same badge, same label treatment
   regardless of which page it's on — this is the fix for pages feeling like
   separate ideas instead of one system.
   ========================================================================== */
.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:clamp(10px, 2.5vw, 14px);
}
.action-tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%;
  background:var(--island);
  border:3px solid var(--deep-navy);
  border-radius:9px;
  padding:clamp(14px,3vw,18px) 10px;
  cursor:pointer; text-decoration:none;
  min-height:44px;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.25), inset 3px 3px 0 0 rgba(255,255,255,0.08), 4px 4px 0 0 var(--deep-navy);
  color:var(--cream);
}
@media (prefers-reduced-motion: no-preference){
  .action-tile{ transition:transform .06s; }
}
.action-tile:hover{ filter:brightness(1.1); }
.action-tile:active{ transform:translate(2px,2px); box-shadow:none; }

.action-tile__badge{
  position:relative;
  width:clamp(48px,12vw,64px); height:clamp(48px,12vw,64px);
  border-radius:50%;
  background:var(--tangerine);
  border:3px solid var(--deep-navy);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(20px,5vw,26px); color:var(--deep-navy);
  overflow:hidden; flex-shrink:0;
}
.action-tile__badge i{ position:relative; z-index:1; }
.action-tile__badge img{ width:100%; height:100%; object-fit:cover; }
/* logo/wordmark art (not a face) shouldn't be cropped by a circular cover
   mask — let it sit whole, centered, with a little breathing room instead */
.action-tile__badge--contain img{ width:78%; height:78%; object-fit:contain; }
/* the Greatest Studios logo's own colors (orange wordmark) are too close to
   the tangerine badge background to read against it — give this one a light
   backing instead, matching the white background the logo was actually
   designed against */
.action-tile__badge--light{ background:var(--cream); }
.action-tile__label{
  font-family:'Segoe UI',Arial,sans-serif; font-weight:700; letter-spacing:0.3px;
  font-size:clamp(11px,2vw,13px); text-align:center;
}
.action-tile__stat{
  font-family:'Segoe UI',Arial,sans-serif; font-size:11px; color:var(--sky-text);
  min-height:1em;
}
.action-tile__stat:empty{ display:none; }

/* ---- radar-badge variant, used on the Events Tracker tile ---- */
.action-tile__badge--radar .radar-ping{
  position:absolute; inset:-3px; border-radius:50%;
  border:2px solid var(--tangerine); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .action-tile__badge--radar .radar-ping{ animation:radarPing 2s ease-out infinite; }
  .action-tile__badge--radar .radar-ping--delay{ animation-delay:1s; }
}
@keyframes radarPing{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(2.1); opacity:0; }
}

/* ---- idle bounce is Character Select only — these are literally characters,
   so ambient motion reads as "alive." Every other action-tile is a plain
   brand/action icon; bouncing those constantly was diluting what the motion
   meant here and just added noise everywhere else (Columbo pass 4). Hover
   pose stays universal — it's a momentary, triggered response to an actual
   interaction, not background motion, so it doesn't have the same problem. ---- */
@media (prefers-reduced-motion: no-preference){
  .char-tile .action-tile__badge{ animation:idleBounce 2.2s ease-in-out infinite; }
  .char-tile:nth-child(2) .action-tile__badge{ animation-delay:.25s; }
  .char-tile:nth-child(3) .action-tile__badge{ animation-delay:.5s; }
  .action-tile:hover .action-tile__badge{ animation:hoverPose .35s ease-out; }
}
@keyframes idleBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
@keyframes hoverPose{
  0%{ transform:scale(1) rotate(0deg); }
  40%{ transform:scale(1.12) rotate(-4deg); }
  100%{ transform:scale(1.06) rotate(0deg); }
}

/* ---- Events Tracker: up to 3 upcoming-event cards, pulled from the
   tracker's own public schema.org/Event data (same-origin fetch, read-only,
   no tracker files touched). Each card is a direct link to that event's
   ticket page — no detour through the tracker itself. ---- */
.event-cards{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; }
.event-cards__status{ font-size:11.5px; color:var(--sky-text); margin:0 0 16px; }
.event-cards__status:empty{ display:none; }

.event-card{
  position:relative;
  display:flex; align-items:center; gap:12px;
  width:100%;
  background:var(--island); border:3px solid var(--deep-navy); border-radius:9px;
  padding:9px 12px; text-decoration:none; cursor:pointer;
  min-height:44px;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.25), inset 3px 3px 0 0 rgba(255,255,255,0.08), 4px 4px 0 0 var(--deep-navy);
}
@media (prefers-reduced-motion: no-preference){
  .event-card{ transition:transform .06s; }
}
.event-card:hover{ filter:brightness(1.1); }
.event-card:active{ transform:translate(2px,2px); box-shadow:none; }

.event-card__date{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:8px;
  background:var(--deep-navy); border:2px solid var(--tangerine);
}
.event-card__month{ font-family:'Press Start 2P',monospace; font-size:7px; color:var(--tangerine); letter-spacing:.5px; }
.event-card__day{ font-family:'Press Start 2P',monospace; font-size:15px; color:var(--white); margin-top:3px; }

.event-card__info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.event-card__name{
  display:block;
  font-family:'Segoe UI',Arial,sans-serif; font-weight:700; font-size:13px; color:var(--white);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.event-card__venue{
  display:block;
  font-family:'Segoe UI',Arial,sans-serif; font-size:11px; color:var(--sky-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.event-card__venue:empty{ display:none; }

.event-card__badge{
  display:inline-block;
  font-family:'Segoe UI',Arial,sans-serif; font-weight:700; font-size:10px; letter-spacing:.3px;
  padding:2px 6px; border-radius:4px; margin-bottom:3px;
}
.event-card__badge--sold-out{ background:#5a5a5a; color:var(--white); }
.event-card__badge--soon{ background:var(--screen-navy); color:var(--sky-text); border:1px solid var(--sky-text); }

.event-card__go{
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--tangerine); border:2px solid var(--deep-navy); color:var(--deep-navy);
  font-size:14px;
}

/* ---- Halloween Carnival hero banner — own purple/pumpkin-orange palette
   pulled from the event's own artwork (data/design plan: --hc-purple-deep is
   the void behind the character art, --hc-purple the card ground, --hc-purple-
   glow the ambient pulse highlight; --hc-pumpkin/--hc-pumpkin-deep straight
   from the jack-o-lantern orange in the art). Close enough to the site's own
   tangerine/navy language to still read as the same studio, distinct enough
   that it doesn't blend into the regular tangerine tracker-cta sitting right
   below it — two identical-colored "big buttons" back to back would just
   compete with each other instead of one clearly leading. ---- */
.hc-banner{
  position:relative;
  display:flex; align-items:center; gap:16px;
  width:100%;
  text-align:left; text-decoration:none; cursor:pointer;
  background:radial-gradient(120% 140% at 18% 30%, #8A5CC7 0%, #4A2B7A 42%, #2A1547 100%);
  border:3px solid var(--deep-navy); border-radius:14px;
  padding:16px 18px;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.3), inset 3px 3px 0 0 rgba(255,255,255,0.1), 6px 6px 0 0 var(--deep-navy);
  overflow:hidden;
  margin:0 0 18px;
}
@media (prefers-reduced-motion: no-preference){
  .hc-banner{ transition:transform .06s; }
}
.hc-banner:hover{ filter:brightness(1.08); }
.hc-banner:active{ transform:translate(2px,2px); box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.3), inset 3px 3px 0 0 rgba(255,255,255,0.1); }

/* Ambient glow pulse behind the art — the one motion signature unique to this
   banner; everything else below reuses .tracker-cta's existing shine-sweep /
   arrow-slide language on purpose, for consistency rather than novelty. */
.hc-banner__glow{
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 22% 40%, rgba(240,118,43,0.5), transparent 55%);
  filter:blur(18px);
  z-index:0; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .hc-banner__glow{ animation:hcPulse 3.6s ease-in-out infinite; }
}
@keyframes hcPulse{
  0%,100%{ opacity:0.55; transform:scale(1); }
  50%{ opacity:0.95; transform:scale(1.08); }
}

.hc-banner__shine{
  position:absolute; top:0; left:-60%; width:30%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-18deg); pointer-events:none; z-index:1;
}
@media (prefers-reduced-motion: no-preference){
  .hc-banner__shine{ animation:hcShine 4.2s ease-in-out infinite; }
}
@keyframes hcShine{
  0%{ left:-60%; } 45%{ left:130%; } 100%{ left:130%; }
}

.hc-banner__art{
  position:relative; z-index:2; flex-shrink:0;
  width:clamp(72px,20vw,92px); height:clamp(72px,20vw,92px);
  display:flex; align-items:center; justify-content:center;
}
.hc-banner__art img{ width:100%; height:100%; object-fit:contain; display:block; }

.hc-banner__body{ position:relative; z-index:2; flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hc-banner__eyebrow{
  display:flex; align-items:center; gap:6px;
  font-family:'Press Start 2P',monospace; font-size:clamp(8px,2vw,9.5px);
  color:var(--white); letter-spacing:0.5px;
}
.hc-banner__eyebrow i{ font-size:12px; color:#F0762B; }
.hc-banner__title{
  font-family:'Press Start 2P',monospace; font-size:clamp(11px,2.8vw,13.5px);
  color:var(--white); line-height:1.5; text-shadow:1px 1px 0 rgba(0,0,0,0.4);
}
.hc-banner__sub{
  font-family:'Segoe UI',Arial,sans-serif; font-size:11.5px; font-weight:600;
  color:rgba(255,243,226,0.82);
}
.hc-banner__date{
  display:inline-flex; align-self:flex-start; margin-top:2px;
  font-family:'Press Start 2P',monospace; font-size:7.5px; letter-spacing:0.5px;
  color:#2A1547; background:#F0762B;
  border:2px solid var(--deep-navy); border-radius:5px;
  padding:4px 7px;
}

.hc-banner__arrow{
  position:relative; z-index:2; flex-shrink:0;
  font-size:22px; color:var(--white);
}
@media (prefers-reduced-motion: no-preference){
  .hc-banner__arrow{ transition:transform .15s ease-out; }
  .hc-banner:hover .hc-banner__arrow{ transform:translateX(5px); }
}
.hc-banner:focus-visible .hc-banner__arrow{ transform:translateX(5px); }

@media (max-width:420px){
  .hc-banner{ padding:14px; gap:12px; }
  .hc-banner__art{ width:64px; height:64px; }
}

/* ---- Main menu: the events section gets its own labeled panel instead of
   floating loose at the top of the screen — direct feedback: no visual home,
   and inconsistent gaps (measured: 0px between the old unwrapped CTA and the
   nav below it, vs 12-22px everywhere else). The panel's own border/padding
   now does that spacing job in one consistent place. ---- */
.events-panel{
  background:var(--island);
  border:3px solid var(--deep-navy);
  border-radius:12px;
  padding:14px 14px 16px;
  margin:0 0 18px;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.2), inset 3px 3px 0 0 rgba(255,255,255,0.08), 4px 4px 0 0 var(--deep-navy);
}
.events-panel__eyebrow{
  margin:0 0 10px;
  font-family:'Press Start 2P',monospace;
  font-size:clamp(9px,2vw,11px);
  /* tangerine-on-island measures 2.63:1 — checked, not eyeballed — well under
     the 4.5:1 small text needs against this background, so cream instead
     (7.61:1) */
  color:var(--cream);
  letter-spacing:1px;
}

/* ---- up to 6 nearest events, 2 columns. Reuses the same .event-card
   component the (unlinked) Events Tracker page's list uses — same card, same
   click-through-to-tickets behavior — just laid out in a grid instead of a
   single column, and compact enough to survive a ~140px column on a narrow
   phone: stacked instead of row-laid-out, no venue line, no separate
   ticket-icon affordance (the whole card is already the tap target,
   repeating it 6 times in a tight grid was just noise). ---- */
.menu-event-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin:0 0 12px;
}
.menu-event-grid[hidden]{ display:none; }
.menu-event-grid .event-card{
  flex-direction:column; align-items:flex-start; gap:8px;
  padding:10px;
}
.menu-event-grid .event-card__date{
  width:auto; height:auto; flex-direction:row; gap:5px;
  padding:4px 8px; border-radius:6px;
}
.menu-event-grid .event-card__day{ margin-top:0; }
.menu-event-grid .event-card__info{ width:100%; }
.menu-event-grid .event-card__name{
  white-space:normal; text-overflow:clip;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11.5px; line-height:1.3;
}
.menu-event-grid .event-card__venue,
.menu-event-grid .event-card__go{ display:none; }

/* ---- Events Tracker: the big "go explore everything" card. Deliberately
   louder than a normal action-tile — warm gradient, shine sweep, nudging
   arrow — since its whole job is to be the thing your eye lands on and
   wants to tap, not just a neutral utility link. ---- */
.tracker-cta{
  position:relative;
  display:flex; align-items:center; gap:14px;
  width:100%;
  background:linear-gradient(135deg, var(--tangerine), var(--blood-orange));
  border:3px solid var(--deep-navy); border-radius:11px;
  padding:16px;
  text-decoration:none; cursor:pointer;
  box-shadow:inset -3px -3px 0 0 rgba(0,0,0,0.2), inset 3px 3px 0 0 rgba(255,255,255,0.25), 5px 5px 0 0 var(--deep-navy);
  overflow:hidden;
}
@media (prefers-reduced-motion: no-preference){
  .tracker-cta{ transition:transform .06s; }
}
.tracker-cta:hover{ filter:brightness(1.06); }
.tracker-cta:active{ transform:translate(2px,2px); box-shadow:none; }

.tracker-cta__shine{
  position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-18deg); pointer-events:none; z-index:0;
}
@media (prefers-reduced-motion: no-preference){
  .tracker-cta__shine{ animation:shineSweep 3.4s ease-in-out infinite; }
}
@keyframes shineSweep{
  0%{ left:-60%; }
  40%{ left:130%; }
  100%{ left:130%; }
}

.tracker-cta__badge{
  position:relative; z-index:1; flex-shrink:0;
  width:clamp(48px,12vw,56px); height:clamp(48px,12vw,56px); border-radius:50%;
  background:var(--deep-navy); border:3px solid var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(20px,5vw,24px); color:var(--tangerine);
}
.tracker-cta__badge .radar-ping{
  position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--cream); opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .tracker-cta__badge .radar-ping{ animation:radarPing 2s ease-out infinite; }
  .tracker-cta__badge .radar-ping--delay{ animation-delay:1s; }
}

.tracker-cta__body{ position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tracker-cta__title{
  font-family:'Press Start 2P',monospace; font-size:clamp(10px,2.6vw,12px); color:var(--deep-navy); letter-spacing:.5px;
}
.tracker-cta__sub{ font-family:'Segoe UI',Arial,sans-serif; font-size:11.5px; color:rgba(8,18,38,0.75); font-weight:600; }

.tracker-cta__arrow{
  position:relative; z-index:1; flex-shrink:0;
  font-size:20px; color:var(--deep-navy);
}
@media (prefers-reduced-motion: no-preference){
  .tracker-cta__arrow{ transition:transform .15s ease-out; }
  .tracker-cta:hover .tracker-cta__arrow{ transform:translateX(5px); }
}

.roster-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Press Start 2P',monospace; font-size:8.5px; color:var(--cream);
  background:transparent; border:2px solid rgba(255,255,255,0.4); border-radius:6px;
  padding:7px 10px; margin-top:14px; cursor:pointer;
  min-height:44px;
}
.roster-back:hover{ background:rgba(255,255,255,0.08); }

.profile__portrait{
  width:clamp(64px,16vw,84px); height:clamp(64px,16vw,84px); border-radius:50%;
  background:var(--tangerine); border:3px solid var(--deep-navy);
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(28px,7vw,36px); color:var(--deep-navy);
  margin-bottom:12px;
  overflow:hidden;
}
.profile__portrait img{ width:100%; height:100%; object-fit:cover; }
/* same logo-cropping fix as the tile badge — see .action-tile__badge--contain */
.profile__portrait--contain img{ width:78%; height:78%; object-fit:contain; }
.profile__portrait--light{ background:var(--cream); }
.profile__name{ font-family:'Press Start 2P',monospace; font-size:13px; color:var(--tangerine); margin:0 0 4px; }
.profile__tagline{ font-size:11px; color:var(--sky-text); margin:0 0 14px; font-style:italic; }
.profile__bio p{ font-size:12.5px; color:#dbe6f7; line-height:1.7; margin:0 0 10px; }
.profile__bio p strong{ color:var(--white); }


/* ==========================================================================
   REDUCED MOTION — simplify, don't just disable everything blindly
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}