/* Star Reaper — game styles */

  @import url('https://fonts.googleapis.com/css2?family=Saira:wght@200;400;600&family=Saira+Condensed:wght@300;500;700&family=Share+Tech+Mono&display=swap');

  :root {
    --void:  #04060b;   /* near-black hull */
    --void2: #090d16;
    --cyan:  #36d2e0;   /* primary teal readout */
    --amber: #ffb43a;   /* military amber */
    --volt:  #ffd23a;   /* electric-yellow charge */
    --alert: #ff5a36;   /* danger / overcharge */
    --magenta: #ff5a36; /* legacy alias -> alert (no more purple) */
    --lime:  #87dd62;   /* muted success green */
    --ink:   #bcccd9;   /* cool steel text */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    height: 100%;
    background: var(--void);
    overflow: hidden;
    font-family: 'Share Tech Mono', monospace;
    color: var(--ink);
    user-select: none;
    -webkit-user-select: none;
  }

  #wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse at 50% -10%, #0d1a2e 0%, transparent 62%),
      radial-gradient(ellipse at 50% 115%, #1c120b 0%, transparent 55%),
      var(--void);
  }

  #stage {
    position: relative;
    height: 100%;
    max-height: 100vh;
    aspect-ratio: 9 / 16;
    max-width: 100vw;
    box-shadow: 0 0 80px rgba(47,243,255,.15), inset 0 0 120px rgba(0,0,0,.6);
    border-left: 1px solid rgba(47,243,255,.12);
    border-right: 1px solid rgba(47,243,255,.12);
    overflow: hidden;
  }

  canvas {
    display: block; width: 100%; height: 100%;
    touch-action: none;            /* drags steer the ship, never scroll/zoom the page */
    -webkit-touch-callout: none;
  }

  /* ---------- HUD ---------- */
  #hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .stat-label {
    font-size: 10px; letter-spacing: 3px; opacity: .55; text-transform: uppercase;
  }
  .stat-val {
    font-family: 'Saira Condensed', sans-serif; font-weight: 700;
    font-size: 24px; line-height: 1; text-shadow: 0 0 12px currentColor;
  }

  /* centered primary score readout */
  #scoreBox {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    text-align: center; color: var(--cyan);
  }
  #scoreBox .stat-label { opacity: .5; }
  #scoreBox .stat-val {
    font-size: 48px; font-weight: 700; letter-spacing: 1px; margin-top: 2px;
    /* draw the stroke first so the cyan fill stays crisp on top */
    paint-order: stroke fill;
    -webkit-text-stroke: 4px #000;
    text-shadow: 0 0 18px rgba(54,210,224,.55), 0 0 4px rgba(54,210,224,.9);
  }

  /* next-boss countdown, top-right */
  #bossBox {
    position: absolute; top: 16px; right: 18px;
    text-align: right; color: var(--amber);
    transition: color .25s ease;
  }
  /* under 10s to boss: warn */
  #bossBox.imminent { color: var(--alert); }
  /* boss currently on the field */
  #bossBox.active { color: var(--alert); }
  #bossBox.imminent .stat-val,
  #bossBox.active .stat-val { animation: bossPulse .6s ease-in-out infinite; }
  @keyframes bossPulse {
    0%, 100% { opacity: 1;   text-shadow: 0 0 12px currentColor; }
    50%      { opacity: .5;  text-shadow: 0 0 22px currentColor; }
  }

  /* hull integrity (lives), top-left */
  #livesBox {
    position: absolute; top: 14px; left: 16px;
    color: #ff7a3a; text-align: left;
  }

  /* energy: vertical "voltage" gauge on the left edge */
  #energyWrap {
    position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  }
  #energyLabel {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 3px; color: rgba(255,210,58,.7);
    text-transform: uppercase;
  }
  #energyTrack {
    position: relative; width: 22px; height: 44%; min-height: 170px;
    border: 1px solid rgba(255,210,58,.45);
    background: rgba(255,210,58,.05);
    border-radius: 3px; overflow: hidden;
    box-shadow: 0 0 12px rgba(255,210,58,.12) inset, 0 0 8px rgba(0,0,0,.7);
  }
  /* fill grows from the bottom up as charge builds */
  #energyFill {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
    background: linear-gradient(0deg, #a85400 0%, var(--volt) 55%, #fff4c2 100%);
    box-shadow: 0 0 16px rgba(255,210,58,.75);
    transition: height .12s ease-out;
    animation: voltPulse 1.05s ease-in-out infinite;
  }
  /* segmented "cells" overlay for a gritty gauge readout */
  #energyTrack::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(0deg,
      transparent 0 8.5%, rgba(0,0,0,.55) 8.5% 10%);
  }
  @keyframes voltPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.4); }
  }
  #energyTxt {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; letter-spacing: 1px; color: rgba(255,210,58,.9);
    text-shadow: 0 0 8px rgba(255,210,58,.5);
  }

  /* active buff chips */
  #buffs { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .buff {
    font-size: 11px; letter-spacing: 1px; padding: 4px 9px;
    border: 1px solid currentColor; border-radius: 20px;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
    text-shadow: 0 0 8px currentColor; white-space: nowrap;
  }

  /* ---------- Overlays ---------- */
  .screen {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px; text-align: center; padding: 30px;
    background: radial-gradient(ellipse at center, rgba(10,12,31,.82) 0%, rgba(5,6,15,.96) 100%);
    backdrop-filter: blur(3px);
  }
  .hidden { display: none !important; }

  /* ---- Fleet wordmark ---- */
  .logo {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; width: 100%; max-width: 440px; margin-bottom: 4px;
    container-type: inline-size;
  }
  .logo-eyebrow {
    display: flex; align-items: center; gap: 12px;
    width: 100%; justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; letter-spacing: 6px; text-transform: uppercase;
    color: #8fb4c9; opacity: .8;
  }
  .logo-eyebrow::before, .logo-eyebrow::after {
    content: ''; height: 1px; flex: 1; max-width: 70px;
    background: linear-gradient(90deg, transparent, #5b7e92);
  }
  .logo-eyebrow::after { background: linear-gradient(90deg, #5b7e92, transparent); }

  .title {
    position: relative; white-space: nowrap;
    font-family: 'Saira Condensed', sans-serif; font-weight: 500;
    /* sized to the logo container width so the wordmark + tracking always fits */
    font-size: clamp(40px, 17cqw, 88px);
    letter-spacing: clamp(4px, 2.6cqw, 18px);
    line-height: .9; text-transform: uppercase;
    /* brushed-steel fill */
    background: linear-gradient(180deg, #f4fbff 0%, #b7ccd9 38%, #7d97a6 60%, #dfeef6 78%, #9fb6c4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-indent: clamp(4px, 2.6cqw, 18px); /* offset tracking so it stays centered */
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.25)) drop-shadow(0 2px 14px rgba(40,90,120,.55));
  }
  /* faint engraved double-stroke behind the fill */
  .title::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    -webkit-text-stroke: 1px rgba(150,200,225,.18);
    color: transparent; z-index: -1;
  }
  .logo-rule {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(143,180,201,.55) 20%, rgba(143,180,201,.55) 80%, transparent);
    position: relative;
  }
  .logo-rule::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 5px; transform: translate(-50%,-50%) rotate(45deg);
    background: var(--amber); box-shadow: 0 0 8px var(--amber);
  }
  .logo-reg {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; letter-spacing: 4px; color: #6f8f9f;
    display: flex; gap: 14px; align-items: center;
  }
  .logo-reg .amber { color: var(--amber); opacity: .9; }

  .subtitle {
    font-family: 'Saira', sans-serif; font-weight: 400;
    font-size: 12px; letter-spacing: 5px; opacity: .55; text-transform: uppercase;
  }

  .gameover {
    font-family: 'Saira Condensed', sans-serif; font-weight: 700;
    font-size: clamp(34px, 9vw, 60px); letter-spacing: 10px;
    text-transform: uppercase; padding-left: 10px;
    color: #cfe3ee; text-shadow: 0 0 26px rgba(120,170,200,.6);
    animation: flick 2.4s infinite;
  }
  @keyframes flick { 0%,97%,100%{opacity:1} 98%{opacity:.45} 99%{opacity:.8} }

  .bigscore {
    font-family: 'Saira Condensed', sans-serif; font-weight: 600;
    font-size: clamp(40px, 12vw, 80px); letter-spacing: 2px;
    background: linear-gradient(180deg, #f4fbff, #9fb6c4);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 12px rgba(40,90,120,.5)); line-height: 1;
  }
  .scorecaption { font-size: 11px; letter-spacing: 4px; opacity: .6; text-transform: uppercase; }
  .besttag { font-size: 13px; letter-spacing: 3px; color: var(--amber); text-shadow: 0 0 12px var(--amber); }

  .btn {
    pointer-events: auto; cursor: pointer;
    font-family: 'Saira Condensed', sans-serif; font-weight: 600;
    font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
    padding: 14px 40px; min-width: 240px;
    color: var(--void);
    background: linear-gradient(180deg, #57e2ec, var(--cyan));
    border: 1px solid rgba(120,240,250,.6); border-radius: 2px;
    box-shadow: 0 0 16px rgba(54,210,224,.35), inset 0 0 12px rgba(255,255,255,.15);
    transition: transform .12s, box-shadow .12s, background .12s;
  }
  .btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 0 26px rgba(54,210,224,.6), inset 0 0 12px rgba(255,255,255,.2); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn.ghost {
    background: transparent; color: var(--ink);
    border: 1px solid rgba(188,204,217,.35); box-shadow: none;
  }
  .btn.ghost:hover { border-color: var(--amber); color: var(--amber); box-shadow: 0 0 20px rgba(255,180,58,.35); }

  .hint { font-size: 11px; letter-spacing: 2px; opacity: .45; line-height: 1.8; }

  /* lives display */
  #lives { display: flex; gap: 6px; justify-content: flex-start; margin-top: 6px; }
  #lives svg {
    width: 22px; height: 22px; display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)) drop-shadow(0 0 7px rgba(255,90,40,.55));
  }
  #lives .empty svg { opacity: .2; filter: grayscale(.6) brightness(.7); }

  /* bonus codex */
  #codexList {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; max-width: 420px; text-align: left;
  }
  .codex-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px; border-radius: 8px;
    border: 1px solid rgba(201,212,255,.14);
    background: rgba(255,255,255,.03);
  }
  .codex-glyph {
    flex: 0 0 44px; height: 44px; border-radius: 8px;
    display: grid; place-items: center;
    border: 1px solid currentColor;
    box-shadow: 0 0 16px currentColor inset, 0 0 12px currentColor;
  }
  .codex-glyph svg { width: 24px; height: 24px; }
  .codex-name {
    font-family: 'Saira Condensed', sans-serif; font-weight: 600;
    font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 10px currentColor;
  }
  .codex-desc { font-size: 12px; letter-spacing: .5px; opacity: .7; line-height: 1.5; margin-top: 4px; color: var(--ink); }
  .keycap {
    display: inline-block; border: 1px solid rgba(201,212,255,.4); border-radius: 4px;
    padding: 1px 7px; margin: 0 1px; color: var(--cyan);
  }

  /* ---------- Pilot row (main menu) ---------- */
  .pilot {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; letter-spacing: 2px;
    color: rgba(201, 212, 255, .55);
    text-transform: uppercase;
    pointer-events: auto;
  }
  .pilot .pilot-name {
    color: var(--cyan);
    text-shadow: 0 0 10px var(--cyan);
    margin: 0 2px;
  }
  .pilot a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dashed rgba(201, 212, 255, .35);
    padding-bottom: 1px;
    cursor: pointer;
  }
  .pilot a:hover {
    color: var(--amber);
    border-color: var(--amber);
    text-shadow: 0 0 10px var(--amber);
  }

  /* ---------- Nickname prompt ---------- */
  .name-input {
    pointer-events: auto;
    font-family: 'Saira Condensed', sans-serif; font-weight: 600;
    font-size: 22px; letter-spacing: 6px; text-transform: uppercase;
    text-align: center;
    padding: 14px 20px; min-width: 260px; max-width: 320px;
    background: rgba(255, 255, 255, .04);
    color: var(--cyan);
    border: 1px solid rgba(47, 243, 255, .4);
    border-radius: 4px;
    box-shadow: 0 0 22px rgba(47, 243, 255, .15) inset;
    caret-color: var(--cyan);
    outline: none;
    transition: border-color .12s, box-shadow .12s;
  }
  .name-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 22px rgba(47, 243, 255, .35) inset,
                0 0 22px rgba(47, 243, 255, .4);
  }
  .name-input::placeholder {
    color: rgba(201, 212, 255, .28);
    letter-spacing: 4px;
  }
  .name-error {
    min-height: 1.4em;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; letter-spacing: 2px;
    color: #ff506b;
    text-shadow: 0 0 10px rgba(255, 80, 107, .8);
  }

  /* ---------- Leaderboard ---------- */
  #lbList {
    width: 100%; max-width: 440px;
  }
  .lb-table {
    display: flex; flex-direction: column; gap: 5px;
  }
  .lb-row {
    display: grid;
    grid-template-columns: 38px 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 10px 14px; border-radius: 6px;
    border: 1px solid rgba(201, 212, 255, .12);
    background: rgba(255, 255, 255, .03);
    font-family: 'Share Tech Mono', monospace;
    text-align: left;
  }
  .lb-row.lb-self {
    border-color: rgba(47, 243, 255, .55);
    background: rgba(47, 243, 255, .07);
    box-shadow: 0 0 18px rgba(47, 243, 255, .18);
  }
  .lb-rank {
    color: var(--amber); letter-spacing: 1px;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(255, 207, 74, .5);
  }
  .lb-name {
    color: var(--ink); letter-spacing: 1px;
    font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lb-meta {
    color: rgba(142, 166, 187, .85);
    font-size: 10px; letter-spacing: 1px;
    text-align: right;
  }
  .lb-score {
    color: var(--cyan); text-align: right;
    font-family: 'Saira Condensed', sans-serif; font-weight: 700;
    font-size: 20px; letter-spacing: 1px; line-height: 1;
    text-shadow: 0 0 10px currentColor;
    min-width: 60px;
  }
  .lb-empty {
    text-align: center; padding: 28px 0;
    font-size: 12px; letter-spacing: 2px;
    color: rgba(201, 212, 255, .5);
    line-height: 1.6;
  }
  .lb-empty.lb-error { color: #ff8088; }
  .lb-clear-btn {
    min-width: auto; padding: 8px 18px;
    font-size: 11px; letter-spacing: 2px;
    opacity: .7;
  }

  /* leaderboard-submission status on the game-over screen */
  .submit-status {
    min-height: 1.2em;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; letter-spacing: 2px;
    color: rgba(201, 212, 255, .6);
  }
  .submit-status.ok  { color: var(--lime); text-shadow: 0 0 10px rgba(125, 255, 94, .6); }
  .submit-status.err { color: #ff8088; }

  /* buff pickup flash */
  #buffFlash {
    position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
    font-family: 'Saira Condensed', sans-serif; font-weight: 700; z-index: 9;
    font-size: clamp(20px, 6vw, 34px); letter-spacing: 3px; text-align: center;
    pointer-events: none; opacity: 0;
  }
  @keyframes flashUp {
    0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); }
    18% { opacity: 1; transform: translate(-50%, -55%) scale(1.05); }
    80% { opacity: 1; transform: translate(-50%, -75%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(.95); }
  }