/* HoopQuant JustScore · © 2026 D Dads. All rights reserved. */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/fonts/Barlow-Regular.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600 700;font-display:swap;src:url(/fonts/Barlow-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700 800;font-display:swap;src:url(/fonts/BarlowCondensed-Bold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700 900;font-display:swap;src:url(/fonts/Poppins-Bold.woff) format("woff")}

/* Day mode is the default; night mode only when switched (data-theme="dark"). */
:root{
  --bg:#eef1f4;--surface:#fff;--ink:#10161d;--muted:#636e7b;--muted2:#46515e;--line:#cdd4dc;--field:#d3d9e0;--soft:#e4e9ee;
  --primary:#4169e1;--primary-ink:#fff;--accent:#2f5bd8;--sel-bg:#eaf0ff;--sel-line:#4169e1;--sel-ink:#2448b8;
  --danger:#b93232;--danger-bg:#fff5f4;--danger-line:#f0c9c5;--good:#0b7a3b;--live:#c62d25;--warn:#9a5b00;
  --go:#1f9d55;--go-ink:#fff;--pause:#10161d;--pause-ink:#fff;--chip:#e4e9ee;--chip-ink:#46515e;
  --card-line:transparent;--shadow:0 1px 2px rgba(16,22,29,.06),0 4px 14px rgba(16,22,29,.06);--scrim:rgba(16,22,29,.45);
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;--body:Barlow,system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0d1115;--surface:#161c22;--ink:#edf1f5;--muted:#9ba6b4;--muted2:#b6c0cc;--line:#3d4855;--field:#3d4855;--soft:#1f272f;
  --primary:#4169e1;--accent:#7da2ff;--sel-bg:#1c2847;--sel-line:#7da2ff;--sel-ink:#c3d3ff;
  --danger:#ff9a90;--danger-bg:#2a1716;--danger-line:#6a302c;--good:#5bd08a;--live:#ff7a70;--warn:#ffc46b;
  --go:#3fbf73;--go-ink:#0d1115;--pause:#edf1f5;--pause-ink:#0d1115;--chip:#1f272f;--chip-ink:#c3ccd6;
  --card-line:#2a333d;--shadow:none;--scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3,p{margin:0}

.screen{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;gap:14px;
  padding:calc(max(env(safe-area-inset-top),12px) + 8px) max(16px,env(safe-area-inset-right)) calc(max(env(safe-area-inset-bottom),8px) + 12px) max(16px,env(safe-area-inset-left))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.bar h1{font-family:var(--cond);font-size:30px;font-weight:700}
.games .bar h1{font-size:34px}
.ver{font-size:13px;font-weight:600;color:var(--muted)}
.kicker{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{width:64px}
.bar-btns{display:flex;gap:8px;flex:none}
.link{border:0;background:none;padding:10px 4px;color:var(--accent);font-weight:600;font-size:16px;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.icon{border:0;background:var(--surface);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--muted2);box-shadow:var(--shadow);flex:none}
:root[data-theme="dark"] .icon{background:var(--soft);color:#ffd27a}
.card{background:var(--surface);border-radius:18px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--card-line);display:flex;flex-direction:column;gap:12px}
.label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted2);font-size:15px}
.hint-text{font-size:14px;color:var(--muted)}
.center{text-align:center}
.grow{flex-grow:1}
.primary{border:0;background:var(--primary);color:var(--primary-ink);border-radius:14px;font-weight:700;font-size:17px;min-height:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.primary.big{height:64px;border-radius:16px;font-size:20px;width:100%}
.tall{min-height:56px;border-radius:14px;width:100%;font-size:17px}
.primary.tall{min-height:60px;font-size:18px}
.ghost{border:1px solid var(--line);background:var(--surface);border-radius:14px;font-weight:600;font-size:16px;min-height:52px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.danger{border:1px solid var(--danger-line);background:var(--danger-bg);color:var(--danger);font-weight:700;border-radius:14px}
.danger.solid{background:var(--danger);color:#fff;border:0;min-height:48px;padding:0 16px;font-size:17px}
:root[data-theme="dark"] .danger.solid{background:#c43a32}
.danger-text{color:var(--danger);align-self:center}
.dock{position:sticky;bottom:0;display:flex;flex-direction:column;gap:8px;padding-top:8px;background:var(--bg);margin-top:auto}

/* choices (segmented buttons) */
.choices{display:grid;gap:8px}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{min-height:50px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:16px;font-weight:600;padding:0 4px}
.choice[aria-pressed="true"]{border:2px solid var(--sel-line);background:var(--sel-bg);color:var(--sel-ink);font-weight:700}
.presets .choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.1;min-height:52px}
.presets .choice b{font-size:15px}.presets .choice small{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}

/* My games */
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:var(--soft);border-radius:12px;padding:4px}
.seg button{min-height:44px;border-radius:9px;border:0;background:none;font-weight:600;color:var(--muted2)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:var(--shadow)}
.list{display:flex;flex-direction:column;gap:10px}
.tour{gap:4px;padding:14px 16px 8px}
.tour-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:4px}
.tour-head h2{font-family:var(--cond);font-size:22px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.rec{font-size:14px;color:var(--good);font-weight:700;white-space:nowrap}
.tour-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;background:none;padding:8px 0;text-align:left;font-size:16px;min-height:44px;border-top:1px solid var(--soft)}
.tour-row .who{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.res{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.r.W{color:var(--good)}.r.L{color:var(--danger)}.r.T{color:var(--muted)}
.live{font-size:13px;color:var(--live);font-weight:700}
h3.label{margin-top:6px}
.row{background:var(--surface);border:1px solid var(--card-line);box-shadow:var(--shadow);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:14px;text-align:left;min-height:64px}
.row .date{display:flex;flex-direction:column;align-items:center;width:40px;flex:none}
.row .date b{font-family:var(--cond);font-size:24px;line-height:1}
.row .date span{font-size:12px;color:var(--muted)}
.row .who{flex-grow:1;display:flex;flex-direction:column;min-width:0}
.row .who b{font-size:17px;overflow-wrap:anywhere}
.row .who span{font-size:13px;color:var(--muted)}
.row .who span.live{color:var(--live)}
.row .sc{font-family:var(--cond);font-size:26px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.empty{padding:40px 12px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.empty .big{font-family:var(--cond);font-size:26px;color:var(--ink);font-weight:700}
.hint{flex-direction:row;align-items:flex-start;gap:8px;font-size:15px;color:var(--muted2)}
.hint p{flex:1}
.hint .link{padding:0 4px;min-height:32px}
/* Install first (phones and tablets opened in a browser tab) */
.install{gap:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.inst-head{display:flex;align-items:center;gap:14px;margin-top:8px}
.inst-head img{width:72px;height:72px;border-radius:17px;box-shadow:0 2px 8px rgba(16,22,29,.25);flex:none}
.inst-head h1{margin:2px 0 0;font:800 clamp(28px,8vw,40px)/1.02 var(--cond);letter-spacing:.005em}
.install .lead{margin:0;font-size:17px;line-height:1.45;color:var(--muted2)}
.install .card h2{margin:0}
ol.inst{list-style:none;counter-reset:st;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
ol.inst li{counter-increment:st;display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45}
ol.inst li::before{content:counter(st);flex:none;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font:800 18px/32px var(--cond);text-align:center}
ol.inst li>span{flex:1;padding-top:3px}
ol.inst .muted{display:block;color:var(--muted);font-size:15px;margin-top:2px}
ol.inst .primary{width:100%;margin-top:-3px}
.ii{width:20px;height:20px;vertical-align:-4px;color:var(--accent)}
.key{display:inline-block;min-width:26px;padding:0 6px;border-radius:7px;background:var(--soft);border:1px solid var(--line);text-align:center;line-height:1.35}
.install .note{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.warnbox{display:block;border:2px solid var(--warn);background:var(--surface);font-size:16px;line-height:1.45}
.kept{gap:8px;font-size:15px;line-height:1.45}.kept h2{margin:0}.kept p{margin:0;color:var(--muted2)}
.kept ul{list-style:none;margin:0;padding:0}.kept li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;padding:6px 0;border-bottom:1px solid var(--soft);font-weight:600;min-width:0}.kept li>span:first-child{min-width:0;overflow-wrap:anywhere}.kept li .muted{font-weight:400;color:var(--muted)}
@media (min-width:700px){.install{padding-top:40px;max-width:640px}.install .lead,ol.inst li,.warnbox{font-size:19px}.install .note,.kept{font-size:17px}.inst-head h1{font-size:44px}}
.note.warn{font-size:14px;color:var(--warn);font-weight:600}

/* New game */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.inrow{display:flex;gap:10px;align-items:center}
.field input,.setclock input{flex-grow:1;min-width:0;height:50px;border-radius:12px;border:1px solid var(--field);padding:0 14px;font-size:18px;background:var(--surface);width:100%}
.swatch{width:50px;height:50px;border-radius:12px;border:3px solid var(--surface);background:var(--c);box-shadow:0 0 0 1px var(--line);flex:none}
.palette{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
.swatch.sm{width:44px;height:44px}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sel-line)}

/* Game */
.clock{gap:8px;padding:12px 16px}
.clock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.per-btn{min-height:44px;height:44px;width:100%;font-size:16px}
.clock-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.phase{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.phase.paused,.phase.ready,.phase.break,.phase.noclock{color:var(--warn)}
.phase.ended{color:var(--danger)}
.time{font-family:var(--cond);font-weight:700;font-size:46px;line-height:1;font-variant-numeric:tabular-nums}
.time.over{color:var(--danger)}
.time.small{font-size:24px;color:var(--muted)}
.clock.noclock{padding:14px 16px}
.round{border:0;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.round.pause{background:var(--pause);color:var(--pause-ink)}
.round.go{background:var(--go);color:var(--go-ink)}
.prompt{min-height:56px;border-radius:14px;font-size:18px;width:100%}
/* One layout for the card looks: upright, the middle column melts away (display:contents) and its parts are
   put in order around the teams; turned sideways it becomes team | clock and controls | team. */
.stage{display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.mid{display:contents}
.game .clock{order:1}.game .prompt,.game .note{order:2}.team.us{order:3}.team.them{order:4}
.game .chips{order:5}.game .grow{order:6;flex-grow:1}.game .actions{order:7}.game .foot{order:8}
.chips:empty{display:none}
.team{border-top:6px solid var(--bar);padding:14px 16px 16px}
.team-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.team-head h2{font-family:var(--cond);font-size:26px;font-weight:700;min-width:0;line-height:1.08}
.tn{display:block;max-width:100%}.look-pop .tn{line-height:1.25}
.score{font-family:var(--cond);font-size:84px;font-weight:700;line-height:.9;font-variant-numeric:tabular-nums}
.score.bump{animation:bump .35s ease-out}
@keyframes bump{0%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.score.bump{animation:none}}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pts button{height:68px;border-radius:14px;border:0;background:var(--btn);color:var(--btn-ink);font-family:var(--cond);font-size:34px;font-weight:700;box-shadow:inset 0 0 0 2px var(--btn-edge,rgba(16,22,29,.12))}
.pts button:active{transform:scale(.97);filter:brightness(.92)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:14px}
.chip{background:var(--chip);color:var(--chip-ink);border-radius:999px;padding:6px 12px;font-variant-numeric:tabular-nums}
.actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.actions .ghost{height:56px;min-width:0;line-height:1.15}
.actions .ghost svg{flex:none}
.actions .ghost span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;text-align:left}
.foot{text-align:center;font-size:13px;color:var(--muted)}

/* Periods sheet */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:560px;z-index:11;background:var(--surface);color:var(--ink);border-radius:22px 22px 0 0;
  padding:12px 18px calc(max(env(safe-area-inset-bottom),12px) + 14px);display:flex;flex-direction:column;gap:12px;max-height:92vh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  animation:up .24s cubic-bezier(.2,.8,.2,1);will-change:transform}
#layer .scrim{animation:fade .2s ease-out}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
/* Set the clock: at the top of the screen, so the keyboard (which comes up from the bottom) never covers it */
.sheet.top{top:0;bottom:auto;border-radius:0 0 22px 22px;padding-top:calc(max(env(safe-area-inset-top),12px) + 8px);padding-bottom:18px;animation:down .22s ease-out}
@keyframes down{from{transform:translateY(-100%)}to{transform:none}}
.sheet.top .sheet-head{gap:8px}.sheet.top .sheet-head h2{flex:1;text-align:center;font-size:24px}.sheet.top .sheet-head .link{min-height:44px;padding:0}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet,#layer .scrim{animation:none}}
html.sheet-open,html.sheet-open body{overflow:hidden;overscroll-behavior:none}
#layer .scrim{touch-action:none} /* iPhone: dragging the dimmed area doesn't move the page behind */
.clock-err{margin:0;min-height:1.2em;font-size:14px;font-weight:600;color:var(--danger)}
.setclock input{font-family:var(--cond);font-size:28px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-align:center}
.setclock input[aria-invalid="true"]{border-color:var(--danger)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line);align-self:center}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{font-family:var(--cond);font-size:28px}
.close{font-size:24px;border-radius:50%;background:var(--soft);box-shadow:none;color:var(--muted2)}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:56px;height:52px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:26px;font-weight:700}
.stepper output{flex-grow:1;height:52px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-size:30px;font-weight:700}
.setclock{display:flex;flex-direction:column;gap:6px}
.setclock label{font-size:14px;color:var(--muted2);font-weight:600}
.setclock .primary{height:50px;min-width:80px}

/* Final */
.result{background:#10161d;color:#fff;border-radius:22px;padding:22px 20px;display:flex;flex-direction:column;gap:16px}
:root[data-theme="dark"] .result{border:1px solid #2a333d}
.rhead{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ba6b4}
.sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.side{display:flex;flex-direction:column;gap:6px;border-left:5px solid var(--bar);padding-left:12px;min-width:0}
.side .nm{font-family:var(--cond);font-size:24px;font-weight:700;overflow-wrap:anywhere}
.side .sc{font-family:var(--cond);font-size:72px;font-weight:700;line-height:.9;font-variant-numeric:tabular-nums}
.side.dim{color:#c3ccd6}
.result .chips{justify-content:flex-start}
.result .chip{background:#1f272f;color:#c3ccd6}
.brand{font-size:13px;color:#9ba6b4}
.flow svg{width:100%;height:auto;display:block}
.flow .axis{stroke:var(--field);stroke-width:1}
.flow .dash{stroke-dasharray:3 4}

/* dialogs, toast, update bar */
.modal .box{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 32px));background:var(--surface);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:18px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal .scrim{z-index:20}
.modal p{font-size:17px;line-height:1.35}
#toast{position:fixed;z-index:30;left:50%;bottom:calc(max(env(safe-area-inset-bottom),8px) + 90px);transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 16px;font-weight:600;transition:all .2s;max-width:calc(100vw - 32px)}
#toast.on{opacity:1;transform:translate(-50%,0)}
.update{position:fixed;z-index:25;left:50%;transform:translateX(-50%);top:calc(max(env(safe-area-inset-top),8px) + 6px);width:min(528px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 24px rgba(16,22,29,.18);border-radius:14px;padding:8px 8px 8px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}

/* Short phones (iPhone SE, small Androids): everything still fits on one screen */
@media (max-height:760px){
  .screen{gap:10px;padding-top:calc(max(env(safe-area-inset-top),8px) + 4px)}
  .stage,.keys{gap:10px}
  .clock{padding:8px 14px}
  .time{font-size:40px}
  .round{width:56px;height:56px}
  .team{padding:10px 14px 12px;gap:8px}
  .score{font-size:64px}
  .pts button{height:60px}
  .foot{display:none}
  .new .card{padding:12px 14px;gap:8px}
  .new .field input,.new .swatch{height:46px}
  .new .swatch{width:46px}
  .new .choice{min-height:46px}
  .hint-text{display:none}
  .result{padding:16px 18px;gap:12px}
  .side .sc{font-size:60px}
  .primary.big{height:58px}
}
/* Tablets upright: the teams fill the screen, bigger buttons */
@media (min-width:700px) and (orientation:portrait){
  .screen.game{max-width:1100px}
  .game .grow{display:none}
  .game .team{flex:1;min-width:0;display:flex;flex-direction:column}
  .game .pts{flex:1}
  .game .score{font-size:130px}
  .game .team-head h2{font-size:34px}
  .game .pts button{height:auto;min-height:96px;max-height:240px;font-size:52px}
  .game .actions .ghost{height:64px;font-size:18px}
}
/* Phones and tablets turned sideways: team | clock and controls | team (the notch side keeps its margin) */
@media (orientation:landscape) and (min-width:560px){
  .screen.game{max-width:none;gap:8px;padding-top:calc(max(env(safe-area-inset-top),6px) + 4px)}
  .game .bar{min-height:40px}
  .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,26%) minmax(0,1fr);gap:12px}
  .mid{display:flex;flex-direction:column;gap:10px;min-width:0}
  .stage>.team.us{order:1}.stage>.mid{order:2}.stage>.team.them{order:3}
  .game .card.team{padding:10px 10px 12px}
  .game .pts,.look-pop .pts{gap:8px}
  .game .team-head{flex-direction:column;align-items:flex-start;gap:0}
  .game .team-head h2{max-width:100%}
  .game .team-head .score{align-self:center}
  .game .team{display:flex;flex-direction:column;justify-content:space-between;min-height:0;gap:8px}
  .game .score{font-size:clamp(56px,24vh,200px)}
  .game .team-head h2{font-size:clamp(20px,5vh,36px)}
  .game .pts button{height:clamp(56px,17vh,170px);font-size:clamp(28px,7vh,56px)}
  .game .time{font-size:clamp(30px,9vh,64px)}
  .game .round{width:clamp(48px,12vh,64px);height:clamp(48px,12vh,64px)}
  .game .mid .actions{grid-template-columns:1fr;gap:8px}
  .game .mid .actions .ghost{height:clamp(48px,12vh,64px)}
  .game .foot{display:none}
}

/* ---------- Gym scoreboard looks: board on top, keys below ---------- */
.board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"clock clock clock" "us per them";gap:10px 8px;align-items:end;padding:12px 10px 14px;color:#fff}
.b-clock{grid-area:clock;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.clock-row{display:flex;align-items:center;gap:12px;max-width:100%;min-width:0}
.b-side{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.b-side.us{grid-area:us}.b-side.them{grid-area:them}
.b-period{grid-area:per;display:flex;flex-direction:column;align-items:center;gap:6px}
.board .word{font-weight:700;font-size:24px;line-height:1;color:#fff}
.b-period .word{font-size:13px}
.board .nm,.klabel{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;max-width:100%;white-space:nowrap;overflow:hidden}
.board .nm i,.klabel i{width:9px;height:9px;border-radius:50%;flex:none}
.nmt{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* team names up to 16 characters: never cut; long ones a bit smaller and on up to two lines */
.board .nm,.klabel{white-space:normal}.nmt{overflow-wrap:normal;line-height:1.1}
.tn.long{font-size:.8em}.nmt.long{font-size:.9em}
.win{border-radius:4px;padding:4px 6px;max-width:100%;min-width:0;line-height:0}
.led{display:block;height:var(--h);width:auto;max-width:100%}
.clockwin{--h:clamp(44px,min(20vw,9vh),150px)}
.b-side .win{--h:clamp(44px,min(19vw,9vh),190px)}
.b-period .win{--h:clamp(28px,min(9vw,5vh),100px)}
.board .round{width:48px;height:48px}
.board .per-btn{width:auto;padding:0 18px;height:44px;font-size:15px}
.board .phase{font-size:12px}
.keys{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.kmid{display:contents}
.keys .chips{order:0}.keyrow.us{order:1}.keyrow.them{order:2}.keys .grow{order:3;flex-grow:1}.keys .actions{order:4}.keys .foot{order:5}
.fam-board .foot{color:#9a9a9a}
.keyrow{display:flex;flex-direction:column;gap:8px}
.klabel{font-size:15px;font-weight:700}
.fam-board .pts button{height:64px;border-radius:10px;font-family:var(--body);font-size:32px;font-weight:700}
@media (max-height:720px){ .fam-board .pts button{height:58px} .board{padding:10px 8px 12px;gap:8px 6px} }
@media (orientation:landscape) and (min-width:560px){
  .board{flex:1;min-height:0;align-content:center}
  .keys{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,27%) minmax(0,1fr);gap:12px;flex:none;align-items:end}
  .kmid{display:flex;flex-direction:column;gap:8px;min-width:0}
  .keys>.keyrow.us{order:1}.keys>.kmid{order:2}.keys>.keyrow.them{order:3}
  .keys .grow,.keys .chips,.keys .foot{display:none}
  .klabel{display:none}
  .fam-board .pts button{height:clamp(56px,15vh,140px);font-size:clamp(26px,6vh,52px)}
  .keys .actions{grid-template-columns:1fr;gap:8px}
  .keys .actions .ghost{height:clamp(56px,15vh,140px);font-size:14px;padding:0 6px}
  .clockwin{--h:clamp(40px,min(17vh,14vw),170px)}
  .b-side .win{--h:clamp(44px,min(21vh,14vw),200px)}
  .b-period .win{--h:clamp(28px,min(10vh,7vw),110px)}
  .board .word{font-size:clamp(16px,5.5vh,56px)}
  .look-modern .board{grid-template-areas:"us clock them" "us per them";align-items:center}
  .look-modern .clockwin{--h:clamp(36px,min(15vh,7.5vw),130px)}
}
/* very short screens turned sideways (phones): team names replace HOME/GUEST, phase sits beside the clock */
@media (orientation:landscape) and (max-height:500px){
  .board .word{display:none}.b-period .word{display:block;font-size:11px}
  .board .nm{font-size:15px;font-weight:700}
  .b-clock{flex-direction:row;justify-content:center;gap:10px}
  /* Modern on a phone turned sideways: the clock row goes across the top, so each team keeps a third of the width */
  .look-modern .board{grid-template-areas:"clock clock clock" "us per them";align-items:end}
  .board{gap:6px 8px;padding:8px 10px}
}

/* Vintage: big bulbs on a glossy black screen */
:root[data-look="vintage"]{--bg:#000000}
.look-vintage{color:#e6e6e6}
.look-vintage .bar .link{color:#ffb21a}.look-vintage .kicker{color:#9a9a9a}
.look-vintage .icon{background:#161616;border:1px solid #333;color:#ffb21a;box-shadow:none}
.look-vintage .board{background:linear-gradient(115deg,rgba(255,255,255,0) 0 52%,rgba(255,255,255,.06) 52% 70%,rgba(255,255,255,0) 70%),linear-gradient(#141414,#050505);border:7px solid #1c1c1c;border-radius:12px;box-shadow:inset 0 0 0 1px #2a2a2a,0 10px 24px rgba(0,0,0,.55)}
.look-vintage .win{background:#121212}
.look-vintage .nm{color:#a8a8a8}
.look-vintage .phase{color:#ffb21a}.look-vintage .phase.ended{color:#ff6b5e}
.look-vintage .round.go{background:#1f9d55;color:#fff}.look-vintage .round.pause{background:#e6e6e6;color:#000}
.look-vintage .pts button,.look-vintage .ghost{border:1px solid #333;border-bottom:5px solid #000;background:linear-gradient(#262626,#121212);color:#ffb21a;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.look-vintage .ghost{color:#e6e6e6}
.look-vintage .chip{background:none;border:1px solid #333;color:#cfcfcf}
/* Modern: blue board, white lettering, fine LED digits */
:root[data-look="modern"]{--bg:#0a1a44}
.look-modern{color:#f2f5fb}
.look-modern .bar .link{color:#fff}.look-modern .kicker{color:#b9c6e6}
.look-modern .icon{background:#1f4fc4;border:2px solid #dfe6f2;color:#fff;box-shadow:none}
.look-modern .board{background:#1f4fc4;border:6px solid #dfe6f2;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.look-modern .win{background:#050505;border-radius:3px}
.look-modern .clockwin{border:4px solid #dfe6f2}
.look-modern .nm{color:#dfe6f2;font-weight:700}
.look-modern .nm i,.look-modern .klabel i{box-shadow:0 0 0 2px #dfe6f2}
.look-modern .board .word{letter-spacing:-.01em}
.look-modern .phase{color:#ffd56a}.look-modern .phase.ended{color:#ffb3ad}
.look-modern .round.go{background:#ffb81c;color:#0a1a44}.look-modern .round.pause{background:#fff;color:#0a1a44}
.look-modern .pts button{border:2px solid #dfe6f2;border-bottom-width:5px;border-radius:8px;background:#1f4fc4;color:#fff}
.look-modern .ghost{border:2px solid #dfe6f2;border-bottom-width:5px;border-radius:8px;background:transparent;color:#fff}
.look-modern .chip{background:none;border:1px solid #5d78bd;color:#dfe6f2}
.fam-board .note.warn{color:#ffc46b}

/* Streetball pop: thick outlines, hard shadows, team colours as fills */
:root[data-look="pop"]{--bg:#fff1d6}
:root[data-look="pop"][data-theme="dark"]{--bg:#1d1730}
.look-pop{isolation:isolate}
.pop-shapes{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.look-pop .card{border:3px solid #111;border-radius:4px;box-shadow:6px 6px 0 #111}
.look-pop .team{background:var(--bar);border-top:3px solid #111;transform:rotate(.8deg)}
.look-pop .team.them{transform:rotate(-.8deg)}
.look-pop .team-head h2{font-family:Poppins,var(--body);color:#fff;text-transform:uppercase;text-shadow:2px 2px 0 #111}
.look-pop .score{font-family:Poppins,var(--body);color:#fff;text-shadow:4px 4px 0 #111;line-height:1}
.look-pop .pts{gap:12px}
.look-pop .pts button{background:#fff;color:#111;border:3px solid #111;border-radius:0;box-shadow:4px 4px 0 #111;font-family:Poppins,var(--body)}
.look-pop .clock{background:#ffd23f;transform:rotate(-1.5deg)}
.look-pop .phase{color:#111}
.look-pop .time{font-family:Poppins,var(--body);color:#111}
.look-pop .round{background:#111;color:#ffd23f}
.look-pop .actions .ghost,.look-pop .per-btn{border:3px solid #111;border-radius:0;box-shadow:4px 4px 0 #111;background:#fff;color:#111}
.look-pop .actions .ghost:first-child:not(:disabled){background:#ff8fc7}
.look-pop .team.ink-dark .team-head h2,.look-pop .team.ink-dark .score{color:#111;text-shadow:3px 3px 0 #fff}
.look-pop .team.ink-dark .team-head h2{text-shadow:2px 2px 0 #fff}
.look-pop .chip{background:#111;color:#fff;font-weight:700}
.look-pop .icon{border:3px solid #111;border-radius:0;background:#7ee0c3;color:#111;box-shadow:3px 3px 0 #111}
.look-pop .bar .link{color:#111;font-weight:700}
.look-pop .kicker{background:#ffd23f;color:#111;padding:2px 8px;flex:0 1 auto;transform:rotate(-2deg)}
:root[data-theme="dark"] .look-pop .bar .link{color:#fff}
:root[data-theme="dark"] .look-pop .card,:root[data-theme="dark"] .look-pop .pts button,:root[data-theme="dark"] .look-pop .actions .ghost{box-shadow:5px 5px 0 #000}

/* Sunlight: black and white, the biggest numbers */
:root[data-look="sun"]{--bg:#ffffff;--ink:#000000}
:root[data-look="sun"][data-theme="dark"]{--bg:#000000;--ink:#ffffff}
.look-sun{color:var(--ink)}
.look-sun .card{background:none;box-shadow:none;border:0;border-radius:0;padding:0}
.look-sun .team{border-top:0}
.look-sun .team.us{border-bottom:4px solid var(--ink);padding-bottom:14px}
.look-sun .team-head{align-items:flex-end}
.look-sun .team-head h2{font-family:var(--body);font-weight:700;font-size:30px;display:flex;align-items:center;gap:10px}
.look-sun .team-head h2::before{content:"";width:14px;height:1.1em;background:var(--bar);flex:none}
.look-sun .score{font-weight:800;font-size:128px;line-height:.82}
.look-sun .pts button{background:var(--ink);color:var(--bg);height:78px;border-radius:10px;font-size:40px;font-weight:800;box-shadow:none}
.look-sun .clock{border-bottom:4px solid var(--ink);padding:0 0 10px}
.look-sun .phase{color:var(--ink);font-size:16px;letter-spacing:0;text-transform:none}
.look-sun .time{font-size:64px;font-weight:800;color:var(--ink)}
.look-sun .round{background:var(--ink);color:var(--bg);width:72px;height:72px}
.look-sun .actions .ghost,.look-sun .per-btn{border:3px solid var(--ink);background:none;color:var(--ink);height:64px;font-size:18px;font-weight:700;border-radius:10px}
.look-sun .per-btn{height:52px}
.look-sun .chip{background:none;color:var(--ink);font-weight:700;font-size:17px}
.look-sun .icon{background:none;border:3px solid var(--ink);color:var(--ink);box-shadow:none}
.look-sun .bar .link{color:var(--ink);font-size:19px;font-weight:700}.look-sun .kicker{color:var(--ink);text-transform:none;letter-spacing:0;font-size:15px}
@media (max-height:760px){ .look-sun .score{font-size:92px} .look-sun .pts button{height:62px;font-size:34px} .look-sun .time{font-size:46px} .look-sun .round{width:58px;height:58px} .look-sun .team-head h2{font-size:26px} }
@media (min-width:700px) and (orientation:portrait){
  .look-sun .score{font-size:200px}
  .look-sun .pts button{height:auto;min-height:110px;font-size:56px}
  .fam-board .board{flex:1;align-content:center}
  .fam-board .clockwin{--h:min(12vh,18vw)}
  .fam-board .b-side .win{--h:min(13vh,19vw)}
  .fam-board .b-period .win{--h:min(7vh,10vw)}
  .fam-board .board .word{font-size:44px}
  .fam-board .board .nm{font-size:18px}
  .fam-board .keys{flex:none}
  .fam-board .pts button{height:96px;font-size:44px}
  .fam-board .actions .ghost{height:64px;font-size:18px}
}
@media (orientation:landscape) and (min-width:560px){
  .look-sun .team.us{border-bottom:0;padding-bottom:0}
  .look-sun .mid{border-left:4px solid var(--ink);border-right:4px solid var(--ink);padding:0 12px}
  .look-sun .team-head{flex-direction:column;align-items:flex-start}
  .look-sun .score{font-size:clamp(70px,34vh,300px);align-self:center}
  .look-sun .pts button{height:clamp(56px,17vh,170px)}
  .look-sun .time{font-size:clamp(34px,10vh,72px)}
  .look-sun .round{width:clamp(48px,12vh,72px);height:clamp(48px,12vh,72px)}
}

/* Display options sheet */
.looks{display:flex;flex-direction:column;gap:8px}
.look-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--field);border-radius:14px;background:var(--surface);text-align:left;min-height:64px}
.look-opt[aria-checked="true"]{border:2px solid var(--sel-line);background:var(--sel-bg)}
.look-opt .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.look-opt .txt b{font-size:14px;line-height:1.15;letter-spacing:.02em}
.look-opt .txt b span{color:var(--sel-ink);font-weight:600;letter-spacing:0}
.look-opt small{font-size:13px;color:var(--muted2)}
.look-opt .dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;box-sizing:border-box}
.look-opt[aria-checked="true"] .dot{border:7px solid var(--sel-line)}
.mini{width:96px;height:56px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:space-around;overflow:hidden;box-sizing:border-box}
.mini .led{height:24px}
.m-clean{background:#eef1f4;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;padding:5px}
.m-clean b{background:#fff;border-radius:4px;border-top:3px solid #2a78d6;display:flex;justify-content:space-between;padding:0 5px;font:700 13px var(--cond);color:#10161d}
.m-clean b+b{border-top-color:#eb6834}.m-clean em{font-style:normal}
.m-vintage{background:#050505;border:3px solid #1c1c1c}
.m-modern{background:#1f4fc4;border:3px solid #dfe6f2;border-radius:5px}.m-modern b{background:#050505;padding:2px;line-height:0}
.m-pop{background:#fff1d6;border:2px solid #111;border-radius:0;position:relative}
.m-pop b{font:700 18px Poppins,var(--body);color:#fff;border:2px solid #111;box-shadow:3px 3px 0 #111;padding:0 5px;background:#2a78d6;transform:rotate(-3deg)}
.m-pop b+b{background:#eb6834;transform:rotate(3deg)}
.m-sun{background:#fff;border:2px solid #000;font:800 34px var(--cond);color:#000;gap:4px}.m-sun i{width:3px;height:34px;background:#000}

/* ---------- MIDNIGHT LCD (Green glow): green digital-watch digits on black ---------- */
:root[data-look="midnight"]{--bg:#000000}
.look-midnight{color:#39ff6a}
.look-midnight .bar .link,.look-midnight .kicker{color:#39ff6a}.look-midnight .kicker{color:#1fae47}
.look-midnight .icon{background:none;border:2px solid #1fae47;color:#39ff6a;box-shadow:none}
.look-midnight .board{background:none;border:0;box-shadow:none;padding:4px 0 10px}
.look-midnight .b-clock{border-bottom:2px solid #39ff6a;box-shadow:0 8px 8px -8px #39ff6a;padding-bottom:12px}
.look-midnight .win{background:none;padding:0}
.look-midnight .nm,.look-midnight .klabel{color:#39ff6a;font-weight:700}
.look-midnight .nm i,.look-midnight .klabel i{box-shadow:0 0 0 2px #000,0 0 0 3px #1fae47}
.look-midnight .b-side{flex-direction:column-reverse}
.look-midnight .b-ball{align-self:center;color:#39ff6a;filter:drop-shadow(0 0 3px #39ff6a)}
.ball-icon{width:clamp(36px,10vw,72px);height:auto;display:block}
.look-midnight .phase{color:#39ff6a}.look-midnight .phase.ended{color:#b6ff7a}
.look-midnight .round.go{background:#39ff6a;color:#000}.look-midnight .round.pause{background:none;border:2px solid #39ff6a;color:#39ff6a}
.look-midnight .pts button{border:2px solid #39ff6a;border-radius:10px;background:#031a09;color:#39ff6a;font-family:var(--cond);font-weight:800}
.look-midnight .ghost{border:2px solid #1fae47;border-radius:10px;background:none;color:#39ff6a}
.look-midnight .chip{background:none;border:1px solid #1fae47;color:#39ff6a}
.look-midnight .foot{color:#1fae47}
@keyframes lcdGlow{0%{filter:drop-shadow(0 0 6px #39ff6a) brightness(1.9)}100%{filter:drop-shadow(0 0 3px #39ff6a) brightness(1)}}
.look-midnight .win.glow .led{animation:lcdGlow .5s ease-out}
@keyframes blink3{0%,49%{opacity:1}50%,100%{opacity:.12}}
.clockwin.blink3{animation:blink3 .5s steps(1) 3}

/* ---------- FLIP SCOREBOARD (Courtside classic): flip cards on a black stand ---------- */
:root[data-look="flip"]{--bg:#ec8a2c}
.look-flip{color:#111;background:linear-gradient(#f6a54a,#ec8a2c 55%,#e07a1f)}
.look-flip .bar .link{color:#111;font-weight:700}.look-flip .kicker{color:#5a2d05}
.look-flip .icon{background:#111;color:#fff;box-shadow:none}
.look-flip .board{background:#1b1b1b;border-radius:14px;box-shadow:0 8px 0 #000;padding-top:calc(var(--ring,14px) + 10px)}
.look-flip .board{row-gap:clamp(8px,2.6vh,18px)}.look-flip .b-side .win,.look-flip .b-period .win{padding-top:clamp(2px,1vh,6px)}
.look-flip .win{background:none;padding:0}
.look-flip .b-side{flex-direction:column-reverse}
.look-flip .nm{color:#fff;font-weight:700}.look-flip .b-period .word{color:#bbb;letter-spacing:.12em}
.look-flip .phase{color:#ffd23f}.look-flip .phase.ended{color:#ff8a7a}
.look-flip .round.go{background:#1f9d55;color:#fff}.look-flip .round.pause{background:#fff;color:#111}
.look-flip .pts button{background:var(--btn);color:var(--btn-ink);border:3px solid #111;border-bottom-width:6px;border-radius:12px;font-weight:800}
.look-flip .ghost{background:#fff;color:#111;border:3px solid #111;border-bottom-width:6px;border-radius:12px;font-weight:800}
.look-flip .board .per-btn{border-bottom-width:3px}
.look-flip .klabel{color:#111}
.look-flip .chip{background:#111;color:#fff}
.look-flip .foot{color:#5a2d05}
/* the banner floats over the board (it takes no room, so nothing moves when crunch time starts) */
.look-flip .clock-row{position:relative}
.crunch{position:absolute;z-index:5;left:50%;bottom:calc(100% - 12px);translate:-50% 0;white-space:nowrap;pointer-events:none;background:#111;color:#ffd23f;border:3px solid #fff;border-radius:8px;padding:2px 14px;font:800 clamp(16px,3.4vh,30px)/1.2 var(--body);letter-spacing:.04em;box-shadow:4px 4px 0 #000;transform:rotate(-4deg);animation:crunchIn .45s ease-out,crunchPulse 1s ease-in-out .45s infinite}
@keyframes crunchIn{0%{transform:scale(.6) rotate(-4deg);opacity:0}60%{transform:scale(1.12) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}
@keyframes crunchPulse{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.06) rotate(-4deg)}}
/* a flip card: top and bottom halves; while turning, the old top folds down and the new bottom swings in */
.flip{display:inline-flex;align-items:center;gap:calc(var(--h) * .06);max-width:100%}
.fc{position:relative;display:inline-block;flex:none;height:var(--h);width:calc(var(--h) * .68);border-radius:calc(var(--h) * .07);background:var(--fbg);color:var(--fink);perspective:calc(var(--h) * 5);box-shadow:0 2px 0 rgba(0,0,0,.35);font:800 calc(var(--h) * .78)/var(--h) var(--body)}
.fc .h,.fc .lf{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--fbg)}
.fc .t,.fc .lt{top:0;border-radius:calc(var(--h) * .07) calc(var(--h) * .07) 0 0}
.fc .b,.fc .lb{bottom:0;border-radius:0 0 calc(var(--h) * .07) calc(var(--h) * .07)}
.fc .t{box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
.fc b{position:absolute;left:0;right:0;height:var(--h);text-align:center}
.fc .t b,.fc .lt b{top:0}.fc .b b,.fc .lb b{bottom:0}
.fc .lt{z-index:2;transform-origin:50% 100%;backface-visibility:hidden;animation:fcTop .16s ease-in forwards}
.fc .lb{z-index:2;transform-origin:50% 0;transform:rotateX(90deg);backface-visibility:hidden;animation:fcBottom .16s ease-out .16s forwards}
@keyframes fcTop{to{transform:rotateX(-90deg)}}
@keyframes fcBottom{to{transform:rotateX(0)}}
.fc .rg{position:absolute;z-index:3;top:calc(var(--h) * -.14);left:16%;width:calc(var(--h) * .1);height:calc(var(--h) * .26);border:calc(var(--h) * .035) solid #0d0d0d;border-radius:999px}
.fc .rg.r{left:auto;right:16%}
.fc-colon{font:800 calc(var(--h) * .6)/1 var(--body);color:#f4f4f4}
.look-flip .clockwin{--ring:calc(var(--h) * .14)}
.look-flip .b-clock .clock-row{padding-top:calc(var(--h, 40px) * .14)}
@media (orientation:landscape) and (max-height:500px){.crunch{font-size:clamp(14px,4.6vh,20px);padding:1px 10px;bottom:calc(100% - 8px)}}
@media (prefers-reduced-motion:reduce){.fc .lt,.fc .lb,.crunch{animation:none}.fc .lt{display:none}.fc .lb{transform:none}}

/* ---------- BLACKTOP (Street): asphalt court, hoop, a shot on every basket ---------- */
:root[data-look="blacktop"]{--bg:#2b2c30}
.look-blacktop{isolation:isolate;color:#f4f1ea;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.035) 0 1px,transparent 2px) 0 0/7px 7px,radial-gradient(circle at 70% 60%,rgba(0,0,0,.25) 0 1px,transparent 2px) 0 0/9px 9px,linear-gradient(#34353a,#2a2b2f)}
.bt-court{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.look-blacktop .bar .link{color:#f4f1ea;font-weight:700}
.look-blacktop .kicker{color:#ffd23f;font-weight:800;transform:rotate(-2deg)}
.look-blacktop .icon{background:rgba(0,0,0,.3);border:2px solid #f4f1ea;color:#f4f1ea;box-shadow:none}
.look-blacktop .icon[aria-pressed="true"]{background:rgba(255,210,63,.25)}
.look-blacktop .board{background:none;border:0;box-shadow:none;padding:4px 0 8px;align-items:center}
.look-blacktop .win{background:none;padding:0}
.bt-clock{display:inline-block;background:#0b0b0b;border:3px solid #555;border-radius:6px;padding:0 12px;font:800 calc(var(--h) * .62)/1.15 var(--cond);color:#ff4b3e;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.bt-num{display:inline-block;font:800 calc(var(--h) * 1.15)/1 var(--cond);color:#fff;transform:skewX(-12deg);padding:0 .14em 0 .1em;text-shadow:calc(var(--h) * .05) calc(var(--h) * .05) 0 var(--tc),0 0 1px #000;font-variant-numeric:tabular-nums}
.look-blacktop .b-side{flex-direction:column}.look-blacktop .b-side .win{padding:0 calc(var(--h) * .16)}
.look-blacktop .b-side.us{align-items:flex-start}.look-blacktop .b-side.them{align-items:flex-end}
.look-blacktop .nm{font:800 clamp(16px,3vh,26px)/1.1 var(--cond);font-style:italic;color:#f4f1ea;transform:rotate(-3deg)}
.look-blacktop .b-side.them .nm{transform:rotate(3deg)}
.b-hoop{position:relative;align-self:center}
.hoop{display:block;width:clamp(110px,30vw,240px);height:auto;overflow:visible}
@media (orientation:landscape) and (min-width:560px){ .hoop{width:clamp(80px,min(30vh,22vw),230px)} .look-blacktop .board{padding:0} }
.hoop-net{transform-box:fill-box;transform-origin:50% 0}
.call{position:absolute;left:50%;top:78%;transform:translate(-50%,0) rotate(-6deg);white-space:nowrap;pointer-events:none;opacity:0;font:800 clamp(18px,3.4vh,34px)/1 var(--cond);font-style:italic;color:#ffd23f;text-shadow:3px 3px 0 #000;z-index:4}
.call.show{animation:callPop 1.5s ease-out forwards}
@keyframes callPop{0%,40%{opacity:0;transform:translate(-50%,10px) scale(.6) rotate(-6deg)}55%{opacity:1;transform:translate(-50%,0) scale(1.15) rotate(-6deg)}85%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-6deg)}100%{opacity:0;transform:translate(-50%,-14px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.call.show{animation:callFade 1.5s linear forwards}@keyframes callFade{0%,80%{opacity:1}100%{opacity:0}}}
.bt-ball{position:fixed;left:0;top:0;z-index:30;pointer-events:none}
.bt-ball svg{width:100%;height:100%;display:block}
.look-blacktop .phase{color:#ffd23f}.look-blacktop .phase.ended{color:#ff8a7a}
.look-blacktop .round.go{background:#ffd23f;color:#111}.look-blacktop .round.pause{background:#f4f1ea;color:#111}
.look-blacktop .pts button{background:var(--btn);color:var(--btn-ink);border:3px solid #f4f1ea;border-radius:6px;box-shadow:0 4px 0 rgba(0,0,0,.55);font:800 clamp(26px,4.5vh,44px) var(--cond);font-style:italic}
.look-blacktop .pts button:nth-child(1){transform:rotate(-1.5deg)}.look-blacktop .pts button:nth-child(2){transform:rotate(1deg)}.look-blacktop .pts button:nth-child(3){transform:rotate(-.5deg)}
.look-blacktop .ghost{border:3px solid #f4f1ea;border-radius:6px;background:rgba(0,0,0,.35);color:#f4f1ea;font-weight:800}
.look-blacktop .klabel{color:#f4f1ea;font-style:italic;font-family:var(--cond);font-size:17px}
.look-blacktop .chip{background:rgba(0,0,0,.4);border:1px solid #888;color:#f4f1ea}
.look-blacktop .foot{color:#aaa}

/* previews in Display options */
.m-midnight{background:#000;border:2px solid #1fae47}.m-midnight .led{filter:drop-shadow(0 0 2px #39ff6a)}
.m-flip{background:linear-gradient(#f6a54a,#e07a1f);gap:2px;justify-content:center}
.m-flip b{display:inline-block;width:18px;height:28px;border-radius:3px;font:800 22px/28px var(--body);text-align:center;color:#fff;box-shadow:0 0 0 2px #1b1b1b}
.m-flip b.r{background:#e8452c}.m-flip b.u{background:#2f8fe0}.m-flip b.u:first-of-type{margin-left:6px}
.m-blacktop{background:#2e2f34;gap:2px;justify-content:center}.m-blacktop svg{width:30px;height:22px}
.m-blacktop b{font:800 20px var(--cond);font-style:italic;color:#fff;text-shadow:2px 2px 0 #e8452c}.m-blacktop b+b{text-shadow:2px 2px 0 #2f8fe0}

/* Back up and restore (My games) */
.keep{display:flex;flex-direction:column;gap:2px;margin-top:18px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line);color:var(--muted);font-size:14px;line-height:1.4}
.keep p{margin:0}
.keep-acts{display:flex;flex-wrap:wrap;gap:0 18px}
.keep .link svg,.kept .link svg{width:18px;height:18px}
/* Send games */
.lead-s{margin:6px 0 12px;color:var(--muted2);font-size:15px;line-height:1.45}
.send .seg{margin-bottom:12px}
.send .row .who{flex:1;min-width:0;display:flex;flex-direction:column}
.send .row .who span{color:var(--muted);font-size:14px}
.send .row .sc{font-family:var(--cond);font-weight:700;font-size:26px;flex:none}
.row.pick{width:100%;font:inherit;color:inherit}
.row.pick .box{width:28px;height:28px;flex:none;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:#fff}
.row.pick[aria-checked="true"]{border-color:var(--accent)}
.row.pick[aria-checked="true"] .box{background:var(--primary);border-color:var(--primary)}
.pick-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.send-all{margin:8px 2px;color:var(--muted2);font-size:16px}
.send .dock button svg{width:22px;height:22px;margin-right:6px;vertical-align:-4px}