/* Вид в духе 2K: тёмная арена, паркет, узкий жирный шрифт заглавными, крупные цифры, цвет команды акцентом. Тема одна. */
@font-face { font-family: "Oswald"; src: url("/static/oswald-latin.woff2") format("woff2"); font-weight: 200 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; src: url("/static/oswald-latin-ext.woff2") format("woff2"); font-weight: 200 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; src: url("/static/oswald-cyrillic.woff2") format("woff2"); font-weight: 200 700; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --bg: #07090d; --panel: #10141c; --panel2: #171d28; --line: #262e3d; --fg: #f2f4f8; --muted: #8b94a7;
  --team: #1e78ff; --made: #35d07f; --miss: #ff5a4d; --drive: #ffb347; --trans: #b08cf5;
  --wood: #b98548; --seam: #9a6c37; --court: #f4ead9; --ink: #0a0d12;
  --h1: #1d4ed8; --h2: #4f8df7; --h3: #9fb2cc; --h4: #f5b942; --h5: #f0642f; --h6: #dc1f1f;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif; --body: system-ui, "Segoe UI", sans-serif;
  color-scheme: dark;
}
body[data-team="wolves"] { --team: #c9ced8; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; padding-block: 16px 40px; padding-inline: 16px; min-height: 100vh; color: var(--fg); font: 15px/1.45 var(--body);
  background: radial-gradient(1200px 500px at 50% -120px, #1a2740 0%, rgba(26, 39, 64, 0) 70%) no-repeat, var(--bg); }
a { color: inherit; }
h1, h2, .brand, .jersey, .digits, .name, dd b, .pcard b, .gcard b, button { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: 30px; font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: .12em; margin: 0 0 10px; }
.muted { color: var(--muted); } .num, .digits, .jersey, dd { font-variant-numeric: tabular-nums; }
.error { color: var(--miss); margin: 0 0 12px; } .error:empty { display: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--team); outline-offset: 2px; }

.top { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--team); }
.brand { font-size: 26px; font-weight: 700; text-decoration: none; line-height: 1; }
.brand span { margin-left: 10px; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: .2em; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.top nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 14px; text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--fg); }

button, select, input { font-size: 15px; color: var(--fg); background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; }
select, input { font-family: var(--body); }
button { cursor: pointer; font-weight: 600; font-size: 14px; letter-spacing: .08em; }
button:hover:not(:disabled) { border-color: var(--team); }
button:disabled { opacity: .35; cursor: default; }
button.main { background: var(--team); border-color: var(--team); color: var(--ink); }
input[type="checkbox"] { accent-color: var(--team); padding: 0; }

.form { max-width: 360px; margin: 12vh auto 0; display: grid; gap: 14px; }
.form label { display: grid; gap: 4px; color: var(--muted); }

.panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-top: 2px solid var(--team); border-radius: 6px; padding: 14px; min-width: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; }
.filters label { color: var(--muted); display: flex; gap: 6px; align-items: center; }

.jersey { font-size: 72px; font-weight: 700; line-height: .95; color: var(--team); }
.name { font-size: 26px; font-weight: 700; line-height: 1.05; margin: 6px 0 2px; overflow-wrap: anywhere; }
dl.stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 14px 0 0; align-items: baseline; }
dl.stats dt { color: var(--muted); } dl.stats dd { margin: 0; text-align: right; color: var(--muted); }
dl.stats dd b { font-size: 24px; font-weight: 700; color: var(--fg); margin-right: 4px; }
.links { list-style: none; margin: 0; padding: 0; }
.links li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.links a { text-decoration: none; } .links a:hover { color: var(--team); }
.card h2 { margin-top: 18px; }

.player { display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.game { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.watch, .mid { position: sticky; top: 12px; }
.mid { display: grid; gap: 16px; min-width: 0; } .mid .watch { position: static; } .list .shots { margin-top: 0; }
@media (max-width: 1000px) {
  .player, .game { grid-template-columns: minmax(0, 1fr); }
  .watch { top: 0; z-index: 2; margin-inline: -16px; border-radius: 0; border-inline: 0; }   /* плеер прилипает к верху, пока листаешь карту */
  .player .watch { order: 1; } .player > .panel:not(.card):not(.watch) { order: 2; }
  .mid { display: contents; } .mid .watch { position: sticky; order: -1; } .game .list { order: 3; }   /* прилипает только плеер; список — после обеих половин */
}
@media (max-width: 1000px) and (orientation: landscape) {
  .watch, .mid .watch { position: static; margin-inline: 0; }                /* телефон боком: прилипший плеер закрыл бы всю площадку */
}

svg.court { width: 100%; display: block; border-radius: 4px; }
.plank { fill: var(--wood); } .seam { fill: none; stroke: var(--seam); stroke-width: .05; }
.ln { fill: none; stroke: var(--court); stroke-width: .07; stroke-opacity: .9; }
.zone { fill: none; } .zone[class*=" h"] { fill-opacity: .6; }
.zone.h1 { fill: var(--h1); } .zone.h2 { fill: var(--h2); } .zone.h3 { fill: var(--h3); }
.zone.h4 { fill: var(--h4); } .zone.h5 { fill: var(--h5); } .zone.h6 { fill: var(--h6); }
.shot { cursor: pointer; }
.shot .hit { fill: transparent; }
.shot .made { fill: var(--made); stroke: var(--ink); stroke-width: .07; }
.shot .made.draft { fill: none; stroke: var(--made); stroke-width: .1; }
.shot .under { fill: none; stroke: var(--ink); stroke-width: .2; stroke-linecap: round; }
.shot .miss { fill: none; stroke: var(--miss); stroke-width: .11; stroke-linecap: round; }
.shot .miss.draft { stroke-dasharray: .12 .1; }
.shot .ring { fill: none; stroke-width: .1; } .shot .ring.drive { stroke: var(--drive); } .shot .ring.trans { stroke: var(--trans); }
.shot.cur .hit { fill: none; stroke: #fff; stroke-width: .1; }
.chip { pointer-events: none; }
.chip rect { fill: var(--ink); fill-opacity: .78; }
.chip text { font: 600 .5px var(--display); fill: #fff; text-anchor: middle; }
.legend { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.scale { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: var(--muted); font-size: 12px; margin-top: 10px; }
.scale i { width: 22px; height: 8px; display: inline-block; opacity: .8; }
.scale .h1 { background: var(--h1); } .scale .h2 { background: var(--h2); } .scale .h3 { background: var(--h3); }
.scale .h4 { background: var(--h4); } .scale .h5 { background: var(--h5); } .scale .h6 { background: var(--h6); }

video { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: #000; display: block; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#info { margin: 10px 0 0; }
.shots { list-style: none; margin: 12px 0 0; padding: 0; max-height: 46vh; overflow: auto; position: relative; }
.shots li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.shots li:hover { background: var(--panel2); }
.shots li.cur { background: var(--panel2); box-shadow: inset 3px 0 0 var(--team); }
.shots .ok { color: var(--made); } .shots .no { color: var(--miss); }

.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 26px; }
.gcard { display: grid; gap: 2px; text-decoration: none; }
.gcard b { font-size: 20px; font-weight: 700; } .gcard .digits { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; }
.gcard:hover, .pcard:hover { border-color: var(--team); }
.tag { justify-self: start; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--made); border-radius: 3px; padding: 1px 6px; margin-top: 4px; }
.tag.off { background: var(--line); color: var(--muted); }
section.team { margin-bottom: 26px; --team: #c9ced8; } section.team.own { --team: #1e78ff; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.pcard { display: grid; gap: 2px; text-decoration: none; align-content: start; }
.pcard .jersey { font-size: 44px; } .pcard .name { font-size: 18px; margin: 2px 0 6px; }
.pcard b { font-size: 22px; font-weight: 700; margin-right: 4px; }
.pcard span { color: var(--muted); }
.pcard .jersey { color: var(--team); } .pcard .name, .pcard b { color: var(--fg); }

.score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 20px; align-items: center; margin-bottom: 16px; text-align: center; }
.score .name { margin: 0; } .score .name:first-child { text-align: right; } .score .name:nth-child(3) { text-align: left; }
.score .digits { font-family: var(--display); font-size: 56px; font-weight: 700; line-height: 1; }
.score .digits i { font-style: normal; color: var(--muted); margin-inline: 8px; }
.score p { grid-column: 1 / -1; margin: 0; }
.side h2 { color: var(--fg); font-size: 20px; }
.side .box { margin-top: 14px; }
.side[data-team] { --team: #c9ced8; } .side[data-team="fleur-alpine"] { --team: #1e78ff; }
@media (max-width: 600px) {      /* счёт на телефоне: название переносится по словам, а не посреди слова */
  .score { gap: 4px 10px; } .score .name { font-size: 16px; overflow-wrap: break-word; } .score .digits { font-size: 40px; } .score .digits i { margin-inline: 4px; }
}
textarea { font: 15px/1.4 var(--body); color: var(--fg); background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; width: 100%; resize: vertical; }
.edit { display: grid; gap: 10px; margin-bottom: 12px; } .edit label { color: var(--muted); display: grid; gap: 4px; }
.edit .filters { margin: 0; } .edit .filters label { display: flex; } .edit h2, .edit p { margin: 0; }
#edit-open { width: 100%; margin-top: 10px; } #edit-note { margin: 8px 0 0; } #edit-note:empty { display: none; }
.editing svg.court, .editing .shot { cursor: crosshair; }
.draft { pointer-events: none; } .draft circle { fill: none; stroke: #fff; stroke-width: .12; stroke-dasharray: .2 .15; }
.draft path { fill: none; stroke: #fff; stroke-width: .08; }
@media (max-width: 1000px) { .game .edit { order: -1; } }      /* на телефоне форма игры — сразу под плеером */


.props { display: grid; gap: 12px; max-width: 760px; margin-top: 16px; }
.prop { display: grid; gap: 4px; } .prop b { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 18px; }
.tag.no { background: var(--miss); }


.queue { display: grid; gap: 14px; margin: 16px 0 26px; }
.qitem { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.qtext { display: grid; gap: 6px; min-width: 0; } .qtext b { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; font-size: 18px; }
.qtext input.reason { width: 100%; } .warn { color: var(--drive); display: flex; gap: 6px; align-items: center; }
.users { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
th { color: var(--muted); font-weight: 400; } td button { margin: 2px 6px 2px 0; padding: 4px 8px; font-size: 12px; }
#link { margin-top: 16px; max-width: 760px; } #link-url { width: 100%; font-family: ui-monospace, monospace; }
@media (max-width: 1000px) { .qitem, .users { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {      /* входы на телефоне: строка таблицы — карточка в две колонки, иначе слова рвутся по буквам */
  .users thead { display: none; } .users tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 8px; border-bottom: 1px solid var(--line); }
  .users td { border: 0; padding: 2px 0; } .users td:first-child { font-weight: 700; } .users td:last-child { grid-column: 1 / -1; }
}