/* Bills Bar-Quiz admin. Warm paper, ink outlines, one shadow style – borrowed from Potluck, kept quiet. */
:root{
  --bg:#F6EDDC;--cream:#FFF8EC;--soft:#FBF1DF;--card:#fff;
  --ink:#2A2720;--mute:#6B6454;--mute2:#615A4B;--line:#EDE4D3;--dash:#CDBF9F;
  --butter:#F5D774;--butter-t:#FCEFC4;--butter-ink:#6B5310;--sky-t:#E1EFF8;--sky-ink:#2D5E7C;--lilac-t:#ECE7FB;--lilac-ink:#54469A;
  --good:#286C4A;--good-t:#DDEFD1;--bad:#AE3B26;--bad-t:#FBDCD3;
  --bw:1.5px;--sh:2px 2px 0 var(--ink);--r:20px;
  color-scheme:light;
}
/* The admin pages on near-white paper; the player pages keep the warm one. */
:root:not(:has(.player:not(.lv-play,.lv-pbar))){--bg:#F9F8F6;--cream:#FDFCFA;--soft:#F3F1EE;--line:#E7E4DF;--dash:#C8C2B8}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:500 15px/1.45 "Bricolage Grotesque",ui-rounded,system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
h1:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--mute)}
.linkish{font-weight:700;text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px}
.linkish:hover{text-decoration-color:currentColor}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:780px;margin:0 auto;padding:0 24px}
.top{display:flex;align-items:center;justify-content:space-between;height:68px}
.wordmark{font-size:21px;font-weight:800;letter-spacing:-.045em;line-height:1.1;display:inline-flex;align-items:center;gap:10px}
/* Components/BrandMark.razor: the mug on a butter tile, scales with the wordmark's font size */
.brand-tile{flex:none;width:1.65em;height:1.65em;display:grid;place-items:center;border-radius:.52em;background:var(--butter);border:var(--bw) solid var(--ink);box-shadow:var(--sh);color:var(--ink)}
.brand-tile svg{width:70%;height:70%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-tile .foam{fill:var(--card)}
main.wrap{padding-bottom:96px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;border-radius:999px;border:var(--bw) solid var(--ink);background:var(--card);font-weight:700;font-size:14px;white-space:nowrap;transition:transform .12s,box-shadow .12s,background .12s}
@media (hover:hover){.btn:not(:disabled):hover{transform:translate(-1px,-1px);box-shadow:var(--sh)}}
.btn:not(:disabled):active{transform:translate(1px,1px);box-shadow:none}
.btn.ink{background:var(--ink);color:#fff;box-shadow:var(--sh)}
@media (hover:hover){.btn.ink:not(:disabled):hover{box-shadow:3px 3px 0 var(--mute)}}
.btn.ghost{border-color:transparent;background:transparent;color:var(--mute2)}
.btn.ghost:not(:disabled):hover{background:var(--soft);box-shadow:none;transform:none;color:var(--ink)}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.btn.icon{width:34px;height:34px;padding:0;border-radius:50%}
.btn.danger{color:var(--bad);border-color:currentColor}
.btn.danger[data-armed]{background:var(--bad);border-color:var(--bad);color:#fff}
.btn .ico{width:17px;height:17px}
label.btn:has(input:focus-visible){outline:2.5px solid var(--ink);outline-offset:2px}
label.btn.disabled{opacity:.45;pointer-events:none}

/* ---------- type ---------- */
.back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--mute);margin:6px 0 14px}
.back:hover{color:var(--ink)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:18px 0 28px}
.pagehead h1{font-size:40px;font-weight:700;letter-spacing:-.045em;line-height:1.02;overflow-wrap:anywhere}
.pagehead .actions{display:flex;gap:8px;flex:none}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;font-weight:600;color:var(--mute);margin-top:8px}
.meta span{overflow-wrap:anywhere}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}

/* ---------- pieces ---------- */
.card{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--mute2)}
.chip.butter{background:var(--butter-t);color:var(--butter-ink)}
.chip.mint{background:var(--good-t);color:var(--good)}
.chip.sky{background:var(--sky-t);color:var(--sky-ink)}
.chip.lilac{background:var(--lilac-t);color:var(--lilac-ink)}
.chip.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.empty{text-align:center;padding:48px 24px;border:var(--bw) dashed var(--dash);border-radius:var(--r);color:var(--mute);font-weight:600}
.empty b{display:block;color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.empty .btn{margin-top:18px}
.empty .row{display:flex;justify-content:center;gap:8px;margin-top:18px}
.empty .row .btn{margin-top:0}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--soft),var(--cream),var(--soft));background-size:200% 100%;animation:shimmer 1.3s infinite linear}
@keyframes shimmer{to{background-position:-200% 0}}
.skel.head{height:90px;margin:18px 0 28px}
.skel.tall{height:300px}
.notice{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-radius:16px;font-size:14px;font-weight:600;margin-bottom:16px}
.notice.butter{background:var(--butter-t)}
.notice.bad{background:var(--bad-t);color:var(--bad)}
.notice .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.notice .btn{flex:none}

/* ---------- evenings list ---------- */
.list{overflow:hidden}
.ev{display:flex;align-items:center;gap:16px;padding:16px 20px;transition:background .12s}
.ev + .ev{border-top:1px solid var(--line)}
.ev:hover{background:var(--cream)}
.ev:focus-visible{outline-offset:-3px;border-radius:var(--r)}
.ev .date{width:44px;flex:none;text-align:center;line-height:1}
.ev .date b{display:block;font-size:24px;font-weight:700;letter-spacing:-.04em}
.ev .date small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.ev .body{flex:1;min-width:0}
.ev .name{font-size:17px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.ev .sub{display:block;font-size:13.5px;color:var(--mute);font-weight:500;overflow-wrap:anywhere}

/* ---------- import ---------- */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 24px;border:var(--bw) dashed var(--dash);border-radius:var(--r);color:var(--mute);font-weight:500;transition:background .15s,border-color .15s}
.drop b{color:var(--ink);font-size:18px;font-weight:700;letter-spacing:-.02em}
.drop .btn{margin-top:12px}
.drop.over{background:var(--cream);border-color:var(--ink)}
.drop:focus-within{outline:2.5px solid var(--ink);outline-offset:2px}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.reading{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:16px}
.reading .grow{flex:1;min-width:0}
.reading b{font-weight:700;overflow-wrap:anywhere}
.reading .btn{flex:none}
.or{text-align:center;margin-top:18px;color:var(--mute)}
.reading small{display:block;color:var(--mute);font-size:13px;overflow-wrap:anywhere}
.bar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;width:35%;border-radius:3px;background:var(--ink);animation:slide 1.5s ease-in-out infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(290%)}}
/* evening details, edited in place */
.details{position:relative;padding:16px 20px 18px;margin:-8px 0 26px}
.details .lbl{margin:0 0 6px}
.details .field{padding:9px 12px}
.details .saved{position:absolute;top:16px;right:20px;font-size:12.5px;font-weight:600;color:var(--mute);white-space:nowrap}
.details-grid{display:grid;grid-template-columns:minmax(0,1.4fr) 170px minmax(0,1fr) 92px 92px;grid-template-areas:"name date venue jokers timer";gap:14px 12px}
.d-name{grid-area:name}.d-date{grid-area:date}.d-venue{grid-area:venue}.d-jokers{grid-area:jokers}.d-timer{grid-area:timer}
.details .hint + .hint{margin-top:4px}
.details .err-text{font-size:12.5px}
.details .hint{font-size:12.5px;margin-top:10px}
/* "Auszeichnungen": a pill per award, in its colour (player.css) when on, pale and dashed when off */
.d-awards{margin-top:16px;padding-top:14px;border-top:var(--bw) solid var(--line)}
.aw-opts{display:flex;flex-wrap:wrap;gap:6px}
.aw-opt{height:32px;padding:0 12px 0 10px;border-radius:999px;border:var(--bw) dashed var(--dash);background:var(--card);color:var(--mute);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.aw-opt .ico{width:15px;height:15px;opacity:.5}
.aw-opt:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.aw-opt[aria-pressed=true]{background:var(--c);border:var(--bw) solid var(--ink);color:var(--ink)}
.aw-opt[aria-pressed=true] .ico{opacity:1}
.aw-opt:disabled{cursor:default;opacity:.6}
.page-end{display:flex;justify-content:flex-end;gap:8px;margin-top:40px}
.history{margin-top:40px}
.history summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--mute);list-style:none;display:inline-flex;gap:6px}
.history summary::-webkit-details-marker{display:none}
.history summary:hover{color:var(--ink)}
.history ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:2px}
.history li{display:flex;gap:10px;align-items:baseline;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.history li a{font-weight:600;text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px;overflow-wrap:anywhere}
.history li .when{margin-left:auto;color:var(--mute);white-space:nowrap;font-size:12.5px}
.history li .err{display:block;color:var(--bad);font-size:12.5px}

/* ---------- rounds ---------- */
.rounds{display:flex;flex-direction:column;gap:20px}
.round{overflow:visible}
.round-h{position:relative;display:flex;align-items:flex-start;gap:12px;padding:18px 16px 14px 22px}
.round-h .grow{flex:1;min-width:0}
.round-h h2{font-size:22px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin-top:3px;overflow-wrap:anywhere}
.round-h .kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.round-notes{font-size:13.5px;color:var(--mute);margin-top:6px;white-space:pre-line;overflow-wrap:anywhere}
/* The editor needs room for question and answer side by side. */
main.wrap:has(.details){max-width:1080px}
.qs-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0 14px;padding:9px 94px 7px 62px;border-top:1px solid var(--line);background:var(--cream);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.qs-head span + span{padding-left:17px}
.qs{list-style:none;border-top:1px solid var(--line)}
.q{display:flex;align-items:flex-start;gap:4px;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q > button.open{flex:1;min-width:0;display:grid;grid-template-columns:26px minmax(0,1.2fr) minmax(0,1fr);gap:0 14px;align-items:start;padding:13px 6px 13px 22px;border-radius:0}
.q > button.open:hover{background:var(--cream)}
.q .n{font-size:13px;font-weight:700;color:var(--mute);padding-top:1px;font-variant-numeric:tabular-nums}
.q .qcol,.q .acol,.q .txt,.q .ans,.q .alt{display:block;min-width:0}
.q .acol{border-left:1.5px dashed var(--line);padding-left:16px;align-self:stretch}
.q .warns{grid-column:2 / -1}
.q .ans.list span{display:block}
.q .ans.list i{font-style:normal;color:var(--mute);font-weight:600}
.q .txt{font-weight:500;overflow-wrap:anywhere;white-space:pre-line}
.q .ans{font-size:14.5px;font-weight:700;color:var(--good);overflow-wrap:anywhere;line-height:1.45}
.q .ans.none{color:var(--bad);font-weight:600}
.q .alt{margin-top:3px;font-size:13px;color:var(--mute);font-weight:500;overflow-wrap:anywhere}
.q .facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:3px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.q .facts .chip{height:20px;font-size:11.5px;padding:0 8px;text-transform:none;letter-spacing:0}
.q .warn{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:13px;color:var(--butter-ink);font-weight:600;overflow-wrap:anywhere}
.q .side{flex:none;width:84px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding:10px 10px 10px 0}
.q .ok{flex:none}
.q .warn .ico{width:15px;height:15px;margin-top:2px}
.q.attn > button.open{box-shadow:inset 3px 0 0 var(--butter)}
.q .move{display:flex;opacity:0;transition:opacity .12s}
.q:hover .move,.q:focus-within .move{opacity:1}
@media (hover:none){.q .move{opacity:.6}}
.q .move button{width:28px;height:24px;display:grid;place-items:center;border-radius:8px;color:var(--mute)}
.q .move button:not(:disabled):hover{background:var(--soft);color:var(--ink)}
.q .move button:disabled{opacity:.25}
.q .move .ico{width:16px;height:16px}
.add-q{display:flex;align-items:center;gap:8px;width:100%;padding:12px 22px 14px;font-size:14px;font-weight:700;color:var(--mute);border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.add-q:hover{color:var(--ink);background:var(--cream)}
.add-round{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:20px;border:var(--bw) dashed var(--dash);border-radius:var(--r);font-weight:700;color:var(--mute)}
.add-round:hover{color:var(--ink);border-color:var(--ink);background:var(--cream)}

/* ---------- menu ---------- */
.menu-scrim{position:fixed;inset:0;z-index:20}
.menu{position:absolute;top:50px;right:12px;z-index:21;min-width:180px;padding:6px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:16px;box-shadow:var(--sh);animation:pop .14s ease-out}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;font-size:14px;font-weight:600}
.menu button:not(:disabled):hover{background:var(--soft)}
.menu .ico{width:16px;height:16px}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:40;background:rgba(42,39,32,.42);display:grid;place-items:center;padding:24px 16px;overflow-y:auto;animation:fade .15s ease-out}
body:has(.sheet){overflow:hidden}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.97);opacity:0}}
.panel{background:var(--cream);border:var(--bw) solid var(--ink);border-radius:26px;box-shadow:3px 3px 0 var(--ink);width:520px;max-width:100%;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;animation:pop .2s cubic-bezier(.2,1.2,.4,1)}
.panel.wide{width:620px}
.panel .mh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 4px 26px}
.panel .mh > div{min-width:0}
.panel .mh h2{font-size:24px;font-weight:700;letter-spacing:-.035em;line-height:1.15;overflow-wrap:anywhere}
.panel .mh p{font-size:13.5px;color:var(--mute);font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.panel .mb{padding:4px 26px 8px;overflow-y:auto;overscroll-behavior:contain}
.panel .mf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 22px 20px 26px}
.panel .mf .grow{flex:1}
.lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:18px 0 7px}
.lbl small{text-transform:none;letter-spacing:0;font-weight:500;font-size:12px;margin-left:4px}
.field{width:100%;background:var(--card);border:var(--bw) solid var(--ink);border-radius:14px;padding:11px 14px;font-size:15px;font-weight:500;outline:none;transition:box-shadow .12s}
.field:focus{box-shadow:var(--sh)}
.field::placeholder{color:#958C78}
textarea.field{resize:vertical;min-height:84px;line-height:1.45}
select.field{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232A2720' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.field.invalid{border-color:var(--bad)}
.field.narrow{width:130px}
.hint{color:var(--mute);font-size:13px;margin-top:6px}
.hint.first{margin:-2px 0 10px}
.rows{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.rows li{display:flex;align-items:center;gap:8px}
.rows .n{width:22px;flex:none;text-align:right;font-weight:700;color:var(--mute);font-variant-numeric:tabular-nums}
.rows .field{flex:1;min-width:0;padding:9px 12px}
.rows .pick{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--card);font-size:13px;font-weight:800}
.rows .pick:hover{background:var(--soft)}
.rows li.correct .pick{background:var(--good);border-color:var(--good);color:#fff}
.rows li.correct .field{border-color:var(--good)}
.rows .pick .ico{width:15px;height:15px}
.rows .arrow{flex:none;color:var(--mute);font-weight:700}
.row-tools{display:flex;flex:none}
.row-tools button{width:28px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--mute)}
.row-tools button:not(:disabled):hover{background:var(--soft);color:var(--ink)}
.row-tools button:disabled{opacity:.25}
.row-tools .ico{width:16px;height:16px}
.range{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--mute)}
.range .field{flex:1;min-width:0}
.err-text{color:var(--bad);font-size:13px;font-weight:600;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 130px;gap:12px}
.two .lbl{margin-top:18px}
.two.date{grid-template-columns:1fr 170px}
.tag{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 6px 0 12px;border-radius:999px;background:var(--card);border:var(--bw) solid var(--ink);font-size:13.5px;font-weight:600;max-width:100%}
.tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag button{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.tag button:hover{background:var(--soft);color:var(--ink)}
.tag .ico{width:13px;height:13px}
.tags-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ai-note{display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 10px 9px 13px;border-radius:12px;background:var(--butter-t);font-size:13.5px;font-weight:600}
.ai-note .grow{flex:1}
.checks{list-style:none;display:flex;flex-direction:column;gap:6px}
.checks li{display:flex;align-items:flex-start;gap:10px;padding:9px 10px 9px 13px;border-radius:12px;background:var(--butter-t);font-size:13.5px;font-weight:600}
.checks li span{flex:1;overflow-wrap:anywhere}
.source{font-size:12.5px;color:var(--mute);margin-top:16px}
.choice{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.choice button{display:block;width:100%;padding:14px 16px;border-radius:16px;background:var(--card);border:var(--bw) solid var(--ink);text-align:left;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.choice button:hover{transform:translate(-1px,-1px);box-shadow:var(--sh)}}
.choice button.danger b{color:var(--bad)}
.choice b{display:block;font-weight:700}
.choice small{display:block;color:var(--mute);font-size:13px;margin-top:2px}

/* ---------- login ---------- */
.login{min-height:calc(100dvh - 68px);display:grid;place-items:center;padding:24px 0 80px}
.login .card{width:100%;max-width:380px;padding:30px 28px 28px}
.login h1{font-size:30px;font-weight:700;letter-spacing:-.04em}
.login p{color:var(--mute);margin-top:4px}
.login form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.login .btn{height:46px}
.pw{position:relative}
.pw .field{padding-right:64px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:700;color:var(--mute);padding:6px 8px;border-radius:8px}
.pw button:hover{color:var(--ink);background:var(--soft)}
.login .err-text{margin-top:-4px}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:11px 10px 11px 16px;border-radius:16px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:2px 2px 0 rgba(42,39,32,.25);animation:rise .22s ease-out;max-width:520px;white-space:pre-line}
.toast.error{background:var(--bad)}
.toast span{flex:1;padding-top:1px}
.toast button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;opacity:.7;flex:none}
.toast button:hover{opacity:1;background:rgba(255,255,255,.15)}
.toast button.act{width:auto;height:auto;border-radius:999px;padding:3px 12px;margin-top:-2px;background:#fff;color:var(--ink);font-weight:700;opacity:1}
.toast button.act:hover{background:rgba(255,255,255,.85)}
.toast .ico{width:14px;height:14px}
@keyframes rise{from{transform:translateY(8px);opacity:0}}

/* ---------- home / boot / errors ---------- */
.hero{text-align:center;padding:12vh 0 40px}
.hero .big{font-size:56px;line-height:1}
.hero h1{font-size:44px;font-weight:700;letter-spacing:-.05em;margin-top:14px}
.hero h1.wordmark{font-size:38px;font-weight:800;gap:14px;margin-top:0}
.hero h1.wordmark .brand-tile{box-shadow:3px 3px 0 var(--ink)}
.hero p{color:var(--mute);max-width:420px;margin:10px auto 26px;font-size:16px}
.boot{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;align-content:center;gap:16px;transition:opacity .2s .3s}
.boot.done{opacity:0;pointer-events:none}
.boot .wordmark{font-size:28px}
.boot-progress{display:flex;align-items:center;gap:10px}
.boot .bar{width:140px;margin:0}
.boot .bar i{width:0;animation:none;transition:width .1s linear}
.boot.done .bar i{transition:width .3s ease-out}
.boot-pct{width:4.5ch;font-size:13px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
.boot-failed{display:none;text-align:center;max-width:280px}
.boot-failed p{color:var(--mute);font-size:14px;margin-bottom:14px}
.boot.failed .boot-progress{display:none}
.boot.failed .boot-failed{display:block}
.boot.failed ~ #blazor-error-ui{display:none !important} /* the boot screen says it (Blazor shows the bar per error) */
#blazor-error-ui{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:100;max-width:520px;margin:0 auto;padding:12px 16px;border-radius:16px;background:var(--bad);color:#fff;font-weight:600}
#blazor-error-ui .reload{text-decoration:underline;margin-left:8px}
#blazor-error-ui .dismiss{float:right;color:inherit}

/* ---------- live page (Pages/Admin/EveningLive.razor, Components/Live) ----------
   One scale for the page: spacing 4/8/12/16/24/32 · type 12/14/16/22/56 · radius 8/12/16/pill · buttons 40 and 32 ·
   list rows 56. Outline + shadow only for the one thing to do next (the lifted row, the timer, the first card). */
.lv{--f1:12px;--f2:14px;--f3:16px;--f4:22px;--f5:56px;--r1:8px;--r2:12px;--r3:16px;--side:272px;
  --lv-line:rgba(42,39,32,.12);--hover:rgba(255,255,255,.6);min-height:100dvh;
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);align-items:start}
.lv-wait{padding-top:24px}
.chip.bad{background:var(--bad-t);color:var(--bad)}
.notice.sky{background:var(--sky-t);color:var(--sky-ink)}
.notice.mint{background:var(--good-t);color:var(--good)}
.sheet .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sheet .row .field{flex:1;min-width:0}
.countdown{font-variant-numeric:tabular-nums}
.countdown.over{color:var(--bad)}
.countdown.paused{opacity:.65}
.lv-m{color:var(--mute);font-weight:600;font-size:var(--f2)}
.lv-s{font-size:var(--f1)}
.lv-sp{flex:1}
.lv-ok{color:var(--good);font-weight:700}
.lv-top{display:none}

/* the sidebar: evening, rounds, sections – on the phone the first screen */
.lv-ov{position:sticky;top:0;height:100dvh;overflow-y:auto;padding:8px 12px 32px;border-right:1px solid var(--lv-line)}
.lv-ovtop{display:flex;align-items:center;gap:4px;height:48px;margin:0 -4px}
.lv-ovh{margin:8px 8px 0;font-size:var(--f4);font-weight:800;letter-spacing:-.04em;line-height:1.15;overflow-wrap:anywhere}
.lv-ov>.lv-m{margin:2px 8px 0}
.lv-ovb{display:none}
.lv-ovk{display:block;margin:24px 8px 4px}
.lv-ov .lv-list{gap:2px}
.lv-ov .lv-row{min-height:48px;gap:10px;padding:6px 8px;border:var(--bw) solid transparent}
.lv-ov .lv-tx b{font-size:var(--f2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:860px){.lv-ov .lv-go{display:none}}
@media (min-width:860px) and (max-width:1099px){.lv{--side:232px}}
.lv-ov .lv-row.on{background:var(--card);border-color:var(--ink);box-shadow:var(--sh)}
/* "Quiz beenden" at the bottom of "Abend": its icon where the other rows have their marker, red once armed */
.lv-ov .lv-end{font-size:var(--f2);font-weight:700}
.lv-end>.ico{width:14px;height:14px;margin:0 5px;color:var(--mute)}
.lv-end[data-armed],.lv-end[data-armed]>.ico{color:var(--bad)}

/* the phone's bar over a round: back, evening, connection, rounds */
.lv-top{position:sticky;top:0;z-index:20;align-items:center;gap:8px;padding:0 16px;background:var(--bg)}
.lv-ib{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;flex:none;color:var(--ink)}
.lv-ib:hover{background:var(--hover)}
.lv-ib.on{background:var(--ink);color:#fff}
.lv-ib.sm{width:32px;height:32px}
.lv-ib.sm .ico{width:16px;height:16px}
.lv-evn{font-size:var(--f3);font-weight:800;letter-spacing:-.03em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.lv-dot{width:24px;height:24px;display:grid;place-items:center;flex:none}
.lv-dot i{width:8px;height:8px;border-radius:50%;background:var(--dash)}
.lv-dot.on i{background:var(--good);box-shadow:0 0 0 3px var(--good-t)}
.lv-conn{flex:none}
.lv-strip{flex:1;min-width:0;display:flex;align-items:center;gap:4px;height:48px;padding:0 12px;margin:0 4px;overflow-x:auto;scrollbar-width:none;border-left:1px solid var(--lv-line);border-right:1px solid var(--lv-line)}
.lv-strip::-webkit-scrollbar{display:none}
.lv-rp{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 6px;border-radius:999px;font-weight:700;font-size:var(--f2);white-space:nowrap}
.lv-rp:hover{background:var(--hover)}
.lv-rn{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.lv-rp.todo .lv-rn{color:var(--mute)}
.lv-rt{font-size:var(--f1);font-weight:800;color:var(--butter-ink)}
.lv-rp.on{background:var(--ink);color:#fff}
.lv-rp.on .lv-rn{color:#fff}
.lv-rp.on .lv-rt{color:var(--butter)}
.lv-rp.on .lv-mk.todo{border-color:rgba(255,255,255,.5);color:rgba(255,255,255,.85)}
.lv-rp.on .lv-mk.done{border-color:#fff}
.lv-tools{display:flex;gap:4px;flex:none}

/* content */
.lv-wrap{display:block;max-width:1100px;margin:0 auto;padding:16px 32px 96px}
.lv-line{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 4px 4px 12px;border-radius:var(--r2);background:var(--butter-t);color:var(--butter-ink);font-weight:700;font-size:var(--f2);margin-bottom:16px}
.lv-line>span{flex:1;min-width:0;overflow-wrap:anywhere}
.lv-line:not(:has(.btn)){padding-right:12px}
.lv-line .ico{width:16px;height:16px}
.lv-line.bad{background:var(--bad-t);color:var(--bad)}
.lv-line.ok{background:var(--good-t);color:var(--good)}
.lv-line.sky{background:var(--sky-t);color:var(--sky-ink)}
/* the live page's bar at the bottom (Components/Live/LiveStatusBar.razor): the player's bar as it is (player.css,
   "status bar"); its .player wrapper takes no room. On the desktop it sits under the round, not the sidebar; the
   toasts stay clear of it. */
.lv-pbar{display:contents}
.lv-pbar .p-bar-text:disabled{opacity:1}
/* other admin devices: a pill at the end of the island (above the text's tap area), the list in a sheet */
.lv-pbar .lv-admins{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.lv-pbar .lv-admins .ico{width:14px;height:14px}
.lv-admin-list{list-style:none;display:flex;flex-direction:column}
.lv-admin-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 0;border-top:1px solid var(--line)}
.lv-admin-list li:first-child{border-top:0}
@media (min-width:860px){.lv .lv-pbar .p-bar{left:var(--side)}}
@media (min-width:601px){:root:has(.lv-pbar) .toasts{bottom:88px}}
.lv-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:48px 16px;color:var(--mute);font-weight:600}
.lv-empty b{color:var(--ink);font-size:var(--f3)}

/* the status sign: dashed = not yet, white = begun, yellow = now, green tick = done */
.lv-mk{width:24px;height:24px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-size:var(--f1);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;border:var(--bw) dashed var(--dash);color:var(--mute);background:transparent}
.lv-mk.part{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--card)}
.lv-mk.cur{border-style:solid;border-color:var(--ink);color:var(--ink);background:var(--butter)}
.lv-mk.done{border-style:solid;border-color:var(--good);background:var(--good);color:#fff}
.lv-mk.done .ico{width:13px;height:13px;stroke-width:3}
.lv-mk.num{border:0;background:rgba(42,39,32,.07);color:var(--mute)}
.lv-mk.num .ico{width:14px;height:14px}
.lv-mk.lg{width:32px;height:32px}
.lv-mk.lg .ico{width:16px;height:16px}
.lv-mk.live{animation:lv-pulse 1.6s infinite}
@keyframes lv-pulse{0%{box-shadow:0 0 0 0 rgba(214,170,40,.75)}70%{box-shadow:0 0 0 6px rgba(214,170,40,0)}100%{box-shadow:0 0 0 0 rgba(214,170,40,0)}}
.lv-cnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--butter);color:var(--ink);font-size:var(--f1);font-weight:800;line-height:1;flex:none}
.lv-av{width:32px;height:32px;border-radius:50%;border:var(--bw) solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:var(--f2);flex:none;color:var(--ink)}
.lv-av.sm{width:24px;height:24px;font-size:var(--f1)}

/* the steps: the only control row */
.lv-steps{position:sticky;top:0;z-index:10;display:flex;align-items:stretch;gap:8px;margin:0 0 24px;background:var(--bg);border-bottom:1px solid var(--lv-line)}
.lv-st{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:20px 4px;text-align:center}
.lv-sl{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.lv-sl b{position:relative;display:flex;align-items:center;gap:6px;font-size:var(--f3);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
/* the selected step: a short line under its name (on the bar's bottom line) */
.lv-sl b::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-21px;height:3px;border-radius:3px;background:transparent}
.lv-st:hover .lv-sl b::after{background:var(--lv-line)}
.lv-st[aria-selected=true] .lv-sl b::after{background:var(--ink)}
.lv-st.todo .lv-sl b{color:var(--mute)}
.lv-sd{width:18px;height:18px;border-radius:50%;flex:none;display:inline-grid;place-items:center;background:var(--good);color:#fff}
.lv-sd .ico{width:11px;height:11px;stroke-width:3.5}
.lv-st[aria-selected=true] .lv-sl b{color:var(--ink)}

/* lists */
.lv-hl{display:flex;align-items:center;gap:8px;min-height:40px;margin-bottom:8px;flex-wrap:wrap}
.lv-h{font-size:var(--f3);font-weight:800;letter-spacing:-.02em}
.lv-list{list-style:none;display:flex;flex-direction:column}
.lv-list>li{border-top:1px solid var(--lv-line)}
.lv-list>li:first-child,.lv-list>li.next,.lv-list>li.next+li,.lv-list>li.open,.lv-list>li.open+li{border-top-color:transparent}
.lv-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;width:100%;text-align:left;border-radius:var(--r2)}
a.lv-row:hover,button.lv-row:hover{background:var(--hover)}
.lv-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;overflow-wrap:anywhere}
.lv-tx b{font-size:var(--f3);font-weight:600}
.lv-tx small{font-size:var(--f1);color:var(--mute);font-weight:600}
.lv-tx small.lv-ok{color:var(--good)}
.lv-tx b .chip{margin-left:6px;vertical-align:1px}
.lv-so{width:200px;flex:none;font-size:var(--f2);color:var(--mute);font-weight:600;overflow-wrap:anywhere}
.lv-row.shown .lv-so{color:var(--good);font-weight:700}
/* Done ones (released questions, shown solutions) fold to two lines: the open ones are what matters. */
.lv-row:has(>.lv-mk.done) .lv-tx>b{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* "Auflösen", map questions: the ranking to read out (place, team, km, points), closest first, "kein Pin" last */
/* narrow: a long team name wraps instead of being cut; km and points stay on its first line (baseline) */
@media (max-width:859px){
}
.lv-act{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:96px}
.lv-go{color:var(--dash)}
li.lv-row.next{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r3);box-shadow:var(--sh);margin:4px 0}
@media (hover:hover) and (min-width:860px){
  .lv-act .btn.ghost{opacity:0}
  .lv-row:hover .lv-act .btn.ghost,.lv-act .btn.ghost:focus-visible{opacity:1}
}
/* step 1 "Fragen": a table without frame or column lines across the full width; all buttons the same size */
/* the tables of "Fragen" and "Antworten": no card, column headers, faint lines between rows */
.lv-wrap:has(.lv-table){max-width:none}
.lv-th{min-height:48px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lv-th .btn,.lv-th .lv-shown{text-transform:none;letter-spacing:0}
.lv-th .lv-shown{font-weight:600}
.lv-th .btn:not(.ink){color:var(--ink)}
.lv-table :is(.lv-qt,.lv-at,.lv-tt){border-top:var(--bw) solid rgba(42,39,32,.3)}
.lv-table :is(.lv-qt,.lv-at,.lv-tt)>li+li{border-top:1px solid var(--line)}
.lv-qh,.lv-qt>.lv-row{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(200px,30%) 128px;column-gap:20px;align-items:center;padding:8px 0;border-radius:0}
.lv-qh>:first-child,.lv-qt>.lv-row>.lv-mk{justify-self:center}
.lv-qt>.lv-row,.lv-at>li>.lv-row{min-height:60px}
.lv-qt .lv-so{width:auto}
.lv-qh .lv-act,.lv-qt .lv-act{min-width:0}
.lv-qh .lv-act .btn,.lv-qt .lv-act .btn{width:128px}
.lv-qh .btn[data-armed],.lv-qt .btn[data-armed]{background:var(--bad);border-color:var(--bad);color:#fff}
.lv-qt>.lv-row.rel .lv-tx>b{color:var(--mute);font-weight:500}
.lv-qt>li.lv-row.next{background:var(--butter-t);border:0;border-radius:0;box-shadow:none;margin:0}
.lv-qt>li.lv-row.next .lv-tx>b{font-weight:700}
.lv-qt>li.lv-row.next .lv-so{color:var(--good);font-weight:800}
/* released questions: how long each stood as the newest (pacing); the newest one counts along */
.lv-tx small.lv-qtime{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-variant-numeric:tabular-nums}
.lv-qtime .ico{width:12px;height:12px}
.lv-tx small.lv-qtime.live{color:var(--ink);font-weight:700}
.lv-so small{display:block;margin-top:2px;font-size:var(--f1);color:var(--mute);font-weight:600}
/* Under a question what the phones show of it (PlayQuestionContent; "Auflösen": a map question's result, PlayMapSolution):
   the player's own styles in a .player wrapper, the picture as a small thumbnail that expands in place. Such rows align on top. */
.player.lv-pq{min-height:0;max-width:560px;font-size:var(--f3)}
.lv-qt>.lv-row:has(.lv-pq){align-items:start}
.lv-qt>.lv-row:has(.lv-pq)>:not(.lv-tx){margin-top:4px}
.lv-pq .p-qimgl{position:relative;display:block;width:fit-content;margin-top:8px;padding:0;border:0;background:none;cursor:zoom-in}
.lv-pq .p-qimgl.open{cursor:zoom-out}
.lv-pq .p-qimg{max-width:72px;max-height:48px;margin-top:0;border-radius:8px}
.lv-pq .p-qimgl.open .p-qimg{max-width:100%;max-height:420px;border-radius:12px}
.lv-pq .p-qimgx{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:var(--bw) solid var(--ink);background:var(--card)}
.lv-pq .p-qimgx .ico{width:11px;height:11px}
.lv-pq .p-qimgl:hover .p-qimgx{background:var(--soft)}
.lv-pq :is(.p-opts,.p-match) li{font-size:var(--f3)}
/* "Auflösen": a fifth column, how the teams did – the icons of "Bewerten" with the number of teams under each (PointDots) */
.lv-sol :is(.lv-qh,.lv-qt>.lv-row){grid-template-columns:48px minmax(0,1fr) minmax(180px,26%) 128px 128px}
.lv-pd{display:grid;grid-template-columns:repeat(auto-fill,26px);gap:6px}
.lv-pd>span{display:flex;flex-direction:column;align-items:center;gap:2px}
.lv-pd i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:13px;font-weight:800}
.lv-pd i.l1{font-size:11.5px;letter-spacing:-.02em}
.lv-pd i.l2{font-size:9.5px;letter-spacing:-.03em}
.lv-pd .v0 i{background:var(--bad-t);color:var(--bad)}
.lv-pd .vp i{background:var(--butter-t);color:var(--butter-ink)}
.lv-pd .v1 i{background:var(--good-t);color:var(--good)}
.lv-pd b{font-size:var(--f1);font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.lv-pd .zero{opacity:.35}
.lv-opts{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.lv-opt{height:32px;padding:0 12px;border-radius:999px;border:var(--bw) solid var(--lv-line);background:var(--card);font-weight:700;font-size:var(--f2);color:var(--mute);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.lv-opt:hover{color:var(--ink);border-color:var(--ink)}
.lv-opt[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.lv-opt.dim{color:var(--dash)}
.lv-opt .ico{width:14px;height:14px}
.lv-opt[aria-pressed=true] .lv-ok{color:var(--good-t)}
.field.lv-in{width:84px;height:32px;padding:0 8px;border-radius:var(--r2);text-align:center;font-weight:700;font-size:var(--f2)}
.lv-block{width:100%}
.lv-bar{height:6px;border-radius:3px;background:var(--lv-line);overflow:hidden;margin-bottom:8px}
.lv-bar i{display:block;height:100%;border-radius:3px;background:var(--ink);transition:width .4s}
.lv-bar.good i{background:var(--good)}

/* step 2: the timer as a bar on top, below the teams as a table (Team · one dot per question · Abgegeben) */
.lv-tm{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"time ctl . act";align-items:center;column-gap:20px;
  min-height:68px;padding:12px 14px 12px 22px;border-radius:var(--r3);background:var(--card);border:1px solid var(--line)}
.lv-tmt{grid-area:time;font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;min-width:3.1ch}
.lv-tmt.muted{color:var(--mute);opacity:.55}
.lv-tmt.paused{animation:lv-blink 1.6s ease-in-out infinite}
@keyframes lv-blink{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.lv-tmt.paused{animation:none;opacity:.6}}
.lv-tmt.lv-tmdone{display:flex;align-items:center;gap:8px;font-size:var(--f3);font-weight:700;letter-spacing:0;color:var(--good)}
.lv-tmc{grid-area:ctl;display:flex;align-items:center;gap:2px;min-width:0}
.lv-tmc.lv-opts{gap:6px}
.lv-tma{grid-area:act;justify-self:end}
.lv-tmv{width:1px;height:22px;margin:0 6px;background:var(--line);flex:none}
.lv-gb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:38px;padding:0 12px;border-radius:999px;font-weight:700;font-size:15px;white-space:nowrap}
.lv-gb:not(:disabled):hover{background:rgba(42,39,32,.06)}
.lv-gb:disabled{opacity:.35}
.lv-gb .ico{width:17px;height:17px}
.lv-gb.mute{color:var(--mute);font-weight:600}
.lv-tmc.lv-tmset{gap:8px;padding-left:4px}
.field.lv-mmss{width:52px;font-variant-numeric:tabular-nums}
.lv-tm~.lv-hand{margin-top:24px}
.lv-hand{overflow-x:auto}
.lv-hand>.lv-byhand{padding:16px 0}
.lv-ah,.lv-at>li>.lv-row{display:grid;grid-template-columns:220px repeat(var(--qs),28px) 1fr 160px;column-gap:6px;align-items:center;padding:8px 0;border-radius:0}
.lv-ah .lv-aq.off{color:var(--dash)}
.lv-aq{display:grid;place-items:center;font-variant-numeric:tabular-nums;letter-spacing:0}
.lv-an{display:none}
.lv-at{list-style:none}
.lv-at .lv-tx{flex-direction:row;align-items:center}
.lv-at .lv-tx b{font-size:var(--f3);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-qd{width:22px;height:22px;border-radius:50%;background:rgba(42,39,32,.1)}
.lv-qd.on{background:var(--good-t);border:var(--bw) solid var(--good)}
.lv-qd.off{background:none;border:var(--bw) dashed var(--line)}
.lv-ad{grid-column:-2;display:flex;align-items:center;gap:8px;padding-left:24px;font-size:var(--f2);font-weight:700;color:var(--mute);white-space:nowrap}
.lv-ah .lv-ad{font-size:13px}
.lv-ad .lv-mk{width:20px;height:20px}
.lv-row.got .lv-ad{color:var(--good)}
.lv-row.t.pz{opacity:.5}

/* step 3: checking, four views behind a switch (Übersicht · Pro Frage · Pro Team · Zu prüfen), plain tables, one line per row */
.lv-tabs{display:flex;width:fit-content;max-width:100%;margin:0 auto 24px;gap:2px;padding:4px;border-radius:999px;background:rgba(42,39,32,.06);overflow-x:auto;scrollbar-width:none}
.lv-tab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:var(--bw) solid transparent;font-weight:700;white-space:nowrap;color:var(--mute)}
.lv-tab:hover{color:var(--ink)}
.lv-tab[aria-selected=true]{background:var(--card);border-color:var(--ink);box-shadow:var(--sh);color:var(--ink)}
.lv-cnt.bad{background:var(--bad);color:#fff}
.lv-pick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.lv-pick .lv-opt{position:relative;height:36px;min-width:36px;padding:0 14px;justify-content:center;font-size:15px;color:var(--ink);border-color:var(--line)}
.lv-pick .lv-opt:hover{border-color:var(--ink)}
.lv-pick .lv-opt[aria-pressed=true]{color:#fff;border-color:var(--ink)}
.lv-pick .lv-opt.dim{color:var(--mute);font-weight:600}
.lv-pip{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 2px var(--bg)}
.lv-pip.bad{background:var(--bad)}
.lv-chd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;margin-bottom:12px}
.lv-chd h3{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.lv-chd>.lv-csol{font-size:var(--f3);font-weight:800}
.lv-chd .btn{align-self:center}
.lv-ctb{list-style:none;border-top:var(--bw) solid rgba(42,39,32,.3)}
.lv-cth,.lv-ctr{display:grid;align-items:center;column-gap:20px;padding-inline:12px}
.lv-cth{align-items:end;min-height:40px;padding-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lv-ctr{min-height:56px;padding-block:6px}
.lv-ctr+.lv-ctr{border-top:1px solid var(--line)}
.lv-ctr.open{background:var(--butter-t)}
.lv-ctr.open+.lv-ctr.open{border-top-color:rgba(107,83,16,.15)}
.lv-ctr.pz{opacity:.55}
.lv-cc{min-width:0;overflow-wrap:anywhere}
.lv-clk{font-weight:700;text-align:left}
.lv-clk:hover{text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px}
.lv-ca{font-size:var(--f3);font-weight:700}
.lv-ca.x{color:var(--mute);font-weight:500}
.lv-csol{color:var(--good);font-weight:700}
.lv-cn{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(42,39,32,.07);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.lv-cn:hover{background:rgba(42,39,32,.14)}
/* the AI's note: a quiet column, two lines at most */
.lv-cki{white-space:normal;font-size:var(--f2);line-height:1.3;color:var(--mute);font-weight:500}
.lv-cki>span{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv-ctr.open .lv-cki{color:var(--ink)}
.v-ov :is(.lv-cth,.lv-ctr){grid-template-columns:200px auto minmax(0,1fr) 150px}
.v-ov :is(.lv-cth,.lv-ctr)>:last-child{justify-self:end}
/* the points column fits four numbers (0 · ½ · a pill · full) and "⋯": every row is its own grid, so it can't be auto */
.lv-ct{--jd:216px}
.v-q :is(.lv-cth,.lv-ctr){grid-template-columns:200px minmax(0,1fr) minmax(0,1.2fr) var(--jd)}
.v-t :is(.lv-cth,.lv-ctr){grid-template-columns:28px minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,1.2fr) var(--jd)}
.v-o :is(.lv-cth,.lv-ctr){grid-template-columns:28px 160px minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) var(--jd)}
/* Übersicht: a dot per question */
.lv-cdots{display:flex;gap:6px}
.lv-cdots>i{width:16px;height:16px;border-radius:50%;flex:none;background:rgba(42,39,32,.1)}
.lv-cqn{width:16px;flex:none;text-align:center;font-size:11px;letter-spacing:0}
.lv-cqn:hover{color:var(--ink)}
.lv-cdots>i.ok{background:var(--good)}
.lv-cdots>i.no{background:none;border:var(--bw) solid var(--good)}
.lv-cdots>i.half{background:linear-gradient(90deg,var(--good) 50%,transparent 50%);border:var(--bw) solid var(--good)}
.lv-cdots>i.chk{background:var(--butter);box-shadow:0 0 0 1.5px var(--butter-ink) inset}
.lv-cdots>i.wait{background:var(--sky-t);animation:lv-dot 1.2s ease-in-out infinite}
.lv-cdots>i.typ{background:rgba(42,39,32,.18)}
.lv-cdots>i.off{background:none;border:var(--bw) dashed var(--dash)}
@keyframes lv-dot{50%{background:#5B9BC4}}
.lv-cst{display:inline-flex;align-items:center;gap:8px;font-size:var(--f2);font-weight:600;white-space:nowrap;color:var(--mute)}
.lv-cst.done{color:var(--good);font-weight:700}
.lv-cst.check{color:var(--butter-ink);font-weight:700}
.lv-cst.read{color:var(--sky-ink);font-weight:700}
.lv-cst.fail{color:var(--bad);font-weight:700}
.lv-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--sky-t);border-top-color:#5B9BC4;animation:lv-spin .9s linear infinite;flex:none}
@keyframes lv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lv-cdots>i.wait,.lv-spin{animation:none}}
.lv-alert{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;background:var(--bad);color:#fff;font-size:12px;font-weight:800;flex:none}
.lv-cact{justify-self:end}
/* 0 · ½ · 1 as numbers, coloured by value (v0 red, vp below 1 yellow, v1 green): yours filled, the AI's (sure) a soft
   tint, its suggestion when unsure a dashed ring; points no button fits in a pill (.lv-jv) the same way */
.lv-jd{position:relative;display:flex;align-items:center;gap:6px;justify-self:end}
.lv-jb,.lv-jv{min-width:36px;height:36px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:var(--bw) solid var(--line);background:var(--card);font-weight:800;font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums}
.lv-jb:hover{border-color:var(--ink);color:var(--ink)}
.lv-jb .ico{width:16px;height:16px}
:is(.lv-jb,.lv-jv).ai{border-color:transparent}
:is(.lv-jb,.lv-jv).ai.v0{background:var(--bad-t);color:var(--bad)}
:is(.lv-jb,.lv-jv).ai.vp{background:var(--butter-t);color:var(--butter-ink)}
:is(.lv-jb,.lv-jv).ai.v1{background:var(--good-t);color:var(--good)}
:is(.lv-jb,.lv-jv).guess{border:2px dashed}
:is(.lv-jb,.lv-jv).guess.v0{border-color:var(--bad);color:var(--bad)}
:is(.lv-jb,.lv-jv).guess.vp{border-color:var(--butter-ink);color:var(--butter-ink)}
:is(.lv-jb,.lv-jv).guess.v1{border-color:var(--good);color:var(--good)}
:is(.lv-jb,.lv-jv).me.v0{background:var(--bad);border-color:var(--bad);color:#fff}
:is(.lv-jb,.lv-jv).me.vp{background:var(--butter);border-color:var(--butter-ink);color:var(--ink)}
:is(.lv-jb,.lv-jv).me.v1{background:var(--good);border-color:var(--good);color:#fff}
.lv-jb.more{min-width:24px;padding:0;border-color:transparent;background:transparent}
.lv-jb.more .ico{stroke-width:2}
.lv-jwait{justify-self:end;color:var(--mute);font-weight:600;font-size:var(--f2)}
.lv-jmenu{top:calc(100% + 4px);right:0}
.lv-custom{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lv-custom .field{width:96px;height:32px;padding:0 10px;font-size:var(--f2)}
.lv-byhand{margin:4px 0 8px}

/* step 4: solutions, the round's end */
.lv-fin{display:grid;gap:16px;padding:24px;background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r3);box-shadow:var(--sh)}
.lv-dh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lv-dt b{display:block;font-size:var(--f4);letter-spacing:-.03em;line-height:1.15}

/* step 5 "Punktestand" (RoundDone): one centred column. Under the round's end the player cards (player.css) – Rangliste,
   Der Abend, Auszeichnungen – without their cards, in the admin's colours, and their tables like the other steps': an
   uppercase header, a stronger line under it, faint lines between rows. */
.lv-done{max-width:760px;margin:0 auto}
.lv .player.lv-play{--card:var(--bg);min-height:0;font-size:inherit;display:grid;gap:40px;margin-top:32px}
.lv .player.lv-play .card{padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none}
.lv .player.lv-play h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lv .player.lv-play .p-esub{margin:2px 0 0;font-size:var(--f2);color:var(--mute)}
.lv .player.lv-play :is(.p-ranks,.p-esec,.p-aws){border-top:var(--bw) solid rgba(42,39,32,.3)}
/* the Rangliste as a table: Platz · Team · Plätze · Runde · Punkte, every row on the header's columns */
.lv .player.lv-play :is(.p-rhead,.p-ranks li){display:grid;grid-template-columns:56px minmax(0,1fr) 88px 88px 88px;column-gap:12px;align-items:center}
.lv .player.lv-play :is(.p-rhead,.p-ranks li)>:is(.p-dl,.p-rp,.p-pt){min-width:0;text-align:right}
.lv .player.lv-play .p-ranks{margin-top:0}
.lv .player.lv-play .p-rhead{min-height:48px;margin-top:4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.lv .player.lv-play .p-rhead>*{font:inherit;color:inherit}
.lv .player.lv-play .p-ranks li{min-height:56px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--f3);font-weight:700}
.lv .player.lv-play .p-ranks li:first-child{border-top:0}
.lv .player.lv-play .p-rk{width:auto;text-align:center;color:var(--mute)}
.lv .player.lv-play .p-ranks :is(.p-dl,.p-rp){font-size:var(--f2)}
/* the "Endstand": a column per round (and the bonus) instead of the place change and this round's points */
.lv .player.lv-play .p-board.cols :is(.p-rhead,.p-ranks li){grid-template-columns:56px minmax(0,1fr) repeat(var(--cols),minmax(36px,64px)) 88px}
.lv .player.lv-play .p-board.cols :is(.p-rhead,.p-ranks li)>.p-rc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.lv .player.lv-play .p-board.cols .p-ranks .p-rc{font-size:var(--f2);font-weight:600;color:var(--mute2)}
.lv .player.lv-play .p-dl:empty::before{content:"–";color:var(--dash)}
.lv .player.lv-play .p-esec{margin-top:12px;padding-top:16px}
.lv .player.lv-play .p-esec>.p-lbl{font-size:12px;letter-spacing:.06em}
.lv .player.lv-play .p-chart{max-width:440px;margin:0 auto}
.lv .player.lv-play .p-ltab-w{margin:16px 0 0;padding:0}
.lv .player.lv-play .p-ltab{--tw:220px;font-size:var(--f2)}
.lv .player.lv-play .p-ltab thead th{padding-bottom:8px;font-size:12px;border-bottom:var(--bw) solid rgba(42,39,32,.3)}
.lv .player.lv-play .p-ltab :is(tbody th,td){height:44px}
.lv .player.lv-play .p-ltab tbody tr:first-child>*{border-top:0}
.lv .player.lv-play .p-ltab :is(tfoot th,tfoot td){border-top:var(--bw) solid rgba(42,39,32,.3)}
.lv .player.lv-play .p-aws{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:12px 0 0;padding-top:16px}
.lv .player.lv-play .p-aw:last-child:nth-child(odd){grid-column:auto}

/* "Das Finale" (FinalePanel; design_playground/finale/index.html, "the finale"): one narrow column – the heading, the step
   as the phones show it (FinaleDeck in a tall box on the players' warm paper), "←" next to the big button, and what the
   next press brings. On a short screen the preview gets smaller, so the buttons stay in view. */
.lv-fn{width:min(100%,360px);margin:0 auto;display:flex;flex-direction:column;gap:14px}
.lv-fn-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lv-fn-h h1{font-size:28px;font-weight:800;letter-spacing:-.045em;line-height:1}
.lv-fn-h .n{font-size:13px;font-weight:800;color:var(--mute);font-variant-numeric:tabular-nums}
.lv-fn .lv-line{margin:0}
.lv-pv{--bg:#F6EDDC;--cream:#FFF8EC;--soft:#FBF1DF;--line:#EDE4D3;--dash:#CDBF9F;
  position:relative;align-self:center;width:min(100%,max(200px,calc((100dvh - 340px) / 2)));aspect-ratio:9/18;overflow:hidden;isolation:isolate;
  background:var(--bg);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:3px 3px 0 var(--ink)}
/* before and after the show: the brand on top, a quiet line in the middle */
.lv-pvph{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px 16px}
.lv-pvph .wordmark{font-size:16px}
.lv-pvt{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:0 6px 20%;text-align:center}
.lv-pvt b{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.lv-pvt span{font-size:14px;font-weight:600;color:var(--mute2)}
.lv-fn-go{display:grid;grid-template-columns:auto 1fr;gap:8px}
.lv-fn .btn.big{height:56px;padding:0 20px;font-size:17px}
.lv-fn .btn.big .ico{width:20px;height:20px}
/* "Als Nächstes": the swatch in the award's colour (player.css, k-*) or the medal's */
.lv-nx{display:flex;gap:12px;align-items:flex-start;padding:12px 14px}
.lv-nx .sw{position:static;flex:none;width:14px;height:14px;margin-top:3px;border-radius:5px;border:1.5px solid var(--ink);background:var(--c,var(--soft))}
.lv-nx .sw.m1{--c:#F5D774}.lv-nx .sw.m2{--c:#DCE3EA}.lv-nx .sw.m3{--c:#F2BD92}.lv-nx .sw.done{--c:var(--good-t)}
.lv-nx .sw.off{border-style:dashed;border-color:var(--dash);background:none}
.lv-nx .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.lv-nx .tx>span{font-size:13px;font-weight:600;color:var(--mute2)}
.lv-nx .kicker{margin:0}
.lv-nx b{font-size:17px;font-weight:800;letter-spacing:-.025em;line-height:1.2;overflow-wrap:anywhere}
/* the sign of "Finale" (sidebar, the phone's bar, the last round): a trophy on butter, dashed while it can't start */
.lv-mk.fin{border-style:solid;border-color:var(--ink);background:var(--butter);color:var(--ink)}
.lv-mk.fin.off{border-style:dashed;border-color:var(--dash);background:transparent;color:var(--mute)}
.lv-mk.fin .ico{width:13px;height:13px}
.lv-mk.fin.lg .ico{width:16px;height:16px}
.lv-st.fin .lv-sl b .ico{width:16px;height:16px}

/* Teams, Bonus */
.lv-ph{display:flex;align-items:center;gap:12px;padding:8px 0 16px;flex-wrap:wrap}
.lv-h1{font-size:var(--f4);font-weight:800;letter-spacing:-.035em}
/* Teams and "Ankommen": one table (Team · Code), "Anzahl: x" next to the heading, at most 720px wide */
.team-code{color:var(--ink);font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.lv-lb{max-width:720px}
.lv-lbn{font-size:var(--f3);font-weight:700}
.lv-lb>.lv-list{border-top:var(--bw) solid rgba(42,39,32,.3)}
.lv-lb>.lv-list>li+li{border-top:1px solid var(--line)}
.lv-lb .team-code{font-size:var(--f3)}
.lv-lbh,.lv-lobby>.lv-row,.lv-tth,.lv-tt>.lv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:8px 0;border-radius:0}
.lv-lbh>:last-child,.lv-lobby .team-code{justify-self:end}
/* Bonus: the same table (Team · Punkte), each row a button that opens the bonus */
.lv-bth,.lv-bt>li>.lv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:8px}
.lv-bth>:last-child{justify-self:end}
.lv-bt>li>.lv-row{border-radius:var(--r2)}
/* "Ankommen": newest on top, a new one slides in; the way to round 1 under the table */
.lv-lbgo{display:flex;justify-content:center;padding-top:24px}
.lv-lobby>li{animation:rise .3s ease-out}
@media (prefers-reduced-motion:reduce){.lv-lobby>li{animation:none}}
/* Teams: plus Umbenennen/Löschen, renaming in place */
.lv-tth,.lv-tt>.lv-row{grid-template-columns:minmax(0,1fr) auto 264px}
.lv-tt .lv-tx .field{height:40px;padding:0 14px}
.lv-tt .lv-tx .err-text{margin-top:4px}
.lv-tth .lv-act,.lv-tt .lv-act{min-width:0}
.lv-tt .lv-act .btn{width:128px}
.lv-tt .btn[data-armed]{background:var(--bad);border-color:var(--bad);color:#fff}
.lv-tt .lv-act .btn[data-armed],.lv-tt>.lv-row.ed .lv-act .btn{opacity:1}
.lv-tt>.lv-row.ed{background:var(--butter-t)}
.chip .ico{width:13px;height:13px}
.bonus-pts{min-width:44px;text-align:right;font-size:var(--f3);font-weight:800;color:var(--good);font-variant-numeric:tabular-nums}
.bonus-pts.neg{color:var(--bad)}

/* menus (sheets) */
.lv-menu{display:flex;flex-direction:column}
.lv-menu .lbl{margin:16px 0 4px}
.lv-menu .lbl:first-child{margin-top:0}
.lv-menuitem{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 8px;border-top:1px solid var(--line);font-weight:700;font-size:15px;text-align:left}
.lv-menuitem .ico{color:var(--mute)}
.lv-menuitem:hover{background:var(--soft)}
.lv-menuitem[data-armed]{color:var(--bad)}
.lv-menuitem[data-armed] .ico{color:var(--bad)}
.lv-menunote{padding:12px 8px}

/* phone: the list of rounds first, the round in its own screen */
@media (max-width:859px){
  .lv{display:block}
  .lv[data-screen=list] .lv-main,.lv[data-screen=detail] .lv-ov{display:none}
  .lv-ov{position:static;height:auto;overflow:visible;padding:max(8px,env(safe-area-inset-top)) 16px 96px;border:0}
  .lv-ovtop{margin:0 -8px}
  .lv-ovh{margin:8px 0 0;font-size:30px;line-height:1.1}
  .lv-ov>.lv-m{margin:2px 0 0}
  .lv-ovb{display:block}
  .lv-ovk{margin:24px 0 4px}
  .lv-ov .lv-line{margin:16px 0 0}
  .lv-ov .lv-list{gap:0}
  .lv-ov .lv-row{min-height:56px;gap:12px;padding:8px;border:0}
  .lv-ov .lv-tx b{font-size:var(--f3);font-weight:600;white-space:normal}
  .lv-ov .lv-row.on{background:none;box-shadow:none}
  .lv-top{display:flex;position:static;flex-wrap:wrap;gap:4px;padding:max(4px,env(safe-area-inset-top)) 8px 0 4px}
  .lv-evn{flex:1;max-width:none}
  .lv-strip{order:9;flex:1 0 100%;height:52px;margin:0 -8px 0 -4px;padding:0 12px 4px;border:0}
  .lv-wrap{padding:12px 16px 96px}
  .lv-steps{top:0;gap:0;margin:0 -16px 16px;padding:0 8px}
  .lv-st{flex:1 1 auto;padding:14px 2px 16px}
  .lv-sl b{gap:3px;font-size:var(--f1)}
  .lv-sl b::after{bottom:-17px}
  .lv-sl b .lv-cnt{min-width:16px;height:16px;padding:0 4px}
  .lv-sd{width:14px;height:14px}
  .lv-sd .ico{width:9px;height:9px}
  .lv-tm{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"time act" "ctl ctl";row-gap:10px;column-gap:12px;padding:12px 12px 12px 16px;border-radius:14px}
  .lv-tmt{font-size:34px}
  .lv-tmc{justify-content:space-between;padding-top:10px;border-top:1px solid var(--line)}
  .lv-tmc .lv-gb{flex:1}
  .lv-tmc .lv-tmv{display:none}
  .lv-tmc.lv-opts{flex-wrap:nowrap}
  .lv-tmc.lv-tmset{justify-content:flex-start;padding-left:0}
  .lv-tmc.lv-tmset{gap:6px}
  .lv-tmc.lv-tmset>span:first-child{display:none}
  .lv-tmc.lv-tmset .lv-gb{flex:none;margin-left:auto;padding:0 8px}
  .lv-tmc.lv-opts .lv-opt{flex:1;min-width:0;padding:0 6px;justify-content:center}
  .lv-tmc.lv-opts .lv-in{flex:1.4;min-width:0}
  .lv-tm:not(:has(.lv-tmc)){grid-template-areas:"time act"}
  .lv-ah,.lv-at>li>.lv-row{grid-template-columns:minmax(0,1fr) 48px 112px;column-gap:8px}
  .lv-th{font-size:11px;letter-spacing:.04em}
  .lv-ah .lv-ad{font-size:11px}
  .lv-ad{padding-left:8px}
  .lv-ah>.lv-aq,.lv-at .lv-aq{display:none}
  .lv-an{display:block;text-align:center;font-variant-numeric:tabular-nums}
  .lv-at .lv-an{font-size:var(--f2);font-weight:700;color:var(--mute)}
  .lv-at .lv-tx b{font-size:15px}
  .lv-row{padding:8px}
  .lv-so{display:none}
  .lv-act{min-width:0}
  /* "Bewerten": centered switch over the full width; the tables without headers, a row's extras on lines of their own */
  .lv-tabs{width:auto;margin-inline:-4px;padding:3px;gap:0}
  .lv-tab{flex:1 1 auto;justify-content:center;gap:4px;padding:0 6px;font-size:13px}
  .lv-pick{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:4px 16px;scrollbar-width:none}
  .lv-pick::-webkit-scrollbar{display:none}
  .lv-chd h3{flex-basis:100%;font-size:18px}
  .lv-cth{display:none}
  .lv-ctb{border-top:0}
  .lv-cth,.lv-ctr{column-gap:12px}
  .lv-ctr{padding-block:10px}
  .lv-ctr .lv-cki:empty{display:none}
  .lv-ctr .lv-cki{margin-top:2px;font-size:13px}
  .v-ov .lv-ctr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm st" "qd act";row-gap:6px}
  .v-ov .lv-ctr>:nth-child(1){grid-area:nm}
  .v-ov .lv-ctr>:nth-child(2){grid-area:qd}
  .v-ov .lv-ctr>:nth-child(3){grid-area:act}
  .v-ov .lv-ctr>:nth-child(4){grid-area:st}
  .v-ov .lv-cact:empty{display:none}
  .lv-cdots{gap:5px;flex-wrap:wrap}
  .lv-cdots>i{width:14px;height:14px}
  .v-q .lv-ctr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nm jd" "an jd" "ki jd"}
  .v-q .lv-ctr>:nth-child(1){grid-area:nm;font-size:13px;color:var(--mute)}
  .v-q .lv-ctr>:nth-child(2){grid-area:an}
  .v-q .lv-ctr>:nth-child(3){grid-area:ki}
  .v-q .lv-ctr>:nth-child(4){grid-area:jd}
  .v-t .lv-ctr{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"n an jd" "n so jd" "n ki jd"}
  .v-t .lv-ctr>:nth-child(1){grid-area:n;align-self:start}
  .v-t .lv-ctr>:nth-child(2){display:none}
  .v-t .lv-ctr>:nth-child(3){grid-area:an}
  .v-t .lv-ctr>:nth-child(4){grid-area:so;font-size:13px}
  .v-t .lv-ctr>:nth-child(5){grid-area:ki}
  .v-t .lv-ctr>:nth-child(6){grid-area:jd}
  .v-o .lv-ctr{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"n tm jd" "n an jd" "n so jd" "n ki jd"}
  .v-o .lv-ctr>:nth-child(1){grid-area:n;align-self:start}
  .v-o .lv-ctr>:nth-child(2){grid-area:tm;font-size:13px;color:var(--mute)}
  .v-o .lv-ctr>:nth-child(3){grid-area:an}
  .v-o .lv-ctr>:nth-child(4){grid-area:so;font-size:13px}
  .v-o .lv-ctr>:nth-child(5){grid-area:ki}
  .v-o .lv-ctr>:nth-child(6){grid-area:jd}
  .lv-jd{gap:4px}
  .lv-jb,.lv-jv{min-width:34px;height:34px}
  .lv-jb.more{min-width:20px}
  .lv-fin{padding:16px}
  .lv .player.lv-play .p-ltab{--tw:132px}
  .lv .player.lv-play :is(.p-rhead,.p-ranks li){grid-template-columns:32px minmax(0,1fr) 52px 52px 52px;column-gap:8px}
  .lv .player.lv-play .p-board.cols :is(.p-rhead,.p-ranks li){grid-template-columns:24px minmax(0,1fr) repeat(var(--cols),minmax(0,32px)) 44px;column-gap:6px}
  .lv-dh .btn.ink{width:100%}
  /* Teams: the code under the name, the buttons on the right */
  .lv-tth,.lv-tt>.lv-row{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px}
  .lv-tth>:nth-child(2){display:none}
  .lv-tt>.lv-row>.team-code{grid-column:1;grid-row:2}
  .lv-tt>.lv-row>.lv-act{grid-column:2;grid-row:1/3}
  .lv-tt .lv-act .btn{width:auto}
  /* "Fragen": the same table in three columns; released ones are one line with "Verbergen" where the solution was */
  .lv-qh,.lv-qt>.lv-row{grid-template-columns:36px minmax(0,1fr) 120px;column-gap:10px;align-items:start;padding:10px 0}
  .lv-qh{align-items:center;padding-top:0}
  .lv-qh>.lv-act{grid-column:1/-1;grid-row:1;margin:10px 0 8px}
  .lv-qh .lv-act .btn,.lv-qt .lv-act .btn{width:120px}
  .lv-qt .lv-tx>b{font-size:15px}
  .lv-qt .lv-so{display:block;font-size:13px;font-weight:700;line-height:1.35}
  .lv-qt .lv-act:not(:has(*)){display:none}
  .lv-qt>.lv-row.rel{align-items:center;min-height:0;padding-block:4px}
  .lv-qt>.lv-row.rel .lv-tx>b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lv-qt>.lv-row.rel .lv-so{display:none}
  .lv-qt>.lv-row.rel .lv-act{grid-column:3;grid-row:1;justify-content:flex-start}
  .lv-qt>.lv-row:has(.btn.ink) .lv-act{grid-column:1/-1}
  .lv-sol :is(.lv-qh,.lv-qt>.lv-row){grid-template-columns:36px minmax(0,1fr) 120px}
  .lv-sol .lv-qh>:nth-child(4){display:none}
  .lv-sol .lv-qt>.lv-row>.lv-pd{grid-column:2}
}

/* conflicts */
.issues{list-style:none;display:flex;flex-direction:column;gap:10px}
.issues li{background:var(--card);border:var(--bw) solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.issues li.conflict{border-color:var(--butter)}
.issues li.failed{border-color:var(--bad)}
.issue-head{display:flex;align-items:flex-start;gap:8px}
.issue-head .grow{flex:1;min-width:0;overflow-wrap:anywhere}
.issue-msg{font-size:13.5px;font-weight:600;color:var(--mute2)}
.issue-diff{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;font-size:13.5px}
.issue-diff dt{font-weight:700;color:var(--mute)}
.issue-diff dd{overflow-wrap:anywhere}
.issue-deps{font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.issue-deps ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.issue-deps li::before{content:"↳ ";color:var(--mute)}

/* QR code */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
.qr-code{width:min(280px,70vw);aspect-ratio:1;background:#fff;border-radius:12px;overflow:hidden}
.qr-code svg{display:block;width:100%;height:100%}
.qr-name{font-weight:800;font-size:18px;letter-spacing:-.02em;text-align:center;overflow-wrap:anywhere}
.qr-url{font-size:13px;color:var(--mute);text-align:center;overflow-wrap:anywhere;user-select:all}
.qr-full{position:fixed;inset:0;z-index:70;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;cursor:zoom-out}
.qr-full .qr-code{width:min(88vw,74vh)}
.qr-full .qr-name{font-size:clamp(20px,4vw,40px)}
.qr-full .qr-url{font-size:clamp(14px,2vw,22px);color:var(--ink)}
.qr-close{font-size:12.5px;color:var(--mute)}
.qr-warn{margin:12px 0 0}
.qr-cut{display:none}

/* question picture (QuestionSheet) */
.q-image{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.q-image img{width:120px;height:90px;object-fit:contain;border-radius:12px;border:var(--bw) solid var(--ink);background:var(--soft)}

@media print{
  body:has(.qr-print) *{visibility:hidden}
  body:has(.qr-print) .qr-print,body:has(.qr-print) .qr-print *{visibility:visible}
  body:has(.qr-print) .qr-print{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff}
  body:has(.qr-print) .qr-print .qr-code{width:12cm}
  body:has(.qr-print) .qr-print .qr-name{font-size:28pt}
  body:has(.qr-print) .qr-print .qr-url{font-size:14pt;color:#000}
  .qr-close{display:none}

  /* QrSheet's "Drucken": ten cards on one A4 page, dashed lines to cut along. Everything but the cards and their
     ancestors is taken out of the layout, so the page count doesn't depend on the admin page behind the sheet. */
  body:has(.qr-cut){background:#fff;min-height:0}
  body:has(.qr-cut) *:not(:has(.qr-cut),.qr-cut,.qr-cut *){display:none!important}
  body:has(.qr-cut) :has(.qr-cut){display:block;position:static;inset:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;min-height:0;height:auto;overflow:visible;transform:none;animation:none}
  .qr-cut{page:qr-cut;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);height:275mm;border-top:.25mm dashed #999;border-left:.25mm dashed #999;color:#000;break-inside:avoid}
  .qr-card{display:flex;align-items:center;gap:3mm;padding:3mm;border-right:.25mm dashed #999;border-bottom:.25mm dashed #999;overflow:hidden}
  .qr-card .qr-code{width:46mm;flex:none;border-radius:0}
  .qr-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.5mm}
  .qr-card .qr-name{font-size:13pt;line-height:1.15;text-align:left}
  .qr-cta{font-size:10pt;font-weight:600}
  .qr-card .qr-url{font-size:7pt;line-height:1.3;text-align:left;color:#000}
}
@page qr-cut{size:A4;margin:10mm}

/* ---------- map questions (wwwroot/js/map.js, Services/MapInterop.cs) ----------
   The map building block shared by the player page and the admin editor: pins, the bullseye, map boxes, the full-screen
   layer. MapLibre's own stylesheet (wwwroot/lib/maplibre-gl) is added by map.js when the first map is shown; the
   .k-map prefix keeps these tweaks ahead of it. Mockups: design_playground/karte/. */
.k-map{position:absolute;inset:0;background:#BFDDEE}
.k-map .maplibregl-canvas:focus-visible{outline:none}

/* pins: the team colour, a white dot (answering) or the place (after the solution) in the head, the name above */
.k-pin{position:relative;width:30px;height:39px}
.k-pin.small{width:22px;height:29px}
.k-pin svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(1.5px 1.5px 0 var(--ink))}
.k-pin .k-tag{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:#fff;border:1.5px solid var(--ink);color:var(--ink);font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap;pointer-events:none}
/* other spots for the name when the one above is taken (map.js, TAG_SPOTS): shifted, beside the head, below the tip */
.k-pin .k-tag.at-ar{left:calc(50% - 10px);transform:none}
.k-pin .k-tag.at-al{left:auto;right:calc(50% - 10px);transform:none}
.k-pin .k-tag:is(.at-r,.at-l){top:37.5%;bottom:auto;transform:translateY(-50%)}
.k-pin .k-tag.at-r{left:calc(100% + 4px)}
.k-pin .k-tag.at-l{left:auto;right:calc(100% + 4px)}
.k-pin .k-tag.at-b{top:calc(100% + 4px);bottom:auto}
.k-pin.me .k-tag{background:var(--ink);color:#fff}
.k-pin.picked .k-tag{background:var(--butter);color:var(--ink)}
.k-pin.dim{opacity:.35}
.k-pin.k-dropping{animation:k-drop .5s cubic-bezier(.3,1.5,.5,1) both}
.k-pin.k-placing{animation:k-place .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes k-drop{0%{transform:translateY(-120px);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes k-place{0%{transform:scale(.4) translateY(-14px)}100%{transform:none}}
.k-map .maplibregl-marker:has(.k-pin.me),.k-map .maplibregl-marker:has(.k-pin.picked){z-index:3}
/* map suggestions (design_playground/karte/vorschlaege.html): this phone's own pin in its colour (--c, set by map.js)
   above the answer and the other phones' small pins; tagged "Du" when sent, "Neu" (dashed) while a draft, white while
   its colour isn't known yet (.plain). The preview shows each suggestion as a dot that pops in. */
.k-map .maplibregl-marker:has(.k-pin.mine){z-index:5}
.k-pin.mine .k-tag{background:var(--c);color:#fff}
.k-pin.mine.plain .k-tag{background:#fff;color:var(--ink)}
.k-pin.mine.draft .k-tag{background:#fff;color:var(--ink);border-style:dashed}
.k-dotpin{display:block;width:11px;height:11px;border-radius:50%;background:var(--c);border:1.5px solid var(--ink);box-shadow:1px 1px 0 var(--ink)}
.k-dotpin.pop{animation:k-pop .4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes k-pop{0%{transform:scale(0)}100%{transform:none}}

/* the target: a bullseye, always on top; pops in with two pulses that remove themselves (map.js) */
.k-goal{position:relative;display:block;filter:drop-shadow(1.5px 1.5px 0 var(--ink))}
.k-goal svg{display:block}
.k-goal.in{animation:k-goal .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes k-goal{0%{transform:scale(0)}100%{transform:none}}
.k-pulse{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2.5px solid var(--ink);pointer-events:none;animation:k-pulse 1s ease-out both}
@keyframes k-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.k-map .maplibregl-marker:has(.k-goal){z-index:4}
@media (prefers-reduced-motion:reduce){.k-pin.k-dropping,.k-pin.k-placing,.k-goal.in,.k-dotpin.pop{animation:none}.k-pulse{display:none}}

/* MapLibre's controls in the app's style; the attribution as a small (i), collapsed until tapped */
.k-map .maplibregl-ctrl-group{border:var(--bw) solid var(--ink);border-radius:12px;box-shadow:var(--sh);overflow:hidden}
.k-map .maplibregl-ctrl-attrib{font-size:10px}
.k-map .maplibregl-ctrl-attrib.maplibregl-compact{margin:8px;background:rgba(255,255,255,.85);border-radius:12px}
.k-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show){width:24px;height:24px;min-height:0;padding:0}
.k-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{display:none}
/* the small maps without controls: a static credit bottom left (the corner buttons sit bottom right) */
.k-credit{position:absolute;left:8px;bottom:5px;z-index:2;padding:0 4px;border-radius:4px;background:rgba(255,255,255,.7);color:var(--mute);font-size:9.5px;font-weight:600;line-height:1.5;white-space:nowrap;pointer-events:none}

/* a map in a box: the preview while answering (the box is a button), the small reveal, the editor's target map */
.k-box{position:relative;display:block;width:100%;margin-top:10px;padding:0;border-radius:14px;overflow:hidden;border:var(--bw) solid var(--ink);background:#BFDDEE;text-align:left}
.k-box.preview{height:150px;cursor:pointer}
.k-box.reveal{height:230px;cursor:pointer}
.k-box.readonly{cursor:default}
.k-box.edit{height:300px;margin-top:0;border-radius:16px;cursor:default}
.k-box:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.k-moved{animation:k-moved 1.6s ease-out}
@keyframes k-moved{0%,30%{box-shadow:0 0 0 4px var(--butter)}100%{box-shadow:0 0 0 0 var(--butter)}}
/* the call to action over an empty preview ("Pin setzen") */
.k-cta{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,248,236,.35);pointer-events:none}
.k-cta span{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;box-shadow:2px 2px 0 rgba(42,39,32,.35)}
.k-cta .ico{width:17px;height:17px}
/* a quiet corner label ("Ändern", "Alle Teams") */
.k-corner{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;background:#fff;border:var(--bw) solid var(--ink);box-shadow:var(--sh);font-size:13px;font-weight:700;pointer-events:none}
.k-corner .ico{width:15px;height:15px}
/* a hint floating over the editor's map ("Tipp auf die Karte, um das Ziel zu setzen") */
.k-note{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:2;max-width:calc(100% - 24px);padding:6px 13px;border-radius:999px;background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--sh);font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transition:opacity .25s}

/* the question editor (Components/MapQuestionFields.razor): the place search with its hits, the target map, the
   coordinates, "Kartendetails" as four choices (each adds to the one before), the warning for "Alle Namen" */
.k-search{display:flex;gap:8px;margin-bottom:8px}
.k-search .field{flex:1;min-width:0}
.k-search .btn{flex:none}
.k-hits{list-style:none;display:flex;flex-direction:column;margin-bottom:8px;border:var(--bw) solid var(--ink);border-radius:14px;background:var(--card);overflow:hidden}
.k-hits li+li{border-top:1px solid var(--line)}
.k-hits button{display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 13px;text-align:left;line-height:1.3}
.k-hits button:hover,.k-hits button:focus-visible{background:var(--soft)}
.k-hits b{font-size:14.5px;font-weight:700}
.k-hits small{font-size:12px;font-weight:600;color:var(--mute);overflow-wrap:anywhere}
.k-box.edit.invalid{border-color:var(--bad)}
.k-box.edit .k-note{top:10px;font-size:12.5px}
.k-coords{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:6px;font-variant-numeric:tabular-nums}
.k-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.k-levels button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 11px;border-radius:14px;background:var(--card);border:var(--bw) solid var(--ink);font-size:13.5px;font-weight:700;line-height:1.2;text-align:left;transition:transform .12s,box-shadow .12s}
.k-levels button:hover{background:var(--soft)}
.k-levels button small{font-size:11.5px;font-weight:600;color:var(--mute)}
.k-levels button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:var(--sh)}
.k-levels button[aria-pressed=true] small{color:#D8D1C2}
@media (max-width:600px){.k-levels{grid-template-columns:1fr 1fr}}
.hint.k-hint,.hint.k-radius-hint{margin-top:0}
.k-radius .field{flex:0 1 140px}
.k-warn{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:12px;background:var(--butter-t);color:var(--butter-ink);font-size:13px;font-weight:600;margin-top:8px}
.k-warn .ico{width:16px;height:16px;flex:none;margin-top:1px}
.k-scoring{font-size:13px;color:var(--mute);margin-top:6px}

/* full screen (setting the pin, the big view of all teams): head, the map, then a foot or the ranking. Under the toasts. */
.k-full{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--bg);animation:fade .15s ease-out}
body:has(.k-full){overflow:hidden}
.k-fhead{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 16px;background:var(--cream);border-bottom:var(--bw) solid var(--ink)}
.k-fhead .grow{flex:1;min-width:0}
.k-fhead b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.k-fhead .btn.icon{width:44px;height:44px;flex:none}
/* a head with only the title (the picker: its close button sits in the foot) keeps the height of one with a button */
.k-fhead:has(> b:only-child){min-height:calc(56px + env(safe-area-inset-top))}
.k-fmap{position:relative;flex:1;min-height:0}
.k-ffoot{display:flex;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--cream);border-top:var(--bw) solid var(--ink)}
.k-ffoot .k-state{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--mute2)}
.k-ffoot .btn{height:48px;padding:0 22px;font-size:15.5px}
.k-ffoot .btn.icon{width:48px;padding:0}

/* ---------- estimation questions: the editor (EstimateQuestionFields) ----------
   the value as it counts under the field ("= 1.400.000"), the tolerance with a two-way switch "absolut / %" */
.hint.e-read{margin-top:4px;font-variant-numeric:tabular-nums}
.e-tol .field{flex:0 1 140px}
.e-kind{display:inline-flex;flex:none;padding:2px;border:var(--bw) solid var(--ink);border-radius:999px;background:var(--card)}
.e-kind button{height:34px;min-width:44px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--mute)}
.e-kind button:hover{color:var(--ink)}
.e-kind button[aria-pressed=true]{background:var(--ink);color:#fff}
.hint.e-tol-hint{margin-top:0}

/* ---------- phones ---------- */
@media (max-width:600px){
  .wrap{padding:0 16px}
  .top{height:60px}
  .pagehead{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:22px}
  .pagehead h1{font-size:32px}
  .pagehead .actions .btn{flex:1}
  .ev{padding:14px 16px;gap:12px}
  .round-h{padding:16px 12px 12px 16px}
  .q > button.open{padding-left:16px;grid-template-columns:22px minmax(0,1fr);gap:0 10px}
  .q .acol{grid-column:2;border-left:0;padding-left:0;margin-top:5px}
  .q .warns{grid-column:2}
  .qs-head{display:none}
  .q .side{width:auto;padding-left:4px}
  .add-q{padding-left:16px}
  .sheet{place-items:end stretch;padding:0}
  .panel,.panel.wide{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;border-bottom:0;box-shadow:none;animation:up .22s ease-out}
  .panel .mh{padding:20px 18px 2px 20px}
  .panel .mb{padding:4px 20px 8px}
  .panel .mf{padding:12px 16px calc(16px + env(safe-area-inset-bottom)) 20px}
  .details{padding:14px 16px 16px}
  .details .saved{top:14px;right:16px}
  .details-grid{grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"name name" "date jokers" "venue timer"}
  .two{grid-template-columns:1fr 110px}
  .two.date{grid-template-columns:1fr}
  /* At the top, so toasts don't cover a bottom sheet's buttons. */
  .toasts{top:calc(12px + env(safe-area-inset-top));bottom:auto}
}

/* ---------- touch ---------- */
@media (pointer:coarse){
  .btn.sm{height:38px}
  .btn.icon{width:40px;height:40px}
  .q .move button{width:36px;height:32px}
  .row-tools button{width:34px;height:36px}
  .tag button{width:28px;height:28px}
  .toast button{width:32px;height:32px}
  .menu button{padding:11px 12px}
  .lv-j{min-width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@keyframes up{from{transform:translateY(30%);opacity:.5}}