@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --bg: #071610;
  --panel: #0d2018;
  --panel-raised: #11271e;
  --panel-line: #1f3a2d;
  --text: #f2f5ed;
  --muted: #a3b2a6;
  --subtle: #718477;
  --green: #c5f277;
  --green-dark: #a6de4e;
  --orange: #ffc472;
  --red: #ff8c7f;
  --cable-left: #8aaba4;
  --cable-right: #b8a987;
  --wire-color: #aab7aa;
  --mono: "DM Mono", "Courier New", monospace;
  --sans: "DM Sans", Arial, sans-serif;
  --display: "Space Grotesk", Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 78% 10%, rgba(41, 83, 55, .21), transparent 34rem),
    radial-gradient(ellipse at 0% 85%, rgba(37, 70, 47, .16), transparent 35rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
button, input { font: inherit; }
button { color: inherit; }
.shell { width: min(1160px, calc(100% - 56px)); margin: 0 auto; }
.topbar {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(183, 207, 183, .12);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
  font: 600 12px var(--mono);
  letter-spacing: .065em;
}
.brand b { color: var(--green); font-weight: 500; }
.brand-ball {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid #456344;
  border-radius: 50%;
  font-size: 17px;
}
.site-nav { display: flex; align-items: center; gap: 5px; }
.site-nav-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
.site-nav-button:hover { color: var(--text); }
.site-nav-button.active { border-color: #3a5540; background: #14271a; color: var(--green); }
.edition, .eyebrow, .selection-count, .progress-label, .lobby-footer, .score-footer, .round-points {
  font: 10px var(--mono);
  letter-spacing: .12em;
}
.edition { display: flex; gap: 9px; align-items: center; color: var(--muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px #baf17488; }
.lobby { padding: 79px 0 35px; }
.hero-copy { max-width: 640px; margin-bottom: 40px; }
.eyebrow { margin: 0; color: var(--green); }
h1, h2, p { margin-top: 0; }
.hero-copy h1 {
  margin: 14px 0 15px;
  font: 600 clamp(44px, 6vw, 70px)/.98 var(--display);
  letter-spacing: -.06em;
}
.hero-copy h1 span { color: var(--green); }
.intro { max-width: 470px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.game-mode-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.game-mode-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 79px;
  padding: 12px 15px;
  border: 1px solid #294535;
  border-radius: 6px;
  background: rgba(10, 27, 18, .8);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.game-mode-option:hover { border-color: #657f4a; }
.game-mode-option.active { border-color: var(--green); background: #17291a; box-shadow: inset 0 0 0 1px #c5f27725; }
.mode-option-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #385440; border-radius: 4px; color: var(--green); font-size: 20px; }
.cable-option-icon { color: var(--wire-color); }
.game-mode-option b { display: block; margin-bottom: 4px; font: 600 14px var(--display); }
.game-mode-option small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.mode-option-check { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #526653; border-radius: 50%; color: transparent; font-size: 11px; }
.game-mode-option.active .mode-option-check { border-color: var(--green); background: var(--green); color: #10200c; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mode-card {
  padding: 25px 28px 26px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: linear-gradient(140deg, rgba(17, 39, 30, .94), rgba(11, 28, 20, .96));
}
.mode-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
  border: 1px solid #3c5a41;
  border-radius: 5px;
  color: var(--green);
  font-size: 21px;
}
.mode-card h2 { margin: 8px 0 8px; font: 600 24px var(--display); letter-spacing: -.035em; }
.mode-card > p:not(.eyebrow):not(.connection-message) { min-height: 44px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.field-label { display: block; margin: 13px 0 6px; color: #bfccc0; font-size: 11px; font-weight: 600; }
input {
  width: 100%;
  height: 41px;
  padding: 0 12px;
  border: 1px solid #294535;
  border-radius: 4px;
  outline: none;
  background: #091a12;
  color: var(--text);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--green); box-shadow: 0 0 0 2px #c5f27720; }
input::placeholder { color: #6b7d70; }
.optional { color: var(--subtle); font-weight: 400; }
.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: transform .15s, background .15s, border-color .15s, opacity .15s;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { cursor: not-allowed; opacity: .42; }
.button-primary { background: var(--green); color: #11210d; }
.button-primary:hover:not(:disabled) { background: #d5f99c; }
.local-card > .button { width: 100%; margin-top: 19px; }
.online-actions { display: flex; gap: 9px; margin-top: 18px; }
.online-actions .button:first-child { flex: 1; }
.button-secondary { border-color: #52644e; background: transparent; color: var(--text); }
.button-secondary:hover:not(:disabled) { border-color: var(--green); }
.connection-message { min-height: 14px; margin: 10px 0 -10px; color: var(--orange); font-size: 11px; }
.lobby-footer {
  display: flex;
  justify-content: space-between;
  padding: 17px 0 24px;
  border-top: 1px solid rgba(183, 207, 183, .12);
  color: var(--subtle);
  font-size: 9px;
}
.hidden { display: none !important; }

.game { padding: 43px 0 20px; }
.game-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.game-heading h1 { position: relative; width: fit-content; margin: 8px 0 0; font: 600 clamp(27px, 4vw, 39px)/1.1 var(--display); letter-spacing: -.04em; text-shadow: 0 0 18px #c5f27755; animation: round-title-light 8s ease-in-out infinite; }
.game-heading h1::after { display: block; width: 46%; min-width: 88px; height: 2px; margin-top: 7px; border-radius: 2px; background: linear-gradient(90deg, var(--green), #65d9d0, var(--orange), transparent); background-size: 200% 100%; box-shadow: 0 0 9px #65d9d077; animation: round-title-line 6s ease-in-out infinite; content: ""; }
.game-heading-right { display: flex; align-items: center; gap: 16px; }
.text-button { padding: 7px 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }
.text-button:hover { color: var(--text); }
.room-badge { padding: 8px 11px; border: 1px solid #476046; border-radius: 4px; color: var(--green); font: 10px var(--mono); letter-spacing: .08em; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 19px; }
.board-panel, .score-panel { border: 1px solid var(--panel-line); border-radius: 7px; background: rgba(13, 32, 24, .91); }
.board-panel { min-height: 466px; padding: 20px; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 24px; margin-bottom: 15px; }
.turn-message { margin: 0; color: var(--muted); font-size: 12px; }
.selection-count { color: var(--subtle); font-size: 9px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.group-instruction { margin: -4px 0 14px; color: var(--muted); font-size: 11px; }
.solved-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 16px;
  padding: 13px 15px;
  border: 1px solid #607d3f;
  border-radius: 6px;
  background: linear-gradient(115deg, #1a3020, #10251a);
  animation: group-reveal .35s ease-out both;
}
.solved-group-title { margin: 0; color: var(--green); font: 600 14px var(--display); }
.solved-group-explanation { grid-column: 1; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.solved-group-items { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.solved-group-item { padding: 5px 8px; border: 1px solid #36513a; border-radius: 999px; background: #0c1d14; color: #e0e9dc; font-size: 10px; }
@keyframes group-reveal { from { opacity: 0; transform: translateY(7px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes group-tile-light {
  0%, 100% { border-color: #2a4837; box-shadow: inset 0 0 0 1px #8aaba408; }
  33% { border-color: #3b594a; box-shadow: inset 0 0 0 1px #8aaba41c; }
  66% { border-color: #415548; box-shadow: inset 0 0 0 1px #b8a98718; }
}
.tile {
  position: relative;
  min-height: 93px;
  padding: 10px 8px;
  overflow: hidden;
  border: 1px solid #2a4837;
  border-radius: 5px;
  background: linear-gradient(150deg, #152d21, #102319);
  color: #e9efe6;
  cursor: pointer;
  font: 600 13px/1.3 var(--display);
  transition: background .17s, border-color .17s, transform .17s, color .17s;
}
.tile:not(:disabled):not(.selected):not(.hinted) { animation: group-tile-light 8s ease-in-out infinite; }
.tile:nth-child(4n + 2) { animation-delay: -2s; }
.tile:nth-child(4n + 3) { animation-delay: -4s; }
.tile:nth-child(4n) { animation-delay: -6s; }
.tile:hover:not(:disabled) { transform: translateY(-2px); border-color: #75944f; background: #1a3626; }
.tile.selected { border-color: var(--green); background: #31451f; color: #e6f9ca; box-shadow: inset 0 0 0 1px #c5f27745; }
.tile.hinted { border-color: var(--orange); box-shadow: inset 0 0 0 1px #ffc47255, 0 0 16px #ffc47216; }
.tile.resolved { border-color: #416643; background: #193222; color: #d3e8c4; cursor: default; }
.tile:disabled:not(.resolved) { cursor: not-allowed; }
.tile-check { position: absolute; top: 6px; right: 7px; color: var(--green); font: 12px var(--mono); }
.round-message { min-height: 31px; padding-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.message-success { color: var(--green); }
.message-error { color: var(--red); animation: shake .3s linear; }
.answer-review { margin-top: 7px; padding: 13px 15px; border: 1px solid #38543a; border-radius: 5px; background: #0a1b13; }
.answer-review h3 { margin: 0 0 9px; color: var(--green); font: 600 13px var(--display); }
.answer-review h3:not(:first-child) { margin-top: 14px; }
.answer-review-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.answer-review-list li { display: grid; gap: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.answer-review-list strong { color: var(--text); font-size: 11px; }
.answer-review-list .review-correct { color: var(--green); }
.answer-review-list .review-incorrect { color: var(--red); }
.hint-review-list { padding-bottom: 10px; border-bottom: 1px solid #294132; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.board.shake { animation: shake .32s linear; }
.points-celebration {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(560px, calc(100vw - 36px));
  min-height: 144px;
  align-items: center;
  justify-content: center;
  gap: 19px;
  padding: 25px 35px;
  border: 2px solid var(--green);
  border-radius: 14px;
  background: linear-gradient(140deg, #223a1d, #10251a 75%);
  box-shadow: 0 0 0 100vmax #020b08a6, 0 0 75px #c5f27755, inset 0 0 28px #c5f27714;
  color: var(--text);
  text-align: center;
  pointer-events: none;
}
.points-celebration.celebrating { animation: points-celebration 2.6s cubic-bezier(.2,.8,.25,1) both; }
.celebration-ball { color: var(--green); font-size: 50px; filter: drop-shadow(0 0 14px #c5f27780); }
.points-celebration p { margin: 0; color: var(--green); font: 700 clamp(25px, 5vw, 42px)/1.1 var(--display); letter-spacing: -.04em; text-shadow: 0 0 24px #c5f27740; }
@keyframes points-celebration {
  0% { opacity: 0; transform: translate(-50%, -38%) scale(.55) rotate(-3deg); }
  13% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
  21%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(.82) rotate(2deg); }
}
.cable-board { position: relative; padding: 0 1px 3px; }
.premise-card { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding: 13px 15px; border: 1px solid #38543a; border-radius: 5px; background: linear-gradient(105deg, #192c1b, #10251a); }
.premise-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid #587447; border-radius: 50%; color: var(--green); font: 20px var(--mono); }
.premise-card .eyebrow { font-size: 8px; }
.premise-card p { margin: 3px 0 0; color: var(--text); font: 500 13px/1.35 var(--display); }
.premise-copy { min-width: 0; }
.cable-instruction { margin: 0 0 11px; color: var(--muted); font-size: 10px; }
.cable-area { position: relative; min-height: 295px; isolation: isolate; }
.cable-wires { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable-line { fill: none; stroke: var(--wire-color); stroke-width: 4; stroke-linecap: round; opacity: .9; }
.cable-line-auto-connected { stroke: var(--cable-right); stroke-width: 5; opacity: .92; filter: drop-shadow(0 0 3px #b8a9874d); }
.cable-line-correct { stroke: var(--green); stroke-width: 6; opacity: 1; filter: drop-shadow(0 0 4px #c5f27770); }
.cable-line-incorrect { stroke: var(--red); stroke-width: 6; opacity: 1; filter: drop-shadow(0 0 4px #ff8c7f70); }
.cable-line-preview { stroke-dasharray: 7 7; opacity: .7; }
.cable-columns { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 13vw, 112px); }
.cable-column { min-width: 0; }
.cable-column-label { display: block; margin: 1px 0 8px; color: var(--cable-side-color); font: 9px var(--mono); letter-spacing: .13em; animation: cable-light-cycle 6s ease-in-out infinite; }
.cable-column-label[data-side="left"] { --cable-side-color: var(--cable-left); }
.cable-column-label[data-side="right"] { --cable-side-color: var(--cable-right); animation-delay: -3s; }
.cable-nodes { display: grid; gap: 11px; }
.wire-node {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 53px;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid #2a4837;
  border-radius: 5px;
  background: linear-gradient(145deg, #152d21, #102319);
  color: #e9efe6;
  cursor: crosshair;
  font: 600 12px/1.3 var(--display);
  text-align: left;
  touch-action: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.wire-node:hover:not(:disabled) { border-color: #c0cbc1; background: #1a3626; }
.wire-node:disabled { cursor: not-allowed; opacity: .65; }
.wire-node.wire-connected { border-color: var(--wire-color); box-shadow: inset 0 0 0 1px #aab7aa55; }
.wire-node.wire-selected { border-color: var(--green); box-shadow: 0 0 0 2px #c5f27740; }
.wire-node.wire-auto-connected, .wire-node.wire-auto-connected:disabled { border-color: #8d8064; background: linear-gradient(145deg, #312c22, #25251d); box-shadow: inset 0 0 0 1px #b8a98744, 0 0 9px #b8a98722; opacity: 1; }
.wire-node.wire-correct { border-color: var(--green); background: #1d3824; box-shadow: inset 0 0 0 1px #c5f27755; }
.wire-node.wire-incorrect { border-color: var(--red); background: #38221e; box-shadow: inset 0 0 0 1px #ff8c7f50; }
.wire-node-label { position: relative; z-index: 3; }
.wire-endpoint { position: absolute; z-index: 3; top: 50%; width: 12px; height: 12px; border: 2px solid #79917c; border-radius: 50%; background: #0c1d14; transform: translateY(-50%); }
.wire-node[data-side="left"] .wire-endpoint { color: var(--cable-left); border-color: var(--cable-left); animation: cable-led-cycle 6s ease-in-out infinite; }
.wire-node[data-side="right"] .wire-endpoint { color: var(--cable-right); border-color: var(--cable-right); animation: cable-led-cycle 6s ease-in-out -3s infinite; }
.endpoint-right { right: -7px; }
.endpoint-left { left: -7px; }
.wire-connected .wire-endpoint { border-color: var(--wire-color); background: var(--wire-color); }
.wire-auto-connected .wire-endpoint { border-color: var(--cable-right); background: var(--cable-right); box-shadow: 0 0 6px #b8a98780; animation: none; }
.wire-correct .wire-endpoint { border-color: var(--green); background: var(--green); box-shadow: 0 0 8px #c5f27790; }
.wire-incorrect .wire-endpoint { border-color: var(--red); background: var(--red); box-shadow: 0 0 8px #ff8c7f90; }
.wire-selected .wire-endpoint { border-color: var(--green); box-shadow: 0 0 9px var(--green); }
@keyframes cable-light-cycle {
  0%, 100% { filter: hue-rotate(0deg); text-shadow: 0 0 5px currentColor; }
  50% { filter: hue-rotate(42deg); text-shadow: 0 0 10px currentColor; }
}
@keyframes cable-led-cycle {
  0%, 100% { box-shadow: 0 0 3px currentColor; }
  50% { box-shadow: 0 0 10px currentColor; }
}
@keyframes round-title-light {
  0%, 100% { text-shadow: 0 0 14px #c5f27755; }
  33% { text-shadow: 0 0 18px #65d9d077; }
  66% { text-shadow: 0 0 18px #ffc47266; }
}
@keyframes round-title-line {
  0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  50% { background-position: 100% 50%; filter: hue-rotate(22deg); }
}
.cable-area.shake { animation: shake .32s linear; }
.board-actions { display: flex; align-items: center; gap: 11px; margin-top: 8px; }
.button-hint { flex: 0 0 auto; border-color: #67573a; background: #292517; color: var(--orange); }
.button-hint:hover:not(:disabled) { border-color: var(--orange); }
.hint-note { flex: 1; margin: 0; color: var(--subtle); font-size: 10px; line-height: 1.45; }
.board-actions .button-primary { min-width: 156px; }
.score-panel { padding: 19px 18px 15px; }
.score-header { display: flex; align-items: flex-start; justify-content: space-between; }
.score-header h2 { margin: 6px 0 0; font: 600 20px var(--display); }
.progress-label { padding-top: 4px; color: var(--subtle); font-size: 9px; }
.score-list { display: grid; gap: 8px; margin-top: 18px; }
.score-player { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; min-height: 50px; padding: 0 10px; border: 1px solid #243d2d; border-radius: 4px; background: #0a1b13; }
.score-player.active-player { border-color: #6b8846; background: #182b19; }
.player-mark { color: var(--subtle); font: 10px var(--mono); }
.player-name { overflow: hidden; color: #dce5da; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.player-score { color: var(--green); font: 600 20px var(--display); }
.online-presence { display: grid; gap: 7px; margin-top: 11px; padding: 10px; border: 1px solid #243d2d; border-radius: 4px; background: #0a1b13; }
.presence-player { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.presence-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red); }
.presence-player.connected .presence-dot { background: var(--green); box-shadow: 0 0 7px #c5f27770; }
.score-divider { height: 1px; margin: 20px 0 17px; background: #294132; }
.round-list { display: grid; gap: 12px; margin-top: 15px; }
.section-note { margin: 13px 0 0; color: var(--subtle); font-size: 10px; line-height: 1.5; }
.round-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; color: var(--subtle); font-size: 11px; }
.round-dot { width: 8px; height: 8px; border: 1px solid #556c59; border-radius: 50%; }
.round-row.current { color: var(--text); }
.round-row.current .round-dot { border-color: var(--green); background: var(--green); box-shadow: 0 0 8px #c5f2776e; }
.round-row.done .round-dot { border-color: var(--green); background: #42613a; }
.round-points { color: var(--subtle); font-size: 9px; letter-spacing: 0; }
.score-footer { display: flex; align-items: center; gap: 8px; margin-top: 25px; padding-top: 13px; border-top: 1px solid #243d2d; color: var(--subtle); font-size: 9px; letter-spacing: .02em; }
.score-footer .live-dot { width: 6px; height: 6px; }
.score-footer.connection-lost { color: var(--red); }
.score-footer.connection-lost .live-dot { background: var(--red); box-shadow: 0 0 8px #ff8c7f70; }
.game-footer { padding-top: 18px; color: var(--subtle); text-align: center; font-size: 10px; }
.round-complete, .match-complete {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 19px;
  padding: 14px;
  border: 1px solid #536b3c;
  border-radius: 5px;
  background: #182718;
}
.complete-icon { width: 27px; height: 27px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--green); color: #14220f; }
.round-complete > div { flex: 1; }
.round-complete b { font-size: 12px; }
.round-complete p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.round-complete .button { flex: 0 0 auto; }
.match-complete { display: block; padding: 20px; text-align: center; }
.match-complete h2 { margin: 8px 0; font: 600 25px var(--display); }
.match-complete p { color: var(--muted); font-size: 12px; }
.match-complete .button { margin-top: 4px; }

.stats-page { padding: 35px 0 23px; }
.stats-hero {
  display: flex;
  min-height: 270px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #354c32;
  border-radius: 9px;
  background: linear-gradient(115deg, #10241a, #193225);
}
.stats-hero-copy { width: 44%; max-width: 520px; }
.stats-hero h1 { margin: 13px 0 12px; font: 600 clamp(35px, 5.5vw, 59px)/.99 var(--display); letter-spacing: -.055em; }
.stats-hero h1 span { color: var(--green); }
.stats-hero-video { width: min(52%, 530px); margin: 0; }
.stats-hero-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid #405b43; border-radius: 7px; background: #08130d; object-fit: cover; pointer-events: none; }
.stats-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 23px 0 14px; }
.league-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.league-tab {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid #294535;
  border-radius: 5px;
  background: rgba(10, 27, 18, .8);
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  transition: all .15s;
}
.league-tab:hover { border-color: #678052; color: var(--text); }
.league-tab.active { border-color: #829e54; background: #1b2b1d; color: var(--green); box-shadow: inset 0 0 0 1px #c5f27716; }
.league-tab .league-code { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #496043; border-radius: 12px; background: linear-gradient(145deg, #203b28, #101e16); color: var(--green); font: 600 10px var(--mono); }
.league-tab .league-code img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; filter: drop-shadow(0 2px 3px #0008); }
.league-tab .league-code.has-logo { border-color: #708754; background: #f5f5ee; box-shadow: 0 2px 10px #0003; }
.league-tab[data-competition="CL"] .league-code { border-radius: 50%; }
.league-tab[data-competition="PL"] .league-code { border-radius: 50% 50% 45% 45%; }
.league-tab[data-competition="WC"] .league-code, .league-tab[data-competition="EC"] .league-code { border-radius: 50% 50% 7px 7px; }
.league-tab-label { display: grid; gap: 4px; min-width: 0; }
.league-tab-label small { overflow: hidden; color: var(--subtle); font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.competition-logo-status { margin: -4px 0 0; color: var(--subtle); font: 8px var(--mono); }
.stats-updated { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 10px var(--mono); }
.stats-updated .live-dot { width: 6px; height: 6px; flex: 0 0 auto; }
.stats-dot-offline { background: var(--orange); box-shadow: 0 0 8px #ffc47270; }
.stats-refresh { margin-left: 7px; padding: 6px 9px; border: 1px solid #304734; border-radius: 4px; background: #102117; color: #c8d5c7; cursor: pointer; font: 10px var(--sans); }
.stats-refresh:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.stats-refresh:disabled { cursor: wait; opacity: .5; }
.stats-status { min-height: 17px; margin: 0 0 9px; color: var(--orange); font-size: 11px; }
.stats-dashboard { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 15px; }
.stats-card { min-width: 0; padding: 20px; border: 1px solid var(--panel-line); border-radius: 7px; background: linear-gradient(145deg, rgba(15, 36, 26, .97), rgba(10, 27, 19, .97)); box-shadow: 0 9px 30px rgba(0,0,0,.08); }
.stats-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.stats-card-heading .eyebrow { font-size: 9px; }
.stats-card-heading h2 { margin: 5px 0 0; font: 600 21px var(--display); letter-spacing: -.025em; }
.stats-card-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid #476042; border-radius: 5px; color: var(--green); font-size: 17px; }
.stats-table-wrap { max-height: 540px; overflow: auto; scrollbar-color: #3a5540 #0b1c12; }
.league-table, .player-table { width: 100%; border-collapse: collapse; text-align: left; }
.league-table { min-width: 790px; font-size: 11px; }
.league-table th, .league-table td, .player-table th, .player-table td { padding: 9px 7px; border-bottom: 1px solid #253a2d; }
.league-table thead th, .player-table thead th { position: sticky; z-index: 1; top: 0; background: #10251a; color: var(--subtle); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.league-table tbody th, .player-table tbody th { color: #e4e9e0; font-size: 11px; font-weight: 600; }
.league-table tbody tr:hover, .player-table tbody tr:hover { background: #15291c; }
.league-table tbody tr:first-child .table-position { color: var(--green); font-weight: 700; }
.table-position { width: 24px; color: var(--subtle); font: 10px var(--mono); }
.table-points { color: var(--green); font-weight: 700; }
.team-identity { display: inline-flex; min-width: 0; align-items: center; gap: 8px; vertical-align: middle; }
.team-identity-label { display: grid; min-width: 0; gap: 2px; }
.team-identity-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-identity-detail { color: var(--subtle); font: 8px var(--mono); }
.team-mark { position: relative; display: inline-grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid #35503b; border-radius: 50%; background: #14281b; color: #c5f277; font: 8px var(--mono); }
.team-crest-fallback { display: grid; place-items: center; }
.team-mark img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.team-mark.has-crest .team-crest-fallback { visibility: hidden; }
.standing-team { max-width: 230px; }
.player-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.player-ranking { min-width: 0; }
.player-ranking h3 { margin: 0 0 9px; color: #dce5da; font: 600 12px var(--display); }
.player-table { min-width: 540px; font-size: 10px; }
.player-table th:first-child { min-width: 150px; }
.player-table tbody th { white-space: nowrap; }
.player-rank { color: var(--subtle); font: 9px var(--mono); }
.player-team { max-width: 180px; color: var(--muted); }
.player-team-identity { max-width: 165px; }
.player-team-identity .team-mark { width: 20px; height: 20px; }
.stats-footnote { margin: 12px 0 0; color: var(--subtle); font-size: 9px; line-height: 1.5; }
.matches-card { grid-column: 1 / -1; }
.match-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.match-column { min-width: 0; }
.match-column h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: #dce5da; font: 600 12px var(--display); }
.match-live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px #ff8c7f88; animation: live-pulse 1.5s ease-in-out infinite; }
.fixture-list { display: grid; gap: 7px; }
.fixture-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px; min-height: 73px; padding: 10px 11px; border: 1px solid #263c2e; border-radius: 5px; background: #0a1a12; }
.fixture-row.fixture-live { border-color: #75423a; background: linear-gradient(100deg, #201a15, #111b14); }
.fixture-date { color: var(--subtle); font: 8px var(--mono); letter-spacing: .07em; }
.fixture-score { grid-column: 2; grid-row: 1 / span 3; color: #dfe8db; font: 600 12px var(--mono); }
.fixture-score.score-live { color: var(--red); }
.fixture-team { overflow: hidden; color: #c9d4c7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fixture-team.fixture-away { color: var(--muted); }
.fixture-team-identity { max-width: 100%; gap: 6px; }
.fixture-team-identity .team-mark { width: 18px; height: 18px; }
.stats-empty { margin: 0; padding: 18px 12px; border: 1px dashed #304634; border-radius: 5px; color: var(--subtle); font-size: 10px; line-height: 1.5; text-align: center; }
.stats-footer { padding: 17px 0 4px; color: var(--subtle); font: 9px var(--mono); text-align: center; }
@keyframes live-pulse { 50% { opacity: .45; box-shadow: 0 0 2px #ff8c7f66; } }

@media (max-width: 800px) {
  .game-mode-picker { grid-template-columns: 1fr; }
  .game-layout { grid-template-columns: 1fr; }
  .matches-card { grid-column: 1; }
  .stats-hero { gap: 20px; }
  .stats-hero-copy { width: 42%; }
  .stats-hero-video { width: 54%; }
  .match-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-column:last-child { grid-column: 1 / -1; }
  .league-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .score-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .score-header, .score-list, .online-presence, .score-footer { grid-column: 1; }
  .score-divider { display: none; }
  .score-panel > .eyebrow, .round-list, .section-note { grid-column: 2; }
  .score-panel > .eyebrow { grid-row: 1; margin-top: 4px; }
  .round-list { grid-row: 2; margin-top: 13px; }
  .section-note { grid-row: 3; }
  .score-footer { margin-top: 12px; }
}
@media (max-width: 580px) {
  .shell { width: min(100% - 30px, 470px); }
  .topbar { height: 69px; }
  .brand { font-size: 10px; }
  .edition { font-size: 8px; letter-spacing: .04em; }
  .topbar { gap: 7px; }
  .brand { gap: 6px; font-size: 8px; letter-spacing: 0; }
  .brand-ball { width: 27px; height: 27px; font-size: 14px; }
  .site-nav { gap: 1px; }
  .site-nav-button { min-height: 33px; padding: 0 7px; font-size: 10px; }
  .edition { display: none; }
  .lobby { padding-top: 51px; }
  .hero-copy { margin-bottom: 29px; }
  .intro { font-size: 14px; }
  .mode-grid { grid-template-columns: 1fr; }
  .game-mode-picker { gap: 7px; }
  .game-mode-option { grid-template-columns: 29px 1fr 16px; gap: 7px; min-height: 78px; padding: 9px 8px; }
  .mode-option-icon { width: 28px; height: 28px; font-size: 17px; }
  .game-mode-option b { font-size: 12px; }
  .game-mode-option small { font-size: 9px; }
  .mode-option-check { width: 16px; height: 16px; font-size: 9px; }
  .mode-card { padding: 21px; }
  .mode-card > p:not(.eyebrow):not(.connection-message) { min-height: 0; }
  .game { padding-top: 29px; }
  .game-heading { align-items: flex-start; gap: 8px; }
  .game-heading-right { align-items: flex-end; flex-direction: column-reverse; gap: 4px; }
  .text-button { font-size: 10px; }
  .board-panel { min-height: 0; padding: 12px; }
  .board-toolbar { align-items: flex-start; gap: 8px; }
  .turn-message { max-width: 65%; font-size: 11px; line-height: 1.4; }
  .selection-count { padding-top: 2px; font-size: 8px; white-space: nowrap; }
  .board { gap: 6px; }
  .tile { min-height: 76px; padding: 8px 4px; font-size: 11px; }
  .solved-group { grid-template-columns: 1fr; gap: 7px; padding: 11px; }
  .solved-group-explanation, .solved-group-items { grid-column: 1; grid-row: auto; }
  .solved-group-items { justify-content: flex-start; }
  .solved-group-item { font-size: 9px; }
  .cable-area { min-height: 258px; }
  .cable-columns { gap: 29px; }
  .cable-nodes { gap: 9px; }
  .wire-node { min-height: 51px; padding: 8px 9px; font-size: 10px; }
  .premise-card { padding: 10px; }
  .premise-card p { font-size: 11px; }
  .board-actions { flex-wrap: wrap; gap: 8px; }
  .button-hint { min-height: 38px; padding: 0 11px; }
  .hint-note { min-width: calc(100% - 130px); font-size: 9px; }
  .board-actions .button-primary { width: 100%; }
  .round-complete { flex-wrap: wrap; }
  .round-complete .button { width: 100%; }
  .points-celebration { min-height: 118px; gap: 12px; padding: 20px 17px; }
  .celebration-ball { font-size: 38px; }
  .score-panel { padding: 14px; column-gap: 10px; }
  .score-player { grid-template-columns: 23px 1fr auto; gap: 5px; padding: 0 7px; }
  .player-name { font-size: 10px; }
  .player-score { font-size: 17px; }
  .lobby-footer { gap: 10px; font-size: 8px; }
  .stats-page { padding-top: 22px; }
  .stats-hero { min-height: 0; align-items: stretch; flex-direction: column; gap: 20px; padding: 24px 18px; }
  .stats-hero-copy { width: 100%; max-width: none; }
  .stats-hero h1 { margin-bottom: 0; font-size: clamp(32px, 8.6vw, 42px); }
  .stats-hero-video { width: 100%; }
  .league-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-tab { min-height: 48px; gap: 6px; padding: 5px 7px; font-size: 9px; }
  .league-tab .league-code { width: 30px; height: 30px; border-radius: 9px; font-size: 8px; }
  .league-tab[data-competition="CL"] .league-code, .league-tab[data-competition="PL"] .league-code { border-radius: 50%; }
  .league-tab[data-competition="WC"] .league-code, .league-tab[data-competition="EC"] .league-code { border-radius: 50% 50% 7px 7px; }
  .league-tab-label small { font-size: 8px; }
  .stats-updated { width: 100%; flex-wrap: wrap; font-size: 9px; }
  .stats-refresh { margin-left: auto; }
  .stats-card { padding: 14px; }
  .stats-card-heading h2 { font-size: 19px; }
  .player-rankings { grid-template-columns: 1fr; }
  .match-panels { grid-template-columns: 1fr; }
  .match-column:last-child { grid-column: auto; }
  .stats-footer { font-size: 8px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .game-heading h1, .game-heading h1::after, .cable-column-label, .wire-node[data-side] .wire-endpoint, .tile:not(:disabled):not(.selected):not(.hinted), .match-live-pulse { animation: none; }
  .points-celebration.celebrating { animation-duration: .01ms; }
}