/* ============================================================
   SETRIS — RUDNICK-INFLECTED
   Medieval-digital. Print annotation. Blackletter meets screen.
   ============================================================ */

:root {
  --bg:      #040404;
  --panel:   #060606;
  --panel-2: #0c0c0c;
  --text:    #c8c8c8;
  --bright:  #f0f0f0;
  --muted:   #2e2e2e;
  --mid:     #585858;
  --border:  #181818;
  --hi:      #e8e8e8;
  --danger:  #ff1f1f;
  --accent:  #b8a060;   /* aged gold — ink on vellum */
  --board-bg:#020202;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html {
  height: 100dvh;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
}

/* ── FILM GRAIN ──────────────────────────────────────────── */
/* Rudnick's work is always textured — print surface, never clean screen */
body::before {
  content: '';
  position: fixed;
  inset: -50%;          /* oversized so translate animation doesn't show edges */
  width: 200%;
  height: 200%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grain-shift 0.9s steps(1) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,   0); }
  11%  { transform: translate(-3%, -5%); }
  22%  { transform: translate(5%,  3%); }
  33%  { transform: translate(-4%, 6%); }
  44%  { transform: translate(6%, -2%); }
  55%  { transform: translate(-2%, 4%); }
  66%  { transform: translate(3%, -6%); }
  77%  { transform: translate(-6%, 2%); }
  88%  { transform: translate(2%,  5%); }
  100% { transform: translate(-1%,-3%); }
}

/* ── ORTHOGRAPHIC GRID BACKGROUND ───────────────────────── */
/* Blueprint paper — the hidden structure beneath everything */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='white' stroke-width='0.4'/%3E%3Ccircle cx='0' cy='0' r='1' fill='white'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── VIGNETTE ────────────────────────────────────────────── */
/* Rudnick's compositions breathe at centre, collapse at edge */
body > .vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 40%,
    rgba(0,0,0,0.55) 100%
  );
}

/* ── PRINT REGISTRATION CORNERS ──────────────────────────── */
/* The signature of offset lithography — colour alignment marks */
.tribal-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.tc {
  position: absolute;
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-size: 56px 56px;
}
/* Top-left: L-bracket + registration cross */
.tc-tl {
  top: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='0.5' x2='36' y2='0.5' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='36' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Ccircle cx='16' cy='16' r='8' fill='none' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='16' y1='5' x2='16' y2='27' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='5' y1='16' x2='27' y2='16' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3C/svg%3E");
}
.tc-tr {
  top: 0; right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='56' y1='0.5' x2='20' y2='0.5' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='55.5' y1='0' x2='55.5' y2='36' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Ccircle cx='40' cy='16' r='8' fill='none' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='40' y1='5' x2='40' y2='27' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='29' y1='16' x2='51' y2='16' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3C/svg%3E");
}
.tc-bl {
  bottom: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0' y1='55.5' x2='36' y2='55.5' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='0.5' y1='56' x2='0.5' y2='20' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Ccircle cx='16' cy='40' r='8' fill='none' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='16' y1='29' x2='16' y2='51' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='5' y1='40' x2='27' y2='40' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3C/svg%3E");
}
.tc-br {
  bottom: 0; right: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='56' height='56' viewBox='0 0 56 56' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='56' y1='55.5' x2='20' y2='55.5' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='55.5' y1='56' x2='55.5' y2='20' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Ccircle cx='40' cy='40' r='8' fill='none' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='40' y1='29' x2='40' y2='51' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3Cline x1='29' y1='40' x2='51' y2='40' stroke='%23b0b0b0' stroke-width='0.75'/%3E%3C/svg%3E");
}

/* ── GLOBAL INPUTS ───────────────────────────────────────── */
button {
  background: transparent;
  color: var(--hi);
  border: 1px solid #2a2a2a;
  padding: 7px 16px;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.07s, color 0.07s, border-color 0.07s;
}
button:hover:not(:disabled) {
  background: var(--hi);
  color: #000;
  border-color: var(--hi);
}
button:disabled { opacity: 0.22; cursor: not-allowed; }

button.ghost {
  color: var(--mid);
  border-color: #222;
}
button.ghost:hover:not(:disabled) {
  background: #161616;
  color: var(--text);
  border-color: #444;
}

input, select {
  background: #050505;
  color: var(--text);
  border: 1px solid #202020;
  padding: 7px 10px;
  border-radius: 0;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.1s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--hi);
}

label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
label input, label select { color: var(--text); text-transform: none; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.hint { color: var(--mid); font-size: 11px; font-style: italic; letter-spacing: 0.03em; }

/* ── AD SLOTS ────────────────────────────────────────────── */
/* ── PUBLISHER CONTENT ───────────────────────────────────── */
#site-content {
  background: #030303;
  border-top: 1px solid #0e0e0e;
  flex-shrink: 0;
  position: relative;
}

/* ── Collapse toggle arrow ── */
#btn-site-toggle {
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  padding: 0;
  border: none;
  border-right: 1px solid #0e0e0e;
  border-bottom: 1px solid #0e0e0e;
  background: #050505;
  color: #2e2e2e;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.12s, background 0.12s;
  z-index: 2;
  text-transform: none;
  letter-spacing: 0;
}
#btn-site-toggle:hover {
  background: #0c0c0c;
  color: var(--mid);
}
#btn-site-toggle[aria-expanded="false"] {
  /* arrow points right when collapsed */
  transform: rotate(-90deg);
  /* keep it pinned top-left despite transform */
  transform-origin: top left;
  top: 28px; left: 0;
}

.site-content-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 40px;
}

.site-content-block h2 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.site-content-block p {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.ad-slot {
  background: #030303;
  display: flex; align-items: center; justify-content: center;
  height: 52px; flex-shrink: 0;
  position: relative; z-index: 2;
  width: 100%;
}
.ad-slot.ad-top  { border-bottom: 1px solid #0e0e0e; }
.ad-slot.ad-bottom { border-top: 1px solid #0e0e0e; }
.ad-label {
  color: #252525;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── MENU SCREEN ─────────────────────────────────────────── */
#menu-screen {
  position: relative; z-index: 2;
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.menu-card {
  position: relative;
  width: 100%; max-width: 480px;
  background: rgba(4,4,4,0.97);
  border: 1px solid #161616;
  border-radius: 0;
  padding: 40px 44px 36px;
  overflow: hidden;
}

/* Codex catalog header — the Rudnick annotation layer */
.codex-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mid);
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #141414;
}

/* Keygen title — monospaced, extreme tracking, serial-number weight */
.menu-title {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bright);
  line-height: 1;
  margin-bottom: 6px;
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.18);
  text-shadow:
    0 0 24px rgba(255,255,255,0.07),
    0 0 2px  rgba(255,255,255,0.22);
}

/* Subtitle annotation — micro-text below the blackletter */
.menu-subtitle {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--mid);
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* Divider with registration mark */
.menu-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.menu-rule-line {
  flex: 1;
  height: 1px;
  background: #161616;
}
.menu-rule-mark {
  font-size: 13px;
  color: #383838;
  line-height: 1;
}

/* ── MODE BUTTONS ────────────────────────────────────────── */
.mode-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 22px;
}

.mode-btn {
  width: 100%;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 1px solid #161616;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  transition: background 0.08s, border-color 0.08s;
}
.mode-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.025);
  border-color: #333;
}
/* Override the default button hover which inverts to white */
.mode-btn:hover:not(:disabled) {
  color: var(--hi);
}

/* Index number — Rudnick's catalog indexing */
.mode-index {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #404040;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  transition: color 0.08s;
}
.mode-btn:hover .mode-index { color: var(--accent); }

.mode-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mode-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.mode-desc {
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.mode-btn--locked { opacity: 0.28; }

.badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  background: transparent;
  border: 1px solid #242424;
  padding: 1px 6px;
}

/* ── CONTROLS BOX ────────────────────────────────────────── */
.controls-box {
  margin-top: 20px;
  border: 1px solid #1e1e1e;
  background: #060606;
}

.controls-box__header {
  /* Reset button defaults */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-bottom: 1px solid #181818;
  background: #080808;
  cursor: pointer;
  /* Typography */
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--mid);
  text-transform: uppercase;
  padding: 8px 14px;
  transition: color 0.1s, background 0.1s;
}
.controls-box__header:hover {
  color: var(--text);
  background: #0c0c0c;
}

.controls-box__chevron {
  font-size: 9px;
  color: #2a2a2a;
  transition: transform 0.18s ease, color 0.1s;
}
.controls-box__header[aria-expanded="true"] .controls-box__chevron {
  transform: rotate(90deg);
  color: var(--mid);
}

/* Grid slides open/shut */
.controls-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}
.controls-grid--open {
  max-height: 300px;  /* tall enough for 3 rows of keys */
}

/* 4-column grid: [key] [desc] | [key] [desc] */
.controls-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
}

.ctrl-key {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px 7px 14px;
  border-bottom: 1px solid #0e0e0e;
}

/* dividing line between the two halves */
.ctrl-key:nth-child(4n+3) {
  border-left: 1px solid #181818;
  padding-left: 16px;
}

.ctrl-key kbd {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--hi);
  background: #111;
  border: 1px solid #2e2e2e;
  border-bottom: 2px solid #1a1a1a;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.5;
}

.ctrl-desc {
  display: flex;
  align-items: center;
  padding: 7px 14px 7px 8px;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid #0e0e0e;
}

/* remove bottom border from last row (last 4 children) */
.controls-grid > *:nth-last-child(-n+4) {
  border-bottom: none;
}

.menu-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 10px; color: var(--mid);
  border-top: 1px solid #141414;
  padding-top: 14px;
  margin-top: 2px;
  letter-spacing: 0.06em;
}
button.small {
  font-size: 10px;
  padding: 3px 9px;
}

/* ── AUTH MODAL ──────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal-card {
  position: relative;
  background: #040404;
  padding: 36px 32px;
  border: 1px solid #1a1a1a;
  min-width: 320px; max-width: 400px;
  border-radius: 0;
  overflow: hidden;
}
.modal-card label { display: block; margin: 12px 0; }
.modal-card label input { width: 100%; }
.modal-card h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--bright);
}
/* Pre-title annotation on auth modal */
.modal-card h2::before {
  content: 'AUTH PROTOCOL // ';
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--mid);
  display: block;
  margin-bottom: 4px;
}

/* ── LOBBY ───────────────────────────────────────────────── */
.lobby {
  position: relative; z-index: 2;
  flex: 1; min-height: 0; overflow: auto;
  max-width: 720px; width: 100%; margin: 20px auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 24px;
}
.lobby h1 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bright);
  margin-bottom: 6px;
}
#lobby-players {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px;
}
.player-chip {
  background: #050505;
  padding: 7px 10px;
  border: 1px solid #161616;
  display: flex; justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ── GAME VIEW ───────────────────────────────────────────── */
.game-view {
  position: relative; z-index: 2;
  flex: 1; min-height: 0; overflow: hidden;
  max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 10px;
  display: flex; flex-direction: column;
}

/* HUD — technical readout, not gaming chrome */
.hud {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: #040404;
  padding: 8px 20px;
  border-bottom: 1px solid #111;
  position: relative;
  flex-shrink: 0;
}
/* Thin top accent on HUD — single solid line, no dashes */
.hud::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: #282828;
}
/* Catalog annotation text in HUD corners */
.hud::after {
  content: 'SETRIS · ACTIVE SESSION';
  position: absolute;
  bottom: 3px; right: 20px;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #1c1c1c;
  text-transform: uppercase;
}

.hud-left  { text-align: left;  font-size: 11px; color: var(--mid); letter-spacing: 0.08em; }
.hud-right { text-align: right; font-size: 11px; color: var(--mid); letter-spacing: 0.08em; }
.hud-left  span,
.hud-right span { color: var(--text); font-weight: 700; }

.hud-center .timer {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--bright);
}

.arena {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  align-items: flex-start;
}
.board-host { display: flex; justify-content: center; }
.board-host canvas {
  border: 1px solid #1a1a1a;
  display: block;
}

/* Opponent column floats to the RIGHT of the board.
   A ::before phantom on .arena mirrors its width on the
   left, keeping the main board perfectly centred.       */
.opponents-left {
  order: 2;          /* visually after the board         */
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 150px;
  flex-shrink: 0;
}

/* Phantom balancer — invisible, same width as the opponent
   column so the board is centred between two equal spaces. */
.arena::before {
  content: '';
  order: 0;
  width: 150px;
  flex-shrink: 0;
}

#board-host { order: 1; }

/* Right and bottom panels unused — hidden */
.opponents-right,
.opponents-bottom { display: none !important; }
/* Opponent card — annotated like a field specimen */
.opp-card {
  background: #040404;
  border: 1px solid #141414;
  padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.opp-card .opp-head {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #404040;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.opp-card.dead { opacity: 0.15; filter: grayscale(1); }
.opp-card canvas { background: var(--board-bg); display: block; }

.banner {
  margin-top: 10px; padding: 28px 20px; text-align: center;
  background: #020202;
  border: 1px solid #141414;
  border-top: 1px solid #1e1e1e;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright);
  position: relative;
  z-index: 10;
}

/* ── GAME BODY ───────────────────────────────────────────── */
.game-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;   /* horizontally center the arena */
  padding: 0 10px 10px;
}

/* ── MULTIPLAYER HUB ─────────────────────────────────────── */
#multi-hub {
  position: relative; z-index: 2;
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 16px;
}
.hub-card {
  position: relative;
  width: 100%; max-width: 540px;
  background: rgba(4,4,4,0.97);
  border: 1px solid #161616;
  border-radius: 0;
  padding: 28px 32px;
  overflow: hidden;
}

.hub-section { padding: 14px 0; border-top: 1px solid #111; }

/* Active state for debug bot toggles */
.bot-toggle.bot-on {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(184,160,96,0.08);
}
.hub-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #383838;
  margin-bottom: 10px;
}
.hub-btn {
  flex: 1; padding: 10px 18px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hub-btn--ranked {
  background: transparent;
  border: 1px solid #3a3000;
  color: var(--accent);
}
.hub-btn--ranked:hover:not(:disabled) {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* ── ONLINE PLAYERS ──────────────────────────────────────── */
.online-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #111;
  font-size: 12px;
}

.online-player-row:last-child { border-bottom: none; }

.online-player-row__name {
  color: var(--hi);
  letter-spacing: 0.06em;
}

.online-player-row__rating {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-left: 8px;
}

.online-player-row__actions {
  display: flex;
  gap: 6px;
}

/* ── CHALLENGE TOAST ─────────────────────────────────────── */
#challenge-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#challenge-toast-inner {
  background: #0d0d0d;
  border: 1px solid var(--accent);
  padding: 14px 18px;
  min-width: 240px;
  box-shadow: 0 0 24px rgba(184,160,96,0.15);
}

#challenge-toast-text {
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.06em;
  line-height: 1.5;
}

#challenge-toast-text strong {
  color: var(--accent);
}

/* ── RATING CHIP ─────────────────────────────────────────── */
.rating-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #444;
  background: transparent;
  border: 1px solid #1e1e1e;
  padding: 2px 9px;
  white-space: nowrap;
}
.rating-chip:empty { display: none; }

/* ── ROOM BROWSER ────────────────────────────────────────── */
.room-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: #040404;
  margin-bottom: 3px;
  font-size: 11px;
  border: 1px solid #141414;
  border-left: 2px solid #1a1a1a;
  cursor: pointer;
  transition: border-left-color 0.08s, background 0.08s;
}
.room-row:hover {
  background: rgba(255,255,255,0.02);
  border-left-color: var(--hi);
}
.room-row__info { flex: 1; }
.room-row__meta { color: var(--mid); font-size: 10px; }
.room-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
  border: 1px solid;
}
.room-badge--ranked { color: var(--accent); border-color: #3a3000; }
.room-badge--casual { color: var(--mid); border-color: #1e1e1e; }

/* ── INTERSTITIAL AD OVERLAY ─────────────────────────────── */
#interstitial-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#interstitial-card {
  width: 340px;
  border: 1px solid #2a2a2a;
  background: #080808;
}

#interstitial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid #181818;
  background: #0c0c0c;
}

#interstitial-label {
  font-size: 8px;
  letter-spacing: 0.25em;
  color: var(--muted);
  font-weight: 700;
}

#interstitial-timer {
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.1em;
}

#interstitial-timer strong {
  color: var(--accent);
}

#interstitial-skip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s;
}

#interstitial-skip:hover {
  background: var(--accent);
  color: #000;
}

#interstitial-ad {
  padding: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#interstitial-ad ins {
  width: 100%;
}

/* ── REMATCH OVERLAY ─────────────────────────────────────── */
#rematch-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
#rematch-card {
  position: relative;
  background: #040404;
  border: 1px solid #1a1a1a;
  padding: 36px 44px;
  text-align: center;
  min-width: 360px; max-width: 520px;
  overflow: hidden;
}
#rematch-winner-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bright);
  margin-bottom: 20px;
}
#rematch-results-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; margin-bottom: 6px;
}
#rematch-results-table th {
  color: #3a3a3a;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 4px 10px 8px; text-align: right;
}
#rematch-results-table th:first-child,
#rematch-results-table th:nth-child(2) { text-align: left; }
#rematch-results-table td {
  padding: 5px 10px;
  border-top: 1px solid #0e0e0e;
  text-align: right;
}
#rematch-results-table td:first-child,
#rematch-results-table td:nth-child(2) { text-align: left; }
#rematch-vote-status { font-size: 10px; color: var(--mid); min-height: 18px; margin: 10px 0 0; letter-spacing: 0.06em; }

/* ── COMBO BURST (HADOUKEN) ──────────────────────────────── */
#combo-flash {
  position: fixed;
  inset: 0;
  z-index: 502;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combo-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* shoot in from the left like a Hadouken */
  animation: hadouken-in 0.14s cubic-bezier(0.05, 0.95, 0.2, 1) both;
}

@keyframes hadouken-in {
  from {
    transform: translateX(-110vw) scaleX(2.4) scaleY(0.7);
    filter: blur(12px) brightness(3);
    opacity: 0;
  }
  to {
    transform: translateX(0) scaleX(1) scaleY(1);
    filter: blur(0) brightness(1);
    opacity: 1;
  }
}

/* exit — blasts off to the right */
#combo-flash.combo-out .combo-inner {
  animation: hadouken-out 0.18s cubic-bezier(0.6, 0, 1, 0.8) both;
}

@keyframes hadouken-out {
  from {
    transform: translateX(0) scaleX(1);
    filter: blur(0);
    opacity: 1;
  }
  to {
    transform: translateX(110vw) scaleX(2) scaleY(0.6);
    filter: blur(10px) brightness(2);
    opacity: 0;
  }
}

/* The glowing energy orb behind the text */
.combo-orb {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.08;
  animation: orb-pulse 0.55s ease-out both;
}

@keyframes orb-pulse {
  0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 0.22; }
  40%  { transform: translate(-50%,-50%) scale(1.1); opacity: 0.10; }
  100% { transform: translate(-50%,-50%) scale(1.0); opacity: 0.06; }
}

/* Shockwave ring on impact */
.combo-inner::before {
  content: '';
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 2px solid currentColor;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: shockwave 0.5s ease-out 0.1s both;
}

@keyframes shockwave {
  0%   { transform: translate(-50%,-50%) scale(0.2); opacity: 0.7; }
  100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
}

.combo-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  position: relative;
  z-index: 1;
}

.combo-number {
  font-size: clamp(64px, 14vw, 120px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: currentColor;
  -webkit-text-stroke: 1px currentColor;
  position: relative;
  z-index: 1;
  text-shadow:
    0 0 30px currentColor,
    0 0 80px currentColor,
    0 0 160px currentColor;
}

/* ── Combo colours by multiplier ─────────────────────────── */
/* x2 — cool white */
#combo-flash[data-combo="2"]  { color: #d0d0d0; }
/* x3 — electric cyan */
#combo-flash[data-combo="3"]  { color: #00e5ff; }
/* x4 — amber */
#combo-flash[data-combo="4"]  { color: #ff9500; }
/* x5 — hot crimson */
#combo-flash[data-combo="5"]  { color: #ff2060; }
/* x6+ — gold with extra glow */
#combo-flash[data-combo="6"],
#combo-flash[data-combo="7"],
#combo-flash[data-combo="8"],
#combo-flash[data-combo="9"],
#combo-flash[data-combo="10"] { color: var(--accent); }
/* x11+ — pure white nuclear */
#combo-flash.combo-mega        { color: #ffffff; }

/* Screen flash on impact — brief white vignette */
#combo-flash::before {
  content: '';
  position: fixed;
  inset: 0;
  background: white;
  pointer-events: none;
  opacity: 0;
  animation: impact-flash 0.25s ease-out 0.12s both;
}

@keyframes impact-flash {
  0%   { opacity: 0.18; }
  100% { opacity: 0; }
}

/* ── LINE CLEAR FLASH ────────────────────────────────────── */
/* Rudnick-style full-viewport type interrupt */
#line-clear-flash {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: lc-in 0.12s cubic-bezier(0.05, 0.9, 0.4, 1) both;
}

@keyframes lc-in {
  from { opacity: 0; transform: scaleX(1.14) scaleY(0.82); }
  to   { opacity: 1; transform: scaleX(1)    scaleY(1); }
}

#line-clear-flash.flash-out {
  animation: lc-out 0.28s ease-in both;
}

@keyframes lc-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

/* The main word — SINGLE / DOUBLE / TRIPLE / TETRIS */
#line-clear-word {
  display: block;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(48px, 10vw, 96px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  /* Default — muted, for SINGLE */
  color: #404040;
  -webkit-text-stroke: 1px #505050;
  text-shadow: none;
  position: relative;
}

/* Pseudo line under word — print registration bar */
#line-clear-word::after {
  content: '';
  display: block;
  height: 2px;
  background: currentColor;
  opacity: 0.22;
  margin-top: 6px;
}

/* Sub-label — line count annotation */
#line-clear-sub {
  display: block;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
}

/* ── Colour by clear type ─────────────────────────────────── */
/* SINGLE — muted grey, barely there */
#line-clear-flash[data-count="1"] #line-clear-word {
  color: #363636;
  -webkit-text-stroke: 1px #484848;
}

/* DOUBLE — cool silver */
#line-clear-flash[data-count="2"] #line-clear-word {
  color: #909090;
  -webkit-text-stroke: 1px #b0b0b0;
  text-shadow: 0 0 40px rgba(180,180,180,0.12);
}

/* TRIPLE — near-white, clean */
#line-clear-flash[data-count="3"] #line-clear-word {
  color: #e0e0e0;
  -webkit-text-stroke: 1px #f0f0f0;
  text-shadow:
    0 0 32px rgba(240,240,240,0.18),
    0 0 80px rgba(240,240,240,0.08);
}

/* TETRIS — aged gold, high contrast, glow */
#line-clear-flash[data-count="4"] #line-clear-word {
  color: var(--accent);
  -webkit-text-stroke: 1px #d4a842;
  text-shadow:
    0 0 24px rgba(184,160,96,0.5),
    0 0 64px rgba(184,160,96,0.22),
    0 0 120px rgba(184,160,96,0.1);
  animation: lc-in 0.1s cubic-bezier(0.05, 0.9, 0.4, 1) both,
             tetris-pulse 0.65s ease-out 0.1s both;
}

@keyframes tetris-pulse {
  0%   { letter-spacing: 0.55em; }
  100% { letter-spacing: 0.28em; }
}

#line-clear-flash[data-count="4"] #line-clear-sub {
  color: var(--accent);
  opacity: 0.65;
}

/* ── REMATCH OVERLAY — IMPROVED ──────────────────────────── */
#rematch-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
#rematch-card {
  position: relative;
  background: #030303;
  border: 1px solid #1c1c1c;
  padding: 44px 52px 36px;
  text-align: center;
  min-width: 380px; max-width: 560px;
  width: 100%;
  overflow: hidden;
}

/* Codex header row above winner */
#rematch-card::before {
  content: 'MATCH CONCLUDED · RESULT LOGGED';
  display: block;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: #2a2a2a;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Place annotation — top-right corner */
#rematch-place-tag {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #2a2a2a;
}

#rematch-winner-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}

/* The big winner name */
#rematch-winner-name {
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 6px;
  -webkit-text-stroke: 0.5px currentColor;
}

/* Score callout row beneath winner name */
#rematch-winner-score {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mid);
  margin-bottom: 28px;
}

/* Horizontal rule with ⊕ */
.rematch-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.rematch-rule::before,
.rematch-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #141414;
}
.rematch-rule span {
  color: #2c2c2c;
  font-size: 10px;
}

#rematch-results-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; margin-bottom: 6px;
}
#rematch-results-table th {
  color: #282828;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  padding: 4px 10px 10px; text-align: right;
  border-bottom: 1px solid #0e0e0e;
}
#rematch-results-table th:first-child,
#rematch-results-table th:nth-child(2) { text-align: left; }
#rematch-results-table td {
  padding: 7px 10px;
  border-top: 1px solid #0a0a0a;
  text-align: right;
  letter-spacing: 0.06em;
}
#rematch-results-table td:first-child { color: var(--mid); font-size: 10px; }
#rematch-results-table td:nth-child(2) { text-align: left; }
#rematch-results-table tr.row-winner td { color: var(--bright); }
#rematch-results-table tr.row-me td { background: rgba(255,255,255,0.013); }

#rematch-vote-status {
  font-size: 10px;
  color: var(--mid);
  min-height: 18px;
  margin: 12px 0 0;
  letter-spacing: 0.08em;
}

/* ── SUPPORTER ───────────────────────────────────────────── */
.support-row {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.support-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.support-btn:hover {
  background: var(--accent);
  color: #000;
}
.support-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.support-hint {
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.08em;
}

/* Supporter badge next to username */
#supporter-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
  vertical-align: middle;
}

/* Thank-you toast */
#supporter-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: #0a0a0a;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.3s ease;
}
.supporter-toast-icon { font-size: 18px; }
#supporter-toast button {
  background: none;
  border: none;
  color: var(--mid);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .arena { flex-direction: column; }
  .arena::before { display: none; }
  .opponents-left { order: 0; width: 100%; flex-direction: row; flex-wrap: wrap; }
  #board-host { order: 1; }
  .menu-title { font-size: 38px; letter-spacing: 0.22em; }
  #rematch-card { padding: 36px 24px 28px; min-width: unset; }
  #line-clear-word { font-size: clamp(36px, 14vw, 72px); letter-spacing: 0.18em; }
}