/* Hallmark · genre: modern-minimal · macrostructure: Mini App bento (design.md) · theme: studied-DNA (source: VolleyTime Brand & System + Mini App) · enrichment: none · nav: Mini App header + floating dock · footer: none
   tone: utilitarian, sport · anchor hue: brand blue #2437C9 + energy orange #FF6B1F
   design-system: design.md
   critique: philosophy 4 · hierarchy 5 · execution 5 · specificity 5 · restraint 5 · variety 4
   slop: 56 / 58 applicable — fails: none — n/a: 28, 31 (no video, no illustration) — rendered 320/375/414/768/1024/1280/1440 + landscape, light + dark (audit 2026-10-24) */

/* ============ Токены VolleyTime (Brand & System · Bento Bold) ============ */
:root {
  --vt-paper: #FFFFFF; --vt-bone: #F4F4F6; --vt-bone-2: #ECECF0; --vt-stroke-2: #E3E3E8;
  --vt-ink: #15161A; --vt-ink-3: #3D3E45; --vt-mute: #616269; --vt-mute-2: #5B5C64;
  --vt-icon-idle: #80828C; --vt-hairline: #D9D9DF;
  --vt-flame: #2437C9; --vt-flame-deep: #1A2AA3; --vt-blue-ink: #1F2E96; --vt-orange: #FF6B1F; --vt-orange-soft: #FFE9DC; --vt-blue-soft-tile: #E8EBFF;
  --vt-amber: #FFB627; --vt-grass: #456F34; --vt-rose: #BE2F3F; --vt-grass-ink: #33521F; --vt-rose-ink: #96222F;
  --vt-flame-ink: color-mix(in oklab, var(--vt-flame) 74%, black);
  --vt-focus: var(--vt-ink); --vt-on-accent: #FFFFFF;
  --vt-raised: #FFFFFF; --vt-dock: #15161A; --vt-dock-idle: #8A8C96; --vt-orange-ink: #A33C08;
  --vt-shadow-card: 0 1px 2px rgba(21,22,26,.04), 0 10px 28px -10px rgba(21,22,26,.14);
  --vt-shadow-float: 0 14px 32px -8px rgba(21,22,26,.30);
  --vt-shadow-accent: 0 16px 32px -16px rgba(21,22,26,.28);
  --vt-on-hero: #FFFFFF; --vt-on-hero-2: rgba(255,255,255,.86); --vt-on-hero-3: rgba(255,255,255,.74);
  --vt-on-hero-line: rgba(255,255,255,.22); --vt-on-hero-fill: rgba(255,255,255,.14);
  --vt-amber-on-hero: #FFC94D;
  --vt-scrim: rgba(14,14,16,.45); --vt-toast-bg: rgba(14,14,16,.88); --vt-bar-bg: rgba(21,22,26,.86); --vt-white: #FFFFFF;
  /* Доска (canvas читает эти токены при запуске; тема на доску не влияет) */
  --board-court: #FF6B1F; --board-free: #1F2E96; --board-line: #FFFFFF; --board-net: #15161A; --board-post: #ECECF0;
  --board-ball: #FFC94D; --board-ball-edge: #1F2E96; --board-ball-stripe: #2437C9; --board-hi: #FFC94D; --board-warn: #FFC94D; --board-bad: #BE2F3F;
  --board-label: #FFFFFF; --board-shadow: #0E0E10;
  --board-a-fill: #15161A; --board-a-ink: #FFFFFF; --board-a-edge: #FFFFFF; --board-a-lib: #FFB627; --board-a-lib-ink: #15161A; --board-a-path: #15161A;
  --board-b-fill: #FFFFFF; --board-b-ink: #1F2E96; --board-b-edge: #1F2E96; --board-b-lib: #2437C9; --board-b-lib-ink: #FFFFFF; --board-b-path: #FFFFFF;
  --ann-white: #FFFFFF; --ann-yellow: #FFC94D; --ann-ink: #15161A; --ann-mint: #C4F2AE; --vt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2380828C' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --vt-srv-on-light: #A63A05; --vt-ink-fixed: #15161A; --vt-knob-shadow: 0 1px 3px rgba(0,0,0,.2); --vt-swatch-edge: rgba(21,22,26,.18); --vt-swatch-edge-dark: rgba(255,255,255,.32); --vt-hud-ok: #456F34; --vt-hud-bad: #BE2F3F;
  --vt-seg-shadow: 0 1px 2px rgba(0,0,0,.06); --vt-sheet-shadow: 0 -12px 32px rgba(0,0,0,.18);
  --vt-pop-shadow: 0 12px 32px rgba(0,0,0,.15), 0 0 0 .5px rgba(0,0,0,.04); --vt-modal-shadow: 0 24px 48px rgba(0,0,0,.25); --vt-toast-shadow: 0 8px 24px rgba(0,0,0,.25);
  --vt-seg-on: var(--vt-paper);
  --r-chip: 10px; --r-field: 12px; --r-btn: 14px; --r-tile: 18px; --r-card: 20px; --r-dock: 22px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px; --fs-4xl: 34px;
  --f-display: 'Oswald', 'Golos Text', system-ui, sans-serif;
  --f-body: 'Golos Text', system-ui, sans-serif;
  --f-num: 'Oswald', 'Golos Text', system-ui, sans-serif;
  --tap: 44px; --dock-h: 58px;
  --vt-ctl: var(--vt-bone); --vt-ctl-hover: var(--vt-bone-2); --vt-ctl-lift: none; --vt-ctl-ink: var(--vt-ink); --vt-ctl-chip: var(--vt-bone-2); --vt-ctl-track: var(--vt-bone-2);
  --sat: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
.vt-dark {
  --vt-paper: #0F1013; --vt-bone: #1A1B20; --vt-bone-2: #24252B; --vt-stroke-2: #34353C;
  --vt-ink: #F2F2F5; --vt-ink-3: #B9BAC2; --vt-mute: #9B9CA5; --vt-mute-2: #B0B1BA; --vt-icon-idle: #8C8D96; --vt-hairline: #3A3B42;
  --vt-grass: #7FBF66; --vt-rose: #F2707E; --vt-grass-ink: #A8DE92; --vt-rose-ink: #FFA3AD;
  --vt-flame-ink: color-mix(in oklab, var(--vt-flame) 55%, white); --vt-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B0B1BA' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --vt-focus: #F2F2F5;
  --vt-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  --vt-orange-soft: #3A2418; --vt-blue-soft-tile: #1E2447; --vt-raised: #23242B; --vt-dock: #24252C; --vt-dock-idle: #8C8D96;
  --vt-orange-ink: #FFB38A; --vt-shadow-float: 0 14px 32px -8px rgba(0,0,0,.65);
  --vt-ctl: var(--vt-bone); --vt-ctl-hover: var(--vt-bone-2); --vt-ctl-chip: var(--vt-bone-2); --vt-ctl-track: var(--vt-bone-2);
  --vt-seg-on: #34353D; --vt-ctl-dark: #2B2C33;
  color-scheme: dark;
}
/* Инверсия тона: на сером — белые контролы, на белой карточке — серые, на синем — полупрозрачные */
.vt-card:not([class*="vt-card--"]), .vt-card--cool {
  --vt-ctl: var(--vt-paper); --vt-ctl-hover: var(--vt-paper); --vt-ctl-lift: var(--vt-shadow-card); --vt-ctl-chip: var(--vt-paper); --vt-ctl-track: var(--vt-paper);
}
.vt-card--raised { --vt-ctl: var(--vt-bone); --vt-ctl-hover: var(--vt-bone-2); --vt-ctl-lift: none; --vt-ctl-chip: var(--vt-bone-2); --vt-ctl-track: var(--vt-bone-2) }
.vt-card--hero, .vt-on-hero { --vt-ctl: var(--vt-on-hero-fill); --vt-ctl-hover: var(--vt-on-hero-line); --vt-ctl-lift: none; --vt-ctl-ink: var(--vt-on-hero); --vt-ctl-chip: var(--vt-on-hero-fill); --vt-ctl-track: var(--vt-on-hero-fill) }
.vt-dark .vt-card:not([class*="vt-card--"]), .vt-dark .vt-card--cool { --vt-ctl: var(--vt-ctl-dark); --vt-ctl-hover: var(--vt-stroke-2); --vt-ctl-lift: none; --vt-ctl-chip: var(--vt-ctl-dark); --vt-ctl-track: var(--vt-ctl-dark) }
.vt-dark .vt-card--raised { --vt-ctl: var(--vt-bone-2); --vt-ctl-hover: var(--vt-ctl-dark); --vt-ctl-chip: var(--vt-ctl-dark); --vt-ctl-track: var(--vt-ctl-dark) }

/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box }
html, body { overflow-x: clip; background: var(--vt-paper) }
body { margin: 0 }
.vt-frame { font-family: var(--f-body); color: var(--vt-ink); background: var(--vt-paper); font-size: var(--fs-base); line-height: 1.4; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer; touch-action: manipulation }
:where(button:not(:disabled)):active { transform: translateY(1px) }
h1, h2 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: 1.02; margin: 0; overflow-wrap: anywhere; min-width: 0 }
h3, h4 { font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; margin: 0 }
p { margin: 0 }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--vt-focus); outline-offset: 2px; transition: none }
[hidden] { display: none !important }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.vt-mono { font-family: var(--f-num); font-weight: 600; letter-spacing: .01em; font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums }
.vt-cap { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.row { display: flex; gap: var(--s-2); align-items: center }
.row.wrap { flex-wrap: wrap }
.row.end { justify-content: flex-end }
.hint { font-size: var(--fs-xs); color: var(--vt-mute) }
.only-wide, .only-wide-block, .only-wide-flex, .only-wide-inline { display: none !important }

/* ============ Атомы VolleyTime ============ */
.vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r-btn); border: 0; font-family: var(--f-body); font-weight: 700; font-size: var(--fs-base); white-space: nowrap; flex: none; transition: transform .06s, background-color .15s, color .15s, box-shadow .15s }
.vt-btn svg { width: 18px; height: 18px; flex: none }
.vt-btn:active { transform: translateY(1px) }
.vt-btn--primary { background: var(--vt-flame); color: var(--vt-on-accent) }
.vt-btn--ink { background: var(--vt-ink); color: var(--vt-paper) }
.vt-btn--ghost { background: var(--vt-ctl); color: var(--vt-ctl-ink) }
.vt-btn--danger { background: var(--vt-rose); color: var(--vt-on-accent) }
.vt-btn--sm { min-height: 36px; font-size: var(--fs-sm); border-radius: 12px; padding: 0 var(--s-3) }
.vt-btn--lg { min-height: 52px; font-size: var(--fs-md); border-radius: 16px }
.vt-btn--full { width: 100% }
.vt-btn:disabled, .icon-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none }
@media (hover: hover) {
  .vt-btn--primary:hover { background: var(--vt-flame-deep) }
  .vt-btn--ink:hover { background: var(--vt-ink-3) }
  .vt-btn--ghost:hover, .icon-btn:not(:disabled):hover { background: var(--vt-ctl-hover) }
}
.icon-btn { width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-btn); background: transparent; color: var(--vt-ink); display: inline-grid; place-items: center; flex: none; transition: transform .06s, background-color .15s }
.icon-btn--tone { background: var(--vt-ctl) }
.icon-btn:active { transform: translateY(1px); background: var(--vt-ctl-hover) }
.icon-btn svg { width: 20px; height: 20px }
.icon-btn[aria-pressed="true"] { background: var(--vt-ink); color: var(--vt-paper) }

.vt-card { background: var(--vt-bone); border-radius: var(--r-card) }
.vt-card--raised { background: var(--vt-raised); box-shadow: var(--vt-shadow-card) }
.vt-card--hero { background: var(--vt-blue-ink); color: var(--vt-on-hero); box-shadow: var(--vt-shadow-accent) }
.vt-card--cool { background: var(--vt-blue-soft-tile) }

.vt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r-chip); font-size: var(--fs-xs); font-weight: 600; background: var(--vt-ctl-chip); color: var(--vt-ctl-ink); border: 0; white-space: nowrap }
.vt-chip--solid { background: var(--vt-ink); color: var(--vt-paper) }
.chip-btn { min-height: 40px; padding: 0 var(--s-3); font-size: var(--fs-sm); transition: transform .06s, box-shadow .15s }
.chip-btn:active { transform: translateY(1px) }
@media (hover: hover) { .chip-btn:hover { box-shadow: var(--vt-ctl-lift) } }

.vt-avi { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none }
.vt-avi--brand { background: var(--vt-white) url(../assets/vt-mark.svg) center / 70% no-repeat; box-shadow: inset 0 0 0 1px var(--vt-stroke-2) }

.vt-field { display: block; width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--r-field); background: var(--vt-ctl); color: var(--vt-ctl-ink); border: 1px solid transparent; font-size: var(--fs-md); outline: 2px solid transparent; outline-offset: 1px; transition: background-color .15s }
textarea.vt-field { padding: var(--s-3); min-height: 96px; resize: vertical; line-height: 1.45 }
select.vt-field { appearance: none; background-image: var(--vt-chevron); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px }
.vt-field:focus-visible, .vt-field:focus { outline: 2px solid var(--vt-flame); outline-offset: 1px; transition: none }
.vt-field:disabled { opacity: .55; cursor: not-allowed }
#fDurHint, #ballStat { min-height: 1lh }
.vt-label { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--vt-mute-2) }

.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-btn); background: var(--vt-ctl-track); flex: none }
.seg button { border: 0; background: transparent; min-height: 38px; min-width: 40px; padding: 0 var(--s-3); border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); color: var(--vt-mute-2); white-space: nowrap }
.seg button svg { width: 18px; height: 18px }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--vt-seg-on); color: var(--vt-ink); box-shadow: var(--vt-seg-shadow) }
.seg button:disabled { opacity: .45; cursor: not-allowed }
.seg--full { display: flex } .seg--full button { flex: 1 }
.seg .lbl { display: none }

.switch { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--vt-hairline); position: relative; flex: none; margin: 0; cursor: pointer; transition: background-color .15s }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--vt-white); box-shadow: var(--vt-knob-shadow); transition: transform .15s }
.switch:checked { background: var(--vt-flame) }
.switch:checked::after { transform: translateX(18px) }
.switch:disabled { opacity: .45 }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap); font-size: var(--fs-base); cursor: pointer }
.list .switch-row + .switch-row { border-top: 1px solid var(--vt-paper) }

/* ============ Каркас Mini App (телефон) ============ */
.app { min-height: 100dvh; padding: calc(var(--sat) + var(--s-1)) max(var(--s-4), var(--sar)) calc(var(--dock-h) + var(--sab) + 36px) max(var(--s-4), var(--sal)); display: flex; flex-direction: column; gap: var(--s-3) }
.app > .lib-body { display: none }

.mh { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; background: var(--vt-paper) }
.mh-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 0; background: none; padding: 0; text-align: left; min-height: var(--tap) }
.mh-title b { font-size: var(--fs-md); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mh-title small { font-size: var(--fs-xs); color: var(--vt-mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mh-actions { display: flex; align-items: center; gap: var(--s-1) }
.mh-share { width: var(--tap); padding: 0 }
.menu-wrap { position: relative }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: min(280px, calc(100vw - 32px)); background: var(--vt-raised); border-radius: 16px; padding: 8px; box-shadow: var(--vt-pop-shadow); display: flex; flex-direction: column }
.menu button, .list-btn { border: 0; background: none; text-align: left; padding: 0 var(--s-3); min-height: var(--tap); border-radius: 10px; font-size: var(--fs-base); font-weight: 500; color: var(--vt-ink) }
.menu button:active, .list-btn:active { background: var(--vt-bone-2) }
@media (hover: hover) { .menu button:hover { background: var(--vt-bone) } }
.menu hr { border: 0; border-top: 1px solid var(--vt-bone-2); margin: 4px 8px }
.list .list-btn { padding: 0 }
.list .list-btn + .list-btn { border-top: 1px solid var(--vt-paper); border-radius: 0 }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm) }
.banner span { flex: 1 1 200px }

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-1) }
.sh-text { min-width: 0; display: flex; flex-direction: column; gap: 8px }
.sh-text small { font-size: var(--fs-sm); color: var(--vt-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.screen-head h1 { font-size: var(--fs-3xl) }
.sh-chip { font-size: var(--fs-md); padding: 8px 12px; flex: none }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3) }
.sec-head h2 { font-size: var(--fs-xl) }
.grp-h { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-mute); margin: var(--s-3) 0 0 var(--s-1) }

/* Экраны дока */
.app[data-tab]:not([data-tab="board"]) .stage-col { display: none }
.app[data-tab="board"] .side, .app[data-tab="library"] .side { display: none }
.app:not([data-tab="library"]) .lib-screen { display: none }
.stage-col, .side, .lib-screen { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0 }

/* Инструменты */
.toolbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap }
.swatches { display: inline-flex; gap: 2px; align-items: center; flex: none }
body[data-tool="select"] .swatches, body[data-tool="erase"] .swatches { display: none }
.swatch { width: 40px; height: var(--tap); border: 0; padding: 0; background: none; display: grid; place-items: center }
.swatch::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--vt-swatch-edge) }
.swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--vt-paper), 0 0 0 4px var(--vt-ink) }
.tb-spacer { flex: 1 }
.tb-group { display: inline-flex; gap: var(--s-1); align-items: center }

/* Доска — синий герой экрана */
.board-wrap { position: relative; width: 100%; aspect-ratio: 14 / 24; max-height: 68svh; max-height: 68dvh; border-radius: var(--r-card); overflow: hidden; background: var(--vt-blue-ink); box-shadow: var(--vt-shadow-accent); scroll-margin-top: 64px }
body[data-orient="h"] .board-wrap { aspect-ratio: 24 / 14 }
#board { position: absolute; inset: 0; touch-action: none }
#board.draw { cursor: crosshair }
#board.erase { cursor: not-allowed }
.hud { position: absolute; left: 10px; top: 10px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; max-width: calc(100% - 20px) }
.hud span { background: var(--vt-toast-bg); color: var(--vt-white); border-radius: var(--r-chip); padding: 4px 8px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.3 }
.hud .ok { background: var(--vt-grass) } .hud .bad { background: var(--vt-rose) }
.vt-dark .hud .ok { background: var(--vt-hud-ok) } .vt-dark .hud .bad { background: var(--vt-hud-bad) }
.board-wrap.vert .hud { top: auto; bottom: 10px }
.legend { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 20px); background: var(--vt-toast-bg); color: var(--vt-white); border-radius: var(--r-chip); padding: 4px 8px; font-size: var(--fs-xs); font-weight: 600; pointer-events: none }
.legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap }
.legend i { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--vt-on-hero-2) }
.lg-t, .lg-m { border-radius: 50% } .lg-f { border-radius: 3px }
.lg-m, .lg-f { background: transparent }
.ann-input { position: absolute; z-index: 5; min-width: 170px; padding: 8px 12px; border-radius: var(--r-field); border: 0; box-shadow: 0 0 0 3px var(--vt-amber-on-hero); background: var(--vt-ink); color: var(--vt-paper); font: 600 var(--fs-md) var(--f-display); text-transform: uppercase }

/* Панель поверх доски */
.pbar { display: none }
.pb { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: var(--vt-on-hero-fill); color: var(--vt-white); display: grid; place-items: center; flex: none }
.pb:active { background: var(--vt-on-hero-line) }
.pb svg { width: 20px; height: 20px }
.pb--play { background: var(--vt-orange) }
.pb--wide { width: auto; min-width: var(--tap); border-radius: var(--r-btn); padding: 0 var(--s-3); font-size: var(--fs-md) }
.pbar .scrub { flex: 1; min-width: 60px; accent-color: var(--vt-orange) }
.plabel { font-size: var(--fs-base); max-width: 30%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--vt-white) }
body.present { overflow: hidden }
body.present .board-wrap { position: fixed; inset: 0; z-index: 50; border-radius: 0; aspect-ratio: auto; max-height: none; width: auto; height: auto; box-shadow: none }
body.present .hud { left: calc(12px + var(--sal)); top: calc(12px + var(--sat)); bottom: auto }
body.present .legend { right: calc(12px + var(--sar)); top: calc(12px + var(--sat)) }
body.present .pbar { display: flex; align-items: center; gap: var(--s-2); position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--sab)); width: min(720px, calc(100% - 24px - var(--sal) - var(--sar))); background: var(--vt-bar-bg); border-radius: var(--r-dock); padding: 8px 8px; box-shadow: var(--vt-shadow-float); backdrop-filter: blur(8px) }
body:not(.present) #pExit { display: none }
body.present .dock { display: none }
body.present .toast { bottom: calc(88px + var(--sab)) }

/* Транспорт — бенто-плитка */
.transport { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) }
.transport .icon-btn { background: var(--vt-ctl) }
.scrub-wrap { order: 9; flex: 1 1 100%; display: flex; align-items: center; gap: var(--s-3); min-width: 0; min-height: 32px; padding: 0 var(--s-1) }
.scrub-wrap input { flex: 1; min-width: 0; height: 28px }
.scrub { accent-color: var(--vt-flame) }
.time { font-size: var(--fs-lg); color: var(--vt-ink); white-space: nowrap }
.play { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--vt-flame); color: var(--vt-on-accent); display: grid; place-items: center; flex: none; transition: transform .06s, background-color .15s }
.play:active { transform: translateY(1px) }
@media (hover: hover) { .play:hover { background: var(--vt-flame-deep) } }
.play svg { width: 22px; height: 22px }
.speed-btn { min-width: 64px; margin-left: auto; font-size: var(--fs-lg) }
.speed-sel { width: auto; min-width: 190px; margin-left: auto }

/* Кадры — плитки */
.frames { display: flex; gap: var(--s-3); overflow-x: auto; padding: 2px 0 var(--s-2); scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none }
.frames::-webkit-scrollbar { display: none }
.fcard { flex: none; width: 140px; border: 0; background: var(--vt-bone); border-radius: var(--r-tile); padding: var(--s-2); text-align: left; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; color: var(--vt-ink); transition: transform .06s, box-shadow .15s }
.fcard:active { transform: translateY(1px) }
.fcard canvas { width: 124px; height: 72px; border-radius: 12px; display: block }
.fcard .fh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--vt-mute) }
.fcard .fh .n { font-family: var(--f-num); font-weight: 700; font-size: var(--fs-xl); color: var(--vt-ink); line-height: 1 }
.fcard .fn { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fcard .srv { color: var(--vt-orange-ink); font-weight: 600 }
.fcard[aria-current="true"] { background: var(--vt-ink); color: var(--vt-paper) }
.fcard[aria-current="true"] .fh, .fcard[aria-current="true"] .fh .n { color: var(--vt-paper) }
.fcard[aria-current="true"] .srv { color: var(--vt-amber-on-hero) }
.vt-dark .fcard[aria-current="true"] .srv { color: var(--vt-srv-on-light) }
.fcard.next { box-shadow: inset 0 0 0 2px var(--vt-flame) }
.factions { flex: none; display: flex; flex-direction: column; gap: var(--s-2); justify-content: center }
.factions .row { gap: var(--s-1) }

/* Выбранный игрок */
.selcard { padding: var(--s-4) }
.selcard > p { color: var(--vt-mute); font-size: var(--fs-sm) }
.sc-head { display: flex; align-items: center; gap: var(--s-3) }
.sc-head b { display: block; font-size: var(--fs-md); font-weight: 700 }
.sc-head span { color: var(--vt-mute); font-size: var(--fs-xs) }
.sc-head .icon-btn { margin-left: auto }
.tok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-num); font-weight: 700; font-size: var(--fs-lg); flex: none; border: 0; padding: 0; box-shadow: inset 0 0 0 2px var(--vt-on-hero-3), 0 0 0 1px var(--vt-stroke-2) }
.tok.f { border-radius: 30% }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-3) }
.stats div { min-width: 0 }
.stats dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-mute) }
.stats dd { margin: 2px 0 0; font-family: var(--f-num); font-weight: 700; font-size: var(--fs-3xl); line-height: 1; font-variant-numeric: tabular-nums }
.stats dd small { font-size: var(--fs-sm); font-weight: 500; color: var(--vt-mute); margin-left: 4px }
.stats dd.warn { color: var(--vt-rose) }
.meter { height: 6px; background: var(--vt-bone-2); border-radius: 99px; overflow: hidden }
.meter i { display: block; height: 100%; background: var(--vt-grass); border-radius: inherit }
.meter i.warn { background: var(--vt-rose) }
.sc-note { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--vt-mute) }

/* Панели свойств */
.panel { display: flex; flex-direction: column; gap: var(--s-2) }
.group { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3) }
.group.list { padding: var(--s-1) var(--s-4); gap: 0 }
.fld { display: flex; flex-direction: column; gap: 8px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.rng { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; min-height: 36px }
.rng input { accent-color: var(--vt-flame); width: 100% }
.rng output { font-size: var(--fs-lg); min-width: 56px; text-align: right }
.stat { font-size: var(--fs-xs); color: var(--vt-mute); font-variant-numeric: tabular-nums }
.res { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm) }
.res .ok { color: var(--vt-grass-ink) } .res .bad { color: var(--vt-rose-ink) }

/* Игроки */
.team { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) }
.team-top .vt-field { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: var(--fs-lg) }
.cnt { font-size: var(--fs-xs); color: var(--vt-mute); font-variant-numeric: tabular-nums }
.cnt.bad { color: var(--vt-rose-ink) }
.prow { display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) var(--tap) var(--tap); grid-template-areas: "tok name name g on" "tok num role role role" ". z z z z"; gap: 8px var(--s-2); align-items: center; padding: var(--s-3) 0 }
.prow + .prow { border-top: 1px solid var(--vt-paper) }
.prow.sel { background: var(--vt-blue-soft-tile); border-radius: 14px; padding-inline: var(--s-2); margin-inline: calc(-1 * var(--s-2)) }
.prow .tok { grid-area: tok; width: 44px; height: 44px; align-self: start; font-size: var(--fs-lg) }
.prow [data-k="name"] { grid-area: name } .prow [data-k="num"] { grid-area: num } .prow [data-k="role"] { grid-area: role }
.prow .gbtn { grid-area: g } .prow .onbox { grid-area: on }
.prow .z { grid-area: z; font-size: var(--fs-xs); color: var(--vt-mute) }
.prow .vt-field { min-height: 40px; font-size: var(--fs-md) }
.gbtn { height: 40px; width: 100%; border: 0; border-radius: 12px; background: var(--vt-ctl); color: var(--vt-ctl-ink); font-family: var(--f-display); font-weight: 700; font-size: var(--fs-md) }
.gbtn.f { background: var(--vt-orange-soft); color: var(--vt-orange-ink) }
.onbox { display: grid; place-items: center; width: var(--tap); height: var(--tap); cursor: pointer }
.onbox .switch { width: 38px; height: 22px } .onbox .switch::after { width: 16px; height: 16px } .onbox .switch:checked::after { transform: translateX(16px) }

/* Схемы */
.lib-body { display: flex; flex-direction: column; gap: var(--s-3) }
.lib-list { display: flex; flex-direction: column; gap: var(--s-2) }
.lib-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-tile); background: var(--vt-bone) }
.lib-item.current { background: var(--vt-blue-soft-tile) }
.lib-open { min-width: 0; display: flex; align-items: center; gap: var(--s-3); border: 0; background: none; padding: 0; text-align: left; min-height: var(--tap); color: var(--vt-ink) }
.lib-open canvas { width: 88px; height: 52px; border-radius: 12px; flex: none }
.lib-text { min-width: 0; display: flex; flex-direction: column; gap: 4px }
.lib-text b { font-size: var(--fs-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lib-text small { color: var(--vt-mute); font-size: var(--fs-xs); font-variant-numeric: tabular-nums }
.lib-text em { color: var(--vt-flame-ink); font-size: var(--fs-xs); font-style: normal; font-weight: 600 }
.lib-actions { display: flex; gap: var(--s-1); justify-content: flex-end; --vt-ctl: var(--vt-paper); --vt-ctl-hover: var(--vt-paper) }
.lib-actions .icon-btn { background: var(--vt-ctl) }
.vt-dark .lib-actions { --vt-ctl: var(--vt-ctl-dark); --vt-ctl-hover: var(--vt-stroke-2) }
.lib-item .vt-field { background: var(--vt-paper) }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-4) }
.empty .ico-tile { width: 72px; height: 72px; border-radius: var(--r-tile); background: var(--vt-orange-soft); color: var(--vt-orange); display: grid; place-items: center }
.empty .ico-tile svg { width: 30px; height: 30px }
.empty h2 { font-size: var(--fs-2xl) }
.empty p { color: var(--vt-mute); font-size: var(--fs-sm); max-width: 32ch }
.tpl-group { display: flex; flex-direction: column; gap: var(--s-2) }
.tpl-group h4 { font-size: var(--fs-sm); color: var(--vt-mute-2) }
#tplList { display: flex; flex-direction: column; gap: var(--s-4) }
.tpl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-4); min-height: 52px; border: 0; border-radius: 14px; background: var(--vt-bone); text-align: left; font-weight: 600; color: var(--vt-ink) }
.tpl:active { background: var(--vt-bone-2) }
.tpl::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--vt-icon-idle); border-top: 2px solid var(--vt-icon-idle); transform: rotate(45deg); flex: none }

/* Док */
.dock { position: fixed; z-index: 30; left: max(var(--s-3), var(--sal)); right: max(var(--s-3), var(--sar)); bottom: calc(var(--s-3) + var(--sab)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--vt-dock); border-radius: var(--r-dock); box-shadow: var(--vt-shadow-float); max-width: 560px; margin: 0 auto }
.dock button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: var(--dock-h); padding: 8px 0 8px; border: 0; background: none; color: var(--vt-dock-idle); font-size: var(--fs-2xs); font-weight: 600 }
.dock button[data-active="true"] { color: var(--vt-white) }
.dock .ico { width: 24px; height: 24px; display: grid; place-items: center }
.dock .ico svg { width: 22px; height: 22px }

/* Шторки и окна */
.modal { position: fixed; inset: 0; z-index: 60; background: var(--vt-scrim); display: grid; place-items: end stretch; padding-top: calc(var(--sat) + 24px) }
.sheet { position: relative; width: 100%; max-height: 92svh; max-height: 92dvh; background: var(--vt-paper); border-radius: 24px 24px 0 0; box-shadow: var(--vt-sheet-shadow); display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--sab); animation: vt-sheet-up .2s ease-out }
.grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--vt-hairline); margin: 8px auto 0; flex: none }
.sheet-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5) }
.sheet-head h2 { flex: 1; font-size: var(--fs-2xl) }
.sheet-body { padding: var(--s-2) var(--s-4) var(--s-5); overflow: auto; display: flex; flex-direction: column; gap: var(--s-3); overscroll-behavior: contain }
.share-hero { padding: var(--s-5); display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center }
.share-hero small { color: var(--vt-on-hero-3) }
.share-hero b { font-family: var(--f-display); font-size: var(--fs-2xl); text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere }
.share-hero p { font-size: var(--fs-sm); color: var(--vt-on-hero-2) }
.qr { display: grid; place-items: center; margin: var(--s-2) 0 }
.qr svg { width: min(220px, 60vw); height: auto; border-radius: 16px; border: 10px solid var(--vt-white); display: block }
.qr .hint { color: var(--vt-on-hero-2) }
.link-row { display: flex; gap: var(--s-2) }
.link-row .vt-field { flex: 1; min-width: 0; font-size: var(--fs-sm) }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s-4); margin: 0; font-size: var(--fs-base) }
.kv dt { color: var(--vt-mute) } .kv dd { margin: 0; font-variant-numeric: tabular-nums }
.modal--center { place-items: center; padding: var(--s-4) }
.dialog { width: min(380px, 100%); background: var(--vt-raised); border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--vt-modal-shadow); display: flex; flex-direction: column; gap: var(--s-3); animation: vt-pop-in .16s ease-out }
.dialog h3 { font-family: var(--f-display); font-size: var(--fs-xl); text-transform: uppercase }
.dialog p { color: var(--vt-mute-2); font-size: var(--fs-base) }
.toast { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + var(--sab) + 26px); background: var(--vt-toast-bg); color: var(--vt-white); padding: 12px var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--vt-toast-shadow); width: max-content; max-width: calc(100% - 32px); display: flex; gap: var(--s-3); align-items: center; animation: vt-toast-in .18s ease-out }
.toast .vt-btn { min-height: 32px; background: var(--vt-white); color: var(--vt-ink-fixed); border-radius: 10px; padding: 0 var(--s-3) }
@keyframes vt-sheet-up { from { transform: translateY(24px); opacity: 0 } }
@keyframes vt-pop-in { from { transform: scale(.97); opacity: 0 } }
@keyframes vt-toast-in { from { transform: translate(-50%, 8px); opacity: 0 } }
@keyframes vt-fade { from { opacity: 0 } }
kbd { font: 600 var(--fs-xs) var(--f-num); border-radius: 6px; padding: 1px 8px; background: var(--vt-paper); box-shadow: var(--vt-seg-shadow) }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: var(--fs-sm); color: var(--vt-mute-2); align-items: center }
@media (hover: none) { .keys-block { display: none } }
.err { color: var(--vt-white); padding: 20px }

/* ============ ≥40rem: планшет ============ */
@media (min-width: 40rem) {
  .only-wide { display: inline-flex !important } .only-wide-block { display: block !important } .only-wide-flex { display: flex !important } .only-wide-inline { display: inline !important }
  .only-narrow, .only-narrow-block, .only-narrow-flex { display: none !important }
  .mh-share { width: auto; padding: 0 var(--s-4) }
  .seg .lbl, .tb-group .lbl { display: inline }
  body[data-tool] .swatches { display: inline-flex }
  .board-wrap { aspect-ratio: 24 / 14; max-height: 78dvh }
  body[data-orient="v"] .board-wrap { aspect-ratio: 14 / 24 }
  .transport { flex-wrap: nowrap }
  .scrub-wrap { order: 0; flex: 1 1 auto }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .modal { place-items: center; padding: calc(var(--s-6) + var(--sat)) var(--s-6) var(--s-6) }
  .sheet { width: min(760px, 100%); max-height: 100%; border-radius: 24px; box-shadow: var(--vt-modal-shadow); padding-bottom: 0; animation: vt-pop-in .16s ease-out }
  .sheet--narrow { width: min(480px, 100%) }
  .grab { display: none }
  .sheet-head { padding: var(--s-4) var(--s-4) var(--s-2) var(--s-6) }
  .sheet-body { padding: var(--s-2) var(--s-6) var(--s-6) }
  .lib-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center }
  .lib-open canvas { width: 104px; height: 61px }
  .screen-head h1 { font-size: var(--fs-4xl) }
}

/* ============ ≥62.5rem: Web shell ============ */
@media (min-width: 62.5rem) {
  .side .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4) }
  html, body { height: 100% }
  .app { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 344px; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--s-3) var(--s-6); padding: calc(var(--s-3) + var(--sat)) var(--s-6) var(--s-5) }
  .mh, .banner { grid-column: 1 / -1 }
  .mh { position: static; padding: 0 0 var(--s-1) }
  .mh-title b { font-family: var(--f-display); font-size: var(--fs-2xl); text-transform: uppercase; font-weight: 700; line-height: 1.05 }
  .mh-actions { gap: var(--s-2) }
  .app[data-tab] .stage-col { display: flex; grid-row: 2 / 4; grid-column: 1; min-height: 0 }
  .app[data-tab] .side { display: flex; grid-row: 2 / 4; grid-column: 2; min-height: 0; overflow: auto; background: var(--vt-bone); border-radius: 24px; padding: var(--s-3); gap: var(--s-3) }
  .banner:not([hidden]) ~ .stage-col, .banner:not([hidden]) ~ .side { grid-row: 3 / 4 }
  .app .lib-screen, .dock { display: none !important }
  .side { --vt-ctl: var(--vt-paper); --vt-ctl-hover: var(--vt-paper); --vt-ctl-lift: var(--vt-shadow-card); --vt-ctl-chip: var(--vt-paper); --vt-ctl-track: var(--vt-paper) }
  .side .group.vt-card, .side .team.vt-card { background: var(--vt-paper); --vt-ctl: var(--vt-bone); --vt-ctl-hover: var(--vt-bone-2); --vt-ctl-lift: none; --vt-ctl-chip: var(--vt-bone-2); --vt-ctl-track: var(--vt-bone-2) }
  .side .list .switch-row + .switch-row, .side .list .list-btn + .list-btn, .side .prow + .prow { border-top-color: var(--vt-bone-2) }
  .vt-dark .side .group.vt-card, .vt-dark .side .team.vt-card { background: var(--vt-raised); --vt-ctl: var(--vt-bone-2); --vt-ctl-hover: var(--vt-ctl-dark) }
  .side-tabs { position: sticky; top: 0; z-index: 2 }
  .side .seg.side-tabs { background: var(--vt-bone-2) }
  .board-wrap { flex: 1 1 auto; aspect-ratio: auto; max-height: none; min-height: 300px }
  body[data-orient="v"] .board-wrap { aspect-ratio: auto }
  .screen-head { padding-top: 0 }
  .screen-head h1 { font-size: var(--fs-3xl) }
  .sec-head { margin-top: 0 }
  .sec-head h2 { font-size: var(--fs-lg) }
  .toast { bottom: calc(var(--s-6) + var(--sab)) }
}
@media (min-width: 62.5rem) and (max-width: 79.99rem) { .seg .lbl, .tb-group .lbl { display: none } }
@media (min-width: 62.5rem) and (max-height: 50rem) { .stage-col .screen-head, .stage-col .sec-head { display: none } }

/* ============ Телефон боком: доска на весь экран, док в потоке ============ */
@media (orientation: landscape) and (max-height: 32rem) and (pointer: coarse) {
  html { scroll-snap-type: y proximity }
  .app { padding-bottom: calc(var(--s-4) + var(--sab)) }
  .board-wrap { aspect-ratio: auto; height: calc(100svh - 16px - var(--sat) - var(--sab)); height: calc(100dvh - 16px - var(--sat) - var(--sab)); max-height: none; scroll-snap-align: start; scroll-margin-top: 8px }
  .board-wrap #board { bottom: 66px }
  .board-wrap .pbar { display: flex; align-items: center; gap: var(--s-2); position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; width: min(640px, calc(100% - 16px)); background: var(--vt-bar-bg); border-radius: var(--r-dock); padding: 4px 8px }
  .board-wrap .hud { top: 10px; bottom: auto }
  .transport { display: none }
  .dock { position: static; margin: var(--s-2) auto 0; width: 100% }
  .toast { bottom: calc(80px + var(--sab)) }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important }
  .sheet, .dialog, .toast { animation-name: vt-fade !important }
}

/* touch: 44px floor for every target */
@media (pointer: coarse) { .seg button { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-2) } .swatch { width: var(--tap) } .chip-btn { min-height: var(--tap) } }
.vt-dark .swatch::before { box-shadow: inset 0 0 0 1.5px var(--vt-swatch-edge-dark) }
.vt-dark .swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--vt-paper), 0 0 0 4px var(--vt-ink) }

/* Телефон, портрет: плеер прилипает над доком, как мини-плеер — Play всегда под пальцем */
@media (max-width: 39.99rem) {
  .transport.vt-card { --vt-ctl: var(--vt-bone); --vt-ctl-hover: var(--vt-bone-2); gap: var(--s-1) var(--s-2) }
  .transport .play { width: 48px; height: 48px }
  .transport .speed-btn { min-width: 52px; padding: 0 var(--s-2) }
  .transport .scrub-wrap { min-height: 28px }
  .transport { position: sticky; bottom: calc(var(--dock-h) + var(--sab) + var(--s-5)); z-index: 25; background: var(--vt-raised); box-shadow: var(--vt-shadow-float); padding: var(--s-2) var(--s-3) }
  .vt-dark .transport.vt-card { --vt-ctl: var(--vt-bone-2); --vt-ctl-hover: var(--vt-ctl-dark) }
  body[data-tab="board"] .toast { bottom: calc(var(--dock-h) + var(--sab) + 144px) }
}