:root {
    --ink: #eef1f7;
    --dim: #9aa0b4;
    --panel: rgba(10, 8, 24, 0.78);
    --line: rgba(137, 150, 190, 0.28);
    --cyan: #59d7ff;
    --gold: #ffb03a;
    --danger: #ff5b5b;
    --hp: #5ee06a;
    --shield: #4aa8ff;
    --storm: #8a3ffc;
    --display: 'Avenir Next Condensed', 'Arial Narrow', Impact, system-ui, sans-serif;
    --body: -apple-system, 'Segoe UI', system-ui, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; overflow: hidden; background: #0e0b1e; }
  body { font-family: var(--body); color: var(--ink); }
  #stage { position: fixed; inset: 0; }
  canvas#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

  .hud { position: absolute; pointer-events: none; }
  .display { font-family: var(--display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; }

  #topbar {
    top: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; align-items: stretch;
  }
  .pill {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 14px; text-align: center; min-width: 86px;
  }
  .pill .k { font-size: 10px; letter-spacing: 0.14em; color: var(--dim); text-transform: uppercase; }
  .pill .v { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
  #stormPill .v { color: #c9a2ff; }
  #stormPill.warn .v { color: var(--danger); }

  #killfeed { top: 14px; left: 14px; display: flex; flex-direction: column; gap: 4px; max-width: 340px; }
  #killfeed div {
    background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--danger);
    border-radius: 6px; padding: 4px 10px; font-size: 12px; opacity: 0.95;
  }
  #killfeed div.me { border-left-color: var(--gold); }

  #mmWrap { top: 14px; right: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
  #mm { display: block; border-radius: 6px; }

  #vitals { left: 16px; bottom: 16px; width: 300px; display: flex; flex-direction: column; gap: 6px; }
  .bar { height: 20px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: 6px; position: relative; overflow: hidden; }
  .bar .fill { position: absolute; inset: 0; transform-origin: left; transition: transform 0.15s ease-out; }
  #hpFill { background: linear-gradient(180deg, #74eb7f, #3cbf49); }
  #shFill { background: linear-gradient(180deg, #6cbcff, #2f8fe6); }
  .bar .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); font-variant-numeric: tabular-nums; }

  #loadout { right: 16px; bottom: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  #slots { display: flex; gap: 8px; }
  .slot {
    background: var(--panel); border: 2px solid var(--line); border-radius: 8px;
    padding: 8px 12px; min-width: 110px; text-align: center;
  }
  .slot.active { border-color: var(--cyan); box-shadow: 0 0 12px rgba(89, 215, 255, 0.35); }
  .slot .key { font-size: 10px; color: var(--dim); letter-spacing: 0.12em; }
  .slot .wname { font-size: 14px; font-weight: 700; }
  .slot .sub { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
  #resRow { display: flex; gap: 8px; font-size: 12px; }
  #resRow .pill { min-width: 0; padding: 4px 12px; }
  #resRow .v { font-size: 16px; }

  #prompt, #toast {
    left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600;
    z-index: 5; /* above the menu/end overlays so the mute toast stays visible */
  }
  #prompt { bottom: 120px; } #prompt b { color: var(--cyan); }
  #toast { bottom: 160px; color: var(--gold); }

  #centerText {
    top: 38%; left: 50%; transform: translate(-50%, -50%);
    font-size: 110px; color: var(--ink); text-shadow: 0 4px 30px rgba(138, 63, 252, 0.8);
  }
  #stormNotice { top: 22%; left: 50%; transform: translateX(-50%); font-size: 26px; color: #c9a2ff; text-shadow: 0 2px 12px rgba(0,0,0,0.7); }

  .overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at 50% 35%, rgba(46, 26, 88, 0.88), rgba(8, 6, 20, 0.94));
    pointer-events: auto;
  }
  .card { text-align: center; max-width: 660px; padding: 30px; }
  .card h1 { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 76px; line-height: 0.95; letter-spacing: 0.02em;
    background: linear-gradient(180deg, #9ee7ff 20%, #59d7ff 45%, #b06bff 90%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 6px 24px rgba(89, 215, 255, 0.25)); text-wrap: balance; }
  .card h1 .gold { background: linear-gradient(180deg, #ffe9b0, #ffb03a); -webkit-background-clip: text; background-clip: text; }
  .card .tag { margin-top: 10px; color: var(--dim); font-size: 15px; }
  .controls { margin: 26px auto 6px; display: grid; grid-template-columns: auto auto; gap: 6px 18px; width: fit-content; text-align: left; font-size: 14px; }
  .controls .key { font-family: var(--display); font-style: normal; font-weight: 700; color: var(--cyan); text-align: right; letter-spacing: 0.06em; }
  .bigbtn {
    margin-top: 26px; font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
    font-size: 26px; letter-spacing: 0.06em; color: #081018; background: linear-gradient(180deg, #8fe8ff, #45c8f5);
    border: none; border-radius: 10px; padding: 14px 54px; cursor: pointer;
    box-shadow: 0 6px 0 #1f7fa8, 0 12px 30px rgba(69, 200, 245, 0.35);
  }
  .bigbtn:hover { filter: brightness(1.08); }
  .bigbtn:active { transform: translateY(3px); box-shadow: 0 3px 0 #1f7fa8; }
  .bigbtn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  #endStats { margin-top: 14px; font-size: 17px; color: var(--ink); }
  #endStats b { color: var(--gold); font-variant-numeric: tabular-nums; }
  .foot { margin-top: 24px; font-size: 11px; color: var(--dim); }
  .hidden { display: none !important; }
  @media (prefers-reduced-motion: reduce) { .bar .fill { transition: none; } }

:root{--cyan:#76edcb;--gold:#edd095;--panel:rgba(5,30,31,.88);--line:rgba(137,218,188,.26);--display:'Avenir Next',system-ui,sans-serif}.overlay{background:linear-gradient(110deg,rgba(3,22,28,.94),rgba(3,22,28,.72)),url('meadow.webp') center/600px}.card{max-width:800px;max-height:100dvh;overflow:auto}.card h1{font-size:clamp(36px,5vw,68px);font-style:normal;letter-spacing:-.04em;line-height:1.04;background:linear-gradient(120deg,#e6ffef,#71dcb7);-webkit-background-clip:text;background-clip:text;color:transparent}.card h1 .gold{color:#edd095;background:none}.eyebrow{font-size:11px;letter-spacing:.24em;color:#99c9b7;margin-bottom:24px}.card .tag{font-size:18px;color:#bfd7cd;margin-top:18px}.bigbtn{background:#a2edc4;color:#092e2c;font-style:normal;border-radius:40px;box-shadow:0 5px 0 #397961,0 15px 50px #0a3c35}.controls{padding:20px 30px;border:1px solid var(--line);background:#09272a99;border-radius:18px;font-size:13px;gap:8px 20px}.foot{max-width:540px;line-height:1.7;margin-left:auto;margin-right:auto}.display{font-style:normal}#quickControls{position:absolute;left:16px;top:145px;display:flex;gap:6px}#quickControls button,#touchActions button{border:1px solid var(--line);background:var(--panel);color:#d7f8e7;border-radius:12px;padding:10px 15px;font-size:18px;cursor:pointer}button:focus-visible{outline:3px solid #edd095;outline-offset:3px}#touchControls,.mobileHint{display:none}canvas{touch-action:none}
@media(pointer:coarse),(max-width:700px){#touchControls{display:block}#stick{position:absolute;bottom:112px;left:20px;width:110px;height:110px;border-radius:50%;border:2px solid #9cdbbd88;background:#09272a88;touch-action:none;display:grid;place-items:center;color:#b6dbc8;font-size:10px;letter-spacing:.2em}#stick i{position:absolute;width:42px;height:42px;border-radius:50%;background:#a2edc488;pointer-events:none}#touchActions{position:absolute;right:14px;bottom:116px;width:130px;display:grid;grid-template-columns:1fr 1fr;gap:8px}#touchActions button{font-size:12px;padding:14px 8px;touch-action:none}#vitals{width:145px;bottom:16px;left:10px}#loadout{right:10px;bottom:16px;gap:4px}.slot{min-width:66px;padding:5px}.slot .wname{font-size:10px}.slot .sub{font-size:9px}#slots{gap:4px}#resRow{gap:3px}#resRow .pill{padding:3px 8px}#resRow .v{font-size:12px}#topbar{left:10px;transform:none;gap:4px}.pill{min-width:64px;padding:6px}.pill .v{font-size:18px}.pill .k{font-size:8px}#mmWrap{right:8px;top:9px;transform:scale(.6);transform-origin:top right}#killfeed{top:90px;max-width:200px}#quickControls{top:60px;left:10px}#quickControls button{font-size:14px;padding:7px 10px}#centerText{font-size:55px}#stormNotice{font-size:19px;top:30%}.card{padding:18px;width:100%}.eyebrow{margin-bottom:12px;font-size:8px}.card .tag{font-size:14px;margin-top:10px}.controls{display:none}.mobileHint{display:block;font-size:12px;line-height:1.7;margin:20px auto 0;max-width:300px;color:#c4ded3}.bigbtn{margin-top:20px;font-size:21px;padding:12px 40px}.foot{font-size:10px;margin-top:20px}#prompt{bottom:235px;font-size:11px}#toast{bottom:270px;font-size:11px}}