/* Copied from the playbook by tools/import-playbook.mjs. Edit it there, not here. */
/* Layout: a coach's board. The rink is the page; one panel beside it (below it on a phone) explains each beat before it runs. */
:root{
  --bg:#E6EDF2; --surface:#F6F9FB; --ink:#0F2233; --muted:#52677A; --line:#C6D3DD;
  --ice:#F5FAFD; --ice-edge:#8FA6B8; --crease:#CFE6F7; --red:#C8102E; --blue:#1D5FB4;
  --us:#14344F; --us-ink:#F5FAFD; --them:#7E8D9A; --them-ink:#4B5A67;
  --hero:#F26B1D; --hero-ink:#1B0E04; --hero-line:#D9540A;
  --puck:#0B0F14; --puck-edge:#0B0F14;
  --hl:rgba(29,95,180,.13); --hl-edge:#1D5FB4; --cone:rgba(82,103,122,.2); --wedge:rgba(242,107,29,.2);
  --good:#16794C; --good-bg:rgba(22,121,76,.14); --bad:#B3122D; --bad-bg:rgba(200,16,46,.12);
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Barlow","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0A141D; --surface:#11202D; --ink:#E7EFF5; --muted:#93A7B7; --line:#243A4D;
  --ice:#16283A; --ice-edge:#40596F; --crease:#1D3E5C; --red:#E5506A; --blue:#5596E6;
  --us:#DDE9F2; --us-ink:#0A141D; --them:#6F8497; --them-ink:#A9BAC8;
  --hero:#FF8A3D; --hero-ink:#1B0E04; --hero-line:#FF9D5C;
  --puck:#05080B; --puck-edge:#E7EFF5;
  --hl:rgba(85,150,230,.16); --hl-edge:#5596E6; --cone:rgba(169,186,200,.17); --wedge:rgba(255,138,61,.22);
  --good:#4CC38A; --good-bg:rgba(76,195,138,.15); --bad:#F0708A; --bad-bg:rgba(229,80,106,.15);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0A141D; --surface:#11202D; --ink:#E7EFF5; --muted:#93A7B7; --line:#243A4D;
  --ice:#16283A; --ice-edge:#40596F; --crease:#1D3E5C; --red:#E5506A; --blue:#5596E6;
  --us:#DDE9F2; --us-ink:#0A141D; --them:#6F8497; --them-ink:#A9BAC8;
  --hero:#FF8A3D; --hero-ink:#1B0E04; --hero-line:#FF9D5C;
  --puck:#05080B; --puck-edge:#E7EFF5;
  --hl:rgba(85,150,230,.16); --hl-edge:#5596E6; --cone:rgba(169,186,200,.17); --wedge:rgba(255,138,61,.22);
  --good:#4CC38A; --good-bg:rgba(76,195,138,.15); --bad:#F0708A; --bad-bg:rgba(229,80,106,.15);
  color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body)}
.wrap{max-width:1080px;margin:0 auto;padding-block:20px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1;margin:0;text-wrap:balance;text-transform:uppercase;letter-spacing:.01em}
p{margin:0}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.top{display:flex;flex-direction:column;gap:8px}
.top h1{font-size:clamp(40px,8vw,68px)}
.top h1 span{color:var(--hero)}
.lede{max-width:62ch;color:var(--muted)}

/* play picker */
.plays{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.plays button{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 10px;border:1.5px solid var(--line);border-radius:4px;
  background:transparent;color:var(--muted);font:600 14px/1 var(--body);cursor:pointer}
.plays button i{font:700 14px/1 var(--body);font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}
.plays button[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.plays button[aria-current="true"] i{color:var(--hero)}
.plays button.done::after{content:"";width:5px;height:10px;margin:-3px 2px 0 1px;border:solid var(--good);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* board */
.board{scroll-margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "panel";gap:14px;align-items:start}
@media (min-width:860px){ .board{grid-template-columns:minmax(0,520px) minmax(0,1fr);grid-template-areas:"stage head" "stage panel";grid-template-rows:auto 1fr;column-gap:28px} }
.phead{grid-area:head;min-width:0;display:flex;flex-direction:column;gap:10px}
.stage{grid-area:stage;width:100%;max-width:520px;margin:0 auto}
#rink{display:block;width:100%;height:auto;touch-action:manipulation}
.panel{grid-area:panel;min-width:0;display:flex;flex-direction:column;gap:14px}
.tag{align-self:flex-start;font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:3px;background:var(--ink);color:var(--bg)}
.tag.off{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.phead h2{font-size:clamp(30px,5vw,44px)}
.steps{display:flex;gap:3px}
.steps span{flex:1;height:5px;border-radius:3px;background:var(--line)}
.steps span.on{background:var(--hero)}
.steps span.gap{margin-left:7px}
.steps span.q{flex:0 0 14px}
.say{min-height:11.5em;max-width:50ch;display:flex;flex-direction:column;gap:7px}
.say.short{min-height:3.2em}
.part{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hero-line)}
.say h3{font-size:27px}
.say p#body{font-size:18px;line-height:1.46}
.say b{font-weight:700;color:var(--hero-line)}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{padding:10px 14px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.go{background:var(--hero);border-color:var(--hero);color:var(--hero-ink);font:800 20px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;padding:10px 22px;min-width:108px}
.btn.sm{padding:8px 10px;font-size:13px;color:var(--muted)}
button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.quiz{display:flex;flex-direction:column;gap:8px}
.quiz h3{font-size:22px;color:var(--hero-line)}
.quiz .q{font-size:18px;font-weight:600;line-height:1.35;max-width:46ch}
.quiz .opt{text-align:left;padding:11px 13px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:500 16px/1.35 var(--body);cursor:pointer}
.quiz .opt:hover:not(:disabled){border-color:var(--ink)}
.quiz .opt:disabled{cursor:default;opacity:.55}
.quiz .opt.right{opacity:1;border-color:var(--good);background:var(--good-bg)}
.quiz .opt.wrong{opacity:1;border-color:var(--bad);background:var(--bad-bg)}
.quiz .why{font-size:16px;line-height:1.45;max-width:48ch}
.quiz .why b{color:var(--good)} .quiz .why.no b{color:var(--bad)}

.rule{border-top:1.5px solid var(--line);padding-top:12px;font-size:16px;max-width:48ch}
.rule span{display:block;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.rule b{font:800 24px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em}
.cues{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.cues li{font:600 13px/1.15 var(--body);padding:6px 9px;border-radius:3px;background:var(--surface);border:1.5px solid var(--line)}

.nums{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;font-size:14px;color:var(--muted)}
.nums b{font:800 18px/1 var(--display);color:var(--ink);margin-left:10px}
.nums b:first-child{margin-left:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.legend div{display:flex;align-items:center;gap:6px}
.legend svg{width:34px;height:14px;flex:0 0 auto}
.key{width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:var(--us)}
.key.me{background:var(--hero)}
.key.them{background:var(--ice);box-shadow:inset 0 0 0 2px var(--them)}
.key.see{border-radius:2px;background:var(--cone);box-shadow:inset 0 0 0 1px var(--them)}

/* game card */
.card{border-top:3px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:12px}
.card h2{font-size:clamp(28px,5vw,40px)}
.card ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 24px}
.card li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.card input{margin:5px 0 0;width:18px;height:18px;accent-color:var(--hero);flex:0 0 auto}
.card label{cursor:pointer}
.card label b{display:block;font:800 21px/1.08 var(--display);text-transform:uppercase}
.card label small{font-size:14px;color:var(--muted);line-height:1.35;display:block;margin-top:3px}
.note{font-size:14px;color:var(--muted);max-width:70ch}

/* lessons / drills switch, and the drill's scoreboard */
[hidden]{display:none!important}
.modes{display:flex;align-self:flex-start;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden}
.modes button{padding:8px 18px;border:0;background:transparent;color:var(--ink);font:800 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.modes button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.board:not(.drill) .drill,.board:not(.drill) .dwhy{display:none}
.board.drill #tag,.board.drill #title,.board.drill #steps,.board.drill #say,.board.drill #quiz,.board.drill .rule,.board.drill #cues,
.board.drill #play,.board.drill #back,.board.drill #next,.board.drill #again,.board.drill #speed{display:none}
.board.drill.aim #rink{cursor:crosshair}
.drill>div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.dhow{font-size:18px;line-height:1.45;max-width:44ch}
.pace{display:flex;flex-wrap:wrap;gap:6px}
.pace button b{font-weight:700;color:var(--ink);margin-left:4px}
.pace button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pace button[aria-pressed="true"] b{color:var(--hero)}
.dbest{font-size:14px;color:var(--muted);min-height:1.5em}
.sb{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;max-width:440px;padding:8px 16px;border-radius:4px;background:var(--ink);color:var(--bg)}
.sb>div:first-child,.sb>div:last-child{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px}
.sb span{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.sb b{font:800 38px/1 var(--display);font-variant-numeric:tabular-nums}
.sb>div:first-child b{color:var(--hero)}
.pucks{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pucks i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.45}
.pucks i.now{opacity:1}
.pucks i.y{background:var(--hero);box-shadow:none;opacity:1}
.pucks i.n{background:currentColor;box-shadow:none;opacity:.5}
.clock{width:100%;max-width:440px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.clock i{display:block;height:100%;background:var(--ink);transform-origin:left center}
.clock i.low{background:var(--bad)}
#d-sit{min-height:12px}
#d-ask{font-size:30px;min-height:30px}
#d-ask.y{color:var(--good)} #d-ask.n{color:var(--bad)} #d-ask.fix{color:var(--hero-line)}
.dwhy{font-size:18px;line-height:1.45;max-width:46ch;min-height:4.4em}
.numb{display:flex;gap:10px}
.numb button{width:88px;height:62px;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);font:800 32px/1 var(--display);cursor:pointer}
.numb button:hover{background:var(--ink);color:var(--bg)}
/* A lesson in your own end is drawn turned over (your net at the bottom). This turns each piece of lettering back the right way up. */
#rink.own text{transform:scale(1,-1);transform-box:fill-box;transform-origin:center}
.numb.wide{flex-wrap:wrap}
.numb.wide button{width:auto;min-width:112px;padding:0 18px;font-size:26px;letter-spacing:.03em;text-transform:uppercase}
.modes.pos{margin-top:4px}
.modes.pos button{font-size:16px;padding:7px 14px}
.final{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.final b{font:800 64px/1 var(--display);font-variant-numeric:tabular-nums}
.final span{font:800 26px/1 var(--display);text-transform:uppercase}
.rev{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#d-day{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.who{display:flex;flex-wrap:wrap;gap:6px}
.who .btn.sm{font-size:16px;color:var(--ink);padding:10px 14px}
.who .btn.sm[aria-pressed="true"]{background:var(--hero);border-color:var(--hero);color:var(--hero-ink)}
.add{display:flex;gap:6px}
.add input{width:150px;padding:8px 10px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:500 16px/1.2 var(--body)}
.btn:disabled{opacity:.5;cursor:default}
.board:not(.drill) .lb{display:none}
.lb{display:flex;flex-direction:column;gap:8px;max-width:440px}
.lb ol{list-style:none;margin:0;padding:0;counter-reset:r;display:flex;flex-direction:column;gap:4px}
.lb li{counter-increment:r;display:grid;grid-template-columns:20px minmax(0,1fr) auto 74px;align-items:baseline;gap:8px;padding:8px 10px;border:1.5px solid var(--line);border-radius:4px;background:var(--surface)}
.lb li::before{content:counter(r);font:800 18px/1 var(--display);color:var(--muted)}
.lb li.me{border-color:var(--hero)}
.lb li span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb li b{font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.lb li small{color:var(--muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.tapm{fill:none;stroke-width:.6} .tapm.y{stroke:var(--good)} .tapm.n{stroke:var(--bad)}

/* rink drawing (units are feet) */
.ice{fill:var(--ice);stroke:var(--ice-edge);stroke-width:.7}
.rl{stroke:var(--red);stroke-width:.3;fill:none}
.gl{stroke:var(--red);stroke-width:.22}
.bl{stroke:var(--blue);stroke-width:1}
.dot{fill:var(--red)}
.crease{fill:var(--crease);stroke:var(--red);stroke-width:.22}
.net{fill:none;stroke:var(--red);stroke-width:.45;transition:fill .25s}
.net.lit{fill:var(--hero)}
.zl{font:600 2.1px var(--body);fill:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.p text{font:700 2.9px var(--display);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.p.us circle.d{fill:var(--us)} .p.us text{fill:var(--us-ink)}
.p.them circle.d{fill:var(--ice);stroke:var(--them);stroke-width:.6} .p.them text{fill:var(--them-ink)}
.p.hero circle.d{fill:var(--hero)} .p.hero text{fill:var(--hero-ink)}
.p.hero circle.halo{fill:none;stroke:var(--hero);stroke-width:.5;opacity:.5;transform-origin:center;transform-box:fill-box;animation:halo 1.8s ease-out infinite}
@keyframes halo{from{transform:scale(.75);opacity:.7}to{transform:scale(1.35);opacity:0}}
.p.pop circle.d{transform-box:fill-box;transform-origin:center;animation:pop .6s ease-out}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.4)}100%{transform:scale(1)}}
.puck{fill:var(--puck);stroke:var(--puck-edge);stroke-width:.3}
.arr{fill:none;stroke:var(--us);stroke-width:.5;stroke-linecap:round;stroke-linejoin:round}
.arr.hero{stroke:var(--hero-line)} .arr.them{stroke:var(--them)}
.arr.pass{stroke:var(--ink);stroke-dasharray:1.5 1.3}
.arr.shot{stroke:var(--ink);stroke-width:1.5;stroke-linecap:butt}
.arr.shot2{stroke:var(--ice);stroke-width:.55;stroke-linecap:butt}
.arr.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:drawon .6s ease-out forwards}
@keyframes drawon{to{stroke-dashoffset:0}}
.head{fill:var(--us)} .head.hero{fill:var(--hero-line)} .head.them{fill:var(--them)} .head.pass,.head.shot{fill:var(--ink)}
.head.late{animation:fade .25s ease-out .4s both}
.hl{fill:var(--hl);stroke:var(--hl-edge);stroke-width:.3;stroke-dasharray:1.1 .9}
.hl.good{fill:var(--good-bg);stroke:var(--good)} .hl.bad{fill:var(--bad-bg);stroke:var(--bad)}
.hl.tri{stroke-dasharray:none;stroke-width:.4}
.hlt{font:800 2.9px var(--display);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--ice);stroke-width:1;stroke-linejoin:round;letter-spacing:.15px;text-transform:uppercase}
.hlt.wl{font-size:2.6px;fill:var(--hero-line);text-transform:none}
.hlt.goal{font-size:4.6px;fill:var(--hero-line)}
.tagt{font:800 2.5px var(--display);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--ice);stroke-width:.9;stroke-linejoin:round;letter-spacing:.14px;text-transform:uppercase}
.lane{stroke:var(--hero-line);stroke-width:.45;stroke-dasharray:.5 1.1;stroke-linecap:round}
.lane.open{stroke:var(--good);stroke-width:.65;stroke-dasharray:none}
.lane.shut{stroke:var(--bad);stroke-width:.55;stroke-dasharray:1.3 1}
.cone{fill:var(--cone)}
.wedge{fill:var(--wedge);stroke:var(--hero-line);stroke-width:.2}
.gapl{stroke:var(--hero-line);stroke-width:.35;stroke-dasharray:.8 .7}
.xmark{stroke:var(--bad);stroke-width:.9;stroke-linecap:round}
.fade{animation:fade .35s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.out{animation:out .28s ease-in both;pointer-events:none}
@keyframes out{to{opacity:0}}
@media (prefers-reduced-motion: reduce){ .p.hero circle.halo{animation:none;opacity:.5} .fade,.head.late,.out,.p.pop circle.d{animation:none} .arr.draw{animation:none;stroke-dashoffset:0} }