:root {
  --bg: #F3F0EA; --surface: #FFFFFF; --surface-2: #F8F6F2; --surface-3: #EFEBE4;
  --line: #E3DDD3; --line-strong: #D2CABD;
  --ink: #1D1A17; --ink-2: #625B53; --ink-3: #857D73;
  --accent: #E0552E; --accent-soft: #FBE7DF; --accent-ink: #8F3215; --focus: #2F6FEB;
  --o: #1D1A17; --o-ink: #fff; --d: #F4F2EE; --d-ink: #1D1A17;
  --radius: 10px; --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(29, 26, 23, .06), 0 8px 24px rgba(29, 26, 23, .08);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --left-w: 236px; --right-w: 296px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
i[data-icon] { display: inline-flex; width: 18px; height: 18px; }
i[data-icon] svg { width: 100%; height: 100%; }

.app { height: 100dvh; display: grid; grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w); grid-template-rows: 56px minmax(0, 1fr) auto; overflow: hidden; }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); min-width: 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: inherit; text-decoration: none; flex: none; }
.modes { display: flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 9px; flex: none; }
.modes a { padding: 4px 11px; border-radius: 7px; color: var(--ink-2); text-decoration: none; font-size: 13px; }
.modes a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(29,26,23,.12); }
.title-input { min-width: 60px; flex: 1 1 160px; max-width: 360px; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 4px 8px; font-family: var(--serif); font-size: 22px; }
.title-input:hover { border-color: var(--line); }
.saved { font-size: 12px; color: var(--ink-2); flex: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.icon-btn:hover { background: var(--surface-3); }
.btn { height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: #C9471F; }
.btn.small { height: 28px; padding: 0 9px; font-size: 13px; }
.btn.danger { color: #B42318; }
.btn i[data-icon] { width: 16px; height: 16px; }
.only-narrow { display: none; }

.panel { background: var(--surface); min-height: 0; overflow: auto; }
.panel.left { border-right: 1px solid var(--line); }
.panel.right { border-left: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; }
.panel-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.count { color: var(--ink-2); font-weight: 500; }

.cards { list-style: none; margin: 0; padding: 0 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.card { display: flex; gap: 10px; align-items: center; padding: 7px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); width: 100%; text-align: left; }
.card:hover { border-color: var(--line-strong); }
.card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px rgba(224,85,46,.15); }
.card.playing { border-color: var(--ink); }
.card svg { flex: none; border-radius: 6px; display: block; }
.card .meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.card .k { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--ink-2); }
.card .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .s { font-size: 12px; color: var(--ink-2); }

.stage-wrap { position: relative; min-height: 0; overflow: hidden; background: #E9E3D9; }
.stage { position: absolute; inset: 0; }
.stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labels.off { display: none; }
.tag { position: absolute; left: 0; top: 0; font: 700 12px/1 var(--font); padding: 3px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.2); border: 1.5px solid rgba(255,255,255,.9); }
.tag.O { background: var(--o); color: var(--o-ink); }
.tag.D { background: var(--d); color: var(--d-ink); }
.caption { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); width: min(620px, calc(100% - 28px)); background: rgba(29,26,23,.88); color: #fff; border-radius: 12px; padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; pointer-events: none; }
.caption b { font-size: 14px; }
.caption span { color: #E4DDD2; font-size: 13px; }
.stage-toolbar { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; pointer-events: none; }
.stage-toolbar > * { pointer-events: auto; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.seg button, .seg label { border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; font-size: 13px; min-height: 30px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.seg button[aria-pressed="true"], .seg label:has(input:checked) { background: var(--ink); color: #fff; }
.seg.small button { min-height: 26px; padding: 3px 9px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.toggles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13px; }
.chip.on { background: var(--accent-soft); border-color: #F2C4B3; color: var(--accent-ink); }
.pop-wrap { position: relative; }
.pop { position: absolute; top: 36px; left: 0; z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 210px; }
.pop button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; text-align: left; }
.pop button:hover { background: var(--surface-2); }
.pop button[aria-pressed="true"] { font-weight: 600; background: var(--surface-3); }
.pop.court { width: 300px; padding: 12px; max-height: min(70vh, 560px); overflow: auto; }
.court-ctl { display: flex; flex-direction: column; gap: 7px; }
.court-ctl .sub { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.court-ctl .opts .opt { display: inline-flex; align-items: center; gap: 6px; }
.court-ctl input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }
.pop .court-ctl button.opt { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; }
.pop .court-ctl button.swatch { padding: 0; border-radius: 50%; border: 2px solid #fff; }
.sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.18); flex: none; }
.sw + .sw { margin-left: -12px; }
.stage-hint { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: none; max-width: calc(100% - 330px); overflow: hidden; text-overflow: ellipsis; }
.legend { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 10px; padding: 6px 10px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; color: var(--ink-2); }
.legend span { display: flex; align-items: center; gap: 5px; }

.roster { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.roster-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 0 14px; }
.pchip { height: 44px; border-radius: 8px; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; padding: 0; }
.pchip b { font-size: 14px; }
.pchip span { font-size: 10px; opacity: .85; }
.pchip.O { background: var(--o); color: var(--o-ink); }
.pchip.D { background: var(--d); color: var(--d-ink); }
.pchip.on { border-color: var(--accent); box-shadow: 0 0 0 2px #fff inset; }
.pchip.light { border-color: var(--line-strong); }
.pchip.light.on { border-color: var(--accent); }

.insp { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.insp h3 { margin: 0; font-size: 15px; }
.insp .who { display: flex; align-items: center; gap: 10px; }
.insp .who .dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; border: 1px solid rgba(0,0,0,.1); }
.insp .who .sub { font-size: 12px; color: var(--ink-2); }
.group { display: flex; flex-direction: column; gap: 7px; }
.group > .label, .field > span { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--ink-2); text-transform: uppercase; }
.group .help { font-size: 12px; color: var(--ink-2); margin: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 5px; }
.opt { min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; font-size: 13px; }
.opt:hover { border-color: var(--line-strong); }
.opt[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.opt:disabled { color: var(--ink-3); background: var(--surface-2); cursor: default; }
.row { display: flex; align-items: center; gap: 8px; }
.row .grow { flex: 1; min-width: 0; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-strong); padding: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.insp input[type="text"], .insp textarea, .insp select, .field input, .field select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: var(--surface); }
.insp textarea { resize: vertical; min-height: 60px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { width: 32px; height: 32px; border: 0; background: var(--surface-2); }
.stepper output { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.note { font-size: 12px; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin: 0; }

.timeline { grid-column: 1 / -1; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-spacer { flex: 1; }
.play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.play i[data-icon] { width: 16px; height: 16px; }
.now { display: flex; flex-direction: column; line-height: 1.15; min-width: 92px; }
.now b { font-size: 16px; }
.now > span { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shot { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #FFB37A; font-weight: 600; font-variant-numeric: tabular-nums; }
.shot small { font-size: 10px; color: #D9D2C7; font-weight: 500; letter-spacing: .06em; }
.tl-body { position: relative; }
.ruler { height: 16px; position: relative; cursor: ew-resize; border-bottom: 1px solid var(--surface-3); margin-bottom: 4px; touch-action: none; }
.ruler span { position: absolute; top: 0; font-size: 10px; color: var(--ink-3); transform: translateX(-50%); }
.ruler span::after { content: ''; position: absolute; left: 50%; top: 12px; height: 4px; width: 1px; background: var(--line-strong); }
.blocks { display: flex; gap: 0; }
.block { position: relative; min-width: 0; height: 48px; border: 0; border-right: 3px solid var(--surface); border-radius: 8px; background: var(--surface-3); text-align: left; padding: 5px 12px 5px 9px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.block b, .block span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block b { font-size: 13px; }
.block span { font-size: 12px; color: var(--ink-2); }
.block.on { background: var(--accent); color: #fff; }
.block.on span { color: #FFE6DC; }
.lanes { display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow: auto; }
.lane { display: flex; align-items: stretch; }
.lane-cells { display: flex; flex: 1; min-width: 0; }
.cell { min-width: 0; height: 30px; border: 0; border-right: 3px solid var(--surface); border-radius: 6px; padding: 0 8px; font-size: 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell.hold { background: var(--surface-2); color: var(--ink-3); }
.cell.cut { background: #2456D6; color: #fff; }
.cell.dribble { background: repeating-linear-gradient(135deg, #2456D6 0 6px, #3F6BDD 6px 12px); color: #fff; }
.cell.screen { background: var(--ink); color: #fff; }
.cell.ball { background: #FDEBDC; color: var(--accent-ink); }
.cell.ball.ev { border: 1.5px dashed #C2551C; background: #FFF6EE; }
.cell.cur { box-shadow: inset 0 0 0 2px var(--accent); }
.lane-name { width: 0; }
.playhead { position: absolute; top: 0; bottom: -4px; width: 2px; background: var(--ink); pointer-events: none; border-radius: 1px; }
.playhead::before { content: ''; position: absolute; top: 0; left: -4px; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); }

.modal { border: 0; border-radius: 16px; padding: 22px; box-shadow: 0 18px 60px rgba(29,26,23,.25); color: var(--ink); max-width: calc(100vw - 24px); }
.modal::backdrop { background: rgba(29,26,23,.35); }
.modal.wide { width: 1100px; max-height: calc(100dvh - 40px); }
.modal.small { width: 460px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; }
.modal-sub { margin: 4px 0 14px; color: var(--ink-2); }
.modal.pb { padding: 0; width: 1040px; height: min(760px, calc(100dvh - 40px)); overflow: hidden; }
.modal.pb[open] { display: flex; flex-direction: column; }
.pb-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--line); }
.pb-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; }
.pb-head-actions { display: flex; gap: 6px; align-items: center; }
.pb-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.pb-nav { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; background: var(--surface-2); }
.pb-nav button { display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; text-align: left; font-size: 14px; }
.pb-nav button:hover { background: var(--surface-3); }
.pb-nav button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
.pb-nav .n { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.pb-nav hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
.pb-content { overflow: auto; padding: 18px 22px 24px; }
.pb-content h3 { margin: 0; font-size: 18px; }
.pb-desc { margin: 4px 0 16px; color: var(--ink-2); font-size: 13px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.pb-card { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); padding: 0; transition: border-color .15s, box-shadow .15s; }
.pb-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.pb-card > svg { width: 100%; height: auto; display: block; }
.pb-card .t { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.pb-card b { font-size: 14px; }
.pb-card .meta { font-size: 12px; color: var(--ink-2); }
.pb-card .blurb { font-size: 12px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.pb-card .load { position: absolute; top: 8px; right: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; opacity: 0; transition: opacity .15s; }
.pb-card:hover .load, .pb-card:focus-visible .load { opacity: 1; }
.pb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pb-list li { display: flex; align-items: center; gap: 6px; }
.pb-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; }
.pb-row:hover { border-color: var(--line-strong); }
.pb-row svg { flex: none; border-radius: 6px; display: block; }
.pb-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pb-row .t span { font-size: 12px; color: var(--ink-2); }
.badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); margin-right: 6px; }
.icon-btn.danger { color: #B42318; }
.icon-btn.danger:hover { background: #FDECEA; }
.empty { color: var(--ink-2); font-size: 13px; }
@media (max-width: 700px) {
  .pb-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pb-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .pb-nav button { flex: none; gap: 8px; }
  .pb-nav hr { display: none; }
  .pb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pb-card .blurb { display: none; }
}
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.sizes { width: 100%; }
.sizes label { flex: 1; justify-content: center; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; display: flex; gap: 12px; align-items: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { background: transparent; border: 0; color: #FFB37A; font-weight: 600; }

@media (max-width: 1100px) { :root { --left-w: 200px; --right-w: 264px; } .legend { display: none; } .stage-hint { max-width: calc(100% - 24px); } }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .panel.left, .panel.right { position: fixed; top: 56px; bottom: 0; z-index: 20; width: min(320px, 86vw); box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .2s; }
  .panel.right { right: 0; transform: translateX(105%); }
  .panel.left { left: 0; }
  .panel.open { transform: none; }
  .only-narrow { display: inline-flex; }
  .hide-sm { display: none; }
  .saved { display: none; }
  .title-input { font-size: 18px; }
  .stage-hint { display: none; }
  .block span { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
  .modes a { padding: 4px 8px; }
}
@media (max-width: 520px) {
  .brand, .hide-xs { display: none !important; }
  .toggles .chip[data-toggle="tags"] { display: none; }
  .caption { bottom: 12px; }
}

/* ---------- Edit / Watch ---------- */
.mode-seg { flex: none; }
.mode-seg button { min-height: 28px; padding: 3px 12px; }
.watch-side, .edit-this, .play-of { display: none; }
.app.watching { grid-template-columns: 300px minmax(0, 1fr); }
.app.watching .panel.right, .app.watching .edit-only, .app.watching #cards, .app.watching .panel.left > .panel-head, .app.watching [data-tl="lanes"] { display: none !important; }
.app.watching .watch-side { display: flex; flex-direction: column; min-height: 0; }
.app.watching .edit-this { display: inline-flex; position: absolute; right: 12px; top: 12px; box-shadow: var(--shadow); }
.app.watching .play-of { display: block; font-size: 12px; color: var(--ink-2); }
.app.watching .title-input { cursor: default; }
.app.watching .title-input:hover { border-color: transparent; }
.app.watching .block { cursor: pointer; }
.app.watching .stage-toolbar { right: 170px; }
.switch-row { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font-size: 13px; color: var(--ink-2); padding: 4px; }
.switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .15s; }
.switch span { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch-row[aria-checked="true"] .switch { background: var(--accent); }
.switch-row[aria-checked="true"] .switch span { transform: translateX(14px); }
.playlist { list-style: none; margin: 0; padding: 0 10px 16px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pl-cat { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); padding: 12px 4px 4px; }
.pl-item { position: relative; width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; overflow: hidden; }
.pl-item:hover { background: var(--surface-2); }
.pl-item.on { background: var(--accent-soft); border-color: #F2C4B3; }
.pl-item svg { flex: none; border-radius: 6px; display: block; }
.pl-item .t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-item b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item .t > span { font-size: 12px; color: var(--ink-2); }
.pl-item .t > span.pl-now { color: var(--accent-ink); font-weight: 600; }
.pl-item .t > span.pl-next { color: var(--ink); font-weight: 600; }
.pl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(224,85,46,.15); }
.pl-bar span { display: block; height: 100%; background: var(--accent); }
.upnext { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(29,26,23,.22); width: min(520px, calc(100% - 24px)); animation: un-in .25s ease-out; }
@keyframes un-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.un-thumb svg { display: block; border-radius: 8px; }
.un-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.un-k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.un-t b { font-size: 16px; }
.un-t > span:not(.un-k):not(.un-bar) { font-size: 12px; color: var(--ink-2); }
.un-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.un-bar span { display: block; height: 100%; width: 0; background: var(--accent); }
.un-acts { display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .upnext { animation: none; } }
@media (max-width: 900px) {
  .app.watching { grid-template-columns: minmax(0, 1fr); }
  .app.watching .edit-this { top: auto; bottom: 12px; right: 12px; }
  .app.watching .stage-toolbar { right: 12px; }
  .upnext { bottom: 60px; flex-wrap: wrap; }
  .un-acts { flex-direction: row; }
}
@media (max-width: 520px) { .mode-seg button { padding: 3px 8px; } .un-thumb { display: none; } }

/* Team picker */
.team-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.team-sw { border: 0; padding: 2px; border-radius: 50%; background: transparent; aspect-ratio: 1; }
.team-sw span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; font: 700 9px/1 var(--font); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.team-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.pop.court .help { font-size: 12px; color: var(--ink-2); margin: 0; }

.levels { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
.levels button { display: inline-flex; gap: 6px; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.levels button span { font-size: 11px; color: var(--ink-3); }
.levels button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.levels button[aria-pressed="true"] span { color: #CFC8BD; }
.lvl { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; margin-right: 4px; }
.lvl-beginner { background: #E3F1E6; color: #1F6B35; }
.lvl-intermediate { background: #FFF1D6; color: #8A5A00; }
.lvl-advanced { background: #FBE3E1; color: #9B2C22; }

/* First-visit tour */
.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.tour__ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(29, 26, 23, .45); transition: all .25s ease; pointer-events: none; }
.tour__ring[hidden] { display: block !important; left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(29, 26, 23, .45); }
.tour__card { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--surface); border-radius: 14px; padding: 16px 18px 14px; box-shadow: 0 18px 48px rgba(29, 26, 23, .3); pointer-events: auto; transition: left .25s ease, top .25s ease; }
.tour__card h2 { margin: 2px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.tour__card p { margin: 0; color: var(--ink-2); }
.tour__step { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink) !important; }
.tour__acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .tour__ring, .tour__card { transition: none; } }
.pop .team-sw, .team-sw { display: block; width: auto; padding: 2px; border-radius: 50%; }
.pop .team-sw span { width: 100%; aspect-ratio: 1; }
.pop.court:has(.team-row) { width: 340px; }

/* Export */
.field-check { margin-top: 12px; gap: 8px; }
.rec-status { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.rec-status .btn { height: 28px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF4D3A; animation: rec 1s infinite; }
@keyframes rec { 50% { opacity: .3; } }
.app.recording .caption, .app.recording .stage-hint, .app.recording .upnext { visibility: hidden; }
.app.recording .stage-toolbar, .app.recording .edit-this { pointer-events: none; opacity: .4; }

#camera-help { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }

#quality-help { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
.app.recording .stage canvas { object-fit: contain; background: #111; }
#format-help { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
#codec-help { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
#export .modal-head h2 { font-size: 28px; }
#export { max-height: calc(100dvh - 24px); overflow: auto; }

/* Export dialog */
.modal.export { width: 560px; }
.choices { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.choice-grid { display: grid; gap: 8px; }
.choice-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.choice:hover { border-color: var(--line-strong); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice b { font-size: 14px; }
.choice span { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.choice:has(input:checked) { border: 1.5px solid var(--accent); background: var(--accent-soft); padding: 10.5px 11.5px; }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.ratio { display: block; border: 2px solid currentColor; border-radius: 3px; color: var(--ink-3); margin-bottom: 6px; }
.ratio.r169 { width: 32px; height: 18px; }
.ratio.r11 { width: 20px; height: 20px; }
.ratio.r916 { width: 13px; height: 23px; }
.choice:has(input:checked) .ratio { color: var(--accent); }
.choice-grid.three .choice { align-items: flex-start; }
.seg.quality { display: flex; width: 100%; }
.seg.quality label { flex: 1; justify-content: center; }
.checks { display: flex; gap: 18px; flex-wrap: wrap; }
.checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.choices .help { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
#export .note { margin-top: 16px; }
@media (max-width: 520px) { .choice-grid.two, .choice-grid.three { grid-template-columns: minmax(0, 1fr); } .ratio { display: none; } }

.ratio-box { height: 26px; display: flex; align-items: flex-end; margin-bottom: 6px; }
.ratio-box .ratio { margin: 0; }
.app.watching .caption { bottom: 58px; }
.upnext:not([hidden]) ~ .caption { display: none; }
@media (max-width: 900px) { .caption { bottom: 12px; } }

/* Tag style options (preview with ?tags=pin|minimal|plate|floor) */
body[data-tags="pin"] .tag { padding: 4px 9px; font-size: 13px; }
body[data-tags="pin"] .tag::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: inherit; border-top-color: var(--pin, rgba(255,255,255,.9)); }
body[data-tags="pin"] .tag.O { --pin: var(--o); }
body[data-tags="pin"] .tag.D { --pin: var(--d); }
body[data-tags="minimal"] .tag { background: none !important; border: 0; box-shadow: none; padding: 0; font: 800 17px/1 var(--font); color: #fff !important; -webkit-text-stroke: 3px rgba(20,20,20,.85); paint-order: stroke fill; letter-spacing: .02em; }
body[data-tags="minimal"] .tag.D { color: #F4F2EE !important; opacity: .85; font-size: 14px; }
body[data-tags="plate"] .tag { background: rgba(20,19,18,.78) !important; color: #fff !important; border: 0; border-left: 4px solid; border-radius: 6px; padding: 4px 8px 4px 6px; font: 700 12px/1 var(--font); backdrop-filter: blur(4px); }
body[data-tags="plate"] .tag.O { border-left-color: var(--o); }
body[data-tags="plate"] .tag.D { border-left-color: var(--d); opacity: .85; }
body[data-tags="plate"] .tag.O[data-pos]:not([data-pos=""])::after { content: ' · ' attr(data-pos); font-weight: 500; color: #CFC8BD; }
body[data-tags="floor"] .tag { transform-origin: 50% 100%; border-radius: 50%; min-width: 30px; height: 18px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 0 0 2px rgba(255,255,255,.8); border: 0; }

/* ---------- Quiz ---------- */
.quiz-side { display: none; }
.app.quizzing { grid-template-columns: 300px minmax(0, 1fr); }
.app.quizzing .panel.right, .app.quizzing .edit-only, .app.quizzing #cards, .app.quizzing .panel.left > .panel-head, .app.quizzing .watch-side, .app.quizzing [data-tl="lanes"], .app.quizzing .caption, .app.quizzing .legend, .app.quizzing .stage-hint { display: none !important; }
.app.quizzing .quiz-side { display: flex; flex-direction: column; min-height: 0; }
.app.quizzing .title-input { cursor: default; }
.quiz-intro { margin: 0 14px 6px; font-size: 13px; color: var(--ink-2); }
.qs { font-size: 12px; font-weight: 600; }
.qs.ok { color: #1F6B35; }
.qs.no { color: #9B2C22; }
.quiz-banner { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); background: rgba(15,14,13,.82); color: #fff; padding: 8px 16px; border-radius: 999px; font-size: 14px; pointer-events: none; }
.quiz-banner b { color: #FFB37A; }
.quiz-card { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); max-height: calc(100% - 90px); overflow: auto; background: var(--surface); border-radius: 16px; box-shadow: 0 18px 48px rgba(29,26,23,.28); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; animation: un-in .25s ease-out; }
.quiz-k { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.quiz-card h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-choice { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; min-height: 48px; }
.quiz-choice:hover:not(:disabled) { border-color: var(--ink); }
.quiz-letter { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.quiz-choice.right { border: 1.5px solid #2E8B57; background: #E3F1E6; }
.quiz-choice.right .quiz-letter { background: #2E8B57; color: #fff; }
.quiz-choice.wrong { border: 1.5px solid #C0392B; background: #FBE3E1; }
.quiz-choice.wrong .quiz-letter { background: #C0392B; color: #fff; }
.quiz-choice:disabled { cursor: default; }
.quiz-choice:disabled:not(.right):not(.wrong) { opacity: .55; }
.quiz-result { display: flex; flex-direction: column; gap: 8px; }
.quiz-result p { margin: 0; color: var(--ink-2); }
.quiz-verdict { font-weight: 700; font-size: 16px; color: var(--ink) !important; }
.quiz-verdict.ok { color: #1F6B35 !important; }
.quiz-verdict.no { color: #9B2C22 !important; }
.quiz-rule { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; background: var(--accent-soft); border-radius: 8px; color: var(--ink) !important; }
.quiz-rule span { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.quiz-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.quiz-acts .seg { margin-right: auto; }
@media (max-width: 900px) { .app.quizzing { grid-template-columns: minmax(0, 1fr); } .quiz-choices { grid-template-columns: minmax(0, 1fr); } .quiz-card { bottom: 8px; } }

/* After answering, the card docks to the side so the replay shows. */
.quiz-card.answered { left: auto; right: 14px; bottom: 14px; transform: none; width: min(380px, calc(100% - 24px)); animation: none; }
.quiz-card.answered h3 { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.quiz-card.answered .quiz-choices { grid-template-columns: minmax(0, 1fr); }
.quiz-card.answered .quiz-choice:not(.right):not(.wrong) { display: none; }
.quiz-card.answered .quiz-acts { flex-wrap: wrap; }
@media (max-width: 900px) { .quiz-card.answered { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: 55%; } }
.quiz-choices .btn.primary { grid-column: 1 / -1; justify-self: start; height: 40px; }
.quiz-side .panel-head .btn i[data-icon] { width: 14px; height: 14px; }

.quiz-only { display: none !important; }
.app.quizzing .quiz-only { display: inline-flex !important; }
.quiz-filters { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 8px; }
.qf { display: flex; gap: 4px; flex-wrap: wrap; }
.qf button { height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; }
.qf button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.quiz-tools { padding: 0 14px 8px; }

/* Question maker */
.modal.maker { width: 620px; }
.maker-who { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; font: inherit; }
.maker-choice { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr); gap: 6px; align-items: center; }
.maker-choice input:not([type=radio]) { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; }
.maker-radio { position: relative; }
.maker-radio input { position: absolute; opacity: 0; }
.maker-radio span { display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--surface-3); cursor: pointer; }
.maker-radio input:checked + span { background: #2E8B57; color: #fff; }
.maker-radio input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.maker-err { margin: 10px 0 0; color: #B42318; font-size: 13px; min-height: 1em; }
#quizlist li { position: relative; }
.myq-acts { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; }
.myq-acts .icon-btn { width: 28px; height: 28px; background: var(--surface); }
@media (max-width: 560px) { .maker-choice { grid-template-columns: 34px minmax(0, 1fr); } .maker-choice input[name^=w] { grid-column: 2; } }

/* Quiz Short export: the camera is always the player's eyes, so hide the camera choice. */
#export.quiz-export .choices:first-of-type { display: none; }
.app.quizzing .stage canvas { cursor: grab; }
.app.quizzing .stage canvas:active { cursor: grabbing; }
.look-reset { position: absolute; right: 14px; top: 64px; box-shadow: var(--shadow); }
.app.recording .look-reset { display: none; }

/* Overhead map in Your eyes */
.radar { display: none; position: absolute; left: 14px; bottom: 14px; width: 190px; padding: 6px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); pointer-events: none; }
.app.quizzing.pov .radar { display: block; }
.app.recording .radar { display: none !important; }
.radar svg { display: block; width: 100%; height: auto; }
.radar span { position: absolute; top: 8px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.quiz-skip { align-self: flex-start; border: 0; background: transparent; color: var(--ink-2); font-size: 13px; padding: 4px 0; display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.quiz-skip:hover { color: var(--ink); }
.quiz-skip kbd { font: 600 11px var(--font); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 5px; text-decoration: none; background: var(--surface-2); }
@media (max-width: 900px) { .radar { width: 130px; bottom: auto; top: 60px; } }

/* Shown until the first 3D frame is drawn. */
.stage-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--ink-2); pointer-events: none; transition: opacity .35s ease; }
.stage-loading .ld-ball { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0894A, #C9581F 70%); box-shadow: inset 0 0 0 1.5px rgba(30,20,14,.25); animation: ld-bounce .7s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes ld-bounce { from { transform: translateY(-10px); } to { transform: translateY(6px) scale(1.06, .94); } }
body.ready .stage-loading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .stage-loading .ld-ball { animation: none; } }

/* Quiz answer motion: choices rise in, your pick presses, the reveal pops (or shakes), the rest fade. */
.quiz-choice { transition: transform .16s cubic-bezier(.2,.8,.2,1), background-color .22s ease, border-color .22s ease, opacity .25s ease; animation: q-rise .32s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
.quiz-choice.picked { transform: scale(.97); border-color: var(--ink); background: var(--surface-2); }
.quiz-choice.right { animation: q-pop .45s cubic-bezier(.2,.9,.3,1.25); }
.quiz-choice.wrong { animation: q-shake .38s ease; }
.quiz-choice.fade { opacity: .35; }
.quiz-skip { transition: opacity .2s ease; }
.quiz-skip.gone { opacity: 0; pointer-events: none; }
.quiz-result > * { animation: q-rise .36s cubic-bezier(.2,.8,.2,1) backwards; }
.quiz-result > :nth-child(2) { animation-delay: .07s; }
.quiz-result > :nth-child(3) { animation-delay: .14s; }
.quiz-result > :nth-child(4) { animation-delay: .21s; }
#quiz-next kbd { font: 600 10px var(--font); border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 1px 5px; margin-left: 4px; opacity: .85; }
@keyframes q-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes q-pop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes q-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .quiz-choice, .quiz-choice.right, .quiz-choice.wrong, .quiz-result > * { animation: none; } }
/* Keep Next in reach when the explanation is long. */
.quiz-card.answered .quiz-acts { position: sticky; bottom: -16px; margin: 0 -18px -16px; padding: 10px 18px 14px; background: var(--surface); border-top: 1px solid var(--line); }

/* ---------- Quiz home: lands over the court when you open the quiz ---------- */
.qpill { display: none; position: absolute; left: 50%; top: 58px; transform: translateX(-50%); z-index: 4; align-items: center; gap: 2px; padding: 4px; background: rgba(29,26,23,.9); color: #fff; border-radius: 999px; box-shadow: 0 8px 22px rgba(0,0,0,.22); max-width: calc(100% - 24px); }
.app.quizzing .qpill { display: flex; }
.qpill button { height: 34px; min-width: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 13px; white-space: nowrap; }
.qpill button:hover { background: rgba(255,255,255,.12); }
.qpill .qpill-main { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); min-width: 0; overflow: hidden; }
.qpill .qpill-main b { font-variant-numeric: tabular-nums; }
.qpill .qp-t { overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.qpill .qp-me { color: #FFB37A; }
.qpill .qp-caret { opacity: .7; font-size: 11px; }
.app.quizzing .quiz-banner { top: 104px; }

.qhome-wrap { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(29,26,23,.38); }
.qhome-wrap[hidden] { display: none; }
.qhome { width: min(920px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--bg); border-radius: 20px; box-shadow: 0 30px 80px rgba(29,26,23,.4); padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.qh-head { display: flex; align-items: center; gap: 12px; }
.qh-intro { margin: 0; flex: 1; color: var(--ink-2); font-size: 13px; }
.qh-close { flex: none; }
.qh-top { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 14px; }
.qh-next, .qh-stats { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
.qh-next { display: flex; gap: 18px; padding: 16px; align-items: center; }
.qh-thumb { flex: none; width: 190px; border-radius: 12px; overflow: hidden; line-height: 0; }
.qh-thumb svg { width: 100%; height: auto; }
.qh-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qh-k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.qh-copy h2 { margin: 0; font: 400 38px/1 var(--serif); }
.qh-copy p { margin: 0; color: var(--ink-2); font-size: 14px; }
.qh-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qh-acts .btn { height: 42px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.qh-go kbd { font: 600 10px var(--font); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.qh-stats { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.qh-big { display: flex; align-items: baseline; gap: 8px; }
.qh-big b { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.qh-big span, .qh-sub { color: var(--ink-2); font-size: 13px; }
.qh-bar { display: flex; gap: 3px; }
.qh-bar i { flex: 1; height: 9px; border-radius: 3px; background: var(--line-strong); }
.qh-bar i.ok { background: #2E8B57; }
.qh-bar i.no { background: #C0392B; }
.qh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qh-label { font-weight: 600; font-size: 14px; margin-right: 4px; }
.qh-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.qh-chips button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; }
.qh-chips button span { color: var(--ink-3); margin-left: 2px; }
.qh-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.qh-chips button[aria-pressed="true"] span { color: rgba(255,255,255,.6); }
.qh-link { margin-left: auto; border: 0; background: none; color: var(--accent-ink); font-size: 13px; font-weight: 500; padding: 6px 4px; }
.qh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.qh-tile { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.qh-tile:hover { border-color: var(--ink); }
.qh-tile:active { transform: scale(.98); }
.qh-tile.next { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.qh-tile svg { flex: none; border-radius: 6px; }
.qh-tile .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qh-tile b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-tile .t > span:not(.qs) { font-size: 12px; color: var(--ink-2); }
.qh-tile .qs { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }
.qh-empty { color: var(--ink-2); padding: 8px 4px; }
@media (max-width: 760px) {
  .qhome-wrap { padding: 0; align-items: flex-end; }
  .qhome { border-radius: 18px 18px 0 0; max-height: 92%; padding: 14px 14px 20px; }
  .qh-top { grid-template-columns: minmax(0, 1fr); }
  .qh-next { flex-direction: column; align-items: stretch; }
  .qh-thumb { width: 100%; max-height: 150px; }
  .qh-thumb svg { height: 150px; width: 100%; }
  .qh-copy h2 { font-size: 32px; }
  .qh-acts .btn { flex: 1 1 auto; justify-content: center; height: 46px; }
  .qh-go kbd { display: none; }
  .qh-grid { grid-template-columns: minmax(0, 1fr); }
  .qh-link { margin-left: 0; }
  .qpill .qp-me { display: none; }
}
/* The quiz home and the pill replace the side list: the court gets the full width. */
.app.quizzing { grid-template-columns: minmax(0, 1fr) !important; }
.app.quizzing .panel.left { display: none !important; }
@media (max-width: 900px) {
  .qhome-wrap { position: fixed; z-index: 60; }
  .app.quizzing .radar { top: auto; bottom: 10px; width: 120px; }
  .app.quizzing .quiz-banner { top: 100px; font-size: 12px; padding: 6px 12px; }
}
.app.quizzing [data-action="toggle-left"] { display: none !important; }

/* ---------- Phones: give the court the room ---------- */
@media (max-width: 600px) {
  .tl-head { flex-wrap: nowrap; gap: 6px; }
  .tl-head .now { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .tl-head .now b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shot small { display: none; }
  .shot { padding: 5px 8px; }
  #speed { padding: 0 6px; }
  .timeline { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); }
  /* Quiz and watch don't need the beat blocks on a phone; prev/next beat stay in the bar. */
  .app.quizzing .tl-body, .app.watching .tl-body { display: none; }
  .app.quizzing .toggles { display: none !important; }
  .app.quizzing .qpill { top: 54px; }
  .pb-head { flex-wrap: wrap; gap: 10px; padding: 14px 14px 12px 16px; }
  .pb-head-actions { flex-wrap: wrap; }
}
@media (hover: none) and (pointer: coarse) { kbd, .quiz-skip kbd, .qh-go kbd, #quiz-next kbd { display: none !important; } }

/* ---------- Phones: slim top bar with a More menu; compact quiz sheet ---------- */
.only-phone { display: none !important; }
.more-menu { position: absolute; top: 52px; right: 8px; z-index: 70; min-width: 210px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(29,26,23,.22); padding: 6px; display: flex; flex-direction: column; }
.more-menu[hidden] { display: none; }
.more-menu button { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 9px; font-size: 15px; text-align: left; }
.more-menu button:hover, .more-menu button:active { background: var(--surface-2); }
.more-menu i[data-icon] { width: 18px; height: 18px; color: var(--ink-2); }
.topbar { position: relative; }
@media (max-width: 600px) {
  .only-phone { display: inline-flex !important; }
  .topbar-right > :not(.more-btn):not([data-action="undo"]) { display: none !important; }
  .app.quizzing .topbar-right [data-action="undo"], .app.watching .topbar-right [data-action="undo"] { display: none !important; }
  .title-input { flex: 1 1 auto; max-width: none; font-size: 19px; padding: 4px 6px; }
  .app.quizzing .title-input { visibility: hidden; }
  .mode-seg button { padding: 3px 9px; }

  /* Question: smaller type, answers in a 2 × 2 grid, and a handle to tuck it away. */
  .quiz-card { left: 6px; right: 6px; bottom: 6px; width: auto; transform: none; padding: 8px 12px 10px; gap: 7px; border-radius: 14px; max-height: 52%; }
  .quiz-min { align-self: center; width: 64px; height: 20px; margin: -2px 0 -4px; border: 0; background: none; padding: 0; justify-content: center; align-items: center; }
  .quiz-min span { display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--line-strong); }
  .quiz-k { font-size: 10px; margin: 0; }
  .quiz-card h3 { font-size: 14px; line-height: 1.32; }
  .quiz-choices, .app .quiz-choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .quiz-choice { min-height: 46px; padding: 6px 8px; gap: 7px; font-size: 12.5px; line-height: 1.25; border-radius: 9px; }
  .quiz-letter { flex: none; width: 20px; height: 20px; font-size: 11px; }
  .quiz-skip { font-size: 12px; }
  .quiz-card.min { gap: 0; padding-bottom: 8px; }
  .quiz-card.min > :not(.quiz-min):not(.quiz-k) { display: none !important; }
  .quiz-card.min .quiz-k::after { content: ' · tap to answer'; color: var(--ink-3); }
  /* Answer: verdict, the rule and the buttons; the full reason behind "Why?". */
  .quiz-card.answered { left: 6px; right: 6px; bottom: 6px; max-height: 44%; }
  .quiz-card.answered .quiz-choices, .quiz-card.answered h3 { display: none !important; }
  .quiz-card.answered:not(.why) #quiz-explain { display: none; }
  .quiz-why { align-self: flex-start; border: 0; background: none; padding: 2px 0; color: var(--accent-ink); font-weight: 600; font-size: 13px; }
  .quiz-result { gap: 6px; }
  .quiz-verdict { font-size: 15px; }
  .quiz-card.answered .quiz-acts { bottom: -10px; margin: 0 -12px -10px; padding: 8px 12px 10px; }
}
@media (max-width: 600px) { .app.quizzing .radar { bottom: 64px; } }

/* Question maker: three steps */
.modal.maker { width: 700px; max-width: calc(100vw - 16px); }
.maker-intro { margin: 2px 0 6px; color: var(--ink-2); font-size: 13px; }
.maker-step { border-top: 1px solid var(--line); padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.maker-step h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.maker-n { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.maker-step select { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: inherit; background: var(--surface); }
.maker-step .help { margin: 0; font-size: 12px; color: var(--ink-3); }
.maker-moment { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.maker-picks { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.maker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { position: relative; }
.mchip input { position: absolute; opacity: 0; }
.mchip span { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; cursor: pointer; }
.mchip span small { color: var(--ink-3); font-size: 11px; }
.mchip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.mchip input:checked + span small { color: rgba(255,255,255,.65); }
.mchip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.maker-prev { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.maker-prev svg { width: 100%; height: auto; border-radius: 10px; display: block; }
.maker-prev figcaption { font-size: 12px; color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 600px) { .maker-moment { grid-template-columns: minmax(0, 1fr); } .maker-prev { max-width: 260px; } }