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

:root {
  --bg: #150707;
  --panel: rgba(52, 12, 12, 0.86);
  --panel-solid: #2e0b0b;
  --panel2: #3d1010;
  --line: rgba(230, 90, 70, 0.22);
  --text: #f2e8e4;
  --dim: #b59a92;
  --accent: #ff4a3a;
  --danger: #ff5a4a;
  --gold: #f0b829;
  --green: #e8b830;
  --purple: #e88a2f;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  user-select: none;
}

#bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, transparent 45%, rgba(12, 3, 3, 0.58) 100%),
    linear-gradient(180deg, rgba(12,3,3,0.3), transparent 30%, transparent 70%, rgba(12,3,3,0.45));
}

/* ---- ambient block art: giant translucent tetrominoes drifting at the edges ---- */
#bg-art { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bga {
  position: absolute; display: block;
  filter: drop-shadow(0 0 22px currentColor);
  animation: bgaDrift 60s ease-in-out infinite alternate;
}
.bga rect {
  fill: currentColor; stroke: rgba(0,0,0,.4); stroke-width: .05;
}
@keyframes bgaDrift {
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%  { transform: translate(14px, -22px) rotate(calc(var(--rot, 0deg) + 5deg)); }
  100% { transform: translate(-12px, 16px) rotate(calc(var(--rot, 0deg) - 4deg)); }
}
.bga-1 { color: #c984e8; left: 3.5%;  top: 9%;    width: 150px; --rot: -12deg; opacity: .10; animation-duration: 74s; }
.bga-2 { color: #4ad9e0; right: 5%;   top: 6%;    width: 200px; --rot: 8deg;   opacity: .09; animation-duration: 88s; }
.bga-3 { color: #4ad9a4; left: 8%;    bottom: 16%; width: 175px; --rot: 6deg;  opacity: .10; animation-duration: 67s; }
.bga-4 { color: #f0b829; right: 11%;  top: 41%;   width: 120px; --rot: 0deg;   opacity: .11; animation-duration: 59s; }
.bga-5 { color: #7ec8ff; left: 41%;   top: 3%;    width: 135px; --rot: 14deg;  opacity: .08; animation-duration: 82s; }
.bga-6 { color: #ff5a4a; right: 29%;  bottom: 6%;  width: 185px; --rot: -8deg; opacity: .10; animation-duration: 71s; }
.bga-7 { color: #ff8a3a; left: 21%;   top: 54%;   width: 140px; --rot: -18deg; opacity: .09; animation-duration: 63s; }
.bga-8 { color: #f0b829; right: 3.5%; bottom: 20%; width: 110px; --rot: 24deg; opacity: .08; animation-duration: 77s; }
.bga-9 { color: #ff5a4a; left: 56%;   bottom: 31%; width: 100px; --rot: 10deg; opacity: .07; animation-duration: 69s; }
@media (max-width: 760px) {
  .bga-5, .bga-7, .bga-9 { display: none; } /* keep small screens calm */
  .bga { opacity: .08; }
}

#app { position: relative; z-index: 2; height: 100vh; }
.screen { height: 100%; display: flex; flex-direction: column; align-items: center; animation: screenIn .38s ease both; }
.hidden { display: none !important; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==================== HOME ==================== */
#screen-menu { justify-content: flex-start; overflow-y: auto; padding: 4.5vh 16px 40px; }
.menu-box { width: 860px; max-width: 96vw; display: flex; flex-direction: column; align-items: center; }

/* --- hero logo --- */
.hero { text-align: center; margin-bottom: 3.4vh; }
.logo-row { display: flex; justify-content: center; gap: 0.5vw; perspective: 600px; }
.logo-letter {
  font-size: clamp(44px, 7.2vw, 88px);
  font-weight: 900;
  line-height: 1;
  animation: letterDrop .7s cubic-bezier(.2, 1.4, .4, 1) both;
  text-shadow: 0 0 26px currentColor;
  transform-origin: bottom center;
}
.logo-com {
  align-self: flex-end;
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 34px);
  line-height: 1.15;
  color: #f0b829;
  text-shadow: 0 0 18px rgba(240, 184, 41, .55);
  margin-left: 2px;
}
@keyframes letterDrop {
  0% { opacity: 0; transform: translateY(-70px) rotateX(70deg) scale(1.3); }
  60% { opacity: 1; transform: translateY(6px) rotateX(-8deg) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
.logo-beam {
  height: 3px; width: min(560px, 70vw); margin: 14px auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--accent) 55%, #8a1a10 80%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(255, 74, 58, 0.55);
  animation: beamIn 1s .55s ease both, beamPulse 3.2s 1.6s ease-in-out infinite;
}
@keyframes beamIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes beamPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.tagline { color: var(--dim); letter-spacing: 1.5px; font-size: 14px; text-transform: uppercase; animation: fadeUp .7s .7s ease both; }
.tag-chip {
  display: inline-block; padding: 3px 10px; margin-right: 10px; border-radius: 20px;
  border: 1px solid rgba(255, 74, 58, 0.45); color: var(--accent);
  font-size: 11px; letter-spacing: 2.5px; font-weight: 700;
  background: rgba(255, 74, 58, 0.08);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- menu card --- */
.menu-card {
  width: 520px; max-width: 94vw;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: fadeUp .7s .85s ease both;
}

.field { display: block; margin-bottom: 18px; }
.field span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 7px; }
.field input {
  width: 100%; padding: 13px 16px; font-size: 18px; color: var(--text);
  background: rgba(18, 6, 6, 0.7); border: 1px solid var(--line); border-radius: 11px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 74, 58, 0.15), 0 0 22px rgba(255, 74, 58, 0.12); }

.menu-buttons { display: flex; gap: 12px; margin: 4px 0 16px; }
.btn {
  position: relative; overflow: hidden;
  flex: 1; padding: 13px 14px 12px;
  color: var(--text); background: rgba(46, 16, 16, 0.85); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
  transition: transform .12s ease, box-shadow .25s ease, border-color .2s;
}
.btn-label { display: block; font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.btn-sub { display: block; font-size: 11px; color: var(--dim); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.btn:hover { border-color: var(--accent); box-shadow: 0 8px 28px rgba(255, 74, 58, 0.18); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.btn-primary {
  background: linear-gradient(135deg, rgba(90, 22, 16, 0.9), rgba(58, 14, 14, 0.9));
  border-color: rgba(255, 74, 58, 0.5);
}
.btn-primary .btn-sub { color: #ffb0a2; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -80%; } 85%, 100% { left: 130%; } }
.btn-ghost { background: transparent; flex: 0 1 auto; padding: 10px 26px; font-weight: 700; letter-spacing: 1px; }

.net-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--dim); margin: 0; min-height: 18px;
}
.net-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #8a8a5a; flex: 0 0 auto; animation: dotPulse 1.6s ease-in-out infinite; }
.net-status.ok { color: #f0c85a; }
.net-status.ok .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.net-status.bad { color: #e08a8a; }
.net-status.bad .dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }

/* --- info cards --- */
.info-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  width: 100%; margin-top: 22px;
}
@media (max-width: 780px) { .info-cards { grid-template-columns: 1fr; } }
.info-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; backdrop-filter: blur(12px);
  color: var(--dim); font-size: 13px; line-height: 1.55;
  transition: transform .18s ease, border-color .2s, box-shadow .25s;
  animation: fadeUp .7s 1.05s ease both;
}
.info-card:nth-child(2) { animation-delay: 1.15s; }
.info-card:nth-child(3) { animation-delay: 1.25s; }
.info-card:hover { transform: translateY(-3px); border-color: rgba(255, 74, 58, 0.4); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); }
.info-card h3 { color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 9px; }
.info-card h3 .ic { margin-right: 6px; }
.info-card ol { padding-left: 18px; }
.info-card li { margin-bottom: 5px; }
.info-card code { background: rgba(18,6,6,.8); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--accent); font-size: 12px; }
.controls { border-collapse: collapse; width: 100%; }
.controls td { padding: 3px 10px 3px 0; font-size: 12px; }
.controls td:nth-child(odd) { color: var(--gold); font-weight: 700; white-space: nowrap; }

/* ==================== WAITING ==================== */
#screen-wait { justify-content: center; }
.wait-card { text-align: center; width: 460px; }
.wait-card h2 { font-size: 26px; letter-spacing: 1px; margin-bottom: 6px; }
.wait-card p { color: var(--dim); margin: 18px 0 22px; line-height: 1.7; }
.wait-card code { color: var(--accent); background: rgba(18,6,6,.8); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; }

.block-loader { display: flex; gap: 7px; justify-content: center; margin: 20px 0 4px; }
.block-loader i {
  width: 20px; height: 20px; border-radius: 4px;
  animation: blockHop 1.15s ease-in-out infinite;
}
.block-loader i:nth-child(1) { background: var(--accent); box-shadow: 0 0 14px rgba(255, 74, 58,.6); animation-delay: 0s; }
.block-loader i:nth-child(2) { background: var(--purple); box-shadow: 0 0 14px rgba(232, 138, 47,.6); animation-delay: .12s; }
.block-loader i:nth-child(3) { background: var(--gold); box-shadow: 0 0 14px rgba(232,194,47,.6); animation-delay: .24s; }
.block-loader i:nth-child(4) { background: var(--green); box-shadow: 0 0 14px rgba(74,208,90,.6); animation-delay: .36s; }
@keyframes blockHop {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-16px) rotate(90deg); }
}

/* ==================== GAME ==================== */
#screen-game { justify-content: flex-start; padding-top: 10px; }

#hud {
  display: flex; align-items: center; justify-content: space-between;
  width: 900px; max-width: 98vw; padding: 8px 18px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(10px);
}
.hud-side { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.hud-side.right { text-align: right; align-items: flex-end; }
.hud-mid { text-align: center; flex: 0 0 auto; padding: 0 12px; }
.hud-name {
  font-weight: 800; font-size: 16px; letter-spacing: 1px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud-name.you { color: var(--gold); }
.hud-name.opp { color: var(--danger); }
.hud-stat { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.hud-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
#hud-timer { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-vs { font-size: 11px; color: var(--dim); letter-spacing: 3px; }

#arena { position: relative; display: flex; gap: 14px; align-items: flex-start; }

.panel { display: flex; flex-direction: column; gap: 12px; width: 132px; }
.mini-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px 10px; text-align: center; backdrop-filter: blur(8px); }
.mini-box h4 { font-size: 11px; letter-spacing: 2px; color: var(--dim); margin-bottom: 6px; }
.mini-box canvas { display: block; margin: 0 auto; }
.stats-box .stat-row { display: flex; justify-content: space-between; padding: 3px 8px; font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.stats-box .stat-row b { color: var(--text); }

.board-wrap { position: relative; display: flex; gap: 4px; }
#cv-board {
  background: rgba(22, 9, 9, 0.92); border: 2px solid var(--line); border-radius: 8px;
  box-shadow: 0 0 30px rgba(255, 74, 58,.07), inset 0 0 40px rgba(0,0,0,.5);
}
#cv-meter { background: transparent; }

.opp-col { display: flex; flex-direction: column; gap: 12px; margin-left: 6px; }
.opp-wrap { position: relative; }
.opp-label {
  position: absolute; top: -22px; left: 0; right: 0; text-align: center;
  font-size: 11px; letter-spacing: 2px; color: var(--danger); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cv-opp {
  background: rgba(22, 9, 9, 0.92); border: 2px solid #4a2018; border-radius: 8px;
  box-shadow: 0 0 26px rgba(224,74,74,.08), inset 0 0 30px rgba(0,0,0,.5);
  margin-top: 4px;
}

/* opponent identity + career stats in the space under the (shorter) opponent board */
.opp-info { width: 200px; box-sizing: border-box; text-align: left; padding: 10px 12px 8px; }
.oi-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.oi-av {
  width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto;
  background: #2a0a0a center / cover no-repeat; image-rendering: pixelated;
  border: 1px solid rgba(240,184,41,.35);
}
.oi-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oi-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-note { font-size: 9.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-row { display: flex; justify-content: space-between; gap: 8px; padding: 2.5px 2px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; }
.oi-row b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

#cv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* ==================== overlays ==================== */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,5,5,.74); backdrop-filter: blur(3px);
}
#countdown span {
  font-size: 130px; font-weight: 900; color: var(--accent);
  text-shadow: 0 0 60px rgba(255, 74, 58,.6);
  animation: pop .9s ease both;
}
@keyframes pop {
  0% { transform: scale(.4); opacity: 0; }
  25% { transform: scale(1.15); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.result-box {
  position: relative; overflow: hidden;
  text-align: center; padding: 36px 52px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6); backdrop-filter: blur(14px);
  animation: fadeUp .35s ease both;
  min-width: 430px;
}
.result-box > *:not(.result-rays) { position: relative; z-index: 1; }
.result-box.win { border-color: rgba(240,184,41,.6); box-shadow: 0 20px 80px rgba(0,0,0,.6), 0 0 70px rgba(240,184,41,.14); }
.result-box.lose { border-color: rgba(224,74,74,.5); box-shadow: 0 20px 80px rgba(0,0,0,.6), 0 0 50px rgba(224,74,74,.1); }
.result-box.void { border-color: rgba(224,74,74,.7); }
.result-rays {
  position: absolute; inset: -45%; z-index: 0; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(rgba(240,184,41,.07) 0deg 9deg, transparent 9deg 28deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: raysSpin 16s linear infinite;
  transition: opacity .5s ease;
}
.result-box.win .result-rays { opacity: 1; }
@keyframes raysSpin { to { transform: rotate(360deg); } }
.result-box h2 {
  font-size: 60px; font-weight: 900; letter-spacing: 3px; color: var(--gold);
  text-shadow: 0 0 40px rgba(232,194,47,.5);
  animation: koSlam .5s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes koSlam {
  0% { transform: scale(2.4); opacity: 0; }
  55% { transform: scale(.94); opacity: 1; }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.result-box.lose h2 { color: #ff6a5a; text-shadow: 0 0 40px rgba(255,74,58,.5); }
.result-box.draw h2 { color: #c9a08a; text-shadow: 0 0 30px rgba(200,160,138,.4); }
.result-box > p { font-size: 22px; font-weight: 800; letter-spacing: 4px; margin: 8px 0 18px; }
.result-box p.win { color: var(--green); text-shadow: 0 0 22px rgba(104,224,138,.4); }
.result-box p.lose { color: #ff8a7a; }
.result-box p.draw { color: var(--dim); }

/* --- rematch negotiation zone --- */
#rematch-zone { min-height: 54px; display: flex; flex-direction: column; justify-content: center; }
#rematch-zone .rbtn { justify-content: center; }
.rm-state { animation: rbtnIn .3s ease both; }
.rm-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 4px 10px; min-height: 38px;
}
.rm-status-text {
  font-size: 13px; letter-spacing: 1px; color: var(--gold); font-weight: 700;
  flex: 0 1 auto; min-width: 0; text-align: center;
}
.rm-status-text.hot { color: #ffd24a; animation: hotPulse 1.3s ease-in-out infinite; }
@keyframes hotPulse { 50% { text-shadow: 0 0 16px rgba(255,210,74,.85); } }
.rm-status-text.gone { color: #ff8a7a; }
.rm-spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(240,184,41,.25); border-top-color: var(--gold);
  animation: rmSpin 1s linear infinite;
}
@keyframes rmSpin { to { transform: rotate(360deg); } }
.rm-count { font-size: 13px; color: var(--dim); font-weight: 700; flex: 0 0 auto; }
.rm-count b { font-variant-numeric: tabular-nums; font-size: 16px; color: var(--gold); }
.rm-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 4px 0; }
.rm-bar > div { height: 100%; width: 100%; background: linear-gradient(90deg, #ff5a3a, #f0b829); transition: width .1s linear; }
.rm-vote-row { display: flex; gap: 10px; margin-top: 11px; }
.rm-vote-row .rbtn { padding: 12px 14px 11px; flex: 1 1 0; }
.rm-vote-row .rbtn-text { white-space: nowrap; }
.rm-vote-row .rbtn kbd { margin-left: 6px; }
.rbtn-accept {
  justify-content: center;
  background: linear-gradient(135deg, #1e5c2e, #123a1d 60%, #0c2a14);
  border-color: rgba(104,224,138,.55);
}
.rbtn-accept:hover { transform: translateY(-2px); border-color: #68e08a; box-shadow: 0 10px 26px rgba(104,224,138,.25); }
.rbtn-accept .rbtn-icon { color: #68e08a; }
.rbtn-accept kbd { color: #68e08a; border-color: rgba(104,224,138,.4); margin-left: 6px; font-variant-numeric: tabular-nums; }
.rbtn-accept.voted, .rbtn-accept.voted:hover {
  transform: none; cursor: default; border-color: #68e08a;
  box-shadow: 0 0 0 1px rgba(104,224,138,.5), 0 8px 24px rgba(104,224,138,.3);
  background: linear-gradient(135deg, #2a7a3e, #1e5c2e 60%, #123a1d);
}
.rbtn-accept:disabled:not(.voted) { opacity: .45; cursor: default; transform: none; }
.rbtn-decline { justify-content: center; }
.rbtn-decline .rbtn-icon { color: var(--danger); }
.rbtn-decline:hover { border-color: var(--danger); box-shadow: 0 10px 26px rgba(224,74,74,.22); transform: translateY(-2px); }
.rbtn-decline:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.rm-vote-row .rbtn-menu { justify-content: center; }

/* rematch button live states: my offer pending / their offer incoming */
#btn-rematch.waiting { opacity: .82; }
#btn-rematch.waiting .rbtn-icon { animation: rmSpin 1.1s linear infinite; }
#btn-rematch.hot {
  border-color: rgba(255, 210, 74, .85); color: #ffd24a;
  animation: rbtnIn .45s cubic-bezier(.2, 1.2, .4, 1) both, rmHotGlow 1.15s ease-in-out infinite;
}
#btn-rematch.hot .rbtn-icon { color: #ffd24a; }
@keyframes rmHotGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 74, .16); }
  50% { box-shadow: 0 0 32px rgba(255, 210, 74, .5); }
}
#rematch-note { font-size: 12.5px !important; letter-spacing: 1px !important; color: var(--dim) !important; margin: 10px 0 0 !important; font-weight: 600 !important; }

/* --- export format picker --- */
.exp-formats { display: flex; gap: 10px; margin-bottom: 13px; }
.exp-fmt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 13px 10px 11px; border-radius: 12px; cursor: pointer; font: inherit;
  border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--dim);
  transition: all .18s ease;
}
.exp-fmt:hover { border-color: rgba(240,184,41,.5); color: var(--text); transform: translateY(-1px); }
.exp-fmt.sel { border-color: var(--gold); background: rgba(240,184,41,.1); color: var(--text); box-shadow: 0 0 16px rgba(240,184,41,.16); }
.ef-icon { font-size: 22px; }
.ef-name { font-size: 12.5px; font-weight: 800; letter-spacing: 1px; }
.ef-sub { font-size: 10px; opacity: .75; }

/* --- result buttons --- */
.result-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.result-buttons-row { display: flex; gap: 10px; }
.rbtn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line);
  background: rgba(46, 16, 16, 0.85); color: var(--text);
  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
  animation: rbtnIn .45s cubic-bezier(.2, 1.2, .4, 1) both;
}
.result-buttons-row .rbtn { flex: 1; animation-delay: .12s; padding: 15px 12px; gap: 8px; justify-content: center; }
.result-buttons-row .rbtn kbd { position: absolute; top: 5px; right: 5px; margin-left: 0; padding: 2px 5px; font-size: 9px; opacity: .8; }
.result-buttons-row .rbtn:has(kbd) { padding-right: 34px; }
@keyframes rbtnIn { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
.rbtn-icon { font-size: 20px; line-height: 1; transition: transform .35s ease; }
.rbtn-text { font-size: 16px; font-weight: 800; letter-spacing: 2px; }
.rbtn kbd {
  margin-left: auto; font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.32); color: rgba(255,255,255,.55);
}
.rbtn-primary {
  background: linear-gradient(135deg, #7a1f12, #4a120c 55%, #2e0b0b);
  border-color: rgba(255, 74, 58, 0.6);
  animation: rbtnIn .45s cubic-bezier(.2,1.2,.4,1) both, primaryGlow 2.6s .6s ease-in-out infinite;
}
@keyframes primaryGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 74, 58, 0.16); }
  50% { box-shadow: 0 0 34px rgba(255, 74, 58, 0.42); }
}
.rbtn-primary::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  animation: shine 3s ease-in-out infinite;
}
.rbtn-primary:hover { transform: translateY(-2px) scale(1.015); border-color: var(--accent); }
.rbtn-primary:hover .rbtn-icon { transform: rotate(-180deg); }
.rbtn-primary .rbtn-icon { color: var(--accent); font-weight: 900; font-size: 40px; }
.rbtn-rewatch { border-color: rgba(232, 138, 47, 0.45); }
.rbtn-rewatch .rbtn-icon { color: #d8a2f2; }
.rbtn-rewatch:hover { border-color: var(--purple); box-shadow: 0 10px 26px rgba(232, 138, 47, 0.28); transform: translateY(-2px); }
.rbtn-rewatch:hover .rbtn-icon { transform: scale(1.3); }
.rbtn-menu:hover { border-color: var(--danger); box-shadow: 0 10px 26px rgba(224, 74, 74, 0.2); transform: translateY(-2px); }
.rbtn-menu:hover .rbtn-icon { transform: rotate(90deg); }
.rbtn:disabled { opacity: .45; cursor: default; transform: none !important; box-shadow: none; animation: none; }
.rbtn:disabled::after { display: none; }

/* --- result summary --- */
.result-summary {
  margin: 0 auto 12px; width: 320px;
  background: rgba(18,6,6,.55); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 16px;
}
.rs-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); padding: 3px 0; font-size: 13px; color: var(--dim); }
.rs-row span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-row span:nth-child(2) { color: var(--accent); font-weight: 700; }
.rs-row span:nth-child(3) { color: var(--danger); font-weight: 700; }
.rs-row.rs-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 6px; }
.rs-row .rs-wide { grid-column: 2 / 4; color: var(--text) !important; font-weight: 700; }
#rating-line { font-size: 14px !important; letter-spacing: 1px !important; margin: 2px 0 18px !important; font-weight: 700 !important; color: var(--dim); }
#rating-line b.up { color: var(--green); }
#rating-line b.down { color: var(--danger); }

/* --- career strip --- */
.career {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.career-chip { text-align: center; padding: 8px 4px 7px; background: rgba(18,6,6,.5); border: 1px solid var(--line); border-radius: 10px; }
.career-chip .cc-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dim); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.career-chip b { display: block; font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; }
.career-chip .cc-sub { display: block; font-size: 10px; color: var(--dim); margin-top: 2px; }

/* --- replay --- */
#replay { z-index: 30; }
.replay-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px 16px; backdrop-filter: blur(16px);
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
  animation: fadeUp .3s ease both;
  position: relative;
}
.replay-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.replay-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--purple);
  border: 1px solid rgba(232, 138, 47,.5); border-radius: 20px; padding: 4px 12px;
  background: rgba(232, 138, 47,.1);
  animation: dotPulse 1.8s ease-in-out infinite;
}
#replay-title { font-size: 15px; font-weight: 700; letter-spacing: 1px; flex: 1; }
.rp-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(46,16,16,.85); color: var(--dim); cursor: pointer; font-size: 14px;
  transition: color .2s, border-color .2s;
}
.rp-close:hover { color: var(--text); border-color: var(--danger); }
.replay-boards { display: flex; gap: 18px; justify-content: center; }
.replay-side { text-align: center; }
.replay-name { font-size: 12px; font-weight: 800; letter-spacing: 2px; margin-bottom: 6px; }
.replay-name.you { color: var(--accent); }
.replay-name.opp { color: var(--danger); }
.replay-side canvas {
  background: rgba(9,9,20,.92); border: 2px solid var(--line); border-radius: 8px;
  max-width: 40vw; max-height: 58vh;
}
.replay-controls { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rp-btn {
  min-width: 38px; height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(46,16,16,.85); color: var(--text);
  font-size: 15px; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.rp-btn:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 74, 58,.15); }
#rp-seek { flex: 1; accent-color: var(--accent); cursor: pointer; }
#rp-time { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 86px; text-align: center; }
#replay-end {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 900; letter-spacing: 3px; color: var(--gold);
  text-shadow: 0 0 40px rgba(232,194,47,.6); background: rgba(14,5,5,.48); border-radius: 18px;
  pointer-events: none;
}
.result-box p.lose { color: var(--danger); }
#rematch-note { font-size: 13px !important; letter-spacing: 1px !important; color: var(--dim) !important; margin: 12px 0 0 !important; font-weight: 400 !important; }

/* ==================== toasts ==================== */
#toast-layer { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.toast {
  position: absolute; font-weight: 900; letter-spacing: 1px; white-space: nowrap;
  animation: toastUp 1.1s ease-out both;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
@keyframes toastUp {
  0% { transform: translateY(10px) scale(.7); opacity: 0; }
  15% { transform: translateY(0) scale(1.1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(-46px) scale(1); opacity: 0; }
}

/* scrollbars for the menu on short screens */
#screen-menu::-webkit-scrollbar { width: 8px; }
#screen-menu::-webkit-scrollbar-thumb { background: rgba(230,140,110,.25); border-radius: 4px; }

/* ==================== auth ==================== */
.auth-row { margin-bottom: 16px; }
.auth-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; text-align: center;
  color: #ff9a8a; max-width: 340px;
}
.mini-btn {
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 74, 58,.12); border: 1px solid var(--line);
  color: #ffb0a2; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  transition: all .18s;
}
.mini-btn:hover:not(:disabled) { border-color: var(--accent); background: rgba(255, 74, 58,.22); box-shadow: 0 0 14px rgba(255, 74, 58,.2); }
.mini-btn:disabled { opacity: .5; cursor: default; }
.mini-btn-primary {
  background: linear-gradient(160deg, rgba(240,184,41,.22), rgba(240,184,41,.08));
  border-color: rgba(240,184,41,.45); color: var(--gold);
}
.mini-btn-primary:hover:not(:disabled) { border-color: var(--gold); background: rgba(240,184,41,.28); box-shadow: 0 0 14px rgba(240,184,41,.25); }
.me-avatar {
  width: 46px; height: 46px; border-radius: 8px; flex: 0 0 auto;
  background: #2a0a0a center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: #ffd9a0;
  border: 2px solid rgba(240,184,41,.55);
  box-shadow: 0 0 14px rgba(240,184,41,.25);
  image-rendering: pixelated;
}
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-info b { font-size: 16px; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info span { font-size: 11.5px; color: var(--gold); letter-spacing: .5px; }
.me-info .me-country { color: var(--dim); font-size: 11px; }
.btn-wide { width: 100%; margin-top: 10px; }

/* ---- auth modal (sign in / register / profile) ---- */
#auth-modal { z-index: 14; }
.auth-box {
  width: min(400px, 94vw); max-height: 86vh; overflow: auto;
  background: linear-gradient(170deg, rgba(58,14,12,.97), rgba(30,8,8,.97));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(255,74,58,.08), inset 0 1px 0 rgba(255,200,170,.09);
  animation: lbIn .28s cubic-bezier(.2,1.4,.4,1) both;
}
#am-auth, #am-profile { display: flex; flex-direction: column; gap: 10px; }
#am-auth input, #am-profile input {
  width: 100%; padding: 12px 14px; box-sizing: border-box; border-radius: 10px;
  background: rgba(0,0,0,.32); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 14px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
#am-auth input:focus, #am-profile input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,184,41,.12); }
.am-tabs {
  display: flex; gap: 4px; padding: 4px; border-radius: 11px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line);
}
.am-tab {
  flex: 1; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent;
  color: var(--dim); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1.5px;
  transition: all .16s;
}
.am-tab:hover { color: var(--text); }
.am-tab.sel {
  background: linear-gradient(160deg, rgba(240,184,41,.22), rgba(240,184,41,.08));
  border-color: rgba(240,184,41,.45); color: var(--gold);
  box-shadow: 0 2px 12px rgba(240,184,41,.15);
}
#am-auth .auth-note { margin: -2px 0 0; max-width: none; }
.am-demo {
  margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; text-align: center;
  font-size: 11.5px; color: var(--dim); letter-spacing: .3px;
  border: 1px dashed rgba(240,184,41,.35); background: rgba(46,30,16,.5);
}
.am-demo b { color: var(--gold); }
.am-demo.hidden { display: none; }
#am-auth .auth-legal { margin: 0; font-size: 10.5px; color: var(--dim); text-align: center; line-height: 1.6; }
#am-auth .auth-legal a { color: var(--gold); }
.am-me {
  display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px;
  border-bottom: 1px dashed rgba(230,90,70,.18);
}
.net-online { color: var(--dim); }

/* ==================== leaderboard ==================== */
#leaderboard { z-index: 12; }
.lb-box {
  width: min(580px, 94vw); max-height: 86vh; overflow: auto;
  background: linear-gradient(170deg, rgba(58,14,12,.97), rgba(30,8,8,.97));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(255, 74, 58,.08), inset 0 1px 0 rgba(255,200,170,.09);
  animation: lbIn .28s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes lbIn {
  0% { transform: translateY(26px) scale(.96); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lb-badge {
  font-weight: 900; letter-spacing: 2.5px; font-size: 17px; color: var(--gold);
  text-shadow: 0 0 22px rgba(240,184,41,.4);
}
.lb-sub { flex: 1; font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.lb-table { width: 100%; border-collapse: collapse; }
.lb-table th {
  text-align: left; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dim); padding: 6px 8px; border-bottom: 1px solid var(--line);
}
.lb-table td {
  padding: 9px 8px; font-size: 14px; color: #f2dcc8;
  border-bottom: 1px solid rgba(230,90,70,.09); font-variant-numeric: tabular-nums;
}
.lb-table tr:last-child td { border-bottom: none; }
.lb-rank { width: 40px; font-weight: 900; color: #ffd9a0; }
.lb-rating { font-weight: 900; color: var(--gold); }
.lb-name { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name span:last-child { vertical-align: middle; }
.lb-av {
  width: 26px; height: 26px; border-radius: 6px; margin-right: 9px;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  background: #2a0a0a center / cover no-repeat; image-rendering: pixelated;
  font-size: 12px; font-weight: 900; color: #ffd9a0;
  border: 1.5px solid rgba(240,184,41,.4);
}
.lb-me td { background: rgba(240,184,41,.07); }
.lb-loading { text-align: center; color: var(--dim); padding: 20px 8px !important; }

/* ==================== lobby (landing page) ==================== */
#screen-lobby { display: block; height: 100%; overflow-y: auto; padding: 26px 16px 42px; }
.lobby-box {
  width: min(1100px, 100%); margin: 0 auto;
  animation: lbIn .3s cubic-bezier(.2,1.3,.4,1) both;
}
.lobby-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  flex-wrap: wrap; /* narrow windows: the action block drops under the logo instead of colliding */
  padding: 2px 6px 18px;
}
.lobby-hero { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.logo-hero { gap: 3px; justify-content: flex-start; }
.logo-hero .logo-letter { font-size: 36px; letter-spacing: 1px; animation: none; text-shadow: 0 0 16px currentColor; }
.logo-hero .logo-letter.space { width: 12px; }
.logo-hero .logo-com { font-size: 15px; margin-bottom: 2px; }
.lobby-tag { color: var(--dim); font-size: 13px; letter-spacing: .5px; white-space: nowrap; }
.lobby-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.lobby-count { color: var(--gold); font-size: 12px; letter-spacing: .5px; }
.lobby-actions { display: flex; gap: 8px; }
.lobby-main {
  display: grid; grid-template-columns: 1fr 340px; grid-template-rows: minmax(430px, 1fr) auto;
  gap: 16px; align-items: stretch;
  /* definite height = fr resolves against the viewport, never against chat content;
     on short screens the tracks overflow and #screen-lobby scrolls instead */
  height: calc(100vh - 213px); /* measured chrome: paddings 68 + head ≤92 + foot 27 + foot margin 26 */
}
.chat-panel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  /* stretch: the chat section ends flush with the side panel (username/password card) */
  height: auto; min-height: 430px;
  background: linear-gradient(170deg, rgba(52,12,12,.94), rgba(28,7,7,.96));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,170,.08);
  overflow: hidden;
}
.chat-log {
  flex: 1; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 0;
  font-size: 13.5px; line-height: 1.5;
}
/* sparse chat hugs the input instead of floating in a void (scrolls fine when full) */
.chat-log > :first-child { margin-top: auto; }
.cm { color: #f0dcc8; word-break: break-word; animation: cmIn .16s ease-out; display: flex; align-items: flex-start; gap: 7px; }
.cm-av {
  width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto; margin-top: 1px;
  background: #2a0a0a center / cover no-repeat; image-rendering: pixelated;
  border: 1px solid rgba(240,184,41,.35);
}
.cm-body { flex: 1; min-width: 0; }
@keyframes cmIn { from { opacity: 0; transform: translateY(3px); } }
.cm-who { color: var(--gold); font-weight: 700; }
.cm.sys { color: #d9a0a0; font-style: italic; }
.cm.sys .cm-who { color: var(--danger); font-weight: 800; }
.cm.priv { color: #e2b4f5; }
.cm.priv .cm-who { color: #c984e8; }
.chat-input-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--line);
}
.chat-to {
  background: rgba(0,0,0,.25); border: 1px solid var(--line); color: var(--gold);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap; transition: all .15s;
}
.chat-to:hover { border-color: var(--gold); }
.chat-to.priv { color: #c984e8; }
#chat-inp {
  flex: 1; min-width: 0; padding: 9px 12px;
  background: rgba(0,0,0,.32); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 13.5px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
#chat-inp:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240,184,41,.1); }
.roster-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.roster-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 6px; font-size: 11px; letter-spacing: 2px; color: var(--dim);
}
.side-tabs {
  display: flex; align-items: center; gap: 8px; padding: 0 6px;
  font-size: 11px; letter-spacing: 2px;
}
.side-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 3px 2px; font: inherit; letter-spacing: inherit;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.side-tab:hover { color: var(--text); }
.side-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.side-tab .battles-n {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 7px;
  background: var(--danger); color: #fff; font-size: 10px; letter-spacing: 0;
}
.side-tab .battles-n.hidden { display: none; }
.side-tabs .roster-sort { margin-left: auto; }
.battles {
  flex: 1 1 0; min-height: 180px; overflow-y: auto; padding: 6px;
  background: linear-gradient(170deg, rgba(52,12,12,.94), rgba(28,7,7,.96));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,170,.08);
}
.battles.hidden { display: none; }
.bt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background .12s;
}
.bt:hover { background: rgba(255,120,90,.09); border-color: rgba(255,120,90,.25); }
.bt-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--danger); box-shadow: 0 0 8px rgba(224,74,74,.9);
  animation: dotPulse 1.4s infinite;
}
.bt-names { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-name { font-weight: 800; }
.bt-r { color: var(--gold); font-size: 11px; font-weight: 700; }
.bt-vs { color: var(--dim); font-size: 11px; }
.bt-meta { flex: 0 0 auto; color: var(--dim); font-size: 11px; }
.bt-empty { padding: 18px 12px; color: var(--dim); font-size: 12px; text-align: center; }
/* live status dots on chat nicknames */
.cm-who.cs-free::before, .cm-who.cs-away::before, .cm-who.cs-playing::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px;
}
.cm-who.cs-free::before { background: #4ad05a; }
.cm-who.cs-away::before { background: #8a8a95; }
.cm-who.cs-playing::before { background: #e04a4a; box-shadow: 0 0 7px rgba(224,74,74,.8); animation: dotPulse 1.4s infinite; }
#hud-watch-names { font-size: 11px; color: var(--dim); font-weight: 600; }
.dot-demo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 2px; }
.dot-demo.dd-free { background: #4ad05a; }
.dot-demo.dd-away { background: #8a8a95; }
.dot-demo.dd-playing { background: #e04a4a; box-shadow: 0 0 7px rgba(224,74,74,.8); }
.roster-sort {
  background: none; border: 1px solid var(--line); color: var(--gold);
  border-radius: 7px; padding: 3px 9px; font: inherit; font-size: 11px; cursor: pointer;
  transition: all .15s;
}
.roster-sort:hover { border-color: var(--gold); }
.roster {
  flex: 1 1 0; min-height: 180px; overflow-y: auto; padding: 6px;
  background: linear-gradient(170deg, rgba(52,12,12,.94), rgba(28,7,7,.96));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,170,.08);
}
.pr {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background .12s;
}
.pr:hover { background: rgba(255,74,58,.08); }
.pr-icon { width: 13px; text-align: center; color: var(--dim); font-weight: 900; font-size: 12px; }
.pr-av {
  width: 24px; height: 24px; border-radius: 5px; flex: 0 0 auto;
  background: #2a0a0a center / cover no-repeat; image-rendering: pixelated;
  border: 1px solid rgba(240,184,41,.35);
}
.pr-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 800; letter-spacing: .4px; color: #f0dcc8;
}
.pr-rating { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- rating tiers: nickname colors by skill bracket ---- */
.rt-1 { color: #f0dcc8; }                                              /* rookie   <150  */
.rt-2 { color: #7ec8ff; text-shadow: 0 0 10px rgba(126,200,255,.25); } /* fighter  150+  */
.rt-3 { color: #d39bf2; text-shadow: 0 0 10px rgba(195,132,232,.3); }  /* veteran  300+  */
.rt-4 { color: #ffd24a; text-shadow: 0 0 12px rgba(240,184,41,.4); }   /* elite    500+  */
.rt-5 {                                                              /* legend   700+  */
  color: #ff6a4a; text-shadow: 0 0 6px rgba(255,90,58,.8), 0 0 18px rgba(255,106,74,.45);
  animation: legendGlow 2.2s ease-in-out infinite;
}
@keyframes legendGlow { 50% { text-shadow: 0 0 10px rgba(255,106,74,1), 0 0 26px rgba(255,150,60,.6); } }
.pr.me { border-color: rgba(240,184,41,.35); background: rgba(240,184,41,.06); }
.pr.inv-out {
  background: rgba(255, 122, 90, .14); border-color: rgba(255, 122, 90, .7);
  box-shadow: 0 0 18px rgba(255, 122, 90, .18);
  animation: invPulse 1.6s ease-in-out infinite;
}
.pr.inv-out .pr-icon { color: var(--danger); font-weight: 900; }
.pr.inv-out .pr-name { color: #ffb0a2; font-weight: 800; }
.pr.inv-out .pr-rating { font-size: 0; } /* swap the number for an INVITED tag */
.pr.inv-out .pr-rating::after {
  content: 'INVITED'; font-size: 9px; font-weight: 900; letter-spacing: 1px;
  color: #ffb0a2; border: 1px solid rgba(255, 122, 90, .55); border-radius: 6px;
  padding: 2px 6px; background: rgba(255, 122, 90, .1);
}
.pr.inv-in {
  background: rgba(240,184,41,.12); border-color: rgba(240,184,41,.5);
  animation: invPulse 1.4s ease-in-out infinite;
}
.pr.inv-in .pr-icon, .pr.inv-in .pr-name { color: var(--gold); font-weight: 800; }
@keyframes invPulse { 50% { background: rgba(240,184,41,.22); } }
.pr.st-playing { opacity: .55; cursor: pointer; }
.pr.st-playing .pr-icon { color: var(--danger); }
.pr.st-away { opacity: .5; }
.pr.st-away .pr-name { text-decoration: line-through; }
.roster-hint { padding: 0 6px; font-size: 10.5px; color: var(--dim); line-height: 1.55; }
/* invite status line (pending / declined / denied) sits under the roster */
.invite-status {
  margin: 2px 2px 4px; padding: 7px 10px; border-radius: 8px;
  font-size: 11.5px; line-height: 1.45; letter-spacing: .3px;
  border: 1px solid var(--line); background: rgba(46,16,16,.75);
  color: var(--gold); animation: cmIn .16s ease-out;
}
.invite-status .is-sub { color: var(--dim); font-size: 10px; }
.invite-status.pending { color: var(--gold); border-color: rgba(240,184,41,.4); }
.invite-status.declined { color: var(--danger); border-color: rgba(224,74,74,.45); }
.invite-status.denied { color: #e2b4f5; border-color: rgba(201,132,232,.4); }
.invite-status.hidden { display: none; }
/* out-of-band players: visible, but not invitable */
.pr.outband { opacity: .45; }
.pr.outband:hover { opacity: .75; }
.pr.outband .pr-icon { color: var(--danger); }

/* ---- hover player card (roster) ---- */
#player-card {
  position: fixed; z-index: 60; width: 252px;
  background: linear-gradient(165deg, rgba(58,14,14,.98), rgba(26,7,7,.99));
  border: 1px solid rgba(240,184,41,.4); border-radius: 13px;
  box-shadow: 0 20px 55px rgba(0,0,0,.6), 0 0 24px rgba(240,184,41,.08);
  padding: 13px 14px 12px;
  animation: pcIn .14s ease-out;
  pointer-events: none;
}
@keyframes pcIn { from { opacity: 0; transform: translateX(6px) scale(.97); } }
.pc-head { display: flex; gap: 11px; align-items: center; }
.pc-av {
  width: 52px; height: 52px; border-radius: 8px; flex: 0 0 auto;
  background: #2a0a0a center / cover no-repeat; image-rendering: pixelated;
  border: 2px solid rgba(240,184,41,.5);
  box-shadow: 0 0 12px rgba(240,184,41,.2);
}
.pc-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-name { font-size: 17px; font-weight: 900; letter-spacing: .4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-from { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-tags { display: flex; gap: 6px; margin-top: 2px; }
.pc-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--dim);
}
.pc-tag.t-tier { border-color: rgba(240,184,41,.5); color: var(--gold); }
.pc-tag.t-bot { border-color: rgba(126,200,255,.45); color: #7ec8ff; }
.pc-tag.t-playing { border-color: rgba(255,74,58,.5); color: #ff8a7a; }
.pc-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
  margin: 11px 0 0; padding: 9px 0 0; border-top: 1px solid rgba(230,90,70,.16);
}
.pc-stat { display: flex; flex-direction: column; gap: 1px; }
.pc-stat b { font-size: 14px; color: #ffe8c8; font-variant-numeric: tabular-nums; }
.pc-stat span { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); }
.pc-bio {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(230,90,70,.16);
  font-size: 11.5px; font-style: italic; color: #d9b8a8; line-height: 1.45;
  overflow-wrap: break-word;
}
.pc-since { margin-top: 7px; font-size: 9.5px; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }

/* ---- site footer (legal links) ---- */
.site-foot {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 18px; margin-top: 26px; padding-top: 14px;
  border-top: 1px solid rgba(230,90,70,.12);
  font-size: 11px; color: var(--dim); letter-spacing: .4px;
}
.site-foot a { color: #d9a868; text-decoration: none; transition: color .15s; }
.site-foot a:hover { color: var(--gold); text-decoration: underline; }
.site-foot .sf-note { opacity: .6; }
.auth-legal { font-size: 10px; color: var(--dim); line-height: 1.5; }
.auth-legal a { color: #d9a868; text-decoration: none; }
.auth-legal a:hover { color: var(--gold); text-decoration: underline; }

/* ==================== lobby header auth + guest strip ==================== */
.auth-head { display: inline-flex; gap: 8px; align-items: center; }
.me-chip {
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 5px;
  background: linear-gradient(160deg, rgba(240,184,41,.14), rgba(0,0,0,.3));
  border: 1px solid rgba(240,184,41,.4); border-radius: 11px; cursor: pointer;
  color: var(--text); font: inherit; transition: all .18s;
}
.me-chip:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(240,184,41,.2); }
.me-chip .me-avatar { width: 34px; height: 34px; border-radius: 7px; border-width: 1px; font-size: 14px; }
.me-chip-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.me-chip-info b { font-size: 13.5px; letter-spacing: .4px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip-info span { font-size: 10px; color: var(--gold); letter-spacing: .3px; white-space: nowrap; }
.me-chip-info .me-country { color: var(--dim); font-size: 9.5px; }

/* account dropdown */
.me-menu { position: relative; display: inline-block; }
.me-caret { font-size: 10px; color: var(--gold); opacity: .8; margin-left: 1px; transition: transform .18s ease; }
.me-chip.open .me-caret { transform: rotate(180deg); }
.me-chip.open { border-color: var(--gold); box-shadow: 0 0 16px rgba(240,184,41,.25); }
.me-dropdown {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 3px; min-width: 168px;
  padding: 6px; border-radius: 12px;
  background: var(--panel); border: 1px solid rgba(240,184,41,.35);
  box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 22px rgba(240,184,41,.08);
  backdrop-filter: blur(12px);
  animation: meDrop .16s ease both;
}
@keyframes meDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.me-dropdown::before {
  content: ''; position: absolute; top: -5px; right: 22px; width: 10px; height: 10px;
  background: var(--panel); border-left: 1px solid rgba(240,184,41,.35); border-top: 1px solid rgba(240,184,41,.35);
  transform: rotate(45deg);
}
.me-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  cursor: pointer; text-align: left; transition: all .15s;
}
.me-item:hover { background: rgba(240,184,41,.1); border-color: rgba(240,184,41,.3); }
.me-item-icon { width: 16px; text-align: center; font-size: 13px; color: var(--gold); }
.me-item-danger { color: #ffb0a2; }
.me-item-danger .me-item-icon { color: var(--danger); }
.me-item-danger:hover { background: rgba(255,90,74,.1); border-color: rgba(255,90,74,.35); }

.guest-strip {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 14px;
  background: linear-gradient(170deg, rgba(52,12,12,.94), rgba(28,7,7,.96));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,200,170,.08);
}
.guest-row { display: flex; align-items: flex-end; gap: 12px; flex: 0 0 auto; }
.guest-row .field { margin: 0; width: 190px; }
.guest-row .field input { padding: 9px 11px; width: 100%; }
.guest-row .btn { padding: 8px 18px 7px; white-space: nowrap; }
.guest-row .btn-label { font-size: 14px; }
.guest-row .btn-sub { margin-top: 1px; }
.gs-hint { margin: 0; font-size: 11px; color: var(--dim); letter-spacing: .4px; }
.guest-strip .net-status { margin: 0 0 0 auto; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* logged-in: guest strip hidden — drop the dangling second-row gap too */
.lobby-main.no-strip { row-gap: 0; }

/* career chips as a strip under the chat (guest view) */
.career-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--line); margin: 0;
  flex: 0 0 auto;
}
.career-strip.hidden { display: none; }
.career-strip .career-chip { padding: 6px 10px; }
.career-strip .career-chip b { font-size: 16px; }
@media (max-width: 760px) {
  .career-strip { grid-template-columns: 1fr 1fr; }
}

/* short viewports (laptops): compact the lobby so it fits one screen —
   the screen itself still scrolls if even this doesn't fit */
@media (max-height: 840px) and (min-width: 761px) {
  #screen-lobby { padding: 14px 16px 26px; }
  .lobby-head { padding-bottom: 10px; }
  .logo-hero .logo-letter { font-size: 30px; }
  .lobby-tag { font-size: 12px; }
  /* tracks may shrink to fit the viewport — content must never spill over the footer */
  .lobby-main { height: calc(100vh - 157px); grid-template-rows: minmax(0, 1fr) auto; } /* compact: pads 40 + head 78 + foot 23 + margin 16 */
  .chat-panel { min-height: 0; }
  .chat-log { min-height: 90px; }
  .roster { min-height: 110px; }
  .career-strip { padding: 6px 12px; }
  .guest-strip { padding: 8px 12px; }
  .site-foot { margin-top: 16px; padding-top: 10px; }
}

/* narrow desktops / tablets in landscape: trim the guest strip so the
   connection status never overflows the card */
@media (max-width: 1020px) and (min-width: 761px) {
  .gs-hint { display: none; }
}

/* rules overlay cards */
.info-box { width: min(760px, 94vw); }
.info-box .info-cards { margin-top: 0; }
.info-box .info-card { animation: none; } /* overlay opens must show content instantly — the fadeUp delay is a landing-page effect */

/* ---- offline banner (lobby, WS unreachable) — slim one-line strip ---- */
.offline-banner {
  margin: 8px 12px 0; padding: 7px 12px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: linear-gradient(180deg, rgba(240,184,41,.10), rgba(122,31,18,.20));
  border: 1px solid rgba(240,184,41,.45); border-radius: 9px;
  font-size: 12px; color: rgba(255,226,200,.85);
}
.offline-banner .ob-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: #f0b829; box-shadow: 0 0 8px #f0b829;
  animation: dotPulse 1.6s ease-in-out infinite;
}
.offline-banner .ob-line { flex: 1; min-width: 200px; }
.offline-banner .ob-line b { color: #ffd24a; letter-spacing: .06em; }
.offline-banner .ob-why, .offline-banner .ob-retry {
  border: 1px solid rgba(240,184,41,.45); background: rgba(0,0,0,.25);
  color: #ffd24a; border-radius: 7px; padding: 3px 10px;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.offline-banner .ob-why:hover, .offline-banner .ob-retry:hover { border-color: #f0b829; background: rgba(240,184,41,.12); }
.offline-banner .ob-more {
  flex: 0 0 100%; padding-top: 6px;
  font-size: 11.5px; line-height: 1.5; color: rgba(255,226,200,.7);
}
.offline-banner .ob-more code {
  background: rgba(0,0,0,.4); border: 1px solid rgba(240,184,41,.3);
  border-radius: 4px; padding: 0 5px; color: #ffd24a; font-size: 11px;
}

/* ---- export overlay ---- */
.export-box { width: min(560px, 94vw); }
.export-box .exp-text {
  font-size: 13px; color: rgba(255,226,200,.8); line-height: 1.5; margin-bottom: 14px;
}
.exp-speeds { display: flex; gap: 10px; margin-bottom: 12px; }
.exp-speeds .mini-btn { flex: 1; padding: 12px 0; font-size: 14px; font-weight: 800; }
#exp-duration { font-size: 12px; color: rgba(255,226,200,.55); text-align: center; }
.exp-bar {
  height: 10px; border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,.09); border: 1px solid rgba(240,184,41,.25);
  margin-bottom: 10px;
}
#exp-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e04a4a, #f0b829);
  transition: width .15s linear;
}
#exp-status { font-size: 12px; color: rgba(255,226,200,.7); text-align: center; margin-bottom: 12px; }
#exp-video {
  width: 100%; max-height: 52vh; border-radius: 10px;
  border: 1px solid rgba(240,184,41,.35); background: #000; margin-bottom: 12px;
}
.exp-actions { display: flex; gap: 10px; }
.exp-actions .mini-btn { flex: 1; text-align: center; text-decoration: none; }

/* share button accent on result screen */
.rbtn-share {
  background: linear-gradient(180deg, #7a1f12, #521208);
  border-color: rgba(240,184,41,.65); color: #ffd24a;
}
.rbtn-share:hover { box-shadow: 0 0 18px rgba(240,184,41,.35); transform: translateY(-1px); }

/* ==================== mobile landing (≤760px) ==================== */
@media (max-width: 760px) {
  #screen-lobby { padding: 14px 10px 30px; }
  .lobby-head { flex-direction: column; gap: 9px; text-align: center; padding-bottom: 14px; }
  .logo-hero { justify-content: center; }
  .logo-hero .logo-letter { font-size: 26px; }
  .logo-hero .logo-letter.space { width: 8px; }
  .logo-hero .logo-com { font-size: 11px; }
  .lobby-tag { font-size: 11.5px; }
  .lobby-side { align-items: center; }
  .lobby-actions { flex-wrap: wrap; justify-content: center; }
  .lobby-actions .mini-btn { padding: 9px 12px; }
  .lobby-main { display: flex; flex-direction: column; gap: 14px; height: auto; }
  .lobby-main.no-strip { row-gap: 14px; } /* flex column still needs its rhythm */
  .chat-panel { height: auto; min-height: 0; }
  .chat-log { height: 36vh; height: 36dvh; min-height: 210px; flex: 0 0 auto; }
  .chat-input-row { padding: 8px; }
  #chat-inp { font-size: 16px; padding: 11px 12px; } /* ≥16px stops iOS auto-zoom */
  .chat-to { padding: 10px; }
  .roster { height: 240px; flex: 0 0 auto; }
  .guest-strip { flex-direction: column; align-items: stretch; gap: 10px; order: -1; } /* guest play first on phones */
  .guest-row { flex-direction: column; align-items: stretch; }
  .guest-row .field { width: 100%; }
  .guest-row .btn { width: 100%; padding-top: 12px; padding-bottom: 12px; }
  .guest-strip .net-status { margin: 0; }
  .auth-head { flex-wrap: wrap; justify-content: center; }
  #am-auth input, #am-profile input { font-size: 16px; } /* ≥16px stops iOS auto-zoom */
  .offline-banner { margin: 8px 8px 0; }
  .offline-banner .ob-line { min-width: 140px; font-size: 11.5px; }
  .career-strip { grid-template-columns: 1fr 1fr; }
}

/* ==================== spectate overlay ==================== */
#watch {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 14, 0.92); backdrop-filter: blur(6px);
  padding: 10px;
}
#watch.hidden { display: none; }
#watch-box {
  background: #14141d; border: 1px solid #2a2a3a; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  padding: 12px 20px 14px; width: 98vw; max-width: 1200px; height: 96vh;
  display: flex; flex-direction: column;
}
#watch-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#watch-live {
  color: #ff4a3a; font-weight: 800; font-size: 12px; letter-spacing: 1px;
  animation: watchPulse 1.6s ease-in-out infinite;
}
@keyframes watchPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
#watch-title { flex: 1; font-size: 13px; color: #b8b8cc; font-weight: 600; }
#watch-leave {
  background: #2a2a3a; color: #e8e8f2; border: 1px solid #3a3a4e; border-radius: 8px;
  padding: 7px 14px; font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
}
#watch-leave:hover { background: #3a3a4e; }
#watch-arena { display: flex; gap: 18px; align-items: stretch; justify-content: center; flex: 1; min-height: 0; }
.watch-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.watch-name {
  font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #e8e8f2;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.watch-side canvas {
  background: #0c0c13; border: 1px solid #26263a; border-radius: 8px;
  flex: 1 1 auto; min-height: 0; height: auto; width: auto; max-width: 42vw;
  aspect-ratio: 1 / 2;
  transition: box-shadow .25s;
}
.watch-side canvas.hit { box-shadow: 0 0 26px rgba(224,74,74,.55), inset 0 0 24px rgba(224,74,74,.25); }
.watch-stats { font-size: 10.5px; color: #8a8aa0; text-align: center; }
.watch-stats b { color: #d8d8e8; }
#watch-mid { display: flex; align-items: center; justify-content: center; min-width: 74px; }
#watch-result-line {
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; color: #f0b829;
  text-align: center; line-height: 1.5; padding: 0 2px;
}
#hud-watch {
  font-size: 12px; color: #b8b8cc; margin-top: 2px; letter-spacing: .5px;
  visibility: hidden; height: 16px; /* space reserved — spectators arriving can't shift the boards */
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
#hud-watch.on { visibility: visible; }
#hud-watch b { color: #f0b829; }
.pr.watchable { cursor: pointer; }
.pr.watchable:hover .pr-name { color: #f0b829; text-decoration: underline dotted; }
.pr.watchable .pr-icon { color: #f0b829; }

@media (max-width: 760px) {
  #watch-arena { gap: 8px; }
  .watch-name { max-width: 34vw; }
  #watch-mid { min-width: 46px; }
}

/* --- match analysis overlay --- */
#analysis { z-index: 32; overflow-y: auto; }
.an-box {
  width: min(920px, 96vw); max-height: 92vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 26px 18px; text-align: center; backdrop-filter: blur(16px);
  animation: rbtnIn .3s ease both;
}
.an-box > h2 { font-size: 22px; font-weight: 900; letter-spacing: 4px; color: var(--gold); text-shadow: 0 0 26px rgba(240,184,41,.35); }
#an-sub { color: var(--dim); font-size: 12.5px; letter-spacing: 1px; margin: 6px 0 16px; text-transform: uppercase; }
.an-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.an-card { background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px 12px; }
.an-letter { font-size: 38px; font-weight: 900; line-height: 1; }
.an-cat { font-size: 11px; letter-spacing: 2px; color: var(--dim); margin-top: 6px; font-weight: 800; }
.an-stat { font-size: 12px; margin-top: 5px; font-weight: 700; }
.an-tip { font-size: 10.5px; color: var(--dim); margin-top: 6px; line-height: 1.45; min-height: 30px; }
.an-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.an-chip { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; letter-spacing: .5px; }
.an-chip b { color: var(--text); }
.an-chart-wrap { margin-top: 12px; }
#an-chart { width: 100%; height: 150px; background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; display: block; }
.an-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 10.5px; color: var(--dim); margin-top: 7px; letter-spacing: .5px; min-height: 14px; }
.an-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.an-lh { background: #e8c22f; }
.an-lr { background: #78a0e6; }
.an-ls { background: #f0b829; }
.an-lm { background: #ff5a4a; border-radius: 50%; }
.an-lo { background: #31b4dc; }
.an-lmd { background: #e08a3a; border-radius: 50%; }
.an-lmg { background: #b06ae0; border-radius: 50%; }
.an-lms { background: #78a0e6; border-radius: 50%; }

/* chart view toggle */
.an-views { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.an-vb {
  padding: 5px 14px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 10px; font-weight: 900; letter-spacing: 1.5px;
  background: rgba(0,0,0,.25); color: var(--dim); border: 1px solid var(--line);
  transition: all .15s;
}
.an-vb:hover { color: var(--text); border-color: rgba(240,184,41,.5); }
.an-vb.on { background: rgba(240,184,41,.16); color: var(--gold); border-color: rgba(240,184,41,.65); box-shadow: 0 0 12px rgba(240,184,41,.15); }
.an-chip-opp { border-color: rgba(49,180,220,.4); }
.an-chip-opp b { color: #7fd4ec; }
.an-chip-sep { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: #7fd4ec; align-self: center; text-transform: uppercase; }
.an-moments { margin-top: 14px; }
.an-moments h3 { font-size: 12px; letter-spacing: 2.5px; color: var(--dim); margin-bottom: 9px; }
.an-mom { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); font: inherit; cursor: pointer; margin-bottom: 8px; transition: all .15s ease; }
.an-mom:hover { border-color: rgba(255,90,74,.6); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(224,74,74,.15); }
.an-mom-ico { font-size: 18px; width: 26px; text-align: center; flex: 0 0 auto; }
.an-mom-body { flex: 1; min-width: 0; }
.an-mom-body b { display: block; font-size: 13.5px; letter-spacing: .5px; }
.an-mom-body i { display: block; font-style: normal; font-size: 11.5px; color: var(--dim); margin-top: 3px; line-height: 1.45; }
.an-mom-t { font-size: 12px; color: var(--gold); font-weight: 800; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.an-clean { color: var(--dim); font-size: 13px; padding: 10px 0 4px; }
.an-close { margin: 14px auto 0; width: 220px; justify-content: center; }
.an-close kbd { margin-left: 6px; }
.rbtn-analyze:hover { border-color: rgba(240,184,41,.55); box-shadow: 0 10px 26px rgba(240,184,41,.18); transform: translateY(-2px); }
@media (max-width: 720px) {
  .an-grades { grid-template-columns: repeat(2, 1fr); }
  .an-letter { font-size: 30px; }
}
@media (max-width: 720px) {
  .result-buttons-row { flex-wrap: wrap; }
  .result-buttons-row .rbtn { flex: 1 1 40%; padding: 12px 10px; gap: 8px; }
  .result-buttons-row .rbtn-text { font-size: 13px; letter-spacing: 1px; }
}