:root{
  --bg:#09080b;
  --paper:#0d0d10;
  --paper2:#121217;
  --paper3:#17171d;
  --ink:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.64);
  --faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.27);
  --hard:#fff;
  --atk:#13223a;
  --atk2:#5cc8ff;
  --def:#fff;
  --def2:#ffd254;
  --danger:#ff3b6b;
  --good:#72e6a6;
  --warn:#ffd254;
  --cell:rgba(255,255,255,.05);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);min-width:320px;line-height:1.45}
button,select{font:inherit}
button{color:inherit}
.app-shell{min-height:100vh}
.chrome-toggle{display:none;position:fixed;right:10px;bottom:10px;z-index:80;width:40px;height:40px;padding:0;border:1px solid var(--line2);background:rgba(9,8,11,.9);color:var(--ink);cursor:pointer;backdrop-filter:blur(10px);align-items:center;justify-content:center}
.chrome-toggle:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.chrome-toggle__icon{font-size:1rem;line-height:1}.chrome-toggle__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(360px,1.7fr) minmax(210px,.8fr);gap:18px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line2);background:rgba(9,8,11,.96);backdrop-filter:blur(14px)}
.brand-block{display:flex;gap:12px;align-items:center;min-width:0}.brand-mark{display:grid;place-items:center;width:64px;height:46px;border:1px solid #fff;font-weight:900;letter-spacing:.12em}.brand-title{font-size:.92rem;font-weight:900;letter-spacing:.22em}.brand-sub{margin-top:2px;color:var(--muted);font-size:.66rem;white-space:nowrap}.topbar-center{text-align:center;min-width:0}.topbar-center h1{font-size:1rem;margin:2px 0 3px;letter-spacing:.06em}.topbar-center p{font-size:.72rem;color:var(--muted);margin:0}.match-kicker{display:flex;gap:7px;align-items:center;justify-content:center;color:var(--good);font-size:.65rem;letter-spacing:.06em}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(114,230,166,.08)}
.topbar-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}.select-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.68rem}.select-label select{border:1px solid var(--line2);background:var(--paper);color:var(--ink);padding:8px 28px 8px 9px;border-radius:0}.icon-btn,.text-btn,.nav-btn,.tool-toggle,.analysis-tab,.candidate-btn,.chapter-btn{border:1px solid var(--line2);background:transparent;cursor:pointer;border-radius:0}.icon-btn{width:36px;height:36px;font-weight:900}.icon-btn:hover,.text-btn:hover,.nav-btn:hover,.tool-toggle:hover,.analysis-tab:hover,.candidate-btn:hover,.chapter-btn:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.academy-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(350px,.72fr);gap:0;max-width:1920px;width:100%;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.match-area{min-width:0;padding:14px 16px 18px;border-right:1px solid var(--line2)}
.match-workspace{min-width:0}
.board-column{min-width:0}
.players-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:10px}.player-card{min-width:0;border:1px solid var(--line2);background:var(--paper);padding:10px 12px}.player-card--def{border-top:3px solid var(--def2)}.player-card--atk{border-top:3px solid var(--atk2)}.player-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.player-name{font-weight:900;font-size:.78rem;letter-spacing:.08em}.player-strategy{margin-top:2px;color:var(--muted);font-size:.66rem}.team-badge{font-weight:900;font-size:.67rem;border:1px solid var(--line2);padding:3px 6px}.resource-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.resource-chip{display:flex;gap:5px;align-items:baseline;border:1px solid var(--line);padding:4px 6px;font-size:.66rem}.resource-chip strong{font-size:.82rem}.resource-chip--pe{border-color:rgba(255,210,84,.45)}.resource-chip--pa{border-color:rgba(92,200,255,.35)}.cards-row{display:flex;gap:3px;flex-wrap:wrap;margin-top:8px}.card-token{min-width:29px;text-align:center;border:1px solid var(--line2);padding:2px 4px;font-size:.62rem}.card-token.is-used{opacity:.28;text-decoration:line-through}.card-token.is-used-now{opacity:.8;border-color:var(--danger);color:var(--danger)}.versus-block{display:grid;place-items:center;align-content:center;gap:4px;min-width:92px}.turn-badge{font-weight:900;font-size:.76rem}.phase-label{color:var(--muted);font-size:.62rem;letter-spacing:.14em}
.board-toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--line2);border-bottom:0;background:var(--paper);padding:7px 8px}.toolbar-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.toolbar-group--right{justify-content:flex-end}.toolbar-label{font-size:.64rem;color:var(--muted);margin-right:3px}.tool-toggle{font-size:.63rem;padding:6px 8px}.tool-toggle.is-on{background:#fff;color:#09080b;border-color:#fff}.selected-piece{font-size:.65rem;color:var(--muted)}.text-btn{padding:5px 7px;font-size:.62rem;color:var(--muted)}
.board-stage{position:relative;border:1px solid var(--line2);background:#09080b;min-height:420px}.board-stage svg{display:block;width:100%;height:min(69vh,900px);min-height:520px}.board-legend{position:absolute;left:9px;bottom:8px;display:flex;gap:10px;flex-wrap:wrap;padding:5px 7px;border:1px solid var(--line);background:rgba(9,8,11,.88);font-size:.58rem;color:var(--muted)}.board-legend span{display:flex;gap:4px;align-items:center}.legend-swatch{display:inline-block;width:11px;height:11px;border:1px solid #fff}.legend-atk{background:var(--atk)}.legend-def{background:#fff;border-color:#09080b}.legend-ball{width:9px;height:9px;border-radius:50%;background:var(--danger);border:1px solid #fff}.legend-option{width:12px;height:12px;border:2px dashed var(--warn)}
.timeline-panel{margin-top:10px;min-width:0;max-width:100%;overflow:hidden;border:1px solid var(--line2);background:var(--paper);padding:8px}.timeline-controls{display:flex;align-items:center;gap:8px;min-width:0}.timeline-nav-cluster{display:flex;align-items:center;gap:4px;flex:0 0 auto}.nav-btn{padding:7px 9px;font-size:.66rem}.nav-btn--icon{display:grid;place-items:center;width:33px;height:30px;padding:0;line-height:1}.nav-btn--play{width:38px}.nav-btn--primary{border-color:rgba(255,255,255,.6)}.step-readout{min-width:0;flex:1 1 auto;text-align:right;display:flex;justify-content:flex-end;align-items:center;gap:9px;white-space:nowrap;overflow:hidden}.step-readout strong{font-size:.72rem;flex:0 0 auto}.step-readout span{font-size:.6rem;color:var(--muted);letter-spacing:.12em;overflow:hidden;text-overflow:ellipsis}.chapter-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:7px 0 6px;min-width:0}.chapter-btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 6px;font-size:.56rem;color:var(--muted)}.chapter-btn.is-on{color:#fff;border-color:#fff;background:rgba(255,255,255,.035)}.timeline-scrubber-wrap{position:relative;min-width:0;height:28px;padding:5px 4px 3px}.timeline-scrubber{position:absolute;left:4px;right:4px;top:8px;width:calc(100% - 8px);height:16px;margin:0;z-index:2;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.timeline-scrubber::-webkit-slider-runnable-track{height:2px;background:var(--line2)}.timeline-scrubber::-moz-range-track{height:2px;background:var(--line2)}.timeline-scrubber::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin-top:-5.5px;border-radius:50%;border:2px solid #fff;background:var(--bg);box-shadow:0 0 0 3px rgba(255,255,255,.12)}.timeline-scrubber::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:var(--bg);box-shadow:0 0 0 3px rgba(255,255,255,.12)}.timeline-track{position:absolute;left:10px;right:10px;top:3px;height:24px;z-index:3;pointer-events:none}.timeline-node{position:absolute;top:7px;width:12px;height:12px;transform:translateX(-50%);border:0;background:transparent;cursor:pointer;padding:0;pointer-events:auto}.timeline-node:first-child{transform:none}.timeline-node:last-child{transform:translateX(-100%)}.timeline-dot{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:var(--faint);border:0}.timeline-node.is-important .timeline-dot{width:7px;height:7px;background:var(--warn)}.timeline-node.is-critical .timeline-dot{width:9px;height:9px;background:var(--danger)}.timeline-node.is-current{pointer-events:none}.timeline-node.is-current .timeline-dot{opacity:0}.keyboard-hint{font-size:.55rem;color:var(--faint);text-align:center;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analysis-panel{min-width:0;background:var(--paper);position:sticky;top:79px;height:calc(100vh - 79px);overflow:auto}.analysis-tabs{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--paper);border-bottom:1px solid var(--line2)}.analysis-tab{border:0;border-right:1px solid var(--line);padding:12px 8px;font-size:.68rem;color:var(--muted)}.analysis-tab:last-child{border-right:0}.analysis-tab.is-on{background:#fff;color:#09080b}.analysis-content{padding:13px 14px 30px}.analysis-kicker{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.61rem;color:var(--muted);letter-spacing:.08em}.importance{display:flex;gap:3px}.importance i{width:6px;height:6px;border-radius:50%;background:var(--line2)}.importance i.on{background:var(--warn)}.analysis-title{font-size:1.02rem;margin:7px 0 5px}.analysis-lead{font-size:.76rem;color:var(--muted);margin:0 0 13px}.action-box{border:1px solid var(--line2);padding:10px;background:rgba(255,255,255,.02);margin-bottom:10px}.action-main{font-size:.78rem;font-weight:900}.action-event{font-size:.68rem;color:var(--muted);margin-top:5px}.section-block{border-top:1px solid var(--line);padding-top:11px;margin-top:11px}.section-title{font-size:.63rem;color:var(--muted);letter-spacing:.12em;margin-bottom:7px}.causal-chain{display:grid;gap:5px}.causal-item{display:grid;grid-template-columns:54px 1fr;gap:7px;border-left:2px solid var(--line2);padding:5px 0 5px 8px}.causal-item strong{font-size:.58rem;color:var(--muted)}.causal-item span{font-size:.69rem}.plan-list{margin:0;padding:0;list-style:none;counter-reset:plan}.plan-list li{counter-increment:plan;display:grid;grid-template-columns:24px 1fr;gap:6px;padding:5px 0;border-bottom:1px solid var(--line);font-size:.68rem}.plan-list li::before{content:counter(plan,decimal-leading-zero);color:var(--muted)}.prediction-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:7px;align-items:center;margin:6px 0}.prediction-label{font-size:.66rem}.prob-track{height:7px;background:rgba(255,255,255,.07);position:relative;margin-top:3px}.prob-fill{height:100%;background:var(--atk2)}.prediction-p{font-size:.66rem;text-align:right}.candidate-list{display:grid;gap:5px}.candidate-btn{text-align:left;padding:7px 8px;font-size:.65rem;display:flex;justify-content:space-between;gap:8px}.candidate-btn.is-selected{border-color:var(--warn);background:rgba(255,210,84,.05)}.candidate-score{color:var(--warn)}.note-box{border:1px solid rgba(255,210,84,.45);padding:8px 9px;font-size:.66rem;color:rgba(255,255,255,.82);margin-top:7px}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.metric{border:1px solid var(--line);padding:8px}.metric span{display:block;font-size:.56rem;color:var(--muted);letter-spacing:.06em}.metric strong{display:block;font-size:1rem;margin-top:2px}.metric small{font-size:.55rem;color:var(--faint)}.chart-box{border:1px solid var(--line);padding:7px;margin-top:8px}.chart-box svg{display:block;width:100%;height:132px}.chart-legend{display:flex;gap:9px;font-size:.57rem;color:var(--muted);margin-bottom:4px}.chart-legend i{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:4px}.legend-line-atk{background:var(--atk2)}.legend-line-def{background:var(--def2)}.formula{font-size:.65rem;border-left:2px solid var(--atk2);padding:7px 8px;background:rgba(92,200,255,.04);margin-top:7px;overflow:auto}.formula code{color:#fff}.mini-table{width:100%;border-collapse:collapse;font-size:.62rem}.mini-table th,.mini-table td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:right}.mini-table th:first-child,.mini-table td:first-child{text-align:left}.delta-good{color:var(--good)}.delta-bad{color:var(--danger)}
.demo-note{max-width:1920px;width:100%;margin:0 auto;border:1px solid var(--line);border-top:0;padding:10px 14px;color:var(--muted);font-size:.61rem}.demo-note strong{color:var(--ink)}
.help-dialog{max-width:760px;width:min(92vw,760px);border:1px solid var(--line2);background:var(--paper2);color:var(--ink);padding:18px}.help-dialog::backdrop{background:rgba(0,0,0,.78)}.help-dialog h2{margin:0 0 14px;font-size:1rem}.dialog-close{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#fff;font-size:1.5rem;cursor:pointer}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.help-grid>div{border:1px solid var(--line);padding:10px}.help-grid strong{color:var(--warn)}.help-grid p{font-size:.68rem;color:var(--muted);margin:5px 0 0}
/* SVG */
.board-bg{fill:#09080b}.grid-label{fill:rgba(255,255,255,.55);font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:middle}.playable-cell{fill:url(#playPattern);stroke:rgba(255,255,255,.18);stroke-width:1}.endzone-cell{stroke:rgba(255,255,255,.44);stroke-width:1.5}.heat-cell{pointer-events:none}.piece-group{cursor:pointer}.piece-shape{stroke-width:3}.piece-atk{fill:var(--atk);stroke:#fff}.piece-def{fill:#fff;stroke:#09080b}.piece-label-atk{fill:#fff}.piece-label-def{fill:#09080b}.piece-label{font-size:16px;font-weight:900;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.piece-num{font-size:8px;font-weight:900;text-anchor:middle;pointer-events:none}.piece-status{fill:var(--danger);font-size:12px;font-weight:900}.piece-selected .piece-shape{stroke:var(--warn);stroke-width:5}.ball-dot{fill:var(--danger);stroke:#fff;stroke-width:2;pointer-events:none}.possession-ring{fill:none;stroke:var(--danger);stroke-width:2;stroke-dasharray:4 4;pointer-events:none}.legal-cell{fill:rgba(255,210,84,.06);stroke:var(--warn);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}.legal-cell.move2{stroke-dasharray:2 5}.legal-tag{fill:var(--warn);font-size:9px;font-weight:900;text-anchor:middle;pointer-events:none}.actual-path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:8 6;pointer-events:none}.pass-path{fill:none;stroke:#fff;stroke-width:3;stroke-dasharray:2 7;pointer-events:none}.plan-path{fill:none;stroke:var(--atk2);stroke-width:3;stroke-dasharray:4 6;opacity:.88;pointer-events:none}.candidate-path{fill:none;stroke:var(--warn);stroke-width:3;stroke-dasharray:8 4;pointer-events:none}.path-arrow{fill:#fff}.plan-arrow{fill:var(--atk2)}.candidate-arrow{fill:var(--warn)}.cell-focus{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.38);stroke-width:1}.ball-target{fill:none;stroke:var(--danger);stroke-width:3;stroke-dasharray:4 4;pointer-events:none}
@media(min-width:1181px){
  :root{--academy-header-h:79px;--academy-footer-h:45px}
  body{overflow:hidden}
  .chrome-toggle{display:flex}
  .academy-layout{height:calc(100dvh - var(--academy-header-h) - var(--academy-footer-h));min-height:0}
  .match-area{height:100%;min-height:0;overflow:hidden}
  .match-workspace{display:grid;grid-template-columns:clamp(224px,15vw,272px) minmax(0,1fr);gap:12px;height:100%;min-height:0}
  .players-row{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:start;gap:10px;height:100%;min-height:0;margin:0}
  .versus-block{min-width:0;min-height:66px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
  .player-card{padding:11px 10px}
  .resource-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .resource-chip{justify-content:space-between}
  .cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .card-token{min-width:0}
  .board-column{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;min-height:0}
  .board-stage{height:100%;min-height:0;overflow:hidden}
  .board-stage svg{width:100%;height:100%;min-height:0}
  .timeline-panel{margin-top:10px}
  .analysis-panel{position:relative;top:auto;height:100%;max-height:100%;overflow:auto}
  body.focus-mode .topbar,body.focus-mode .demo-note{display:none}
  body.focus-mode .academy-layout{height:100dvh}
  body.focus-mode .chrome-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
}
@media(min-width:1181px) and (max-width:1480px){
  .match-workspace{grid-template-columns:clamp(202px,14vw,228px) minmax(0,1fr)}
  .timeline-panel{padding:7px}
  .chapter-btn{font-size:.52rem;padding-inline:4px}
  .keyboard-hint{display:none}
}
@media(max-width:1180px){.academy-layout{grid-template-columns:1fr}.match-area{border-right:0}.analysis-panel{position:relative;top:auto;height:auto;border-top:1px solid var(--line2)}.topbar{grid-template-columns:auto 1fr auto}.brand-sub{display:none}.board-stage svg{height:auto;min-height:0}.match-workspace{display:block}.board-column{display:block}}
@media(max-width:760px){.topbar{position:relative;grid-template-columns:1fr auto;padding:10px}.topbar-center{grid-column:1/-1;grid-row:2;text-align:left}.match-kicker{justify-content:flex-start}.topbar-actions{grid-column:2;grid-row:1}.select-label span{display:none}.players-row{grid-template-columns:1fr 1fr}.versus-block{grid-column:1/-1;grid-row:2;display:flex;min-width:0;justify-content:center}.player-card{padding:8px}.board-toolbar{align-items:flex-start;flex-direction:column}.toolbar-group--right{width:100%;justify-content:space-between}.timeline-controls{align-items:center}.timeline-nav-cluster{gap:3px}.nav-btn--icon{width:31px;height:29px}.step-readout{gap:5px}.step-readout span{display:none}.chapter-strip{grid-template-columns:repeat(5,minmax(0,1fr))}.chapter-btn{padding:5px 3px;font-size:.52rem}.keyboard-hint{display:none}.analysis-content{padding:11px}.metric-grid{grid-template-columns:1fr 1fr}.help-grid{grid-template-columns:1fr}.board-legend{position:static;border:0;border-top:1px solid var(--line);background:transparent}.board-stage svg{min-height:0}}

/* BALL Academy v0.4 — desktop control rail + scalable navigation */
.match-sidebar{display:contents}
.timeline-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px;min-width:0}
.timeline-heading{font-size:.61rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.timeline-panel{min-width:0;max-width:100%;overflow:hidden}
.timeline-controls{min-width:0}
.timeline-scrubber-wrap{position:relative;min-width:0;height:30px;padding:6px 2px 3px}
.timeline-scrubber{position:static;width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.timeline-scrubber::-webkit-slider-runnable-track{height:2px;background:var(--line2)}
.timeline-scrubber::-moz-range-track{height:2px;background:var(--line2)}
.timeline-scrubber::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;margin-top:-5.5px;border-radius:50%;border:2px solid #fff;background:var(--bg);box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.timeline-scrubber::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:var(--bg);box-shadow:0 0 0 3px rgba(255,255,255,.12)}

@media(min-width:1181px){
  .academy-layout{grid-template-columns:minmax(0,1.58fr) minmax(350px,.68fr)}
  .match-area{padding:10px 12px 12px}
  .match-workspace{
    display:grid;
    grid-template-columns:clamp(230px,16vw,286px) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "players board"
      "toolbar board"
      "timeline board";
    gap:9px 12px;
    height:100%;min-height:0
  }
  .players-row{grid-area:players;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:7px;height:auto;min-height:0;margin:0}
  .player-card{padding:8px 9px}
  .player-strategy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .versus-block{display:flex;justify-content:space-between;align-items:center;min-width:0;min-height:38px;padding:6px 8px;border:1px solid var(--line);background:rgba(255,255,255,.015)}
  .resource-row{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px}
  .resource-chip{padding:3px 5px}
  .cards-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:6px}
  .card-token{min-width:0;padding:2px 2px}

  .board-toolbar{grid-area:toolbar;display:grid;grid-template-columns:1fr;gap:7px;align-items:stretch;border:1px solid var(--line2);background:var(--paper);padding:8px}
  .board-toolbar .toolbar-group{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:stretch}
  .board-toolbar .toolbar-label{grid-column:1/-1;margin:0 0 1px;font-size:.59rem;letter-spacing:.1em;text-transform:uppercase}
  .board-toolbar .tool-toggle{min-width:0;padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .board-toolbar .toolbar-group--right{grid-template-columns:minmax(0,1fr) auto;border-top:1px solid var(--line);padding-top:7px}
  .board-toolbar .selected-piece{align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .timeline-panel{grid-area:timeline;align-self:start;margin:0;padding:8px}
  .timeline-head{display:block;margin-bottom:7px}
  .timeline-head .step-readout{margin-top:3px;display:flex;justify-content:space-between;text-align:left;gap:5px}
  .timeline-head .step-readout span{max-width:65%;text-align:right}
  .timeline-controls{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;grid-template-areas:"pi prev prev" "play play play" "next next ni";gap:5px}
  .timeline-controls #prevImportant{grid-area:pi}
  .timeline-controls #prevStep{grid-area:prev}
  .timeline-controls #playPause{grid-area:play}
  .timeline-controls #nextStep{grid-area:next}
  .timeline-controls #nextImportant{grid-area:ni}
  .timeline-controls .nav-btn{width:100%;min-width:0;padding:6px 5px;font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .timeline-controls .nav-btn--play{width:100%}
  .chapter-strip{grid-template-columns:1fr 1fr;gap:4px;margin:7px 0 5px}
  .chapter-btn{padding:5px 4px;font-size:.52rem}
  .chapter-btn:last-child:nth-child(odd){grid-column:1/-1}
  .keyboard-hint{white-space:normal;line-height:1.35;text-align:left}

  .board-column{grid-area:board;display:block;height:100%;min-height:0}
  .board-stage{height:100%;min-height:0;overflow:hidden}
  .board-stage svg{display:block;width:100%;height:100%;min-height:0}
}

@media(min-width:1181px) and (max-width:1480px){
  .match-workspace{grid-template-columns:clamp(218px,16vw,246px) minmax(0,1fr)}
  .player-card{padding:7px 8px}
  .player-name{font-size:.72rem}.player-strategy{font-size:.59rem}
  .resource-chip{font-size:.59rem}.resource-chip strong{font-size:.74rem}
  .card-token{font-size:.56rem}
  .board-toolbar{padding:7px}.board-toolbar .tool-toggle{font-size:.56rem;padding:5px 3px}
  .timeline-panel{padding:7px}
  .keyboard-hint{display:none}
}

@media(max-width:1180px){
  .match-workspace{display:grid;grid-template-columns:1fr;grid-template-areas:"players" "toolbar" "board" "timeline";gap:10px}
  .players-row{grid-area:players;margin:0}
  .board-toolbar{grid-area:toolbar;border:1px solid var(--line2)}
  .board-column{grid-area:board}
  .timeline-panel{grid-area:timeline;margin:0}
  .timeline-controls{display:grid;grid-template-columns:auto auto minmax(120px,1fr) auto auto;gap:5px;align-items:center}
  .timeline-controls .nav-btn--play{width:auto}
  .chapter-strip{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media(max-width:760px){
  .timeline-head{align-items:center}
  .timeline-head .step-readout{display:block;text-align:right}
  .timeline-head .step-readout span{display:block;margin-top:2px}
  .timeline-controls{grid-template-columns:40px minmax(0,1fr) 40px;grid-template-areas:"pi prev ni" "play play next";gap:5px}
  .timeline-controls #prevImportant{grid-area:pi}
  .timeline-controls #prevStep{grid-area:prev}
  .timeline-controls #playPause{grid-area:play}
  .timeline-controls #nextStep{grid-area:next}
  .timeline-controls #nextImportant{grid-area:ni}
  .timeline-controls .nav-btn{width:100%;padding:7px 5px;font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chapter-strip{grid-template-columns:1fr 1fr}
  .chapter-btn:last-child:nth-child(odd){grid-column:1/-1}
}

@media(min-width:1181px){
  .players-row{gap:5px}
  .player-card{padding:6px 7px}
  .player-head{gap:5px}.player-name{font-size:.69rem}.player-strategy{font-size:.52rem}
  .team-badge{font-size:.56rem;padding:2px 4px}
  .resource-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:5px}
  .resource-chip{display:block;text-align:center;padding:3px 2px;font-size:.52rem;white-space:nowrap;overflow:hidden}
  .resource-chip strong{display:block;font-size:.68rem}
  .cards-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-top:5px}
  .card-token{padding:2px 1px;font-size:.5rem}
  .versus-block{min-height:32px;padding:4px 6px}.turn-badge{font-size:.66rem}.phase-label{font-size:.52rem}

  .board-toolbar{gap:5px;padding:6px}
  .board-toolbar .toolbar-group{gap:3px}
  .board-toolbar .toolbar-label{font-size:.52rem}
  .board-toolbar .tool-toggle{font-size:.53rem;padding:5px 2px}
  .board-toolbar .toolbar-group--right{padding-top:5px}
  .board-toolbar .selected-piece{font-size:.52rem}.board-toolbar .text-btn{font-size:.52rem;padding:4px 5px}

  .timeline-panel{padding:6px}
  .timeline-head{margin-bottom:4px}.timeline-heading{font-size:.52rem}
  .timeline-head .step-readout{margin-top:2px}.step-readout strong{font-size:.63rem}.step-readout span{font-size:.49rem}
  .timeline-controls{grid-template-columns:34px minmax(0,1fr) minmax(0,.72fr);grid-template-areas:"pi prev play" "next next ni";gap:3px}
  .timeline-controls .nav-btn{padding:5px 3px;font-size:.54rem;height:27px}
  .chapter-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:5px 0 3px}
  .chapter-btn{padding:4px 1px;font-size:.45rem}
  .chapter-btn:last-child:nth-child(odd){grid-column:auto}
  .timeline-scrubber-wrap{height:23px;padding:3px 1px 1px}
  .timeline-scrubber{height:16px}
  .keyboard-hint{display:none}
}

/* v0.4.1 — preserve the original labelled transport controls in the narrow desktop rail. */
@media (min-width:1181px){
  .timeline-controls{
    grid-template-columns:34px minmax(0,1fr) 34px;
    grid-template-areas:
      "pi prev prev"
      "play play play"
      "next next ni";
    gap:3px;
  }
  .timeline-controls #prevImportant{grid-area:pi}
  .timeline-controls #prevStep{grid-area:prev}
  .timeline-controls #playPause{grid-area:play}
  .timeline-controls #nextStep{grid-area:next}
  .timeline-controls #nextImportant{grid-area:ni}
  .timeline-controls .nav-btn{height:27px;padding:5px 4px;font-size:.56rem;overflow:visible;text-overflow:clip}
}


/* BALL Academy v0.5 — log didáctico + ayuda contextual */
.academy-utility-controls{display:none;position:fixed;right:10px;bottom:10px;z-index:90;align-items:stretch;gap:5px}
.academy-utility-controls .chrome-toggle{position:static;display:flex;width:auto;height:36px;padding:0 10px;gap:7px;border:1px solid var(--line2);background:rgba(9,8,11,.94);align-items:center;justify-content:center;backdrop-filter:blur(10px)}
.academy-utility-controls .chrome-toggle__text{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:nowrap;font-size:.58rem;color:var(--ink)}
.academy-help-toggle{width:36px;height:36px;border:1px solid #ffe16b;background:var(--warn);color:#09080b;font-weight:1000;font-size:.9rem;cursor:pointer}
.academy-help-toggle:hover{background:#ffe47f;border-color:#fff}
.academy-help-toggle.is-on{background:#fff;color:#09080b;border-color:#fff}
body.focus-mode .academy-utility-controls .chrome-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}

.match-log{min-width:0;border:1px solid var(--line2);background:var(--paper);overflow:hidden}
.match-log__summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.match-log__summary::-webkit-details-marker{display:none}
.match-log__summary::before{content:'▾';font-size:.55rem;color:var(--muted);margin-right:2px}
.match-log:not([open]) .match-log__summary::before{content:'▸'}
.match-log__heading{flex:1;font-size:.58rem;color:var(--muted);letter-spacing:.11em;text-transform:uppercase}
.match-log__readout{font-size:.55rem;color:var(--faint);white-space:nowrap}
.match-log__entries{height:100%;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.match-log__event{padding:7px 8px;border-bottom:1px solid rgba(255,255,255,.07);border-left:2px solid transparent;background:transparent}
.match-log__event:last-child{border-bottom:0}
.match-log__event.is-current{border-left-color:var(--warn);background:rgba(255,210,84,.055)}
.match-log__meta{font-size:.49rem;color:var(--faint);letter-spacing:.07em;margin-bottom:2px}
.match-log__main{font-size:.59rem;line-height:1.35;color:rgba(255,255,255,.9)}
.match-log__main strong{font-weight:1000}.match-log__main b{color:var(--warn)}
.match-log__cost{display:inline-block;margin-left:3px;color:var(--warn);white-space:nowrap}
.match-log__detail{display:flex;gap:3px 7px;flex-wrap:wrap;margin-top:2px;font-size:.52rem;color:var(--muted);line-height:1.3}
.match-log__detail span+span::before{content:'·';margin-right:7px;color:var(--faint)}

.context-help-layer{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden}
.context-help-callout{position:fixed;width:min(230px,calc(100vw - 16px));padding:7px 8px;background:var(--warn);color:#09080b;border:1px solid #fff;box-shadow:0 5px 22px rgba(0,0,0,.28);font-family:var(--mono);line-height:1.25}
.context-help-callout strong{display:block;font-size:.62rem;margin-bottom:2px}
.context-help-callout span{display:block;font-size:.55rem}
body.help-mode [data-help-key]{outline:1px solid rgba(255,210,84,.72);outline-offset:2px}

@media(min-width:1181px){
  .academy-utility-controls{display:flex}
  .match-workspace{display:grid;grid-template-columns:clamp(244px,17vw,302px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:none;gap:10px 12px;height:100%;min-height:0}
  .match-sidebar{display:grid;grid-template-rows:auto auto minmax(104px,1fr) auto;gap:7px;min-height:0;overflow:hidden}
  .players-row{grid-area:auto;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:5px;height:auto;min-height:0;margin:0}
  .player-card{padding:6px 7px}
  .resource-row{grid-template-columns:1fr 1fr;gap:3px;margin-top:5px}
  .resource-chip{display:flex;justify-content:space-between;text-align:left;padding:3px 5px;font-size:.50rem;white-space:nowrap;overflow:visible}
  .resource-chip strong{display:inline;font-size:.65rem}
  .cards-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-top:5px}
  .board-toolbar{grid-area:auto;margin:0}
  .match-log{grid-area:auto;min-height:0;display:flex;flex-direction:column}
  .match-log[open] .match-log__entries{flex:1;min-height:0;height:auto}
  .timeline-panel{grid-area:auto;align-self:auto;margin:0;padding:6px}
  .board-column{grid-area:auto;display:block;height:100%;min-height:0}
  .match-sidebar:has(.match-log:not([open])){grid-template-rows:auto auto auto auto}
  .board-stage{height:100%}
}

@media(min-width:1181px) and (max-height:780px){
  .match-sidebar{grid-template-rows:auto auto minmax(82px,1fr) auto;gap:5px}
  .match-log__summary{padding:5px 7px}.match-log__event{padding:5px 7px}.match-log__detail{display:none}
  .chapter-strip{margin:3px 0 2px}.timeline-scrubber-wrap{height:20px;padding-top:1px}
  .timeline-controls .nav-btn{height:25px;padding-block:4px}
}

@media(max-width:1180px){
  .academy-utility-controls{display:flex;right:8px;bottom:8px}
  .academy-utility-controls .chrome-toggle{display:none}
  .match-workspace{display:grid;grid-template-columns:1fr;grid-template-areas:'players' 'toolbar' 'board' 'log' 'timeline';gap:10px}
  .match-sidebar{display:contents}
  .players-row{grid-area:players}.board-toolbar{grid-area:toolbar}.board-column{grid-area:board}.match-log{grid-area:log}.timeline-panel{grid-area:timeline}
  .match-log__entries{max-height:210px}
}

@media(max-width:760px){
  .match-log__entries{max-height:165px}
  .context-help-callout{width:min(205px,calc(100vw - 16px));padding:6px 7px}
  .context-help-callout strong{font-size:.58rem}.context-help-callout span{font-size:.51rem}
}

/* v0.7 integrated simulator */
.academy-utility-controls .chrome-toggle{display:flex!important}
body.site-focus .academy-utility-controls .chrome-toggle{display:flex!important}

/* V0.8 embedded in the canonical BALL shell. Site navigation lives in parent document. */
@media(min-width:761px){.academy-embedded .topbar{grid-template-columns:minmax(220px,.8fr) minmax(360px,2.2fr)}}
@media(max-width:760px){.academy-embedded .topbar{grid-template-columns:1fr}.academy-embedded .topbar-center{grid-column:1;grid-row:2}}


/* V1.1 — Focus is opt-in and the recovery control never competes with cookie settings. */
.academy-embedded .academy-utility-controls{
  display:flex!important;
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  justify-self:end;
}
.academy-embedded .academy-utility-controls .chrome-toggle{
  position:static!important;
  display:flex!important;
  width:auto!important;
  height:36px!important;
  padding:0 10px!important;
  gap:7px;
}
.academy-embedded .academy-utility-controls .chrome-toggle__text{
  position:static!important;
  width:auto!important;
  height:auto!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
}
@media(min-width:761px){
  .academy-embedded .topbar{grid-template-columns:minmax(220px,.8fr) minmax(360px,2.2fr) auto!important}
}
@media(max-width:760px){
  .academy-embedded .topbar{grid-template-columns:minmax(0,1fr) auto!important}
  .academy-embedded .academy-utility-controls{grid-column:2;grid-row:1}
  .academy-embedded .topbar-center{grid-column:1/-1;grid-row:2}
  .academy-embedded .academy-utility-controls .chrome-toggle__text{font-size:.54rem}
}

/* In focus mode the content header collapses to a compact escape bar rather than disappearing. */
body.academy-embedded.focus-mode .topbar{
  display:grid!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  min-height:48px!important;
  height:48px!important;
  grid-template-columns:1fr!important;
  padding:6px 10px!important;
  border-bottom:1px solid var(--line2)!important;
  background:rgba(9,8,11,.97)!important;
}
body.academy-embedded.focus-mode .topbar .brand-block,
body.academy-embedded.focus-mode .topbar .topbar-center{display:none!important}
body.academy-embedded.focus-mode .topbar .academy-utility-controls{
  display:flex!important;
  grid-column:1!important;
  grid-row:1!important;
  justify-self:end!important;
}
body.academy-embedded.focus-mode .academy-utility-controls .chrome-toggle{
  background:var(--warn)!important;
  color:#09080b!important;
  border-color:#fff!important;
  box-shadow:0 0 0 2px rgba(255,210,84,.18)!important;
}
body.academy-embedded.focus-mode .academy-utility-controls .chrome-toggle__text{color:#09080b!important;font-weight:1000!important}
body.academy-embedded.focus-mode .academy-utility-controls .chrome-toggle:hover,
body.academy-embedded.focus-mode .academy-utility-controls .chrome-toggle:focus-visible{background:#ffe47f!important;color:#09080b!important}
body.academy-embedded.focus-mode .demo-note{display:none!important}
@media(min-width:1181px){
  body.academy-embedded.focus-mode .academy-layout{height:calc(100dvh - 48px)!important}
}
@media(max-width:520px){
  .academy-embedded:not(.focus-mode) .brand-block>div:last-child{display:none!important}
  .academy-embedded .academy-utility-controls .chrome-toggle{max-width:calc(100vw - 128px)!important;min-width:0!important}
  .academy-embedded .academy-utility-controls .chrome-toggle__text{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .academy-embedded .academy-help-toggle{width:34px;height:36px;flex:0 0 34px}
}