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

:root{
  --dark-blue:#112D59; --deep-navy:#0C2247; --island:#163C74; --vivid-blue:#1260C0;
  --blood-orange:#D1411B; --tangerine:#E66E2F; --grey-orange:#DE8E49; --cream:#FFF3E2; --white:#FFFFFF;

  --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:#0a1a33;
  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(--deep-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;
}
@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; }

@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(13px,3vw,18px); color:var(--white); letter-spacing:1.5px; text-shadow:2px 2px 0 rgba(0,0,0,0.4); margin:0 0 4px; }
.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:#8fb0e0; 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(10px,2vw,14px); }
.menu-item{
  position:relative;
  display:flex; align-items:center; gap:10px; width:100%;
  font-family:'Press Start 2P',monospace; font-size:clamp(8.5px,1.8vw,10.5px); color:var(--deep-navy);
  background:var(--tangerine);
  border:3px solid var(--deep-navy);
  border-radius:7px;
  padding:clamp(11px,2.4vw,14px) 14px;
  min-height:44px;
  cursor:pointer; text-align:left;
  box-shadow:inset -3px -3px 0 0 var(--blood-orange), inset 3px 3px 0 0 var(--grey-orange), 4px 4px 0 0 var(--deep-navy);
  overflow:visible;
}
@media (prefers-reduced-motion: no-preference){
  .menu-item{ transition:transform .06s; }
}
.menu-item i{ font-size:15px; color:var(--deep-navy); flex-shrink:0; }
.menu-item .arrow{ margin-left:auto; font-size:12px; }
.menu-item:hover{ filter:brightness(1.05); }
.menu-item:active{ transform:translate(2px,2px); }

@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:38px; height:38px; 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:#9fb8de; }
.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--short{ min-height:220px; }
.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);
}

/* Telegram's official widget script injects its own iframe here — let it
   size itself, just make sure it can't overflow the rounded card */
#telegramEmbed{ position:relative; z-index:1; }
#telegramEmbed iframe{ width:100% !important; border:0 !important; display:block; }
.iframe-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#8fb0e0; margin:0; z-index:0;
}
.iframe-wrap.is-loaded .iframe-loading{ display:none; }

.embed-unconfigured{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:8px; padding:16px; background:#05132b;
}
.embed-unconfigured__badge{
  width:40px; height:40px; border-radius:50%;
  background:var(--tangerine); border:2px solid var(--deep-navy);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:2px;
}
.embed-unconfigured__badge i{ font-size:18px; color:var(--deep-navy); }
@media (prefers-reduced-motion: no-preference){
  .embed-unconfigured__badge{ animation:idleBounce 2.2s ease-in-out infinite; }
}
.embed-unconfigured p{ margin:0; font-size:12px; color:var(--white); font-weight:700; }
.embed-unconfigured__hint{ font-size:10px !important; color:#8fb0e0 !important; line-height:1.6; font-weight:400 !important; }
.embed-unconfigured code{ background:rgba(255,255,255,0.08); padding:1px 4px; border-radius:3px; }

.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);
  font-family:'Press Start 2P',monospace;
}
@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); }

.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; }
.action-tile__label{ font-size:clamp(7.5px,1.8vw,9px); letter-spacing:1px; text-align:center; }

/* ---- 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; }
}

/* ---- Character Select specifics: idle bounce + hover pose on the badge ---- */
@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; }
  .char-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 teaser chips ---- */
.feature-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.feature-list li{
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:#dbe6f7;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; padding:8px 10px;
}
.feature-list i{ font-size:16px; color:var(--tangerine); flex-shrink:0; }

.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__name{ font-family:'Press Start 2P',monospace; font-size:13px; color:var(--tangerine); margin:0 0 4px; }
.profile__tagline{ font-size:11px; color:#8fb0e0; 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); }

/* ==========================================================================
   SOCIALS LOADOUT
   ========================================================================== */
.socials-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
}
.social-link{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:var(--island);
  border:2px solid var(--deep-navy);
  border-radius:8px;
  padding:14px;
  min-height:44px;
  text-decoration:none;
  color:var(--cream);
  box-shadow:3px 3px 0 0 var(--deep-navy);
}
@media (prefers-reduced-motion: no-preference){
  .social-link{ transition:transform .06s; }
}
.social-link:hover{ filter:brightness(1.1); }
.social-link:active{ transform:translate(2px,2px); box-shadow:none; }
.social-link i{ font-size:22px; color:var(--tangerine); margin-bottom:2px; }
.social-link__name{ font-weight:700; font-size:13px; }
.social-link__handle{ font-size:11px; color:#9fb8de; }

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