/* Live Score: the screen in the hall (a fixed 960×540 stage scaled into the
   window) and the phone remote (mobile-first, full viewport). Dark only — it
   is read across a hall and held in a hand next to the piste. */
:root {
  --ground:#0E0E10; --surface:#17171B; --surface2:#1F1F25; --line:#2C2C33; --text:#F3F0E8; --muted:#9C978C; --faint:#6A665E;
  --accent:#D6BE8C; --on-accent:#14120E;
  --red:#E5484D; --red-soft:#3A1416; --green:#3DBA6B; --green-soft:#0F2E1B; --yellow:#F2C94C;
  --display:"Big Shoulders Display","Arial Narrow",sans-serif; --body:"Archivo",system-ui,sans-serif; --mono:"Spline Sans Mono",ui-monospace,monospace;
  color-scheme: dark;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { background:var(--ground); color:var(--text); font-family:var(--body); }
[hidden] { display:none !important; }

/* ================================================================ screen */
body.tv-page { overflow:hidden; height:100vh; height:100dvh; touch-action:manipulation; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
body.tv-page.hide-cursor, body.tv-page.hide-cursor * { cursor:none !important; }
html:has(body.tv-page) { overflow:hidden; scrollbar-width:none; }
.viewport { position:fixed; inset:0; overflow:hidden; background:var(--ground); }
.stage { position:absolute; left:50%; top:50%; width:960px; height:540px; margin:-270px 0 0 -480px; transform-origin:50% 50%;
  background:var(--ground); overflow:hidden; user-select:none; -webkit-user-select:none; }
.stage .view { position:absolute; inset:0; display:none; }
.stage .view.on { display:flex; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:.05em; text-transform:uppercase; }
.brand svg { width:30px; height:30px; color:var(--accent); flex:none; }

/* idle: waiting for a phone */
.idle { flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; }
.idle .brand { position:absolute; top:22px; left:28px; }
.idle h1 { font-family:var(--display); font-weight:800; font-size:54px; text-transform:uppercase; letter-spacing:.02em; line-height:1; }
.idle h1 em { font-style:normal; color:var(--accent); }
.idle .qrbox { background:#fff; padding:10px; border-radius:12px; }
.idle .qrbox svg { width:186px; height:186px; display:block; }
.choices { display:grid; grid-template-columns:auto auto; gap:40px; align-items:center; }
.choice { display:flex; flex-direction:column; align-items:center; gap:10px; max-width:270px; }
.idle .choice p { font-size:14px; line-height:1.45; }
.selfbtn { font-family:var(--display); font-weight:800; font-size:28px; text-transform:uppercase; letter-spacing:.02em; line-height:1.05;
  background:var(--accent); color:var(--on-accent); border:0; border-radius:14px; padding:24px 30px; cursor:pointer; }
.selfbtn small { display:block; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.16em; margin-top:6px; opacity:.75; }
.idle p { color:var(--muted); font-size:16px; max-width:560px; line-height:1.5; }
.idle p .en, .idle .sub { color:var(--faint); }
.idle .sub { font-family:var(--mono); font-size:15px; letter-spacing:.24em; text-transform:uppercase; margin-top:-12px; }
.idle .code { font-family:var(--mono); font-size:15px; color:var(--faint); letter-spacing:.2em; }
.idle .code b { color:var(--text); font-size:22px; letter-spacing:.3em; }
.net { position:absolute; top:26px; right:28px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); }
.net i { width:8px; height:8px; border-radius:50%; background:var(--yellow); }

/* loading: the start screen's outline; placeholders shimmer, the blades draw in the QR box */
.sk { position:relative; overflow:hidden; background:var(--surface2); border-radius:12px; }
.sk::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(214,190,140,.14),transparent); animation:sk-shine 1.3s ease-in-out infinite; }
@keyframes sk-shine { to { transform:translateX(100%); } }
.sk-qr { width:206px; height:206px; display:flex; align-items:center; justify-content:center; }
.sk-btn { width:230px; height:96px; border-radius:14px; }
.sk-line { height:12px; border-radius:6px; }
.loading .choice { width:270px; }
.drawing { width:64px; height:64px; color:var(--accent); position:relative; z-index:1; }
.drawing path { stroke-dasharray:40; stroke-dashoffset:40; animation:sk-draw 1.6s ease-in-out infinite; }
.drawing path:nth-child(2) { animation-delay:.2s; } .drawing path:nth-child(3) { animation-delay:.45s; } .drawing path:nth-child(4) { animation-delay:.6s; }
@keyframes sk-draw { 0% { stroke-dashoffset:40; opacity:1; } 45%,70% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:0; opacity:0; } }
.ellipsis::after { content:""; display:inline-block; width:2.6em; text-align:left; animation:sk-dots 1.2s steps(4) infinite; }
@keyframes sk-dots { 0% { content:""; } 25% { content:"."; } 50% { content:".."; } 75% { content:"..."; } }
.loading .slow { font-size:14px; max-width:520px; margin-top:-6px; }
/* the real start screen fades in where the outline stood */
.idle.reveal .choices { animation:sk-in .35s ease-out; }
@keyframes sk-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .sk::after, .ellipsis::after, .idle.reveal .choices { animation:none; }
  .drawing path { animation:none; stroke-dashoffset:0; }
}

/* back at the start after a bout was cancelled or finished (bilingual, a few seconds) */
.toast { position:absolute; top:22px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:999px;
  background:var(--surface2); border:1px solid var(--line); font:600 13px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); white-space:nowrap; z-index:2; }
.toast i { width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* switched off / deleted */
.notice { flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; color:var(--muted); }
.notice .brand { position:absolute; top:22px; left:28px; color:var(--text); }
.notice b { font-family:var(--display); font-weight:800; font-size:40px; text-transform:uppercase; color:var(--text); }
.notice span { font-family:var(--mono); font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

/* the piste number from ?bahn=; without it the screen stays neutral */
.idle .bignum { position:absolute; top:18px; right:28px; font-family:var(--display); font-weight:800; font-size:44px; color:var(--accent); text-transform:uppercase; }
.nolabel .pistelabel { display:none !important; }
.notice p { max-width:600px; font-size:16px; line-height:1.5; color:var(--muted); margin-top:6px; }
.notice p .en { color:var(--faint); }
/* no activity: the session ends soon */
/* part of the board's column: while it shows, the sides above it get shorter
   (and the corner QR, which sits inside the sides, moves up with them) */
.idlebar { flex:none; display:none; align-items:center; justify-content:center; gap:14px; padding:12px; background:color-mix(in srgb,var(--accent) 22%,var(--surface)); border-top:1px solid var(--accent); font-size:17px; }
.idlebar.on { display:flex; }
.idlebar b { font-family:var(--display); font-weight:800; font-size:24px; color:var(--accent); font-variant-numeric:tabular-nums; }

/* scoreboard */
.board { flex-direction:column; }
.board .bar { display:flex; justify-content:space-between; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.board .bar .conn { display:inline-flex; align-items:center; gap:8px; color:var(--green); }
.board .bar .conn i { width:8px; height:8px; border-radius:50%; background:var(--green); }
.board .bar .conn.off { color:var(--yellow); } .board .bar .conn.off i { background:var(--yellow); }
.sides { flex:1; min-height:0; position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; }
.side { display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-width:0; padding:0 12px; }
.side.l { background:linear-gradient(90deg,var(--red-soft),transparent 85%); }
.side.r { background:linear-gradient(270deg,var(--green-soft),transparent 85%); }
.side .name { font-family:var(--display); font-weight:800; font-size:34px; text-transform:uppercase; letter-spacing:.03em; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side .name.ph, .pad .who.ph { color:var(--muted); }
.side .score { font-family:var(--display); font-weight:900; font-size:220px; line-height:.85; font-variant-numeric:tabular-nums; margin-top:8px; }
.side.l .score { color:var(--red); } .side.r .score { color:var(--green); }
.side .cards { position:absolute; top:16px; display:flex; gap:6px; }
.side.l .cards { left:20px; } .side.r .cards { right:20px; }
.card { width:20px; height:28px; border-radius:3px; display:block; } .card.y { background:var(--yellow); } .card.rd { background:var(--red); }
.side .prio { position:absolute; bottom:18px; font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:4px 10px; border-radius:4px; display:none; }
.side .prio.on { display:block; }
.side.win::after { content:var(--win-label,"SIEG"); position:absolute; top:18px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-weight:600; letter-spacing:.3em; font-size:14px; color:var(--on-accent); background:var(--accent); padding:4px 12px; border-radius:4px; }
.mid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 18px; min-width:250px; }
.clock { font-family:var(--display); font-weight:800; font-size:96px; line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.clock.run { color:var(--text); } .clock.stop { color:var(--accent); } .clock.low { color:var(--red); }
.period { font-family:var(--mono); font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.dots { display:flex; gap:8px; } .dots i { width:12px; height:12px; border-radius:50%; border:2px solid var(--faint); } .dots i.done { background:var(--faint); } .dots i.now { border-color:var(--accent); background:var(--accent); }
.target { font-family:var(--mono); font-size:13px; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; }
.state { font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; padding:4px 10px; border-radius:4px; border:1px solid var(--line); color:var(--muted); }
.state.break { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.state:empty { visibility:hidden; }
/* small QR so somebody else can take over */
.corner-qr { position:absolute; right:14px; bottom:12px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.corner-qr .qrbox { background:#fff; padding:4px; border-radius:6px; }
.corner-qr svg { width:72px; height:72px; display:block; }

/* self-jury: the screen keeps the score itself (touch) — everything fits the 960×540 stage */
.sj { flex-direction:column; }
.sj button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
.sj button:disabled { opacity:.3; cursor:default; }
.sj button:not(:disabled):active { transform:scale(.96); filter:brightness(1.15); }
.sj-bar { flex:none; display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sj-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.sj-mode { color:var(--on-accent); background:var(--accent); border-radius:4px; padding:3px 8px; white-space:nowrap; }
.sj-sp { flex:1; }
.sj-qr { display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.1em; max-width:150px; line-height:1.3; }
.sj-qr .qrbox { background:#fff; padding:3px; border-radius:5px; flex:none; }
.sj-qr svg { width:50px; height:50px; display:block; }
.sj-lang { display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; flex:none; }
.sj-lang button { border:0; border-radius:999px; padding:9px 12px; font:600 12px var(--mono); color:var(--muted); background:none; }
.sj-lang button.on { background:var(--accent); color:var(--on-accent); }
.sj-btn { font:600 12px var(--mono) !important; letter-spacing:.1em; text-transform:uppercase; color:var(--text); background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; flex:none; }
.sj-grid { flex:1; min-height:0; display:grid; grid-template-columns:1fr 280px 1fr; }
.sj-side { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:64px; cursor:pointer; min-width:0; }
.sj-side.l { background:linear-gradient(90deg,var(--red-soft),transparent 90%); }
.sj-side.r { background:linear-gradient(270deg,var(--green-soft),transparent 90%); }
.sj-side:not(.dis):active { filter:brightness(1.3); }
.sj-side.dis { cursor:default; }
.sj-name { font-family:var(--display); font-weight:800; font-size:28px; text-transform:uppercase; max-width:100%; padding:0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sj-name.ph { color:var(--muted); }
.sj-score { font-family:var(--display); font-weight:900; font-size:190px; line-height:.85; font-variant-numeric:tabular-nums; }
.sj-side.l .sj-score { color:var(--red); } .sj-side.r .sj-score { color:var(--green); }
.sj-tap { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; margin-top:6px; }
.sj-side.dis .sj-tap { visibility:hidden; }
.sj-side .cards { position:absolute; top:12px; display:flex; gap:6px; }
.sj-side.l .cards { left:14px; } .sj-side.r .cards { right:14px; }
.sj-prio { position:absolute; top:12px; font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); padding:4px 10px; border-radius:4px; display:none; }
.sj-side.l .sj-prio { right:14px; } .sj-side.r .sj-prio { left:14px; } .sj-prio.on { display:block; }
.sj-side.won::before { content:var(--win-label,"SIEG"); position:absolute; top:48px; font:600 13px var(--mono); letter-spacing:.3em; color:var(--on-accent); background:var(--accent); padding:4px 12px; border-radius:4px; }
.sj-row { position:absolute; left:12px; right:12px; bottom:12px; display:flex; gap:8px; }
.sj-row button { flex:1; border:0; border-radius:12px; padding:13px 0; font:800 20px var(--display) !important; }
.sj-minus { background:var(--surface2); color:var(--text) !important; border:1px solid var(--line) !important; }
.sj-y { background:var(--yellow); color:#222 !important; } .sj-rd { background:var(--red); color:#fff !important; }
.sj-y.on { box-shadow:0 0 0 2px var(--ground), 0 0 0 4px var(--yellow); }
.sj-mid { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:12px 14px; border-left:1px solid #232328; border-right:1px solid #232328; min-height:0; }
.sj-clock { font-family:var(--display); font-weight:800; font-size:80px; line-height:.9; text-align:center; font-variant-numeric:tabular-nums; }
.sj-clock.stop { color:var(--accent); } .sj-clock.low { color:var(--red); }
.sj-period { text-align:center; font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.sj-target { text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.sj-go { font-family:var(--display) !important; font-weight:800; font-size:32px !important; border:0; border-radius:14px; padding:14px 0; background:var(--accent); color:var(--on-accent) !important; text-transform:uppercase; }
.sj-go.stop { background:var(--text); }
.sj-b { font:600 12px var(--mono) !important; letter-spacing:.1em; text-transform:uppercase; background:var(--surface2); color:var(--text) !important; border:1px solid var(--line); border-radius:12px; padding:13px 4px; }
.sj-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sj-sheet { position:absolute; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:5; }
.sj-sheet[hidden] { display:none; }
.sj-box { width:540px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 20px; display:flex; flex-direction:column; gap:11px; }
.sj-box h3 { font:800 22px var(--display); text-transform:uppercase; }
.sj-box label, .sj-field { font:500 11px var(--mono); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; display:flex; flex-direction:column; gap:5px; }
.sj-box input { font:16px var(--body); background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; user-select:text; -webkit-user-select:text; }
.sj-seg { display:flex; gap:6px; }
.sj-seg button { flex:1; background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:12px 0; font:600 14px var(--mono) !important; text-transform:none; letter-spacing:0; }
.sj-seg button.on { background:var(--accent); color:var(--on-accent) !important; border-color:var(--accent); }
.sj-acts { display:flex; gap:8px; margin-top:4px; }
.sj-acts button { flex:1; border:0; border-radius:10px; padding:14px; font:800 18px var(--display) !important; text-transform:uppercase; }
.sj-ok { background:var(--accent); color:var(--on-accent) !important; }
.sj-danger { background:var(--surface2); color:var(--red) !important; border:1px solid var(--line) !important; }

/* team bout on the screen (display and self-jury) */
.ttag { font:500 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); min-height:0; }
.ttag:empty { display:none; }
.dots.team { gap:5px; } .dots.team i { width:10px; height:10px; }
.sj-dots { display:flex; justify-content:center; gap:5px; }
.sj-dots:empty { display:none; }
.sj-dots i { width:10px; height:10px; border-radius:50%; border:2px solid var(--faint); }
.sj-dots i.done { background:var(--faint); } .sj-dots i.now { border-color:var(--accent); background:var(--accent); }
.sj-relaydone { text-align:center; font:600 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); border-radius:8px; padding:7px; }
/* self-jury: "Fertig" after the bout, and the end sheet */
.sj-finish { font-family:var(--display) !important; font-weight:800; font-size:26px !important; border:0; border-radius:14px; padding:12px 0; background:var(--accent); color:var(--on-accent) !important; text-transform:uppercase; line-height:1.05; }
.sj-finish small { display:block; font:500 11px var(--mono); letter-spacing:.14em; opacity:.75; margin-top:4px; }
.sj-endbox { width:460px; }
.sj-endbox p { color:var(--muted); font:14px/1.45 var(--body); }
.opt { display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; width:100%; border-radius:12px; padding:14px 16px; border:1px solid var(--line); background:var(--ground); color:var(--text); }
.opt b { font:800 20px var(--display); text-transform:uppercase; letter-spacing:.02em; }
.opt span { font:13px/1.4 var(--body); color:var(--muted); text-transform:none; letter-spacing:0; }
.opt.danger { background:color-mix(in srgb,var(--red) 16%,var(--ground)); border-color:color-mix(in srgb,var(--red) 55%,transparent); }
.opt.danger b { color:#ff8a8d; }
.sj-back, .sheet .back { border:0; background:none; color:var(--muted) !important; font:600 13px var(--mono) !important; letter-spacing:.14em; text-transform:uppercase; padding:10px; }
.sj-bar .sj-end { color:#ff8a8d !important; }
/* the board while a phone counts: a quiet "Beenden" next to the phone indicator */
.tv-right { display:inline-flex; align-items:center; gap:14px; }
.tv-end { font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); background:none; border:1px solid var(--line); border-radius:8px; padding:7px 10px; cursor:pointer; }
.sj-hint { font:500 11px var(--mono); color:var(--faint); letter-spacing:.06em; text-transform:none; }
.sj-single { display:flex; flex-direction:column; gap:11px; }
.sj-single[hidden], .sj-teaminfo[hidden] { display:none; }
.sj-teaminfo { font:13px/1.5 var(--body); color:var(--muted); background:var(--ground); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }

/* ================================================================ phone */
body.phone-page { min-height:100vh; min-height:100dvh; overscroll-behavior:none; }
.phone-page, .phone-page button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.phone-page button { font:inherit; color:inherit; cursor:pointer; }
.phone-page button:disabled { opacity:.35; cursor:default; }
.phone-page .app { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.app { position:relative; max-width:520px; margin:0 auto; min-height:100vh; min-height:100dvh; }
.app .screen { min-height:100vh; min-height:100dvh; padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); display:none; flex-direction:column; gap:10px; }
.app .screen.on { display:flex; }
.ph-wait { align-items:center; justify-content:center; text-align:center; color:var(--muted); gap:14px; line-height:1.5; }
.ph-wait b { color:var(--text); font-size:18px; }
.ph-wait a { color:var(--accent); font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-top:6px; }
.ph-top { display:flex; justify-content:space-between; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ph-top .ok { color:var(--green); display:inline-flex; gap:6px; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ph-top .ok i { width:7px; height:7px; border-radius:50%; background:var(--green); flex:none; }
.ph-top .ok.off { color:var(--yellow); } .ph-top .ok.off i { background:var(--yellow); }
.ph-top > button { font:inherit; color:var(--muted); background:none; border:1px solid var(--line); border-radius:6px; padding:6px 8px; flex:none; }
.pads { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
.pad { border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; justify-content:space-between; min-width:0; }
.pad.l { background:var(--red-soft); border:1px solid color-mix(in srgb,var(--red) 40%,transparent); }
.pad.r { background:var(--green-soft); border:1px solid color-mix(in srgb,var(--green) 40%,transparent); }
.pad .who { font-family:var(--display); font-weight:800; font-size:18px; text-transform:uppercase; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pad .sc { font-family:var(--display); font-weight:900; font-size:64px; line-height:.9; text-align:center; font-variant-numeric:tabular-nums; }
.pad.l .sc { color:var(--red); } .pad.r .sc { color:var(--green); }
.btn { font-family:var(--display); font-weight:800; font-size:30px; border:0; border-radius:12px; padding:16px 0; color:#fff !important; }
.phone-page button:not(:disabled):active { transform:scale(.97); }
.pad.l .plus { background:var(--red); } .pad.r .plus { background:var(--green); }
.pad .plus { flex:1; min-height:64px; font-size:clamp(40px, 13vw, 72px); }  /* the big target: its label as large as the score */
.minus { background:var(--surface2); color:var(--text) !important; font-size:22px; padding:10px 0; }
.cardrow { display:flex; gap:6px; } .cardrow button { flex:1; border:0; border-radius:8px; padding:9px 0; font:600 12px var(--mono) !important; }
.cardrow .y { background:var(--yellow); color:#222 !important; } .cardrow .rd { background:var(--red); color:#fff !important; border:1px solid #fff3; }
.cardrow .y.on { box-shadow:0 0 0 2px var(--ground), 0 0 0 4px var(--yellow); }
.double { background:var(--surface2); color:var(--text); font-family:var(--mono) !important; font-size:13px !important; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-radius:12px; padding:14px 0; }
.timer { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.timer .t { font-family:var(--display); font-weight:800; font-size:48px; line-height:1; font-variant-numeric:tabular-nums; }
.timer .t.low { color:var(--red); }
.timer .p { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
.go { font-family:var(--display) !important; font-weight:800; font-size:24px !important; border:0; border-radius:12px; padding:14px 22px; background:var(--accent); color:var(--on-accent) !important; text-transform:uppercase; }
.go.stop { background:var(--text); }
.row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.small { font-family:var(--mono) !important; font-size:11px !important; letter-spacing:.1em; text-transform:uppercase; background:var(--surface2); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:12px 4px; }
.small.warn { color:var(--red) !important; }
.lang { display:inline-flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:2px; flex:none; }
.lang button { border:0; border-radius:999px; padding:4px 9px; font:600 11px var(--mono) !important; color:var(--muted) !important; background:none; }
.lang button.on { background:var(--accent); color:var(--on-accent) !important; }
.banner { position:fixed; left:50%; top:calc(10px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:6; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:#2A2410; border:1px solid color-mix(in srgb,var(--yellow) 50%,transparent); color:var(--yellow); font:600 12px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.banner i { width:7px; height:7px; border-radius:50%; background:var(--yellow); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:.2; } }
.app.offline .ph-ctrl { opacity:.55; pointer-events:none; }
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:4; }
.sheet { position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--surface); border-top:1px solid var(--line); border-radius:18px 18px 0 0;
  padding:16px 14px calc(18px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; z-index:5; max-height:92vh; overflow:auto; }
.sheet h3 { font-family:var(--display); font-weight:800; font-size:22px; text-transform:uppercase; }
.sheet label, .sheet .field { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; display:flex; flex-direction:column; gap:5px; }
.sheet input { font:16px var(--body); background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px 10px; user-select:text; -webkit-user-select:text; }
.seg { display:flex; gap:6px; } .seg button { flex:1; background:var(--ground); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:11px 0; font:600 14px var(--mono) !important; text-transform:none; letter-spacing:0; }
.seg button.on { background:var(--accent); color:var(--on-accent) !important; border-color:var(--accent); }
.sheet .done { background:var(--accent); color:var(--on-accent) !important; border:0; border-radius:10px; padding:14px; font:800 18px var(--display) !important; text-transform:uppercase; }

/* team bout on the phone */
.pad .ttag { font:500 10px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); text-align:center; margin-bottom:-6px; }
.relaydone { text-align:center; font:600 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--on-accent); background:var(--accent); border-radius:10px; padding:9px; }
.sheet .typehint { font:500 11px var(--mono); color:var(--faint); letter-spacing:.06em; text-transform:none; }
.sheet .single-opts { display:flex; flex-direction:column; gap:12px; }
.sheet .single-opts[hidden], .sheet .teaminfo[hidden] { display:none; }
.sheet .teaminfo { font:13px/1.5 var(--body); color:var(--muted); background:var(--ground); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }

/* ending a bout on the phone: "Beenden", the end sheet, "Fertig" after the bout */
.ph-top > button.endb { color:#ff8a8d; border-color:color-mix(in srgb,var(--red) 55%,transparent); }
.sheet p { color:var(--muted); font-size:14px; line-height:1.45; }
.sheet .opt { font-family:var(--body); }
.donebar { display:flex; flex-direction:column; gap:8px; background:color-mix(in srgb,var(--accent) 18%,var(--surface)); border:1px solid var(--accent); border-radius:14px; padding:12px; }
.donebar .res { font:600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-align:center; }
.donebar .finish { background:var(--accent); color:var(--on-accent) !important; border:0; border-radius:12px; padding:12px 0; font:800 22px var(--display) !important; text-transform:uppercase; }

/* session over / no activity on the phone */
.ph-ended { align-items:center; justify-content:center; text-align:center; gap:14px; color:var(--muted); line-height:1.5; }
.ph-ended b { color:var(--text); font-size:20px; }
.ph-ended .again { background:var(--accent); color:var(--on-accent) !important; border:0; border-radius:12px; padding:12px 18px; font:800 18px var(--display) !important; text-transform:uppercase; }
.ph-warn { background:color-mix(in srgb,var(--accent) 22%,var(--surface)); border:1px solid var(--accent); border-radius:12px; padding:8px 10px; font-size:13px; line-height:1.4; }
.ph-warn b { color:var(--accent); font-variant-numeric:tabular-nums; }

/* code entry / expired */
.plain { max-width:420px; margin:0 auto; min-height:100vh; min-height:100dvh; padding:32px 20px; display:flex; flex-direction:column; justify-content:center; gap:16px; text-align:center; }
.plain .brand { justify-content:center; margin-bottom:8px; }
.plain h1 { font-family:var(--display); font-weight:800; font-size:34px; text-transform:uppercase; line-height:1.05; }
.plain p { color:var(--muted); line-height:1.5; }
.plain form { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.plain input { font:600 28px var(--mono); letter-spacing:.3em; text-align:center; text-transform:uppercase; background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:12px; padding:14px 10px; }
.plain button, .plain .btnlink { font:800 20px var(--display); text-transform:uppercase; background:var(--accent); color:var(--on-accent); border:0; border-radius:12px; padding:14px; text-decoration:none; }
.plain .err { color:var(--red); font-size:15px; }
.plain .hint { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }

/* Buttons that would change nothing (bout won, target below the score) */
.btn:disabled, .double:disabled, .seg button:disabled { opacity:.3; cursor:default; }