:root {
  --bg: #070b16;
  --cyan: #38e8ff;     /* player */
  --pink: #ff637d;     /* opponent coral */
  --yellow: #ffd166;   /* timing-ready gold */
  --green: #7dffba;    /* successful rebound mint */
  --violet: #ad8cff;   /* supporting violet */
  --gold: var(--yellow);
  --mint: var(--green);
  --coral: var(--pink);
  --text: #e8f4ff;
  --head: 'Press Start 2P', monospace, sans-serif;
  --body: 'Rajdhani', sans-serif;
}
* { box-sizing: border-box; }
[hidden], .is-hidden { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 18px; font-weight: 600; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,99,125,.14), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(56,232,255,.14), transparent 50%),
    radial-gradient(ellipse at center, #14204a 0%, var(--bg) 72%);
  background-attachment: fixed; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(173,140,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(173,140,255,.07) 1px, transparent 1px);
  background-size: 48px 48px; animation: gridDrift 14s linear infinite; }
@keyframes gridDrift { to { background-position: 48px 48px, 48px 48px; } }

/* Page: the shell and the status line, centred; scrolls vertically only when a tiny viewport can't hold the controls */
#app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; height: 100vh; height: 100dvh;
  padding: 8px;
  overflow-x: hidden; overflow-y: auto;
}

/* Game shell: information band, (boss warning), arena, controls band + music, help.
   The arena keeps its stage ratio and is sized so every band fits beside it in the viewport.
   --reserve is the vertical room the bands need; the court shrinks proportionally, never the coordinates. */
.game-shell {
  --aspect: 1.6667;
  --vh: 100vh;
  --reserve: 168px;
  --reserve-boss: 0px;
  --reserve-help: 0px;
  --fit-h: calc(var(--vh) - var(--reserve) - var(--reserve-boss) - var(--reserve-help));
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-flow: row wrap; align-items: center; justify-content: center;
  /* bands never get narrower than a comfortable reading width, but never wider than the page */
  width: min(100%, max(820px, calc(var(--fit-h) * var(--aspect))));
  margin-top: auto;
  container: shell / inline-size;
}
@supports (height: 100dvh) { .game-shell { --vh: 100dvh; } }
.game-shell:has(#boss-power-status:not([hidden]):not(.is-hidden)) { --reserve-boss: 28px; }
.game-shell:has(.hud-help[open]) { --reserve-help: 92px; }
/* forced line break after the arena so the controls band always sits below it */
.game-shell::after { content: ''; order: 3; flex: 0 0 100%; height: 0; }

/* Arena frame: shape follows the arena's aspect ratio, shrinks to fit the window */
.arena-frame {
  --aspect: 1.6667;
  order: 3;
  position: relative;
  flex: 0 0 auto;
  width: min(100%, max(220px, calc(var(--fit-h) * var(--aspect))));
  margin: 0 auto;
  aspect-ratio: var(--aspect);
  container-type: inline-size;
  border: 3px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(120deg, var(--cyan), var(--violet) 40%, var(--pink) 70%, var(--yellow)) border-box;
  background-size: 100% 100%, 200% 200%;
  box-shadow: 0 0 0 1px rgba(7,11,22,.9), 0 0 28px rgba(56,232,255,.4), 0 0 70px rgba(255,99,125,.22), 0 0 130px rgba(173,140,255,.2);
  overflow: hidden;
  animation: frameShift 9s ease-in-out infinite alternate;
}
@keyframes frameShift { to { background-position: 0 0, 100% 100%; } }
/* decorative overlay: scanlines, vignette, corner brackets. Never intercepts input. */
.frame-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  box-shadow: inset 0 0 40px rgba(56,232,255,.18), inset 0 0 90px rgba(173,140,255,.12); }
.frame-fx::before, .frame-fx::after { content: ''; position: absolute; width: 3cqw; height: 3cqw; border: 3px solid var(--yellow); filter: drop-shadow(0 0 6px var(--yellow)); }
.frame-fx::before { top: .6cqw; left: .6cqw; border-right: 0; border-bottom: 0; }
.frame-fx::after { bottom: .6cqw; right: .6cqw; border-left: 0; border-top: 0; }
.effects-low .frame-fx { background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.4) 100%); }
.effects-off .frame-fx { background: none; box-shadow: none; }
.effects-off .frame-fx::before, .effects-off .frame-fx::after { filter: none; }
.effects-low.arena-frame { animation: none; }
.effects-off.arena-frame { animation: none; box-shadow: 0 0 0 1px #000; }
.effects-off .btn, .effects-off .slot, .effects-off .ability-offer { box-shadow: none; text-shadow: none; }
.effects-off h1, .effects-off h2, .effects-off .final-score { text-shadow: none; animation: none; }
.effects-low h1 { animation: none; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Stage bubbles (2026-10-23): the portrait twist stands the court on end for 15 s. The frame's shape runs from the
   stage's aspect (--aspect, written by ui.js) to its inverse as --turn goes 0 to 1; --turn is registered so it
   can be animated, and render.js reads the frame's shape as it changes to spin the picture with it. Reduced
   motion (the rule at the end of this file) and effects Off turn it at once. A browser that cannot animate a
   custom property simply jumps. The height-fit rule above keeps the tall court inside the window. */
@property --turn { syntax: '<number>'; inherits: false; initial-value: 0; }
.arena-frame {
  --turn: 0;
  --shape: calc(var(--aspect) + (1 / var(--aspect) - var(--aspect)) * var(--turn));
  width: min(100%, max(220px, calc(var(--fit-h) * var(--shape))));
  aspect-ratio: var(--shape);
  transition: --turn .45s ease-in-out;
}
.arena-frame.is-portrait { --turn: 1; }
.effects-off.arena-frame { transition: none; }

h1, h2 { font-family: var(--head); margin: 0; text-transform: uppercase; color: #fff; }
h1 { font-size: 5.2cqw; line-height: 1.3; color: #eaffff; letter-spacing: .04em;
  text-shadow: 3px 3px 0 var(--pink), -2px -2px 0 var(--cyan), 0 0 22px var(--cyan), 0 0 50px var(--violet); }
h2 { font-size: 2.2cqw; color: var(--yellow); text-shadow: 0 0 10px var(--yellow); }
h1 { animation: titlePulse 2.4s ease-in-out infinite; }
@keyframes titlePulse { 50% { text-shadow: 5px 3px 0 var(--pink), -4px -2px 0 var(--cyan), 0 0 34px var(--cyan), 0 0 70px var(--violet); transform: scale(1.03); } }

/* Spotlight menu note + settings controls (Spotlight HUD styling lives in the HUD section) */
.spotlight-note { max-width: 60cqw; line-height: 1.4; padding: .5cqw 1cqw; border: 1px dashed var(--yellow); }
.spotlight-note strong { color: var(--yellow); }
.effects-settings { display: flex; flex-direction: column; gap: 1cqw; }
.effects-settings .panel-head { margin-bottom: 0; }
.effects-field { align-items: flex-start; }
.check-field { display: flex; align-items: center; gap: 1cqw; font-size: max(13px, 1.5cqw); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.check-field input { width: max(18px, 2cqw); height: max(18px, 2cqw); accent-color: var(--cyan); cursor: pointer; }
.check-field input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* HUD — quiet console outside the court. Muted accents are scoped to the HUD; the global palette is untouched.
   The HUD box itself dissolves (display: contents) so its rows take their places in the shell:
     info band  — Lives · Round · Score · Opponent · Enemy lives · Rebound · Momentum · Spotlight · Mode · Pause
     arena
     controls   — [A slot] (Rebound) [D slot]   Music   How to play
   [hidden] / .is-hidden still remove it entirely (the !important rule above wins). */
.hud {
  --hud-bg: rgba(6,9,18,.66);
  --hud-bg-soft: rgba(6,9,18,.5);
  --hud-line: rgba(160,180,210,.2);
  --hud-label: #8d99ad;
  --hud-text: #d3dbe7;
  --hud-cyan: color-mix(in srgb, var(--cyan) 58%, #7d8899);
  --hud-coral: color-mix(in srgb, var(--pink) 62%, #8a8088);
  --hud-gold: color-mix(in srgb, var(--yellow) 62%, #8f8a7a);
  --hud-mint: color-mix(in srgb, var(--green) 56%, #7c9088);
  --hud-violet: color-mix(in srgb, var(--violet) 62%, #868aa0);
  display: contents;
  text-shadow: 0 1px 2px #000;
}

/* Information band: one slim strip of inline readouts that wraps when narrow */
.hud-top {
  order: 1;
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 3px;
  min-width: 0;
  margin-bottom: 6px;
  padding: 3px;
  background: var(--hud-bg-soft);
  border: 1px solid var(--hud-line);
  border-radius: 3px;
}
.hud-stat {
  display: flex; align-items: baseline; gap: 6px;
  min-width: 0; max-width: 100%;
  padding: 3px 8px;
  border-left: 1px solid var(--hud-line);
}
.hud-stat:first-child { border-left: 0; }
.hud-label { flex: 0 0 auto; font-size: 10px; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; color: var(--hud-label); white-space: nowrap; }
.hud-value { min-width: 0; font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .03em; color: var(--hud-cyan); overflow-wrap: anywhere; }

/* Primary: Lives, Round, Score — the clearest group */
.hud-primary { background: rgba(6,9,18,.6); border-radius: 2px; border-bottom: 2px solid rgba(170,190,220,.22); }
.hud-primary .hud-label { color: #a3aec0; }
.hud-primary .hud-value { font-family: var(--head); font-size: 12px; font-weight: 400; letter-spacing: .04em; }
#lives-value { color: var(--hud-coral); letter-spacing: .1em; }
#round-value { color: var(--hud-text); }
#score-value { color: var(--hud-gold); }

/* Secondary: opponent and bonus information, quieter */
#enemy-name-value { color: var(--hud-cyan); }
#enemy-lives-value { color: var(--hud-coral); }
#enemy-rebound-value { color: var(--hud-gold); }
.hud-enemy.is-imminent { background: rgba(255,99,125,.06); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pink) 45%, transparent); }
.hud-enemy.is-imminent #enemy-rebound-value { text-decoration: underline; text-underline-offset: 2px; }
#rally-momentum-value { color: var(--hud-mint); }
#rally-momentum-stat.has-momentum { border-left: 3px solid var(--hud-mint); background: rgba(125,255,186,.05); }
#rally-momentum-stat.has-momentum #rally-momentum-value { color: color-mix(in srgb, var(--green) 75%, #c9d6cf); }
.spotlight-stat { border-left: 3px solid var(--hud-gold); background: rgba(255,209,102,.035); }
.spotlight-stat .hud-label { color: var(--hud-gold); }
#spotlight-value { color: var(--hud-gold); }
#mode-value { filter: saturate(.6) brightness(.88); }
.hud.is-boss .hud-enemy-name { border-left: 3px solid var(--hud-gold); background: rgba(255,209,102,.04); }
.hud.is-boss #enemy-name-value { color: var(--hud-gold); }

/* Pause: closes the band on the right, no glow */
.hud-actions { margin-left: auto; align-self: center; }
.hud .hud-pause {
  min-height: 28px; padding: 4px 12px;
  font-size: 9px;
  color: var(--hud-cyan);
  background: var(--hud-bg);
  border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent);
  text-shadow: none; box-shadow: none;
}
.hud .hud-pause:hover:not(:disabled) { background: rgba(56,232,255,.1); border-color: var(--hud-cyan); transform: none; }

/* Boss power warning: its own bounded row between the band and the court */
.boss-power-status {
  order: 2;
  flex: 1 1 100%;
  display: block; max-width: 100%;
  margin: 0 auto 6px; padding: 3px 10px;
  font-family: var(--head); font-size: 9px; line-height: 1.6; letter-spacing: .06em; text-align: center;
  color: var(--hud-gold);
  background: var(--hud-bg);
  border: 1px solid currentColor;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.boss-power-status.is-hidden { display: none; }
.boss-power-status.is-telegraphing { color: var(--hud-coral); border: 3px double currentColor; background: rgba(255,99,125,.12); text-decoration: underline; text-underline-offset: 3px; }
.reward-context { text-align: center; }
#skip-ability-button:disabled { opacity: .4; }

/* Help: native disclosure below the controls, collapsed by default; opening it takes its own row */
.hud-help {
  order: 5;
  flex: 0 0 auto;
  margin: 6px 0 0 8px;
  min-width: 0;
  color: var(--hud-label);
}
.hud-help summary {
  display: flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 10px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--hud-label);
  background: var(--hud-bg-soft);
  border: 1px solid var(--hud-line);
  border-radius: 3px;
  cursor: pointer;
  list-style: none;
}
.hud-help summary::-webkit-details-marker { display: none; }
.hud-help summary::before { content: '?'; display: inline-grid; place-items: center; width: 16px; height: 16px; font-family: var(--head); font-size: 8px; color: var(--hud-violet); border: 1px solid currentColor; border-radius: 50%; }
.hud-help summary:hover { color: var(--hud-text); border-color: rgba(160,180,210,.4); }
.hud-help summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.hud-help[open] { flex-basis: 100%; margin-left: 0; }
.hud-help[open] summary { display: inline-flex; color: var(--hud-text); }
.hud-goal {
  margin: 4px 0 0;
  max-height: 5.2em;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(160,180,210,.35) transparent;
  padding: 4px 10px;
  font-size: 13px; line-height: 1.3; letter-spacing: .03em;
  color: var(--hud-label);
  background: var(--hud-bg-soft);
  border-left: 2px solid var(--hud-line);
}

/* Controls band: two ability slots with Rebound between them, below the court */
.hud-slots {
  order: 4;
  flex: 1 1 360px;
  display: flex; align-items: stretch; justify-content: center; gap: 12px;
  min-width: 0;
  margin-top: 6px;
  padding: 0 8px;
}
.slot {
  --tint: var(--cyan);
  position: relative;
  flex: 0 1 210px;
  min-width: 0;
  min-height: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "key cd" "name name";
  align-content: center; column-gap: 8px; row-gap: 2px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--tint) 55%, #3a4458);
  border-radius: 3px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 7%, #080d1a), rgba(7,11,22,.86) 70%);
  color: var(--text);
  font-family: var(--body); font-weight: 700; font-size: 15px; text-align: left;
  box-shadow: 0 0 4px color-mix(in srgb, var(--tint) 30%, transparent);
  cursor: pointer;
}
.slot:disabled { cursor: default; }
.slot-key { grid-area: key; min-width: 0; font-family: var(--head); font-size: 9px; line-height: 1.4; color: var(--hud-gold); overflow-wrap: anywhere; }
.slot-name { grid-area: name; min-width: 0; font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--tint) 62%, #a3adbd); }
.slot-cooldown { grid-area: cd; font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--hud-mint); }
.slot.is-empty { opacity: .4; border-style: dashed; box-shadow: none; }
.slot.is-cooling-down { border-color: #3d4659; box-shadow: none; }
.slot.is-cooling-down .slot-name { color: #959eb0; }
.slot.is-cooling-down .slot-cooldown { color: var(--hud-coral); }
.slot.is-active { border-left: 3px solid color-mix(in srgb, var(--tint) 70%, #a3adbd); }
.slot.is-active:hover { transform: translateY(-2px); background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 13%, #080d1a), rgba(7,11,22,.86) 70%); }
@keyframes slotReady { 50% { box-shadow: 0 0 18px var(--tint); } }

/* Rebound: universal timing button between the ability slots.
   Wait = dim violet; Ready = gold ring with corner brackets + "Ready"; Armed = mint fill + "Armed".
   Text and shape carry the state, colour only reinforces it. */
.rebound-control {
  position: relative;
  flex: 0 1 168px;
  min-width: 0;
  min-height: 40px;
  display: grid; grid-template-columns: auto auto; grid-template-areas: "key name" "status block";
  justify-content: center; align-content: center; align-items: baseline; column-gap: 8px; row-gap: 2px;
  padding: 4px 14px;
  border: 2px solid rgba(173,140,255,.45);
  border-radius: 999px;
  background: rgba(7,11,22,.84);
  color: var(--text);
  font-family: var(--body); font-weight: 700; text-align: center;
  box-shadow: 0 0 4px rgba(173,140,255,.15);
  cursor: pointer;
  transition: border-color .06s, box-shadow .06s, background .06s;
}
.rebound-control:disabled { cursor: default; opacity: .45; box-shadow: none; }
.rebound-key { grid-area: key; min-width: 0; justify-self: end; font-family: var(--head); font-size: 9px; color: var(--hud-gold); overflow-wrap: anywhere; }
.rebound-name { grid-area: name; justify-self: start; font-size: 13px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--hud-violet); }
.rebound-status { grid-area: status; justify-self: end; min-height: 1em; font-family: var(--head); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #9aa3b5; }
.rebound-block { grid-area: block; justify-self: start; min-height: 1em; font-size: 12px; line-height: 1; white-space: nowrap; color: #aea3cf; }
.rebound-control.is-blocking:not(.is-ready):not(.is-armed) { border-color: var(--hud-violet); border-style: solid; border-width: 3px; box-shadow: 0 0 6px rgba(173,140,255,.3); }
.rebound-control.is-blocking .rebound-block { color: #e4ddff; text-decoration: underline; text-underline-offset: 2px; }
.rebound-control.is-block-rest:not(.is-ready):not(.is-armed) { border-color: #5a5076; border-style: dashed; box-shadow: none; }
.rebound-control.is-block-rest .rebound-block { color: #a198bb; }
.rebound-control::before, .rebound-control::after {
  content: ''; position: absolute; top: -4px; bottom: -4px; width: 9px;
  border: 3px solid var(--hud-gold); opacity: 0; pointer-events: none;
}
.rebound-control::before { left: -7px; border-right: 0; }
.rebound-control::after { right: -7px; border-left: 0; }
.rebound-control.is-ready {
  border-color: var(--hud-gold);
  background: rgba(255,209,102,.07);
  box-shadow: 0 0 0 1px rgba(255,209,102,.35), 0 0 8px rgba(255,209,102,.3);
  animation: reboundReady .18s ease-out;
}
.rebound-control.is-ready::before, .rebound-control.is-ready::after { opacity: 1; }
.rebound-control.is-ready .rebound-status { color: color-mix(in srgb, var(--yellow) 82%, #c9c3b1); }
.rebound-control.is-ready .rebound-status::before { content: '▶ '; }
.rebound-control.is-ready .rebound-status::after { content: ' ◀'; }
.rebound-control.is-armed {
  border-color: var(--hud-mint);
  border-style: double; border-width: 4px;
  background: rgba(125,255,186,.09);
  box-shadow: 0 0 8px rgba(125,255,186,.3);
}
.rebound-control.is-armed .rebound-status { color: color-mix(in srgb, var(--green) 80%, #c3d2c9); }
.rebound-control.is-armed .rebound-status::before { content: '✓ '; }
@keyframes reboundReady { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Music: its own compact spot in the controls row (right of the slots), outside the court */
.mute-button {
  order: 4;
  flex: 0 0 auto;
  min-height: 32px;
  margin: 6px 0 0 8px;
  font-family: var(--head); font-size: 9px; text-transform: uppercase; white-space: nowrap;
  color: var(--cyan); background: rgba(7,11,22,.72); border: 2px solid var(--cyan);
  padding: 6px 10px; cursor: pointer;
}
.mute-button.is-muted { color: #8089a0; border-color: #4a5468; }
/* outside play (no HUD) the music button sits alone, centred under the court */
.game-shell:has(> .hud[hidden]) .mute-button, .game-shell:has(> .hud.is-hidden) .mute-button { margin-left: 0; }

/* Overlays (menu, pause, reward, game over) */
.overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 2cqw;
  background: rgba(7,11,22,.88);
  overflow: auto;
  text-align: center;
  animation: screenIn .25s ease-out;
}
#pause-panel { background: rgba(7,11,22,.6); }
.overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; width: min(100%, 80cqw); }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

/* Difficulty picker and the settings panel */
.difficulty-row { display: flex; gap: .8cqw; justify-content: center; flex-wrap: wrap; }
.btn.diff-btn { --dc: var(--cyan); color: var(--dc); border-color: var(--dc); min-width: 9cqw; }
.btn.diff-btn.active { background: color-mix(in srgb, var(--dc) 22%, transparent); box-shadow: 0 0 14px var(--dc); text-shadow: 0 0 6px var(--dc); }
.difficulty-desc { min-height: 1.4em; }
.ai-note { max-width: 60cqw; line-height: 1.4; }
.settings-overlay { z-index: 7; background: rgba(7,11,22,.95); }
.keybinds { max-width: 62cqw; }
.keybind-row { display: grid; grid-template-columns: 13cqw 1fr; align-items: center; gap: 1cqw; padding: .5cqw 0; border-bottom: 1px solid rgba(173,140,255,.25); }
.keybind-row:last-child { border-bottom: 0; }
.keybind-name { font-size: max(12px, 1.4cqw); letter-spacing: .06em; text-transform: uppercase; }
.keybind-keys { display: flex; flex-wrap: wrap; gap: .5cqw; align-items: center; }
.key-chip { font: inherit; font-size: max(12px, 1.3cqw); color: var(--text); background: rgba(56,232,255,.08); border: 1px solid rgba(56,232,255,.6);
  padding: .2cqw .8cqw; cursor: pointer; }
.key-chip:hover { border-color: var(--pink); color: var(--pink); text-decoration: line-through; }
.key-add { font: inherit; font-size: max(12px, 1.3cqw); color: var(--yellow); background: none; border: 1px dashed var(--yellow); padding: .2cqw .8cqw; cursor: pointer; }
.key-add.listening { color: var(--bg); background: var(--yellow); animation: slotReady 1s infinite; }
.key-none { opacity: .6; font-size: max(12px, 1.3cqw); }
.keybind-note { min-height: 1.3em; color: var(--yellow); opacity: 1; }
.key-chip:focus-visible, .key-add:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.tagline { margin: 0; color: var(--violet); font-size: 1.7cqw; letter-spacing: .1em; }
.hint { margin: 0; opacity: .72; font-size: max(11px, 1.25cqw); letter-spacing: .04em; }
.final-label { margin: 0; color: var(--violet); font-size: 1.8cqw; letter-spacing: .12em; text-transform: uppercase; }
.final-score { font-family: var(--head); font-size: 4.6cqw; color: var(--yellow); text-shadow: 0 0 18px var(--yellow); }

.field { display: flex; flex-direction: column; gap: .6cqw; font-size: 1.6cqw; letter-spacing: .08em; text-transform: uppercase; }
select {
  font-family: var(--head); font-size: max(10px, 1.05cqw); color: var(--cyan);
  background: #000; border: 2px solid var(--cyan); padding: .8cqw 1.2cqw; outline: none; cursor: pointer;
}
select:disabled { opacity: .4; cursor: not-allowed; border-color: #4a5468; color: #8089a0; }
select:focus-visible { box-shadow: 0 0 12px var(--cyan); }

.btn {
  font-family: var(--head); font-size: max(10px, 1.1cqw); text-transform: uppercase;
  color: var(--cyan); background: transparent; border: 2px solid var(--cyan);
  padding: 1cqw 1.8cqw; cursor: pointer;
  text-shadow: 0 0 6px var(--cyan);
  box-shadow: 0 0 10px rgba(56,232,255,.4), inset 0 0 10px rgba(56,232,255,.15);
  transition: transform .08s, background .15s;
}
.btn:hover:not(:disabled) { background: rgba(56,232,255,.18); transform: translateY(-2px); }
.btn.primary { color: var(--pink); border-color: var(--pink); text-shadow: 0 0 6px var(--pink); box-shadow: 0 0 12px rgba(255,99,125,.5), inset 0 0 10px rgba(255,99,125,.15); }
.btn.primary:hover:not(:disabled) { background: rgba(255,99,125,.2); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:focus-visible, select:focus-visible, .mute-button:focus-visible, .slot:focus-visible, .rebound-control:focus-visible, .ability-offer:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.btn-row { display: flex; gap: 1.5cqw; justify-content: center; flex-wrap: wrap; }

/* Leaderboard */
.panel { width: 100%; border: 1px solid rgba(173,140,255,.6); background: rgba(14,22,44,.78); padding: 1cqw 1.4cqw; text-align: left; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8cqw; }
.panel h2 { font-size: 1.3cqw; }
.best { color: var(--green); font-size: 1.5cqw; }
#leaderboard-list { list-style: none; margin: 0; padding: 0; max-height: 17cqw; overflow: auto; }
.leaderboard-entry { display: flex; justify-content: space-between; gap: 1.2cqw; padding: .25cqw 0; font-size: max(12px, 1.5cqw); border-bottom: 1px solid rgba(173,140,255,.2); }
.leaderboard-entry:first-child .lb-name { color: var(--yellow); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { white-space: nowrap; opacity: .85; }
.leaderboard-empty { opacity: .55; font-size: max(12px, 1.5cqw); list-style: none; }

/* Reward offers */
.offers { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; width: 100%; }
.ability-offer {
  --tint: var(--cyan);
  width: 21cqw; min-height: 17cqw; padding: 1.1cqw;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  border: 2px solid var(--tint);
  background: rgba(11,17,36,.95);
  color: var(--text); font-family: var(--body); font-weight: 600; text-align: center;
  box-shadow: 0 0 12px var(--tint);
  cursor: pointer;
  transition: transform .12s;
  animation: cardIn .35s cubic-bezier(.2,1.4,.4,1) backwards;
}
.ability-offer:nth-child(2) { animation-delay: .08s; }
.ability-offer:nth-child(3) { animation-delay: .16s; }
.ability-offer:nth-child(4) { animation-delay: .24s; }
.ability-offer:hover:not(:disabled) { transform: translateY(-.6cqw) scale(1.03); }
.ability-offer:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.offer-kind { font-size: max(10px, 1.05cqw); text-transform: uppercase; letter-spacing: .15em; color: var(--green); }
.kind-active .offer-kind { color: var(--pink); }
.offer-name { font-family: var(--head); font-size: max(11px, 1.1cqw); line-height: 1.5; color: #fff; }
.offer-desc { font-size: max(12px, 1.35cqw); line-height: 1.3; opacity: .9; }
.offer-action { margin-top: auto; font-family: var(--head); font-size: max(9px, .9cqw); line-height: 1.5; color: var(--yellow); }
@keyframes cardIn { from { opacity: 0; transform: translateY(3cqw) scale(.9); } }

/* Status line under the shell */
.status { flex: 0 0 auto; margin: 0 0 auto; min-height: 1.4em; font-size: 15px; line-height: 1.4; color: var(--yellow); text-shadow: 0 0 8px rgba(255,209,102,.5); letter-spacing: .04em; text-align: center; }

@media (max-width: 640px) {
  h1 { font-size: 9cqw; }
  h2 { font-size: 3.6cqw; }
  .tagline, .field { font-size: 2.6cqw; }
  .btn { font-size: max(10px, 2.2cqw); }
  .ability-offer { width: 44cqw; min-height: auto; }
  .offer-desc { font-size: max(11px, 2.6cqw); }
  .overlay-inner { width: 100%; }
}

/* Pop: buttons, offers, boss warnings, overlays */
.btn { background: linear-gradient(180deg, rgba(56,232,255,.12), rgba(56,232,255,0)); letter-spacing: .06em; }
.btn.primary { background: linear-gradient(180deg, rgba(255,99,125,.22), rgba(255,99,125,0)); animation: primaryGlow 2s ease-in-out infinite; }
@keyframes primaryGlow { 50% { box-shadow: 0 0 24px rgba(255,99,125,.85), inset 0 0 14px rgba(255,99,125,.3); } }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.overlay { background: radial-gradient(ellipse at center, rgba(20,32,74,.9), rgba(7,11,22,.95) 80%); backdrop-filter: blur(3px); }
#pause-panel { background: rgba(7,11,22,.6); }
.settings-overlay { background: rgba(7,11,22,.96); }
.panel { box-shadow: inset 0 0 18px rgba(173,140,255,.12), 0 0 12px rgba(173,140,255,.18); border-left: 4px solid var(--violet); }
.ability-offer { background: linear-gradient(170deg, color-mix(in srgb, var(--tint) 22%, #0b1124), #0b1124 65%);
  box-shadow: 0 0 16px var(--tint), inset 0 0 22px color-mix(in srgb, var(--tint) 25%, transparent); }
.ability-offer:hover:not(:disabled) { box-shadow: 0 0 30px var(--tint), inset 0 0 28px color-mix(in srgb, var(--tint) 40%, transparent); }
.offer-name { text-shadow: 0 0 10px var(--tint); }
.reward-context { color: var(--yellow); opacity: 1; font-size: max(12px, 1.5cqw); }
.mute-button { box-shadow: 0 0 10px rgba(56,232,255,.35); }
.final-score { font-size: 5.4cqw; animation: scoreSlam .6s cubic-bezier(.2,1.6,.4,1) backwards; }
@keyframes scoreSlam { from { transform: scale(2.4); opacity: 0; } }

.effects-low .btn.primary, .effects-low .ability-offer { animation: none; }
.effects-off *, .effects-off *::before, .effects-off *::after { animation: none !important; transition: none !important; }
.effects-off .overlay { backdrop-filter: none; }
.effects-off body::before { display: none; }
/* HUD under Low/Off: drop the remaining soft halos; borders, brackets and text still carry every state.
   ui.js puts the effects class on the shell; the :has() forms cover the arena-only case. */
.effects-low .slot, .effects-off .slot,
.effects-low .rebound-control, .effects-off .rebound-control,
.effects-low .mute-button, .effects-off .mute-button,
.game-shell:has(> .arena-frame.effects-low) :is(.slot, .rebound-control, .mute-button),
.game-shell:has(> .arena-frame.effects-off) :is(.slot, .rebound-control, .mute-button) { box-shadow: none; }
.effects-low .rebound-control.is-ready, .effects-off .rebound-control.is-ready,
.game-shell:has(> .arena-frame:is(.effects-low, .effects-off)) .rebound-control.is-ready { box-shadow: 0 0 0 1px rgba(255,209,102,.35); }
.effects-off .hud, .game-shell:has(> .arena-frame.effects-off) .hud { text-shadow: none; }
.game-shell:has(> .arena-frame.effects-off) .hud *, .game-shell:has(> .arena-frame.effects-off) .hud *::before,
.game-shell:has(> .arena-frame.effects-off) .hud *::after { animation: none !important; transition: none !important; }

/* Fit: --reserve is the band height the court must leave free in the viewport */
@media (max-width: 700px) { .game-shell { --reserve: 230px; } }
@media (max-height: 560px) { .game-shell { --reserve: 124px; } }
@media (max-height: 560px) and (max-width: 700px) { .game-shell { --reserve: 160px; } }

/* Bands adapt to the shell's own width (container), not the viewport */
@container shell (max-width: 900px) {
  .hud-stat { padding: 2px 6px; gap: 5px; }
  .hud-label { letter-spacing: .06em; }
  .hud-value { font-size: 14px; }
}
@container shell (max-width: 620px) {
  .hud-top { gap: 2px; }
  .hud-stat { padding: 2px 5px; gap: 4px; }
  .hud-label { font-size: 9px; letter-spacing: .04em; }
  .hud-value { font-size: 13px; }
  .hud-primary .hud-value { font-size: 11px; }
  .hud .hud-pause { min-height: 32px; padding: 4px 14px; }
  /* controls take the whole row; music and help share the row below */
  .hud-slots { flex-basis: 100%; gap: 10px; padding: 0; }
  .slot { flex: 1 1 0; }
  .rebound-control { flex: 1 1 0; max-width: 34%; padding: 4px 8px; column-gap: 5px; }
  .slot-name { font-size: 14px; }
  .rebound-name { font-size: 11px; letter-spacing: .06em; }
  .rebound-block { font-size: 11px; }
  .mute-button { margin-left: 0; }
  .boss-power-status { font-size: 8px; }
}
@container shell (max-width: 400px) {
  .hud-slots { gap: 8px; }
  .slot { padding: 4px 7px; column-gap: 4px; }
  .slot-name { font-size: 13px; }
  .rebound-control { grid-template-columns: auto; grid-template-areas: "key" "name" "status" "block"; row-gap: 1px; padding: 3px 6px; border-radius: 18px; }
  .rebound-control > * { justify-self: center; }
}

/* Short viewports (landscape phones, small windows): tighter bands so the court keeps its room */
@media (max-height: 560px) {
  #app { padding: 4px; gap: 2px; }
  .hud-top { margin-bottom: 4px; padding: 2px; }
  .hud-stat { padding: 1px 6px; }
  .hud-value { font-size: 13px; }
  .hud-primary .hud-value { font-size: 11px; }
  .hud .hud-pause { min-height: 26px; padding: 3px 10px; }
  .hud-slots, .mute-button, .hud-help { margin-top: 4px; }
  .slot, .rebound-control { min-height: 36px; padding-top: 3px; padding-bottom: 3px; }
  .slot-name { font-size: 14px; }
  .mute-button, .hud-help summary { min-height: 30px; }
  .hud-goal { max-height: 3.9em; }
  .game-shell:has(.hud-help[open]) { --reserve-help: 72px; }
  .status { min-height: 1.2em; font-size: 13px; line-height: 1.2; }
  .overlay { align-items: flex-start; }
  .overlay-inner { gap: 1cqw; }
}

/* ---------- Multiplayer rooms: setup / signaling / lobby / countdown / result ----------
   Overlays inside the arena like every other screen; they scroll when the court is small.
   The countdown is a non-interactive numeral that only shows before play, so the court is clear while playing. */
.room-overlay { z-index: 6; align-items: flex-start; }
.room-overlay > .overlay-inner { margin-block: auto; }
.room-inner { gap: 1.2cqw; width: min(100%, 86cqw); }
.room-note { max-width: 70cqw; line-height: 1.4; padding: .5cqw 1cqw; border: 1px dashed var(--violet); }
.room-status {
  margin: 0; min-height: 1.4em; max-width: 76cqw;
  font-size: max(12px, 1.45cqw); line-height: 1.4; letter-spacing: .03em;
  color: var(--green); text-shadow: 0 0 8px rgba(125,255,186,.35);
}
.room-status.room-has-error { color: var(--pink); text-shadow: 0 0 8px rgba(255,99,125,.4); padding: .4cqw 1cqw; border: 1px solid currentColor; background: rgba(255,99,125,.06); }
.room-section { display: flex; flex-direction: column; align-items: center; gap: 1cqw; width: 100%; }
.room-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw; width: 100%; }
.room-card { display: flex; flex-direction: column; gap: .9cqw; align-items: stretch; }
.room-card .btn { align-self: center; }
.room-field { width: 100%; text-align: left; font-size: max(11px, 1.3cqw); }
.room-name-field { max-width: 40cqw; }
.room-input {
  width: 100%;
  font-family: var(--body); font-weight: 600; font-size: max(14px, 1.5cqw); letter-spacing: .02em; text-transform: none;
  color: var(--text); background: #000; border: 2px solid var(--cyan);
  padding: .6cqw 1cqw; outline: none;
}
.room-input::placeholder { color: #6f7a92; }
.room-input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 12px var(--cyan); }
.room-input:disabled { opacity: .45; border-color: #4a5468; }
/* The room code: four characters, so it is typed and read out rather than pasted */
.room-code-input {
  max-width: 7em; text-align: center; font-family: ui-monospace, Consolas, monospace;
  font-size: max(16px, 2.2cqw); letter-spacing: .28em; text-indent: .28em; text-transform: uppercase;
}
.room-waiting { max-width: 76cqw; }
.room-code-label { margin: 0; font-size: max(10px, .95cqw); letter-spacing: .22em; text-transform: uppercase; color: #8d99b4; }
.room-code-out {
  margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: max(30px, 6.4cqw); line-height: 1.1;
  letter-spacing: .22em; text-indent: .22em; color: #fff3b0; text-shadow: 0 0 18px rgba(255, 209, 102, .45);
  user-select: all;
}
.room-code-hint { max-width: 48cqw; line-height: 1.4; text-align: center; }

/* Lobby: roster cards, readiness and loadout pickers */
.room-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw; width: 100%; }
.room-member {
  display: flex; flex-direction: column; gap: .6cqw; min-width: 0;
  padding: 1cqw 1.2cqw; text-align: left;
  background: rgba(14,22,44,.78);
  border: 1px solid rgba(173,140,255,.5); border-left: 4px solid var(--pink);
}
.room-member.room-is-you { border-left-color: var(--cyan); }
.room-member.room-is-open { border-style: dashed; opacity: .6; }
.room-member.room-is-ready { border-color: var(--green); box-shadow: 0 0 12px rgba(125,255,186,.25), inset 0 0 14px rgba(125,255,186,.08); }
.room-member-head { display: flex; align-items: baseline; gap: 1cqw; min-width: 0; }
.room-member-role { flex: 0 0 auto; font-family: var(--head); font-size: max(8px, .85cqw); color: var(--violet); text-transform: uppercase; }
.room-member-name { min-width: 0; font-size: max(14px, 1.6cqw); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-member-picks { display: flex; flex-wrap: wrap; gap: .5cqw; }
.room-pick {
  --tint: var(--cyan);
  padding: .2cqw .7cqw; font-size: max(12px, 1.25cqw);
  color: color-mix(in srgb, var(--tint) 70%, #fff); border: 1px solid color-mix(in srgb, var(--tint) 60%, transparent);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
}
.room-pick-empty { --tint: #6f7a92; border-style: dashed; }
.room-member-ready { font-family: var(--head); font-size: max(8px, .85cqw); text-transform: uppercase; color: #8d99ad; }
.room-member.room-is-ready .room-member-ready { color: var(--green); }
.room-loadout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4cqw; }
.room-loadout-slot { display: flex; flex-direction: column; gap: .5cqw; min-width: 0; }
.room-loadout-slot select { width: 100%; }
.room-slot-key { color: var(--yellow); }
.room-ability-desc { --tint: var(--violet); min-height: 2.6em; line-height: 1.3; padding-left: .8cqw; border-left: 2px solid var(--tint); opacity: .85; }
#room-ready[aria-pressed="true"], #room-ready.room-is-ready { color: var(--green); border-color: var(--green); text-shadow: 0 0 6px var(--green); box-shadow: 0 0 12px rgba(125,255,186,.45), inset 0 0 10px rgba(125,255,186,.15); }

/* Countdown: a big numeral over the court before play (it never takes clicks) */
.room-countdown {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: grid; place-items: center;
  font-family: var(--head); font-size: 14cqw; color: #fff;
  text-shadow: 4px 4px 0 var(--pink), -3px -3px 0 var(--cyan), 0 0 30px var(--cyan);
  animation: countPulse 1s ease-out infinite;
}
@keyframes countPulse { from { transform: scale(1.25); opacity: .6; } 30% { transform: scale(1); opacity: 1; } }
/* the match waiting for the other player's inputs (a stall), and the network stats (Settings, or F3) */
.room-stall {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  padding: .6em 1.2em; border: 2px solid var(--yellow); background: rgba(5, 3, 20, .78);
  font-family: var(--head); font-size: max(10px, 1.2cqw); color: var(--yellow); white-space: nowrap;
}
.net-overlay {
  position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none;
  margin: 0; padding: 6px 9px; border: 1px solid rgba(56, 232, 255, .45); background: rgba(5, 3, 20, .72);
  font-family: Consolas, 'Courier New', monospace; font-size: max(10px, 1cqw); line-height: 1.45;
  color: var(--text); white-space: pre; text-align: left;
}
.room-result .overlay-inner { gap: 1.6cqw; }
.room-result-text { margin: 0; font-family: var(--head); font-size: max(11px, 1.6cqw); line-height: 1.7; color: var(--yellow); text-shadow: 0 0 12px var(--yellow); max-width: 70cqw; }
/* versus HUD: the opponent stat names a person, so give it the opponent's coral edge */
.room-duel .hud-enemy-name { border-left: 3px solid var(--hud-coral); }
.room-duel #enemy-name-value { color: var(--hud-coral); }

.effects-off .room-countdown, .effects-off .room-result-text, .effects-off .room-status { text-shadow: none; }
.effects-off .room-member.room-is-ready, .effects-off #room-ready.room-is-ready { box-shadow: none; }
.effects-low .room-countdown { animation: none; }

@container (max-width: 640px) {
  .room-columns, .room-roster, .room-loadout-grid { grid-template-columns: 1fr; }
  .room-name-field { max-width: 100%; }
  .room-inner, .room-note, .room-status, .room-waiting, .room-code-hint { max-width: 100%; width: 100%; }
}

/* ---------- Sign in with Discord: the account chip, the online boards, the ladder, the profile, ranked ----------
   Everything here is hidden until the server offers sign-in (js/account.js reads /api/me), so a server without the
   Discord keys shows the page exactly as before. */
.account-bar { display: flex; justify-content: center; align-items: center; gap: 1cqw; width: 100%; }
.btn.account-signin { color: var(--violet); border-color: var(--violet); text-shadow: 0 0 6px var(--violet); box-shadow: 0 0 10px rgba(173,140,255,.4), inset 0 0 10px rgba(173,140,255,.15);
  background: linear-gradient(180deg, rgba(173,140,255,.14), rgba(173,140,255,0)); }
.btn.account-signin:hover:not(:disabled) { background: rgba(173,140,255,.2); }
.account-chip {
  display: inline-flex; align-items: center; gap: .8cqw; padding: .4cqw 1.1cqw .4cqw .5cqw;
  font: inherit; font-family: var(--body); font-weight: 700; font-size: max(13px, 1.5cqw); letter-spacing: .04em; color: var(--text);
  background: rgba(14,22,44,.78); border: 1px solid rgba(173,140,255,.6); cursor: pointer;
}
.account-chip:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(56,232,255,.3); }
.account-chip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.account-avatar, .board-avatar, .room-member-avatar, .profile-avatar { border-radius: 50%; background: #0b1124; object-fit: cover; flex: 0 0 auto; }
.account-avatar { width: 28px; height: 28px; }
.account-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-rank { display: inline-flex; align-items: center; }
.rank-emblem { display: inline-block; vertical-align: middle; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.rank-champion { filter: drop-shadow(0 0 4px rgba(255,209,102,.7)); }

.boards .panel-head { align-items: center; }
.board-tabs { display: flex; gap: .4cqw; }
.board-tab {
  font: inherit; font-family: var(--head); font-size: max(9px, .95cqw); text-transform: uppercase; letter-spacing: .04em;
  color: #8d99ad; background: none; border: 1px solid transparent; padding: .4cqw .9cqw; cursor: pointer;
}
.board-tab.active { color: var(--yellow); border-color: rgba(255,209,102,.5); text-shadow: 0 0 8px var(--yellow); }
.board-tab:hover:not(.active) { color: var(--text); }
.board-tab:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.board-view { display: flex; flex-direction: column; gap: .6cqw; }
.board-filters { display: flex; gap: .8cqw; flex-wrap: wrap; }
.board-filters select { padding: .4cqw .8cqw; font-size: max(9px, .9cqw); }
.board-list { list-style: none; margin: 0; padding: 0; max-height: 17cqw; overflow: auto; }
.board-row { display: flex; align-items: center; gap: .9cqw; padding: .3cqw 0; font-size: max(12px, 1.4cqw); border-bottom: 1px solid rgba(173,140,255,.2); }
.board-row.board-me { background: rgba(56,232,255,.07); box-shadow: inset 3px 0 0 var(--cyan); padding-left: .5cqw; }
.board-rank { flex: 0 0 2.6em; font-family: var(--head); font-size: max(9px, .95cqw); color: var(--violet); }
.board-row:first-child .board-rank { color: var(--yellow); }
.board-who { display: inline-flex; align-items: center; gap: .6cqw; min-width: 0; flex: 1 1 auto; }
.board-avatar { width: 22px; height: 22px; }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-meta { white-space: nowrap; opacity: .85; margin-left: auto; }
.board-emblem { display: inline-flex; flex: 0 0 auto; }
.board-admin { font: inherit; font-size: max(10px, 1cqw); color: var(--pink); background: none; border: 1px dashed rgba(255,99,125,.6); padding: .1cqw .5cqw; cursor: pointer; }
.board-admin:hover { background: rgba(255,99,125,.15); }
.ladder-reset { display: block; margin: 1cqw auto 0; padding: .3cqw 1cqw; }
.board-note { min-height: 1.2em; }
.recent-list { max-height: 9cqw; border-top: 1px dashed rgba(173,140,255,.3); padding-top: .4cqw; }
.recent-row { display: flex; gap: .8cqw; align-items: baseline; font-size: max(11px, 1.2cqw); opacity: .85; padding: .15cqw 0; }
.recent-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-at { margin-left: auto; white-space: nowrap; font-size: max(10px, 1cqw); color: #8d99ad; }
.gameover-note { min-height: 1.3em; color: var(--green); opacity: 1; }

.profile-card { display: flex; align-items: center; gap: 1.6cqw; width: min(100%, 60cqw); padding: 1.2cqw 1.6cqw; text-align: left;
  background: rgba(14,22,44,.78); border: 1px solid rgba(173,140,255,.6); border-left: 4px solid var(--violet); }
.profile-avatar { width: 64px; height: 64px; }
.profile-who { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .3cqw; }
.profile-name { font-family: var(--head); font-size: max(12px, 1.4cqw); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-line { margin: 0; font-size: max(12px, 1.35cqw); }
.profile-emblem { flex: 0 0 auto; }
.profile-note { max-width: 60cqw; line-height: 1.4; }
.profile-note a { color: var(--cyan); }
.btn.danger { color: var(--pink); border-color: rgba(255,99,125,.6); text-shadow: none; box-shadow: none; }
.btn.danger:hover:not(:disabled) { background: rgba(255,99,125,.15); }

/* Ranked in the rooms screen */
.room-name-note { min-height: 1.2em; }
.room-ranked-card { width: 100%; }
.room-queue-text { margin: 0; font-family: var(--head); font-size: max(11px, 1.3cqw); color: var(--yellow); text-shadow: 0 0 10px var(--yellow); animation: queuePulse 1.6s ease-in-out infinite; }
@keyframes queuePulse { 50% { opacity: .55; } }
.room-ranked-row { display: flex; flex-direction: column; align-items: center; gap: .5cqw; width: 100%; }
.room-ranked-field { font-size: max(12px, 1.4cqw); }
.room-verified { flex: 0 0 auto; font-family: var(--head); font-size: max(7px, .75cqw); text-transform: uppercase; color: var(--violet); border: 1px solid rgba(173,140,255,.6); padding: .15cqw .5cqw; }
.room-member-avatar { width: 26px; height: 26px; }
.room-member-rank { display: flex; align-items: center; gap: .7cqw; font-size: max(11px, 1.2cqw); color: #c9d3df; }
.room-result-ranked { margin: 0; font-family: var(--head); font-size: max(10px, 1.1cqw); line-height: 1.7; color: var(--violet); text-shadow: 0 0 10px var(--violet); max-width: 70cqw; }
.effects-off .room-queue-text, .effects-off .room-result-ranked { text-shadow: none; animation: none; }
.effects-low .room-queue-text { animation: none; }
@container (max-width: 640px) { .profile-card, .profile-note { width: 100%; max-width: 100%; } .board-list { max-height: 30cqw; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::before { display: none; }
  .overlay { backdrop-filter: none; }
  .slot.is-active:hover { transform: none; }
}