/* Star Fighter — game styles, fully scoped under .sf so they never touch the site.
   All custom properties live on .sf (NOT :root). */
.sf {
  --sf-text:#dbeafe; --sf-muted:#93a4c8; --sf-accent:#7dd3fc; --sf-good:#86efac;
  --sf-bad:#fb7185; --sf-warn:#fde68a; --sf-line:rgba(255,255,255,.12);
  --sf-panel:rgba(16,22,42,.86); --sf-panel2:#15203a;
  color:var(--sf-text);
}
.sf .sf-head { text-align:center; padding:2px 0 14px; }
.sf .sf-head h1 { margin:0; font-size:clamp(28px,5vw,48px); letter-spacing:-0.04em; line-height:1;
  background:linear-gradient(180deg,#bfe9ff,#5b8cff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sf .sf-head p { max-width:760px; margin:12px auto 0; color:var(--sf-muted); font-size:15px; line-height:1.5; }

/* HUD */
.sf .sf-hud {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--sf-panel); border:1px solid var(--sf-line); border-radius:14px;
  padding:10px 14px; margin-bottom:12px; font-size:14px;
}
.sf .sf-hud b { color:var(--sf-text); font-weight:800; }
.sf .sf-hud > div { color:var(--sf-muted); white-space:nowrap; }
.sf .sf-hud .spacer { flex:1 1 auto; }
.sf .sf-vit { display:flex; align-items:center; gap:8px; }
.sf .sf-vit > span { color:var(--sf-muted); font-weight:800; font-size:11px; letter-spacing:.06em; }
.sf .bar { width:120px; height:12px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; border:1px solid var(--sf-line); }
.sf .bar > i { display:block; height:100%; width:100%; border-radius:999px;
  background:linear-gradient(90deg,#7dd3fc,#38bdf8); transition:width .12s linear; }
.sf .bar.hp > i { background:linear-gradient(90deg,#86efac,#22c55e); }
.sf .bar.xp > i { background:linear-gradient(90deg,#fde68a,#f59e0b); }
.sf .sf-vit.lvl > span b { color:var(--sf-text); }
.sf .sf-wpn { color:var(--sf-muted); }
.sf .sf-btn {
  appearance:none; border:1px solid var(--sf-line); background:linear-gradient(145deg,var(--sf-panel2),#0e1730);
  color:var(--sf-text); border-radius:10px; padding:7px 11px; font-size:16px; cursor:pointer; line-height:1;
}
.sf .sf-btn:hover { border-color:rgba(125,211,252,.7); }
.sf #btnExitFs { display:inline-flex; align-items:center; justify-content:center; }

/* Audio settings popover — pinned to the top-right of the stage */
.sf .sf-audio {
  position:absolute; top:10px; right:10px; z-index:8; width:200px;
  background:#0d1428; border:1px solid rgba(125,211,252,.25); border-radius:12px;
  padding:12px; box-shadow:0 18px 50px rgba(0,0,0,.5); display:grid; gap:10px;
}
.sf .sf-audio[hidden] { display:none; }
.sf .sf-audio label { display:grid; gap:6px; font-size:12px; font-weight:700; color:var(--sf-muted); }
.sf .sf-audio input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background:rgba(255,255,255,.14); outline:none; cursor:pointer;
}
.sf .sf-audio input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:linear-gradient(145deg,#7dd3fc,#38bdf8); border:1px solid rgba(0,0,0,.3); cursor:pointer;
}
.sf .sf-audio input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border:none; border-radius:50%; background:#38bdf8; cursor:pointer;
}
.sf .sf-mute-all {
  appearance:none; border:1px solid var(--sf-line); background:var(--sf-panel2); color:var(--sf-text);
  border-radius:9px; padding:7px; font-weight:700; font-size:12px; cursor:pointer;
}
.sf .sf-mute-all:hover { border-color:rgba(125,211,252,.6); }
.sf .sf-mute-all.on { background:linear-gradient(145deg,#7a2a2a,#4c0519); color:#fecaca; }
.sf .sf-mute-all.off { opacity:.55; }

/* Stage + canvas */
.sf .sf-stage {
  position:relative; border:1px solid var(--sf-line); border-radius:16px; overflow:hidden;
  background:#05070f; box-shadow:0 20px 55px rgba(0,0,0,.32);
}
.sf #cv { display:block; width:100%; height:auto; max-width:100%; touch-action:none; background:#05070f; cursor:crosshair; }

/* Immersive / fullscreen play — cover the whole viewport (works even where the
   Fullscreen API doesn't, e.g. iOS). HUD on top, stage fills, canvas centered. */
html.sf-immersive, html.sf-immersive body { overflow:hidden !important; height:100%; }
html.sf-immersive .sf {
  position:fixed; inset:0; z-index:1000; margin:0; background:#03040a;
  display:flex; flex-direction:column; padding:6px; box-sizing:border-box;
}
html.sf-immersive .sf-head { display:none; }
html.sf-immersive .sf-hud { flex:0 0 auto; margin-bottom:6px; }
html.sf-immersive .sf-stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:0; background:#000; border-radius:0; }
html.sf-immersive .sf-stage #cv { width:auto; height:auto; max-width:100%; max-height:100%; }

/* Touch controls — twin stick (move + aim/fire). Translucent so they don't block
   the view; offsets use safe-area insets and sit clear of the bottom edge. */
.sf .sf-touch { position:absolute; inset:0; z-index:5; pointer-events:none; } /* below overlays (z6) so cards stay tappable */
.sf .sf-touch[hidden] { display:none; }
html.sf-cardopen .sf-touch { display:none; } /* clear controls while a card is up */
.sf .sf-stick {
  position:absolute; bottom:calc(env(safe-area-inset-bottom, 0px) + 20px); width:128px; height:128px; border-radius:50%;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.16);
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.sf .sf-stick.move { left:calc(env(safe-area-inset-left, 0px) + 18px); }
.sf .sf-stick.aim { right:calc(env(safe-area-inset-right, 0px) + 18px); }
.sf .sf-stick > i {
  position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:rgba(125,211,252,.32); border:1px solid rgba(255,255,255,.28); pointer-events:none;
}
.sf .sf-stick.aim > i { background:rgba(251,113,133,.34); } /* aim/fire knob = red */
.sf .sf-nuke {
  position:absolute; right:calc(env(safe-area-inset-right, 0px) + 156px); bottom:calc(env(safe-area-inset-bottom, 0px) + 30px);
  width:62px; height:62px; border-radius:50%; appearance:none; cursor:pointer;
  background:rgba(253,230,138,.18); border:1px solid rgba(253,230,138,.55); color:#fde68a; font-size:24px;
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.sf .sf-nuke:active { background:rgba(253,230,138,.4); }

/* Rotate-to-landscape prompt — only while actually playing (immersive), in portrait */
.sf .sf-rotate { display:none; }
@media (pointer:coarse) and (orientation:portrait) {
  html.sf-immersive .sf-rotate {
    position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; background:rgba(3,5,12,.97); color:var(--sf-accent); font-weight:800; font-size:46px; text-align:center;
  }
  html.sf-immersive .sf-rotate span { font-size:16px; color:var(--sf-text); max-width:240px; line-height:1.4; }
}
.sf .sf-rotate button {
  margin-top:6px; appearance:none; border:1px solid var(--sf-line); background:var(--sf-panel2);
  color:var(--sf-text); border-radius:10px; padding:9px 18px; font-weight:700; font-size:14px; cursor:pointer; pointer-events:auto;
}

/* On touch, float the HUD compact OVER the game so the canvas fills the screen */
@media (pointer:coarse) {
  html.sf-immersive .sf { padding:0; }
  html.sf-immersive .sf-stage { position:absolute; inset:0; }
  html.sf-immersive .sf-hud {
    position:absolute; top:6px; left:6px; right:auto; width:auto; max-width:62%; z-index:7;
    flex:none; margin:0; padding:4px 8px; gap:3px 8px; font-size:11px; line-height:1.15;
    background:rgba(6,10,22,.6); border:1px solid var(--sf-line); border-radius:10px;
  }
  html.sf-immersive .sf-hud .spacer { display:none; }
  html.sf-immersive .sf-hud .bar { width:64px; height:8px; }
  html.sf-immersive .sf-hud .sf-btn { padding:3px 7px; font-size:13px; }
  html.sf-immersive.sf-cardopen .sf-hud { display:none; }
  .sf .sf-keys { display:none; }
}

/* Overlays */
.sf .sf-overlay {
  position:absolute; inset:0; display:flex; align-items:safe center; justify-content:center;
  padding:18px; background:rgba(3,5,12,.74); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  z-index:6; overflow-y:auto;
}
.sf .sf-overlay[hidden] { display:none; }
.sf .sf-card {
  width:min(580px,100%); background:#0b1326; border:1px solid rgba(125,211,252,.22);
  border-radius:18px; padding:22px; text-align:center; box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.sf .sf-card h2 { margin:0 0 10px; font-size:clamp(24px,4vw,34px); }
.sf .sf-card p { color:var(--sf-muted); line-height:1.55; margin:0 0 12px; font-size:14px; }
.sf .sf-keys { font-size:13px; }
.sf .sf-keys b { color:var(--sf-accent); }

.sf .sf-go {
  appearance:none; border:1px solid rgba(125,211,252,.3); cursor:pointer; font:inherit; font-weight:800;
  color:#04121f; background:linear-gradient(145deg,#7dd3fc,#38bdf8); border-radius:12px;
  padding:12px 22px; font-size:16px; margin:6px 5px 0;
}
.sf .sf-go:hover { filter:brightness(1.06); }
.sf .sf-go.ghost { background:linear-gradient(145deg,var(--sf-panel2),#0e1730); color:var(--sf-text); }

/* End screen */
.sf .sf-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:8px 0 14px; }
.sf .sf-stats > div { background:rgba(255,255,255,.04); border:1px solid var(--sf-line); border-radius:12px; padding:10px 8px; }
.sf .sf-stats span { display:block; color:var(--sf-muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.sf .sf-stats b { display:block; margin-top:5px; font-size:22px; font-weight:800; }
.sf .sf-cardimg {
  display:block; width:100%; max-width:100%; height:auto; border-radius:12px;
  border:1px solid var(--sf-line); margin:0 auto 12px; background:#070b16;
}
.sf .sf-share { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.sf .sf-share-note { color:var(--sf-good); font-size:13px; min-height:18px; margin-top:10px; }

/* Level-up overlay — choose-an-upgrade cards */
.sf .sf-card.lvl-card-wrap { width:min(820px,100%); }
.sf .lvl-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 6px; }
.sf .lvl-card {
  position:relative; text-align:left; cursor:pointer; appearance:none; color:var(--sf-text);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--sf-line); border-top:3px solid var(--cc,#7dd3fc); border-radius:14px; padding:14px 12px 12px;
  display:flex; flex-direction:column; gap:4px; min-height:150px; transition:transform .08s, border-color .12s, background .12s;
}
.sf .lvl-card:hover, .sf .lvl-card.sel { background:linear-gradient(160deg,rgba(125,211,252,.14),rgba(255,255,255,.03)); border-color:var(--cc,#7dd3fc); transform:translateY(-2px); }
.sf .lvl-card .lc-icon { font-size:30px; line-height:1; }
.sf .lvl-card .lc-title { font-weight:800; font-size:16px; color:var(--cc,#fff); }
.sf .lvl-card .lc-sub { font-size:12px; font-weight:700; color:var(--sf-accent); }
.sf .lvl-card .lc-desc { font-size:12px; color:var(--sf-muted); line-height:1.4; margin-top:2px; }
.sf .lvl-card .lc-key { position:absolute; top:8px; right:10px; font-size:12px; font-weight:800; color:var(--sf-muted); opacity:.7; }
.sf .lvl-hint { margin-top:6px; opacity:.8; }
.sf .lvl-build { border-top:1px solid var(--sf-line); margin-top:10px; padding-top:10px; text-align:left; }
.sf .lvl-build-h { color:var(--sf-muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
.sf .lvl-build .sf-build { margin:0; }

/* Build strip (pause) */
.sf .sf-build { text-align:left; margin:0 0 14px; display:grid; gap:8px; }
.sf .sf-build .build-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; }
.sf .sf-build .build-row > span { color:var(--sf-muted); font-weight:800; text-transform:uppercase; letter-spacing:.06em; min-width:64px; }
.sf .sf-build .build-row b { background:rgba(255,255,255,.06); border:1px solid var(--sf-line); border-radius:8px; padding:3px 8px; font-weight:700; }

@media (pointer:coarse) { .sf .lvl-card .lc-key { display:none; } }
@media (max-width:560px) { .sf .lvl-cards { grid-template-columns:1fr; } .sf .lvl-card { min-height:0; flex-direction:row; align-items:center; flex-wrap:wrap; } .sf .lvl-card .lc-desc { flex-basis:100%; } }
.sf .sf-build .build-row.pairs b { font-size:11px; }

/* Live in-game build bar — weapons + mods with levels (mod chips show paired weapon) */
.sf .sf-buildbar { position:absolute; left:50%; transform:translateX(-50%); bottom:8px; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:96%; pointer-events:none; }
.sf .sf-buildbar[hidden] { display:none; }
.sf .bchip { display:flex; align-items:center; gap:3px; background:rgba(8,12,22,.72); border:1px solid var(--sf-line); border-radius:8px; padding:3px 7px; line-height:1; }
.sf .bchip .bi { font-size:15px; }
.sf .bchip .bl { color:var(--sf-muted); font-weight:800; font-size:11px; }
.sf .bchip.wpn { border-color:var(--cc); }
.sf .bchip.wpn .bl { color:var(--cc); }
.sf .bchip.wpn.evo { box-shadow:0 0 10px var(--cc); }
.sf .bchip.mod.paired { border-color:var(--cc); }
.sf .bchip .pairbadge { font-size:11px; opacity:.9; }
.sf .bchip.abil { border-color:#fbbf24; }
.sf .bchip.abil .bl { color:#fbbf24; }
@media (pointer:coarse) { .sf .sf-buildbar { bottom:6px; gap:4px; } .sf .bchip { padding:2px 5px; } .sf .bchip .bi { font-size:13px; } .sf .bchip .bl { font-size:10px; } }

/* Active temp-buff bar (with time left) — stacks just above the build bar */
.sf .sf-buffbar { position:absolute; left:50%; transform:translateX(-50%); bottom:40px; z-index:3; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:96%; pointer-events:none; }
.sf .sf-buffbar[hidden] { display:none; }
.sf .buffchip { display:flex; align-items:center; gap:4px; background:rgba(8,12,22,.82); border:1px solid var(--cc,#7dd3fc); border-radius:999px; padding:3px 9px; line-height:1; box-shadow:0 0 8px -2px var(--cc,#7dd3fc); }
.sf .buffchip .bi { font-size:14px; }
.sf .buffchip .bt { color:var(--cc,#fff); font-weight:800; font-size:11px; font-variant-numeric:tabular-nums; }
html.sf-cardopen .sf .sf-buffbar, html.sf-cardopen .sf .sf-buildbar { display:none; }
@media (pointer:coarse) { .sf .sf-buffbar { bottom:30px; gap:4px; } .sf .buffchip { padding:2px 7px; } }

/* Legend / guide panel (opened from the ❓ HUD button) — tabbed, scannable rows */
.sf .sf-legend { position:absolute; top:10px; right:10px; z-index:9; width:344px; max-width:94%; max-height:84%; display:flex; flex-direction:column; background:linear-gradient(180deg,#0e1730,#0a0f1f); border:1px solid rgba(125,211,252,.28); border-radius:14px; box-shadow:0 22px 60px rgba(0,0,0,.6); overflow:hidden; }
.sf .sf-legend[hidden] { display:none; }
.sf .sf-legend-top { display:flex; align-items:center; justify-content:space-between; padding:11px 13px; border-bottom:1px solid rgba(125,211,252,.16); }
.sf .sf-legend-title { font-weight:800; font-size:14px; color:#e9f1ff; letter-spacing:.01em; }
.sf .sf-legend-x { background:rgba(255,255,255,.06); border:1px solid var(--sf-line); color:var(--sf-muted); border-radius:8px; width:26px; height:26px; cursor:pointer; font-size:12px; line-height:1; }
.sf .sf-legend-x:hover { color:#fff; border-color:#7dd3fc; }
.sf .sf-legend-tabs { display:flex; gap:3px; padding:8px 8px 0; border-bottom:1px solid rgba(125,211,252,.14); }
.sf .sf-legtab { flex:1; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--sf-muted); font-weight:700; font-size:12px; padding:8px 2px; cursor:pointer; border-radius:7px 7px 0 0; transition:color .12s, background .12s; }
.sf .sf-legtab:hover { color:#cfe0ff; background:rgba(255,255,255,.04); }
.sf .sf-legtab.active { color:#7dd3fc; border-bottom-color:#7dd3fc; background:rgba(125,211,252,.08); }
.sf .sf-legend-body { overflow-y:auto; padding:9px; }
.sf .sf-legsec { display:flex; flex-direction:column; gap:6px; }
.sf .sf-legsec[hidden] { display:none; }
.sf .legrow { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.035); border:1px solid var(--sf-line); border-left:3px solid var(--cc,#7dd3fc); border-radius:10px; padding:8px 10px; }
.sf .legicon { font-size:19px; line-height:1.15; flex:0 0 auto; width:23px; text-align:center; }
.sf .legtext { min-width:0; }
.sf .legname { font-weight:800; font-size:13px; color:#eaf2ff; }
.sf .legname .legevo { font-weight:700; font-size:11px; color:var(--cc,#7dd3fc); margin-left:3px; }
.sf .legdesc { font-size:11.5px; color:var(--sf-muted); line-height:1.42; margin-top:2px; }
.sf .sf-legend-body::-webkit-scrollbar { width:8px; }
.sf .sf-legend-body::-webkit-scrollbar-thumb { background:rgba(125,211,252,.25); border-radius:8px; }

/* Reroll + Swap buttons on the level-up card */
.sf .sf-reroll, .sf .sf-swap { margin:2px 4px 8px; display:inline-block; font-size:13px; padding:6px 14px; }
.sf .sf-reroll[disabled] { opacity:.38; cursor:not-allowed; }
.sf .sf-swap { border-color:rgba(196,181,253,.55); color:#ddd6fe; box-shadow:0 0 14px -4px #c4b5fd; }
.sf .sf-swap[hidden] { display:none; }

/* Paragon allocation (level-up overlay once your build is fully maxed) — 5 compact stat cards */
.sf .lvl-cards.pg { grid-template-columns:repeat(5,1fr); }
.sf .lvl-cards.pg .lvl-card { min-height:128px; padding:22px 10px 12px; }
.sf .lvl-card .lc-badge { position:absolute; top:7px; left:10px; font-size:9px; font-weight:900; letter-spacing:.09em; color:var(--cc,#c084fc); opacity:.85; }
@media (max-width:680px) { .sf .lvl-cards.pg { grid-template-columns:repeat(2,1fr); } }

/* Active-ability button (bottom-right by default; flips with joystick side) */
.sf .sf-ability {
  position:absolute; z-index:5; right:calc(env(safe-area-inset-right, 0px) + 22px); bottom:calc(env(safe-area-inset-bottom, 0px) + 28px);
  width:72px; height:72px; border-radius:50%; appearance:none; cursor:pointer;
  background:rgba(251,191,36,.16); border:2px solid rgba(251,191,36,.5); color:#fde68a;
  display:flex; align-items:center; justify-content:center; line-height:1;
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.sf .sf-ability[hidden] { display:none; }
.sf .sf-ability .ab-ico { font-size:30px; }
.sf .sf-ability .ab-cd { position:absolute; font-size:24px; font-weight:900; color:#fff; }
.sf .sf-ability.ready { border-color:#fbbf24; box-shadow:0 0 16px rgba(251,191,36,.7); }
.sf .sf-ability.ready .ab-ico { opacity:1; }
.sf .sf-ability.cooling { background:rgba(8,12,22,.6); border-color:var(--sf-line); }
.sf .sf-ability.cooling .ab-ico { opacity:.35; }
.sf .sf-ability.cooling .ab-cd { opacity:.95; }
html.sf-cardopen .sf .sf-ability { display:none; } /* hide while a card/overlay is up */

/* Joystick side preference — default joystick LEFT, ability RIGHT; flip when sf-stickright */
html.sf-stickright .sf .sf-stick.move { left:auto; right:calc(env(safe-area-inset-left, 0px) + 18px); }
html.sf-stickright .sf .sf-ability { right:auto; left:calc(env(safe-area-inset-right, 0px) + 22px); }
.sf .sf-stick-toggle { display:none; } /* joystick choice only matters on touch */
@media (pointer:coarse) { .sf .sf-stick-toggle { display:inline-block; } }

/* Short / landscape-phone screens: compact the overlay cards so they fit */
@media (max-height:560px) {
  .sf .sf-card { padding:14px; }
  .sf .sf-card h2 { font-size:22px; margin-bottom:6px; }
  .sf .sf-card p { font-size:12px; margin:0 0 8px; }
  .sf .sf-go { padding:9px 16px; font-size:14px; }
  .sf .sf-stats { margin:6px 0 10px; }
  .sf .sf-cardimg { max-width:300px; margin-bottom:8px; }
}

@media (max-width:640px) {
  .sf .sf-hud { gap:9px; font-size:12.5px; padding:9px 11px; }
  .sf .bar { width:90px; }
}