:root{
  --bg:#121417;--panel:#1c1f24;--line:#2c3038;--line2:#3a3f48;--ink:#f2efe8;--mute:#a3a7ae;
  --amber:#f0a93b;--blue:#2f6fd6;--green:#1f8a5b;--missbg:#14231b;--missink:#7fd6ab;--purple:#7d3fc0;
  --num:'Avenir Next Condensed','AvenirNextCondensed-Bold','Barlow Condensed','Arial Narrow',sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-text-size-adjust:100%}
body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:none;background:none;padding:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button:disabled{opacity:.4;cursor:not-allowed}
input,textarea{font:inherit;color:var(--ink)}
.n{font-family:var(--num);font-weight:700;font-variant-numeric:tabular-nums}
.muted{color:var(--mute)}
.grow{flex:1;min-width:0}

/* general pages */
.view{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 12px) 14px calc(env(safe-area-inset-bottom) + 20px);display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.bar{min-height:52px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 14px}
.bar h1{margin:0;font-family:var(--num);font-weight:700;font-size:27px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);font-weight:600;font-size:15px;white-space:nowrap}
.btn.primary{background:var(--amber);color:#1a1204;border-color:var(--amber);font-family:var(--num);font-weight:700;font-size:21px}
.btn.danger{border-color:#6b2a2d;color:#ff8a8d}
.btn.wide{width:100%;min-height:56px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.label{font-family:var(--num);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.field{width:100%;height:52px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:17px;outline:none;-webkit-appearance:none}
.field:focus{border-color:var(--amber)}
.field.bad{border:2px solid var(--amber)}
textarea.field{height:150px;padding:12px 14px;resize:vertical}
.note{font-size:14px;color:var(--mute);line-height:1.4}

/* home */
.game{display:flex;flex-direction:column;gap:10px}
.game .row{display:flex;align-items:center;gap:12px}
.game .opp{font-weight:600;font-size:17px}
.game .sc{font-family:var(--num);font-weight:700;font-size:30px}
.game .acts{display:flex;gap:8px}
.game .acts .btn{flex:1}

/* squad */
.srow{display:flex;gap:8px;align-items:center}
.srow .sn{width:68px;flex:none;text-align:center;padding:0 4px;font-family:var(--num);font-weight:700;font-size:26px}
.x{width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--mute);flex:none}
.addrow{min-height:52px;border-radius:12px;border:2px dashed var(--line2);font-weight:500}

/* lineup */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tile{min-height:92px;border-radius:16px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px}
.tile .num{font-family:var(--num);font-weight:700;font-size:44px;line-height:1}
.tile .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;color:#c9ccd1}
.tile .tg{font-family:var(--num);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8f97}
.tile.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tile.sel .nm,.tile.sel .tg{color:#3d4250}
.lfoot{display:flex;align-items:baseline;gap:12px;padding:0 4px}
.lfoot .cnt{font-family:var(--num);font-weight:700;font-size:34px}

/* court: phone portrait is the base layout */
.court{height:100dvh;display:flex;flex-direction:column;gap:8px;padding:calc(env(safe-area-inset-top) + 6px) 12px calc(env(safe-area-inset-bottom) + 8px);overflow:hidden}
.colL,.colM,.colR{display:contents}
.top{order:0;flex:none;height:50px;background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:8px;padding:0 5px}
.log{order:1;flex:1;min-height:0}
.prompt{order:2;flex:none;height:56px}
.players{order:3;flex:none;height:78px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.made{order:4;flex:none;height:76px}
.miss{order:5;flex:none;height:52px}
.reb{order:6;flex:none;height:80px}
.made,.miss,.reb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.them{order:7;flex:none;height:50px;display:flex;gap:6px;align-items:center}

.top .ic{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--mute);flex:none}
.top .clock{font-family:var(--num);font-weight:600;font-size:20px;color:var(--mute);font-variant-numeric:tabular-nums;min-width:44px}
.top .score{font-family:var(--num);font-weight:700;font-size:27px;font-variant-numeric:tabular-nums;white-space:nowrap}
.top .tf{font-family:var(--num);font-weight:600;font-size:15px;color:var(--mute);white-space:nowrap}
.top .qb{height:40px;min-width:46px;border-radius:9px;border:1px solid var(--line2);font-family:var(--num);font-weight:600;font-size:19px;flex:none}
.top .fb{height:40px;padding:0 10px;border-radius:9px;border:2px solid var(--ink);font-weight:600;font-size:14px;flex:none;white-space:nowrap}
.w4{color:var(--amber)}.w5{color:#ff8a8d}

.ev{border-radius:14px;font-family:var(--num);font-weight:700;display:flex;align-items:center;justify-content:center;line-height:.95;text-align:center;outline:0 solid transparent;outline-offset:3px;transition:transform .06s}
.ev:active{transform:scale(.96)}
.ev.on{outline:4px solid var(--ink)}
.ev.mk{background:var(--green);color:#fff;font-size:44px}
.ev.ms{background:var(--missbg);color:var(--missink);border:2px solid var(--green);font-size:23px}
.ev.or{background:var(--amber);color:#1a1204;font-size:29px}
.ev.dr{background:var(--blue);color:#fff;font-size:29px}
.ev.fo{background:var(--purple);color:#fff;font-size:29px}

.them .label{width:38px;flex:none;font-size:13px;letter-spacing:.05em}
.tm{flex:1;height:100%;border-radius:12px;border:2px solid var(--line2);background:#262a31;font-family:var(--num);font-weight:700;font-size:23px;transition:transform .06s}
.tm:active{transform:scale(.95)}
.tm.sm{font-size:18px}

.prompt{border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 6px 0 14px}
.prompt .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.prompt .row{display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.prompt .k{font-family:var(--num);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
.prompt .q{font-family:var(--num);font-weight:700;font-size:23px}
.prompt .cd{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.prompt .cd i{display:block;height:100%;width:100%;background:currentColor;animation:cd 5s linear forwards}
@keyframes cd{from{width:100%}to{width:0%}}

.pl{border-radius:14px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;transition:transform .06s}
.pl:active{transform:scale(.95)}
.pl .num{font-family:var(--num);font-weight:700;font-size:31px;line-height:1}
.pl .nm{max-width:100%;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;color:#c9ccd1}
.pl .fl{min-height:12px;font-family:var(--num);font-weight:600;font-size:12px;line-height:1;color:var(--mute)}
.pl .fl.f4{color:var(--amber)} .pl .fl.f5{color:#ff8a8d}
.lit .pl{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lit .pl .nm{color:#3d4250} .lit .pl .fl{color:#4a4f59} .lit .pl .fl.f4{color:#a15c00} .lit .pl .fl.f5{color:#b4232a}

.log{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 12px 4px;display:flex;flex-direction:column;overflow:hidden}
.loghead{display:flex;align-items:center;gap:8px;height:48px;flex:none}
.loghead .btn{min-height:38px;padding:0 12px;font-size:14px}
.loglist{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.le{display:flex;align-items:center;gap:10px;height:40px;border-top:1px solid var(--line);width:100%;text-align:left}
.le .t{width:44px;flex:none;font-family:var(--num);font-size:18px;color:var(--mute);font-variant-numeric:tabular-nums}
.le .c{width:10px;height:10px;border-radius:3px;flex:none}
.le .l{flex:1;min-width:0;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.le .w{font-family:var(--num);font-weight:700;font-size:20px;white-space:nowrap}
.le .w.u{color:var(--amber)} .le .w.t{color:var(--mute);font-size:16px}
.empty{padding:14px 0;color:var(--mute);font-size:14px}

.flash{animation:flash .45s ease-out}
@keyframes flash{from{box-shadow:0 0 0 5px var(--ink)}to{box-shadow:0 0 0 0 rgba(242,239,232,0)}}

/* iPad / wide landscape */
@media (min-width:900px) and (orientation:landscape){
  .court{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.8fr);grid-template-rows:58px minmax(0,1fr);gap:14px;padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 14px)}
  .top{grid-column:1 / -1;height:58px;padding:0 10px;gap:14px}
  .top .clock{font-size:26px}.top .score{font-size:34px}.top .tf{font-size:17px}
  .colL,.colM,.colR{display:flex;flex-direction:column;gap:12px;min-height:0}
  .colL>*,.colM>*,.colR>*{order:0}
  .made{height:auto;flex:3}.miss{height:auto;flex:2}.reb{height:auto;flex:3}
  .made,.miss,.reb{gap:12px}
  .ev.mk{font-size:68px}.ev.ms{font-size:32px}.ev.or,.ev.dr,.ev.fo{font-size:42px}
  .prompt{height:110px}.prompt .q{font-size:38px}.prompt .k{font-size:18px}.prompt .cd{height:8px}
  .them{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:58px;gap:10px}
  .them .label{grid-column:1 / -1;width:auto;font-size:16px;height:auto}
  .tm{font-size:30px}.tm.sm{font-size:24px}
  .log{flex:1}
  .players{height:auto;flex:1;display:flex;flex-direction:column;gap:12px}
  .pl{flex:1}.pl .num{font-size:58px}.pl .nm{font-size:17px}.pl .fl{font-size:15px;min-height:15px}
}

/* stats */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.box{width:100%;border-collapse:collapse;font-size:15px}
.box th,.box td{padding:9px 5px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.box th:nth-child(-n+2),.box td:nth-child(-n+2){text-align:left}
.box th{font-family:var(--num);font-weight:600;letter-spacing:.06em;color:var(--mute);font-size:14px}
.box td.pts{font-family:var(--num);font-weight:700;font-size:19px}
.box tr.tot td{font-weight:700;border-bottom:none}
.box tr.unk td{color:var(--amber)}

/* sheets */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:10;cursor:pointer}
.sheet{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:18px 14px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;gap:12px;max-height:88dvh;overflow-y:auto;cursor:default}
.sheet h2{margin:0;font-family:var(--num);font-weight:700;font-size:26px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.chip{min-height:64px;border-radius:12px;border:2px solid var(--line2);background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:4px}
.chip .num{font-family:var(--num);font-weight:700;font-size:28px;line-height:1}
.chip .nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#c9ccd1}
.chip.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip.sel .nm{color:#3d4250}
.sheet .acts{display:flex;gap:8px}.sheet .acts .btn{flex:1;min-height:52px}

#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;max-width:90vw;text-align:center}
#toast.show{opacity:1}