/* SchockMobile v2 – one stylesheet for list, game, live view and statistics (2026-11-06) */
:root {
	--bg: #0d1014; --bg2: #13171d; --card: #181d24; --card2: #1f252e; --line: #2a313b; --line2: #39424e;
	--ink: #eef1f5; --soft: #b7bfca; --mute: #7f8895;
	--gold: #f2b134; --gold-ink: #1b1405; --red: #f0625a; --green: #39c27f; --blue: #5aa9f0; --brown: #b07a4d;
	--r: 14px; --r-sm: 9px; --gap: 12px;
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
	background: rgba(13,16,20,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -.01em; white-space: nowrap; }
.brand .die { width: 30px; height: 30px; border-radius: 8px; background: var(--gold); display: grid; place-items: center; color: var(--gold-ink); font-size: 15px; }
.top .grow { flex: 1; min-width: 0; }
.top h1 { margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top small { display: block; color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--r-sm);
	border: 1px solid var(--line2); background: var(--card2); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none; }
.btn:hover { border-color: #56606d; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.btn.danger { color: var(--red); border-color: rgba(240,98,90,.45); background: transparent; }
.btn.ghost { background: transparent; }
.btn.icon { width: 42px; padding: 0; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn .n { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 18px max(14px, env(safe-area-inset-left)) 40px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 12px; }
.section-head h2 { margin: 0; font-size: 18px; }
.sub { color: var(--mute); font-size: 13.5px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--card2); border: 1px solid var(--line); color: var(--soft); }
.chip.gold { color: var(--gold); border-color: rgba(242,177,52,.4); background: rgba(242,177,52,.08); }
.chip.green { color: var(--green); border-color: rgba(57,194,127,.4); background: rgba(57,194,127,.08); }
.chip.red { color: var(--red); border-color: rgba(240,98,90,.4); background: rgba(240,98,90,.08); }
.chip.blue { color: var(--blue); border-color: rgba(90,169,240,.4); background: rgba(90,169,240,.08); }

/* ---------- start page ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.game-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); text-decoration: none; position: relative; }
.game-card:hover { border-color: var(--line2); background: #1b2028; }
.game-card .t { font-weight: 700; font-size: 16px; padding-right: 30px; }
.game-card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--mute); font-size: 13px; }
.game-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.game-card .sum { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-card .del { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(240,98,90,.4); background: transparent; color: var(--red); cursor: pointer; }
.game-card.today { border-color: rgba(242,177,52,.55); box-shadow: 0 0 0 1px rgba(242,177,52,.2) inset; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.search { flex: 1; min-width: 200px; height: 42px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); }
.empty { padding: 40px; text-align: center; color: var(--mute); }

/* ---------- forms / dialogs ---------- */
dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line2); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
dialog > form { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg-body { min-height: 0; }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dlg-head h3 { margin: 0; font-size: 17px; }
.dlg-body { padding: 16px; display: grid; gap: 14px; overflow: auto; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
label.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--soft); }
.in { height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); width: 100%; }
.in:focus, .search:focus { outline: none; border-color: var(--gold); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.unit { position: relative; }
.unit .in { padding-right: 30px; }
.unit::after { content: "€"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); cursor: pointer; font-weight: 600; }
.pick.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.err { color: var(--red); font-size: 13px; min-height: 1em; }
.hint { color: var(--mute); font-size: 12.5px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; z-index: 60;
	padding: 10px 16px; border-radius: 10px; background: #232a33; border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: .2s; font-weight: 600; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.bad { border-color: rgba(240,98,90,.6); color: #ffb3ae; }

/* ---------- game ---------- */
body.game { --size: 1; }
body.game.s-small { --size: .85; }
body.game.s-large { --size: 1.18; }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); white-space: nowrap; }
.sync i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.sync.busy i { background: var(--gold); animation: pulse 1s infinite; }
.sync.off i { background: var(--red); }
@keyframes pulse { 50% { opacity: .3; } }

.board { padding: 12px max(12px, env(safe-area-inset-left)) 90px; display: grid; gap: 10px; }
#rows { display: grid; gap: 8px; }
.heads, .prow { display: grid; grid-template-columns: minmax(110px, 1.1fr) repeat(3, minmax(150px, 1.6fr)) minmax(96px, .9fr); gap: 8px; align-items: stretch; }
.heads { padding: 0 6px; color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.heads span:last-child { text-align: right; }
.heads .tot { display: block; color: var(--soft); font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.prow { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; }
.prow.king { border-color: rgba(242,177,52,.6); background: linear-gradient(90deg, rgba(242,177,52,.08), var(--card) 40%); }
.prow.clown { border-color: rgba(176,122,77,.6); }
.pname { display: flex; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; font-size: calc(17px * var(--size)); min-width: 0; cursor: pointer; }
.pname span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname .fa-crown { color: var(--gold); }
.pname .fa-poo { color: var(--brown); }
.xbtn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(240,98,90,.35); background: rgba(240,98,90,.08); color: #ffb3ae; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.xbtn.has { background: rgba(240,98,90,.2); border-color: rgba(240,98,90,.6); }
body.live .xbtn { pointer-events: none; }
body.live .xbtn:not(.has) { display: none; }
.xrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); }
#extra-reasons .pick { min-height: 48px; }
.counter { display: grid; grid-template-columns: calc(44px * var(--size)) 1fr calc(54px * var(--size)); gap: 6px; align-items: stretch; min-height: calc(56px * var(--size)); }
.counter button { border: 0; border-radius: 10px; cursor: pointer; font-size: calc(18px * var(--size)); touch-action: manipulation; }
.counter .minus { background: rgba(240,98,90,.1); color: var(--red); }
.counter .plus { background: rgba(57,194,127,.16); color: var(--green); font-weight: 800; }
.counter .plus:active { background: rgba(57,194,127,.35); }
.counter .minus:active { background: rgba(240,98,90,.3); }
.counter .val { display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 10px; background: var(--bg2); min-width: 0; overflow: hidden; }
.counter .num { font-size: calc(22px * var(--size)); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.4ch; }
.tally { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; max-height: calc(40px * var(--size)); overflow: hidden; }
.tally b { display: inline-flex; gap: 3px; position: relative; height: calc(18px * var(--size)); }
.tally b i { width: 3px; height: 100%; border-radius: 2px; background: var(--soft); display: block; }
.tally b.full::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 3px; border-radius: 2px; background: var(--soft); transform: rotate(-28deg); }
.counter.schock .tally b i, .counter.schock .tally b.full::after { background: var(--gold); }
.counter.verloren .tally b i, .counter.verloren .tally b.full::after { background: var(--red); }
.money { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 8px; border-radius: 10px; position: relative; overflow: hidden; background: var(--bg2); }
.money::before { content: ""; position: absolute; inset: 0; width: var(--share, 0%); background: rgba(242,177,52,.14); transition: width .3s; }
.money b { position: relative; font-size: calc(19px * var(--size)); font-variant-numeric: tabular-nums; }
.money small { position: relative; color: var(--mute); font-size: 11px; }
.flash { animation: flash .5s; }
@keyframes flash { 0% { box-shadow: 0 0 0 2px var(--green) inset; } 100% { box-shadow: none; } }
.flash-red { animation: flashr .5s; }
@keyframes flashr { 0% { box-shadow: 0 0 0 2px var(--red) inset; } 100% { box-shadow: none; } }

.addrow { display: flex; gap: 8px; }
.totals { display: grid; grid-template-columns: minmax(110px, 1.1fr) repeat(3, minmax(150px, 1.6fr)) minmax(96px, .9fr); gap: 8px; padding: 10px 14px; border-radius: var(--r); background: var(--bg2); border: 1px dashed var(--line2); align-items: center; font-weight: 700; }
.totals .grand { text-align: right; font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; }

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 8px; justify-content: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(13,16,20,.94); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.panel { display: grid; gap: 12px; }
.panel h3 { margin: 0 0 4px; font-size: 16px; }
.hist { max-height: 340px; overflow: auto; }
.hist table, .tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist td, .tbl td, .tbl th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.tbl th { color: var(--mute); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; position: sticky; top: 0; background: var(--card); }
.tbl .r, .hist .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }
.chartbox { position: relative; height: 300px; }
.food-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; align-items: center; }

/* lock screen */
.lock { max-width: 420px; margin: 12vh auto; text-align: center; display: grid; gap: 14px; padding: 0 16px; }
.lock .ico { font-size: 40px; color: var(--gold); }

/* phone held upright: name + amount on top, the three counters below (− small, + big) */
@media (max-width: 760px) and (orientation: portrait) {
	.heads, .totals .mono { display: none; }
	.totals { grid-template-columns: 1fr auto; }
	.prow { grid-template-columns: repeat(3, 1fr); row-gap: 8px; }
	.pname { grid-column: 1 / 3; grid-row: 1; padding: 4px; }
	.money { grid-column: 3; grid-row: 1; min-height: 46px; }
	.counter { grid-row: 2; grid-template-columns: 38px 1fr; grid-template-rows: auto auto 44px; min-height: 0; gap: 4px; }
	.counter::before { content: attr(data-label); grid-column: 1 / -1; text-align: center; font-size: 10.5px; color: var(--mute); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
	.counter .val { grid-column: 1 / -1; justify-content: center; min-height: 42px; }
	.counter .tally { display: none; }
	.counter .minus { grid-row: 3; grid-column: 1; }
	.counter .plus { grid-row: 3; grid-column: 2; }
	.sync span, #b-size { display: none; }
	.top { gap: 6px; }
	.top .btn.icon { width: 40px; min-height: 40px; }
	.dock { gap: 6px; }
	.dock .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 13.5px; overflow: hidden; }
}
/* phone lying (landscape, low height): compact */
@media (max-height: 520px) and (orientation: landscape) {
	.top { padding-top: 6px; padding-bottom: 6px; }
	.board { gap: 6px; padding-top: 8px; }
	.prow { padding: 5px; }
	.counter { min-height: calc(46px * var(--size)); }
	.heads { font-size: 10.5px; padding-top: 0; }
	.heads .tot { display: inline; margin-left: 4px; }
	.tally { display: none; }
	.pname { flex-wrap: wrap; row-gap: 2px; align-content: center; }
	.pname > span { flex: 1 1 100%; }
	.xbtn { margin-left: 0; height: 24px; padding: 0 7px; font-size: 11.5px; }
	dialog .dlg-body { gap: 10px; padding: 12px 14px; }
	dialog .dlg-head, dialog .dlg-foot { padding-top: 8px; padding-bottom: 8px; }
	#extra-reasons .pick { min-height: 40px; }
	.dock { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* ---------- live view (TV) ---------- */
body.live .counter .minus, body.live .counter .plus, body.live .dock, body.live .addrow, body.live #b-add { display: none; }
body.live .counter { grid-template-columns: 1fr; }
body.live { --size: 1.35; }
body.live .board { padding-bottom: 24px; }
body.live .livebar { display: flex; }
.livebar { display: none; align-items: center; gap: 14px; justify-content: space-between; padding: 8px 14px; }
.livebar .grand { font-size: 32px; font-weight: 800; color: var(--gold); }

/* ---------- statistics ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tabs a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line2); text-decoration: none; font-weight: 600; white-space: nowrap; color: var(--soft); }
.tabs a.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap); }
.kpi { padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.kpi small { color: var(--mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi b { display: block; font-size: 24px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.tblwrap { overflow: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); max-height: 70vh; }
.hl { color: var(--gold); font-weight: 800; }
.pay { display: grid; grid-template-columns: 1fr 150px; gap: 16px; align-items: center; }
.pay dl { margin: 0; display: grid; gap: 10px; }
.pay dt { color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.pay dd { margin: 0; font-weight: 700; font-size: 16px; user-select: all; }
.qr { background: #fff; padding: 8px; border-radius: 10px; width: 150px; height: 150px; }
.qr img, .qr canvas { width: 100% !important; height: auto !important; }
.check { width: 24px; height: 24px; accent-color: var(--green); cursor: pointer; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } .pay { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- live view on a TV: a scoreboard that always fits the screen ---------- */
body.live .top, body.live .livebar, body.live #board { display: none !important; }
body.live { overflow: hidden; }
.tv { --n: 6; --row: min(8.5vh, calc((var(--app-h, 100vh) - 26vh) / var(--n))); height: 100vh; display: flex; flex-direction: column; padding: 2.4vh 2.6vw; gap: 1.2vh; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 3vw; }
.tv-title { min-width: 0; }
.tv-head h1 { margin: 0; font-size: 4.2vh; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-head h1 .chip { font-size: 2.6vh; padding: .3vh 1vh; vertical-align: middle; }
.tv-sub { color: var(--soft); font-size: 2.3vh; margin-top: .4vh; }
.tv-sub .live-dot { display: inline-block; width: 1.3vh; height: 1.3vh; border-radius: 50%; background: var(--green); margin-right: .8vh; animation: pulse 2s infinite; }
.tv-total { text-align: right; flex: none; }
.tv-total small { display: block; color: var(--mute); font-size: 1.9vh; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tv-total b { display: block; font-size: 6vh; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.tv-total span { color: var(--mute); font-size: 1.9vh; }
.tv-cols, .tv-row { display: grid; grid-template-columns: 2.2fr 1.5fr 1.5fr 1.5fr 1.4fr; gap: 1.2vw; align-items: center; }
.tv-cols { padding: 0 1.6vw; color: var(--mute); font-size: 1.9vh; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.tv-cols span:last-child { text-align: right; }
.tv-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7vh; }
.tv-row { height: var(--row); padding: 0 1.6vw; border-radius: 1vh; background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; }
.tv-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: linear-gradient(90deg, rgba(242,177,52,.0), rgba(242,177,52,.11)); pointer-events: none; }
.tv-row.king { border-color: rgba(242,177,52,.7); box-shadow: 0 0 0 1px rgba(242,177,52,.25) inset; }
.tv-row.clown { border-color: rgba(176,122,77,.7); }
.tv-name { display: flex; align-items: center; gap: 1vw; min-width: 0; font-size: calc(var(--row) * .44); font-weight: 800; position: relative; }
.tv-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-name .fa-crown { color: var(--gold); }
.tv-name .fa-poo { color: var(--brown); }
.tv-name .x { flex: none; font-size: calc(var(--row) * .2); padding: .3vh 1vh; border-radius: 999px; background: rgba(240,98,90,.18); border: 1px solid rgba(240,98,90,.55); color: #ffb3ae; font-weight: 800; }
.tv-cell { display: flex; align-items: center; gap: 1.2vw; min-width: 0; position: relative; }
.tv-cell .num { font-size: calc(var(--row) * .52); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.5ch; }
.tv-cell .num.zero { color: #4a5360; }
.tv-cell .tally { max-height: none; gap: .6vh .8vh; }
.tv-cell .tally b { height: calc(var(--row) * .3); gap: calc(var(--row) * .04); }
.tv-cell .tally b i { width: calc(var(--row) * .035); }
.tv-cell.schock .tally b i, .tv-cell.schock .tally b.full::after { background: var(--gold); }
.tv-cell.verloren .tally b i, .tv-cell.verloren .tally b.full::after { background: var(--red); }
.tv-money { text-align: right; position: relative; }
.tv-money b { display: block; font-size: calc(var(--row) * .46); font-variant-numeric: tabular-nums; }
.tv-money small { color: var(--mute); font-size: calc(var(--row) * .18); }
.tv-cell .tally { display: flex !important; }

.tv-foot { display: flex; justify-content: flex-end; align-items: center; gap: 1.5vw; }
.tv-foot a { color: var(--mute); font-size: 1.7vh; text-decoration: none; padding: .6vh 1.2vh; border-radius: .8vh; }
.tv-foot a:focus, .tv-foot a:hover { color: var(--ink); background: var(--card2); outline: none; }
.tv-money { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; } .tv-money small { margin-top: .3vh; }

/* 2026-11-06 more room on tablets/laptops: each counter is its own framed group, clear gaps between the groups */
@media (min-width: 761px) and (min-height: 521px), (min-width: 1100px) {
	.board { gap: 12px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
	.heads, .prow, .totals { column-gap: 18px; }
	#rows { gap: 16px; }
	.board { gap: 16px; }
	.prow { padding: 10px 14px; }
	.counter { gap: 8px; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
	.counter .val { background: transparent; }
	.heads { padding: 0 14px; }
	.heads > span { display: flex; align-items: baseline; gap: 8px; }
	.heads > span:last-child { justify-content: flex-end; }
	.heads .tot { display: inline; }
	.totals { padding: 10px 14px; }
	.money { padding: 0 12px; }
	.heads, .prow, .totals { grid-template-columns: minmax(170px, 1.5fr) repeat(3, minmax(140px, 1.35fr)) minmax(100px, .9fr); }
	.pname { gap: 6px; }
	.xbtn:not(.has) { width: 34px; padding: 0; justify-content: center; }
}

/* ---------- live view effects (2026-11-06): what just happened, big and fitting ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fx .p { position: absolute; top: 0; left: 0; font-size: var(--s, 6vh); line-height: 1; will-change: transform, opacity; }
.fx .p.fall { animation: fxfall var(--d, 2.6s) cubic-bezier(.3,.1,.6,1) var(--delay, 0s) forwards; transform: translate(var(--x), -12vh); }
@keyframes fxfall { 0% { transform: translate(var(--x), -12vh) rotate(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(calc(var(--x) + var(--dx)), 108vh) rotate(var(--r)); opacity: 0; } }
.fx .p.burst { animation: fxburst var(--d, 1.4s) cubic-bezier(.15,.7,.3,1) forwards; transform: translate(var(--x), var(--y)); }
@keyframes fxburst { 0% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1) rotate(var(--r)); opacity: 0; } }
.fx .money-up { position: absolute; font-weight: 900; font-size: 5.5vh; color: var(--red); text-shadow: 0 .4vh 2vh rgba(0,0,0,.7); animation: fxup 1.8s ease-out forwards; }
.fx .money-up.gold { color: var(--gold); }
@keyframes fxup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { transform: translateY(-2vh) scale(1.15); opacity: 1; } 100% { transform: translateY(-14vh) scale(1); opacity: 0; } }
.fx .banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; padding: 3vh 6vw; border-radius: 3vh; white-space: nowrap;
	background: radial-gradient(ellipse at center, rgba(60,10,10,.92), rgba(20,4,4,.85)); border: .4vh solid var(--red); box-shadow: 0 0 8vh rgba(240,98,90,.55), 0 2vh 6vh rgba(0,0,0,.6);
	animation: fxbanner var(--d, 2.4s) cubic-bezier(.2,1.4,.4,1) forwards; }
.fx .banner b { display: block; font-size: 11vh; line-height: 1; font-weight: 900; letter-spacing: .02em; color: #fff; text-shadow: 0 .6vh 0 rgba(0,0,0,.4); }
.fx .banner span { display: block; margin-top: 1.4vh; font-size: 4.4vh; font-weight: 800; color: #ffb3ae; }
.fx .banner.gold { background: radial-gradient(ellipse at center, rgba(70,50,5,.94), rgba(25,18,2,.88)); border-color: var(--gold); box-shadow: 0 0 10vh rgba(242,177,52,.7), 0 2vh 6vh rgba(0,0,0,.6); }
.fx .banner.gold b { color: var(--gold); }
.fx .banner.gold span { color: #ffe3a3; }
.fx .banner.small b { font-size: 7.5vh; }
@keyframes fxbanner { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-6deg); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.08) rotate(1deg); opacity: 1; } 22% { transform: translate(-50%, -50%) scale(1) rotate(0); } 82% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0; } }
.fx .flashscreen { position: absolute; inset: 0; animation: fxflash .9s ease-out forwards; }
@keyframes fxflash { 0% { opacity: .55; } 100% { opacity: 0; } }
.tv-row.hit-red { animation: hitred 1.6s; }
@keyframes hitred { 0%, 100% { transform: none; } 8% { transform: translateX(-1.2vw) rotate(-.6deg); background: rgba(240,98,90,.45); border-color: var(--red); } 16% { transform: translateX(1.2vw) rotate(.6deg); } 24% { transform: translateX(-.8vw); } 32% { transform: translateX(.8vw); } 40% { transform: none; background: rgba(240,98,90,.25); } }
.tv-row.hit-big { animation: hitbig 2.4s; z-index: 2; }
@keyframes hitbig { 0%, 100% { transform: none; } 6% { transform: scale(1.04) translateX(-1.5vw); background: rgba(240,98,90,.6); border-color: var(--red); box-shadow: 0 0 6vh rgba(240,98,90,.7); } 12% { transform: scale(1.04) translateX(1.5vw); } 18% { transform: scale(1.04) translateX(-1.2vw); } 24% { transform: scale(1.04) translateX(1.2vw); } 30% { transform: scale(1.02); background: rgba(240,98,90,.35); } 70% { background: rgba(240,98,90,.2); box-shadow: 0 0 3vh rgba(240,98,90,.4); } }
.tv-row.hit-gold { animation: hitgold 2.4s; z-index: 2; }
@keyframes hitgold { 0%, 100% { transform: none; } 10% { transform: scale(1.05); background: rgba(242,177,52,.45); border-color: var(--gold); box-shadow: 0 0 7vh rgba(242,177,52,.8); } 40% { transform: scale(1.02); background: rgba(242,177,52,.25); } 70% { box-shadow: 0 0 4vh rgba(242,177,52,.5); } }
@media (prefers-reduced-motion: reduce) { .fx { display: none; } }

.tv-sound { font: inherit; font-size: 2vh; font-weight: 700; padding: .8vh 1.8vh; border-radius: 1vh; border: 1px solid var(--line2); background: var(--card2); color: var(--ink); cursor: pointer; }
.tv-sound:focus { outline: .3vh solid var(--gold); outline-offset: .2vh; }
.tv-sound.on { border-color: rgba(57,194,127,.5); color: var(--green); }
.tv-sound.wait { border-color: var(--gold); color: var(--gold); animation: pulse 1.6s infinite; }

.tv-hint { position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 40; padding: 1.6vh 3vw; border-radius: 1.6vh; background: rgba(242,177,52,.95); color: #1b1405; font-size: 3vh; font-weight: 800; box-shadow: 0 1vh 4vh rgba(0,0,0,.5); animation: pulse 1.8s infinite; white-space: nowrap; }

/* ---------- player "calling cards" (2026-11-06): king = crowns on gold, clown = poop on brown, like COD cards ---------- */
.tv-name, .pname { isolation: isolate; position: relative; }
.tv-row .tv-name { align-self: stretch; margin-left: -1.6vw; padding-left: 1.6vw; border-radius: 1vh 0 0 1vh; overflow: hidden; }
.prow .pname { align-self: stretch; margin: -8px 0 -8px -8px; padding: 8px 8px 8px 14px; border-radius: var(--r) 0 0 var(--r); overflow: hidden; }
.tv-row.king .tv-name, .prow.king .pname { background: linear-gradient(100deg, rgba(242,177,52,.42), rgba(160,110,15,.22) 55%, transparent); }
.tv-row.clown .tv-name, .prow.clown .pname { background: linear-gradient(100deg, rgba(150,90,40,.5), rgba(90,50,20,.25) 55%, transparent); }
.tv-row.king .tv-name::before, .prow.king .pname::before, .tv-row.clown .tv-name::before, .prow.clown .pname::before {
	position: absolute; z-index: -1; left: -10%; top: -60%; width: 140%; height: 220%;
	white-space: pre; line-height: 1.9; letter-spacing: .25em; transform: rotate(-14deg); opacity: .32;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); pointer-events: none; }
.tv-row.king .tv-name::before, .prow.king .pname::before { content: "👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A    👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A 👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A    👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A 👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A    👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A 👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑"; }
.tv-row.clown .tv-name::before, .prow.clown .pname::before { content: "💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A    💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A 💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A    💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A 💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A    💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A 💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩"; }
.tv-row .tv-name::before { font-size: calc(var(--row) * .26); }
.prow .pname::before { font-size: 13px; }
.tv-row.king .tv-name .nm { color: #ffe3a3; text-shadow: 0 0 2vh rgba(242,177,52,.6), 0 .3vh .6vh rgba(0,0,0,.6); }
.tv-row.clown .tv-name .nm { color: #f3d3b5; text-shadow: 0 .3vh .6vh rgba(0,0,0,.7); }
.prow.king .pname span { color: #ffe3a3; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.prow.clown .pname span { text-shadow: 0 1px 3px rgba(0,0,0,.7); }
/* slow drift on the TV only (cheap: one transform per card) */
body.live .tv-row.king .tv-name::before, body.live .tv-row.clown .tv-name::before { animation: carddrift 18s linear infinite; }
@keyframes carddrift { from { transform: rotate(-14deg) translateX(0); } to { transform: rotate(-14deg) translateX(-12%); } }
@media (prefers-reduced-motion: reduce) { body.live .tv-row .tv-name::before { animation: none; } }
body.live .tv-row.king .tv-name::before, body.live .tv-row.clown .tv-name::before { opacity: .45; font-size: calc(var(--row) * .3); }

/* cards flush with the row edge: undo the row padding exactly (8px base, 10px/14px on tablets), card = row radius */
.prow .pname { margin: -8px 0 -8px -8px; padding-left: 16px; border-radius: calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px); }
@media (min-width: 761px) and (min-height: 521px), (min-width: 1100px) { .prow .pname { margin: -10px 0 -10px -14px; padding-left: 22px; } }
.tv-row .tv-name { border-radius: calc(1vh - 1px) 0 0 calc(1vh - 1px); }

/* last four entries under the board (2026-11-06) */
.recent { padding: 12px 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.recent h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.recent ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.recent li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg2); border-left: 4px solid var(--line2); min-width: 0; }
.recent li.new { animation: recentin .5s ease-out; }
@keyframes recentin { from { transform: translateY(-6px); opacity: 0; background: rgba(255,255,255,.08); } }
.recent .ic { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; }
.recent b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent small { color: var(--soft); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent small time { color: var(--mute); font-variant-numeric: tabular-nums; margin-right: 6px; }
.recent li.strafen { border-left-color: var(--soft); } .recent li.strafen .ic { background: rgba(183,191,202,.12); color: var(--soft); }
.recent li.verloren { border-left-color: var(--red); } .recent li.verloren .ic { background: rgba(240,98,90,.15); color: var(--red); }
.recent li.schock { border-left-color: var(--gold); } .recent li.schock .ic { background: rgba(242,177,52,.15); color: var(--gold); }
.recent li.extra, .recent li.extra_v { border-left-color: #ff9f6b; } .recent li.extra .ic, .recent li.extra_v .ic { background: rgba(255,159,107,.15); color: #ff9f6b; }
.recent .empty { color: var(--mute); font-size: 13px; grid-column: 1 / -1; }
@media (max-width: 900px) { .recent ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-height: 520px) and (orientation: landscape) { .recent { padding: 8px 10px; } .recent h3 { display: none; } .recent li { padding: 5px 8px; } }


/* TV: scoreboard left, history feed right (2026-11-06) */
.tv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 440px); gap: 1.6vw; }
.tv-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; }
.tv-feed { min-height: 0; display: flex; flex-direction: column; border-radius: 1.4vh; background: var(--card); border: 1px solid var(--line); padding: 1.4vh 1vw; overflow: hidden; }
.tv-feed h2 { margin: 0 0 1vh; font-size: 1.9vh; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.tv-feed ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8vh; overflow: hidden; flex: 1; min-height: 0;
	-webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.tv-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .8vw; align-items: center; padding: .9vh .8vw; border-radius: 1vh; background: var(--bg2); border-left: .5vh solid var(--line2); }
.tv-feed li.new { animation: feedin .7s ease-out; }
@keyframes feedin { from { transform: translateX(3vw); opacity: 0; background: rgba(255,255,255,.12); } }
.tv-feed .ic { grid-row: 1 / 3; width: 4.4vh; height: 4.4vh; border-radius: 1vh; display: grid; place-items: center; font-size: 2.1vh; }
.tv-feed b { font-size: 2.5vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-feed .amt { font-size: 2.3vh; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.tv-feed small { grid-column: 2 / 4; color: var(--soft); font-size: 1.8vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-feed small time { color: var(--mute); font-variant-numeric: tabular-nums; margin-right: .6vw; }
.tv-feed li.strafen { border-left-color: var(--soft); } .tv-feed li.strafen .ic { background: rgba(183,191,202,.12); color: var(--soft); }
.tv-feed li.verloren { border-left-color: var(--red); } .tv-feed li.verloren .ic { background: rgba(240,98,90,.15); color: var(--red); } .tv-feed li.verloren .amt { color: var(--red); }
.tv-feed li.schock { border-left-color: var(--gold); } .tv-feed li.schock .ic { background: rgba(242,177,52,.15); color: var(--gold); } .tv-feed li.schock .amt { color: var(--gold); }
.tv-feed li.extra, .tv-feed li.extra_v { border-left-color: #ff9f6b; } .tv-feed li.extra .ic, .tv-feed li.extra_v .ic { background: rgba(255,159,107,.15); color: #ff9f6b; } .tv-feed li.extra .amt, .tv-feed li.extra_v .amt { color: #ff9f6b; }
.tv-feed .empty { color: var(--mute); font-size: 2vh; }

/* ---------- end of game overlay (2026-11-06): who pays what, stats, king/loser, GiroCode ---------- */
.endov { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 2vh 2vw; background: rgba(5,7,10,.82); backdrop-filter: blur(6px); animation: endin .5s ease-out; }
@keyframes endin { from { opacity: 0; } }
.endbox { width: min(1200px, 100%); max-height: 96vh; overflow: auto; display: grid; gap: 16px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.end-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.end-head h2 { margin: 0; font-size: 28px; }
.end-head h2 i { color: var(--gold); }
.end-total { text-align: right; }
.end-total small { display: block; color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.end-total b { font-size: 34px; color: var(--gold); font-variant-numeric: tabular-nums; }
.end-podium { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pod { position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; padding: 16px 18px; border: 1px solid; display: flex; align-items: center; gap: 14px; }
.pod::before { position: absolute; z-index: -1; inset: -40% -10%; white-space: pre; line-height: 1.9; letter-spacing: .25em; font-size: 15px; opacity: .25; transform: rotate(-12deg); }
.pod.king { border-color: rgba(242,177,52,.7); background: linear-gradient(110deg, rgba(242,177,52,.35), rgba(120,80,10,.2)); }
.pod.king::before { content: "👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A    👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A 👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A    👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑\A 👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑  👑"; }
.pod.loser { border-color: rgba(176,122,77,.7); background: linear-gradient(110deg, rgba(150,90,40,.42), rgba(70,40,15,.2)); }
.pod.loser::before { content: "💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A    💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A 💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A    💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩\A 💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩  💩"; }
.pod .em { font-size: 44px; line-height: 1; }
.pod small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.pod b { display: block; font-size: 26px; line-height: 1.15; }
.pod span.d { color: var(--soft); font-size: 13px; }
.end-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.end-tbl { max-height: none; }
.end-tbl td.payamt { font-size: 18px; font-weight: 800; color: var(--ink); }
.end-tbl tr.payfirst td.payamt { color: var(--red); }
.end-tbl .mx { color: var(--gold); font-weight: 800; }
.end-pay { display: grid; justify-items: center; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); text-align: center; }
.end-pay .qr { width: 210px; height: 210px; }
.end-paytext { display: grid; gap: 4px; font-size: 13px; }
.end-paytext span { color: var(--soft); user-select: all; }
.end-foot { display: flex; gap: 10px; }
@media (max-width: 860px) { .end-grid { grid-template-columns: 1fr; } .end-podium { grid-template-columns: 1fr; } }
/* the TV: bigger, sized by screen height */
body.live .endbox { width: min(1700px, 100%); padding: 3vh 2.4vw; gap: 2vh; }
body.live .end-head h2 { font-size: 5vh; } body.live .end-total b { font-size: 6.5vh; } body.live .end-total small { font-size: 1.9vh; }
body.live .pod .em { font-size: 7vh; } body.live .pod b { font-size: 4.4vh; } body.live .pod small { font-size: 1.8vh; } body.live .pod span.d { font-size: 2vh; }
body.live .end-tbl td, body.live .end-tbl th { font-size: 2.2vh; padding: 1vh 1vw; } body.live .end-tbl td.payamt { font-size: 2.8vh; }
body.live .end-grid { grid-template-columns: minmax(0, 1fr) 30vh; } body.live .end-pay .qr { width: 26vh; height: 26vh; } body.live .end-paytext { font-size: 1.8vh; }
body.ended .counter button, body.ended .xbtn, body.ended #b-add, body.ended #b-undo { opacity: .3; pointer-events: none; }

.end-tbl tr.absent-head td { padding-top: 14px; color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: 0; }
.end-tbl tr.absent td { color: var(--soft); }
.end-tbl tr.absent td.payamt { color: var(--soft); }
body.live .end-tbl tr.absent-head td { font-size: 1.8vh; }

/* TV end screen: everything on one screen, no scrolling (rows share the height via --rows) */
body.live .endov { padding: 1.5vh 1.5vw; }
body.live .endbox { height: 97vh; max-height: 97vh; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.6vh; padding: 2.2vh 2vw; }
body.live .end-head h2 { font-size: 4.2vh; } body.live .end-head .sub { font-size: 1.9vh; }
body.live .end-total b { font-size: 5.6vh; line-height: 1; }
body.live .pod { padding: 1.2vh 1.4vw; gap: 1.2vw; } body.live .pod .em { font-size: 5.4vh; } body.live .pod b { font-size: 3.6vh; } body.live .pod small { font-size: 1.6vh; } body.live .pod span.d { font-size: 1.8vh; }
body.live .pod::before { font-size: 2vh; }
body.live .end-grid { min-height: 0; height: 100%; grid-template-columns: minmax(0, 1fr) 32vh; align-items: stretch; }
body.live .end-tbl { min-height: 0; overflow: hidden; }
body.live #end-table { --rows: 8; height: 100%; }
body.live .end-tbl td, body.live .end-tbl th { padding: 0 1vw; height: calc(100% / var(--rows)); font-size: min(2.4vh, calc(52vh / var(--rows) * .42)); }
body.live .end-tbl td.payamt { font-size: min(3vh, calc(52vh / var(--rows) * .5)); }
body.live .end-tbl th { font-size: min(1.7vh, calc(52vh / var(--rows) * .3)); }
body.live .end-tbl .chip { display: none; }
body.live .end-pay { align-content: center; padding: 1.6vh 1vw; gap: 1vh; }
body.live .end-pay .qr { width: 27vh; height: 27vh; padding: 1vh; }
body.live .end-paytext { font-size: 1.7vh; } body.live .end-paytext b { font-size: 1.9vh; }

/* real visible height (TV browsers count their own top bar into 100vh): --app-h = window.innerHeight, set by game.js */
body.live .tv { height: var(--app-h, 100dvh); }
body.live .endov { height: var(--app-h, 100dvh); bottom: auto; }
body.live .endbox { height: calc(var(--app-h, 100dvh) - 3vh); max-height: calc(var(--app-h, 100dvh) - 3vh); }

/* action buttons in the top bar on tablets/laptops; fixed bar at the bottom only on phones (2026-11-06) */
@media (min-width: 761px) {
	.top .dock { position: static; display: flex; gap: 8px; padding: 0; margin: 0 4px 0 0; background: none; border: 0; backdrop-filter: none; }
	.top .dock .btn { min-height: 42px; padding: 0 12px; }
	.board { padding-bottom: 28px; }
}
@media (min-width: 761px) and (max-width: 1180px) {
	.top .dock .btn span { display: none; }
	.top .dock #b-food #food-label { display: inline; }
	.top .dock .btn { padding: 0 11px; }
	.top h1 { font-size: 16px; }
	.top small { max-width: 34vw; }
}
/* phones held upright: the bar stays fixed at the bottom (a backdrop-filter on .top would trap position: fixed inside the header) */
@media (max-width: 760px) {
	.top { backdrop-filter: none; background: rgba(13,16,20,.98); }
	.dock { position: fixed; left: 0; right: 0; bottom: 0; }
	.dock .btn span { display: inline; }
}

/* ---------- live view on a phone (portrait, ≤ 760px): scrolling cards instead of the one-screen TV table ---------- */
/* phone layout of the live view – also for tablets held upright (the TV table needs landscape) */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	body.live { overflow-y: auto; }
	body.live .tv { --row: 56px; height: auto; min-height: var(--app-h, 100dvh); padding: 16px; gap: 14px; }
	body.live .tv-head { flex-direction: column; align-items: stretch; gap: 10px; }
	body.live .tv-head h1 { font-size: 26px; white-space: normal; }
	body.live .tv-head h1 .chip { font-size: 14px; padding: 2px 8px; }
	body.live .tv-sub { font-size: 14px; line-height: 1.4; margin-top: 4px; }
	body.live .tv-sub .live-dot { width: 9px; height: 9px; margin-right: 6px; }
	body.live .tv-total { text-align: left; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
	body.live .tv-total small { font-size: 12px; width: 100%; }
	body.live .tv-total b { font-size: 40px; }
	body.live .tv-total span { font-size: 13px; }
	body.live .tv-body { display: flex; flex-direction: column; gap: 14px; }
	body.live .tv-main { gap: 10px; }
	body.live .tv-cols { display: none; }
	body.live .tv-rows { gap: 10px; }
	body.live .tv-row { height: auto; padding: 12px 16px; border-radius: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "name name money" "s v k"; gap: 10px 8px; }
	body.live .tv-row .tv-name { grid-area: name; font-size: 20px; margin: -12px 0 0 -16px; padding: 12px 0 0 16px; border-radius: 9px 0 0 0; gap: 8px; }
	body.live .tv-name .x { font-size: 12px; padding: 2px 8px; }
	body.live .tv-row .tv-name::before { font-size: 14px; }
	body.live .tv-money { grid-area: money; }
	body.live .tv-money b { font-size: 20px; }
	body.live .tv-money small { font-size: 12px; margin-top: 2px; }
	body.live .tv-cell { gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--bg2); }
	body.live .tv-cell.strafen { grid-area: s; } body.live .tv-cell.verloren { grid-area: v; } body.live .tv-cell.schock { grid-area: k; }
	body.live .tv-cell::before { font-size: 11px; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; flex: 1; }
	body.live .tv-cell.strafen::before { content: "Strafen"; } body.live .tv-cell.verloren::before { content: "Verloren"; } body.live .tv-cell.schock::before { content: "Schock"; }
	body.live .tv-cell .num { font-size: 18px; order: 2; min-width: 0; }
	body.live .tv-cell .tally { display: none !important; }
	body.live .tv-feed { padding: 14px 12px; border-radius: 10px; }
	body.live .tv-feed h2 { font-size: 12px; margin-bottom: 10px; }
	body.live .tv-feed ol { gap: 8px; }
	body.live .tv-feed li:nth-child(n+7) { display: none; }
	body.live .tv-feed li { column-gap: 10px; padding: 8px 10px; border-radius: 8px; border-left-width: 4px; }
	body.live .tv-feed .ic { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
	body.live .tv-feed b { font-size: 16px; } body.live .tv-feed .amt { font-size: 15px; }
	body.live .tv-feed small { font-size: 13px; } body.live .tv-feed small time { margin-right: 6px; }
	body.live .tv-foot { flex-wrap: wrap; justify-content: stretch; gap: 10px; }
	body.live .tv-sound { font-size: 15px; padding: 10px 14px; border-radius: 8px; flex: 1; }
	body.live .tv-foot a { font-size: 14px; padding: 8px 10px; }
	body.live .tv-row.king .tv-name, body.live .tv-row.clown .tv-name { background: none; border-radius: 0; }
	body.live .tv-row.king { background: linear-gradient(100deg, rgba(242,177,52,.32), rgba(160,110,15,.14) 55%, var(--card)); }
	body.live .tv-row.clown { background: linear-gradient(100deg, rgba(150,90,40,.42), rgba(90,50,20,.18) 55%, var(--card)); }
	body.live .tv-row .tv-name::before { display: none; }
	body.live .tv-hint { font-size: 16px; padding: 12px 16px; bottom: 20px; white-space: normal; width: calc(100% - 32px); text-align: center; border-radius: 10px; }
}
body.live .tv-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }

/* sound editor in the schock-out sound dialog */
.ps-ed { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ps-wave { position: relative; height: 96px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; cursor: pointer; touch-action: none; }
.ps-wave canvas { width: 100%; height: 100%; display: block; }
.ps-sel { position: absolute; top: 0; bottom: 0; background: rgba(242,177,52,.22); border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); pointer-events: none; }
.ps-head { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; display: none; }
.ps-times { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; color: var(--soft); font-size: 14px; }
.ps-times b { color: var(--gold); }
.ps-ed input[type=range] { width: 100%; accent-color: var(--gold); }
#dlg-ps { width: min(640px, calc(100vw - 32px)); }
.xbtn span:empty { display: none; } /* no count → icon centred, no gap on the right */

/* live soundboard */
.sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-grid button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.sb-grid button i { font-style: normal; font-size: 30px; line-height: 1; }
.sb-grid button:active { transform: scale(.96); }
.sb-grid button.sent { border-color: var(--gold); background: rgba(242,177,52,.18); }
#dlg-board { width: min(520px, calc(100vw - 32px)); }
.sb-grid .sb-add { border-style: dashed; color: var(--soft); }
.sb-grid .sb-add i { color: var(--gold); }
.sb-grid button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 2026-11-06: no tally marks on the counting page any more – the number says it all */
.counter .tally { display: none !important; }
.counter .val { justify-content: center; }
/* counting page on wide screens: "Letzte Eingaben" as a column right of the board, like the feed in the live view */
.recent li:nth-child(n+5) { display: none; }
@media (min-width: 1100px) {
	.board { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 18px; align-items: start; }
	.board > .heads, .board > #rows, .board > .totals { grid-column: 1; }
	.board > .recent { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 76px; }
	.board > .recent ol { grid-template-columns: 1fr; gap: 8px; }
	.board > .recent li:nth-child(n+5) { display: grid; }
}
/* fold button of the side column (only shown when it is a side column) */
.rc-toggle { display: none; margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line2); background: var(--card2); color: var(--soft); cursor: pointer; }
.recent h3 { display: flex; align-items: center; gap: 6px; }
@media (min-width: 1100px) {
	.rc-toggle { display: grid; place-items: center; }
	/* folded: the board keeps the full width, only a small handle floats at the right edge over it */
	body.rc-closed .board { grid-template-columns: minmax(0, 1fr); }
	body.rc-closed .board > .recent { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; padding: 8px 6px; border-radius: 10px 0 0 10px; border-right: 0; box-shadow: 0 6px 20px rgba(0,0,0,.45); }
	body.rc-closed .recent h3 { flex-direction: column; margin: 0; }
	body.rc-closed .recent h3 > i, body.rc-closed .recent .rt, body.rc-closed .recent ol { display: none; }
	body.rc-closed .rc-toggle { margin: 0; }
	body.rc-closed .rc-toggle i { transform: rotate(180deg); }
}
/* folded handle: slim and quiet, a bit more visible on hover */
@media (min-width: 1100px) {
	body.rc-closed .board > .recent { padding: 0; background: transparent; border: 0; box-shadow: none; }
	body.rc-closed .rc-toggle { width: 14px; height: 64px; border-radius: 8px 0 0 8px; border: 1px solid var(--line); border-right: 0; background: var(--card); color: var(--mute); opacity: .55; font-size: 10px; transition: opacity .2s, width .2s; }
	body.rc-closed .rc-toggle:hover, body.rc-closed .rc-toggle:focus-visible { opacity: 1; width: 20px; }
}

/* ---------- performance (2026-11-06): animations lagged on the Fire TV and iPhones ----------
   only transform/opacity are animated now (no box-shadow/background per frame), no endless pattern drift, lighter glows */
body.live .tv-row.king .tv-name::before, body.live .tv-row.clown .tv-name::before { animation: none; transform: rotate(-14deg); }
@keyframes hitred { 0%, 100% { transform: none; } 8% { transform: translateX(-1.2vw); } 16% { transform: translateX(1.2vw); } 24% { transform: translateX(-.8vw); } 32% { transform: translateX(.8vw); } 40% { transform: none; } }
@keyframes hitbig { 0%, 100% { transform: none; } 6% { transform: scale(1.03) translateX(-1.5vw); } 12% { transform: scale(1.03) translateX(1.5vw); } 18% { transform: scale(1.03) translateX(-1.2vw); } 24% { transform: scale(1.03) translateX(1.2vw); } 30% { transform: scale(1.01); } }
@keyframes hitgold { 0%, 100% { transform: none; } 10% { transform: scale(1.04); } 40% { transform: scale(1.01); } }
.tv-row.hit-red { background: rgba(240,98,90,.22); border-color: var(--red); }
.tv-row.hit-big { background: rgba(240,98,90,.32); border-color: var(--red); }
.tv-row.hit-gold { background: rgba(242,177,52,.28); border-color: var(--gold); }
.tv-row.hit-red, .tv-row.hit-big, .tv-row.hit-gold { will-change: transform; }
.fx .banner { box-shadow: 0 0 0 .4vh rgba(240,98,90,.25), 0 1.5vh 3vh rgba(0,0,0,.5); will-change: transform, opacity; }
.fx .banner.gold { box-shadow: 0 0 0 .4vh rgba(242,177,52,.3), 0 1.5vh 3vh rgba(0,0,0,.5); }
.fx .banner b { text-shadow: none; }
.fx .money-up { text-shadow: 0 .3vh .6vh rgba(0,0,0,.7); will-change: transform, opacity; }
.fx .flashscreen { will-change: opacity; }
.tv-row.king .tv-name .nm { text-shadow: 0 .3vh .6vh rgba(0,0,0,.6); }
/* idle ring bottom left (tablet + TV): time since the last entry, full = yawn */
.idle-ring { position: fixed; left: 14px; bottom: 14px; z-index: 20; width: 54px; height: 54px; display: grid; place-items: center; pointer-events: none; opacity: .75; }
.idle-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.idle-ring circle { fill: none; stroke-width: 3; }
.idle-ring .bg { stroke: var(--line2); }
.idle-ring .fg { stroke: var(--soft); stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 1) 100; transition: stroke-dasharray 1s linear; }
.idle-ring.full .fg { stroke: var(--gold); }
.idle-ring span { font-size: 12px; font-weight: 700; color: var(--soft); font-variant-numeric: tabular-nums; }
body.live .idle-ring { width: 7vh; height: 7vh; left: 2vh; bottom: 2vh; }
body.live .idle-ring span { font-size: 1.7vh; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .idle-ring { display: none; } }
/* live viewer count (+ names from the soundboard) */
.viewers { color: var(--soft); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.viewers b { color: var(--ink); }
body.live .viewers { font-size: 2vh; margin-top: .5vh; max-width: none; }
@media (max-width: 760px) { body.live .viewers { font-size: 13px; white-space: normal; } body:not(.live) .top .viewers { display: none; } }
/* play time clock */
.playclock { color: var(--soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.live .playclock { font-size: 2.2vh; margin-top: .4vh; }
@media (max-width: 760px) { body:not(.live) .top .playclock { display: none; } }
.idle-ring.reset .fg { transition: none; }
body:not(.live) .idle-ring { display: none; } /* idle ring only in the live view */

/* phone as camera: picture in the corner of every live view + own preview on the filming phone */
.cam-box { position: fixed; right: 2vh; bottom: 9vh; z-index: 25; width: min(26vw, 46vh); aspect-ratio: 16 / 9; border-radius: 1.4vh; overflow: hidden; background: #000; border: 2px solid var(--line2); box-shadow: 0 1vh 3vh rgba(0,0,0,.5); }
.cam-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-box span { position: absolute; left: .8vh; top: .8vh; padding: .3vh .9vh; border-radius: .8vh; background: rgba(0,0,0,.6); color: #fff; font-size: 1.7vh; font-weight: 700; }
.cam-self { position: fixed; inset: auto 12px 12px 12px; z-index: 60; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--red); box-shadow: 0 8px 30px rgba(0,0,0,.6); display: grid; gap: 8px; }
.cam-self video { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 8px; background: #000; }
.cam-rec { color: var(--red); font-weight: 700; font-size: 14px; }
.cam-btns { display: flex; gap: 8px; } .cam-btns button { flex: 1; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .cam-box { width: 46vw; right: 12px; bottom: 12px; border-radius: 10px; } .cam-box span { font-size: 12px; } }
@media (min-width: 761px) { .cam-self { inset: auto 2vh 9vh auto; width: 360px; } }
/* camera picture bottom left (above the idle ring), so it does not cover amounts and buttons */
.cam-box { right: auto; left: 2vh; bottom: 11vh; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .cam-box { right: auto; left: 12px; bottom: 12px; } }
/* filming phone: camera only – the preview fills the screen, scoreboard and effects are hidden */
body.cam-mode .tv-head, body.cam-mode .tv-body, body.cam-mode .tv-foot, body.cam-mode #fx, body.cam-mode #tv-hint, body.cam-mode .idle-ring, body.cam-mode .endov { display: none !important; }
body.cam-mode .cam-self { inset: 12px; width: auto; align-content: center; border-color: var(--red); }
body.cam-mode .cam-self video { max-height: calc(100dvh - 150px); }
.cam-box.in-feed { position: relative; inset: auto; left: auto; bottom: auto; width: 100%; flex: none; margin-top: 1vh; box-shadow: none; }

/* several cameras (max 4): grid of tiles – 1 full, 2 stacked, 3–4 as 2×2 (phones: tiles side by side bottom left) */
.cam-box { display: grid; gap: .8vh; aspect-ratio: auto; background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.cam-box[hidden] { display: none; }
.cam-box[data-n="3"], .cam-box[data-n="4"] { grid-template-columns: 1fr 1fr; }
.cam-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 1.2vh; overflow: hidden; background: #000; border: 2px solid var(--line2); }
.cam-tile[hidden] { display: none; }
.cam-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-tile span { position: absolute; left: .6vh; top: .6vh; padding: .2vh .8vh; border-radius: .7vh; background: rgba(0,0,0,.6); color: #fff; font-size: 1.6vh; font-weight: 700; }
.cam-box:not(.in-feed) { width: auto; display: flex; gap: 6px; }
.cam-box:not(.in-feed) .cam-tile { width: 30vw; border-radius: 8px; }
.cam-box:not(.in-feed)[data-n="1"] .cam-tile { width: 46vw; }
.cam-box:not(.in-feed) .cam-tile span { font-size: 11px; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { body.live.has-cam .tv { padding-bottom: calc(46vw * 9 / 16 + 28px); } }
/* cameras in the history column: always stacked; with 3–4 they share the space as wide strips (no 2×2 grid) */
.cam-box.in-feed { display: flex; flex-direction: column; max-height: 62vh; }
.cam-box.in-feed[data-n="3"], .cam-box.in-feed[data-n="4"] { grid-template-columns: none; }
.cam-box.in-feed .cam-tile { flex: 1 1 0; min-height: 0; aspect-ratio: auto; max-height: calc((min(24vw, 440px)) * 9 / 16); }
.cam-box.in-feed[data-n="1"] .cam-tile { flex: none; aspect-ratio: 16 / 9; height: auto; }
.cam-box.in-feed .cam-tile, .cam-box.in-feed[data-n="1"] .cam-tile { flex: none; aspect-ratio: auto; max-height: none; height: min(calc((clamp(240px, 24vw, 440px) - 2.4vw) * 9 / 16), calc(54vh / var(--n, 1))); }

/* soundboard: spoken message */
.sb-say { display: flex; gap: 8px; } .sb-say .in { flex: 1; min-width: 0; }
.fx .banner.msg { white-space: normal; max-width: 80vw; }
.fx .banner.msg span { font-size: 4.6vh; color: #fff; line-height: 1.25; }

/* counting page (tablet): cameras small bottom left, own preview compact bottom right – the board stays usable */
body:not(.live) .cam-self { inset: auto 12px 12px auto; width: 280px; }
body:not(.live) .cam-self video { max-height: 24vh; }
body:not(.live).cam-mode .cam-self video { max-height: 24vh; }
/* TV: the history is no separate box any more – its heading sits on the line of the table headings, entries start with the first row */
body.live .tv-feed { background: none; border: 0; border-radius: 0; padding: 0; gap: 1.2vh; }
body.live .tv-feed h2 { margin: 0; padding: 0 .4vw; font-size: 1.9vh; line-height: inherit; font-weight: 800; letter-spacing: .1em; }
body.live .tv-feed ol { gap: .7vh; }
body.live .tv-feed li { background: var(--card); border: 1px solid var(--line); border-left: .5vh solid var(--line2); }
body.live.is-full .tv-foot { display: none; } /* TV in fullscreen: no buttons, just the scoreboard */
/* TV: every history entry has exactly the height and spacing of a player row → entry n sits next to row n (no offset) */
@media (min-width: 761px) and (orientation: landscape), (min-width: 1101px) {
	body.live .tv-feed ol { gap: .7vh; }
	body.live .tv-feed li { height: var(--row); flex-shrink: 0; box-sizing: border-box; padding: 0 .8vw; align-content: center; row-gap: 0; overflow: hidden; }
	body.live .tv-feed .ic { width: calc(var(--row) * .62); height: calc(var(--row) * .62); font-size: calc(var(--row) * .28); }
	body.live .tv-feed b { font-size: min(2.5vh, calc(var(--row) * .32)); line-height: 1.15; }
	body.live .tv-feed .amt { font-size: min(2.3vh, calc(var(--row) * .3)); }
	body.live .tv-feed small { font-size: min(1.8vh, calc(var(--row) * .24)); line-height: 1.2; }
}
@media (min-width: 761px) and (orientation: landscape), (min-width: 1101px) {
	body.live .tv-feed ol { gap: var(--rowgap, .7vh); }
	body.live .tv-feed li { height: var(--rowh, var(--row)); }
}
/* player-card pattern (crowns / poop) drifts again – transform only on its own layer, so it stays cheap */
body.live .tv-row.king .tv-name::before, body.live .tv-row.clown .tv-name::before { animation: carddrift 18s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { body.live .tv-row .tv-name::before { animation: none; } }
.sb-voice { display: flex; align-items: center; gap: 12px; }
#sb-rec-t { font-variant-numeric: tabular-nums; color: var(--red); font-weight: 700; }

/* ---------- counting page tidy-up (2026-11-06): button groups, one status block, no doubled numbers ---------- */
.bgroup { display: inline-flex; flex: none; }
.bgroup > .btn:not([hidden]) { border-radius: 0; margin-left: -1px; }
.bgroup > .btn:not([hidden]):first-child, .bgroup > .btn[hidden] + .btn:not([hidden]) { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.bgroup > .btn:not([hidden]):last-child, .bgroup > .btn:not([hidden]):has(+ .btn[hidden]:last-child) { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.bgroup > .btn:only-child, .bgroup > .btn:not([hidden]):first-child:has(+ .btn[hidden]:last-child) { border-radius: var(--r-sm); }
.top .dock { align-items: center; }
.top .dock #b-end { margin-left: 4px; }
.status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; line-height: 1.25; }
.status > span { display: inline-flex; align-items: center; gap: 6px; }
.status .viewers { max-width: 240px; }
.heads .tot { display: none !important; }          /* the totals row under the board already shows them */
.money::before { display: none; }                   /* the share bar doubled the % below the amount */
.heads > span:nth-child(4) i { display: none; }
@media (max-width: 760px) { .status .playclock, .status .viewers { display: none; } }
@media (max-width: 760px) {
	.dock { gap: 8px; }
	.dock .bgroup { flex: 1; min-width: 0; display: flex; }
	.dock .bgroup .btn { flex: 1; min-width: 0; padding: 0 6px; gap: 6px; font-size: 14px; }
	.dock #b-end { flex: none; width: 48px; padding: 0; }
	.dock #b-end span { display: none; }
}
#food-label[hidden] { display: none !important; }
.status .st1 { display: flex; align-items: center; gap: 10px; } /* play time and sync state on one line */
/* counting page: the king / clown card pattern drifts too (same cheap transform animation as on the TV) */
.prow.king .pname::before, .prow.clown .pname::before { animation: carddrift 18s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .prow .pname::before { animation: none; } }
/* phones: camera pictures – small in the corner, tap = full screen width (stacked), tap again = small */
.cam-box:not(.in-feed) { cursor: pointer; }
.cam-box:not(.in-feed) .cam-tile::after { content: "⤢"; position: absolute; right: 4px; bottom: 2px; color: #fff; font-size: 14px; text-shadow: 0 1px 3px #000; }
.cam-box.big:not(.in-feed) { left: 12px; right: 12px; bottom: 12px; flex-direction: column; max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 45; }
.cam-box.big:not(.in-feed) .cam-tile, .cam-box.big:not(.in-feed)[data-n="1"] .cam-tile { width: 100%; flex: none; border-radius: 12px; }
.cam-box.big:not(.in-feed) .cam-tile span { font-size: 14px; }
.cam-box.big:not(.in-feed) .cam-tile::after { content: "⤡"; font-size: 20px; right: 8px; bottom: 6px; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	body.live.has-cam .tv-foot { margin-bottom: calc(46vw * 9 / 16 + 16px); } /* buttons stay above the camera pictures */
	body.live .viewers { font-size: 14px; white-space: normal; }
	body.live .tv-feed h2 { font-size: 12px; }
	body.live .tv-feed .empty { font-size: 14px; }
	body.live .tv-total .playclock { font-size: 16px; }
}
body.live .tv-foot .tv-sound { white-space: nowrap; }
.tv-avg { color: var(--soft); font-size: 2.4vh; font-weight: 700; margin: .3vh 0 .2vh; }
.tv-avg b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { body.live .tv-avg { width: 100%; font-size: 15px; } }
.tv-total .tv-avg b { display: inline; font-size: inherit; line-height: inherit; color: var(--ink); }
.totals .grand .avg { display: block; color: var(--soft); font-size: 13px; font-weight: 700; margin-top: 2px; }
.totals .grand .avg { white-space: nowrap; }
/* phones / upright tablets: camera pictures sit in the page above the buttons (they covered the soundboard button); tap = big overlay */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	.cam-box:not(.in-feed):not(.big) { position: static; flex-wrap: wrap; gap: 8px; }
	.cam-box:not(.in-feed):not(.big) .cam-tile, .cam-box:not(.in-feed):not(.big)[data-n="1"] .cam-tile { width: calc(50% - 4px); }
	body.live.has-cam .tv, body.live.has-cam .tv-foot { padding-bottom: 0; margin-bottom: 0; }
	body.live.has-cam .tv { padding-bottom: 16px; }
}
body.live .tv-total .tv-avg b { font-size: inherit !important; display: inline !important; }
/* phones: "big" also stays in the page (full width, stacked) – no overlay over the buttons */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	.cam-box.big:not(.in-feed) { position: static; inset: auto; max-height: none; overflow: visible; z-index: auto; flex-direction: column; gap: 8px; }
	.cam-box.big:not(.in-feed) .cam-tile { width: 100%; }
}
/* top bar order (wide screens): status · undo · [Essen|Verlauf] · [Live-Link][Soundboard|Kamera] · [Vollbild|Größe|Einstellungen] · Spiel beenden (last, away from the rest) */
@media (min-width: 761px) {
	.top .dock { display: contents; }
	.top .status { order: 2; }
	.top #b-undo { order: 3; }
	.top .dock .bgroup:first-child { order: 4; }
	.top .dock .g-live { order: 5; margin-right: -9px; }
	.top .dock .g-live .btn { border-radius: var(--r-sm) 0 0 var(--r-sm); }
	.top .g-fun { order: 6; }
	.top .g-fun .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
	.top .g-view { order: 7; }
	.top .dock #b-end { order: 8; margin-left: 6px; }
	.top .dock .g-live .btn span { display: none; }
}
/* live view on phones / upright tablets: no payment overview at the end, just a thank-you (TV + landscape tablets keep the full overview) */
.end-thanks { display: none; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	body.live .endov .endbox { display: none; }
	body.live .endov .end-thanks { display: block; text-align: center; padding: 32px 24px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); max-width: 360px; }
	body.live .end-thanks .big { font-size: 64px; line-height: 1; }
	body.live .end-thanks h2 { margin: 14px 0 6px; font-size: 26px; }
	body.live .end-thanks p { margin: 0; color: var(--soft); font-size: 17px; }
}
/* effects never leave the screen (phones went wider than the screen with big banners / bursts) */
.fx { overflow: hidden; contain: strict; }
body.live { overflow-x: hidden; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
	body.live .fx .banner { white-space: normal; width: max-content; max-width: 88vw; padding: 2.2vh 5vw; border-radius: 2vh; box-sizing: border-box; }
	body.live .fx .banner b { font-size: min(11vh, 11vw); overflow-wrap: anywhere; }
	body.live .fx .banner.small b { font-size: min(7.5vh, 8.5vw); }
	body.live .fx .banner span { font-size: min(4.4vh, 5vw); }
	body.live .fx .p { font-size: min(var(--s, 6vh), 11vw); }
	body.live .fx .money-up { font-size: min(5.5vh, 7vw); }
}

/* end screen: paid ticks */
.paybtn { font: inherit; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink); cursor: pointer; white-space: nowrap; }
.paybtn.on { background: rgba(57,194,127,.18); border-color: rgba(57,194,127,.6); color: var(--green); }
.paid-ok { color: var(--green); font-weight: 800; }
.end-tbl tr.is-paid td:not(.payamt) { opacity: .5; }
/* group login page */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.card.login { width: min(380px, 100%); display: grid; gap: 12px; text-align: center; padding: 28px 24px; }
.card.login .ico { font-size: 40px; color: var(--gold); }
.card.login h1 { margin: 0; font-size: 24px; }
.card.login .small { font-size: 12.5px; }
/* ---------- statistics (rebuild 2026-11-07) ---------- */
.stats .section-head { margin-top: 26px; }
.stats .kpis { margin-bottom: 12px; }
.book { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.book-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.book-card b { font-size: 16px; }
.book-card .amt { color: var(--red); font-weight: 800; font-variant-numeric: tabular-nums; }
.book-card.clear .amt { color: var(--green); }
.book-card small { color: var(--mute); font-size: 12px; }
.book-card.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.tbl tr.is-paid td { opacity: .5; }
.tbl tr.is-paid td:last-child { opacity: 1; }
.chartcard { height: 280px; padding: 12px; margin-bottom: 12px; }
.records { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.record { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.record small { color: var(--mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.record b { font-size: 22px; color: var(--gold); font-variant-numeric: tabular-nums; }
.record span { font-size: 14px; }
.rank { display: grid; gap: 6px; }
.rank-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.rank-row i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(242,177,52,.85), rgba(242,177,52,.35)); width: var(--w); }
.rank.clown .rank-row i { background: linear-gradient(90deg, rgba(176,122,77,.9), rgba(176,122,77,.35)); }
.rank-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl a { color: inherit; }
/* new game: "who plays?" step */
.who { display: grid; gap: 10px; }
.who-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--card2); color: var(--ink); font: inherit; cursor: pointer; }
.who-btn i { grid-row: 1 / 3; font-size: 22px; color: var(--gold); width: 28px; text-align: center; }
.who-btn b { font-size: 17px; }
.who-btn small { color: var(--mute); font-size: 13px; }
.who-btn:hover, .who-btn:focus-visible { border-color: var(--gold); outline: none; }
/* an open dialog: the page behind it does not scroll */
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }
/* own player card (player page): colour + emoji pattern on the name, same look as the king / clown cards */
.tv-row.own .tv-name, .prow.own .pname { background: linear-gradient(100deg, color-mix(in srgb, var(--pc) 45%, transparent), color-mix(in srgb, var(--pc) 18%, transparent) 55%, transparent); }
.tv-row.own .tv-name[data-pat]::before, .prow.own .pname[data-pat]::before { content: attr(data-pat);
	position: absolute; z-index: -1; left: -10%; top: -60%; width: 140%; height: 220%;
	white-space: pre; line-height: 1.9; letter-spacing: .25em; transform: rotate(-14deg); opacity: .32;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); pointer-events: none; }
.tv-row.own .tv-name .nm { text-shadow: 0 .3vh .6vh rgba(0,0,0,.6); }
/* player settings page */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pcard { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.pc-preview { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); min-height: 52px; overflow: hidden; }
.pc-preview .pname { margin: -10px 0 -10px -14px; padding: 10px 14px; flex: 1; font-size: 18px; font-weight: 800; }
.pc-preview small { color: var(--mute); font-size: 12px; white-space: nowrap; position: relative; }
.pc-edit { display: grid; grid-template-columns: 1fr 90px; gap: 8px 10px; align-items: end; }
.pc-edit .pc-quick, .pc-edit .pc-btns, .pc-edit .pc-sound, .pc-edit .pc-team { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-quick .pick { min-width: 40px; padding: 4px 8px; font-size: 18px; }
.pc-color { padding: 4px; height: 42px; }
.pc-sound .sub { flex: 1 1 100%; }
.players .section-head { margin-top: 24px; }


.pc-preview .pc-toggle { position: relative; width: 36px; min-height: 36px; flex: none; }
.pcards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.team-lock { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 12px; }
.team-lock .in { max-width: 220px; }
.players .tabs { margin-bottom: 4px; }
/* own logo on the player card: the image repeated as a rotated, faded pattern */
.tv-row.own-img .tv-name::before, .prow.own-img .pname::before { content: ""; position: absolute; z-index: -1; left: -20%; top: -80%; width: 160%; height: 260%;
	background-image: var(--pimg); background-repeat: repeat; background-size: 2.92em 2.92em; transform: rotate(-14deg); opacity: .4;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); pointer-events: none; }
body.live .tv-row.own-img .tv-name::before { background-size: calc(var(--row) * .535) calc(var(--row) * .535); animation: carddrift 18s linear infinite; }
.icon-lib { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.icon-lib img, .pc-icons img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); padding: 3px; }
.pc-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-icons button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px; }
.pc-icons button.on img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.icon-box { padding: 14px; margin: 4px 0 14px; }
/* own card: how the pattern moves (chosen per player) – transform only */
@keyframes cardrise { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(-14deg) translateY(-18%); } }
@keyframes cardpulse { 0%, 100% { transform: rotate(-14deg) scale(1); } 50% { transform: rotate(-14deg) scale(1.12); } }
@keyframes cardwobble { 0%, 100% { transform: rotate(-14deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(-20deg); } }
.own.anim-drift .tv-name::before, .own.anim-drift .pname::before { animation: carddrift 18s linear infinite !important; }
.own.anim-fast .tv-name::before, .own.anim-fast .pname::before { animation: carddrift 5s linear infinite !important; }
.own.anim-rise .tv-name::before, .own.anim-rise .pname::before { animation: cardrise 9s linear infinite !important; }
.own.anim-pulse .tv-name::before, .own.anim-pulse .pname::before { animation: cardpulse 2.4s ease-in-out infinite !important; }
.own.anim-wobble .tv-name::before, .own.anim-wobble .pname::before { animation: cardwobble 3s ease-in-out infinite !important; }
.own.anim-still .tv-name::before, .own.anim-still .pname::before { animation: none !important; }
.own .tv-name::before, .own .pname::before { will-change: transform; }
.pc-anim-l { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .own .tv-name::before, .own .pname::before { animation: none !important; } }

/* ---------- card patterns as repeated TILES (2026-11-07): the drift moves exactly one tile, so the loop has no jump ----------
   king 👑 / clown 💩 / own emoji = SVG emoji tile, own logo = padded PNG; --ts = tile size */
.tv-row { --ts: calc(var(--row) * .5); }
.prow, .pc-preview { --ts: 34px; }
.tv-row.king, .prow.king { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='70' font-size='58' text-anchor='middle'%3E%F0%9F%91%91%3C/text%3E%3C/svg%3E"); }
.tv-row.clown, .prow.clown { --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='70' font-size='58' text-anchor='middle'%3E%F0%9F%92%A9%3C/text%3E%3C/svg%3E"); }
.tv-row.king .tv-name::before, .tv-row.clown .tv-name::before, .tv-row.own .tv-name::before,
.prow.king .pname::before, .prow.clown .pname::before, .prow.own .pname::before {
	content: "" !important; position: absolute; z-index: -1; left: -40%; top: -120%; width: 220%; height: 340%;
	background-image: var(--tile, none) !important; background-repeat: repeat; background-size: var(--ts) var(--ts) !important;
	transform: rotate(-14deg); opacity: .4; white-space: normal;
	-webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); pointer-events: none; }
@keyframes carddrift { from { transform: rotate(-14deg) translateX(0); } to { transform: rotate(-14deg) translateX(calc(-1 * var(--ts))); } }
@keyframes cardrise { from { transform: rotate(-14deg) translateY(0); } to { transform: rotate(-14deg) translateY(calc(-1 * var(--ts))); } }
.tv-row.king .tv-name::before, .tv-row.clown .tv-name::before, .prow.king .pname::before, .prow.clown .pname::before { animation: carddrift 5s linear infinite; }
.own.anim-drift .tv-name::before, .own.anim-drift .pname::before { animation: carddrift 5s linear infinite !important; }
.own.anim-fast .tv-name::before, .own.anim-fast .pname::before { animation: carddrift 1.6s linear infinite !important; }
.own.anim-rise .tv-name::before, .own.anim-rise .pname::before { animation: cardrise 4s linear infinite !important; }
/* (tile pattern rules appended) */

/* ---------- 2026-11-07: the pattern element stays still (fixed fade on the right) and only the TILES move –
   so logos do not change their transparency while they slide. One tile per loop = seamless. ---------- */
@keyframes carddrift { from { background-position: 0 0; } to { background-position: calc(-1 * var(--ts)) 0; } }
@keyframes cardrise { from { background-position: 0 0; } to { background-position: 0 calc(-1 * var(--ts)); } }
@keyframes cardpulse { 0%, 100% { background-size: var(--ts) var(--ts); } 50% { background-size: calc(var(--ts) * 1.12) calc(var(--ts) * 1.12); } }
@keyframes cardwobble { 0%, 100% { background-position: 0 0; } 25% { background-position: calc(var(--ts) * .12) calc(var(--ts) * -.08); } 75% { background-position: calc(var(--ts) * -.12) calc(var(--ts) * .08); } }

/* card backgrounds (skins) – like COD calling cards; each fades out to the right */
.own.skin-gold .tv-name, .own.skin-gold .pname { background: linear-gradient(100deg, #6b4e12 0%, #f6d77a 22%, #b8860b 40%, #ffe9a8 52%, rgba(160,110,15,.35) 75%, transparent) !important; }
.own.skin-camo .tv-name, .own.skin-camo .pname { background:
	linear-gradient(90deg, transparent 45%, var(--card) 92%),
	radial-gradient(circle at 20% 30%, #4b5b2a 0 18%, transparent 19%), radial-gradient(circle at 70% 60%, #6b5a36 0 20%, transparent 21%),
	radial-gradient(circle at 40% 80%, #2f3a1c 0 16%, transparent 17%), radial-gradient(circle at 85% 20%, #3d4a24 0 14%, transparent 15%),
	#55663a !important; background-size: 100% 100%, 90px 70px, 110px 80px, 70px 90px, 80px 60px, auto !important; }
.own.skin-carbon .tv-name, .own.skin-carbon .pname { background:
	linear-gradient(90deg, transparent 45%, var(--card) 92%),
	repeating-linear-gradient(45deg, #1b1e23 0 6px, #2a2f37 6px 12px), #1b1e23 !important; }
.own.skin-neon .tv-name, .own.skin-neon .pname { background: linear-gradient(100deg, rgba(255,0,170,.75), rgba(0,229,255,.55) 45%, transparent 85%) !important; }
.own.skin-rainbow .tv-name, .own.skin-rainbow .pname { background: linear-gradient(100deg, rgba(255,59,48,.7), rgba(255,204,0,.6) 18%, rgba(52,199,89,.55) 36%, rgba(0,122,255,.5) 54%, rgba(175,82,222,.4) 70%, transparent 90%) !important; }
.own.skin-ice .tv-name, .own.skin-ice .pname { background: linear-gradient(100deg, rgba(190,235,255,.75), rgba(90,170,240,.45) 45%, transparent 85%) !important; }
.own.skin-ice .tv-name .nm, .own.skin-ice .pname span { color: #062a43; text-shadow: none; }
.own.skin-lava .tv-name, .own.skin-lava .pname { background: linear-gradient(100deg, rgba(120,10,0,.9), rgba(255,90,0,.75) 30%, rgba(255,190,40,.45) 55%, transparent 85%) !important; }
/* fade of the pattern measured on the VISIBLE name area (the pattern layer is 220 % wide, starting at -40 %):
   fully visible on the left → 0 at the right edge, so logos slide in smoothly from nothing */
.tv-row.king .tv-name::before, .tv-row.clown .tv-name::before, .tv-row.own .tv-name::before,
.prow.king .pname::before, .prow.clown .pname::before, .prow.own .pname::before {
	-webkit-mask-image: linear-gradient(90deg, #000 18%, rgba(0,0,0,.85) 30%, transparent 62%) !important;
	mask-image: linear-gradient(90deg, #000 18%, rgba(0,0,0,.85) 30%, transparent 62%) !important; }
/* the card background itself: 100 % on the left → 0 % at the right edge */
.own.skin-color .tv-name, .own.skin-color .pname { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, transparent), color-mix(in srgb, var(--pc) 22%, transparent) 55%, transparent 100%) !important; }
/* end screen cards: only WHOLE emojis (no cut-off ones at the edges) – tiles with background-repeat: space, not rotated */
.pod::before { content: "" !important; inset: 6px 8px; transform: none; white-space: normal; background-repeat: space; background-size: 30px 30px; opacity: .22; }
.pod.king::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='72' font-size='62' text-anchor='middle'%3E%F0%9F%91%91%3C/text%3E%3C/svg%3E"); }
.pod.loser::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='72' font-size='62' text-anchor='middle'%3E%F0%9F%92%A9%3C/text%3E%3C/svg%3E"); }
/* end screen cards (correction): diagonal and moving like the player cards, over the WHOLE card (rotated layer much larger than the card) */
.pod { --ts: 30px; }
.pod::before { inset: -120% -30%; transform: rotate(-12deg); background-repeat: repeat; background-size: var(--ts) var(--ts); opacity: .25; animation: carddrift 5s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pod::before { animation: none; } }
/* players who came later / left early */
.prow.away, .tv-row.away { opacity: .5; }
.prow.away .counter button.plus { pointer-events: none; opacity: .3; }
.pname em[data-att]:not([data-att=""])::after { content: attr(data-att); font-style: normal; font-size: 11px; font-weight: 700; color: var(--soft); margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line2); }
.tv-name .att { flex: none; font-size: calc(var(--row) * .2); font-weight: 700; color: var(--soft); padding: .2vh .8vh; border-radius: 999px; border: 1px solid var(--line2); }
/* presence badge: small line under the name (does not take width from the name) */
.pname em[data-att]:not([data-att=""])::after { position: absolute; left: 14px; bottom: 5px; margin: 0; padding: 0; border: 0; font-size: 10.5px; white-space: nowrap; }
.prow .pname { position: relative; }
#pl-duty + * , #dlg-player .check + * { }
.duty-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; margin-top: 4px; }
.duty-row small { display: block; color: var(--mute); font-weight: 500; font-size: 12px; margin-top: 2px; }
.pl-fix .btn { min-height: 34px; font-size: 13px; }
/* end screen: how each amount came about */
.end-tbl .cost { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 500; color: var(--mute); line-height: 1.35; white-space: normal; }
body.live .end-tbl .cost { font-size: 1.5vh; }
.end-tbl td.payamt { white-space: nowrap; }
.end-tbl .chip.att { margin-left: 6px; font-size: 11px; vertical-align: middle; }
/* end screen cards: pattern size relative to the CARD (container units) → same look on PC, tablet, phone and TV, and bigger */
.pod { container-type: inline-size; }
.pod::before { --ts: max(34px, 7.5cqi); background-size: var(--ts) var(--ts); }
/* groups page */
.groups-list { display: grid; gap: 14px; margin-top: 14px; }
.card.group { padding: 16px; display: grid; gap: 10px; }
.group-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.group-head h2 { margin: 0; font-size: 20px; }
.group-form { display: grid; gap: 10px; }
.group-form textarea { resize: vertical; font: inherit; }


/* dates page (termine.php, 2026-11-07) */
.dates .team-sel { width: auto; }
.dates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.dates-grid .card { display: grid; gap: 12px; }
.dates-grid h2 { margin: 0; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.dates-grid h2 i { color: var(--gold); }
.date-list { display: grid; gap: 6px; }
.date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.date-row small { display: block; color: var(--soft); font-size: 12.5px; }
.date-row.off { opacity: .6; }
.mult-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mult-box > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; background: var(--bg2); }
.mult-box b { display: block; font-size: 30px; color: var(--gold); }
.mult-box small { color: var(--soft); }
.rule-list { display: grid; gap: 8px; }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rule .in { width: auto; min-width: 0; }
.rule input[type=number] { width: 70px; }
.dates .chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.dates .chk input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); margin-top: 1px; }
.dates ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); margin-top: 14px; background: linear-gradient(transparent, var(--bg) 40%); }
.btn.next-date small { font-weight: 500; opacity: .8; }
.dates main.wrap { padding-bottom: 20px; }
.push-box { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.push-box h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.push-box h3 i { color: var(--gold); }
.pick.push i { margin-right: 4px; opacity: .7; }
.pick.push.on i { opacity: 1; }
/* start page (2026-11-07): links in the bar on wide screens, a drop-down menu on phones */
.menu { display: contents; }
.menu-btn { display: none; }
@media (max-width: 760px) {
	body.home .menu-btn { display: inline-flex; order: 3; }
	body.home .top #new { order: 2; padding: 0 12px; min-height: 42px; white-space: nowrap; }
	body.home .menu { display: none; position: absolute; top: calc(100% + 6px); right: max(14px, env(safe-area-inset-right)); min-width: 230px; flex-direction: column; gap: 4px; padding: 8px;
		background: var(--card); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
	body.home .menu.open { display: flex; }
	body.home .menu .btn { justify-content: flex-start; border: 0; min-height: 46px; width: 100%; font-size: 15px; }
	body.home .menu .btn i { width: 22px; text-align: center; color: var(--gold); }
	body.home .menu .next-date small { margin-left: 6px; }
}
html, body { max-width: 100%; overflow-x: clip; }

/* account page (konto.php, 2026-11-07) */
.acc { max-width: 460px; display: grid; gap: 14px; padding-top: 18px; }
.acc-card { display: grid; gap: 14px; }
.acc-card h2, .acc-card h3 { margin: 0; }
.acc-form { display: grid; gap: 12px; }
.acc .btn.big { min-height: 48px; justify-content: center; font-size: 16px; }
.acc .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.acc .seg button { min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--soft); font: inherit; font-weight: 700; cursor: pointer; }
.acc .seg button.on { background: var(--gold); color: var(--gold-ink); }
.acc .link-btn { background: none; border: 0; color: var(--soft); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; justify-self: center; }
.acc .done { text-align: center; display: grid; gap: 8px; }
.acc .done i { font-size: 40px; color: var(--gold); }
.acc .center { text-align: center; justify-content: center; }
.acc .note { border-color: rgba(240,98,90,.4); }
.who-me { display: flex; gap: 14px; align-items: center; }
.who-me .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-size: 24px; font-weight: 800; flex: none; }
.my-groups { display: grid; gap: 6px; }
.my-group { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); text-decoration: none; color: inherit; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.role-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); min-height: 46px; }
.role-row .in { width: auto; min-height: 34px; padding: 0 8px; }
.group-edit summary { list-style: none; width: max-content; }
.group-edit summary::-webkit-details-marker { display: none; }
.group-edit[open] summary { margin-bottom: 10px; }
.dates main.readonly .dates-grid button:not(.pick.push), .dates main.readonly #add-extra, .dates main.readonly [data-add], .dates main.readonly [data-skip], .dates main.readonly [data-unskip], .dates main.readonly [data-del] { display: none; }
.dates main.readonly .dates-grid .in, .dates main.readonly .dates-grid .pick, .dates main.readonly .dates-grid input { pointer-events: none; opacity: .75; }