:root{--bg:#f4f6f8;--surface:#fff;--surface-2:#e9eef3;--text:#17212f;--muted:#647284;--border:#dbe2e9;--accent:#5570da;--accent-2:#4059bd;--success:#397d64;--success-bg:#e0f0e9;--failure:#a94f57;--failure-bg:#f7e5e6;--shadow:0 10px 35px rgba(26,39,54,.07);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
:root[data-theme=dark]{--bg:#151c26;--surface:#202a36;--surface-2:#293646;--text:#f1f5f8;--muted:#a6b2c1;--border:#354353;--accent:#8297ed;--accent-2:#9cadf1;--success:#71b99b;--success-bg:#243d35;--failure:#df8b91;--failure-bg:#452e33;--shadow:0 12px 40px rgba(0,0,0,.2);color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 0,rgba(104,126,220,.1),transparent 34rem),var(--bg);font-size:16px;line-height:1.5}button,input,select,textarea{font:inherit;color:inherit}a{color:inherit;text-decoration:none}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px}.brand{font-size:20px;font-weight:750;letter-spacing:-.04em}.brand span{color:var(--accent)}.top-actions{display:flex;align-items:center;gap:14px}.top-actions form{margin:0}.icon-button{width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--surface);cursor:pointer;font-size:22px}.text-link,.button-link{color:var(--muted);font-weight:650}.button-link{border:0;background:none;padding:8px;cursor:pointer}.shell{max-width:1120px;margin:0 auto;padding:52px 24px 90px}.shell.narrow{max-width:720px}.shell.center{display:grid;grid-template-columns:1fr minmax(300px,410px);align-items:center;gap:70px;min-height:calc(100vh - 150px)}h1,h2,p{margin-top:0}h1{font-size:clamp(2.15rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.055em;margin-bottom:18px}h2{letter-spacing:-.025em}.hero p:not(.eyebrow),.page-head p{color:var(--muted);max-width:620px;font-size:1.05rem}.eyebrow{color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.16em;margin-bottom:14px}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.form-card{padding:28px;display:grid;gap:19px}.form-card label,.label{font-weight:700;font-size:.9rem}.field{display:grid;gap:7px}.form-card input:not([type=checkbox]):not([type=radio]),.form-card select,.form-card textarea{width:100%;min-height:51px;border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:12px 14px}.form-card textarea{min-height:100px}.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-color:var(--accent)}.errorlist{list-style:none;margin:0;padding:0;color:var(--failure);font-size:.88rem}.helptext,.field small{color:var(--muted)}.segmented{display:grid;grid-template-columns:1fr 1fr;border:0;padding:0;margin:0}.segmented input{position:absolute;opacity:0}.segmented label{text-align:center;padding:12px;border:1px solid var(--border);cursor:pointer}.segmented label:first-of-type{border-radius:12px 0 0 12px}.segmented label:last-of-type{border-radius:0 12px 12px 0}.segmented input:checked+label{background:var(--accent);border-color:var(--accent);color:#fff}.primary,.secondary{min-height:48px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;padding:11px 20px;font-weight:750;border:0;cursor:pointer}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent-2)}.primary:disabled{opacity:.45}.secondary{background:var(--surface);border:1px solid var(--border)}.full{width:100%}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:36px}.page-head h1{font-size:clamp(2.1rem,4vw,3.5rem);margin-bottom:10px}.back{display:inline-block;color:var(--muted);font-weight:650;margin-bottom:28px}.match-list,.object-list,.session-list{display:grid;gap:12px}.match-card,.object-row,.session-row{padding:21px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.match-card:hover,.session-row:hover{border-color:var(--accent);transform:translateY(-1px)}.match-card h2,.session-row h2{margin:8px 0 3px}.match-card p,.session-row p{margin:0;color:var(--muted)}.arrow{font-size:28px;color:var(--accent)}.badge{display:inline-block;color:var(--muted);background:var(--surface-2);padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:750}.badge.completed{color:var(--success);background:var(--success-bg)}.badge.active{color:var(--accent)}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.resume{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;margin-bottom:24px;border-color:var(--accent)}.resume p{margin:4px 0 0;color:var(--muted)}.field-row{display:flex;gap:14px}.field-row>div{display:grid;gap:7px}.field-row .grow{flex:1}.selection{display:grid;gap:10px;padding-top:5px}.selected-item{display:flex;align-items:flex-start;gap:10px;background:var(--surface-2);border-radius:12px;padding:12px}.selected-item small{display:block;color:var(--muted)}.check{color:var(--success);font-weight:900}.selection ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.selection ul label{display:flex;gap:10px;align-items:center;background:var(--surface-2);border-radius:12px;padding:12px}.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.admin-tile{padding:23px}.admin-tile>span{font-size:2rem;color:var(--accent);font-weight:800}.admin-tile h2{margin:12px 0 5px}.admin-tile p{color:var(--muted);margin:0}.accent-tile{border-color:var(--accent)}.info-card{margin-top:30px;padding:28px}.row-actions{display:flex;gap:16px;color:var(--accent);font-weight:650}.roster-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.roster-player{padding:17px}.choice-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.choice-row input{position:absolute;opacity:0}.choice-row label{padding:7px 10px;background:var(--surface-2);border:1px solid transparent;border-radius:9px;font-size:.83rem;cursor:pointer}.choice-row input:checked+label{border-color:var(--accent);color:var(--accent)}.sticky-save{position:sticky;bottom:20px;float:right;margin-top:20px;box-shadow:var(--shadow)}.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.check-grid input{position:absolute;opacity:0}.check-grid label{padding:16px;display:flex;gap:10px;align-items:center;cursor:pointer}.check-grid label .check{margin-left:auto;opacity:0}.check-grid input:checked+label{border-color:var(--accent)}.check-grid input:checked+label .check{opacity:1}.jersey{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:.8rem;font-weight:800}.session-row time{color:var(--muted);white-space:nowrap}.report,.comparison{padding:24px;margin:16px 0}.report-grid{display:grid;grid-template-columns:minmax(120px,1fr) repeat(var(--cols),minmax(75px,auto));gap:0}.report-grid>div,.report-grid>strong{padding:10px 4px;border-bottom:1px solid var(--border)}.report-head{color:var(--muted);font-size:.78rem;font-weight:700}.number{text-align:right}.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.comparison-wrap{overflow:auto}.comparison table{width:100%;border-collapse:collapse}.comparison th,.comparison td{padding:10px;border-bottom:1px solid var(--border);text-align:right}.comparison th:first-child,.comparison td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
.record-shell{max-width:820px;padding-top:20px}.record-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:30px}.record-head h1{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:8px}.record-head p{color:var(--muted)}.sync-state{flex:none;font-size:.75rem;color:var(--success);padding:7px 10px;border-radius:99px;background:var(--success-bg)}.sync-state.pending{color:var(--muted);background:var(--surface-2)}.stat-section{margin:34px 0}.section-title h2{font-size:1.45rem;margin-bottom:5px}.section-title p{color:var(--muted)}.players{display:grid;gap:9px}.player-card{background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:13px 15px}.player-card header{display:flex;align-items:center;gap:10px;margin-bottom:9px}.counter-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}.counter-row>span{font-size:.83rem;color:var(--muted);font-weight:700}.counter-row.success>span{color:var(--success)}.counter-row.failure>span{color:var(--failure)}.stepper{display:grid;grid-template-columns:52px 58px 52px;align-items:center;text-align:center}.stepper button{width:48px;height:48px;border:0;border-radius:13px;background:var(--surface-2);font-size:1.65rem;cursor:pointer;touch-action:manipulation}.stepper strong{font-size:1.4rem}.success .stepper button:last-child{background:var(--success-bg);color:var(--success)}.failure .stepper button:last-child{background:var(--failure-bg);color:var(--failure)}.player-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.player-pick{border:1px solid var(--border);background:var(--surface);border-radius:15px;padding:13px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;cursor:pointer;touch-action:manipulation}.player-pick.picked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}.player-pick>strong{font-size:1.1rem}.event-button{margin-top:12px;min-height:58px}.text-action{display:block;margin:12px auto 0;border:0;background:none;color:var(--muted);padding:10px;cursor:pointer}.text-action:disabled{opacity:.35}.comment-card{padding:20px;margin-top:40px}.comment-card label{display:block;font-weight:750;margin-bottom:8px}.comment-card textarea{width:100%;resize:vertical;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px}.finish{min-height:60px;margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.topbar{padding:0 16px}.shell{padding:32px 16px 80px}.shell.center{display:block}.hero{margin-bottom:35px}.hero h1{font-size:2.65rem}.page-head{align-items:flex-start;flex-direction:column}.page-head .primary,.page-head .secondary{width:100%}.admin-grid{grid-template-columns:1fr 1fr}.roster-grid{grid-template-columns:1fr}.check-grid{grid-template-columns:1fr 1fr}.record-head{display:block}.sync-state{display:inline-block}.object-row{align-items:flex-start}.row-actions{flex-direction:column;gap:6px}.session-row{align-items:flex-start;flex-direction:column}.field-row{display:grid}.action-row>*{flex:1}.top-actions{gap:7px}.text-link{font-size:.86rem}}
@media(max-width:390px){.admin-grid,.check-grid{grid-template-columns:1fr}.player-picks{grid-template-columns:1fr}.stepper{grid-template-columns:48px 52px 48px}.stepper button{width:44px;height:44px}}
@media(prefers-reduced-motion:no-preference){.card,.primary{transition:.15s ease}}
.choice-row input,.check-grid input{width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.choice-row input:focus-visible+label,.check-grid input:focus-visible+label{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent)}

/* Simplified event-based administration */
.admin-nav{display:flex;gap:6px;overflow:auto;margin:-20px 0 42px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.admin-nav a{white-space:nowrap;padding:10px 14px;border-radius:10px;color:var(--muted);font-weight:700}.admin-nav a.active{background:var(--surface-2);color:var(--text)}
.quick-grid,.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.quick-card{padding:24px;display:grid;gap:5px}.quick-card strong{font-size:2.2rem;color:var(--accent)}.quick-card span{color:var(--muted)}
.section-block{margin-top:42px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:15px}.section-head h2{margin:0}.event-grid,.definition-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.event-card{padding:24px;display:flex;justify-content:space-between;align-items:center;gap:18px}.event-card h2,.definition-card h2{margin:11px 0 5px}.event-card p,.event-card small,.definition-card p,.definition-card small{display:block;color:var(--muted);margin:0}.badge.open{color:var(--success);background:var(--success-bg)}.empty.compact{padding:24px;text-align:left}.empty.compact p{margin:0}
.codes-card{padding:28px;margin-top:42px}.code-list{display:grid;gap:11px}.code-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(180px,1fr) auto auto;align-items:center;gap:9px;padding:13px 0;border-bottom:1px solid var(--border)}.code-row small{display:block;color:var(--muted);margin-top:3px}.code-row input{min-height:43px;border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:9px 12px;color:var(--text)}.secondary.small{min-height:42px;padding:8px 12px}.rotate-codes{margin-top:20px}.rotate-codes summary{cursor:pointer;color:var(--accent);font-weight:700}.form-card.flat{box-shadow:none;border:0;padding:22px 0 0}
.inline-create{display:flex;align-items:end;gap:12px;padding:18px;margin-bottom:24px}.inline-create input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--bg);padding:10px 12px}.inline-create .number-field{width:120px}.object-main{display:flex;align-items:center;gap:13px}.object-main small{display:block;color:var(--muted);margin-top:3px}.muted-row{opacity:.58}.definition-create{margin-bottom:24px}.definition-grid{grid-template-columns:repeat(3,1fr)}.definition-card{padding:22px}
.event-form{display:grid;gap:15px;max-width:900px}.form-section{padding:24px;display:grid;grid-template-columns:44px 1fr;gap:17px}.form-section .step{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-weight:800}.form-section input[type=text],.form-section textarea{width:100%;min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--bg);padding:11px 13px}.form-section textarea{min-height:80px}.radio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.radio-card{position:relative}.radio-card input{position:absolute;opacity:0}.radio-card span{display:block;padding:16px;border:1px solid var(--border);border-radius:13px;cursor:pointer}.radio-card input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}.player-checkboxes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.player-checkbox{display:flex;align-items:center;gap:9px;padding:11px;border:1px solid var(--border);border-radius:12px;cursor:pointer}.player-checkbox input{position:absolute;opacity:0}.player-checkbox:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}.player-checkbox .check{margin-left:auto;opacity:0}.player-checkbox:has(input:checked) .check{opacity:1}.player-checkbox:has(input:disabled){opacity:.7;cursor:default}.segmented.standalone{max-width:360px}.lock-note{color:var(--muted)}.event-summary{display:flex;justify-content:space-between;padding:14px;background:var(--surface-2);border-radius:12px}.head-actions{display:flex;gap:9px}.head-actions form{margin:0}.detail-grid{grid-template-columns:1fr 2fr}.info-card p:last-child{margin-bottom:0}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.chip-list span{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:99px;background:var(--surface-2)}.chip-list b{color:var(--accent)}.clone-action{margin-top:32px}
@media(max-width:760px){.admin-nav{margin-top:-12px;margin-bottom:30px}.quick-grid,.detail-grid,.event-grid,.definition-grid{grid-template-columns:1fr}.code-row{grid-template-columns:1fr auto auto}.code-row>div{grid-column:1/-1}.code-row input{min-width:0}.inline-create{display:grid;grid-template-columns:1fr 100px}.inline-create button{grid-column:1/-1}.form-section{grid-template-columns:1fr}.radio-cards,.player-checkboxes{grid-template-columns:1fr 1fr}.head-actions{width:100%}.head-actions>*{flex:1}.head-actions button{width:100%}}
@media(max-width:420px){.radio-cards,.player-checkboxes{grid-template-columns:1fr}.code-row{grid-template-columns:1fr 1fr}.code-row input{grid-column:1/-1}.top-actions .text-link:not(.button-link){display:none}}

.record-shell dialog .comment-card{margin-top:18px;padding:0}
.messages{margin-bottom:24px}.message{padding:14px 18px;border-color:var(--accent);color:var(--text)}
.custom-pick{grid-template-columns:1fr auto}.target-mode{margin-bottom:22px}.field-help{color:var(--muted);margin-bottom:12px}.repeater-row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin-bottom:10px}.repeater-row input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:11px;background:var(--bg);padding:10px 12px}.repeater-row .secondary{min-height:48px}.repeater-row label{font-weight:700;font-size:.85rem}
@media(max-width:520px){.repeater-row{grid-template-columns:1fr}.repeater-row .secondary{justify-self:start;min-height:40px}}

/* Compact recording and list-based administration. */
.record-shell{padding-top:8px}.record-head{display:flex;margin-bottom:8px}.record-head h1{font-size:1.35rem;margin:0}.record-shell .stat-section{margin:12px 0}.record-shell .section-title h2{font-size:1.1rem;margin-bottom:4px}.record-shell .section-title p{font-size:.85rem;margin-bottom:10px}.record-shell .player-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;padding:7px 9px;border-radius:12px}.record-shell .player-card header{margin:0;min-width:0;gap:6px}.record-shell .player-card header strong{overflow-wrap:anywhere;font-size:.92rem}.record-shell .counter-row{min-height:44px;gap:4px}.record-shell .single-counter .counter-row>span{display:none}.record-shell .stepper{grid-template-columns:44px 30px 44px}.record-shell .stepper button{width:44px;height:44px}.record-shell .stepper strong{font-size:1.1rem}.record-shell .dual-counter header{grid-row:1/3}.record-shell .dual-counter .counter-row{grid-column:2}.record-shell .counter-row>span{font-size:.65rem;max-width:58px}.record-shell .jersey{min-width:25px;width:25px;height:30px;font-size:.75rem}.record-shell .players{gap:5px}.record-shell .comment-card{margin-top:14px;padding:12px}.record-shell .finish{min-height:48px}.save-feedback{position:fixed;right:14px;bottom:16px;z-index:20;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--surface);box-shadow:0 2px 12px #0003;pointer-events:none}.save-icon::before{content:'✓';color:var(--success)}.save-feedback.saved{animation:save-fade 1.2s forwards}.save-feedback.saving .save-icon{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:save-spin .7s linear infinite}.save-feedback.saving .save-icon::before{content:''}.save-feedback.offline .save-icon::before{content:'!';color:var(--failure);font-weight:bold}@keyframes save-spin{to{transform:rotate(360deg)}}@keyframes save-fade{0%,65%{opacity:1}100%{opacity:0}}dialog{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px;max-width:calc(100% - 32px);width:430px}dialog::backdrop{background:#0009}dialog h2{font-size:1.3rem}.list-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}.danger-link{color:var(--failure)}.object-row p{margin:4px 0}.object-main small{color:var(--muted)}.form-card>div{display:grid;gap:6px}.form-card>div>label{font-weight:650}.form-card ul{list-style:none;padding:0}.object-row details{margin-top:8px}@media(max-width:600px){.object-row{gap:10px;align-items:center}.object-main{flex-wrap:wrap}.object-main small{flex-basis:100%}.list-actions{gap:10px;font-size:.85rem}.record-shell{padding:8px 10px 60px}.record-shell .player-picks{grid-template-columns:1fr 1fr}.record-shell .player-pick{padding:9px;gap:5px}.record-shell .player-pick span{overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){.save-feedback.saving .save-icon{animation:none}.save-feedback.saved{animation:none;opacity:0}}

.form-card fieldset{border:0;margin:0;padding:0}.form-card legend{font-weight:650;margin-bottom:8px}.form-card fieldset>div{display:grid;gap:8px}.form-card input[type=radio],.form-card input[type=checkbox]{accent-color:var(--accent)}

.login-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.login-links button{font-size:.85rem}.login-link-fallback{width:100%;min-width:0}.login-link-fallback[hidden]{display:none}
[hidden]{display:none!important}
.record-shell .section-title p{white-space:pre-line}

/* Yellow court visual system */
:root{--bg:#050a0e;--surface:#0d151e;--surface-2:#172331;--text:#f8f8f4;--muted:#9eabba;--border:#34414f;--accent:#ffdd16;--accent-2:#f4c900;--success:#ffdd16;--success-bg:#2d2a08;--failure:#ff7c73;--failure-bg:#3e2021;--shadow:0 18px 55px #0008;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
html{background:#050a0e;color:var(--text)}
body{position:relative;isolation:isolate;background:radial-gradient(circle at 15% 20%,#25313a55,transparent 24rem),linear-gradient(135deg,transparent 76%,#ffdd1614 76% 79%,transparent 79%),linear-gradient(160deg,#091119,#03070a);font-size:16px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(125deg,transparent 0 90px,#ffdd1608 91px 96px,transparent 97px 180px);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000)}
.topbar{height:78px;border-bottom:1px solid #ffffff12}.brand{font-size:26px;font-weight:900}.brand span,.login-hero h1 span{color:var(--text)}.brand,.login-hero h1{color:var(--accent)}
.top-actions .text-link{color:var(--muted)}.shell{max-width:920px;padding-top:28px}.shell.narrow{max-width:720px}
.card{background:linear-gradient(145deg,#111b25,#091119);border-color:#394754;border-radius:16px;box-shadow:var(--shadow)}
.primary{color:#050607;background:linear-gradient(135deg,#ffe829,#ffd000);box-shadow:0 8px 24px #ffdc1630}.primary:hover{background:#ffe44a}.secondary{background:#111b25;border-color:#465564}
.eyebrow{color:var(--accent)}
.section-ribbon{height:34px;display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;padding-left:22px;color:#050607;background:linear-gradient(90deg,#ffd30b,#ffe94c 78%,transparent 78%);border-radius:18px 0 0 0;font-size:.74rem;font-weight:950;letter-spacing:.35em}
.section-ribbon i{width:84px;height:34px;background:repeating-linear-gradient(120deg,transparent 0 9px,var(--accent) 10px 17px,transparent 18px 23px);border-bottom:1px solid var(--accent)}
.event-page-head{margin-bottom:18px}.event-page-head h1{font-size:1.7rem;margin-bottom:3px}.event-page-head p{font-size:.92rem}.event-grid{grid-template-columns:1fr;gap:12px}.event-card{min-height:142px;padding:23px 26px;border-color:#3b4855}.event-card:first-child{border-color:var(--accent);box-shadow:0 0 0 1px #ffdd1638}.event-card h2{margin:8px 0 10px;font-size:1.35rem}.event-date{display:block;color:var(--muted);font-size:.78rem;font-weight:750;text-transform:uppercase}.event-meta{display:flex;gap:20px;color:#cad2dc;font-weight:650}.event-time{font-size:1.05rem}.event-card .arrow{color:var(--text);font-size:2rem}
.shell.center{grid-template-columns:1fr;max-width:520px;align-content:center;gap:42px}.login-hero{text-align:center}.login-hero h1{font-size:clamp(3.5rem,12vw,6rem);font-weight:950;letter-spacing:-.07em;margin:0}.login-hero p{margin:auto}.center .form-card{background:transparent;border:0;box-shadow:none;padding:0}.code-input{position:relative}.code-input::before{content:"◆";position:absolute;left:16px;top:14px;color:var(--muted)}.code-input input{padding-left:48px!important;background:#101923!important;border-color:#3a4652!important}.center .primary{min-height:60px;font-size:1.12rem;justify-content:space-between;padding-inline:26px}
.record-shell{max-width:720px}.record-shell .section-ribbon{margin-bottom:28px}.record-head h1{font-size:1.55rem}.record-head h1 span{white-space:nowrap}.record-head p{color:var(--accent);margin-bottom:0}.record-shell .section-title h2{font-size:1.3rem}.record-shell .section-title p{line-height:1.55;color:#c5ced7}.record-shell .player-card{min-height:84px;padding:12px 14px;background:linear-gradient(120deg,#111c27,#0b131c)}.record-shell .player-card header strong{font-size:1rem}.record-shell .stepper{grid-template-columns:56px 48px 56px}.record-shell .stepper button{width:56px;height:56px;background:#1c2938;border:1px solid #243345}.record-shell .stepper strong{font-size:1.35rem}.record-shell .finish{background:var(--accent);color:#050607}
.schedule-fields{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin:16px 0}.form-section input[type=date],.form-section input[type=time]{color-scheme:dark}
@media(max-width:600px){.topbar{height:66px}.brand{font-size:23px}.top-actions>span{display:none}.shell{padding:18px 14px 72px}.section-ribbon{margin-inline:-2px}.event-card{min-height:132px;padding:20px}.event-card h2{font-size:1.18rem}.event-meta{gap:12px;flex-wrap:wrap}.login-hero h1{font-size:4rem}.schedule-fields{grid-template-columns:1fr}.record-shell .player-card{grid-template-columns:minmax(0,1fr) auto}.record-shell .stepper{grid-template-columns:48px 34px 48px}.record-shell .stepper button{width:48px;height:48px}}

/* Recording header and safe session exit */
.section-ribbon{overflow:hidden;background:linear-gradient(90deg,#ffd30b,#ffe94c);border-bottom:1px solid var(--accent)}
.section-ribbon i{align-self:stretch;width:108px;flex:none;background:repeating-linear-gradient(120deg,transparent 0 13px,#071018 14px 25px,transparent 26px 37px)}
.record-head{padding:4px 2px 16px}.record-head .event-date{margin-bottom:5px}.record-head h1{margin-bottom:10px;overflow-wrap:anywhere}.record-head .event-meta{color:#d1d9e2}.record-head .event-time{color:var(--accent)}
.discard{margin-top:10px;background:#080d12;border-color:#303c48;color:#d4dbe2}.discard:hover{border-color:#7a8794;color:#fff}.danger-button{min-height:48px;padding:11px 18px;border:1px solid #7d373b;border-radius:13px;background:#30181b;color:#ffb6b8;font-weight:800;cursor:pointer}
#discard-dialog .action-row{align-items:stretch}#discard-dialog form{display:flex}#discard-dialog form button{width:100%}
@media(min-width:761px){.record-shell .section-ribbon{width:100%;margin-inline:0}.record-shell .record-head{max-width:100%}}
@media(max-width:600px){.section-ribbon i{width:76px}.record-head .event-meta{font-size:.92rem}#discard-dialog .action-row{display:grid}#discard-dialog form{display:block}}

/* Recorder surfaces stay intentionally phone-like on wide screens. */
.app-screen .topbar,.app-screen .shell{width:min(100%,560px);max-width:560px;margin-inline:auto}
.app-screen .topbar{padding-inline:18px}.app-screen .top-actions>span{display:none}
.app-screen .shell{padding:20px 18px 72px}.app-screen .section-ribbon{width:100%;height:32px;margin:0 0 24px;border-radius:16px 0 0 0;padding-left:20px}
.app-screen .section-ribbon i{width:82px;height:32px}
.record-screen .record-head{padding:0 4px 12px;margin-bottom:14px}.record-screen .record-head h1{font-size:1.45rem;line-height:1.15;margin:6px 0 10px}
.record-screen .record-head .event-meta{font-size:.95rem}.record-screen .stat-section{margin-top:20px}.record-screen .section-title h2{font-size:1.25rem}
@media(min-width:761px){.app-screen .topbar{border-inline:1px solid #ffffff0d}.app-screen .shell{min-height:calc(100vh - 78px);border-inline:1px solid #ffffff0d}.record-screen .section-ribbon{margin-inline:0}}

/* Mockup ribbon: angled yellow title block, dark tail and three yellow slashes. */
.app-screen .section-ribbon{position:relative;isolation:isolate;overflow:hidden;background:transparent;border-bottom:1px solid var(--accent)}
.app-screen .section-ribbon::before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:calc(100% - 112px);background:linear-gradient(90deg,#ffd20a,#ffe94b);clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,0 100%)}
.app-screen .section-ribbon span,.app-screen .section-ribbon i{position:relative;z-index:1}.app-screen .section-ribbon i{width:96px;height:100%;margin-left:auto;background:repeating-linear-gradient(120deg,transparent 0 12px,var(--accent) 13px 23px,transparent 24px 34px)}
@media(max-width:420px){.app-screen .section-ribbon::before{width:calc(100% - 96px)}.app-screen .section-ribbon i{width:82px}}

/* Final broadcast-style section strip geometry. */
.app-screen .section-ribbon{
  --strip-height:48px;
  --strip-main-width:64%;
  --strip-tail-width:104px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  width:100%;
  height:var(--strip-height);
  min-height:var(--strip-height);
  margin:0 0 24px;
  padding:0 0 0 24px;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.app-screen .section-ribbon::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 auto 0 0;
  width:var(--strip-main-width);
  height:auto;
  background:linear-gradient(90deg,#f3d019 0%,#f8dd2d 100%);
  clip-path:polygon(0 0,100% 0,calc(100% - 20px) 100%,0 100%);
  border-radius:13px 0 0 0;
}
.app-screen .section-ribbon::after{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  bottom:0;
  left:calc(var(--strip-main-width) + var(--strip-tail-width) - 8px);
  height:2px;
  background:#f5d51f;
}
.app-screen .section-ribbon span{
  position:relative;
  z-index:2;
  color:#070a0d;
  font-size:15px;
  font-weight:700;
  line-height:1;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.app-screen .section-ribbon i{
  position:absolute;
  z-index:1;
  top:0;
  left:calc(var(--strip-main-width) - 8px);
  width:var(--strip-tail-width);
  height:var(--strip-height);
  margin:0;
  background:#f5d51f;
  clip-path:polygon(18px 0,100% 0,calc(100% - 18px) 100%,0 100%);
}
.app-screen .section-ribbon i::before,.app-screen .section-ribbon i::after{
  content:"";
  position:absolute;
  top:-3px;
  bottom:-3px;
  width:15px;
  background:#050a0e;
  transform:skewX(-25deg);
}
.app-screen .section-ribbon i::before{left:31px}.app-screen .section-ribbon i::after{left:67px}

/* Compact recorder density and disclosure. */
.app-screen .shell{padding-top:10px}.app-screen .section-ribbon{margin-bottom:17px}
.record-screen .record-head{padding-bottom:7px;margin-bottom:8px}.record-screen .stat-section{margin:12px 0}
.instructions{margin:0 0 10px}.instructions summary{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:1px 0 1px 2px;color:var(--text);font-size:1.1rem;font-weight:800;cursor:pointer;list-style:none}.instructions summary::-webkit-details-marker{display:none}.instructions p{margin:4px 2px 11px;color:#c5ced7;line-height:1.45;white-space:pre-line;font-size:.84rem}
.record-shell .players{gap:4px}.record-shell .player-card{min-height:76px;padding-block:9px}.record-shell .finish{margin-top:9px;min-height:48px}.record-shell .discard{min-height:46px;margin-top:7px}

/* Reference-matched strip: one main block, exactly two parallel slashes. */
.app-screen .section-ribbon{
  --strip-height:38px;
  --strip-main-width:78%;
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:var(--strip-height);
  min-height:var(--strip-height);
  padding:0 0 0 24px;
  overflow:hidden;
  background:transparent;
  box-shadow:inset 0 -2px 0 #f5d51f;
}
.app-screen .section-ribbon::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 auto 0 0;
  width:var(--strip-main-width);
  background:#f5d51f;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  border-radius:12px 0 0 0;
}
.app-screen .section-ribbon::after{content:none}
.app-screen .section-ribbon span{position:relative;z-index:2;color:#070a0d;font-size:13px;font-weight:750;line-height:1;letter-spacing:.31em;text-transform:uppercase}
.app-screen .section-ribbon i{position:absolute;z-index:1;top:0;left:calc(var(--strip-main-width) - 6px);width:74px;height:var(--strip-height);margin:0;background:transparent;clip-path:none}
.app-screen .section-ribbon i::before,.app-screen .section-ribbon i::after{content:"";position:absolute;top:-1px;bottom:-1px;width:16px;background:#f5d51f;transform:skewX(-23deg)}
.app-screen .section-ribbon i::before{left:4px}.app-screen .section-ribbon i::after{left:30px}

/* The supplied artwork owns the complete strip geometry, including both
   equal-width black cuts and the continuous yellow baseline. */
.app-screen .section-ribbon{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:38px;
  min-height:38px;
  padding:0 0 0 24px;
  overflow:visible;
  border:0;
  border-radius:14px 0 0 0;
  background:
    radial-gradient(circle at 14px 14px,transparent 0 13px,#0b1219 13.5px) left top / 14px 14px no-repeat,
    url("section-header-strip.085bc8c457e6.png") left center / 100% 100% no-repeat;
  box-shadow:none;
}
.app-screen .section-ribbon::before,.app-screen .section-ribbon::after,
.app-screen .section-ribbon i,.app-screen .section-ribbon i::before,
.app-screen .section-ribbon i::after{display:none;content:none}
.app-screen .section-ribbon span{
  position:relative;
  z-index:1;
  color:#070a0d;
  font-size:13px;
  font-weight:750;
  line-height:1;
  letter-spacing:.31em;
  text-transform:uppercase;
}
.record-screen .record-head{padding-left:4px}

/* One shared court background for every application view. */
body{
  background-color:#050a0e;
  background-image:linear-gradient(rgba(3,8,12,.28),rgba(3,8,12,.42)),url("pelikirja-background.bae9914c944c.png");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body::before{content:none}
.record-screen{
  background-image:linear-gradient(rgba(3,8,12,.2),rgba(3,8,12,.34)),url("pelikirja-record-background.c77c2f96c25b.png");
}
.app-screen .event-grid{gap:8px}
.app-screen .resume{margin-bottom:10px}
.dashboard-admin-action{display:flex;justify-content:flex-end;margin:0 0 10px}
.event-meta .recording-badge{margin:0;padding:2px 7px;border:1px solid var(--accent);border-radius:5px;color:var(--accent);background:#071018;font-size:.72rem;line-height:1.35;letter-spacing:0;white-space:nowrap}
.image-control{padding:0;border:0;background:transparent;box-shadow:none}
.image-control img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.instructions-control{flex:0 0 44px;width:44px;height:44px}
.instructions-control img{transition:transform .15s ease}
.instructions[open] .instructions-control img{transform:rotate(180deg)}
.record-shell .stepper button{border:0;background:transparent;color:transparent;box-shadow:none}
.event-context-card{display:block;padding:19px 16px 14px;margin:0 0 2px;border:1px solid #1d2731;border-radius:4px;background:rgba(3,7,11,.52);box-shadow:0 9px 24px #0005}
.record-screen .event-context-card h1{margin:5px 0 8px;font-size:1.35rem;line-height:1.18}
.event-context-card .event-meta{gap:15px}
.event-time,.session-row time{color:var(--accent)!important;font-weight:750}
.instructions-card{padding:0 12px;margin:0 0 10px;border:1px solid #1d2731;border-radius:4px;background:rgba(3,7,11,.52);box-shadow:0 9px 24px #0005}
.instructions-card summary{padding-left:0}
.instructions-card p{margin:0 2px 12px}
.start-screen .back{margin-bottom:14px}
.start-screen .form-card{margin-top:10px}
.record-screen .section-ribbon{margin-bottom:2px}
.record-screen .event-context-card{margin-bottom:0}
.record-screen #stat-sections .stat-section:first-child{margin-top:2px}
.start-screen .event-context-card{margin-bottom:2px}
.summary-context{margin:8px 2px 12px;color:var(--muted)}
.public-stats{margin:12px 0;padding:14px;border:1px solid #1d2731;border-radius:4px;background:rgba(3,7,11,.62);box-shadow:0 9px 24px #0005}
.public-stats h2{margin:0 0 9px;font-size:1.05rem}
.public-stats-wrap{overflow-x:auto;overscroll-behavior-inline:contain}
.public-stats table{width:100%;min-width:calc(112px + var(--public-cols) * 62px);table-layout:fixed;border-collapse:collapse;font-size:.78rem}
.public-stats th,.public-stats td{padding:7px 4px;border-bottom:1px solid #27313b;text-align:center;overflow-wrap:anywhere}
.public-stats th:first-child,.public-stats td:first-child{width:112px;text-align:left;position:sticky;left:0;background:rgba(3,7,11,.94)}
.public-stats th{color:var(--muted);font-size:.7rem;line-height:1.15}
.public-stats td:not(:first-child){font-weight:800;color:var(--text)}
.orientation-note{margin:0 0 9px;color:var(--accent);font-size:.78rem;line-height:1.35}
.empty-public-stats p{margin:0;color:var(--muted)}
.public-stats-toggle{display:flex;align-items:center;gap:10px;margin-top:18px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);font-weight:700;cursor:pointer}
.public-stats-toggle input{width:20px;height:20px;accent-color:var(--accent)}