/* ARCLIGHT — HUD + menu chrome.
   Palette: void indigo base, arc-cyan primary, plasma-magenta accent.
   Everything is CSS/SVG so there are no image assets to ship. */

:root {
  --cyan: #38e8ff;
  --cyan-dim: #1d7f92;
  --mag: #ff3ea5;
  --amber: #ffc247;
  --team-red: #ff4852;
  --team-blue: #4d9bff;
  --void: #05060f;
  --ink: #0b0f1e;
  --hud-font: 'DIN Alternate', 'Bahnschrift', 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--void);
  color: #dff6ff;
  font-family: var(--hud-font);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

#app { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hidden { display: none !important; }

/* ══════════════════════════ HUD ══════════════════════════ */

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

/* Red wash when the player is gibbed. */
#hit-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 25%, rgba(255, 24, 72, .55) 100%);
  transition: opacity .18s ease-out;
}

/* Weapon-charge rim light — brightens as the lance recharges. */
#chamber-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 140% 90% at 50% 115%, rgba(56, 232, 255, .22), transparent 60%);
}

/* ── crosshair ── */
#crosshair {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  transition: transform .09s cubic-bezier(.2, .9, .3, 1.4);
}
#crosshair .ch {
  position: absolute; background: var(--cyan);
  box-shadow: 0 0 6px rgba(56, 232, 255, .9);
}
.ch-t, .ch-b { left: 50%; width: 2px; height: 9px; margin-left: -1px; }
.ch-l, .ch-r { top: 50%; height: 2px; width: 9px; margin-top: -1px; }
.ch-t { top: 0; } .ch-b { bottom: 0; } .ch-l { left: 0; } .ch-r { right: 0; }
.ch-core {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px var(--cyan);
}
#ch-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#ch-ring circle {
  fill: none; stroke: var(--cyan); stroke-width: 4; opacity: .55;
  stroke-dasharray: 276.5; stroke-dashoffset: 276.5;
}
#crosshair.charging .ch { background: #4a6a78; box-shadow: none; }
#crosshair.charging .ch-core { background: #6d8e9b; box-shadow: none; }

/* ── hitmarker ── */
#hitmarker {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; opacity: 0;
}
#hitmarker.show { animation: hm .3s ease-out; }
@keyframes hm {
  0% { opacity: 1; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.35); }
}
#hitmarker i {
  position: absolute; width: 11px; height: 2px; background: #fff;
  box-shadow: 0 0 6px var(--mag);
}
#hitmarker i:nth-child(1) { top: 4px;  left: 2px;  transform: rotate(45deg); }
#hitmarker i:nth-child(2) { top: 4px;  right: 2px; transform: rotate(-45deg); }
#hitmarker i:nth-child(3) { bottom: 4px; left: 2px;  transform: rotate(-45deg); }
#hitmarker i:nth-child(4) { bottom: 4px; right: 2px; transform: rotate(45deg); }

/* ── top bar ── */
#topbar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 2px;
}
.score-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 108px; padding: 7px 18px 9px;
  background: linear-gradient(180deg, rgba(8, 16, 32, .88), rgba(8, 16, 32, .5));
  border-bottom: 2px solid var(--cyan);
}
.score-plate.you { clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%); border-color: var(--cyan); }
.score-plate.them { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); border-color: var(--mag); }
.score-plate .lbl { font-size: 10px; letter-spacing: .22em; opacity: .6; }
.score-plate span:last-child { font-size: 30px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-plate.you span:last-child { color: var(--cyan); text-shadow: 0 0 14px rgba(56, 232, 255, .6); }
.score-plate.them span:last-child { color: var(--mag); text-shadow: 0 0 14px rgba(255, 62, 165, .6); }

/* CTF: the same two plates become team boards, so the cyan/magenta accents
   swap to team red / team blue. */
#topbar.ctf .score-plate.you { border-color: var(--team-red); }
#topbar.ctf .score-plate.you span:last-child { color: var(--team-red); text-shadow: 0 0 14px rgba(255, 72, 82, .6); }
#topbar.ctf .score-plate.them { border-color: var(--team-blue); }
#topbar.ctf .score-plate.them span:last-child { color: var(--team-blue); text-shadow: 0 0 14px rgba(77, 155, 255, .6); }

#clock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 26px 8px; background: rgba(5, 8, 18, .82);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
#clock-time { font-size: 22px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#clock-mode { font-size: 9px; letter-spacing: .2em; opacity: .5; margin-top: 2px; }
#clock.urgent #clock-time { color: var(--amber); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ── CTF flag status ──
   One glyph per team under the clock: solid = safe at base, blinking =
   being carried, dim = dropped somewhere in the field. */
#flag-status {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px;
  font-size: 15px;
}
#flag-status span { transition: opacity .2s; }
#flag-red { color: var(--team-red); text-shadow: 0 0 10px rgba(255, 72, 82, .7); }
#flag-blue { color: var(--team-blue); text-shadow: 0 0 10px rgba(77, 155, 255, .7); }
#flag-status span.carried { animation: flag-blink .6s step-end infinite; }
#flag-status span.dropped { opacity: .3; text-shadow: none; }
@keyframes flag-blink { 50% { opacity: .15; } }

/* ── announcer ── */
#announce {
  position: absolute; left: 0; right: 0; top: 21%;
  text-align: center; font-size: 46px; font-weight: 700;
  letter-spacing: .16em; opacity: 0;
}
#announce.show { animation: ann 1.9s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes ann {
  0%   { opacity: 0; transform: scale(1.5) translateY(10px); filter: blur(8px); }
  14%  { opacity: 1; transform: scale(1); filter: blur(0); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}
#announce-text {
  background: linear-gradient(180deg, #fff, var(--cyan) 55%, var(--cyan-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(56, 232, 255, .5));
}
#announce.hot #announce-text {
  background: linear-gradient(180deg, #fff, var(--mag) 55%, #8c1e5b);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 26px rgba(255, 62, 165, .65));
}

/* ── killfeed ── */
#killfeed {
  position: absolute; top: 82px; right: 26px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.kf {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 11px; font-size: 13px; letter-spacing: .06em;
  background: rgba(6, 10, 22, .8);
  border-right: 2px solid rgba(56, 232, 255, .55);
  animation: kfin .22s ease-out;
}
@keyframes kfin { from { opacity: 0; transform: translateX(26px); } }
.kf.fade { opacity: 0; transition: opacity .4s; }
.kf .who { opacity: .85; }
.kf .who.self { color: var(--cyan); font-weight: 700; }
.kf .who.victim-self { color: var(--mag); font-weight: 700; }
.kf .bolt { color: var(--amber); font-size: 15px; filter: drop-shadow(0 0 6px rgba(255, 194, 71, .8)); }

/* ── bottom corners ── */
#bottom-left { position: absolute; left: 26px; bottom: 24px; }
#player-tag { font-size: 14px; letter-spacing: .18em; opacity: .75; }
#player-tag span { color: var(--cyan); opacity: .8; margin-left: 8px; font-size: 11px; }
#spree-tag {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px;
  background: linear-gradient(90deg, rgba(255, 62, 165, .3), transparent);
  border-left: 2px solid var(--mag);
  font-size: 12px; letter-spacing: .18em;
}
#spree-tag b { color: var(--mag); font-size: 16px; margin-right: 6px; }

/* ── CTF flag banner ──
   Same shape as the spree tag but amber — carrying the flag must read at a
   glance, and a slow pulse keeps it in peripheral vision without shouting. */
#flag-tag {
  display: inline-block; margin-bottom: 8px; padding: 4px 12px;
  background: linear-gradient(90deg, rgba(255, 194, 71, .3), transparent);
  border-left: 2px solid var(--amber);
  color: var(--amber);
  font-size: 12px; letter-spacing: .18em;
  animation: flag-pulse 1.6s ease-in-out infinite;
}
@keyframes flag-pulse { 50% { opacity: .55; } }

#bottom-right { position: absolute; right: 26px; bottom: 24px; text-align: right; }
#weapon-name { font-size: 21px; letter-spacing: .2em; text-shadow: 0 0 16px rgba(56, 232, 255, .35); }
#charge-wrap {
  position: relative; width: 208px; height: 6px; margin: 8px 0 6px auto;
  background: rgba(255, 255, 255, .08); overflow: hidden;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
#charge-fill {
  position: absolute; inset: 0; transform-origin: left;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  box-shadow: 0 0 12px rgba(56, 232, 255, .7);
}
#charge-tick { position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(255, 255, 255, .25); }
#charge-label { font-size: 10px; letter-spacing: .24em; opacity: .5; }
#charge-label span { color: var(--cyan); opacity: .9; }

/* ── respawn ── */
#respawn {
  position: absolute; left: 0; right: 0; top: 44%;
  text-align: center; letter-spacing: .14em;
}
#respawn-killer { font-size: 17px; opacity: .8; }
#respawn-killer b { color: var(--mag); }
#respawn-count { margin-top: 12px; font-size: 13px; opacity: .55; }
#respawn-count b { color: var(--cyan); font-size: 26px; display: block; margin-top: 4px; }

/* ── scoreboard ── */
#scoreboard {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 560px; padding: 24px 30px 18px;
  background: rgba(5, 9, 20, .93);
  border: 1px solid rgba(56, 232, 255, .25);
  box-shadow: 0 0 60px rgba(0, 0, 0, .8), inset 0 0 60px rgba(56, 232, 255, .04);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
#sb-title { font-size: 19px; letter-spacing: .3em; margin-bottom: 16px; }
#sb-title span { color: var(--cyan); opacity: .7; }
#sb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#sb-table th {
  text-align: left; font-size: 10px; letter-spacing: .2em; opacity: .45;
  padding: 0 10px 7px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 400;
}
#sb-table td { padding: 7px 10px; font-variant-numeric: tabular-nums; }
#sb-table tr.me { background: linear-gradient(90deg, rgba(56, 232, 255, .14), transparent); }
#sb-table tr.me td:nth-child(2) { color: var(--cyan); font-weight: 700; }
#sb-table td:nth-child(3) { color: var(--amber); font-weight: 700; }
#sb-hint { margin-top: 14px; font-size: 10px; letter-spacing: .22em; opacity: .3; text-align: right; }

/* ══════════════════════════ MENU ══════════════════════════ */

#menu {
  position: fixed; inset: 0; z-index: 40; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#menu.hidden { display: none !important; }

#menu-sky {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 60% 45% at 22% 18%, rgba(255, 62, 165, .30), transparent 65%),
    radial-gradient(ellipse 70% 55% at 82% 30%, rgba(56, 232, 255, .26), transparent 68%),
    radial-gradient(ellipse 90% 60% at 50% 105%, rgba(96, 44, 200, .35), transparent 70%),
    linear-gradient(170deg, #070a1a 0%, #0a0620 55%, #04060e 100%);
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }

/* Perspective floor grid receding to the horizon. */
#menu-grid {
  position: absolute; left: -50%; right: -50%; bottom: -14%; height: 62%;
  background-image:
    linear-gradient(rgba(56, 232, 255, .32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 232, 255, .32) 1px, transparent 1px);
  background-size: 74px 74px;
  transform: perspective(340px) rotateX(72deg);
  mask-image: linear-gradient(to top, #000 5%, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 72%);
  animation: grid-run 3.4s linear infinite;
}
@keyframes grid-run { to { background-position: 0 74px, 0 0; } }

/* Idle arc bolts crackling across the backdrop. */
#menu-arcs { position: absolute; inset: 0; }
#menu-arcs i {
  position: absolute; width: 2px; height: 34vh; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--cyan), transparent);
  filter: blur(.4px) drop-shadow(0 0 8px var(--cyan));
  animation: arc 6.5s linear infinite;
}
#menu-arcs i:nth-child(1) { left: 12%; top: 8%;  animation-delay: 0s;   }
#menu-arcs i:nth-child(2) { left: 33%; top: 46%; animation-delay: 1.7s; }
#menu-arcs i:nth-child(3) { left: 68%; top: 12%; animation-delay: 3.1s; }
#menu-arcs i:nth-child(4) { left: 86%; top: 52%; animation-delay: 4.4s; background: linear-gradient(180deg, transparent, var(--mag), transparent); }
#menu-arcs i:nth-child(5) { left: 52%; top: 62%; animation-delay: 5.6s; }
@keyframes arc {
  0%, 92% { opacity: 0; transform: scaleY(.2); }
  93% { opacity: .9; transform: scaleY(1) skewX(-9deg); }
  95% { opacity: .15; }
  96% { opacity: .8; transform: scaleY(1) skewX(7deg); }
  99% { opacity: 0; }
}

#menu-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
}
#menu-vig {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 240px 60px rgba(0, 0, 0, .92);
}
.corner { position: absolute; width: 42px; height: 42px; border: 1px solid rgba(56, 232, 255, .5); }
.corner.tl { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 24px; right: 24px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 24px; left: 24px; border-right: 0; border-top: 0; }
.corner.br { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }

#menu-inner { position: relative; text-align: center; z-index: 2; }
#menu-kicker { font-size: 11px; letter-spacing: .42em; opacity: .5; margin-bottom: 14px; }
#menu-title {
  font-size: clamp(56px, 12vw, 148px); line-height: .92; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(180deg, #ffffff 0%, #9fe9ff 38%, #1d7f92 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(56, 232, 255, .35));
}
#menu-title span {
  background: linear-gradient(180deg, #ffffff 0%, #ffa5d4 38%, #a0225f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#menu-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 10px; }
#menu-rule::before, #menu-rule::after {
  content: ''; width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 232, 255, .8));
}
#menu-rule::after { transform: scaleX(-1); }
#menu-rule i { width: 7px; height: 7px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 12px var(--cyan); }
#menu-sub { font-size: 13px; letter-spacing: .36em; opacity: .65; }

#menu-buttons { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 26px; }
#play-btn {
  position: relative; padding: 16px 62px; cursor: pointer;
  font-family: inherit; font-size: 19px; letter-spacing: .3em; font-weight: 700; color: #041018;
  background: linear-gradient(180deg, #8df3ff, var(--cyan) 55%, #12aecb);
  border: 0; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 34px rgba(56, 232, 255, .45);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
#play-btn:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 56px rgba(56, 232, 255, .75); filter: brightness(1.1); }
#play-btn:active { transform: translateY(1px) scale(.99); }

#menu-opts { display: flex; gap: 30px; flex-wrap: wrap; justify-content: center; }
.opt {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .24em; opacity: .8; cursor: pointer;
}
.opt input[type=range] {
  -webkit-appearance: none; appearance: none; width: 96px; height: 3px;
  background: rgba(255, 255, 255, .16); outline: none; cursor: pointer;
}
.opt input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 11px; height: 15px;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); cursor: pointer;
}
.opt input[type=range]::-moz-range-thumb {
  width: 11px; height: 15px; border: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); cursor: pointer;
}
.opt b { color: var(--cyan); min-width: 62px; text-align: left; font-size: 11px; }

#menu-foot { position: absolute; left: 0; right: 0; bottom: 44px; text-align: center; }
#menu-keys {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
  font-size: 10px; letter-spacing: .16em; opacity: .5; margin-bottom: 14px;
  padding: 0 40px;
}
#menu-keys b {
  color: var(--cyan); margin-right: 7px; padding: 2px 6px;
  border: 1px solid rgba(56, 232, 255, .3); font-weight: 400;
}
#menu-build { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; opacity: .28; }

/* result banner reuses the menu shell */
#menu.result #menu-kicker { color: var(--amber); opacity: .9; }

/* ── loading ── */
#loading {
  position: fixed; inset: 0; z-index: 60; background: var(--void);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading-bar { width: 240px; height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
#loading-bar i {
  display: block; width: 40%; height: 100%; background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan); animation: load 1.1s ease-in-out infinite;
}
@keyframes load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
#loading-text { font-size: 10px; letter-spacing: .34em; opacity: .45; }

/* Which character rig is live — the box rig is a silent fallback, so this
   line is the only way to tell at a glance whether the model loaded. */
#menu-character {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  opacity: .34;
  color: var(--cyan);
}

/* ── mode + arena pickers ──
   Mode cards share the arena-card chrome so the two rows read as one control
   stack; mode names are short, so they sit a touch narrower. */
#mode-picker, #arena-picker {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 4px;
}
.arena-card, .mode-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 18px; cursor: pointer;
  font-family: inherit; text-align: left;
  background: rgba(8, 14, 28, .55);
  border: 1px solid rgba(56, 232, 255, .18);
  border-left: 2px solid rgba(56, 232, 255, .35);
  color: #dff6ff;
  transition: background .15s, border-color .15s, transform .12s;
}
.mode-card { padding: 11px 14px; }
.arena-card:hover, .mode-card:hover { background: rgba(14, 26, 48, .8); transform: translateY(-1px); }
.arena-card b, .mode-card b { font-size: 13px; letter-spacing: .22em; font-weight: 700; }
.arena-card i, .mode-card i { font-size: 9px; letter-spacing: .14em; opacity: .5; font-style: normal; }
.arena-card.on, .mode-card.on {
  background: linear-gradient(180deg, rgba(56, 232, 255, .18), rgba(56, 232, 255, .05));
  border-color: rgba(56, 232, 255, .55);
  border-left-color: var(--cyan);
}
.arena-card.on b, .mode-card.on b { color: var(--cyan); }
.arena-card.on i, .mode-card.on i { opacity: .75; }

/* Link through to the standalone character preview / diagnostics page. */
#menu-preview {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  color: var(--cyan); opacity: .55; text-decoration: none;
  border-bottom: 1px solid rgba(56, 232, 255, .3);
}
#menu-preview:hover { opacity: 1; }

/* ── kill confirmation ──
   Centre-screen "VAPORISED <name>" under the crosshair on every frag; the
   killfeed alone was too peripheral to register mid-fight. */
#kill-confirm {
  position: absolute; left: 0; right: 0; top: 58%;
  text-align: center;
  font-size: 17px; font-weight: 700; letter-spacing: .22em;
  opacity: 0; pointer-events: none;
}
#kill-confirm i {
  font-style: normal; color: var(--amber); margin-right: 10px;
  filter: drop-shadow(0 0 8px rgba(255, 194, 71, .8));
}
#kill-confirm span {
  color: #fff;
  text-shadow: 0 0 14px rgba(56, 232, 255, .65);
}
#kill-confirm.show { animation: killc 1.4s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes killc {
  0%   { opacity: 0; transform: translateY(10px) scale(1.25); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ── online play ── */
#menu-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
#host-btn {
  padding: 16px 34px; cursor: pointer;
  font-family: inherit; font-size: 15px; letter-spacing: .24em; font-weight: 700;
  color: var(--cyan);
  background: rgba(10, 20, 38, .8);
  border: 1px solid rgba(56, 232, 255, .45);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background .15s, box-shadow .18s;
}
#host-btn:hover { background: rgba(18, 36, 64, .95); box-shadow: 0 0 30px rgba(56, 232, 255, .3); }
#host-btn:disabled { opacity: .4; cursor: default; }

#invite {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  font-size: 11px; letter-spacing: .2em;
  padding: 9px 14px;
  background: rgba(8, 16, 30, .8);
  border: 1px solid rgba(56, 232, 255, .3);
}
#invite b { color: var(--cyan); letter-spacing: .3em; }
#invite-link {
  width: 300px; padding: 5px 8px;
  font-family: var(--mono); font-size: 10px;
  color: #bfe9f5; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(56, 232, 255, .18);
}
#invite-copy {
  padding: 6px 12px; cursor: pointer;
  font-family: inherit; font-size: 10px; letter-spacing: .18em;
  color: #041018; font-weight: 700;
  background: var(--cyan); border: 0;
}
#invite-copy:hover { filter: brightness(1.15); }

#net-status {
  font-size: 11px; letter-spacing: .2em; color: var(--amber);
  padding: 6px 0;
}

.opt input[type=text] {
  width: 120px; padding: 6px 9px;
  font-family: inherit; font-size: 12px; letter-spacing: .18em;
  color: var(--cyan); text-transform: uppercase;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(56, 232, 255, .28);
  outline: none;
}
.opt input[type=text]:focus { border-color: rgba(56, 232, 255, .7); }

/* Re-roll button beside the callsign field. */
#opt-name-roll {
  padding: 5px 9px; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1;
  color: var(--cyan);
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(56, 232, 255, .28);
  transition: background .14s, transform .2s;
}
#opt-name-roll:hover { background: rgba(56, 232, 255, .18); transform: rotate(90deg); }