/* The Live app's own styles (a copy taken 2026-10-06), so the keyboard looks like it. Edit keys.css, not this file. */
600;700;800;900&display=swap");
* { box-sizing: border-box; margin: 0px; padding: 0px; -webkit-tap-highlight-color: transparent; }
html, body, #root { height: 100%; background: rgb(7, 8, 11); color: rgb(241, 243, 247); font-family: Inter, system-ui, sans-serif; overflow: hidden; user-select: none; }
.screen { height: 100%; padding: calc(14px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 10px; position: relative; }
.strip { height: 66px; border-radius: 16px; background: rgb(14, 16, 22); border: 1px solid rgb(27, 30, 39); display: flex; align-items: center; padding: 0px 14px; gap: 12px; flex: 0 0 auto; }
.crest { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(155deg, rgb(42, 52, 68), rgb(20, 27, 38)); display: grid; place-items: center; font-weight: 900; font-size: 14px; flex: 0 0 auto; overflow: hidden; }
.crest.has { background: transparent; }
.crest img { width: 100%; height: 100%; object-fit: contain; }
.tname { font-size: 14px; font-weight: 800; white-space: nowrap; }
.tsub { font-size: 9px; letter-spacing: 0.12em; color: rgb(91, 98, 112); font-weight: 800; margin-top: 3px; white-space: nowrap; }
.score { font-size: 36px; font-weight: 900; letter-spacing: -0.03em; margin: 0px 6px; font-variant-numeric: tabular-nums; }
.mid { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0px; }
.qs { display: flex; gap: 4px; background: rgb(18, 21, 28); border-radius: 99px; padding: 3px; }
.q { padding: 3px 11px; border-radius: 99px; font-size: 11px; font-weight: 900; color: rgb(135, 140, 148); }
.q.on { background: rgb(241, 243, 247); color: rgb(7, 8, 11); }
.clockrow { display: flex; align-items: center; gap: 8px; }
.clock { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; min-width: 64px; text-align: center; }
.cbtn { height: 34px; padding: 0px 14px; border-radius: 10px; font-size: 12px; font-weight: 900; display: flex; align-items: center; gap: 6px; border: 1px solid rgb(42, 47, 58); color: rgb(168, 173, 189); cursor: pointer; white-space: nowrap; }
.cbtn.stop { background: rgba(240, 82, 74, 0.12); color: rgb(240, 82, 74); border-color: rgba(240, 82, 74, 0.4); }
.cbtn.go { background: rgb(242, 107, 33); color: rgb(22, 10, 2); border-color: rgb(242, 107, 33); }
.saved { font-size: 11px; color: rgb(135, 140, 148); font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: rgb(34, 197, 94); }
.dot.off { background: rgb(240, 82, 74); }
.tool { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgb(42, 47, 58); display: grid; place-items: center; color: rgb(168, 173, 189); font-size: 16px; flex: 0 0 auto; cursor: pointer; }
.board { flex: 1 1 0%; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; min-height: 0px; }
.pane { border-radius: 16px; background: rgb(14, 16, 22); border: 1px solid rgb(27, 30, 39); padding: 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0px; }
.lb { font-size: 9px; letter-spacing: 0.16em; font-weight: 900; color: rgb(91, 98, 112); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; }
.lb i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; flex: 0 0 auto; }
.lb .r { margin-left: auto; color: rgb(135, 140, 148); letter-spacing: 0.06em; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; flex: 1 1 0%; min-height: 0px; }
.stack { display: flex; flex-direction: column; gap: 9px; min-height: 0px; }
.k { flex: 1 1 0%; border-radius: 14px; background: rgb(18, 21, 28); border: 1.5px solid rgb(35, 40, 51); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset; cursor: pointer; }
.k:active { transform: scale(0.98); filter: brightness(1.15); }
.k b { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.k span { font-size: 9px; letter-spacing: 0.14em; font-weight: 800; color: rgb(91, 98, 112); }
.k.us { border-color: rgba(59, 130, 246, 0.55); }
.k.opp { border-color: rgba(242, 107, 33, 0.55); }
.k.miss b { color: rgb(240, 82, 74); }
.k.miss { border-color: rgba(240, 82, 74, 0.4); }
.k.warn b { color: rgb(240, 82, 74); }
.k.sub { border-color: rgba(255, 182, 118, 0.55); }
.k.sub b { color: rgb(255, 182, 118); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; flex: 1 1 0%; min-height: 0px; }
.teams { display: flex; flex-direction: column; gap: 6px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgb(18, 21, 28); border: 1px solid rgb(35, 40, 51); }
.trow .c { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(155deg, rgb(42, 52, 68), rgb(20, 27, 38)); display: grid; place-items: center; font-weight: 900; font-size: 10px; flex: 0 0 auto; }
.trow .n { font-size: 13px; font-weight: 800; flex: 1 1 0%; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .s { font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.trow .f { font-size: 9px; letter-spacing: 0.1em; color: rgb(91, 98, 112); font-weight: 800; white-space: nowrap; }
.feed { flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px; min-height: 0px; overflow: hidden; }
.feed .empty { color: rgb(91, 98, 112); font-size: 12px; font-weight: 600; padding: 8px 2px; }
.fev { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: rgb(18, 21, 28); border: 1px solid rgb(35, 40, 51); min-height: 38px; }
.fev.us { border-left: 3px solid rgb(59, 130, 246); }
.fev.opp { border-left: 3px solid rgb(242, 107, 33); }
.fev .t { font-size: 10px; color: rgb(135, 140, 148); font-weight: 800; width: 54px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.fev .who { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.fev .what { font-size: 11.5px; color: rgb(168, 173, 189); margin-left: auto; white-space: nowrap; }
.fev .what.made { color: rgb(34, 197, 94); font-weight: 800; }
.fev .what.miss { color: rgb(240, 82, 74); font-weight: 800; }
.fev .pts { font-size: 12px; font-weight: 900; color: rgb(242, 107, 33); width: 24px; text-align: right; flex: 0 0 auto; }
.clockbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; flex: 0 0 auto; }
.cb-time { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; min-width: 66px; text-align: center; }
.cb-btn { height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; cursor: pointer; padding: 0px 18px; white-space: nowrap; border: 1.5px solid rgb(42, 47, 58); color: rgb(168, 173, 189); }
.cb-btn:active { transform: scale(0.98); filter: brightness(1.15); }
.cb-go { background: rgb(242, 107, 33); color: rgb(22, 10, 2); border-color: rgb(242, 107, 33); }
.cb-stop { background: rgba(240, 82, 74, 0.14); color: rgb(240, 82, 74); border-color: rgba(240, 82, 74, 0.5); }
.cb-end { background: rgb(18, 21, 28); }
.cb-final { background: rgb(18, 21, 28); color: rgb(91, 98, 112); }
.undo { height: 44px; border-radius: 12px; border: 1px solid rgba(242, 107, 33, 0.5); background: rgba(242, 107, 33, 0.08); color: rgb(242, 107, 33); font-weight: 900; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; cursor: pointer; padding: 0px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.undo.off { border-color: rgb(42, 47, 58); color: rgb(91, 98, 112); background: transparent; }
.foot { height: 46px; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.fb { height: 44px; padding: 0px 14px; border-radius: 12px; border: 1px solid rgb(42, 47, 58); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: rgb(168, 173, 189); background: rgb(14, 16, 22); cursor: pointer; white-space: nowrap; }
.fb.exp { margin-left: auto; }
.picker { flex: 1 1 0%; border-radius: 16px; background: rgb(14, 16, 22); border: 1px solid rgb(27, 30, 39); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0px; }
.ph { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ph h2 { font-size: 19px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.ph .hint { font-size: 12px; color: rgb(135, 140, 148); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0px; }
.ph .cancel { margin-left: auto; height: 40px; padding: 0px 16px; border-radius: 10px; border: 1px solid rgb(42, 47, 58); display: flex; align-items: center; font-size: 13px; font-weight: 800; color: rgb(168, 173, 189); cursor: pointer; flex: 0 0 auto; }
.rows { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0px; }
.rows.both { justify-content: stretch; }
.rowh { font-size: 9px; letter-spacing: 0.16em; font-weight: 900; color: rgb(135, 140, 148); display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rowh i { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 10px; min-height: 0px; align-content: center; }
.rows.both .tiles { flex: 1 1 0%; }
.tile { border-radius: 14px; background: rgb(18, 21, 28); border: 2px solid rgb(42, 47, 58); display: flex; flex-direction: column; align-items: center; padding: 10px 6px 9px; min-height: 0px; cursor: pointer; min-width: 0px; }
.tile:active { transform: scale(0.98); filter: brightness(1.15); }
.tile.us { border-color: rgba(59, 130, 246, 0.5); }
.tile.opp { border-color: rgba(242, 107, 33, 0.5); }
.tile.team { border-style: dashed; }
.tile.none { border-style: dashed; border-color: rgb(42, 47, 58); justify-content: center; gap: 6px; }
.tno { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; margin-bottom: 6px; line-height: 1; }
.tno.dim { font-size: 18px; color: rgb(135, 140, 148); }
.ph2 { width: 100%; aspect-ratio: 3 / 4; max-height: 300px; border-radius: 10px; background: linear-gradient(rgb(26, 28, 34), rgb(16, 18, 23)); position: relative; overflow: hidden; flex: 0 1 auto; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: rgb(74, 81, 96); letter-spacing: 0.02em; }
.ph2 img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.tile.us .ph2 { background: linear-gradient(rgb(24, 38, 64), rgb(16, 18, 23)); }
.tile.opp .ph2 { background: linear-gradient(rgb(42, 26, 16), rgb(16, 18, 23)); }
.ph2.crest { background: linear-gradient(155deg, rgb(42, 52, 68), rgb(20, 27, 38)); color: rgb(241, 243, 247); font-size: 34px; }
.rows.both .ph2 { max-height: 120px; }
.rows.both .tno { font-size: 20px; }
.tnm { font-size: 12px; font-weight: 900; margin-top: 8px; letter-spacing: 0.02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tmeta { font-size: 9px; color: rgb(107, 114, 128); font-weight: 700; margin-top: 3px; letter-spacing: 0.06em; white-space: nowrap; }
.choices { flex: 1 1 0%; display: grid; gap: 12px; min-height: 0px; align-content: stretch; }
.choices.n2 { grid-template-columns: 1fr 1fr; }
.choices.n3 { grid-template-columns: 1fr 1fr 1fr; }
.choices.n5 { grid-template-columns: repeat(5, 1fr); }
.choice { border-radius: 18px; background: rgb(18, 21, 28); border: 2px solid rgba(34, 197, 94, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px; cursor: pointer; min-height: 120px; }
.choice:active { transform: scale(0.98); filter: brightness(1.15); }
.choice b { font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.choice span { font-size: 13px; color: rgb(135, 140, 148); font-weight: 600; }
.ph .subbtn { margin-left: auto; height: 40px; padding: 0px 14px; border-radius: 10px; border: 1px solid rgba(255, 182, 118, 0.5); background: rgba(255, 132, 0, 0.08); display: flex; align-items: center; font-size: 13px; font-weight: 900; color: rgb(255, 182, 118); cursor: pointer; flex: 0 0 auto; }
.ph .subbtn + .cancel { margin-left: 0px; }
.fb.stats { color: rgb(241, 243, 247); border-color: rgb(58, 64, 80); background: rgb(18, 21, 28); }
.court-wrap { flex: 1 1 0%; min-height: 0px; display: flex; justify-content: center; align-items: center; }
.court { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1535 / 1024; border-radius: 14px; overflow: hidden; border: 1px solid rgb(35, 40, 51); background: rgb(11, 13, 22); cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.court img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.mk { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 99px; pointer-events: none; display: grid; place-items: center; }
.mk.made { background: rgb(34, 197, 94); border: 2px solid rgb(11, 46, 26); box-shadow: rgba(34, 197, 94, 0.35) 0px 0px 0px 2px; }
.mk.miss { background: transparent; }
.mk.miss::before, .mk.miss::after { content: ""; position: absolute; width: 18px; height: 3px; background: rgb(240, 82, 74); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 0px 1px; }
.mk.miss::before { transform: rotate(45deg); }
.mk.miss::after { transform: rotate(-45deg); }
.mk.tmp { width: 28px; height: 28px; animation: 0.9s ease-in-out 0s infinite normal none running pulse; }
@keyframes pulse { 
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.18); }
}
.spot-ok { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: rgb(34, 197, 94); flex: 0 0 auto; justify-content: center; }
.spot-ok .ok { width: 24px; height: 24px; border-radius: 99px; background: rgb(34, 197, 94); color: rgb(6, 42, 20); display: grid; place-items: center; font-size: 13px; }
.mis { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; align-items: center; }
.mis > b { font-size: 15px; font-weight: 900; color: rgb(255, 182, 118); }
.mis .choices { flex: 0 0 auto; grid-auto-rows: 88px; width: 520px; max-width: 100%; }
.stats .ph .hint { white-space: normal; }
.stats-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0px, 1.3fr); grid-auto-rows: min-content; gap: 12px; overflow-y: auto; place-content: start stretch; flex: 1 1 0%; min-height: 0px; }
.stats-grid .stbl-wrap, .stats-grid > .stnote { grid-column: 1 / -1; }
.tcmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 5px 12px; align-items: center; border-radius: 14px; background: rgb(18, 21, 28); border: 1px solid rgb(35, 40, 51); padding: 12px 14px; align-self: start; }
.tcmp-h { font-size: 10px; letter-spacing: 0.14em; font-weight: 900; padding-bottom: 5px; border-bottom: 1px solid rgb(35, 40, 51); margin-bottom: 2px; }
.tcmp-h.us { color: rgb(127, 179, 255); }
.tcmp-h.opp { color: rgb(255, 160, 106); text-align: right; }
.tl { font-size: 10px; letter-spacing: 0.14em; font-weight: 900; color: rgb(91, 98, 112); text-align: center; min-width: 36px; }
.tv { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv.opp { text-align: right; }
.chart { display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
.chart-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chips2 { display: flex; gap: 6px; }
.chip2 { height: 32px; padding: 0px 12px; border-radius: 99px; border: 1px solid rgb(42, 47, 58); display: flex; align-items: center; font-size: 10px; letter-spacing: 0.1em; font-weight: 900; color: rgb(135, 140, 148); cursor: pointer; }
.chip2.us.on { color: rgb(127, 179, 255); border-color: rgba(59, 130, 246, 0.6); background: rgba(59, 130, 246, 0.12); }
.chip2.opp.on { color: rgb(255, 160, 106); border-color: rgba(242, 107, 33, 0.6); background: rgba(242, 107, 33, 0.12); }
.court.view { cursor: default; height: auto; width: 100%; }
.court.view .mk { width: 16px; height: 16px; }
.court.view .mk.miss::before, .court.view .mk.miss::after { width: 14px; height: 2.5px; }
.stbl-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgb(35, 40, 51); background: rgb(18, 21, 28); }
.stbl { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.stbl th, .stbl td { padding: 8px 10px; text-align: center; font-size: 13px; white-space: nowrap; }
.stbl th { font-size: 9px; letter-spacing: 0.12em; color: rgb(91, 98, 112); font-weight: 900; border-bottom: 1px solid rgb(35, 40, 51); }
.stbl th.nm, .stbl td.nm { text-align: left; padding-left: 14px; font-weight: 800; }
.stbl th.nm { color: rgb(168, 173, 189); letter-spacing: 0.04em; font-size: 11px; }
.stbl td { color: rgb(168, 173, 189); font-weight: 700; }
.stbl td.nm { color: rgb(241, 243, 247); }
.stbl tr.on td { color: rgb(241, 243, 247); }
.stbl tr.team td { color: rgb(107, 114, 128); font-style: italic; }
.stbl td.hot { color: rgb(240, 82, 74); font-weight: 900; }
.oc { display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: 7px; vertical-align: 1px; background: rgb(42, 47, 58); }
tr.on .oc.us { background: rgb(59, 130, 246); }
tr.on .oc.opp { background: rgb(242, 107, 33); }
.stnote { font-size: 11.5px; color: rgb(107, 114, 128); line-height: 1.5; }
.toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: rgb(14, 16, 22); border: 1px solid rgba(34, 197, 94, 0.5); border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 40px; z-index: 5; white-space: nowrap; }
.toast .ok { width: 24px; height: 24px; border-radius: 99px; background: rgb(34, 197, 94); color: rgb(6, 42, 20); display: grid; place-items: center; font-size: 13px; }
.over { flex: 1 1 0%; border-radius: 16px; background: rgb(14, 16, 22); border: 1px solid rgb(27, 30, 39); padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0px; }
.over h2 { font-size: 24px; font-weight: 900; }
.over p { font-size: 13px; color: rgb(135, 140, 148); line-height: 1.6; max-width: 720px; }
.final { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 6px 0px 10px; }
.final div { text-align: center; }
.final b { display: block; font-size: 52px; font-weight: 900; letter-spacing: -0.03em; }
.final span { font-size: 14px; font-weight: 800; color: rgb(168, 173, 189); }
.final i { font-style: normal; color: rgb(91, 98, 112); font-size: 22px; }
.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.opt { border-radius: 14px; border: 1px solid rgb(42, 47, 58); background: rgb(18, 21, 28); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.opt b { font-size: 14px; }
.opt span { font-size: 12px; color: rgb(135, 140, 148); line-height: 1.5; }
.opt.pri { border-color: rgb(242, 107, 33); background: rgba(242, 107, 33, 0.1); }
.note { font-size: 11.5px; color: rgb(107, 114, 128); }
.setup { gap: 14px; user-select: text; }
.setup-head h1 { font-size: 26px; font-weight: 900; }
.setup-head p { font-size: 13px; color: rgb(135, 140, 148); margin-top: 4px; }
.setup-grid { flex: 1 1 0%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0px; }
.setup-col { border-radius: 16px; background: rgb(14, 16, 22); border: 1px solid rgb(27, 30, 39); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0px; overflow: auto; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld span { font-size: 9px; letter-spacing: 0.14em; font-weight: 900; color: rgb(91, 98, 112); }
input { font-family: inherit; font-size: 15px; font-weight: 700; color: rgb(241, 243, 247); background: rgb(18, 21, 28); border: 1px solid rgb(42, 47, 58); border-radius: 10px; padding: 11px 12px; outline: none; min-height: 44px; }
input:focus { border-color: rgb(242, 107, 33); }
.roster { display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: rgb(168, 173, 189); background: rgb(18, 21, 28); border: 1px solid rgb(35, 40, 51); }
.chip .av { width: 30px; height: 30px; border-radius: 8px; background: rgb(26, 28, 34); border: 1px solid rgb(42, 47, 58); display: grid; place-items: center; font-size: 13px; overflow: hidden; cursor: pointer; flex: 0 0 auto; }
.chip .av img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.chip b { color: rgb(241, 243, 247); }
.chip i { font-style: normal; font-size: 10px; color: rgb(107, 114, 128); }
.chip em { font-style: normal; cursor: pointer; color: rgb(135, 140, 148); padding: 0px 4px; font-size: 15px; }
.chip.on { border-color: rgb(242, 107, 33); }
.chip.on em:first-of-type { color: rgb(242, 107, 33); }
.addrow { display: flex; gap: 8px; align-items: center; }
.addrow input.n { width: 70px; }
.addrow input.p { width: 80px; }
.addrow input:not(.n):not(.p) { flex: 1 1 0%; }
.addrow button { font-family: inherit; font-weight: 900; font-size: 13px; color: rgb(255, 182, 118); background: rgba(255, 132, 0, 0.09); border: 1px solid rgba(255, 132, 0, 0.32); border-radius: 10px; padding: 0px 16px; min-height: 44px; cursor: pointer; }
.setup-foot { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.setup-foot .hint { font-size: 12.5px; color: rgb(135, 140, 148); font-weight: 600; }
.start { margin-left: auto; font-family: inherit; font-weight: 900; font-size: 15px; color: rgb(22, 10, 2); background: rgb(242, 107, 33); border: 0px; border-radius: 12px; padding: 0px 22px; min-height: 48px; cursor: pointer; }
.start.off { opacity: 0.4; cursor: default; }
.setup-err { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(240, 82, 74, 0.5); background: rgba(240, 82, 74, 0.08); color: rgb(240, 82, 74); font-size: 13px; font-weight: 700; }
.saved-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 7px; border-radius: 12px; border: 1.5px solid rgb(35, 40, 51); background: rgb(18, 21, 28); cursor: pointer; font-size: 13px; color: rgb(168, 173, 189); min-height: 44px; }
.tchip.on { border-color: rgb(242, 107, 33); color: rgb(241, 243, 247); }
.tchip.new { border-style: dashed; color: rgb(135, 140, 148); font-weight: 800; padding: 7px 14px; }
.tchip b { font-weight: 800; }
.tchip i { font-style: normal; font-size: 11px; color: rgb(107, 114, 128); }
.tchip em { font-style: normal; color: rgb(91, 98, 112); padding: 0px 2px 0px 4px; }
.tchip-crest { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(155deg, rgb(42, 52, 68), rgb(20, 27, 38)); display: grid; place-items: center; font-size: 10px; font-weight: 900; overflow: hidden; color: rgb(241, 243, 247); }
.tchip-crest img { width: 100%; height: 100%; object-fit: contain; }
.side-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-btn { font-family: inherit; font-weight: 800; font-size: 12.5px; color: rgb(168, 173, 189); background: rgb(18, 21, 28); border: 1px solid rgb(42, 47, 58); border-radius: 10px; padding: 0px 12px; min-height: 40px; cursor: pointer; }
.mini-crest { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; }
.mini-crest img { width: 100%; height: 100%; object-fit: contain; }
.side-note { font-size: 12px; color: rgb(135, 140, 148); line-height: 1.5; }
.side-note b { color: rgb(241, 243, 247); }
.code-row { display: flex; gap: 8px; align-items: center; }
.code-in { flex: 1 1 0%; min-width: 0px; font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; font-size: 16px; }
.code-in::placeholder { font-family: Inter, system-ui, sans-serif; letter-spacing: 0px; text-transform: none; font-size: 14px; }
.tool-btn.go { background: rgb(242, 107, 33); color: rgb(22, 10, 2); border-color: rgb(242, 107, 33); }
.tool-btn:disabled { opacity: 0.45; cursor: default; }
.codebox { position: absolute; inset: 0px; background: rgba(7, 8, 11, 0.78); display: grid; place-items: center; z-index: 6; padding: 20px; }
.codebox-card { background: rgb(14, 16, 22); border: 1px solid rgb(42, 47, 58); border-radius: 20px; padding: 26px 30px; max-width: 640px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.codebox-card h2 { font-size: 18px; font-weight: 900; }
.codebox-card p { font-size: 13px; color: rgb(135, 140, 148); line-height: 1.5; }
.bigcode { font-family: ui-monospace, Menlo, monospace; font-size: 54px; letter-spacing: 0.16em; color: rgb(242, 107, 33); font-weight: 900; user-select: all; }
.codebox-card .cb-btn { min-width: 160px; margin-top: 6px; }
@keyframes cb-attn { 
  0%, 100% { box-shadow: rgba(242, 107, 33, 0.55) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(242, 107, 33, 0) 0px 0px 0px 6px; }
}
.cb-go.attn, .cbtn.go.attn { animation: 1.6s ease-out 0s infinite normal none running cb-attn; }
@media (prefers-reduced-motion: reduce) {
  .cb-go.attn, .cbtn.go.attn { animation: auto ease 0s 1 normal none running none; }
}
.qlen { display: flex; gap: 6px; flex-wrap: wrap; }
.qlen button { flex: 1 1 0px; min-width: 64px; min-height: 44px; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 800; color: rgb(168, 173, 189); background: rgb(18, 21, 28); border: 1px solid rgb(42, 47, 58); cursor: pointer; }
.qlen button.on { color: rgb(22, 10, 2); background: rgb(242, 107, 33); border-color: rgb(242, 107, 33); }
.cb-go, .cbtn.go { background: rgb(15, 132, 80); color: rgb(255, 255, 255); border-color: rgb(15, 132, 80); }
.cb-stop, .cbtn.stop { background: rgb(201, 59, 50); color: rgb(255, 255, 255); border-color: rgb(201, 59, 50); }
@keyframes cb-attn { 
  0%, 100% { box-shadow: rgba(15, 132, 80, 0.6) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(15, 132, 80, 0) 0px 0px 0px 7px; }
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 9px; display: block; }
.brand b { font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: rgb(241, 243, 247); }
.brand b i { font-style: normal; color: rgb(242, 107, 33); }
.brand span { font-size: 9px; font-weight: 900; letter-spacing: 0.16em; color: rgb(242, 107, 33); text-transform: uppercase; margin-left: 2px; }
.k.wide { grid-column: span 2; }
.k { background: rgb(30, 34, 44); border-color: rgb(50, 56, 70); box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; }
.k.us { border-color: rgba(59, 130, 246, 0.6); }
.k.opp { border-color: rgba(242, 107, 33, 0.5); }
.k.miss { border-color: rgba(240, 82, 74, 0.45); }
.k.sub { border-color: rgba(255, 182, 118, 0.55); }
.k span { color: rgb(154, 161, 174); }
.lb { color: rgb(133, 140, 153); }
.trow, .fev { background: rgb(23, 27, 35); border-color: rgb(42, 48, 60); }
.trow .f { color: rgb(138, 145, 160); }
.feed .empty { color: rgb(133, 140, 153); }
.cb-end { background: rgb(30, 34, 44); border-color: rgb(52, 59, 73); color: rgb(195, 200, 210); }
.cb-final { background: rgb(26, 30, 39); color: rgb(133, 140, 153); }
.fb { background: rgb(26, 30, 39); border-color: rgb(46, 52, 65); color: rgb(188, 193, 203); }
.fb.stats { background: rgb(32, 37, 47); border-color: rgb(61, 68, 83); }
.undo.off { border-color: rgb(46, 52, 65); color: rgb(133, 140, 153); }
.tool { background: rgb(26, 30, 39); border-color: rgb(46, 52, 65); }
.screen { gap: 14px; }
.board { gap: 14px; }
.pane { padding: 16px; gap: 12px; }
.two, .grid2 { gap: 12px; }
.stack { gap: 12px; }
.clockbar { gap: 10px; }
.foot { gap: 10px; }
:root { --s1: #0E1117; --s2: #151922; --s3: #1C212B; --ln: #262C38; --ln2: #323946; --tx2: #A9AFBB; --tx3: #7D8492; --bl: #3B82F6; --blS: #16305F; --blS2: #12264A; --blC: #0C1526; --blL: #8DB8FF; --or: #F26B21; --orS: #4A2410; --orS2: #3A1D0E; --orC: #1A110B; --orL: #F4A574; }
.sb { height: 88px; flex: 0 0 auto; display: grid; grid-template-columns: 44px 1fr minmax(290px, auto) 1fr 44px; gap: 10px; align-items: stretch; }
.sb .tool { width: auto; height: auto; border-radius: 14px; background: var(--s1); border: 1px solid var(--ln); font-size: 22px; }
.sb-team { border-radius: 16px; display: flex; align-items: center; gap: 14px; padding: 0px 20px; min-width: 0px; }
.sb-team.us { background: var(--blS2); border: 1px solid rgba(96, 152, 255, 0.6); }
.sb-team.opp { background: var(--orS2); border: 1px solid rgba(242, 107, 33, 0.6); flex-direction: row-reverse; text-align: right; }
.sb-team .crest { width: 48px; height: 48px; border-radius: 12px; font-size: 16px; color: rgb(255, 255, 255); }
.sb-team.us .crest:not(.has) { background: rgb(29, 59, 120); }
.sb-team.opp .crest:not(.has) { background: rgb(90, 44, 18); }
.sb-nm { min-width: 0px; }
.sb .tname { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.sb .tsub { font-size: 9.5px; letter-spacing: 0.14em; font-weight: 700; margin-top: 5px; }
.sb-team.us .tsub { color: rgb(157, 183, 230); }
.sb-team.opp .tsub { color: rgb(224, 165, 127); }
.sb .score { font-size: 54px; line-height: 1; margin: 0px 0px 0px auto; }
.sb-team.opp .score { margin: 0px auto 0px 0px; }
.sb-clock { border-radius: 16px; background: var(--s2); border: 1px solid var(--ln2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0px 14px; }
.sb .qs { background: transparent; padding: 0px; gap: 3px; }
.sb .q { font-size: 10.5px; font-weight: 800; color: var(--tx3); padding: 2px 9px; }
.sb .q.on { color: rgb(7, 8, 11); }
.sb .clockrow { gap: 10px; }
.sb .clock { font-size: 38px; line-height: 1; min-width: 0px; }
.sb .cbtn { height: 36px; border-radius: 10px; font-size: 13px; font-weight: 800; padding: 0px 14px; }
.sb .cbtn.end { background: rgb(37, 43, 55); border-color: var(--ln2); color: rgb(213, 217, 224); font-size: 12px; padding: 0px 11px; }
.sb .saved { border-radius: 14px; background: var(--s1); border: 1px solid var(--ln); display: grid; place-items: center; font-size: 0px; gap: 0px; }
.sb .saved .dot { width: 9px; height: 9px; }
.board { grid-template-columns: 1fr 0.92fr 1fr; gap: 12px; }
.col { border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 9px; min-height: 0px; min-width: 0px; }
.col.side.us { background: var(--blC); border: 1px solid rgba(59, 130, 246, 0.45); }
.col.side.opp { background: var(--orC); border: 1px solid rgba(242, 107, 33, 0.45); }
.col.feedcol { background: var(--s1); border: 1px solid var(--ln); }
.ch { display: flex; align-items: center; gap: 10px; padding: 0px 2px 9px; border-bottom: 1px solid var(--ln); }
.col.us .ch { border-color: rgba(59, 130, 246, 0.25); }
.col.opp .ch { border-color: rgba(242, 107, 33, 0.25); }
.cdot { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; }
.col.us .cdot { background: var(--bl); }
.col.opp .cdot { background: var(--or); }
.chn { min-width: 0px; }
.chn b { display: block; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chn small { display: block; font-size: 9.5px; letter-spacing: 0.16em; font-weight: 800; margin-top: 2px; }
.col.us .chn small { color: rgb(110, 163, 245); }
.col.opp .chn small { color: rgb(224, 147, 95); }
.cf { margin-left: auto; font-size: 12px; color: var(--tx3); font-weight: 600; white-space: nowrap; }
.cf em { font-style: normal; color: rgb(241, 243, 247); font-weight: 800; margin-left: 5px; }
.col .lb { font-size: 9.5px; color: var(--tx3); margin-top: 1px; }
.col .k { flex: 0 0 auto; min-height: 0px; gap: 4px; border-radius: 13px; box-shadow: none; }
.col .k b { line-height: 1; }
.score-k { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; flex: 1.5 1 0px; min-height: 0px; }
.score-k .k b { font-size: 32px; }
.score-k .k span { font-size: 9.5px; letter-spacing: 0.14em; font-weight: 700; }
.col.us .score-k .k { background: var(--blS); border: 1.5px solid rgba(96, 152, 255, 0.85); }
.col.us .score-k .k span { color: var(--blL); }
.col.opp .score-k .k { background: var(--orS); border: 1.5px solid rgba(242, 107, 33, 0.85); }
.col.opp .score-k .k span { color: var(--orL); }
.col .score-k .k.miss { background: var(--s2); border: 1.5px solid var(--ln2); }
.col .score-k .k.miss b { color: rgb(240, 98, 90); }
.col .score-k .k.miss span { color: var(--tx2); }
.play-k { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; flex: 0.62 1 0px; min-height: 52px; }
.play-k.two { grid-template-columns: 1fr 1fr; flex: 0.5 1 0px; min-height: 48px; }
.play-k .k b { font-size: 17px; }
.play-k .k span { font-size: 8.5px; letter-spacing: 0.12em; font-weight: 700; color: var(--tx2); }
.col.us .play-k .k { background: rgb(24, 38, 74); border: 1px solid rgba(59, 130, 246, 0.32); }
.col.opp .play-k .k { background: rgb(46, 27, 15); border: 1px solid rgba(242, 107, 33, 0.32); }
.col .play-k .k.warn b { color: rgb(240, 98, 90); }
.subbar { flex: 0 0 54px; border-radius: 13px; display: flex; align-items: center; padding: 0px 18px; cursor: pointer; }
.subbar b { display: block; font-size: 17px; font-weight: 900; line-height: 1; }
.subbar span { display: block; font-size: 9px; letter-spacing: 0.14em; font-weight: 700; color: var(--tx2); margin-top: 4px; }
.subbar i { margin-left: auto; font-style: normal; font-size: 22px; color: var(--tx3); }
.subbar:active { transform: scale(0.99); filter: brightness(1.15); }
.col.us .subbar { background: var(--blS2); border: 1px solid rgba(96, 152, 255, 0.55); }
.col.opp .subbar { background: var(--orS2); border: 1px solid rgba(242, 107, 33, 0.55); }
.subbar.off { opacity: 0.45; cursor: default; }
.fh { display: flex; align-items: center; justify-content: space-between; padding: 0px 2px; }
.fh .lb { margin: 0px; }
.fq { font-size: 12px; font-weight: 800; color: var(--tx2); }
.feedcol .feed { gap: 0px; }
.feedcol .feed .empty { padding: 14px 4px; font-size: 13px; }
.latest { border-radius: 14px; padding: 13px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 4px; flex: 0 0 auto; }
.latest.us { background: var(--blS2); border: 1.5px solid rgba(96, 152, 255, 0.75); }
.latest.opp { background: var(--orS2); border: 1.5px solid rgba(242, 107, 33, 0.75); }
.lnum { width: 42px; height: 42px; border-radius: 99px; display: grid; place-items: center; font-weight: 900; font-size: 15px; color: rgb(255, 255, 255); }
.latest.us .lnum { background: var(--bl); }
.latest.opp .lnum { background: var(--or); }
.lmid { min-width: 0px; }
.lwho { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lwhat { font-size: 12.5px; font-weight: 700; color: var(--tx2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lwhat.made { color: rgb(52, 199, 123); }
.lwhat.miss { color: rgb(240, 98, 90); }
.lrt { text-align: right; }
.lsc { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lpts { margin-left: 6px; font-size: 11px; font-weight: 900; border-radius: 6px; padding: 2px 6px; vertical-align: 3px; }
.latest.us .lpts { background: var(--bl); }
.latest.opp .lpts { background: var(--or); }
.ltm { font-size: 11px; color: var(--tx2); font-weight: 700; margin-top: 2px; white-space: nowrap; }
.feedcol .fev { display: grid; grid-template-columns: 40px 8px 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-radius: 0px; background: transparent; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(27, 32, 41); border-image: initial; min-height: 0px; flex: 0 0 auto; }
.feedcol .fev.us, .feedcol .fev.opp { border-left: 0px; }
.fev .t { width: auto; font-size: 11px; color: var(--tx3); }
.fev .d { width: 8px; height: 8px; border-radius: 99px; }
.fev.us .d { background: var(--bl); }
.fev.opp .d { background: var(--or); }
.feedcol .fev .who { font-size: 12.5px; font-weight: 700; }
.fev .who small { display: block; font-size: 11px; font-weight: 600; color: var(--tx2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.fev .who small.made { color: rgb(52, 199, 123); }
.fev .who small.miss { color: rgb(240, 98, 90); }
.fev .sc { font-size: 12.5px; font-weight: 800; color: var(--tx2); font-variant-numeric: tabular-nums; }
.foot { height: 58px; border-radius: 16px; background: var(--s1); border: 1px solid var(--ln); padding: 0px 8px; gap: 8px; }
.foot .fb { height: 42px; padding: 0px 18px; border-radius: 11px; background: var(--s3); border: 1px solid var(--ln2); font-size: 13.5px; font-weight: 700; color: rgb(213, 217, 224); }
.foot .fb.stats { background: var(--s3); border-color: var(--ln2); color: rgb(241, 243, 247); }
.foot .fb.undo { border-color: rgba(242, 107, 33, 0.55); color: rgb(245, 154, 95); background: rgba(242, 107, 33, 0.08); max-width: 320px; overflow: hidden; }
.foot .fb.undo small { color: var(--tx2); font-weight: 600; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0px; }
.foot .fb.undo.off { border-color: var(--ln); color: var(--tx3); background: transparent; }
.fsep { flex: 1 1 0%; }
.foot .fb.quiet { background: transparent; border-color: var(--ln); color: var(--tx2); font-size: 12.5px; padding: 0px 14px; margin: 0px; }
.foot .fb:active { filter: brightness(1.2); }
@media (max-width: 1100px) {
  .sb-team { padding: 0px 14px; gap: 10px; }
  .sb .score { font-size: 44px; }
  .sb .tname { font-size: 16px; }
  .foot .fb { padding: 0px 12px; font-size: 12.5px; }
  .foot .fb.undo { max-width: 200px; }
  .score-k .k b { font-size: 26px; }
}
.toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
:root { --or: #F97316; --orL: #FDBA74; --orT: #F5A15A; --s1: #0F131B; --s2: #161B25; --s3: #1D2330; --ln: #262D3A; --ln2: #343C4B; --tx2: #B4BAC6; --tx3: #8A92A0; }
.sb-team.opp { background: var(--s2); border: 1px solid rgba(249, 115, 22, 0.55); }
.sb-team.opp .crest:not(.has) { background: var(--s3); border: 1.5px solid var(--or); color: var(--orL); }
.sb-team.opp .tsub { color: var(--orT); }
.sb-team.opp .tname { color: rgb(232, 234, 239); }
.sb-team.us { box-shadow: rgba(255, 255, 255, 0.06) 0px 1px 0px inset; }
.sb-clock { box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset; }
.sb .clock { font-size: 40px; letter-spacing: -0.03em; }
.col.side.opp { background: var(--s1); border: 1px solid rgba(249, 115, 22, 0.4); }
.col.opp .ch { border-color: rgba(249, 115, 22, 0.28); }
.col.opp .cdot { background: var(--or); }
.col.opp .chn b { color: rgb(241, 243, 247); }
.col.opp .chn small { color: var(--or); }
.col.opp .score-k .k { background: var(--s3); border: 1.5px solid rgba(249, 115, 22, 0.7); }
.col.opp .score-k .k b { color: rgb(241, 243, 247); }
.col.opp .score-k .k span { color: var(--orT); }
.col.opp .play-k .k { background: var(--s2); border: 1px solid rgba(249, 115, 22, 0.35); }
.col.opp .play-k .k .ki { color: var(--orT); }
.col.opp .subbar { background: var(--s2); border: 1px solid rgba(249, 115, 22, 0.5); }
.col.opp .subbar .ki { color: var(--or); }
.col.opp .subbar b { color: rgb(241, 243, 247); }
.col.opp .k:active, .col.opp .subbar:active { background: rgba(249, 115, 22, 0.16); border-color: var(--or); }
.latest.opp { background: var(--s3); border: 1.5px solid rgba(249, 115, 22, 0.7); }
.latest.opp .lnum, .latest.opp .lpts { background: var(--or); }
.fev.opp .d { background: var(--or); }
.score-k { flex: 1.2 1 0px; gap: 9px; }
.score-k .k { min-height: 76px; }
.score-k .k b { font-size: 34px; }
.score-k .k span { font-size: 10px; color: var(--tx2); }
.col.us .score-k .k span { color: rgb(169, 200, 255); }
.col .score-k .k.miss { background: var(--s3); border: 1.5px solid rgba(240, 98, 90, 0.55); }
.col .score-k .k.miss b { color: rgb(240, 98, 90); }
.play-k { flex: 0.78 1 0px; gap: 8px; min-height: 64px; }
.play-k.two { flex: 0.6 1 0px; min-height: 56px; }
.play-k .k { gap: 3px; }
.play-k .ki { width: 18px; height: 18px; color: var(--tx2); margin-bottom: 2px; }
.play-k .k b { font-size: 16px; color: rgb(241, 243, 247); }
.play-k .k span { font-size: 8.5px; letter-spacing: 0.12em; color: var(--tx2); }
.col.us .play-k .k { background: rgb(24, 38, 74); border: 1px solid rgba(59, 130, 246, 0.4); }
.col.us .play-k .k .ki { color: rgb(141, 184, 255); }
.col .play-k .k.warn { border-color: rgba(240, 98, 90, 0.45); }
.col .play-k .k.warn b, .col .play-k .k.warn .ki { color: rgb(240, 98, 90); }
.subbar { gap: 12px; }
.subbar .ki { width: 20px; height: 20px; color: rgb(141, 184, 255); flex: 0 0 auto; }
.latest { padding: 14px 16px; gap: 14px; margin-bottom: 6px; box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 18px; }
.latest.us { background: rgb(22, 48, 95); border: 1.5px solid rgba(96, 152, 255, 0.9); }
.latest .lnum { width: 44px; height: 44px; font-size: 16px; }
.lwho { font-size: 16px; }
.lwhat { font-size: 13px; color: rgb(213, 217, 224); }
.lsc { font-size: 24px; }
.ltm { color: var(--tx2); }
.feedcol .fev { grid-template-columns: 44px 8px 1fr auto; padding: 10px 6px; gap: 12px; border-bottom: 1px solid rgb(30, 36, 48); }
.fev .t { font-size: 11.5px; color: var(--tx2); }
.feedcol .fev .who { font-size: 13px; color: rgb(241, 243, 247); }
.fev .who small { font-size: 11.5px; color: var(--tx2); margin-top: 2px; }
.fev .sc { font-size: 13px; color: rgb(213, 217, 224); }
.fh .lb { color: var(--tx3); }
.col .lb { color: rgb(138, 146, 160); }
.cf { color: var(--tx2); }
.sb .tsub { color: var(--tx2); }
.sb-team.us .tsub { color: rgb(169, 200, 255); }
.sb .q { color: var(--tx3); }
.foot { background: var(--s1); border-color: var(--ln); }
.foot .fb { background: var(--s3); border-color: var(--ln2); color: rgb(213, 217, 224); gap: 8px; }
.foot .fi { width: 16px; height: 16px; color: var(--tx2); flex: 0 0 auto; }
.foot .fb.stats .fi { color: rgb(241, 243, 247); }
.foot .fb.undo { border-color: rgba(249, 115, 22, 0.6); color: rgb(253, 186, 116); background: rgba(249, 115, 22, 0.08); }
.foot .fb.undo .fi { color: var(--or); }
.foot .fb.undo.off { color: var(--tx3); border-color: var(--ln); background: transparent; }
.foot .fb.undo.off .fi { color: var(--tx3); }
.foot .fb.quiet { background: transparent; border-color: var(--ln); color: var(--tx2); }
.foot .fb.quiet .fi { color: var(--tx3); }
.toast { border-color: rgba(34, 197, 94, 0.4); }
.screen { --cols: 1fr .92fr 1fr; --colgap: 12px; }
.sb, .board { grid-template-columns: var(--cols); gap: var(--colgap); }
.sb .qs { position: relative; width: 100%; justify-content: center; }
.sb .saved { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: transparent; border: 0px; font-size: 10px; font-weight: 700; color: var(--tx3); display: flex; align-items: center; gap: 5px; letter-spacing: 0.04em; }
.sb .saved .dot { width: 7px; height: 7px; }
.qlen.two { display: grid; grid-template-columns: 1fr 1fr; }
.fld-note { font-size: 11px; color: rgb(135, 140, 148); font-weight: 600; line-height: 1.35; letter-spacing: 0px; }
:root { --bg: #070A0F; --panel: #0D121B; --surface: #1C2432; --elev: #20293A; --border: rgba(148,163,184,.16); --blue: #3B82F6; --blueT: #93B4F5; --or: #F97316; --orT: #F5A15A; --red: #F05A5A; --tx2: #B4BAC6; --tx3: #8A92A0; }
html, body, #root { background: var(--bg); }
.sb-team.us { background: linear-gradient(rgba(37, 99, 235, 0.2), rgba(13, 18, 27, 0.98)); border: 1px solid rgba(59, 130, 246, 0.55); box-shadow: rgba(37, 99, 235, 0.08) 0px 4px 16px; }
.sb-team.us .crest:not(.has) { background: rgba(37, 99, 235, 0.28); border: 1px solid rgba(147, 180, 245, 0.45); }
.sb-team.us .tsub { color: var(--blueT); }
.sb-team.opp { background: var(--panel); border: 1px solid rgba(249, 115, 22, 0.45); box-shadow: none; }
.sb-team.opp .crest:not(.has) { background: rgba(249, 115, 22, 0.1); border: 1px solid rgba(249, 115, 22, 0.6); color: var(--orT); }
.sb-team.opp .tsub { color: rgb(201, 160, 122); }
.sb-clock { background: rgb(15, 20, 28); border: 1px solid var(--border); box-shadow: none; }
.sb .cbtn.end { background: var(--surface); border: 1px solid var(--border); color: rgb(229, 233, 240); }
.sb .cbtn.end:active { background: var(--elev); border-color: rgba(148, 163, 184, 0.35); }
.sb .cbtn.go, .cbtn.go { background: linear-gradient(rgb(30, 154, 87), rgb(21, 128, 61)); border: 1px solid rgba(34, 197, 94, 0.55); color: rgb(255, 255, 255); box-shadow: rgba(34, 197, 94, 0.12) 0px 4px 14px; }
.sb .cbtn.stop, .cbtn.stop { background: var(--elev); border: 1px solid rgba(240, 90, 90, 0.35); color: rgb(241, 243, 247); box-shadow: none; gap: 8px; }
.cbtn.stop .sq { width: 10px; height: 10px; border-radius: 2px; background: var(--red); display: inline-block; }
.cbtn.stop:active { background: rgba(240, 90, 90, 0.28); border-color: var(--red); }
@keyframes cb-attn { 
  0%, 100% { box-shadow: rgba(34, 197, 94, 0.12) 0px 4px 14px, rgba(34, 197, 94, 0.35) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(34, 197, 94, 0.12) 0px 4px 14px, rgba(34, 197, 94, 0) 0px 0px 0px 6px; }
}
.sb .saved { color: var(--tx3); }
.col.side.us { background: rgba(37,99,235,.05) var(--panel); border: 1px solid rgba(59, 130, 246, 0.35); }
.col.side.opp { background: var(--panel); border: 1px solid rgba(249, 115, 22, 0.3); }
.col.feedcol { background: var(--panel); border: 1px solid var(--border); }
.col.us .ch { border-color: rgba(59, 130, 246, 0.22); }
.col.opp .ch { border-color: rgba(249, 115, 22, 0.22); }
.col.us .chn small { color: var(--blueT); }
.col.opp .chn small { color: var(--orT); }
.col .k { box-shadow: none; }
.col.us .score-k .k { background: linear-gradient(rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.96)); border: 1px solid rgba(59, 130, 246, 0.65); box-shadow: rgba(59, 130, 246, 0.06) 0px 0px 0px 1px, rgba(37, 99, 235, 0.1) 0px 4px 16px; }
.col.us .score-k .k span { color: var(--blueT); }
.col.us .score-k .k:active { background: linear-gradient(rgba(37, 99, 235, 0.42), rgba(15, 23, 42, 0.96)); border-color: rgba(96, 152, 255, 0.9); filter: none; }
.col.opp .score-k .k { background: rgb(20, 24, 31); border: 1px solid rgba(249, 115, 22, 0.5); box-shadow: rgba(249, 115, 22, 0.05) 0px 4px 14px; }
.col.opp .score-k .k span { color: var(--orT); }
.col.opp .score-k .k:active { background: rgba(249, 115, 22, 0.16); border-color: var(--or); filter: none; }
.col .score-k .k.miss { border: 1px solid rgba(240, 90, 90, 0.4); box-shadow: none; }
.col .score-k .k.miss b { color: var(--red); }
.col .score-k .k.miss span { color: rgba(240, 90, 90, 0.7); }
.col .score-k .k.miss:active { background: rgba(240, 90, 90, 0.22); border-color: var(--red); }
.col.us .play-k .k, .col.opp .play-k .k { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.col.us .play-k .k .ki, .col.opp .play-k .k .ki { color: rgb(229, 233, 240); }
.play-k .k b { color: rgb(241, 243, 247); }
.play-k .k span { color: var(--tx3); }
.col .play-k .k:active { background: var(--elev); border-color: rgba(148, 163, 184, 0.35); filter: none; }
.col .play-k .k.warn { background: rgba(240,90,90,.035) var(--surface); border: 1px solid rgba(240, 90, 90, 0.4); }
.col .play-k .k.warn b, .col .play-k .k.warn .ki { color: var(--red); }
.col .play-k .k.warn:active { background: rgba(240, 90, 90, 0.22); border-color: var(--red); }
.col.us .subbar { background: rgba(37,99,235,.10) var(--surface); border: 1px solid rgba(59, 130, 246, 0.55); }
.col.us .subbar .ki { color: var(--blueT); }
.col.opp .subbar { background: var(--surface); border: 1px solid rgba(249, 115, 22, 0.45); }
.col.opp .subbar .ki { color: var(--orT); }
.subbar:active { filter: none; background: var(--elev); }
.latest { box-shadow: none; }
.latest.us { background: rgba(37, 99, 235, 0.14); border: 1px solid rgba(59, 130, 246, 0.55); box-shadow: rgba(37, 99, 235, 0.08) 0px 4px 18px; }
.latest.opp { background: var(--surface); border: 1px solid rgba(249, 115, 22, 0.45); box-shadow: none; }
.latest.us .lnum { background: rgb(37, 99, 235); }
.latest.opp .lnum { background: rgb(234, 106, 14); }
.lwhat.miss, .fev .who small.miss { color: var(--red); }
.feedcol .fev { border-bottom: 1px solid rgba(148, 163, 184, 0.1); }
.foot { background: var(--panel); border: 1px solid var(--border); }
.foot .fb { background: var(--surface); border: 1px solid var(--border); color: rgb(229, 233, 240); }
.foot .fb.stats { background: var(--surface); border-color: var(--border); }
.foot .fb.undo, .foot .fb.undo:not(.off) { background: rgba(249,115,22,.06) var(--surface); border: 1px solid rgba(249, 115, 22, 0.5); color: var(--orT); }
.foot .fb.undo .fi { color: var(--or); }
.foot .fb.undo.off { background: var(--surface); border-color: var(--border); color: var(--tx3); }
.foot .fb.quiet { background: transparent; border: 1px solid var(--border); color: var(--tx2); }
.foot .fb:active { filter: none; background: var(--elev); border-color: rgba(148, 163, 184, 0.35); }
.foot .fb.undo:not(.off):active { background: rgba(249, 115, 22, 0.22); }
.toast { border-color: rgba(34, 197, 94, 0.35); }
.ptag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10px; letter-spacing: 0.14em; font-weight: 800; padding: 4px 9px; border-radius: 99px; flex: 0 0 auto; }
.ptag.score { background: rgba(34, 197, 94, 0.12); color: rgb(52, 199, 123); border: 1px solid rgba(34, 197, 94, 0.45); }
.ptag.ast { background: rgba(37, 99, 235, 0.14); color: rgb(147, 180, 245); border: 1px solid rgba(59, 130, 246, 0.55); }
.pin { display: flex; align-items: center; gap: 10px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.4); border-radius: 12px; padding: 8px 10px; flex: 0 0 auto; min-width: 0px; }
.pin .av, .pin .ph2 { width: 34px; height: 34px; border-radius: 99px; background: rgb(30, 154, 87); display: grid; place-items: center; font-weight: 900; font-size: 12px; color: rgb(255, 255, 255); overflow: hidden; flex: 0 0 auto; margin: 0px; }
.pin .av img, .pin .ph2 img { width: 100%; height: 100%; object-fit: cover; }
.pin b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin small { display: block; font-size: 11px; color: rgb(52, 199, 123); font-weight: 700; margin-top: 1px; }
.pin .pts { margin-left: auto; font-weight: 900; color: rgb(52, 199, 123); font-size: 14px; flex: 0 0 auto; }
.tile { position: relative; }
.tbadge { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 900; border-radius: 6px; padding: 2px 7px; letter-spacing: 0.06em; }
.tbadge.score { color: rgb(6, 42, 20); background: rgb(52, 199, 123); }
.tbadge.ast { color: rgb(147, 180, 245); border: 1px solid rgba(59, 130, 246, 0.55); background: rgba(37, 99, 235, 0.1); }
.tiles.score .tile:not(.none) { background: linear-gradient(rgba(34, 197, 94, 0.1), rgb(22, 29, 42) 45%); border-color: rgba(34, 197, 94, 0.45); }
.tiles.score .tile.team { border-style: dashed; }
.tiles.ast .tile:not(.none) { background: linear-gradient(rgba(37, 99, 235, 0.14), rgb(22, 29, 42) 45%); border-color: rgba(59, 130, 246, 0.55); }
.pline { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pline .pin { max-width: 420px; }
.col .lb { font-size: 10.5px; letter-spacing: 0.16em; color: rgb(154, 163, 178); margin: 4px 0px -1px; }
.foot .fb.clockb { min-width: 120px; justify-content: center; font-size: 14px; font-weight: 800; }
.foot .fb.clockb.go { background: linear-gradient(rgb(30, 154, 87), rgb(21, 128, 61)); border: 1px solid rgba(34, 197, 94, 0.55); color: rgb(255, 255, 255); box-shadow: rgba(34, 197, 94, 0.12) 0px 4px 14px; }
.foot .fb.clockb.go .fi { color: rgb(255, 255, 255); fill: currentcolor; stroke: none; width: 18px; height: 18px; }
.foot .fb.clockb.go:active { background: linear-gradient(rgb(34, 176, 99), rgb(23, 138, 69)); filter: none; }
.foot .fb.clockb.go.attn { animation: 1.6s ease-out 0s infinite normal none running cb-attn; }
.foot .fb.clockb.stop { background: var(--elev); border: 1px solid rgba(240, 90, 90, 0.35); color: rgb(241, 243, 247); }
.foot .fb.clockb.stop .sq { width: 11px; height: 11px; border-radius: 2px; background: var(--red); display: inline-block; }
.foot .fb.clockb.stop:active { background: rgba(240, 90, 90, 0.28); border-color: var(--red); }
.foot .fb.undo { max-width: 230px; min-width: 0px; flex: 0 1 auto; }
.foot .fb.undo small { flex: 1 1 auto; }
@media (max-width: 1100px) {
  .foot .fb.undo { max-width: 150px; }
  .foot .fb.clockb { min-width: 100px; }
}
.fix-box { border-radius: 14px; background: rgb(14, 16, 22); border: 1px dashed rgb(42, 47, 58); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
.fix-box.on { border-style: solid; border-color: rgba(242, 107, 33, 0.55); background: rgba(242, 107, 33, 0.07); }
.fix-done { display: flex; align-items: center; gap: 10px; }
.fix-tick { width: 28px; height: 28px; border-radius: 50%; background: rgb(242, 107, 33); color: rgb(22, 10, 2); display: grid; place-items: center; font-weight: 900; flex: 0 0 auto; }
.fix-txt { flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; gap: 2px; }
.fix-txt b { font-size: 13px; color: rgb(241, 243, 247); font-weight: 800; }
.fix-txt i { font-style: normal; font-size: 12px; color: rgb(168, 173, 189); line-height: 1.35; }
.chipnum-b { cursor: pointer; border-bottom: 1px dashed rgb(74, 80, 96); padding: 0px 1px; }
.chipnum { width: 44px; min-height: 32px; padding: 4px 6px; border-radius: 8px; border: 1.5px solid rgb(242, 107, 33); background: rgb(11, 13, 18); color: rgb(241, 243, 247); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 900; font-size: 15px; text-align: center; }
.and1offer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0px 2px; min-height: 44px; padding: 0px 14px; border-radius: 12px; cursor: pointer; font-weight: 900; font-size: 14px; color: rgb(255, 178, 87); background: rgba(242, 107, 33, 0.12); border: 1.5px solid rgba(242, 107, 33, 0.55); }
.and1offer i { font-style: normal; font-weight: 700; color: rgb(168, 173, 189); }
:root { --stat-scoring: #34c77b; --stat-playmaking: #4f8cff; --stat-rebound: #22b8d8; --stat-defense: #ff8a2a; --stat-negative: #f0514e; --stat-accent-h: 3px; }
.stat-key--scoring { --stat: var(--stat-scoring); }
.stat-key--playmaking { --stat: var(--stat-playmaking); }
.stat-key--rebound { --stat: var(--stat-rebound); }
.stat-key--defense { --stat: var(--stat-defense); }
.stat-key--negative { --stat: var(--stat-negative); }
.k.stat-key { position: relative; }
.k.stat-key::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border-bottom: var(--stat-accent-h) solid var(--stat); opacity: 0.85; pointer-events: none; }
.k.stat-key:active::after { opacity: 1; }
.k.stat-key:active { filter: none; }
.k.stat-key.stat-key--scoring:active, .k.stat-key.stat-key--rebound:active, .k.stat-key.stat-key--defense:active, .k.stat-key.stat-key--negative:active { background: color-mix(in srgb,var(--stat) 16%,#12151C); }
.k.stat-key.stat-key--negative.stat-key--negative.stat-key--negative b, .k.stat-key.stat-key--negative.stat-key--negative.stat-key--negative .ki { color: rgb(241, 243, 247); }
.k.stat-key.stat-key--negative.stat-key--negative.stat-key--negative span { color: rgb(154, 161, 174); }
.k.stat-key.stat-key--negative.stat-key--negative.stat-key--negative.warn { border-color: rgb(46, 52, 65); }
.k.stat-key.stat-key--negative.stat-key--negative.stat-key--negative.miss { border-color: rgb(46, 52, 65); }