/* Base colours (the Pub's); every skin sets its own in skins.css (data-skin on <html>). */
:root {
  --bg: #0f2119; --panel: #173025; --panel-2: #1f3d2f; --line: #2c4d3c;
  --text: #f4ecd6; --muted: #a9b79f; --accent: #e3a63c; --accent-text: #241600;
  --good: #7cc46b; --bad: #e0574a;
  --b-edge: #0b0f0c; --b-dark: #1c1c1a; --b-light: #efe3c2; --b-red: #b52a24;
  --b-green: #237a43; --b-wire: #cfc4a3; --b-num: #f4ecd6;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }

/* ============================ Trefferboard ============================ */
.hitboard { width: 100%; height: 100%; display: block; }
.hitboard .b-edge { fill: var(--b-edge); }
.hitboard .b-dark { fill: var(--b-dark); }
.hitboard .b-light { fill: var(--b-light); }
.hitboard .b-red { fill: var(--b-red); }
.hitboard .b-green { fill: var(--b-green); }
.hitboard .b-wire { fill: none; stroke: var(--b-wire); stroke-width: 0.8; opacity: .7; }
.hitboard .b-num { fill: var(--b-num); font-size: 22px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.hitboard .target { fill: var(--accent); fill-opacity: .45; stroke: var(--accent); stroke-width: 2.5; pointer-events: none;
  animation: target-pulse 1.4s ease-in-out infinite alternate; }
@keyframes target-pulse { from { fill-opacity: .25; } to { fill-opacity: .6; } }
.hitboard .hit { cursor: pointer; }
.hitboard .hit circle { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.hitboard .hit text { fill: var(--accent-text); font-size: 12px; font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.hitboard .hit.sel circle { fill: #fff; stroke: var(--accent); stroke-width: 4; }
.hitboard .hit.sel text { fill: #000; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ============================ TV ============================ */
body.tv { height: 100vh; overflow: hidden; }
.tv #app { height: 100vh; display: grid; grid-template-rows: 8vh 1fr 21vh; }

.topbar {
  display: flex; align-items: center; gap: 3vh; padding: 0 3vh;
  font-size: 3vh; color: var(--muted); border-bottom: 1px solid var(--line);
}
.topbar .title { color: var(--text); font-weight: 600; }
.topbar .leg { flex: none; }

.status-icons { display: flex; align-items: center; gap: 0.8vh; font-size: 2.4vh; color: var(--muted); cursor: default; }
.status-icons .cam-icon { font-family: "Segoe UI Emoji", sans-serif; font-size: 2.6vh; margin-right: 0.2vh; }
.status-icons .cam {
  width: 3vh; height: 3vh; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8vh; font-weight: 800; color: #fff; background: var(--muted);
}
.status-icons .cam.ok { background: var(--good); color: #04130b; }
.status-icons .cam.error { background: var(--bad); }
.status-icons .act { font-family: "Segoe UI Emoji", sans-serif; font-size: 3vh; margin-left: 1vh; }
.status-icons .act.out { animation: pulse-out 1.2s ease-in-out infinite; }
.status-icons .warn { color: var(--bad); font-size: 3vh; }
@keyframes pulse-out { 50% { transform: scale(1.2); } }

.players { display: grid; gap: 2vh; padding: 2vh 3vh; }
.players.n1 { grid-template-columns: 1fr; }
.players.n2 { grid-template-columns: repeat(2, 1fr); }
.players.n3 { grid-template-columns: repeat(3, 1fr); }
.players.n4 { grid-template-columns: repeat(4, 1fr); }
.players.n5, .players.n6 { grid-template-columns: repeat(3, 1fr); }

.player {
  background: var(--panel); border-radius: 2vh; padding: 2vh 3vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 0.5vh solid transparent; opacity: 0.6; transition: opacity .2s, border-color .2s;
  min-height: 0;
}
.player.active { border-color: var(--accent); opacity: 1; }
.player .name { font-size: 5vh; font-weight: 600; }
.player .remaining { font-size: 24vh; font-weight: 700; line-height: 1; margin: 1vh 0; }
.players.n3 .remaining { font-size: 18vh; }
.players.n4 .remaining, .players.n5 .remaining, .players.n6 .remaining { font-size: 12vh; }
.player .meta { display: flex; gap: 3vh; font-size: 3vh; color: var(--muted); flex-wrap: wrap; justify-content: center; }
.player .meta b { color: var(--text); }
.player .closed { color: var(--accent); }

.turnbar {
  display: grid; grid-template-columns: repeat(3, 1fr) 1fr 2fr; gap: 2vh;
  padding: 2vh 3vh; background: var(--panel); border-top: 1px solid var(--line);
}
.dart, .total, .checkout {
  background: var(--panel-2); border-radius: 1.5vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dart span { font-size: 8vh; font-weight: 700; }
.dart small { font-size: 3vh; color: var(--muted); }
.dart.empty { opacity: 0.4; }
.total { font-size: 10vh; font-weight: 700; color: var(--accent); }
.checkout { font-size: 6vh; font-weight: 700; }
.checkout small { font-size: 2.6vh; font-weight: 400; color: var(--muted); }

.banner {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);
  padding: 4vh 8vh; border-radius: 3vh; font-size: 10vh; font-weight: 800;
  background: var(--accent); color: var(--accent-text); white-space: nowrap;
  box-shadow: 0 2vh 8vh rgba(0, 0, 0, .6);
}
.banner.bust { background: var(--bad); color: #fff; }
.banner.pull { font-size: 6vh; background: var(--panel-2); color: var(--text); top: auto; bottom: 23vh; transform: translateX(-50%); }
.banner.leg_won, .banner.match_won { background: var(--good); color: #04130b; }
.banner small { display: block; font-size: 3.2vh; font-weight: 600; text-align: center; margin-top: 1.5vh; opacity: .8; }
.hint {
  position: fixed; right: 3vh; bottom: 23vh; padding: 1.5vh 3vh; border-radius: 1.5vh;
  background: var(--bad); font-size: 3vh;
}

.idle { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; }
.idle h1 { font-size: 14vh; margin: 0; color: var(--accent); }
.idle p { font-size: 4vh; margin: 0; color: var(--muted); }
.idle .url { font-size: 6vh; color: var(--text); font-weight: 600; }
.idle-corner { position: fixed; left: 3vh; bottom: 3vh; }

.cricket-wrap { padding: 1.5vh 3vh; min-height: 0; overflow: hidden; }
.cricket { width: 100%; height: 100%; border-collapse: separate; border-spacing: 1vh 0.5vh; table-layout: fixed; }
.cricket th, .cricket td { background: var(--panel); border-radius: 1vh; text-align: center; line-height: 1; }
.cricket thead th { padding: 0.8vh; opacity: .6; border: .4vh solid transparent; }
.cricket thead th.active { opacity: 1; border-color: var(--accent); }
.cricket .name { font-size: 3.4vh; font-weight: 600; }
.cricket .score { font-size: 6.5vh; font-weight: 700; margin: 0.5vh 0; }
.cricket .meta { font-size: 2.2vh; color: var(--muted); }
.cricket th.num { width: 16vh; font-size: 4.4vh; background: var(--panel-2); }
.cricket td { font-size: 4.8vh; font-weight: 700; }
.turnbar.cricket { grid-template-columns: repeat(3, 1fr) 3fr; }
.cricket td.active { background: var(--panel-2); }
.cricket td.shut { color: var(--good); }

/* Game view: scores left, hit board right */
.game { display: grid; grid-template-columns: 1fr auto; gap: 2vh; padding: 2vh 3vh; min-height: 0; }
.game .players { padding: 0; min-height: 0; }
.game .chalkboard { height: 100%; }
.game .cricket-wrap { padding: 0; }
.game .player .remaining { font-size: 20vh; }
.game .players.n3 .remaining { font-size: 14vh; }
.game .players.n4 .remaining, .game .players.n5 .remaining, .game .players.n6 .remaining { font-size: 10vh; }
.board-col { height: 100%; aspect-ratio: 1; min-height: 0; }
.board-col.picking { cursor: crosshair; }
.board-col.picking .hitboard { filter: drop-shadow(0 0 1.2vh var(--accent)); }

/* Dart boxes: dimmed checkout suggestion in empty boxes, "+" to add a dart */
.dart { position: relative; }
.dart.suggest span { color: var(--accent); opacity: .7; }
.dart.suggest small { color: var(--accent); opacity: .7; font-size: 2.2vh; text-transform: uppercase; letter-spacing: .1em; }
.dart .add {
  position: absolute; top: 0.8vh; right: 1.2vh; font-style: normal; font-size: 3.2vh;
  color: var(--muted); opacity: .7;
}

/* Bottom right: corrections and turn actions */
.actions-panel {
  background: var(--panel-2); border-radius: 1.5vh; padding: 1.6vh 2vh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2vh;
  border: 0.4vh solid transparent;
}
.actions-panel.on { border-color: var(--accent); }
.actions-panel p { margin: 0; font-size: 2.5vh; color: var(--muted); font-weight: 600; }
.actions-panel.on p { color: var(--accent); }
.actions-panel div { display: flex; gap: 1.2vh; }
.actions-panel button {
  flex: 1; font-size: 2.6vh; font-weight: 700; padding: 1.4vh 1vh; border-radius: 1.2vh;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
}
.actions-panel button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.top-btn {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 1vh;
  padding: 0.7vh 1.6vh; font-size: 2.2vh; color: var(--muted);
}
.top-btn small { margin-left: 0.6vh; opacity: .7; }
.top-btn:hover { color: var(--text); }
.turnbar .dart[data-slot] { cursor: pointer; }
.turnbar .dart[data-slot]:hover { outline: 0.4vh solid var(--line); }
.turnbar .dart.sel, .turnbar .dart.sel:hover { outline: 0.6vh solid var(--accent); }
.turnbar .dart.empty small { font-size: 2.6vh; }

/* ============================ Kreidetafel ============================ */
@font-face { font-family: "Chalk"; src: url("/static/fonts/CabinSketch-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Chalk"; src: url("/static/fonts/CabinSketch-Bold.ttf") format("truetype"); font-weight: 700; }

:root { --chalk: #f3efe4; --chalk-dim: rgba(243, 239, 228, .55); --chalk-yellow: #ffe27a; --chalk-red: #ff9a8f; }

/* Wooden frame around a slate */
.chalkboard {
  min-height: 0; padding: 1.3vh; border-radius: 1.6vh;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .08) 0 0.5vh, rgba(255, 255, 255, .03) 0.5vh 1.4vh),
    linear-gradient(135deg, #7a4b24, #9a6332 35%, #6a3f1c 65%, #8a5729);
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .55), inset 0 0 0.6vh rgba(0, 0, 0, .6);
}
.slate {
  height: 100%; border-radius: 0.8vh; overflow: hidden;
  background:
    radial-gradient(ellipse 40% 25% at 25% 30%, rgba(255, 255, 255, .05), transparent 70%),
    radial-gradient(ellipse 35% 20% at 70% 65%, rgba(255, 255, 255, .04), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #33423c 0%, #253129 60%, #1c2620 100%);
  box-shadow: inset 0 0 3vh rgba(0, 0, 0, .55);
  font-family: "Chalk", "Segoe Print", cursive; color: var(--chalk);
  text-shadow: 0 0 0.25vh rgba(255, 255, 255, .35);
}
.slate.cols { display: grid; }
.slate.cols.n1 { grid-template-columns: 1fr; }
.slate.cols.n2 { grid-template-columns: repeat(2, 1fr); }
.slate.cols.n3 { grid-template-columns: repeat(3, 1fr); }
.slate.cols.n4, .slate.cols.n5, .slate.cols.n6 { grid-template-columns: repeat(4, 1fr); }

.chalk-col { display: flex; flex-direction: column; align-items: center; padding: 1.5vh 1vh; min-height: 0; }
.chalk-col + .chalk-col { border-left: 0.35vh solid var(--chalk-dim); }
.chalk-name {
  font-size: 5vh; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 0.35vh solid var(--chalk-dim); padding: 0 2vh 0.4vh;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.chalk-col.active .chalk-name { color: var(--chalk-yellow); border-color: var(--chalk-yellow); }
.chalk-left { font-size: 15vh; font-weight: 700; line-height: 1; margin-top: 1vh; }
.chalk-col.active .chalk-left { color: var(--chalk-yellow); text-shadow: 0 0 1.2vh rgba(255, 226, 122, .35); }
.slate.n3 .chalk-left { font-size: 11vh; }
.slate.n4 .chalk-left, .slate.n5 .chalk-left, .slate.n6 .chalk-left { font-size: 8vh; }
.chalk-meta { font-size: 2.3vh; color: var(--chalk-dim); margin: 0.6vh 0 1vh; white-space: nowrap; }
.chalk-rows { width: 100%; max-width: 40vh; overflow: hidden; display: flex; flex-direction: column; gap: 0.2vh; }
.chalk-row { display: grid; grid-template-columns: 1fr 1fr; font-size: 3.6vh; line-height: 1.15; }
.chalk-row .s { text-align: right; padding-right: 2vh; border-right: 0.25vh solid var(--chalk-dim); color: var(--chalk-dim); }
.chalk-row .l { padding-left: 2vh; font-weight: 700; }
.chalk-row .l.old { text-decoration: line-through; text-decoration-thickness: 0.3vh; color: var(--chalk-dim); font-weight: 400; }
.chalk-row.bust .s { color: var(--chalk-red); }
.slate.n3 .chalk-row, .slate.n4 .chalk-row { font-size: 3vh; }

/* Cricket on the slate */
.slate.cricket-wrap { padding: 1vh 1.5vh; }
.slate .cricket th, .slate .cricket td { background: transparent; color: var(--chalk); border-radius: 0; }
.slate .cricket thead th { opacity: 1; border: 0; border-bottom: 0.35vh solid var(--chalk-dim); }
.slate .cricket thead th.active { color: var(--chalk-yellow); border-color: var(--chalk-yellow); }
.slate .cricket .meta { color: var(--chalk-dim); }
.slate .cricket th.num { background: transparent; border-right: 0.35vh solid var(--chalk-dim); font-weight: 700; }
.slate .cricket td { border-bottom: 0.15vh solid rgba(243, 239, 228, .15); }
.slate .cricket td.active { background: rgba(255, 226, 122, .06); }
.slate .cricket td.shut { color: var(--chalk-yellow); }

/* Any table on the slate (Cricket, Shanghai, Halbieren, Kniffel) */
.slate.table-wrap { padding: 1vh 1.5vh; }
.chalk-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.chalk-table th, .chalk-table td { text-align: center; color: var(--chalk); line-height: 1.05; }
.chalk-table thead th { padding: 0.6vh 0.5vh 0.8vh; border-bottom: 0.35vh solid var(--chalk-dim); }
.chalk-table thead th.active { color: var(--chalk-yellow); border-color: var(--chalk-yellow); }
.chalk-table .name { font-size: 3.4vh; font-weight: 700; }
.chalk-table .score { font-size: 6.5vh; font-weight: 700; }
.chalk-table .meta { font-size: 2.1vh; color: var(--chalk-dim); white-space: nowrap; }
.chalk-table th.num { width: 22%; font-size: 4vh; font-weight: 700; border-right: 0.35vh solid var(--chalk-dim); }
.chalk-table td { font-size: 4.4vh; font-weight: 700; border-bottom: 0.15vh solid rgba(243, 239, 228, .15); }
.chalk-table td.active { background: rgba(255, 226, 122, .06); }
.chalk-table td.shut { color: var(--chalk-yellow); }
.chalk-table td.bad { color: var(--chalk-red); }
.chalk-table tr.dead th, .chalk-table tr.dead td { opacity: .35; }
.chalk-table tr.current th.num { color: var(--chalk-yellow); }
.chalk-table tr.current td { background: rgba(255, 226, 122, .1); }
.chalk-table tr.sep td, .chalk-table tr.sep th { border-bottom: 0.35vh solid var(--chalk-dim); }
.slate.compact .chalk-table th.num { font-size: 2.7vh; text-align: left; padding-left: 1vh; }
.slate.compact .chalk-table td { font-size: 2.9vh; }
.slate.dense .chalk-table th.num, .slate.dense .chalk-table td { font-size: 2.3vh; line-height: 1; }
.slate.dense .chalk-table .score { font-size: 5vh; }
.chalk-col.out { opacity: .45; }

/* 4 Gewinnt: 5 × 5 fields on the slate */
.slate.grid-wrap { display: flex; align-items: center; justify-content: center; gap: 4vh; padding: 2vh; }
.grid5 { height: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8vh; }
.grid5 .cell {
  display: flex; align-items: center; justify-content: center; font-size: 3.2vh; font-weight: 700;
  border: 0.3vh solid var(--chalk-dim); border-radius: 0.8vh; color: var(--chalk-dim);
}
.grid5 .cell.open { color: var(--chalk); border-color: var(--chalk); }
.grid5 .cell.own { color: #1c2620; border-color: transparent; }
.p0 { background: var(--chalk-yellow); } .p1 { background: #ff9ac0; } .p2 { background: #8fd3ff; } .p3 { background: #a8f0a0; }
.legend { display: flex; flex-direction: column; gap: 2vh; font-size: 3vh; }
.legend-row { display: grid; grid-template-columns: 4vh auto; column-gap: 1.5vh; align-items: center; opacity: .6; }
.legend-row.active { opacity: 1; color: var(--chalk-yellow); }
.legend-row b { white-space: nowrap; }
.legend-row span:not(.avatar) { grid-column: 2; font-size: 2.3vh; color: var(--chalk-dim); }
.swatch { width: 4vh; height: 4vh; border-radius: 50%; grid-row: span 2; }

/* Home: header with Buddy, four chalkboards */
.home { height: 100vh; display: flex; flex-direction: column; padding: 2vh 3vh 1.5vh; gap: 2vh; }
.home-head { display: flex; align-items: center; gap: 2.5vh; min-width: 0; }
.home-head .buddy-logo { height: 17vh; margin: -2vh -1vh -2vh 0; filter: drop-shadow(0 1vh 1.5vh rgba(0, 0, 0, .45)); animation: buddy 3s ease-in-out infinite; }
.home-head h1 { font-size: 9vh; line-height: 1; margin: 0; color: var(--accent); }
.home-head p { margin: 0.4vh 0 0; font-size: 3vh; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
.home-actions { margin-left: auto; display: flex; align-items: center; gap: 2vh; }
/* practice darts before a game (tv.js warmupStrip) */
.warmup {
  margin-left: auto; display: flex; align-items: center; gap: 1.2vh; min-width: 0; padding: 0.8vh 1.6vh;
  border-radius: 1.2vh; background: var(--panel); border: 1px solid var(--line); font-size: 2.2vh; color: var(--muted);
}
.warmup + .home-actions { margin-left: 0; }
.settle-box { margin-top: 24px; max-width: 900px; }
.about-table td { padding: 3px 18px 3px 0; vertical-align: top; }
.about-table td:first-child { color: var(--muted); }
#update-box { flex-wrap: wrap; align-items: center; }
/* the home screen's update chip (tv.js updateChip) */
.update-chip { background: var(--accent); color: var(--accent-text); border: 0; font-weight: 700; }
/* settings → Medien */
.upload span {
  display: inline-block; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-weight: 700;
  background: var(--accent); color: var(--accent-text);
}
.upload.small span { padding: 4px 12px; font-weight: 600; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.media-table { border-collapse: collapse; margin: 8px 0; }
.media-table td { padding: 5px 14px 5px 0; }
.media-table .play { min-width: 0; padding: 4px 10px; margin-right: 6px; }
/* first start: no calibrated camera yet (tv.js welcome) */
.home { position: relative; }
.welcome { position: absolute; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; }
.welcome .chalkboard { width: min(70vw, 1200px); }
.welcome .slate { display: flex; gap: 4vh; align-items: center; padding: 4vh 5vh; }
.welcome img { height: 40vh; }
.welcome h2 { margin: 0 0 2vh; font-size: 6vh; color: var(--chalk-yellow); }
.welcome ol { margin: 0 0 2vh; padding-left: 4vh; font-size: 3.2vh; line-height: 1.5; }
.welcome p { font-size: 2.6vh; color: var(--chalk-dim); }
.welcome .top-btn { font-size: 3vh; padding: 1.4vh 3vh; }
.welcome-name p { font-size: 3.2vh; color: var(--chalk); }
.welcome-name p:last-child { font-size: 2.2vh; color: var(--chalk-dim); }
.welcome-name input {
  font: inherit; font-size: 4.5vh; width: 100%; max-width: 60vh; margin: 0 2vh 2vh 0; padding: 1vh 2vh;
  background: rgba(255, 255, 255, .08); color: var(--chalk); border: 0.3vh dashed var(--chalk-dim); border-radius: 1vh;
}
.settle-box .volume-row b { min-width: 150px; }
.warmup .wtitle { white-space: nowrap; }
.warmup .wd {
  min-width: 6vh; text-align: center; font-size: 3.2vh; font-weight: 700; color: var(--text);
  padding: 0.1vh 0.8vh; border-radius: 0.8vh; background: var(--panel-2); border: 1px solid var(--line);
}
.warmup .wd.unclear { color: var(--bad); }
.warmup .wd.empty { color: var(--muted); background: transparent; border-color: transparent; }
.home-actions .top-btn { white-space: nowrap; }
.home-boards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.72fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5vh; }
.home-board .slate { padding: 1.6vh 3vh; display: flex; flex-direction: column; }
.board-title {
  margin: 0 0 1vh; font-size: 4.6vh; color: var(--chalk-yellow); align-self: flex-start;
  border-bottom: 0.35vh solid var(--chalk-yellow); padding: 0 1vh;
}
.game-list { list-style: none; margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.6vh; }
.game-list li {
  display: flex; align-items: baseline; gap: 2vh; padding: 0.4vh 1.5vh; border-radius: 1vh; cursor: pointer;
  position: relative;
}
.game-list li:hover { background: rgba(255, 255, 255, .07); }
.game-list li b { font-size: 3.8vh; white-space: nowrap; }
.game-list li span { min-width: 0; font-size: 2.4vh; color: var(--chalk-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-list li.empty { cursor: default; }
.game-list li.empty span { white-space: normal; font-size: 2.6vh; }
.game-list.many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5vh; align-content: start; }
.game-list.many li span { display: none; }
.game-list.many li { gap: 0.6vh; padding: 0.6vh 0.8vh; }
.game-list.many li b { font-size: 2.75vh; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.game-list.many .rules-btn { font-size: 2.6vh; }
.game-list .del {
  margin-left: auto; background: transparent; border: 0; color: var(--chalk-dim); font-size: 3.4vh;
  font-family: inherit; padding: 0 1vh;
}
.game-list .del:hover { color: var(--chalk-red); }
.home > .home-foot { margin: 0; justify-content: center; color: var(--muted); font-size: 2vh; }

.turnbar.no-total { grid-template-columns: repeat(3, 1fr) 3fr; }

/* Rules: book button on the home boards, chalkboard popup */
.game-list .rules-btn {
  margin-left: auto; flex: none; background: transparent; border: 0; font-size: 3vh; padding: 0 0.5vh;
  font-family: "Segoe UI Emoji", sans-serif; opacity: .65; cursor: pointer;
}
.game-list .rules-btn:hover { opacity: 1; transform: scale(1.15); }
.rules-modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
}
.rules-modal .chalkboard { width: min(70vw, 1200px); }
.rules-modal .slate { position: relative; padding: 3vh 4vh; }
.rules-desc { font-size: 3vh; color: var(--chalk-yellow); margin: 1vh 0; }
.rules-text { font-size: 3vh; line-height: 1.45; margin: 0 0 2vh; }
.rules-close {
  position: absolute; top: 1vh; right: 1.5vh; background: transparent; border: 0; color: var(--chalk);
  font-size: 5vh; font-family: inherit; cursor: pointer;
}
.rules-actions { display: flex; justify-content: flex-end; }

/* Table rows that explain themselves on mouse over (Kniffel) */
.chalk-table th[data-tip] { cursor: help; position: relative; }
.tip-mark {
  font-style: normal; font-size: 0.55em; margin-left: 0.6vh; padding: 0 0.6vh; border: 0.2vh solid var(--chalk-dim);
  border-radius: 50%; color: var(--chalk-dim); vertical-align: middle;
}
.chalk-table th[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 42vh; padding: 1.2vh 1.6vh; border-radius: 1vh; text-align: left; white-space: normal;
  font-family: "Segoe UI", system-ui, sans-serif; font-weight: 400; font-size: 2.2vh; line-height: 1.35;
  background: #f3efe4; color: #1c2620; box-shadow: 0 1vh 3vh rgba(0, 0, 0, .5);
}

/* Home: roster of players, present (left) and away (right) */
.roster { grid-column: 3; grid-row: 1 / span 2; }
.roster .slate { padding: 1.6vh 2vh; }
.roster-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5vh; }
.roster-col { display: flex; flex-direction: column; min-height: 0; border-radius: 1vh; padding: 0.6vh; }
.roster-col + .roster-col { border-left: 0.3vh dashed var(--chalk-dim); border-radius: 0; padding-left: 1.5vh; }
.roster-col h3 { margin: 0 0 1vh; font-size: 2.8vh; color: var(--chalk); font-weight: 700; }
.roster-col.away h3 { color: var(--chalk-dim); }
.roster-col.drop-target { background: rgba(255, 226, 122, .1); outline: 0.3vh dashed var(--chalk-yellow); }
.roster .drop {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6vh;
  scrollbar-width: none;                 /* no scroll bar: the arrows below scroll instead */
}
.roster .drop::-webkit-scrollbar { display: none; }
.drop-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.roll {
  position: absolute; left: 0; right: 0; z-index: 2; height: 4.5vh; border: 0; padding: 0;
  font-size: 2.4vh; color: var(--chalk-yellow, var(--accent)); cursor: default;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.roll.on { opacity: 1; pointer-events: auto; }
.roll.up { top: 0; background: linear-gradient(rgba(0, 0, 0, .7) 35%, transparent); border-radius: 1vh 1vh 0 0; }
.roll.down { bottom: 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7) 65%); border-radius: 0 0 1vh 1vh; }
.roll:hover { filter: brightness(1.4); }
.person {
  display: flex; align-items: center; gap: 1vh; padding: 0.5vh 1vh; border-radius: 1vh; cursor: grab;
  font-size: 3vh; border: 0.25vh solid rgba(243, 239, 228, .25); background: rgba(255, 255, 255, .04);
}
.person:hover { border-color: var(--chalk-yellow); }
.person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person.dragging { opacity: .4; }
.roster-col.away .person { opacity: .4; filter: grayscale(1); }
.hint-drop { color: var(--chalk-dim); font-size: 2.2vh; padding: 1vh; border: 0.25vh dashed var(--chalk-dim); border-radius: 1vh; text-align: center; }
.add-person {
  margin-top: 1vh; align-self: stretch; font-family: inherit; font-size: 2.6vh; font-weight: 700;
  background: transparent; color: var(--chalk-yellow); border: 0.25vh dashed var(--chalk-yellow); border-radius: 1vh; padding: 0.8vh;
}
.avatar { font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; margin-right: 0.6vh; font-style: normal; }
.person .avatar { margin: 0; font-size: 3.2vh; }

/* Setup: game choice */
.control select#mode {
  width: 100%; font: inherit; font-size: 20px; padding: 12px; border-radius: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.control .rules { margin: 8px 0 4px; color: var(--muted); font-size: 15px; }
.control .rules summary { cursor: pointer; }
.control .rules p { margin: 6px 0 0; line-height: 1.4; }
.control .fav-check { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--text); font-size: 17px; }
.control .fav-check input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.control #fav-name { width: 100%; margin-top: 8px; }
.control .setup-msg { color: var(--bad); min-height: 1em; margin: 10px 0 0; }

.home h1, .idle h1 { font-family: "Chalk", "Segoe Print", cursive; font-weight: 700; }
.brand { display: flex; align-items: center; gap: 2vh; margin-bottom: -2vh; }
.brand img { height: 22vh; filter: drop-shadow(0 1vh 1.5vh rgba(0, 0, 0, .45)); animation: buddy 3s ease-in-out infinite; }
@keyframes buddy { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-1vh); } }

/* Celebrations: fireworks with a caption, or an own video */
.celebrate { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.banner { z-index: 35; }   /* the winner's name stays readable in front of the effects */
.celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.celebrate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.celebrate-text {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-size: 24vh; font-weight: 900; color: var(--accent); letter-spacing: .02em;
  text-shadow: 0 0 4vh rgba(0, 0, 0, .9), 0 0 1vh rgba(0, 0, 0, .9);
  animation: pop 0.6s cubic-bezier(.2, 1.6, .4, 1) both, glow 1.2s ease-in-out .6s infinite alternate;
  white-space: nowrap;
}
.celebrate.highscore .celebrate-text { font-size: 16vh; }
/* a player's cheer, written big in chalk above the winner banner */
.celebrate .celebrate-text.cheer {
  top: 20%; font-family: "Chalk", "Segoe Print", cursive; color: var(--chalk-yellow, #ffe27a);
  font-size: 20vh; letter-spacing: .04em;
}
.celebrate.leg .celebrate-text, .celebrate.match .celebrate-text { font-size: 14vh; color: #fff; }
.celebrate .buddy {
  position: absolute; left: 3vw; bottom: 22vh; height: 48vh;
  filter: drop-shadow(0 1.5vh 2vh rgba(0, 0, 0, .6));
  animation: buddy-jump 0.7s cubic-bezier(.2, 1.5, .4, 1) both, buddy-bounce 0.9s ease-in-out 0.7s infinite alternate;
}
.celebrate.bust .buddy { left: auto; right: 2vw; bottom: 23vh; height: 30vh; opacity: .9;
  animation: buddy-slide 0.6s ease-out both, buddy-sigh 1.6s ease-in-out 0.6s infinite; }
.celebrate.leg .buddy, .celebrate.match .buddy { left: auto; right: 3vw; }
@keyframes buddy-jump { from { transform: translateY(60vh) scale(.6); } to { transform: translateY(0) scale(1); } }
@keyframes buddy-bounce { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3vh) rotate(3deg); } }
@keyframes buddy-slide { from { transform: translateX(-40vw) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buddy-sigh { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.2vh) rotate(2deg); } }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes glow { from { filter: brightness(1); } to { filter: brightness(1.35); } }

/* Home screen */
.tiles { display: grid; grid-template-columns: repeat(3, 40vh); gap: 4vh; }
.tile {
  height: 30vh; border-radius: 2.5vh; background: var(--panel); border: 0.4vh solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5vh;
  transition: transform .12s, border-color .12s;
}
.tile b { font-size: 5vh; }
.tile span { font-size: 2.3vh; color: var(--muted); text-align: center; padding: 0 2vh; }
.tile:hover, .tile:focus-visible { border-color: var(--accent); transform: translateY(-0.6vh); outline: none; }
.home-foot { display: flex; gap: 4vh; align-items: center; color: var(--muted); font-size: 2.2vh; }

/* Live camera images */
.live {
  position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .92);
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2vh; padding: 3vh;
}
.live[hidden] { display: none; }
.live figure { margin: 0; width: min(calc(50% - 2vh), 76vh); }
.live img { width: 100%; display: block; border-radius: 1vh; background: #111; aspect-ratio: 16 / 9; }
.live figcaption { color: #ddd; font-size: 2vh; margin-top: .6vh; }
.live p { width: 100%; text-align: center; color: #aaa; font-size: 2vh; margin: 0; }

.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup-head button { flex: 0 0 auto; }

/* Menu on the TV: the control page in a side panel, or centered as setup screen */
.menu-btn {
  position: fixed; right: 3vh; bottom: 22.5vh; z-index: 5;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 1vh;
  padding: 0.8vh 1.6vh; font-size: 2.2vh; color: var(--muted); opacity: .7;
}
.menu-btn small { margin-left: 0.6vh; opacity: .7; }
.menu-btn:hover { opacity: 1; }
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(46vw, 820px); z-index: 10;
  display: flex; flex-direction: column; background: var(--bg);
  border-left: 1px solid var(--line); box-shadow: -2vh 0 6vh rgba(0, 0, 0, .5);
}
.menu.center { left: 50%; right: auto; transform: translateX(-50%); border: 0; box-shadow: none; width: min(60vw, 900px); }
.menu .keys { padding: 1.4vh 2vh; font-size: 1.9vh; color: var(--muted); border-bottom: 1px solid var(--line); line-height: 1.6; }
.menu kbd { background: var(--panel-2); border: 1px solid var(--line); border-radius: 0.5vh; padding: 0 0.6vh; color: var(--text); }
.menu iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }
.menu[hidden], .entry[hidden] { display: none; }
.menu.center .game-only, .menu:not(.center) .setup-only { display: none; }
.menu.center .keys { font-size: 2.4vh; text-align: center; }
.entry {
  position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 6;
  padding: 3vh 6vh; border-radius: 2vh; font-size: 12vh; font-weight: 800;
  background: var(--panel-2); border: 0.5vh solid var(--accent);
}

/* ======================== Einstellungen ======================== */
body.settings { padding: 24px 40px; font-size: 19px; min-height: 100vh; }
.settings button {
  font: inherit; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 18px; color: var(--text);
}
.settings button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.settings button[hidden] { display: none; }
.set-head { display: flex; align-items: center; gap: 32px; margin-bottom: 18px; }
.set-head h1 { margin: 0; font-size: 34px; }
.set-head .back { margin-left: auto; color: var(--accent); font-weight: 700; text-decoration: none; font-size: 20px; }
.tabs { display: flex; gap: 8px; }
.tabs button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.settings .lead { color: var(--muted); margin: 0 0 14px; }
.settings .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.settings .seg { flex-wrap: nowrap; }
.settings .seg button { flex: none; white-space: nowrap; }
.settings .seg button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.settings .msg { color: var(--muted); }
.settings .align-result { margin: -4px 0 12px; }
.settings h2 { font-size: 24px; margin: 26px 0 10px; }
.settings h2:first-child { margin-top: 6px; }
.settings .check { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; cursor: pointer; }
.settings .check input { width: 24px; height: 24px; accent-color: var(--accent); }
.settings select {
  font: inherit; padding: 10px 12px; border-radius: 10px; min-width: 420px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.settings button.danger { color: var(--bad); }
.settings code { background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }

/* Settings: player table */
.player-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.player-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 15px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.player-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.player-table tr.away td { opacity: .55; }
.player-table input, .player-table select, #player-new {
  font: inherit; padding: 9px 10px; border-radius: 8px; width: 100%;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.player-table small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.player-table .avatar-btn { font-size: 30px; padding: 2px 10px !important; line-height: 1.2; font-family: "Segoe UI Emoji", sans-serif; }
.player-table .row-actions { white-space: nowrap; width: 1%; }
#player-new { width: 320px; }
.avatar-picker {
  position: absolute; z-index: 40; display: grid; grid-template-columns: repeat(8, 52px); gap: 6px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.avatar-picker[hidden] { display: none; }
.avatar-picker button { font-size: 28px; padding: 4px !important; font-family: "Segoe UI Emoji", sans-serif; }
.avatar-picker button.on { border-color: var(--accent) !important; }
.home-foot .quit { margin-left: 2vh; }
.settings .align-result b { color: var(--text); }
.settings .step { font-size: 22px; font-weight: 700; color: var(--accent); margin: 0 0 12px; min-height: 30px; }

.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.cam { display: flex; flex-direction: column; gap: 8px; padding: 10px !important; text-align: left; border-width: 3px !important; }
.cam.on { border-color: var(--accent) !important; }
.cam img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #111; }

.calib-stage { position: relative; max-width: min(100%, calc((100vh - 300px) * 16 / 9)); }
.calib-stage img { width: 100%; display: block; border-radius: 8px; background: #111; aspect-ratio: 16 / 9; }
.calib-stage canvas#cal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.lens {
  position: absolute; width: 240px; height: 240px; border: 3px solid var(--accent); border-radius: 50%;
  pointer-events: none; background: #000; box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
.lens[hidden] { display: none; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.theme-tile {
  display: flex; flex-direction: column; gap: 10px; padding: 12px !important;
  background: var(--bg) !important; color: var(--text) !important; border: 3px solid var(--line) !important;
}
.theme-tile.on { border-color: var(--accent) !important; }
.theme-tile > span { font-weight: 700; font-size: 22px; }

/* ========================= Steuerung ========================= */
body.control.embedded { zoom: 1.1; max-width: 640px; padding-top: 8px; }
body.control.embedded h2 { margin-top: 14px; }
body.control.embedded label { margin-top: 10px; }
body.control.embedded button.big { margin-top: 16px; }
body.control { padding: 16px; max-width: 560px; margin: 0 auto; font-size: 17px; }
.control h1 { font-size: 26px; margin: 4px 0 12px; }
.control h2 { font-size: 18px; margin: 22px 0 8px; }
.control h2 small, .control .small { font-weight: 400; color: var(--muted); font-size: 14px; }
.control label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 14px; }
.control button {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 10px; min-height: 46px; min-width: 0;
}
.control .row { flex-wrap: wrap; }
.control .row > button { flex: 1 1 40%; }
.control button:disabled { opacity: .4; }
.control button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.control button.danger { color: var(--bad); }
.control button.big { width: 100%; margin-top: 24px; font-size: 20px; padding: 16px; }
.control input {
  flex: 1; min-width: 0; font: inherit; padding: 12px; border-radius: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.row { display: flex; gap: 8px; margin-top: 8px; }
.row > * { flex: 1; }
.row input { flex: 2; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.chip.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chip .x { min-height: 0; padding: 0 8px; border: 0; background: transparent; font-size: 18px; opacity: .6; }
.chosen { display: none; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pick {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--panel); border: 2px solid var(--line); color: var(--muted);
}
.control label.pick { margin: 0; font-size: 18px; }
.pick input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; margin: 0; }
.pick .avatar { font-size: 22px; }
.pick-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-state { font-size: 13px; }
.pick.on { border-color: var(--accent); color: var(--text); background: var(--panel-2); }
.pick.on .pick-state { color: var(--accent); font-weight: 700; }
.order-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.order-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 8px; background: var(--panel); }
.order-row span:not(.avatar) { flex: 1; }
.control .order-row button { min-height: 0; padding: 4px 12px; }
.chip .order {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px;
  border-radius: 50%; background: var(--accent-text); color: var(--accent); font-size: 13px;
}

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; }
.seg button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }

.offline { background: var(--bad); padding: 10px; border-radius: 10px; margin-bottom: 12px; }
.summary .who { font-size: 24px; }
.summary .who b { font-size: 34px; margin-left: 8px; color: var(--accent); }
.summary .others { display: flex; gap: 14px; color: var(--muted); margin: 4px 0; flex-wrap: wrap; }
.status { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--panel); font-weight: 600; }
.status.bust, .status.hint { background: var(--bad); color: #fff; }
.status.hint { position: static; padding: 12px; border-radius: 10px; font-size: inherit; }   /* not the TV's floating .hint */
.status.leg_won, .status.match_won { background: var(--good); color: #04130b; }
.status.pull { background: var(--panel-2); }

.turn { display: grid; grid-template-columns: repeat(3, 1fr) 0.8fr; gap: 8px; }
.slot {
  background: var(--panel); border: 2px solid var(--line); border-radius: 10px;
  padding: 14px 4px; text-align: center; font-size: 22px; font-weight: 700; cursor: pointer;
}
.slot.empty { color: var(--muted); cursor: default; }
.slot.editing { border-color: var(--accent); background: var(--panel-2); }
.slot.total { color: var(--accent); cursor: default; border-color: transparent; }

.mult { margin-top: 14px; }
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.pad button { font-size: 20px; font-weight: 600; padding: 12px 0; }
.pad button[data-key="25"], .pad button[data-key="Bull"] { grid-column: span 2; }
.actions button { font-weight: 600; }

/* ----- bulling out and doubles ----- */
.slate.bull-wrap { display: flex; flex-direction: column; align-items: center; padding: 3vh 4vh; }
.bull-title { font-size: 7vh; margin: 0; color: var(--chalk-yellow); }
.bull-sub { font-size: 3vh; margin: 1vh 0 3vh; color: var(--chalk-dim); }
.bull-list { display: flex; flex-direction: column; gap: 1.5vh; width: min(100%, 90vh); }
.bull-row {
  display: grid; grid-template-columns: 1fr 14vh 18vh; align-items: center; gap: 2vh;
  font-size: 5vh; padding: .6vh 2vh; border-bottom: 0.25vh dashed var(--chalk-dim);
}
.bull-row b small { display: block; font-size: 2.3vh; font-weight: 400; color: var(--chalk-dim); }
.bull-row.active { color: var(--chalk-yellow); }
.bull-row.out { opacity: .35; }
.bull-row.best .bull-mm::after { content: " ★"; color: var(--chalk-yellow); }
.bull-dart { text-align: center; font-weight: 700; }
.bull-mm { text-align: right; font-size: 3.6vh; }
.bull-won {
  position: fixed; left: 50%; bottom: 23vh; transform: translateX(-50%); z-index: 30;
  padding: 1.5vh 4vh; border-radius: 1.5vh; font-size: 4vh; font-weight: 700;
  background: var(--accent); color: var(--accent-text); white-space: nowrap; pointer-events: none;
}
.member { opacity: .45; white-space: nowrap; }
.member.up { opacity: 1; }
.chalk-name .member { font-size: .72em; }
.amp { font-style: normal; margin: 0 .8vh; opacity: .6; }
.order-row .team { font-style: normal; font-size: .8em; padding: .1em .6em; border-radius: 1em; margin-left: .6em; background: var(--panel-2); }
.order-row .team.t1 { color: var(--accent); }
.order-row .team.t2 { color: var(--good); }
.team-tag { font-size: 2.2vh; text-align: center; letter-spacing: .08em; color: var(--chalk-dim); margin-bottom: .5vh; }
.team-tag.t0 { color: var(--chalk-yellow); }
.slate.league .chalk-col.team0 + .chalk-col.team1 { border-left: 0.7vh double var(--chalk-dim); }
.chalk-col.frozen .chalk-meta { color: #9fd8ff; }
.game-list.tight { gap: 0.2vh; }
.game-list.tight li { padding: 0.25vh 1.5vh; }
.game-list.tight li b { font-size: 3.3vh; }

/* Settings: phone address with QR code */
.phone-box { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.phone-qr { width: 180px; height: 180px; background: #fff; border-radius: 10px; padding: 6px; flex: none; }
.phone-qr svg { width: 100%; height: 100%; display: block; }
.phone-box p { margin: 0 0 8px; max-width: 520px; }
.phone-url { font-size: 22px; font-weight: 700; word-break: break-all; }
.phone-url a { color: var(--accent); }

/* ----- phone: home, game ----- */
.phone-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.phone-head img { height: 70px; margin: -6px 4px -6px -8px; }
.phone-title { display: flex; flex-direction: column; line-height: 1.05; }
.phone-title b { font-family: "Chalk", "Segoe Print", cursive; font-size: 26px; color: var(--accent); }
.phone-title small { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.phone-head #home-status { margin-left: auto; }
.phone-head .gear { font-size: 26px; text-decoration: none; color: var(--text); padding: 4px 6px; }
.control .status-icons { font-size: 15px; gap: 4px; }
.control .status-icons .cam-icon { display: none; }
.control .status-icons .cam { width: 22px; height: 22px; font-size: 12px; }
.control .status-icons .cam-icon, .control .status-icons .act, .control .status-icons .warn { font-size: 18px; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-tile {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 34px 10px 12px;
  border-radius: 10px; background: var(--panel); border: 1px solid var(--line); cursor: pointer;
}
.game-tile b { font-size: 17px; }
.game-tile small { font-size: 12px; color: var(--muted); line-height: 1.25; }
.control .game-tile .rules-btn {
  position: absolute; top: 6px; right: 4px; min-height: 0; padding: 2px 4px; border: 0; background: transparent;
  font-size: 18px; font-family: "Segoe UI Emoji", sans-serif;
}
.fav-list { display: flex; flex-direction: column; gap: 8px; }
.fav { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.fav > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fav small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control .fav .del { min-height: 0; padding: 2px 10px; border: 0; background: transparent; font-size: 22px; color: var(--muted); }
.player-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.control .player-chips .chip { opacity: .55; }
.control .player-chips .chip.on { opacity: 1; }
#home-add { margin-top: 10px; }
.rules-pop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.rules-pop[hidden] { display: none; }
.rules-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; max-width: 520px; max-height: 90vh; overflow: auto; }
.rules-card h2 { margin-top: 0; }
/* Settings → Über Chalkboard: what is new, feedback, support */
.about-card { min-width: min(520px, 90vw); }
.about-card label { display: block; margin: 12px 0 4px; color: var(--muted); }
.about-card select, .about-card textarea, .about-card input {
  width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.about-card .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.about-qr { margin: 12px auto; }
.rules-card .rules-lead { color: var(--accent); font-weight: 600; }
.rules-card p { line-height: 1.45; }
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.phone-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; margin-top: 8px; }
.ps { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid transparent; min-width: 0; }
.ps.active { border-color: var(--accent); }
.ps.out { opacity: .45; }
.ps-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps b { font-size: 28px; line-height: 1.1; }
.ps.active b { color: var(--accent); }
.ps small { color: var(--muted); font-size: 12px; min-height: 1em; }
.control .turn { margin-top: 10px; }
.view-switch { margin-top: 10px; }
.pick-hint { min-height: 1.2em; margin: 6px 0; }
.phone-board { width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1; touch-action: manipulation; }
.phone-board[hidden] { display: none; }
.phone-board.picking .hitboard { filter: drop-shadow(0 0 8px var(--accent)); }

/* Settings on the phone */
@media (max-width: 700px) {
  body.settings { padding: 14px 16px; font-size: 16px; }
  .set-head { flex-wrap: wrap; gap: 10px; }
  .set-head h1 { font-size: 24px; }
  .set-head .tabs { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .set-head .tabs button { flex: none; }
  .phone-qr { width: 150px; height: 150px; }
  body.settings select { width: 100%; max-width: calc(100vw - 32px); min-width: 0; }
}

/* Screensaver: Buddy at the chalkboard, drifting slowly so nothing burns in */
.screensaver { position: fixed; inset: 0; z-index: 60; background: #101814; display: flex; align-items: center; justify-content: center; cursor: none; }
.screensaver img { width: min(92vw, 150vh); animation: saver-drift 60s ease-in-out infinite alternate; }
@keyframes saver-drift { from { transform: translate(-3vw, -2vh); } to { transform: translate(3vw, 2vh); } }

/* Buddy aims while bulling out */
.slate.bull-wrap { position: relative; }
.bull-buddy { position: absolute; right: 2vh; bottom: 1vh; height: 34vh; pointer-events: none; }

/* End of a game: blurred, dimmed board, the winner in front */
.winner-screen {
  position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 11, .45); backdrop-filter: blur(9px) brightness(.55);
  animation: winner-fade .6s ease-out both;
}
.winner-box { text-align: center; color: var(--chalk-yellow, #ffe27a); font-family: "Chalk", "Segoe Print", cursive; }
.winner-trophy { font-family: "Segoe UI Emoji", sans-serif; font-size: 12vh; animation: trophy 1.2s cubic-bezier(.2, 1.6, .4, 1) both, trophy-float 2.4s ease-in-out 1.2s infinite; }
.winner-name { font-size: 19vh; font-weight: 700; line-height: 1.05; white-space: nowrap; text-shadow: 0 0 3vh rgba(255, 226, 122, .45); }
.winner-name span { display: inline-block; animation: letter-pop .55s cubic-bezier(.2, 1.7, .4, 1) both, letter-wave 2.4s ease-in-out 1.6s infinite; }
.winner-line { font-size: 5.5vh; color: #f3efe4; margin-top: 1vh; animation: winner-fade .8s ease-out 1s both; }
.winner-box small { display: block; margin-top: 5vh; font-family: "Segoe UI", system-ui, sans-serif; font-size: 2.6vh; color: #cfd8d2; opacity: .8; }
.winner-buddy {
  position: absolute; left: 6vw; bottom: 6vh; height: 52vh; filter: drop-shadow(0 1.5vh 2vh rgba(0, 0, 0, .6));
  animation: buddy-jump .8s cubic-bezier(.2, 1.5, .4, 1) .3s both, buddy-bounce 1.2s ease-in-out 1.1s infinite alternate;
}
@keyframes winner-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes trophy { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes trophy-float { 50% { transform: translateY(-1.5vh) rotate(4deg); } }
@keyframes letter-pop { from { transform: translateY(-30vh) scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes letter-wave { 0%, 100% { transform: none; } 25% { transform: translateY(-1.2vh) rotate(-3deg); } 75% { transform: translateY(.6vh) rotate(2deg); } }

/* 3+ players: waiting players on the left (next on top), the thrower big on the right */
.slate.queue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); padding: 1.2vh 1.2vh; }
.queue-list { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0.8vh; padding-right: 1.6vh; border-right: 0.35vh solid var(--chalk-dim); min-height: 0; }
.queue-list.q2, .queue-list.q3 { grid-auto-rows: minmax(0, 15vh); align-content: start; }
.q-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center;
  column-gap: 1.5vh; padding: 0.6vh 1.4vh; border-radius: 1vh; border: 0.25vh dashed transparent; min-height: 0;
}
.q-row.next { border-color: var(--chalk-dim); background: rgba(255, 255, 255, .04); }
.q-row.out { opacity: .4; }
.q-name { font-size: 3.4vh; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-name .team-tag { display: inline; margin-left: 1vh; font-size: 1.8vh; }
.q-main { grid-row: span 2; font-size: 6vh; font-weight: 700; line-height: 1; }
.q-row.next .q-main, .q-row.next .q-name { color: var(--chalk-yellow); }
.q-meta { font-size: 2vh; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-meta b { color: var(--chalk-yellow); font-weight: 400; }
.q-row.frozen .q-meta { color: #9fd8ff; }
.queue-list.q5 .q-name, .queue-list.q6 .q-name, .queue-list.q7 .q-name { font-size: 2.8vh; }
.queue-list.q5 .q-main, .queue-list.q6 .q-main, .queue-list.q7 .q-main { font-size: 4.6vh; }
.queue-list.q6 .q-meta, .queue-list.q7 .q-meta { font-size: 1.7vh; }
.queue-list.q7 { gap: 0.4vh; }
.queue-list.q7 .q-row { padding: 0.2vh 1.2vh; }
.queue-main { display: flex; min-height: 0; }
.queue-main .chalk-col { flex: 1; }
.queue-main .chalk-left { font-size: 14vh; }

/* Tables with 5+ players: all columns, smaller */
.slate.many .chalk-table .name { font-size: 2.5vh; }
.slate.many .chalk-table .score { font-size: 4.4vh; }
.slate.many .chalk-table .meta { font-size: 1.6vh; }
.slate.many .chalk-table th.num { width: 14%; font-size: 3.2vh; }
.slate.many .chalk-table td { font-size: 3.2vh; }
.slate.many .chalk-table .avatar { margin-right: 0.3vh; }
.slate.many .chalk-table .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slate.many.compact .chalk-table th.num { width: 24%; font-size: 2.3vh; white-space: nowrap; }
.slate.many.compact .chalk-table td { font-size: 2.6vh; }
.slate.many.compact .chalk-table .score { font-size: 3.6vh; }

/* Own question on a chalkboard (instead of the browser's confirm window) */
.ask-modal {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 10, 8, .55); backdrop-filter: blur(5px); animation: winner-fade .25s ease-out both;
}
.ask-card { width: min(100%, 860px); box-sizing: border-box; animation: ask-pop .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.ask-card .slate { display: flex; align-items: center; gap: clamp(12px, 3vh, 40px); padding: clamp(16px, 3.5vh, 44px); }
.ask-buddy { height: clamp(140px, 30vh, 320px); flex: none; animation: buddy-bounce 1.4s ease-in-out infinite alternate; }
.ask-body { flex: 1; min-width: 0; font-family: "Chalk", "Segoe Print", cursive; color: var(--chalk, #f3efe4); }
.ask-body h2 { margin: 0 0 .4em; font-size: clamp(26px, 5.5vh, 64px); color: var(--chalk-yellow, #ffe27a); line-height: 1.1; }
.ask-body p { margin: 0 0 1em; font-size: clamp(16px, 2.8vh, 30px); line-height: 1.35; white-space: pre-line; }
.ask-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.ask-buttons button {
  flex: 1 1 0; min-width: max-content; white-space: nowrap; padding: clamp(10px, 1.6vh, 18px) clamp(14px, 1.6vw, 24px);
  border-radius: 12px; cursor: pointer; font-family: inherit; font-size: clamp(17px, 2.6vh, 30px); font-weight: 700;
  border: 0.3vh dashed var(--chalk-dim, #a9b3ac); background: transparent; color: var(--chalk, #f3efe4);
}
.ask-buttons .ask-yes { background: var(--chalk-yellow, #ffe27a); color: #1c2620; border-style: solid; border-color: transparent; }
.ask-buttons button:focus-visible { outline: 0.4vh solid var(--accent); outline-offset: 3px; }
@keyframes ask-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 560px) {
  .ask-card { width: auto; max-width: calc(100vw - 32px); }
  .ask-card .slate { flex-direction: column; text-align: center; }
  .ask-buddy { height: 150px; }
  .ask-buttons button { flex: 1 1 100%; min-width: 0; }
}

/* Goodbye: Buddy waves, then the display closes */
.farewell {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2f4a3c, #101814 70%); animation: winner-fade .5s ease-out both;
}
.farewell-box { display: flex; align-items: center; gap: 5vw; font-family: "Chalk", "Segoe Print", cursive; color: #f3efe4; padding: 16px; }
.farewell-buddy { height: min(62vh, 70vw); transform-origin: 50% 90%; animation: farewell-wave 1.1s ease-in-out infinite alternate; }
.farewell h1 { margin: 0; font-size: clamp(48px, 16vh, 190px); color: var(--chalk-yellow, #ffe27a); line-height: 1;
  text-shadow: 0 0 3vh rgba(255, 226, 122, .35); animation: letter-pop .7s cubic-bezier(.2, 1.7, .4, 1) .2s both; }
.farewell p { margin: 2vh 0 0; font-size: clamp(18px, 4vh, 44px); opacity: .85; animation: winner-fade .8s ease-out .8s both; }
@keyframes farewell-wave { from { transform: rotate(-4deg); } to { transform: rotate(5deg) translateY(-1.5vh); } }
@media (max-width: 560px) { .farewell-box { flex-direction: column; text-align: center; } }

/* Choosing (Kniffel box, 4 Gewinnt corner): TV bar above the turn, phone buttons */
.pick-bar {
  position: fixed; right: 3vh; bottom: 22.5vh; width: min(37vw, 760px); z-index: 8; padding: 1.2vh 1.6vh; border-radius: 1.4vh;
  background: rgba(20, 32, 26, .94); border: 0.3vh solid var(--chalk-yellow, #ffe27a);
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, .5); font-family: "Chalk", "Segoe Print", cursive; color: var(--chalk, #f3efe4);
}
.pick-title { font-size: 3vh; color: var(--chalk-yellow, #ffe27a); margin-bottom: 0.8vh; }
.pick-title small { font-size: 2vh; color: var(--chalk-dim); margin-left: 1vh; font-family: "Segoe UI", system-ui, sans-serif; }
.pick-options { display: flex; flex-wrap: wrap; gap: 0.8vh; }
.pick-opt {
  display: flex; flex-direction: column; align-items: center; min-width: 11vh; padding: 0.6vh 1.4vh; border-radius: 1vh; cursor: pointer;
  background: transparent; color: var(--chalk, #f3efe4); border: 0.25vh dashed var(--chalk-dim); font-family: inherit;
}
.pick-opt b { font-size: 2.6vh; white-space: nowrap; }
.pick-opt small { font-size: 2vh; color: var(--chalk-dim); }
.pick-opt.best { border-style: solid; }
.pick-opt.on { background: var(--chalk-yellow, #ffe27a); color: #1c2620; border-color: transparent; }
.pick-opt.on small { color: #3b4a40; }
.phone-pick { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--accent); }
.phone-pick .pick-options { gap: 6px; margin-top: 6px; }
.phone-pick .pick-opt { min-width: 0; flex: 1 1 30%; padding: 6px 8px; border-radius: 8px; font-family: inherit; }
.phone-pick .pick-opt b { font-size: 14px; white-space: normal; }
.phone-pick .pick-opt small { font-size: 12px; }

/* Grids of other sizes (Tic Tac Toe 3×3, Bingo cards 4×4) and a caption above */
.grid-side { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1vh; min-height: 0; }
.grid-side .grid5 { flex: none; height: 100%; }
.grid-side.captioned .grid5 { height: calc(100% - 6vh); }
.game-list.many.lots { row-gap: 0; }
.game-list.many.lots li { padding: 0.25vh 0.8vh; }
.game-list.many.lots li b { font-size: 2.55vh; }
.grid-caption { font-size: 3.4vh; color: var(--chalk-yellow, #ffe27a); }
.grid5.c3 .cell { font-size: 6.5vh; border-radius: 1.4vh; }
.grid5.c4 .cell { font-size: 4.6vh; }
/* Bingo ticket 7 × 3: wider than high, so it takes the width and the caption sits on top */
.grid-side:has(.grid5.c7) { flex: 1; min-width: 0; justify-content: center; }
.grid-side .grid5.c7, .grid-side.captioned .grid5.c7 { height: auto; width: 100%; max-height: calc(100% - 6vh); }
.grid5.c7 .cell { font-size: 4.4vh; }
.grid5 .cell.blank {
  border: 0.3vh dashed rgba(255, 255, 255, .12);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 0.4vh, transparent 0.4vh 1.4vh);
}

/* "Throw out" / "BUST" in chalk in the top bar, no box in front of the scores */
.top-call {
  flex: 1; text-align: center; white-space: nowrap; pointer-events: none;
  font-family: "Chalk", "Segoe Print", cursive; font-weight: 700; font-size: 5.6vh; line-height: 1;
}
.top-call.pull { color: var(--chalk, #f3efe4); text-shadow: 0 0 1.4vh rgba(255, 255, 255, .25); animation: call-in .35s ease-out both, pulse-out 1.4s ease-in-out .35s infinite; }
.top-call.bust { color: #ff7b7b; letter-spacing: .12em; text-shadow: 0 0 1.6vh rgba(255, 80, 80, .45); animation: call-shake .5s ease-out both; }
@keyframes call-in { from { opacity: 0; transform: translateY(-2vh); } to { opacity: 1; transform: none; } }
@keyframes call-shake { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(1) rotate(-3deg); }
  60% { transform: rotate(3deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: none; } }

/* Correcting: markers let clicks through, quick ring buttons */
.hitboard.picking .hit { pointer-events: none; opacity: .5; }
.hitboard.picking .hit.sel { opacity: .8; }
.actions-panel button.ring { font-weight: 700; border-color: var(--accent); }
.rings { display: inline-flex; gap: 6px; vertical-align: middle; }
.control .rings .ring { min-height: 0; padding: 4px 12px; font-weight: 700; border-color: var(--accent); }

/* 180 / highscore: chalk lettering you can see through, Buddy over the hit board, not the scores */
.celebrate.\31 80 .celebrate-text, .celebrate.highscore .celebrate-text {
  font-family: "Chalk", "Segoe Print", cursive; color: rgba(255, 226, 122, .82);
  -webkit-text-stroke: 0.25vh rgba(20, 30, 25, .6); text-shadow: 0 0 2vh rgba(255, 226, 122, .35);
  left: auto; right: 4vw; top: 30%; transform: translateY(-50%);
}
.celebrate.\31 80 .buddy, .celebrate.highscore .buddy { left: auto; right: 2vw; height: 36vh; }

/* Game summary on the winner screen */
.winner-screen.with-summary .winner-trophy { font-size: 7vh; }
.winner-screen.with-summary .winner-name { font-size: 12vh; }
.winner-screen.with-summary .winner-line { font-size: 4vh; margin-top: 0; }
.winner-screen.with-summary .winner-box small { margin-top: 2.5vh; }
.winner-screen.with-summary .winner-buddy { height: 40vh; }
.summary-table {
  margin: 2.5vh auto 0; border-collapse: collapse; font-family: "Chalk", "Segoe Print", cursive; color: #f3efe4;
  background: rgba(20, 32, 26, .55); border-radius: 1.2vh; animation: winner-fade .8s ease-out 1.3s both;
}
.summary-table th, .summary-table td { padding: 0.45vh 2.2vh; font-size: 2.8vh; text-align: center; white-space: nowrap; }
.summary-table thead th { font-size: 3vh; color: var(--chalk-yellow, #ffe27a); border-bottom: 0.3vh solid rgba(243, 239, 228, .4); }
.summary-table tbody th { text-align: left; color: #cfd8d2; font-weight: 400; border-right: 0.3vh solid rgba(243, 239, 228, .4); }
.summary-table tbody tr + tr td, .summary-table tbody tr + tr th { border-top: 0.15vh solid rgba(243, 239, 228, .12); }
.summary-table .win { color: var(--chalk-yellow, #ffe27a); font-weight: 700; }
.summary-table.n5 th, .summary-table.n5 td, .summary-table.n6 th, .summary-table.n6 td,
.summary-table.n7 th, .summary-table.n7 td, .summary-table.n8 th, .summary-table.n8 td { padding: 0.3vh 1.2vh; font-size: 2.2vh; }
.phone-summary { width: 100%; border-collapse: collapse; font-size: 14px; }
.phone-summary th, .phone-summary td { padding: 4px 6px; text-align: center; white-space: nowrap; }
.phone-summary tr + tr th, .phone-summary tr + tr td { border-top: 1px solid var(--line); }
.phone-summary tr th:first-child { text-align: left; color: var(--muted); font-weight: 400; }
.phone-summary .win { color: var(--accent); font-weight: 700; }

/* Ask dialog: text field and third button; evening summary */
.ask-input {
  width: 100%; box-sizing: border-box; margin: 0 0 1em; padding: 0.4em 0.6em; border-radius: 10px;
  font: inherit; font-size: clamp(18px, 3vh, 32px); color: #1c2620; background: #f3efe4; border: 0;
}
.ask-buttons .ask-extra { border-style: solid; border-color: var(--chalk-yellow, #ffe27a); color: var(--chalk-yellow, #ffe27a); }
.ask-card.evening { width: min(100%, 1000px); }
.evening-facts { list-style: none; margin: 0 0 1em; padding: 0; font-size: clamp(16px, 2.8vh, 30px); line-height: 1.5; }
.evening-facts b { color: var(--chalk-yellow, #ffe27a); }
.evening-games { list-style: none; margin: 0 0 1.2em; padding: 0; font-family: "Segoe UI", system-ui, sans-serif;
  font-size: clamp(13px, 2vh, 20px); color: #cfd8d2; max-height: 22vh; overflow: auto; }
.evening-games li { display: grid; grid-template-columns: 4em 1fr auto; gap: 1em; padding: 0.15em 0; border-top: 1px solid rgba(243, 239, 228, .12); }
.evening-games i { font-style: normal; color: var(--chalk-yellow, #ffe27a); }

/* Statistics page */
.stats-page section { margin-bottom: 28px; }
.stats-page h2 small { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.table-scroll { overflow-x: auto; }
.stats-table { border-collapse: collapse; width: 100%; font-size: 16px; }
.stats-table th, .stats-table td { padding: 7px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.stats-table thead th { color: var(--muted); font-weight: 600; font-size: 14px; }
.stats-table tbody th { text-align: left; }
.stats-table small { color: var(--muted); }
.stats-table .win { color: var(--accent); }
.trend { position: relative; background: var(--panel); border-radius: 12px; padding: 8px; }
.trend svg { width: 100%; height: auto; display: block; }
.trend .grid { stroke: var(--line); stroke-width: 1; }
.trend .axis { fill: var(--muted); font-size: 12px; }
.trend .label { fill: var(--text); font-size: 13px; font-weight: 600; }
.trend .hit { cursor: default; }
.trend .tip { position: absolute; pointer-events: none; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 8px; font-size: 13px; white-space: nowrap; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px; font-size: 14px; color: var(--text); }
.trend-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Computer opponent in the setup */
.pick.bot { border-style: dashed; }
.pick.bot small { color: var(--muted); font-weight: 400; }
.bot-row { margin-top: 10px; }
.bot-row .seg.bot-level button { flex: 1 0 8%; min-width: 0; padding: 8px 0; }