/* Raupe Volley – styles. Playful, rounded and bold; everything scales with the viewport
 * (root font size) so the UI looks the same from 1280×720 up to 3840×2160 and works on phones. */

:root {
  --ink: #1d2433;
  --ink-soft: #56627c;
  --panel: #ffffff;
  --panel-2: #f2f6fc;
  --line: #dde6f2;
  --green: #3fbf3f;
  --green-dark: #23801f;
  --blue: #3f7fff;
  --red: #ef4256;
  --yellow: #ffd23f;
  --pink: #ff7fdf;
  --sky-1: #2fa8e8;
  --sky-2: #9fe0ff;
  --sand-1: #f3dc8e;
  --sand-2: #e3c062;
  --team0: #3fbf3f;
  --team1: #3f7fff;
  --team0-ink: #ffffff;
  --team1-ink: #ffffff;
  --radius: 1.1em;
  --shadow: 0 .28em 0 rgba(20, 45, 90, .14), 0 .9em 2.2em rgba(20, 45, 90, .16);
  --font: "Nunito", "Varela Round", "Quicksand", "Arial Rounded MT Bold", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

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

html {
  /* ≈16px at 1280×720, ≈21px at 1080p, ≈37px at 4K, never below 14px */
  font-size: clamp(14px, calc(6px + 0.55vw + 0.45vh), 46px);
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  background: var(--sky-1);
  -webkit-tap-highlight-color: transparent;
}
body.in-game { background: #000; }

button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 900; }
p { margin: .4em 0; }

* { scrollbar-width: thin; scrollbar-color: #b6c5da transparent; }
::-webkit-scrollbar { width: .55em; height: .55em; }
::-webkit-scrollbar-thumb { background: #b6c5da; border-radius: 1em; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: .18em solid var(--blue); outline-offset: .12em; }

.muted { color: var(--ink-soft); font-weight: 600; }
.small { font-size: .85em; }
.strong { font-weight: 900; }

/* ===================================================================== icons, logo, title */

.ico { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; }

.logo { display: inline-block; flex: none; }
.logo-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.logo-ball { animation: rv-ball 1.5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.logo-body { animation: rv-wiggle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 100%; }

@keyframes rv-ball {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22%) rotate(160deg); }
}
@keyframes rv-wiggle {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.94); }
}

.title {
  font-size: 2em;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.title-raupe {
  color: #5fd23c;
  text-shadow: 0 .07em 0 var(--green-dark), .045em 0 0 #fff, -.045em 0 0 #fff, 0 .045em 0 #fff, 0 -.045em 0 #fff, .03em .03em 0 #fff, -.03em -.03em 0 #fff, .03em -.03em 0 #fff, -.03em .03em 0 #fff;
}
.title-volley {
  color: var(--yellow);
  text-shadow: 0 .07em 0 #c78400, .045em 0 0 #fff, -.045em 0 0 #fff, 0 .045em 0 #fff, 0 -.045em 0 #fff, .03em .03em 0 #fff, -.03em -.03em 0 #fff, .03em -.03em 0 #fff, -.03em .03em 0 #fff;
}

/* ===================================================================== buttons & controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  border: 0;
  border-radius: 999px;
  padding: .55em 1.1em;
  font-weight: 800;
  line-height: 1.15;
  cursor: pointer;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 .2em 0 rgba(20, 45, 90, .2);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease, background-color .15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-.06em); }
.btn:active:not(:disabled) { transform: translateY(.14em); box-shadow: 0 .06em 0 rgba(20, 45, 90, .2); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #5ddb4f, #2fae2f);
  box-shadow: 0 .22em 0 #1d7a1d;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .22);
}
.btn-primary:active:not(:disabled) { box-shadow: 0 .06em 0 #1d7a1d; }
.btn-danger {
  color: #fff;
  background: linear-gradient(180deg, #ff7685, #e43a4f);
  box-shadow: 0 .22em 0 #a51e30;
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .2);
}
.btn-ghost {
  background: #fff;
  border: .12em solid var(--line);
  box-shadow: 0 .18em 0 #c7d4e6;
}
.btn-sm { font-size: .84em; padding: .42em .85em; }
.btn-big { font-size: 1.2em; padding: .7em 1.4em; }
.icon-btn { padding: 0; width: 2.2em; height: 2.2em; border-radius: 50%; }
.icon-btn .ico { width: 1.1em; height: 1.1em; }
.btn-team { background: var(--tc, var(--green)); color: var(--tink, #fff); box-shadow: 0 .18em 0 rgba(0, 0, 0, .22); }
.btn-team.team0 { --tc: var(--team0); --tink: var(--team0-ink); }
.btn-team.team1 { --tc: var(--team1); --tink: var(--team1-ink); }

.text-input, .select, .step-input {
  border: .14em solid var(--line);
  background: #fff;
  border-radius: .8em;
  padding: .45em .75em;
  font-weight: 700;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.text-input { width: 100%; }
.text-input:focus, .select:focus, .step-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 .2em rgba(63, 127, 255, .22);
}
.text-input:disabled, .select:disabled, .step-input:disabled { background: var(--panel-2); color: var(--ink-soft); }
.select { cursor: pointer; padding-right: .5em; }
.select-sm { font-size: .85em; padding: .3em .5em; }
.select-xs { font-size: .78em; padding: .12em .35em; border-radius: .6em; }

.color-input {
  width: 2.4em;
  height: 2.1em;
  padding: .15em;
  border: .14em solid var(--line);
  border-radius: .7em;
  background: #fff;
  cursor: pointer;
}
.color-input:disabled { cursor: not-allowed; opacity: .7; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: 0; border-radius: .45em; }
.color-input::-moz-color-swatch { border: 0; border-radius: .45em; }

/* toggle switch */
.switch { display: inline-flex; align-items: center; gap: .5em; cursor: pointer; position: relative; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  width: 2.7em;
  height: 1.55em;
  border-radius: 999px;
  background: #cfd9e8;
  position: relative;
  transition: background-color .18s;
  box-shadow: inset 0 .12em .2em rgba(0, 0, 0, .12);
  flex: none;
}
.switch-thumb {
  position: absolute;
  top: .17em;
  left: .17em;
  width: 1.21em;
  height: 1.21em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .12em .25em rgba(0, 0, 0, .25);
  transition: transform .18s cubic-bezier(.4, 1.6, .5, 1);
}
.switch-input:checked + .switch-track { background: var(--green); }
.switch-input:checked + .switch-track .switch-thumb { transform: translateX(1.15em); }
.switch-input:focus-visible + .switch-track { outline: .18em solid var(--blue); outline-offset: .12em; }
.switch-input:disabled + .switch-track { opacity: .55; cursor: not-allowed; }

/* segmented buttons */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2em;
  padding: .2em;
  border-radius: 1.1em;
  background: var(--panel-2);
  border: .12em solid var(--line);
}
.seg-btn {
  border: 0;
  background: transparent;
  border-radius: .9em;
  padding: .32em .75em;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn:hover:not(:disabled):not(.active) { background: rgba(255, 255, 255, .7); color: var(--ink); }
.seg-btn.active { background: #fff; color: var(--ink); box-shadow: 0 .12em 0 rgba(20, 45, 90, .18); }
.seg-btn.active::before { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--green); margin-right: .35em; vertical-align: .1em; }
.seg-btn:disabled { cursor: default; }

/* slider */
.slider-wrap { display: flex; align-items: center; gap: .7em; width: 100%; }
.slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 6em;
  height: .7em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green) var(--p, 50%), #d9e3f0 var(--p, 50%));
  cursor: pointer;
  margin: .5em 0;
}
.slider:focus-visible { outline: .18em solid var(--blue); outline-offset: .35em; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: #fff;
  border: .24em solid var(--green-dark);
  box-shadow: 0 .14em 0 rgba(0, 0, 0, .2);
}
.slider::-moz-range-thumb {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
  border: .24em solid var(--green-dark);
  box-shadow: 0 .14em 0 rgba(0, 0, 0, .2);
}
.slider:disabled { cursor: default; filter: grayscale(.6); opacity: .75; }
.slider-val { min-width: 4.5em; text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* stepper */
.stepper { display: inline-flex; align-items: center; gap: .3em; }
.step-input { width: 3.6em; text-align: center; font-weight: 900; -moz-appearance: textfield; appearance: textfield; padding: .35em .3em; }
.step-input::-webkit-outer-spin-button, .step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { width: 1.9em; height: 1.9em; }
.step-note { color: var(--ink-soft); font-size: .85em; min-width: 4.5em; }

/* help bubble */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  margin-left: .35em;
  border-radius: 50%;
  background: var(--panel-2);
  border: .12em solid var(--line);
  color: var(--ink-soft);
  font-size: .72em;
  font-weight: 900;
  cursor: help;
  vertical-align: middle;
  flex: none;
}
.tip:hover, .tip:focus { background: var(--blue); border-color: var(--blue); color: #fff; outline: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .1em .5em;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 900;
  background: var(--panel-2);
  color: var(--ink-soft);
  white-space: nowrap;
}
.badge .ico { width: 1.1em; height: 1.1em; }
.badge-bot { background: #6c5ce7; color: #fff; }
.badge-host { background: var(--yellow); color: #5a4300; }
.badge-diff { background: #ece8ff; color: #4a3db8; }
.badge-scheme { background: #e3f1ff; color: #1f5fb8; }
.badge-away { background: #ffe1e5; color: var(--red); }
.pcard.away .pcard-blob, .pcard.away .pcard-name { opacity: .5; }
.badge-map { background: #fff3c9; color: #7a5a00; }
.badge.mini { font-size: .62em; margin-left: .35em; }

.keycap {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  margin: .12em .2em .12em 0;
  padding: .12em .5em;
  border-radius: .5em;
  background: #fff;
  border: .12em solid #cbd6e6;
  border-bottom-width: .28em;
  font-size: .88em;
  font-weight: 900;
  white-space: nowrap;
}
.keycap.empty { color: var(--ink-soft); border-style: dashed; }
.keycap-x {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  padding: .12em;
  border: 0;
  border-radius: 50%;
  background: #ffe1e5;
  color: var(--red);
  cursor: pointer;
}
.keycap-x .ico { width: 100%; height: 100%; }
.keycap-add {
  margin: .12em 0;
  padding: .12em .6em;
  border-radius: .5em;
  border: .12em dashed #9fb3cf;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
  color: var(--blue);
}
.keycap-add.waiting { border-color: var(--blue); background: #e8f0ff; animation: rv-pulse 1s ease-in-out infinite; }
@keyframes rv-pulse { 50% { box-shadow: 0 0 0 .3em rgba(63, 127, 255, .2); } }

/* tables */
.table-wrap { overflow: auto; max-width: 100%; border-radius: .9em; border: .12em solid var(--line); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9em; }
.data-table th, .data-table td { padding: .45em .6em; text-align: center; white-space: nowrap; }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--ink-soft);
  font-weight: 900;
  border-bottom: .12em solid var(--line);
}
.data-table tbody tr:nth-child(even) td { background: #f8fafe; }
.data-table tbody tr.own td { background: #fff6d2; }
.data-table .left { text-align: left; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--ink); }
.data-table th.sorted { color: var(--blue); }
.data-table th.sorted.desc::after { content: " ▼"; font-size: .75em; }
.data-table th.sorted.asc::after { content: " ▲"; font-size: .75em; }
.team-pip { display: inline-block; width: .75em; height: .75em; border-radius: 50%; margin-right: .45em; vertical-align: -.05em; }
.mvp-star { display: inline-flex; align-items: center; gap: .2em; color: #e89a00; font-weight: 900; }

.loading, .empty-state { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 2em 1em; color: var(--ink-soft); }

/* ===================================================================== match view */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.stage.active { display: flex; }
#game-canvas {
  display: block;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
@supports (height: 100dvh) {
  #game-canvas {
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
  }
}

.hud {
  /* geometry of the letterboxed 16:9 canvas (same rule the renderer uses) */
  --cw: min(100vw, 100vh * 16 / 9);
  --ch: min(100vh, 100vw * 9 / 16);
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-size: .95em;
}
@supports (height: 100dvh) {
  .hud { --cw: min(100vw, 100dvh * 16 / 9); --ch: min(100dvh, 100vw * 9 / 16); }
}
/* the renderer draws the scores in both top corners and the clock at the top centre:
   the buttons sit in the free strip just right of the clock */
.hud-buttons {
  position: absolute;
  top: max(.6em, env(safe-area-inset-top));
  left: calc(50% + 4.6em);
  display: flex;
  gap: .4em;
  pointer-events: auto;
}
.hud-buttons .icon-btn {
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 .15em 0 rgba(0, 0, 0, .3);
  opacity: .65;
  transition: opacity .2s, transform .08s;
}
.hud-buttons .icon-btn:hover, .hud-buttons .icon-btn:focus-visible { opacity: 1; }

/* in the sky on the left, just below the renderer's score block (≈ 20 % of the canvas height) */
.chat-overlay {
  position: absolute;
  left: calc((100vw - var(--cw)) / 2 + max(.8em, env(safe-area-inset-left)));
  top: calc((100% - var(--ch)) / 2 + var(--ch) * .21);
  width: min(30em, calc(var(--cw) * .42));
  display: flex;
  flex-direction: column;
  gap: .4em;
}
.chat-feed { display: flex; flex-direction: column; align-items: flex-start; gap: .25em; }
.chat-feed .chat-line {
  max-width: 100%;
  padding: .22em .65em;
  border-radius: .7em;
  background: rgba(10, 20, 45, .6);
  color: #fff;
  text-shadow: 0 .05em .1em rgba(0, 0, 0, .6);
  overflow-wrap: anywhere;
  transition: opacity .8s ease;
}
.chat-feed .chat-line.sys { color: #ffe58a; font-style: italic; }
.chat-feed .chat-line.old { opacity: 0; }
.chat-feed .chat-line:nth-last-child(n+6) { display: none; }
.chat-overlay.open .chat-feed .chat-line:nth-last-child(n+6) { display: block; }
.chat-overlay.open .chat-line.old { opacity: .9; }
.chat-overlay.open .chat-feed { max-height: 40vh; overflow: hidden; justify-content: flex-end; }
.chat-entry { display: flex; gap: .4em; pointer-events: auto; }
.chat-entry .text-input { background: rgba(255, 255, 255, .95); }

.touch-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 max(1em, env(safe-area-inset-right)) max(1em, env(safe-area-inset-bottom)) max(1em, env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tc-pad, .tc-jump { pointer-events: auto; touch-action: none; }
.tc-pad { display: flex; gap: .6em; width: min(44vw, 22em); height: min(28vh, 9em); }
.tc-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.3em;
  background: rgba(255, 255, 255, .2);
  border: .2em solid rgba(255, 255, 255, .55);
  color: #fff;
  font-size: 2em;
  transition: background-color .08s, transform .08s;
}
.tc-half .ico { width: 1.2em; height: 1.2em; filter: drop-shadow(0 .05em .1em rgba(0, 0, 0, .5)); }
.tc-pad.press-left .tc-left, .tc-pad.press-right .tc-right { background: rgba(255, 255, 255, .55); transform: scale(.96); }
.tc-jump {
  width: min(28vh, 9em, 30vw);
  height: min(28vh, 9em, 30vw);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(95, 210, 60, .45);
  border: .2em solid rgba(255, 255, 255, .7);
  color: #fff;
  font-size: 1.3em;
  font-weight: 900;
  text-shadow: 0 .06em .12em rgba(0, 0, 0, .5);
  transition: background-color .08s, transform .08s;
}
.tc-jump.pressed { background: rgba(95, 210, 60, .8); transform: scale(.94); }

/* two players on one touch device (SPEC §15): one cluster per player in the left and the right third of the
   screen, jump on the outer edge, tinted with the player's colour (--pc) and labelled with the name */
.touch-duo { position: absolute; inset: 0; pointer-events: none; }
.tc-cluster {
  --pc: var(--green);
  --pc-ink: #fff;
  position: absolute;
  bottom: 0;
  width: calc(100vw / 3);
  display: flex;
  flex-direction: column;
  gap: .35em;
  padding-bottom: max(.7em, env(safe-area-inset-bottom));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tc-cluster-l { left: 0; align-items: flex-start; padding-left: max(.7em, env(safe-area-inset-left)); padding-right: .4em; }
.tc-cluster-r { right: 0; align-items: flex-end; padding-right: max(.7em, env(safe-area-inset-right)); padding-left: .4em; }
.tc-name {
  max-width: 100%;
  padding: .12em .75em;
  border-radius: 999px;
  background: var(--pc);
  color: var(--pc-ink);
  font-size: .85em;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 .12em 0 rgba(0, 0, 0, .28);
}
.tc-cluster.rainbow .tc-name { background: linear-gradient(90deg, #ff5f6d, #ffc371, #7ee35c, #4fc3f7, #b46cf2); color: var(--ink); }
.tc-row { display: flex; gap: .45em; width: 100%; height: min(36vh, 10.5em); }
.tc-cluster .tc-pad { flex: 2 1 0; width: auto; height: 100%; gap: .4em; }
.tc-cluster .tc-jump { flex: 1 1 0; width: auto; min-width: 0; height: 100%; border-radius: 1.3em; font-size: 1.1em; }
.tc-cluster .tc-half, .tc-cluster .tc-jump {
  background: rgba(255, 255, 255, .14);
  background: color-mix(in srgb, var(--pc) 20%, transparent);
  border: .16em solid var(--pc);
}
.tc-cluster .tc-pad.press-left .tc-left, .tc-cluster .tc-pad.press-right .tc-right, .tc-cluster .tc-jump.pressed {
  background: rgba(255, 255, 255, .45);
  background: color-mix(in srgb, var(--pc) 58%, transparent);
}
.tc-cluster.rainbow .tc-half, .tc-cluster.rainbow .tc-jump { border-color: rgba(255, 255, 255, .8); }

.spec-bar {
  position: absolute;
  left: 50%;
  bottom: max(1em, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em;
  max-width: calc(100vw - 2em);
  padding: .45em .6em .45em 1em;
  border-radius: 1.4em;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  pointer-events: auto;
}
.spec-bar > .ico { color: var(--ink-soft); }
/* a team of the running match is empty: shown above the middle of the picture (below the "Pausiert" banner) */
.empty-bar {
  top: 62%;
  bottom: auto;
}

.rotate-hint {
  display: none;
  position: absolute;
  bottom: calc(min(28vh, 9em) + 2.2em);   /* free band above the touch controls */
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  gap: .6em;
  padding: .5em 1em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  white-space: nowrap;
  font-size: .9em;
}
.rotate-icon {
  width: 1.1em;
  height: 1.7em;
  border: .18em solid var(--ink);
  border-radius: .3em;
  animation: rv-rotate 2.2s ease-in-out infinite;
}
@keyframes rv-rotate { 0%, 30% { transform: rotate(0deg); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) {
  body.in-game .rotate-hint { display: flex; }
}

/* ===================================================================== lobby */

.lobby {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .8em;
  padding: max(.8em, env(safe-area-inset-top)) max(1em, env(safe-area-inset-right)) max(1em, env(safe-area-inset-bottom)) max(1em, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(ellipse 9em 3.2em at 8% 9%, rgba(255, 255, 255, .55) 60%, transparent 62%),
    radial-gradient(ellipse 6em 2.4em at 13% 6%, rgba(255, 255, 255, .55) 60%, transparent 62%),
    radial-gradient(ellipse 11em 3.6em at 72% 14%, rgba(255, 255, 255, .4) 60%, transparent 62%),
    radial-gradient(ellipse 7em 2.6em at 78% 10%, rgba(255, 255, 255, .4) 60%, transparent 62%),
    radial-gradient(circle at 93% 4%, #fff6b0 0 2.6em, rgba(255, 240, 150, .5) 2.7em, transparent 5em),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 70%, var(--sand-1) 70.2%, var(--sand-2) 100%);
}

.topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em 1.2em;
}
.brand { display: flex; align-items: center; gap: .55em; }
.brand-logo { width: 5.4em; height: 3.4em; filter: drop-shadow(0 .15em .1em rgba(0, 0, 0, .15)); }
.brand-text { display: flex; flex-direction: column; gap: .15em; }
.tagline { color: #fff; font-size: .8em; font-weight: 800; text-shadow: 0 .08em .15em rgba(0, 40, 90, .4); }

.join-box {
  flex: 1 1 18em;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
}
.join-label { display: flex; align-items: center; gap: .4em; color: #fff; font-size: .85em; text-shadow: 0 .08em .15em rgba(0, 40, 90, .4); }
.join-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em .5em; max-width: 100%; }
.url-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; max-width: 100%; min-width: 0; }
.url-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: 100%;
  padding: .2em .25em .2em .85em;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .2em 0 rgba(20, 45, 90, .2);
}
.url-text { font-size: 1.05em; font-weight: 900; color: var(--blue); user-select: all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-copy { width: 1.9em; height: 1.9em; background: var(--panel-2); box-shadow: none; }

/* room switcher (SPEC §11) */
.room-switch { position: relative; flex: none; }
.room-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .75em .45em .8em;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .2em 0 rgba(20, 45, 90, .2);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.room-btn:hover { filter: brightness(1.04); }
.room-btn > .ico:first-child { color: var(--blue); }
.room-text { display: inline-flex; align-items: center; gap: .4em; }
.room-info { padding: .05em .45em; border-radius: 999px; background: var(--blue); color: #fff; font-size: .74em; }
.room-chev { width: .95em; height: .95em; color: var(--ink-soft); transition: transform .15s; }
.room-btn[aria-expanded="true"] .room-chev { transform: rotate(180deg); }
.room-pop {
  position: absolute;
  top: calc(100% + .5em);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .35em;
  width: min(25em, calc(100vw - 2em));
  max-height: min(70vh, 32em);
  overflow-y: auto;
  padding: .6em;
  border-radius: 1.1em;
  background: #fff;
  box-shadow: var(--shadow);
  animation: rv-pop .15s ease-out;
}
.room-pop-title { padding: .1em .35em .2em; font-size: .78em; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  width: 100%;
  padding: .45em .65em;
  border: .14em solid var(--line);
  border-radius: .85em;
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.room-row:hover:not(.current) { border-color: #9fc0f5; background: #fff; }
.room-row.current { border-color: var(--green); background: #eaf9e6; cursor: default; }
.room-row-main { display: flex; flex-direction: column; gap: .05em; min-width: 0; }
.room-row-name { font-weight: 900; }
.room-here { font-size: .72em; color: var(--green-dark); }
.room-row-admin { display: inline-flex; align-items: center; gap: .25em; min-width: 0; font-size: .72em; color: var(--ink-soft); }
.room-row-admin > span:not(.ico) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-row-admin .ico { width: 1em; height: 1em; color: #f0b400; }
.room-row-side { display: flex; align-items: center; gap: .45em; flex: none; }
.badge-playing { background: #ffe1e5; color: var(--red); }
.badge-lobby { background: #e3f1ff; color: #1f5fb8; }
.room-score { font-weight: 900; font-variant-numeric: tabular-nums; }
.room-players { display: inline-flex; align-items: center; gap: .25em; font-size: .85em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.room-new { margin-top: .2em; }
.room-empty { padding: .6em; color: var(--ink-soft); text-align: center; }

/* offline mode (SPEC §15): the join box shows the mode instead of addresses */
.offline-box .join-label { font-size: .95em; font-weight: 900; }
.offline-modes { background: rgba(255, 255, 255, .9); border-color: transparent; box-shadow: 0 .2em 0 rgba(20, 45, 90, .2); }
.offline-modes .seg-btn { display: inline-flex; align-items: center; gap: .35em; padding: .38em .85em; }
.offline-modes .seg-btn.active { color: var(--green-dark); }
.offline-modes .seg-btn.active::before { display: none; }
.btn-online .ico { color: var(--blue); }
.btn-offline .ico { color: var(--green-dark); }

.top-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4em; min-width: 0; max-width: 100%; }
.top-actions { display: flex; flex-wrap: wrap; gap: .4em; justify-content: flex-end; }
.me-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4em .5em; min-width: 0; max-width: 100%; }
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-width: 0;
  max-width: 100%;
  padding: .25em .7em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  color: #a86d00;
  font-size: .8em;
  font-weight: 900;
}
.admin-badge > span:not(.ico) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-badge .ico { color: #f0b400; }
.me-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-width: 0;
  max-width: 100%;
  padding: .15em .7em .15em .2em;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 .18em 0 rgba(20, 45, 90, .2);
  cursor: pointer;
  text-align: left;
}
.me-chip:hover { filter: brightness(1.04); }
.me-blob { width: 2.3em; height: 2.3em; flex: none; }
.me-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.me-name { font-weight: 900; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-hint { font-size: .7em; color: var(--ink-soft); }
.me-chip > .ico { color: var(--ink-soft); }

/* wide screens: the teams use the full height (many players!), the chat sits under the settings */
.lobby-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(8.5em, .6fr);
  grid-template-areas: "teams side" "teams chat";
  gap: .8em;
}

.panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .75em .85em;
  min-height: 0;
}
.panel-head { display: flex; align-items: center; gap: .6em; margin-bottom: .5em; flex-wrap: wrap; }
.panel-head h2 { font-size: 1.15em; flex: 1; }

.teams-panel { grid-area: teams; display: flex; flex-direction: column; }
.counter {
  padding: .2em .7em;
  border-radius: 999px;
  background: var(--panel-2);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.counter.full { background: #ffe1e5; color: var(--red); }
.teams-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin-bottom: .55em; }
.admin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; flex: 1; }
.mini-label { display: inline-flex; align-items: center; gap: .35em; font-size: .84em; color: var(--ink-soft); }

.team-columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr);
  gap: .6em;
}
.team-col {
  --tc: #8a95ab;
  --tink: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 1em;
  background: #eef2f8;
  background: color-mix(in srgb, var(--tc) 13%, #fff);
  border: .14em solid color-mix(in srgb, var(--tc) 35%, #fff);
  transition: box-shadow .15s, transform .15s;
}
.team-left { --tc: var(--team0); --tink: var(--team0-ink); }
.team-right { --tc: var(--team1); --tink: var(--team1-ink); }
.team-col.drop-ok { box-shadow: 0 0 0 .25em var(--tc); transform: scale(1.01); }
.team-head {
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .45em .7em;
  border-radius: .85em .85em 0 0;
  background: var(--tc);
  color: var(--tink);
}
.team-dot {
  width: .9em;
  height: .9em;
  border-radius: 50%;
  background: var(--tink);
  opacity: .9;
  flex: none;
}
.team-spec .team-dot { background: transparent; width: 1.1em; height: 1.1em; display: inline-flex; }
.team-name { font-size: 1.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-count {
  min-width: 1.6em;
  padding: .05em .45em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  text-align: center;
  font-weight: 900;
}
.team-list {
  flex: 1;
  min-height: 3em;
  overflow-y: auto;
  overflow-x: hidden;
  padding: .45em;
  display: flex;
  flex-direction: column;
  gap: .4em;
}
.team-list:empty::before {
  content: attr(data-empty);
  margin: auto;
  padding: 1em .5em;
  color: var(--ink-soft);
  font-size: .85em;
  font-weight: 700;
  text-align: center;
}
.team-foot { display: flex; flex-wrap: wrap; gap: .35em; padding: .45em; border-top: .12em dashed color-mix(in srgb, var(--tc) 30%, #fff); }
.team-foot:not(:has(.btn:not([hidden]))) { display: none; }
.team-foot .btn { flex: 1 1 auto; }
.team-col .btn-team { background: var(--tc); color: var(--tink); }

/* player cards */
.pcard {
  --pc: var(--green);
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .25em .35em .25em .2em;
  border-radius: .85em;
  background: #fff;
  border: .14em solid transparent;
  box-shadow: 0 .14em 0 rgba(20, 45, 90, .1);
  animation: rv-pop .22s ease-out;
}
.pcard.own { border-color: var(--pc); background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 12%, #fff), #fff 60%); }
.pcard.rainbow.own {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff4f5e, #ffd23f, #3fbf3f, #3f7fff, #b05fff) border-box;
}
.pcard[draggable="true"] { cursor: grab; }
.pcard.dragging { opacity: .5; }
.pcard-blob { width: 3em; height: 3em; flex: none; }
.pcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.pcard-top { display: flex; align-items: center; gap: .3em; min-width: 0; }
.pcard-name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pcard-you { color: var(--ink-soft); font-size: .8em; white-space: nowrap; }
.pcard-crown { color: #f0b400; width: 1.05em; height: 1.05em; filter: drop-shadow(0 .05em 0 #a86d00); }
.pcard-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; min-width: 0; }
.pcard-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25em; flex: 1 1 6.5em; min-width: 0; overflow: hidden; }
.pcard-sub .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pcard-ping { font-size: .7em; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard-actions { display: flex; justify-content: flex-end; gap: .15em; flex: none; margin-left: auto; }
.pcard-actions .icon-btn { width: 1.75em; height: 1.75em; background: var(--panel-2); box-shadow: 0 .1em 0 rgba(20, 45, 90, .15); }
.pcard-actions .icon-btn .ico { width: .95em; height: .95em; }
.pcard-actions .btn-remove { color: var(--red); background: #ffe8eb; }
.pcard-actions .btn-crown { color: #c88a00; background: #fff4cc; }

/* chat */
.chat-panel { grid-area: chat; display: flex; flex-direction: column; }
.chat-log {
  flex: 1;
  min-height: 3em;
  overflow-y: auto;
  padding: .3em .5em;
  border-radius: .8em;
  background: var(--panel-2);
  font-size: .9em;
  overflow-wrap: anywhere;
}
.chat-line { padding: .12em 0; line-height: 1.3; }
.chat-line.sys { color: #7a5a00; font-style: italic; font-weight: 700; }
.chat-line.sys::before { content: "• "; color: var(--yellow); font-style: normal; }
.chat-from { font-weight: 900; }
.chat-dot { display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .3em; vertical-align: .05em; box-shadow: 0 0 0 .1em rgba(0, 0, 0, .15); }
.chat-text { font-weight: 600; }
.chat-form { display: flex; gap: .4em; margin-top: .5em; }

/* settings */
.side-col { grid-area: side; display: flex; flex-direction: column; gap: .8em; min-height: 0; }
.settings-panel { flex: 1; display: flex; flex-direction: column; }
.ro-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .15em .6em;
  border-radius: 999px;
  background: #fff4cc;
  color: #8a6200;
  font-size: .72em;
}
.settings-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: .3em; margin-right: -.3em; }
.set-group { padding: .2em 0 .6em; }
.set-group + .set-group { border-top: .14em solid var(--line); padding-top: .6em; }
.set-group-title { font-size: .95em; color: var(--green-dark); margin-bottom: .3em; letter-spacing: .02em; }
.set-group-fun .set-group-title { color: #c2389a; }
.set-row {
  display: grid;
  grid-template-columns: minmax(7em, 1fr) auto;
  align-items: center;
  gap: .35em .8em;
  padding: .35em 0;
}
.set-row.wide { grid-template-columns: minmax(0, 1fr); }
.set-row.dim { opacity: .5; }
.set-note { margin: .15em 0 0; font-size: .8em; font-weight: 700; line-height: 1.35; color: var(--ink-soft); }
.set-label { display: flex; align-items: center; font-size: .92em; min-width: 0; }
.set-ctrl { display: flex; align-items: center; justify-content: flex-end; min-width: 0; flex-wrap: wrap; gap: .3em; }
.set-row.wide .set-ctrl { justify-content: stretch; }
.settings-panel.readonly .set-ctrl { filter: saturate(.85); }

.map-picker { width: 100%; }
.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45em; }
.map-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .2em;
  border: .16em solid var(--line);
  border-radius: .8em;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.map-tile:hover:not(.locked) { transform: translateY(-.1em); border-color: #9fc0f5; }
.map-tile.locked { cursor: default; }
.map-tile.active { border-color: var(--green); box-shadow: 0 0 0 .14em var(--green); }
.map-tile.active::after {
  content: "✓";
  position: absolute;
  top: .1em;
  right: .1em;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: .8em;
  line-height: 1.3em;
  font-weight: 900;
}
.map-grid.locked .map-tile:not(.active) { opacity: .6; }
.map-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: .55em; display: block; background: #cfe3f5; }
.map-name { font-size: .74em; font-weight: 900; padding: .2em 0 .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-desc { margin-top: .45em; font-size: .85em; font-weight: 600; color: var(--ink-soft); }
.map-desc strong { color: var(--ink); }
.map-badges { display: inline-flex; flex-wrap: wrap; gap: .25em; margin-left: .4em; vertical-align: .1em; }

.speed-ctrl { width: 100%; display: flex; flex-direction: column; gap: .2em; }
.chips { display: flex; flex-wrap: wrap; gap: .3em; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: .22em .65em;
  border: .12em solid var(--line);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: .8em;
  font-weight: 800;
}
.chip-val { color: var(--ink-soft); font-size: .9em; }
.chip:hover:not(:disabled) { border-color: #9fc0f5; }
.chip.active { background: var(--green); border-color: var(--green); color: #fff; }
.chip.active .chip-val { color: rgba(255, 255, 255, .85); }
.chip:disabled { cursor: default; }

.team-names, .team-colors { display: flex; gap: .4em; width: 100%; }
.team-colors { width: auto; }
.team-input { flex: 1; }
.team-input-0 { border-color: var(--team0); }
.team-input-1 { border-color: var(--team1); }

.start-box { display: flex; flex-direction: column; align-items: stretch; gap: .5em; padding: .8em; }
.start-status { margin: 0; text-align: center; font-size: .92em; color: var(--ink-soft); }
.start-status.warn { color: var(--red); }
.btn-start { font-size: 1.45em; padding: .55em 1em; }
.btn-start .ico { width: 1em; height: 1em; }
.btn-start:not(:disabled) { animation: rv-breathe 2.4s ease-in-out infinite; }
@keyframes rv-breathe { 50% { transform: scale(1.025); } }

/* ===================================================================== modals */

.modals { position: relative; z-index: 60; }
.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1em, env(safe-area-inset-top)) 1em max(1em, env(safe-area-inset-bottom));
  background: rgba(12, 28, 60, .5);
  backdrop-filter: blur(.15em);
  -webkit-backdrop-filter: blur(.15em);
  animation: rv-fade .15s ease-out;
}
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(46em, 100%);
  max-height: 100%;
  border-radius: 1.4em;
  background: #fff;
  box-shadow: 0 .4em 0 rgba(0, 0, 0, .18), 0 1.5em 4em rgba(0, 0, 0, .35);
  animation: rv-pop .2s cubic-bezier(.3, 1.4, .5, 1);
  outline: none;
}
.modal-sm { max-width: min(28em, 100%); }
.modal-wide { max-width: min(66em, 100%); }
.modal-menu { max-width: min(24em, 100%); }
.modal-profile { max-width: min(56em, 100%); }
.modal-matchend { max-width: min(54em, 100%); }
.modal-head { display: flex; align-items: center; gap: .6em; padding: .9em 1.1em .35em 1.3em; }
.modal-title { flex: 1; font-size: 1.4em; }
.modal-close { margin-left: auto; background: var(--panel-2); box-shadow: none; }
.modal-body { padding: .3em 1.3em 1.1em; overflow-y: auto; min-height: 0; }
.modal-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6em;
  padding: .8em 1.2em 1.1em;
  border-top: .12em solid var(--line);
}
.confirm-text { font-size: 1.05em; font-weight: 700; }

@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* profile editor */
.welcome-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .6em; }
.lead { font-size: 1.05em; margin: 0; flex: 1 1 18em; }
.profile-grid { display: grid; grid-template-columns: minmax(9em, 15em) minmax(0, 1fr); gap: 1.2em; align-items: start; }
.profile-left { display: flex; flex-direction: column; align-items: center; gap: .4em; position: sticky; top: 0; }
.profile-preview {
  width: 100%;
  aspect-ratio: 1 / 1.08;
  border-radius: 1.2em;
  background:
    radial-gradient(ellipse 70% 12% at 50% 88%, rgba(0, 0, 0, .14), transparent 70%),
    linear-gradient(180deg, #8fd6ff 0%, #d8f2ff 72%, var(--sand-1) 72.5%, var(--sand-2) 100%);
  box-shadow: inset 0 0 0 .14em rgba(0, 0, 0, .06);
}
.profile-hint { margin: 0; font-size: .8em; color: var(--ink-soft); }
.profile-right { display: flex; flex-direction: column; gap: .75em; min-width: 0; }
.field { display: flex; flex-direction: column; gap: .3em; }
.field-label { font-size: .85em; color: var(--ink-soft); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.name-input { font-size: 1.2em; font-weight: 900; }
.palette { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; }
.swatch {
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border-radius: 50%;
  border: .16em solid rgba(0, 0, 0, .12);
  background: var(--c);
  cursor: pointer;
  transition: transform .1s;
  box-shadow: inset 0 -.25em 0 rgba(0, 0, 0, .12), inset 0 .2em .2em rgba(255, 255, 255, .45);
}
.swatch:hover { transform: scale(1.1); }
.swatch.active, .swatch-custom.active { box-shadow: 0 0 0 .18em #fff, 0 0 0 .34em var(--ink); }
.swatch-rainbow { background: conic-gradient(#ff4f5e, #ffd23f, #3fbf3f, #3fdfdf, #3f7fff, #b05fff, #ff4f5e); }
.swatch-custom { width: 2.6em; height: 2.1em; border-radius: 1em; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: .4em; }
.pick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .2em .2em .35em;
  border: .16em solid var(--line);
  border-radius: .9em;
  background: var(--panel-2);
  cursor: pointer;
  transition: transform .1s, border-color .1s;
}
.pick-tile:hover { transform: translateY(-.08em); border-color: #9fc0f5; }
.pick-tile.active { border-color: var(--green); background: #eaf9e6; box-shadow: 0 0 0 .12em var(--green); }
.tile-blob { width: 100%; aspect-ratio: 1 / 1; }
.pick-label { font-size: .72em; font-weight: 900; text-align: center; }

/* in-game menu */
.menu-list { display: flex; flex-direction: column; gap: .55em; padding: .3em 0; }
.btn-menu { width: 100%; justify-content: flex-start; font-size: 1.1em; padding: .7em 1.2em; }
.btn-menu .ico { width: 1.15em; height: 1.15em; }
.menu-note { font-size: .8em; color: var(--ink-soft); text-align: center; }

/* match end */
.end-head { text-align: center; padding: .2em 0 .9em; }
.end-trophy {
  width: 4.2em;
  height: 4.2em;
  color: var(--win);
  filter: drop-shadow(0 .15em 0 rgba(0, 0, 0, .2));
  animation: rv-trophy 1.8s ease-in-out infinite;
}
@keyframes rv-trophy { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-.2em) rotate(4deg); } }
.end-title {
  font-size: 2.3em;
  color: var(--win);
  text-shadow: 0 .06em 0 rgba(0, 0, 0, .25), .04em 0 0 #fff, -.04em 0 0 #fff, 0 .04em 0 #fff, 0 -.04em 0 #fff;
  overflow-wrap: anywhere;
}
.end-sub { font-size: 1.05em; color: var(--ink-soft); }
.end-score { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3em .6em; margin-top: .3em; }
.end-team { font-weight: 900; font-size: 1.05em; text-shadow: 0 .05em 0 rgba(0, 0, 0, .15); }
.end-num { font-size: 2.8em; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.end-colon { font-size: 2em; font-weight: 900; color: var(--ink-soft); }
.end-duration { color: var(--ink-soft); font-size: .9em; }
.data-table tr.mvp td { font-weight: 900; }

/* statistics, options, help */
.stats-filter { max-width: 18em; margin: .4em 0 .7em; }
.stats-table td.strong { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.opt-section { padding: .4em 0 .9em; }
.opt-section + .opt-section { border-top: .12em solid var(--line); padding-top: .8em; }
.opt-section h3 { font-size: 1em; color: var(--green-dark); margin-bottom: .4em; }
.opt-row { display: grid; grid-template-columns: minmax(9em, 1fr) minmax(0, 2fr); align-items: center; gap: .4em 1em; padding: .35em 0; }
.opt-row .set-ctrl { justify-content: flex-start; }
.key-table td { vertical-align: middle; }
.opt-section > .btn { margin-top: .6em; }

.help-tabs { margin-bottom: .8em; }
.help-content { font-weight: 600; line-height: 1.45; }
.help-content h3 { margin: 1em 0 .35em; font-size: 1.05em; color: var(--green-dark); }
.help-content p { max-width: 60em; }
.help-list { margin: .3em 0; padding-left: 1.4em; max-width: 60em; }
.help-list li { margin: .3em 0; }
.help-list li::marker { color: var(--green); font-weight: 900; }
.help-urls { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .6em 0; }
.help-urls code { padding: .2em .6em; border-radius: .5em; background: var(--panel-2); color: var(--blue); font-weight: 900; font-family: inherit; }
.about-head { display: flex; align-items: center; gap: 1em; margin: .3em 0 .6em; }
.about-logo { width: 7em; height: 4.4em; }
.about-title { font-size: 2.2em; }

/* ===================================================================== overlays */

.conn-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .35), transparent 60%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 72%, var(--sand-1) 72.2%, var(--sand-2) 100%);
}
.conn-overlay.soft { background: rgba(12, 28, 60, .55); backdrop-filter: blur(.2em); -webkit-backdrop-filter: blur(.2em); }
.conn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  padding: 1.6em 2.2em;
  border-radius: 1.6em;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  text-align: center;
  max-width: 34em;
}
.conn-logo { width: 13em; height: 8.1em; }
.conn-title { font-size: 2.6em; }
.conn-text { font-size: 1.15em; font-weight: 900; margin: .2em 0 0; }
.conn-text:empty, .conn-sub:empty { display: none; }
.conn-sub { color: var(--ink-soft); margin: 0; }
.conn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; }
.conn-actions:not(:has(.btn:not([hidden]))) { display: none; }
.conn-dots { display: flex; gap: .4em; padding: .3em; }
.conn-dots span {
  width: .75em;
  height: .75em;
  border-radius: 50%;
  background: var(--green);
  animation: rv-dot 1s ease-in-out infinite;
}
.conn-dots span:nth-child(2) { animation-delay: .15s; background: var(--yellow); }
.conn-dots span:nth-child(3) { animation-delay: .3s; background: var(--blue); }
@keyframes rv-dot { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-.6em); } }

.kicked {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background: linear-gradient(180deg, #5a6b8c, #2c3550);
}
.kicked-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  max-width: 30em;
  padding: 1.8em 2.2em;
  border-radius: 1.6em;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}
.kicked-logo { width: 9em; height: 5.6em; filter: grayscale(.6); }
.kicked-box h2 { font-size: 1.6em; }
.kicked-msg { color: var(--ink-soft); }

.toasts {
  position: fixed;
  top: max(.8em, env(safe-area-inset-top));
  left: 50%;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45em;
  width: max-content;
  max-width: calc(100vw - 2em);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .55em 1.1em;
  border-radius: 1.2em;
  background: #fff;
  box-shadow: 0 .25em 0 rgba(0, 0, 0, .15), 0 .8em 2em rgba(0, 0, 0, .2);
  font-weight: 800;
  pointer-events: none;                   /* nothing to click: never cover the HUD buttons or the join address */
  animation: rv-toast .25s cubic-bezier(.3, 1.4, .5, 1);
  transition: opacity .35s, transform .35s;
}
body.in-game .toasts { top: calc(max(.6em, env(safe-area-inset-top)) + 3.4em); }   /* below the HUD buttons and clock */
.toast-error { background: var(--red); color: #fff; }
.toast-ok { background: var(--green); color: #fff; }
.toast-info .ico { color: var(--blue); }
.toast.leaving { opacity: 0; transform: translateY(-.6em); }
@keyframes rv-toast { from { transform: translateY(-1em) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.tooltip {
  position: fixed;
  z-index: 95;
  max-width: min(22em, calc(100vw - 1em));
  padding: .5em .75em;
  border-radius: .75em;
  background: var(--ink);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .3);
}

.noscript {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  background: var(--sky-1);
  color: #fff;
  font-size: 1.4em;
  text-align: center;
}

/* ===================================================================== responsive */

@media (max-width: 1180px) {
  .top-actions .btn-label { display: none; }
  .top-actions .btn { padding: 0; width: 2.3em; height: 2.3em; border-radius: 50%; }
}

/* tablets, portrait screens and phones: one scrolling column */
@media (max-width: 960px), (max-aspect-ratio: 4/5) {
  .lobby { overflow-y: auto; overflow-x: hidden; }
  .topbar { justify-content: space-between; }
  .join-box { order: 3; flex-basis: 100%; }
  .top-right { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lobby-body { display: flex; flex-direction: column; flex: none; }
  .side-col { display: contents; }
  .start-box { order: -1; }
  .teams-panel { order: 0; }
  .settings-panel { order: 1; }
  .chat-panel { order: 2; }
  .team-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .team-spec { grid-column: 1 / -1; grid-row: 2; }
  .team-list { max-height: none; overflow: visible; }
  .settings-scroll { overflow: visible; }
  .chat-log { min-height: 8em; max-height: 16em; }
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-left { position: static; }
  .profile-preview { max-width: 11em; }
  .opt-row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .team-columns { grid-template-columns: minmax(0, 1fr); }
  .team-spec { grid-row: auto; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-ctrl { justify-content: flex-start; }
  .brand-logo { width: 4.2em; height: 2.6em; }
  .title { font-size: 1.6em; }
  .tagline { display: none; }
  .modal-body { padding: .3em .9em 1em; }
  .end-title { font-size: 1.7em; }
  .end-num { font-size: 2.2em; }
}

/* very short landscape screens (phones held sideways) */
@media (max-height: 460px) and (orientation: landscape) {
  .lobby { overflow-y: auto; }
  .lobby-body { display: flex; flex-direction: column; flex: none; }
  .side-col { display: contents; }
  .start-box { order: -1; }
  .team-list { overflow: visible; }
  .settings-scroll { overflow: visible; }
  .chat-log { max-height: 12em; }
  .conn-logo { width: 8em; height: 5em; }
}

/* wide screens: an empty spectator column does not need a third of the room; one-line card footer */
@media (min-width: 961px) and (min-aspect-ratio: 4/5) {
  .team-columns:has(> .team-spec .team-list:empty) { grid-template-columns: minmax(0, 1fr) minmax(max-content, .5fr) minmax(0, 1fr); }
  .pcard-sub { flex-basis: 3em; }
}

/* real 720p/768p browser windows (≈ 600–760 px tall): tighter spacing and smaller player cards */
@media (min-width: 961px) and (min-aspect-ratio: 4/5) and (min-height: 461px) and (max-height: 820px) {
  .lobby { gap: .5em; padding-top: max(.5em, env(safe-area-inset-top)); padding-bottom: max(.6em, env(safe-area-inset-bottom)); }
  .topbar { gap: .4em 1em; }
  .brand-logo { width: 4.3em; height: 2.7em; }
  .title { font-size: 1.65em; }
  .tagline { display: none; }
  .join-box { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .3em .6em; }
  .lobby-body { gap: .6em; }
  .side-col { gap: .6em; }
  .panel { padding: .55em .7em; }
  .panel-head { margin-bottom: .35em; }
  .teams-toolbar { margin-bottom: .4em; }
  .team-head { padding: .3em .6em; }
  .team-list { padding: .35em; gap: .3em; }
  .team-foot { padding: .3em .35em; }
  .pcard { gap: .35em; padding: .15em .3em .15em .15em; }
  .pcard-blob { width: 2.3em; height: 2.3em; }
  .pcard-main { gap: .05em; }
  .pcard-ping { display: none; }
  .pcard-actions .icon-btn { width: 1.6em; height: 1.6em; }
  .start-box { gap: .35em; padding: .55em .7em; }
  .btn-start { font-size: 1.25em; padding: .45em 1em; }
  .chat-form { margin-top: .35em; }
}

/* touch screens: big enough HUD buttons, and lighter, smaller touch controls that hide less of the court */
@media (pointer: coarse) {
  .hud-buttons .icon-btn { width: max(2.2em, 44px); height: max(2.2em, 44px); opacity: .8; }
  .tc-pad { width: min(36vw, 17em); height: min(22vh, 6.5em); gap: .45em; }
  .tc-half { background: rgba(255, 255, 255, .12); border-width: .12em; border-color: rgba(255, 255, 255, .42); }
  .tc-pad.press-left .tc-left, .tc-pad.press-right .tc-right { background: rgba(255, 255, 255, .4); }
  .tc-jump {
    width: min(22vh, 6.5em, 26vw);
    height: min(22vh, 6.5em, 26vw);
    background: rgba(95, 210, 60, .28);
    border-width: .12em;
    border-color: rgba(255, 255, 255, .5);
  }
  .tc-jump.pressed { background: rgba(95, 210, 60, .65); }
  .rotate-hint { bottom: calc(min(22vh, 6.5em) + 2.2em); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}