/* Tusche auf Grau: monochrome Welt mit Halftone-Raster, Figuren mit Gesicht, nüchterne UI. */
:root {
  --ink: #111;
  --red: #d9342b;
  --p1: #111;      /* Spieler 1: Schwarz */
  --p2: #d9342b;   /* Spieler 2: Rot */
  --paper: #fff;
  --bg: #e6e6e6;
  --turn: var(--ink);
  --inked-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --halftone: radial-gradient(var(--ink) 1.1px, transparent 1.7px) 0 0 / 6px 6px;
  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }

body {
  font-family: Geist, "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  /* Grauwelt mit kleinen Doodles: Wolke, Stein, Spross, Kiesel */
  background: var(--bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'><g fill='none' stroke='%23c4c4c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path fill='%23f0f0f0' d='M48 96 C30 96 28 78 42 74 C38 58 58 52 66 62 C70 46 94 46 98 62 C114 56 122 76 108 82 C118 92 106 100 96 96 Z'/><circle cx='68' cy='78' r='2.3' fill='%23c4c4c4' stroke='none'/><circle cx='86' cy='78' r='2.3' fill='%23c4c4c4' stroke='none'/><path d='M71 86 q6 5 12 0'/><path fill='%23f0f0f0' d='M236 300 C214 298 210 276 224 266 C238 256 262 258 270 272 C278 288 264 302 250 302 Z'/><circle cx='238' cy='282' r='2.3' fill='%23c4c4c4' stroke='none'/><circle cx='254' cy='282' r='2.3' fill='%23c4c4c4' stroke='none'/><path d='M240 291 q6 5 12 0'/><path d='M304 126 V100 M304 112 C290 112 284 100 286 92 C298 92 304 100 304 112 M304 104 C304 92 312 84 322 84 C322 96 314 104 304 104'/><path fill='%23e0e0e0' d='M120 250 c4 -7 12 -7 16 0 c-4 7 -12 7 -16 0 Z M60 200 c3 -5 10 -5 13 0 c-3 5 -10 5 -13 0 Z M330 40 c3 -5 10 -5 13 0 c-3 5 -10 5 -13 0 Z M180 150 c3 -5 10 -5 13 0 c-3 5 -10 5 -13 0 Z'/></g></svg>") 0 0 / 480px 480px;
}

.table {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 12px 40px;
}

.c-p1 { color: var(--p1); }
.c-p2 { color: var(--p2); }

/* Zeichen als Inline-SVG (HUD, Ergebnis, Auswahl) */
.sym { display: block; width: 100%; height: 100%; }
.sym path { fill: none; stroke: currentColor; stroke-width: .17; stroke-linecap: round; stroke-linejoin: round; }

/* Runder Knopf unten rechts: Stil wechseln */
.round {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: transform .15s;
}
.round:hover { background: var(--ink); color: #fff; transform: rotate(180deg); }

/* ---------- Getuschte Karte: weisse Fläche, schwarzer Rand, Rasterschatten ---------- */
.inked { position: relative; isolation: isolate; }
.inked::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--inked-radius);
}
.inked::after {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -2;
  border-radius: var(--inked-radius);
  background: var(--halftone);
}

/* ---------- Buttons: Pillen ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform .12s var(--pop), background-color .12s, color .12s;
}
.btn:hover { background: var(--ink); color: #fff; transform: translateY(-2px) scale(1.03); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #3a3a3a; }
.btn.p2 { color: var(--p2); border-color: var(--p2); }
.btn.p2:hover { background: var(--p2); color: #fff; }
.btn.small { font-size: 14px; padding: 6px 14px; }

/* ---------- Startseite ---------- */
.home {
  width: min(94vw, 520px);
  padding: 28px 30px 24px;
  text-align: center;
}
.home h1 {
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
  letter-spacing: 1px;
  margin: 0 0 6px;
}
.home .lead { margin: 0 0 18px; font-size: 15px; opacity: .75; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.row.center { justify-content: center; }
.rules { margin: 16px 0 0; font-size: 14px; }
.rules summary { cursor: pointer; font-weight: 600; opacity: .7; list-style: none; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: ' ▾'; }
.rules[open] summary::after { content: ' ▴'; }
.rules ol { text-align: left; padding-left: 22px; margin: 8px auto 0; max-width: 360px; }
.rules li { margin: 4px 0; }
input {
  font: inherit;
  font-size: 15px;
  padding: 7px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}
/* Auswahl als Segment-Pillen statt nativer Dropdowns; das Radio bleibt unsichtbar für Formularwert und Tastatur */
.setup { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 10px 0; }
.opts {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
}
.opt-label { font-size: 14px; font-weight: 600; opacity: .7; text-align: right; }
.seg {
  display: inline-flex;
  justify-self: start;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.seg label { display: flex; cursor: pointer; }
.seg label + label span { border-left: 2.5px solid var(--ink); }
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.seg span {
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .12s, color .12s;
}
.seg label:hover span { background: rgba(0, 0, 0, .07); }
.seg input:checked + span { background: var(--ink); color: #fff; }
.seg input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--red); }
input[name="code"] { width: 6.5em; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.error { color: var(--red); font-weight: 600; margin: 10px 0 0; }

/* ---------- Spielansicht ---------- */
#game, #play {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#play { animation: playIn .5s var(--pop); }
@keyframes playIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
}

/* ---------- Lobby: Einladung, solange niemand da ist ---------- */
.lobby-label { margin: 0; font-size: 14px; font-weight: 600; opacity: .7; }
.lobby .code {
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 6px;
  margin: 0 0 10px;
}
.lobby input { flex: 1; min-width: 160px; font-family: ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace; font-size: 13px; }
.lobby .waiting { margin: 14px 0 0; font-weight: 600; opacity: .7; }
.ellipsis i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.4s ease-in-out infinite;
}
.ellipsis i:nth-child(2) { animation-delay: .2s; }
.ellipsis i:nth-child(3) { animation-delay: .4s; }
@keyframes blink {
  0%, 60%, 100% { opacity: .25; }
  30% { opacity: 1; }
}

/* ---------- Kopfzeile: Spieler-Pillen, Status als schwarzes Label ---------- */
.hud {
  width: min(96vw, 920px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.player {
  --c: var(--ink);
  font: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 5px;
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--c);
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
  transition: background-color .25s, color .25s, transform .3s var(--pop);
}
.player.p1 { --c: var(--p1); justify-self: start; }
.player.p2 { --c: var(--p2); justify-self: end; }
.player.me { cursor: pointer; }
.player .avatar { width: 34px; height: 34px; flex: none; }
.avatar circle { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.avatar .eye { fill: var(--ink); stroke: none; }
.avatar .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.avatar .cap { fill: var(--p2); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.player .icon { width: 22px; height: 22px; color: var(--c); flex: none; }
.player .score { display: inline-block; font-weight: 700; font-size: 20px; min-width: 1.1em; }
.player .score.bump { animation: bump .45s var(--pop); }
@keyframes bump {
  40% { transform: scale(1.5); }
}
.player .name { opacity: .75; }
.player .tag { font-size: 13px; opacity: .7; }
.player .tag:not(:empty)::before { content: '('; }
.player .tag:not(:empty)::after { content: ')'; }
.player.active { background: var(--c); color: #fff; transform: translateY(-3px) scale(1.04); }
.player.active .icon { color: #fff; }
.player.active .name { opacity: .9; }
.status {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  min-height: 1.3em;
  cursor: default;
}
.status:not(:empty) { background: var(--ink); color: #fff; border-radius: 999px; padding: 7px 16px; }
.status.action {
  background: var(--turn);
  cursor: pointer;
  font-size: 17px;
  padding: 9px 24px;
  animation: nudgeStatus 1.3s ease-in-out infinite;
}
.status.action:hover { animation: none; transform: scale(1.08); }
@keyframes nudgeStatus {
  50% { transform: scale(1.06); }
}
.status.delayed { animation: statusIn .25s ease .75s both; } /* nach dem Würfeln erst einblenden */
@keyframes statusIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .status { grid-column: 1 / -1; order: -1; justify-self: center; }
  .player .name { display: none; }
}

/* ---------- Spielfeld: das Blatt wird im SVG gezeichnet (Tuscherand + Rasterschatten) ---------- */
.board-wrap {
  position: relative;
  width: min(96vw, 920px);
  padding: 0 12px 12px 0;
}
#board { display: block; width: 100%; height: auto; overflow: visible; touch-action: manipulation; user-select: none; }
#board.mine { touch-action: none; } /* Ziehen von Punkt zu Punkt darf nicht scrollen */
.sheet { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.sheet-shadow { fill: url(#halftone); }

/* Ausgemalte Dreiecke mit Zeichen darin */
.tri { transform-box: fill-box; transform-origin: center; }
.tri.p1 { fill: url(#halftone-light); }
.tri.p2 { fill: var(--p2); opacity: .22; }
.tri.new { animation: stamp .5s ease-out both; }
@keyframes stamp {
  from { opacity: 0; transform: scale(.4); }
  60% { transform: scale(1.06); }
  to { transform: scale(1); }
}
.mark { transform-box: fill-box; transform-origin: center; }
.mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark .halo { stroke: var(--paper); stroke-width: 7.5; }
.mark.p1 .ink { stroke: var(--p1); }
.mark.p2 .ink { stroke: var(--p2); }
.mark.new { animation: pop .55s var(--pop) .12s both; }
@keyframes pop {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to { opacity: 1; transform: none; }
}
.plus {
  font: 700 26px Geist, ui-sans-serif, sans-serif;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5;
  stroke-linejoin: round;
  animation: rise 1.2s ease-out .25s both;
}
.plus.p1 { fill: var(--p1); }
.plus.p2 { fill: var(--p2); }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateY(-46px); }
}

/* Punkte als kleine Figuren */
.dotg { transition: opacity .15s; }
.dotg .ring {
  fill: none;
  stroke: var(--turn);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity .15s;
  transform-box: fill-box;
  transform-origin: center;
}
.dotg.selected .ring { opacity: 1; animation: ringPulse 1.1s ease-in-out infinite; }
@keyframes ringPulse {
  50% { transform: scale(1.2); }
}
.dotg.legal .ring { opacity: .35; stroke-dasharray: 4 4; }
.dotg.scores .ring { opacity: 1; stroke-dasharray: none; stroke-width: 3.5; } /* diese Linie schliesst ein Dreieck */
.dotg.scores .body { transform: scale(1.12); }
.dotg.illegal { opacity: .3; }
.dotg .body { fill: var(--paper); stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform .15s var(--pop); }
.dotg.active:hover .body, .dotg.selected .body { transform: scale(1.18); }
.dotg .eye { fill: var(--ink); transition: r .12s; }
.dotg.selected .eye { r: 2.8; }
.dotg .mouth, .dotg .eye-line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dotg .mouth.grin { fill: var(--ink); }
.dotg .hit { fill: transparent; }
.dotg.active { cursor: pointer; }
.dotg.shake { animation: shake .3s; }
@keyframes shake {
  25% { transform: translate(var(--x), var(--y)) translateX(-6px); }
  75% { transform: translate(var(--x), var(--y)) translateX(6px); }
}

.edge {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .4s ease-out;
}
.edge.p1 { stroke: var(--p1); }
.edge.p2 { stroke: var(--p2); }
#preview {
  stroke: var(--turn);
  stroke-width: 3;
  stroke-dasharray: 8 8;
  opacity: .5;
  pointer-events: none;
}

/* ---------- Würfel: getuscht, mit Rasterschatten ---------- */
.die {
  position: absolute;
  top: 3%;
  right: 3.5%;
  width: clamp(38px, 7vw, 64px);
  aspect-ratio: 1;
  border: 0;
  padding: clamp(6px, 1vw, 10px);
  background: transparent;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  transform: rotate(9deg);
  cursor: default;
  isolation: isolate;
}
.die::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22%;
}
.die::after {
  content: '';
  position: absolute;
  inset: 14% -14% -14% 14%;
  z-index: -2;
  border-radius: 22%;
  background: var(--halftone);
}
.die i {
  display: block;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  align-self: center;
  justify-self: center;
  visibility: hidden;
}
.die[data-value="1"] i:nth-child(5),
.die[data-value="2"] :is(i:nth-child(3), i:nth-child(7)),
.die[data-value="3"] :is(i:nth-child(3), i:nth-child(5), i:nth-child(7)),
.die[data-value="4"] :is(i:nth-child(1), i:nth-child(3), i:nth-child(7), i:nth-child(9)),
.die[data-value="5"] :is(i:nth-child(1), i:nth-child(3), i:nth-child(5), i:nth-child(7), i:nth-child(9)),
.die[data-value="6"] :is(i:nth-child(1), i:nth-child(3), i:nth-child(4), i:nth-child(6), i:nth-child(7), i:nth-child(9)) {
  visibility: visible;
}
.die.can-roll { cursor: pointer; animation: nudge 1.3s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: rotate(9deg) scale(1); }
  50% { transform: rotate(-6deg) scale(1.12); }
}
.die.rolling { animation: tumble .75s ease-out; }
@keyframes tumble {
  0% { transform: translate(-260%, 180%) rotate(-380deg) scale(1.3); }
  60% { transform: translate(-40%, 30%) rotate(-60deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(9deg) scale(1); }
}

/* ---------- Overlays: Sitzwahl, Zeichen, Spielende ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(230, 230, 230, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.overlay.show { opacity: 1; pointer-events: auto; transition-delay: 1.1s; }
#seatPick.show, #symbolPick.show { transition-delay: 0s; }
.overlay .card { transform: scale(.9); opacity: 0; transition: transform .45s var(--pop), opacity .3s; }
.overlay.show .card { transform: none; opacity: 1; transition-delay: inherit; }
.card {
  width: min(94vw, 460px);
  padding: 22px 26px 26px;
  text-align: center;
}
.card h2 {
  font-family: "Permanent Marker", "Comic Sans MS", cursive;
  font-weight: 400;
  font-size: 36px;
  margin: 0 0 8px;
}
.result { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 30px; font-weight: 700; margin: 0 0 16px; }
.result .sym { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
#floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.float { position: absolute; bottom: -80px; opacity: .85; animation: floatUp linear infinite; }
.float.p1 { color: var(--p1); }
.float.p2 { color: var(--p2); }
@keyframes floatUp {
  to { transform: translateY(-120vh) rotate(320deg); }
}

/* Zeichen wählen oder zeichnen */
.grid { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; justify-content: center; margin: 6px 0 12px; }
.tile {
  width: 64px;
  height: 64px;
  padding: 11px;
  font: inherit;
  font-size: 26px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s var(--pop), background-color .15s, color .15s;
}
.tile:hover { transform: scale(1.1); }
.tile.selected { background: var(--ink); color: #fff; }
#pad { margin-bottom: 8px; }
#padSvg {
  display: block;
  width: 220px;
  height: 220px;
  margin: 0 auto 8px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  touch-action: none;
  cursor: crosshair;
}
.stroke { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hinweis ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
  animation: toastIn .3s var(--pop);
}
@keyframes toastIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
}

/* ==================== Stil «Bunt» – wie im Video: Holztisch, Papier, Filzstifte ==================== */
[data-theme="bunt"] {
  --ink: #222;
  --p1: #c8102e;   /* Rot */
  --p2: #0f8b8d;   /* Türkis */
  --paper: #fbfaf6;
}
[data-theme="bunt"] body {
  font-family: Caveat, "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 22px;
  line-height: 1.25;
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(91deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #8c4a25 0%, #74391b 55%, #5d2c14 100%);
  background-attachment: fixed;
}
[data-theme="bunt"] .inked::before {
  border: 0;
  border-radius: 2px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .4), 0 3px 6px rgba(0, 0, 0, .25);
}
[data-theme="bunt"] .inked::after { display: none; }
[data-theme="bunt"] .home { transform: rotate(-1deg); }
[data-theme="bunt"] .home h1 { font-family: inherit; font-weight: 700; font-size: 64px; color: var(--p1); }
[data-theme="bunt"] .home .lead { font-size: 22px; }
[data-theme="bunt"] .rules { font-size: 19px; }
[data-theme="bunt"] input { font-size: 22px; padding: 3px 8px; border: 2px solid #555; border-radius: 8px; }
[data-theme="bunt"] .opt-label { font-size: 20px; color: #555; }
[data-theme="bunt"] .seg { border: 2px solid #555; border-radius: 8px; background: transparent; }
[data-theme="bunt"] .seg label + label span { border-left: 2px solid #555; }
[data-theme="bunt"] .seg span { font-size: 22px; font-weight: 700; color: #555; padding: 2px 14px; }
[data-theme="bunt"] .seg label:hover span { background: rgba(0, 0, 0, .05); }
[data-theme="bunt"] .seg input:checked + span { background: var(--p1); color: #fff; }
[data-theme="bunt"] .btn {
  font-size: 24px;
  font-weight: 700;
  color: #555;
  background: transparent;
  border: 3px solid currentColor;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 4px 22px;
}
[data-theme="bunt"] .btn:hover { background: rgba(0, 0, 0, .05); color: #555; transform: rotate(-1.5deg) scale(1.03); }
[data-theme="bunt"] .btn.primary, [data-theme="bunt"] .btn.primary:hover { color: var(--p1); background: transparent; }
[data-theme="bunt"] .btn.primary:hover { background: rgba(0, 0, 0, .05); }
[data-theme="bunt"] .btn.p2, [data-theme="bunt"] .btn.p2:hover { color: var(--p2); background: transparent; }
[data-theme="bunt"] .btn.p2:hover { background: rgba(0, 0, 0, .05); }
[data-theme="bunt"] .btn.small { font-size: 20px; padding: 2px 14px; }
[data-theme="bunt"] .player {
  background: #1c1c1e;
  color: #fff;
  border: 0;
  padding: 5px 16px 5px 8px;
  font-size: 24px;
  opacity: .78;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
[data-theme="bunt"] .player::before { content: ''; width: 14px; height: 30px; border-radius: 4px; background: var(--c); }
[data-theme="bunt"] .player .avatar { display: none; }
[data-theme="bunt"] .player .icon { width: 26px; height: 26px; }
[data-theme="bunt"] .player .score { font-size: 28px; }
[data-theme="bunt"] .player .tag { font-size: 18px; }
[data-theme="bunt"] .player.active {
  opacity: 1;
  background: #1c1c1e;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4), 0 0 0 3px var(--c);
}
[data-theme="bunt"] .player.active .icon { color: var(--c); }
[data-theme="bunt"] .status:not(:empty) {
  background: none;
  color: #fff;
  padding: 0;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
[data-theme="bunt"] .status.action {
  background: var(--turn);
  border: 3px solid #fff;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 4px 28px;
  text-shadow: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
[data-theme="bunt"] .board-wrap { transform: rotate(-1.2deg); padding: 0; }
[data-theme="bunt"] .sheet { stroke: none; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
[data-theme="bunt"] .sheet-shadow { display: none; }
[data-theme="bunt"] .tri.p1 { fill: var(--p1); opacity: .28; }
[data-theme="bunt"] .tri.p2 { opacity: .28; }
[data-theme="bunt"] .dotg .body { fill: var(--dot); stroke: none; r: 9; }
[data-theme="bunt"] .dotg .eye, [data-theme="bunt"] .dotg .eye-line, [data-theme="bunt"] .dotg .mouth { display: none; }
[data-theme="bunt"] .dotg .ring { r: 18; }
[data-theme="bunt"] .edge { stroke-width: 5; opacity: .92; }
[data-theme="bunt"] .die::before {
  border: 0;
  border-radius: 18%;
  background: linear-gradient(145deg, #34378f, #16183f);
  box-shadow: 2px 3px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
[data-theme="bunt"] .die::after { display: none; }
[data-theme="bunt"] .die i { background: #fff; }
[data-theme="bunt"] .overlay { background: rgba(0, 0, 0, .45); }
[data-theme="bunt"] .card { transform: rotate(1.5deg) scale(.9); }
[data-theme="bunt"] .overlay.show .card { transform: rotate(1.5deg); }
[data-theme="bunt"] .lobby { transform: rotate(1deg); }
[data-theme="bunt"] .lobby.inked::before { background: #fff59a; }
[data-theme="bunt"] .lobby-label, [data-theme="bunt"] .lobby .waiting { font-size: 20px; }
[data-theme="bunt"] .lobby .code { font-family: inherit; font-weight: 700; font-size: 60px; color: var(--p1); }
[data-theme="bunt"] .lobby input { font-size: 15px; }
[data-theme="bunt"] .card h2 { font-family: inherit; font-weight: 700; font-size: 48px; }
[data-theme="bunt"] .result { font-size: 42px; }
[data-theme="bunt"] .tile { border-radius: 8px; }
[data-theme="bunt"] .tile.selected { background: var(--p1); color: #fff; border-color: var(--p1); }
[data-theme="bunt"] #padSvg { border-radius: 8px; }
[data-theme="bunt"] .toast { font-size: 22px; }
[data-theme="bunt"] .round { background: #1c1c1e; color: #fff; border-color: #fff; }

/* ==================== Kleine Bildschirme: Punkte gross genug zum Tippen ==================== */
@media (max-width: 640px) {
  .table { padding: 10px 6px 30px; }
  .board-wrap { width: 98vw; }
  .dotg .body { r: 17; }
  .dotg .ring { r: 27; }
  .dotg .hit { r: 42; }
  .dotg .eye, .dotg .eye-line, .dotg .mouth { display: none; }
  [data-theme="bunt"] .dotg .body { r: 14; }
}