/* Fonts are served with the app (SIL Open Font License, see fonts/), not from a font CDN. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
/* Layout: one-screen tool. Header tray (play, modes, cams, view) / board stage with HUD, view controls and camera tiles / step dock. */
:root{
  --bg:#EEF1F5; --panel:#FFFFFF; --panel-2:#F6F8FB; --fg:#17202E; --muted:#5B6678; --line:#D5DBE4;
  --accent:#2450C8; --accent-soft:#E3EAFB; --home:#D62839; --away:#2A2F37; --away-ring:#2A2F37;
  --stage:#D7DCE4; --tray:#E6EAF0; --scrim:rgba(17,22,30,.38);
  --risk:#D92D3A; --risk-soft:#FDE7E8; --safe:#1D8A4E; --safe-soft:#E2F4EA; --warn:#B86E00; --warn-soft:#FCF0DC;
  --shadow:0 6px 24px rgba(23,32,46,.12);
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111419; --panel:#1A1E25; --panel-2:#20252D; --fg:#E6EAF0; --muted:#8D97A8; --line:#2B313B;
  --accent:#7296FF; --accent-soft:#1F2B4B; --home:#EE4553; --away:#2A2F37; --away-ring:#9AA3B1;
  --stage:#0C0E12; --tray:#151920; --scrim:rgba(0,0,0,.55);
  --risk:#FF5A64; --risk-soft:#3A1A1E; --safe:#46C07E; --safe-soft:#15301F; --warn:#F0A940; --warn-soft:#33270F;
  --shadow:0 6px 24px rgba(0,0,0,.45); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111419; --panel:#1A1E25; --panel-2:#20252D; --fg:#E6EAF0; --muted:#8D97A8; --line:#2B313B;
  --accent:#7296FF; --accent-soft:#1F2B4B; --home:#EE4553; --away:#2A2F37; --away-ring:#9AA3B1;
  --stage:#0C0E12; --tray:#151920; --scrim:rgba(0,0,0,.55);
  --risk:#FF5A64; --risk-soft:#3A1A1E; --safe:#46C07E; --safe-soft:#15301F; --warn:#F0A940; --warn-soft:#33270F;
  --shadow:0 6px 24px rgba(0,0,0,.45); color-scheme:dark}

[hidden]{display:none!important}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;overflow:hidden}
.app{height:100%;display:grid;grid-template-rows:auto minmax(160px,1fr) auto;grid-template-columns:minmax(0,1fr)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.top{position:relative;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;background:var(--panel);border-bottom:1px solid var(--line);
  padding-block:9px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.mark{width:28px;height:28px;border-radius:50%;background:var(--home);flex:none;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.22),inset 0 -3px 0 rgba(0,0,0,.18)}
.mark::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;right:-7px;bottom:-4px;background:var(--away);border:2px solid var(--panel)}
.app-name{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.03em;line-height:1}
.playpick{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:5px 10px 5px 6px;min-width:0;max-width:min(330px,58vw)}
.playpick:hover{border-color:var(--muted)}
.cat{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;flex:none;background:var(--accent-soft);color:var(--accent)}
.cat[data-sport="football"]{background:var(--safe-soft);color:var(--safe)}
.playpick .pn{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.playpick .fm{font-size:12px;color:var(--muted);white-space:nowrap}
.caret{width:12px;height:12px;flex:none;color:var(--muted)}
.spacer{flex:1}
.seg{display:inline-flex;background:var(--tray);border-radius:10px;padding:3px;gap:2px;border:1px solid var(--line)}
.seg button{border:0;background:transparent;padding:6px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.seg svg{width:16px;height:16px}
.drawtools{display:flex;align-items:center;gap:6px}
.marker{width:22px;height:30px;border-radius:5px 5px 3px 3px;border:2px solid transparent;padding:0;position:relative;transition:transform .12s}
.marker::after{content:"";position:absolute;left:3px;right:3px;top:3px;height:7px;border-radius:2px;background:rgba(255,255,255,.35)}
.marker[aria-pressed="true"]{border-color:var(--fg);transform:translateY(-3px)}
.tbtn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 10px;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.tbtn:hover:not(:disabled){background:var(--tray)}
.tbtn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn.pri:hover{background:var(--accent);filter:brightness(1.08)}
.tbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.tbtn svg{width:16px;height:16px}
.danger{color:var(--risk)}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{appearance:none;width:34px;height:20px;border-radius:10px;background:var(--line);position:relative;margin:0;cursor:pointer;transition:background .15s;flex:none}
.switch input::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;top:2px;left:2px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{left:16px}

/* library */
.lib{position:fixed;z-index:30;top:calc(var(--toph,56px) + 6px);left:max(16px,env(safe-area-inset-left,0px));width:min(560px,calc(100vw - 32px));max-height:min(74vh,640px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:14px}
.lib h3{margin:0 0 6px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.item{border:1.5px solid var(--line);background:var(--panel-2);border-radius:12px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:6px}
.item:hover{border-color:var(--muted)}
.item[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.item svg{width:100%;height:auto;display:block;border-radius:6px}
.item .in{font-weight:700;font-size:13px}
.item .id{font-size:11.5px;color:var(--muted);line-height:1.35}
.credit{flex-basis:100%;font-size:11.5px;color:var(--muted)}.credit a{color:var(--accent)}
.libfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}

/* stage */
.stage{position:relative;background:var(--stage);overflow:hidden}
#board{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.stage[data-mode="draw"] #board{cursor:crosshair}
.stage[data-mode="move"] #board,.stage[data-mode="edit"] #board{cursor:grab}
.stage.grabbing #board{cursor:grabbing}
.hud{position:absolute;top:10px;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;pointer-events:none;z-index:4}
.hud > *{pointer-events:auto}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 8px;font-size:12px;display:flex;align-items:center;gap:8px;max-width:100%;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.ring{width:14px;height:14px;border-radius:50%;border:2px dashed var(--home);flex:none}
.pill{border-radius:999px;padding:6px 14px 6px 10px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.08);background:var(--panel);border:1px solid var(--line);margin-inline:auto}
.pill svg{width:16px;height:16px;flex:none}
.pill[data-kind="risk"]{background:var(--risk-soft);border-color:var(--risk);color:var(--risk)}
.pill[data-kind="warn"]{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.pill[data-kind="steal"]{background:var(--safe-soft);border-color:var(--safe);color:var(--safe)}
.pill[data-kind="ok"]{color:var(--muted);font-weight:400}
.pill .fakebtn,.pill .crossbtn{padding:2px 9px;font-size:12px;font-weight:700;margin-left:4px;color:var(--fg)}
.pill .crossbtn[aria-pressed="true"],.pill .fakebtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.pill[data-kind="risk"].pulse{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--risk) 22%,transparent)}}
.ovchip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 5px 5px 12px;font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-left:auto}
.ovchip .tbtn{padding:5px 9px;font-size:12px}
.pin{width:10px;height:10px;border-radius:50%;background:#FF8A1F;flex:none}
.legend{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:10px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);pointer-events:none;z-index:2}
.legend span{display:inline-flex;align-items:center;gap:6px}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.vctl{position:absolute;left:max(12px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;z-index:4;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.vbtn{width:34px;height:34px;border:0;border-radius:8px;background:transparent;display:grid;place-items:center;color:var(--fg)}
.vbtn:hover{background:var(--tray)}
.vbtn svg{width:17px;height:17px}
.toast{position:absolute;left:50%;bottom:34px;transform:translate(-50%,8px);background:var(--fg);color:var(--panel);padding:9px 14px;border-radius:10px;z-index:9;
  font-size:13px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* camera tiles */
.pip{position:absolute;border-radius:12px;border:2px solid var(--panel);box-shadow:var(--shadow);pointer-events:none;overflow:hidden;z-index:5}
.pip.big{z-index:3;border-radius:0;border:0;box-shadow:none}
.pip-head{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px;pointer-events:auto;background:linear-gradient(rgba(10,14,20,.6),transparent)}
.pip-head select{font-size:12px;font-weight:700;border-radius:8px;border:0;padding:4px 6px;background:rgba(255,255,255,.93);color:#17202E;max-width:52%;min-width:0}
.pip-head .sp{flex:1}
.pbtn{border:0;border-radius:8px;background:rgba(255,255,255,.93);color:#17202E;font-size:12px;padding:4px 8px;line-height:1.3}
.pip-foot{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;gap:8px;background:rgba(10,14,20,.74);color:#fff;border-radius:9px;padding:6px 9px;font-size:12px}
.pip-foot b{font-family:var(--f-display);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.meter{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;min-width:30px}
.meter i{display:block;height:100%;width:0;border-radius:4px;background:#3FD07F;transition:width .15s}
.pip-foot .ang{color:rgba(255,255,255,.75);white-space:nowrap}
.addcam{position:absolute;z-index:6;border:1px dashed var(--muted);background:var(--panel);color:var(--fg);border-radius:999px;padding:6px 12px;font-size:12px;box-shadow:0 2px 10px rgba(0,0,0,.08)}

/* share panel, recording */
.sharep{left:auto;right:max(16px,env(safe-area-inset-right,0px));width:min(400px,calc(100vw - 32px))}
.pnote{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.4;max-width:60ch}
.prow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rec{border-color:var(--risk);color:var(--risk);font-weight:700}
.recdot{width:10px;height:10px;border-radius:50%;background:var(--risk);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
body.player #modeSeg [data-mode="edit"],body.player #modeSeg [data-mode="draw"],body.player #newBtn,body.player #wbBtn,body.player #resetPlay{display:none}

.freezechip{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 2px 10px rgba(0,0,0,.08);font-weight:700;font-size:13px;margin-inline:auto}
.freezechip .fz{color:var(--accent)}
.notechip{border-radius:12px;max-width:min(560px,100%);align-items:flex-start;line-height:1.4}
.notechip b{font-family:var(--f-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;color:var(--accent);margin-right:6px}
.notechip a{color:var(--accent);white-space:nowrap}
.notechip span{flex:1;min-width:0}
/* training sessions */
.app.s-page .board-only{display:none!important}
.app.s-page .dock{display:none}
.sess{position:absolute;inset:0;z-index:8;background:var(--bg);overflow:auto;display:grid;grid-template-columns:250px minmax(0,1fr);align-items:start}
.slist{position:sticky;top:0;align-self:stretch;min-height:100%;border-right:1px solid var(--line);background:var(--panel);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.slist h3,.sedit h3{margin:0 0 6px 6px;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sitem{border:1.5px solid transparent;background:transparent;border-radius:10px;padding:8px 10px;text-align:left;display:flex;flex-direction:column;gap:2px}
.sitem:hover{background:var(--panel-2)}
.sitem[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent)}
.sitem b{font-size:13.5px} .sitem span{font-size:12px;color:var(--muted)}
.slist .tbtn{margin-top:8px;align-self:flex-start}
.sedit{padding-block:18px 48px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:16px;min-width:0;max-width:1000px}
.sname{font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:.01em;border:0;border-bottom:1.5px dashed transparent;background:transparent;padding:0;color:var(--fg);width:100%}
.sname:hover:not(:disabled),.sname:focus{border-bottom-color:var(--line);outline:none}
.shead{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 12px}
.shead .wide{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.fld input,.fld textarea,.bcard textarea,.bcard input,.bcard select{font:inherit;font-size:14px;color:var(--fg);border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 10px;min-width:0}
.fld output{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1.4}
.tline{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--tray);gap:2px}
.tline i{display:block;height:100%}
.tsum{display:flex;justify-content:space-between;margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.blocks{display:flex;flex-direction:column;gap:10px}
.bcard{display:grid;grid-template-columns:92px minmax(0,1fr) 200px;gap:14px;background:var(--panel);border:1px solid var(--line);border-left:6px solid var(--bc);border-radius:12px;padding:12px 14px}
.btime{font-family:var(--f-display);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.15}
.btime small{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.btag{display:inline-block;margin-top:8px;font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--bc)}
.bmain{display:flex;flex-direction:column;gap:8px;min-width:0}
.brow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bcard .btitle{font-weight:700;flex:1;min-width:150px}
.bmin{display:inline-flex;align-items:center;gap:4px}
.bmin button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:16px;line-height:1}
.bmin output{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.bcard textarea{width:100%;min-height:66px;resize:vertical;line-height:1.45}
.bplay{display:flex;flex-direction:column;gap:6px;min-width:0}
.bmini{min-height:40px}
.bmini svg{width:100%;height:auto;display:block;border-radius:6px}
.bmini .none{display:grid;place-items:center;height:72px;border:1.5px dashed var(--line);border-radius:8px;font-size:12px;color:var(--muted)}
.bplay select{width:100%}
.bplay .prow .tbtn{flex:1;justify-content:center}
.ibtn.sm{width:30px;height:30px}
.sfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
/* game-system coach */
.coach{position:absolute;inset:0;z-index:8;background:var(--bg);display:grid;grid-template-columns:360px minmax(0,1fr);overflow:hidden}
.cform{overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:16px 14px 40px;display:flex;flex-direction:column;gap:12px}
.cform h2{margin:0;font-family:var(--f-display);font-size:28px;font-weight:700}.cform h2 small{display:block;font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--muted)}
.cbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--panel-2)}
.cbox h3,.crep h3{margin:0;font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cbox summary{cursor:pointer;list-style:none}.cbox summary::-webkit-details-marker{display:none}.cbox summary h3::after{content:" ▾"}.cbox:not([open]) summary h3::after{content:" ▸"}
.cbox select,.cfld select,.csq input,.csq select{font:inherit;font-size:14px;color:var(--fg);border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 8px;min-width:0}
.cfld{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.crow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px}
.crow>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow select{width:150px;flex:none}
.cseg{display:inline-flex;gap:2px;background:var(--tray);border-radius:8px;padding:2px;flex:none}
.cseg button{width:30px;height:28px;border:0;border-radius:6px;background:transparent;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cseg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:700}
.cnote{margin:0;font-size:12px;color:var(--muted)}
.cbtns{display:flex;flex-wrap:wrap;gap:6px}
.csq{overflow-x:auto}.csq table{border-collapse:collapse;font-size:12px}.csq th{font-weight:400;color:var(--muted);text-align:left;padding:0 2px 4px}
.csq td{padding:2px}.csq input{width:36px;padding:4px;text-align:center}.csq input[data-f="name"]{width:92px;text-align:left}.csq .cnr{width:34px}.csq select{padding:4px 2px}
.crep{overflow:auto;padding:18px 22px 48px;display:flex;flex-direction:column;gap:12px;max-width:1040px}
/* the report scrolls as a whole: its parts keep their height instead of shrinking to fit the window (a part that
   scrolls sideways, like the jump row, would otherwise shrink to nothing) */
.crep>*{flex-shrink:0}
.cbar{display:flex;justify-content:flex-end}
.cq{margin:0;color:var(--muted);font-size:14px}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.chead h2{margin:0;font-family:var(--f-display);font-size:34px;font-weight:700;line-height:1.05}.chead h2 small{display:block;font-family:var(--f-body);font-size:13.5px;font-weight:400;color:var(--muted);margin-top:4px}
.cdiff{flex:none;text-align:right;font-size:12px;color:var(--muted);display:flex;flex-direction:column}.cdiff b{font-size:15px}.cdiff i{font-style:normal;letter-spacing:3px}
.cdiff.good b{color:var(--safe)}.cdiff.ok b{color:var(--warn)}.cdiff.bad b{color:var(--risk)}
.cverdict{padding:10px 14px;border-radius:10px;border-left:6px solid;font-size:15px}
.cverdict.good{background:var(--safe-soft);border-color:var(--safe)}.cverdict.ok{background:var(--warn-soft);border-color:var(--warn)}.cverdict.bad{background:var(--risk-soft);border-color:var(--risk)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpart{scroll-margin-top:72px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.cpart.focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cpart h3 i{font-style:normal;color:var(--accent);margin-right:6px}
.cpart ul{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.45}.cpart li{margin:0 0 4px}
.croles{list-style:none;padding-left:0!important}.croles li{padding:4px 0;border-bottom:1px solid var(--line)}.croles li:last-child{border-bottom:0}
.cjob{display:block;font-size:12px;color:var(--muted)}.cflag{display:block;font-size:12px;color:var(--warn);font-weight:700}
.crank{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.crank ol{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.crank li{display:flex;align-items:center;gap:10px;font-size:14px}.crank li span{flex:1}.crank li b{font-size:12px;padding:2px 8px;border-radius:999px}
.crank li.good b{background:var(--safe-soft);color:var(--safe)}.crank li.ok b{background:var(--warn-soft);color:var(--warn)}.crank li.bad b{background:var(--risk-soft);color:var(--risk)}
.calt,.cwhy{margin:0;font-size:14px}
.cbar{gap:6px}
.crink{display:block;width:100%;height:auto;margin:6px 0;background:var(--panel-2);border-radius:14px}
.cmaps .cpart p{margin:6px 0 0;font-size:14px}
.cpick{flex-wrap:wrap}.cpick .ccust{display:flex;gap:6px;flex:1 1 100%;justify-content:flex-end}.cpick .ccust input{width:104px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);font:inherit}
.cpick .ccust input[aria-invalid="true"]{border-color:var(--risk)}.cpick .ccust select{width:auto}
.cpick>.cnote{flex:1 1 100%;margin:0;text-align:right}.cnote.cerr{color:var(--risk)}
.crot{display:flex;flex-direction:column;gap:6px;padding:2px 0 6px}.cchk{display:flex;align-items:center;gap:8px;font-size:14px;min-height:32px}.cchk input{width:18px;height:18px}
.ccyc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}.ccyc select{width:auto;max-width:100%}.crot .cbtns{margin:0}
.crotfig{max-width:420px}
.cplace{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.cplace .crink{align-self:stretch}.cplace .cnote{align-self:stretch;margin:0}
.tbtn.sm{min-height:32px;padding:2px 10px;font-size:13px}
.cedit{touch-action:none;user-select:none;-webkit-user-select:none}.cedit .cpt{cursor:grab}.cedit .cpt:active{cursor:grabbing}.cedit .cpt:focus-visible circle:last-child{stroke:var(--accent);stroke-width:3}
.crot .crow select{max-width:60%}
.csport{align-self:flex-start}.csport button{width:auto;padding:0 12px}
.csim{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;margin:6px 0}
.csim th,.csim td{padding:4px 6px;text-align:right;border-bottom:1px solid var(--line)}.csim thead th{font-weight:400;color:var(--muted);font-size:11.5px;vertical-align:bottom}
.csim tbody th{text-align:left;font-weight:400}.csim tr.me th,.csim tr.me td{font-weight:700;background:var(--accent-soft)}
[data-part="sim"] p{margin:6px 0 0;font-size:14px}
.csugg{margin:0;padding:10px 14px;border-radius:10px;background:var(--accent-soft);font-size:15px}
.catt .cverdict{margin:8px 0;font-size:14px;padding:6px 12px}.catt .cgrid{gap:4px 16px}
.cbox>h3+.crow{margin-top:2px}.cbox .crow+h3{margin-top:8px}
/* the first-visit card comes alone: the install tip waits until it is closed */
body:has(#tips:not([hidden])) #iosTip{display:none}
.ctabs,.cgo{display:none}
.cjump{display:flex;gap:6px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.cjump::-webkit-scrollbar{display:none}
.cjump button{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.cjump button b{color:var(--accent);margin-right:4px}
.csim caption{caption-side:bottom;text-align:left;padding-top:4px;font-size:12px;color:var(--muted)}
.csim tr.best td:nth-child(3)::after{content:" ★";color:var(--warn)}
@media (max-width:900px){
  .coach{grid-template-columns:minmax(0,1fr);overflow:auto}
  .ctabs{display:flex;position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line);padding:8px 14px;gap:0}
  .ctabs button{flex:1;min-height:44px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
  .ctabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
  .coach[data-tab="plan"] .cform,.coach[data-tab="form"] .crep{display:none}
  .cgo{display:block;align-self:stretch;min-height:48px;border-radius:999px;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
  .cform,.crep{overflow:visible}.cform{border-right:0;border-bottom:1px solid var(--line)}
  .cgrid{grid-template-columns:minmax(0,1fr)}
  .crep{padding:14px max(14px,env(safe-area-inset-right,0px)) 48px max(14px,env(safe-area-inset-left,0px))}
}
.sess:not(.ro) .ro-only{display:none!important}
.sess.ro .edit-only{display:none!important}
@media (max-width:760px){
  .sess{grid-template-columns:minmax(0,1fr)}
  .slist{position:static;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .shead{grid-template-columns:1fr 1fr}
  .bcard{grid-template-columns:minmax(0,1fr)}
}

/* new situation sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:50;display:grid;place-items:center;padding:16px}
.sheet{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border-radius:16px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:14px}
.sheet h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.02em}
.sheet .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.lab{font-size:12px;color:var(--muted);min-width:64px}
.sheet select,.sheet input[type=text],.sheet input[type=number]{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px}
.sheet select{flex:1;min-width:0}
.dims{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.dims input{width:76px}
.dims .note{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px solid var(--line);background:var(--panel-2);border-radius:999px;padding:5px 11px;font-size:12.5px}
.chips button:hover{border-color:var(--muted)}
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team{border:1.5px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.team h4{margin:0;display:flex;align-items:center;gap:7px;font-size:13px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--panel);font-size:18px;line-height:1}
.stepper output{min-width:28px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.stepper .u{font-size:12px;color:var(--muted)}
.sheet .actions{display:flex;justify-content:flex-end;gap:8px}
.field{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px;width:min(220px,100%)}

/* dock */
.dock{background:var(--panel);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.transport{display:flex;align-items:center;gap:6px}
.ibtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center}
.ibtn:hover:not(:disabled){background:var(--tray)}
.ibtn svg{width:16px;height:16px}
.ibtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.play{height:44px;padding:0 18px 0 14px;border-radius:22px;border:0;background:var(--accent);color:#fff;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.play svg{width:18px;height:18px}
.speed{font-family:var(--f-display);font-weight:600;font-size:15px;min-width:46px;height:30px;border-radius:15px;border:1px solid var(--line);background:var(--tray);font-variant-numeric:tabular-nums}
.strip-wrap{flex:1;min-width:0;overflow-x:auto}
.strip{display:flex;align-items:center;gap:6px;width:max-content;padding:3px}
.col{display:flex;flex-direction:column;gap:5px}
.chev{color:var(--muted);font-size:18px;padding:0 1px}
.step{position:relative;display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:5px 12px 5px 5px;text-align:left;min-width:150px}
.step:hover{border-color:var(--muted)}
.step .lt{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--tray);font-family:var(--f-display);font-weight:700;font-size:16px;flex:none}
.step .nm{font-size:13px;line-height:1.2;max-width:160px}
.step .sub{display:block;font-size:11px;color:var(--muted)}
.step.on-path .lt{background:var(--accent-soft);color:var(--accent)}
.step.current{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.step.current .lt{background:var(--accent);color:#fff}
.step.alt{border-style:dashed}
.step.off{opacity:.6}
.flag{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--panel)}
.flag[data-k="risk"]{background:var(--risk)} .flag[data-k="warn"]{background:var(--warn)} .flag[data-k="steal"]{background:var(--safe)}
.edit-row{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px dashed var(--line);padding-top:10px}
.edit-row label{font-size:12px;color:var(--muted)}
.edit-row .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.edit-row .sep{width:1px;height:24px;background:var(--line)}
.edit-row .seg button{font-size:14px;padding:5px 9px}
#gearPal .tbtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.edit-hint{font-size:12px;color:var(--muted)}

@media (max-width:1300px){ .playpick .fm{display:none} .playpick{max-width:min(240px,50vw)} }
@media (max-width:1200px){ .app-name{display:none} .seg button{padding:6px 9px} #newBtn{padding:6px 8px} }
@media (max-width:720px){
  .switch .lbl,.playpick .fm,.cams-lbl{display:none}
  .step{min-width:120px}
  .step .nm{max-width:110px}
  .legend{display:none}
  .seg button{padding:6px 8px}
  .teams{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.posed{position:fixed;top:12px;right:12px;bottom:12px;width:min(330px,calc(100vw - 24px));z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;font-size:12.5px}
.posed header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.posed header .x{margin-left:auto}
.posed .pbody{overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.posed .prow{display:flex;flex-wrap:wrap;gap:6px}
.posed h4{margin:6px 0 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.posed label.sl{display:grid;grid-template-columns:110px minmax(0,1fr) 46px;align-items:center;gap:6px}
.posed label.sl input{width:100%}
.posed label.sl output{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}
.posed textarea{width:100%;min-height:80px;font:11px ui-monospace,monospace;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--fg);box-sizing:border-box}
body.posing #sharedChip{visibility:hidden}
/* pose studio: only the figures, the view presets and the studio panel */
body.posing #screenSeg,body.posing #libBtn,body.posing #newBtn,body.posing #modeSeg,body.posing #camBtn,body.posing #shareBtn,body.posing .top .switch,body.posing .dock,body.posing #pill,body.posing #ghostChip,body.posing #ovChip,body.posing #camLayer{display:none!important}
@media (min-width:760px){body.posing .stage{margin-right:354px}}
.photoOv{position:absolute;left:50%;top:50%;pointer-events:none;z-index:5;transform-origin:center;max-width:none}

/* Whiteboard, undo and redo */
#histGrp{display:flex;gap:4px}
#histGrp[hidden]{display:none}
.tbtn.icon{padding-left:9px;padding-right:9px}
.tbtn.icon svg{margin:0}
.edit-row [data-place][aria-pressed="true"],#wbBtn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
@media (max-width:1100px){ .switch .lbl{display:none} }
@media (max-width:1240px){ .nl{display:none} #newBtn,#wbBtn{padding:6px 8px} }

/* Run mode: full screen, only the board and the controls for running it */
.focusbar{display:none}
body.focus .focusbar{display:flex;position:absolute;z-index:6;top:max(10px,env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px;box-shadow:0 4px 16px rgba(0,0,0,.12);max-width:calc(100% - 24px)}
body.focus .focusbar .tbtn{min-width:44px;min-height:40px;justify-content:center;font-size:18px}
body.focus .focusbar [hidden]{display:none}
.fctitle{font-weight:700;font-size:15px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fcclock{font-variant-numeric:tabular-nums;font-size:15px!important}
.fcclock.over{background:#FCE8D2;border-color:#D9922E;color:#8A4E0B}
.fcclock.paused{opacity:.55}
body.focus .top,body.focus .edit-row,body.focus .legend,body.focus .vctl,body.focus #sessBar,body.focus #sharedChip,
body.focus #speedBtn,body.focus #freezeOpt{display:none!important}
body.focus .hud{top:calc(max(10px,env(safe-area-inset-top,0px)) + 62px)}
body.focus .dock .play{min-width:120px}
body.focus .dock .ibtn{min-width:52px;min-height:52px}
body.focus .app{grid-template-rows:minmax(0,1fr) auto}

/* Looped plays */
.loopmark{align-self:center;font-size:20px;color:var(--accent);padding:0 4px}
#loopGrp .lab{font-size:12px;color:var(--muted)}
#loopGrp [hidden]{display:none}

/* Set-up menu beside the selection, box select */
.pmenu{position:absolute;left:0;top:0;z-index:7;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.16);max-width:min(460px,calc(100% - 16px));transition:opacity .12s}
.pmenu[hidden],.pmenu [hidden]{display:none!important}
.pmenu.dragging{opacity:0;pointer-events:none}
.pm-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pm-f{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.pm-f .field{width:auto}
#plNum{width:52px}
#plName{width:110px}
.pm-lab,.pm-info{font-size:12px;color:var(--muted);font-weight:600}
.pmenu .seg button{padding:5px 9px;font-size:12px}
.selbox{position:absolute;z-index:6;border:1.5px dashed rgba(36,80,200,.9);background:rgba(36,80,200,.08);border-radius:4px;pointer-events:none}
.selbox[hidden]{display:none}

/* Library: search, sport filter, favourites */
.libhead{position:sticky;top:-14px;z-index:1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--panel);padding:6px 0 10px;margin-top:-6px}
#libSearch{flex:1;min-width:160px;width:auto}
.itemw{position:relative;display:flex}
.itemw .item{flex:1}
.star{position:absolute;top:4px;right:4px;width:34px;height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.85);font-size:18px;line-height:1;color:#B7791F}
.star[aria-pressed="false"]{color:var(--muted)}
#libList{display:flex;flex-direction:column;gap:14px}

/* First-run tips on the whiteboard */
.tips{position:absolute;z-index:5;right:max(12px,env(safe-area-inset-right,0px));bottom:44px;width:min(300px,calc(100% - 24px));background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;font-size:13.5px;line-height:1.4}
.tips[hidden]{display:none}
.tips h4{margin:0 0 6px;font-size:14px}
.tips ol{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:4px}

/* Touch screens: bigger targets (about 40 px and up) */
@media (pointer:coarse){
  .tbtn{min-height:40px;padding-left:12px;padding-right:12px}
  .seg button{min-height:36px}
  .step{min-height:44px}
  .ibtn{min-width:44px;min-height:44px}
  .field{min-height:38px}
  .switch{min-height:40px}
}
.tbtn.lang{font-weight:700;letter-spacing:.04em;min-width:42px;justify-content:center}
body.focus .tbtn.lang{display:none}

/* Saving: saved tick, save-as dialog */
.saved{font-size:12.5px;font-weight:700;color:#1D8A4E;opacity:0;transition:opacity .25s;white-space:nowrap}
.saved.on{opacity:1}
.sheet .row.rtop{align-items:flex-start}
.sheet textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--panel-2);color:var(--fg)}
.themeSel{min-width:160px}

/* Landing-page demo: watch and try one exercise, nothing else */
.demo-only{display:none!important}
body.demo .demo-only{display:inline-flex!important;text-decoration:none}
body.demo #screenSeg,body.demo #newBtn,body.demo #wbBtn,body.demo #modeSeg,body.demo #saveAsBtn,body.demo #savedTick,body.demo #histGrp,
body.demo #focusBtn,body.demo #shareBtn,body.demo #langBtn,body.demo #installBtn,body.demo .edit-row,body.demo #tips,body.demo #iosTip,body.demo #updateBar,
body.demo #freezeOpt,body.demo .app-name,body.demo #camAuto,body.demo #gkFollow,body.demo #goalPct,body.demo #addCam,body.demo .pill .crossbtn,body.demo .pill .fakebtn{display:none!important}
body.demo .brand,body.demo #libBtn{pointer-events:none}
body.demo #libBtn .caret{display:none}

/* Phones and short screens: the board always keeps its space. The header becomes one row that scrolls
   sideways, the editing tools one scrolling row each, and the dock never takes more than about half the screen. */
.dock{max-height:48vh;max-height:48dvh;overflow-y:auto}
@media (max-width:640px), (max-height:520px){
  .top{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding-block:6px;gap:6px}
  .top::-webkit-scrollbar{display:none}
  .top>*{flex:none}
  .top>.spacer{display:none}
  .lib{left:8px;right:8px;width:auto;max-height:calc(100dvh - var(--toph,56px) - 20px)}
  .app-name,.nl,.switch .lbl,.playpick .fm{display:none}
  .playpick{max-width:44vw}
  /* the most used controls first: exercise, mode, new, whiteboard; the rest is a swipe away */
  .top>*{order:5}
  .top>.brand{order:0} #libBtn{order:1} #modeSeg{order:2} #newBtn,#wbBtn{order:3} #saveAsBtn,#savedTick,#histGrp{order:4} #screenSeg{order:6} #langBtn{order:9}
  #modeSeg button{font-size:0;gap:0;padding:6px 10px}
  #modeSeg svg{width:18px;height:18px}
  .seg button{padding:6px 8px;font-size:14px}
  .dock{padding-block:6px;gap:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}
  .play{height:40px;padding:0 14px 0 10px}
  .edit-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:2px}
  .edit-row::-webkit-scrollbar{display:none}
  .edit-row>*{flex:none}
  .edit-row .grp{flex-wrap:nowrap}
  .edit-row>.spacer,.edit-hint{display:none}
  .edit-row .field{width:150px}
  .step{min-width:0;padding-right:9px}
  .step .nm{max-width:96px;font-size:12px}
  .legend{display:none}
}
@media (max-width:640px){
  .strip-wrap{flex-basis:100%}
  /* the description takes two lines; tap it to read the rest */
  .notechip #noteText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
  .notechip.open #noteText{display:block}
}
body.turned #dirText{display:none}
/* Turned board (phone held upright): red attacks upwards, so the chips move to the bottom, out of the
   way of the attack, and messages show at the top. */
body.turned:not(.focus) .hud{top:auto;bottom:10px;flex-direction:column-reverse;flex-wrap:nowrap;align-items:stretch}
body.turned:not(.focus) .toast{bottom:auto;top:14px}

/* Shots: result and kind in the pill, the result banner on the board */
.pill .shotseg{display:inline-flex;gap:2px;margin-left:4px;background:var(--tray);border-radius:999px;padding:2px}
.pill .shotseg .tbtn{padding:2px 9px;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--fg);min-height:0;border-radius:999px}
.pill .shotseg .tbtn[aria-pressed="true"]{background:var(--accent);color:#fff}
@media (pointer:coarse){ .pill .shotseg .tbtn{min-height:32px;padding:4px 10px} }
.pill{flex-wrap:wrap;justify-content:center}
.shotres{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;font-family:var(--f-display);font-weight:800;font-size:clamp(40px,8vw,84px);letter-spacing:.04em;text-transform:uppercase;
  color:#1D8A4E;text-shadow:0 2px 0 #fff,0 0 24px rgba(255,255,255,.9)}
.shotres[data-r="save"]{color:var(--accent)}
.shotres[data-r="miss"]{color:var(--muted)}
.shotres.pop{animation:shotpop .9s cubic-bezier(.2,1.6,.4,1)}
@keyframes shotpop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
body.turned .shotres{top:30%}
.stage[data-mode="edit"] .shotres,.stage[data-mode="draw"] .shotres{opacity:.3;font-size:clamp(28px,5vw,52px)}
.shotres[data-r="block"]{color:var(--red,#D62839)}

/* Compact screens (iPad upright, phones): More menu and a folding tool sheet; see ui/layout.js */
#moreBtn,#sheetBtn{display:none}
.ml{display:none}
body.compact #moreBtn{display:inline-flex}
body.compact .top .app-name,body.compact .legend,body.compact .edit-hint,
body.compact label[for="playTitle"],body.compact #playTitle{display:none}
.moremenu{left:auto;right:max(8px,env(safe-area-inset-right,0px));width:min(380px,calc(100vw - 16px));padding:12px;display:flex;flex-direction:column;gap:10px}
.moremenu .mrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.moremenu .mrow>.tbtn{flex:1;justify-content:flex-start;min-height:44px}
.moremenu .mcap{font-size:13px;color:var(--muted);min-width:64px}
.moremenu .ml,.moremenu .nl,.moremenu .cams-lbl,.moremenu .switch .lbl{display:inline!important}
.moremenu .tbtn[hidden]{display:none!important}
.moremenu .mrow:has(> [hidden]:only-child){display:none}
body.compact.sheetable #sheetBtn{display:flex}
#sheetBtn{order:-1;flex-basis:100%;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--muted);font:600 12px/1 var(--f-body,inherit);padding:0 0 2px;margin-top:-4px;cursor:pointer;min-height:30px;justify-content:center}
#sheetBtn::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--line)}
body.compact.sheet-closed #editRow,body.compact.sheet-closed #drawTools{display:none!important}
@media (max-width:640px){
  body.compact .top>.brand{display:none}
  body.compact .playpick{max-width:40vw}
  /* room for undo and More: the sport tag and redo go on a phone */
  body.compact #playCat,body.compact #redoBtn{display:none}
  body.compact #saveAsBtn .nl,body.compact #saveAsBtn span{display:none}
}
.notechip .needs{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600}