/* Karl's Würfel-Duell – eine Würfelbude auf dem nächtlichen Jahrmarkt */

@font-face {
  font-family: "Bungee";
  src: url("/fonts/bungee-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Bungee";
  src: url("/fonts/bungee-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --night: #141b3c;
  --night-deep: #0b1029;
  --red: #e2363f;
  --red-dark: #a61f2a;
  --cream: #fff0cf;
  --bulb: #ffc93c;
  --bulb-hot: #fff6cf;
  --wood: #8a5530;
  --wood-dark: #5a3318;
  --ink: #1d1a2e;
  --ivory: #fff9ee;
  --gold: #f5b82e;

  --s: clamp(92px, 27vw, 128px);   /* Kantenlänge des Würfels */
  --half: calc(var(--s) / 2);
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --text: "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 400 17px/1.5 var(--text);
  color: var(--cream);
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 9%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 32%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 44%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 52%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 70%, #fff5 50%, transparent 51%),
    radial-gradient(120% 60% at 50% 0%, #26306a 0%, var(--night) 45%, var(--night-deep) 100%);
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------------------------------------------------------------- Markise */
.awning {
  height: 54px;
  background: repeating-linear-gradient(90deg, var(--red) 0 32px, var(--cream) 32px 64px);
  position: relative;
  box-shadow: 0 7px 0 rgb(70 10 20 / .35) inset;
}
.awning::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background:
    radial-gradient(circle at 16px 0, var(--red) 15.5px, transparent 16px) 0 0 / 64px 16px repeat-x,
    radial-gradient(circle at 48px 0, var(--cream) 15.5px, transparent 16px) 0 0 / 64px 16px repeat-x;
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / .35));
}

/* ------------------------------------------------------------- Bude/Layout */
.booth {
  width: min(100% - 32px, 460px);
  margin: 0 auto;
  padding: 34px 0 calc(48px + env(safe-area-inset-bottom));
  display: grid;
  gap: 22px;
}

/* -------------------------------------------------- Leuchtschild mit Birnen */
.sign {
  position: relative;
  padding: 16px;
  border-radius: 14px;
  background: var(--wood-dark);
  box-shadow: 0 10px 30px rgb(0 0 0 / .45), 0 0 0 3px #3b210f;
}
.sign-board {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .35em;
  padding: 14px 12px 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e8424a, var(--red) 55%, #c42933);
  font: 400 clamp(26px, 8.4vw, 40px)/1.05 var(--display);
  text-align: center;
  color: var(--bulb-hot);
  text-shadow: 0 2px 0 var(--red-dark), 0 4px 0 #6d1219, 0 0 18px rgb(255 201 60 / .55);
  letter-spacing: .01em;
}
.bulb {
  position: absolute; z-index: 2;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--bulb) 55%, #d68f00);
  box-shadow: 0 0 6px 2px rgb(255 201 60 / .55);
}
[data-chase] .bulb { animation: chase .6s steps(1) infinite; }
@keyframes chase {
  0%   { opacity: 1; box-shadow: 0 0 10px 4px rgb(255 214 90 / .85); }
  33%  { opacity: .28; box-shadow: none; }
}

/* Spielregel direkt unter dem Schild */
.rule {
  margin-top: -6px;
  text-align: center;
  font-size: 17px; line-height: 1.35;
  color: #e9dfc8;
}
.rule span, .rule strong { display: block; }
.rule strong {
  font-size: 22px; font-weight: 700;
  color: var(--bulb-hot);
  text-shadow: 0 0 14px rgb(255 201 60 / .4);
}

/* ------------------------------------------------------------ Bühne + Würfel */
.stage {
  position: relative;
  height: calc(var(--s) + 150px);
  perspective: 900px;
  perspective-origin: 50% 30%;
}
.counter {
  position: absolute; left: -16px; right: -16px; bottom: 0; height: 58px;
  border-radius: 10px 10px 4px 4px;
  background:
    linear-gradient(180deg, transparent 0 40px, var(--wood-dark) 40px),
    repeating-linear-gradient(176deg, rgb(0 0 0 / .07) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #a86a3c, var(--wood) 70%);
  box-shadow: 0 -2px 0 #c2824f inset, 0 12px 24px rgb(0 0 0 / .4);
}
.die-shadow {
  position: absolute; left: 50%; bottom: 30px;
  width: calc(var(--s) * 1.15); height: 26px; margin-left: calc(var(--s) * -.575);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 8 0 / .55), transparent);
}
.die-hop {
  position: absolute; left: 50%; bottom: 44px;
  width: var(--s); height: var(--s); margin-left: calc(var(--half) * -1);
  transform-style: preserve-3d;
}
.die-tilt {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* Blick schräg von oben: die obere Fläche ist das Ergebnis */
  transform: rotateX(-48deg) rotateY(26deg);
}
.die {
  position: relative;
  width: var(--s); height: var(--s);
  transform-style: preserve-3d;
}
.die .core, .die .face {
  position: absolute; inset: 0;
}
.die .core { background: #e4d4b4; }
.die .face {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 15%;
  border-radius: 17%;
  background: radial-gradient(circle at 28% 22%, #fff 0%, var(--ivory) 45%, #f2e6cf 100%);
  box-shadow: inset 0 0 0 1px rgb(90 60 20 / .08), inset -5px -7px 14px rgb(140 100 40 / .2);
  backface-visibility: hidden;
}
.pip {
  width: 76%; aspect-ratio: 1; margin: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #4b4661, var(--ink) 62%);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / .55), 0 1px 0 rgb(255 255 255 / .7);
  visibility: hidden;
}
.pip.on { visibility: visible; }
.f1 .pip.on {
  width: 100%;
  background: radial-gradient(circle at 38% 34%, #ff6b6b, #c41a2a 65%);
}
.f1 { transform: translateZ(var(--half)); }
.f6 { transform: rotateY(180deg) translateZ(var(--half)); }
.f3 { transform: rotateY(90deg) translateZ(var(--half)); }
.f4 { transform: rotateY(-90deg) translateZ(var(--half)); }
.f5 { transform: rotateX(90deg) translateZ(var(--half)); }
.f2 { transform: rotateX(-90deg) translateZ(var(--half)); }
.c1 { transform: translateZ(calc(var(--half) - 2px)); }
.c6 { transform: rotateY(180deg) translateZ(calc(var(--half) - 2px)); }
.c3 { transform: rotateY(90deg) translateZ(calc(var(--half) - 2px)); }
.c4 { transform: rotateY(-90deg) translateZ(calc(var(--half) - 2px)); }
.c5 { transform: rotateX(90deg) translateZ(calc(var(--half) - 2px)); }
.c2 { transform: rotateX(-90deg) translateZ(calc(var(--half) - 2px)); }

.die-gold .core { background: #b97c0c; }
.die-gold .face {
  background: radial-gradient(circle at 28% 22%, #fff3c4 0%, #ffd35c 40%, #e09a12 100%);
  box-shadow: inset 0 0 0 1px rgb(120 70 0 / .25), inset -5px -7px 14px rgb(150 80 0 / .35);
}
.die-gold .pip, .die-gold .f1 .pip.on {
  background: radial-gradient(circle at 38% 34%, #8a4b05, #4a2500 65%);
}

.quip {
  position: absolute; left: 50%; top: 4px; z-index: 3;
  transform: translateX(-50%) scale(.6);
  max-width: 92%;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--cream); color: var(--ink);
  font-weight: 700; text-align: center;
  opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.quip::after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -8px;
  border: 8px solid transparent; border-top-color: var(--cream);
}
.quip.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* -------------------------------------------------------------- Spielpanel */
.panel {
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 0 0 4px var(--red), 0 14px 30px rgb(0 0 0 / .35);
}
.panel-title { font-size: 22px; line-height: 1.2; font-weight: 700; margin-bottom: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: 15px; }
.field input {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid #c9b48a;
  border-radius: 10px;
  background: #fffdf6;
  color: var(--ink);
  font-size: 19px; font-weight: 400;
}
.field input:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.hint { margin-top: 10px; font-size: 14px; color: #5d5470; text-align: center; }
.error { min-height: 0; color: #b0141f; font-weight: 700; font-size: 15px; }
.error:not(:empty) { margin: -4px 0 12px; }
.my-result p { font-size: 17px; }

.btn {
  display: block; width: 100%;
  padding: 14px 18px 12px;
  border: 0; border-radius: 12px;
  font: 400 22px/1 var(--display);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(4px); }
.btn:disabled { cursor: not-allowed; filter: grayscale(.6) brightness(.85); }
.btn-roll {
  background: linear-gradient(180deg, #ef4b53, var(--red));
  color: var(--bulb-hot);
  text-shadow: 0 2px 0 var(--red-dark);
  box-shadow: 0 6px 0 var(--red-dark), 0 10px 18px rgb(166 31 42 / .45);
}
.btn-roll:active:not(:disabled) { box-shadow: 0 2px 0 var(--red-dark); }
.btn-end {
  background: linear-gradient(180deg, #ffd760, var(--gold));
  color: var(--ink);
  box-shadow: 0 6px 0 #a8730a;
}
.btn-end:active:not(:disabled) { box-shadow: 0 2px 0 #a8730a; }
.btn-end.armed {
  background: linear-gradient(180deg, #ff6b6b, var(--red));
  color: var(--bulb-hot);
  box-shadow: 0 6px 0 var(--red-dark);
}

/* ------------------------------------------- Beenden-Button (nur Karl/Karli) */
.karli-end { margin-top: 8px; }
.karli-end .error { color: #ff8a8a; margin: 10px 0 0; }

/* ------------------------------------------------------- Anzeigetafel/Lose */
.board h2 { font-size: 19px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.count { font: 400 15px/1 var(--display); color: var(--bulb); }
.empty { color: #c6bfd8; font-size: 15px; }
.tickets {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px;
}
.ticket {
  --notch: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
           radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: var(--cream); color: var(--ink);
  border-radius: 6px;
  -webkit-mask: var(--notch);
  mask: var(--notch);
}
.ticket-no { font: 400 14px/1 var(--display); color: #a08a62; }
.ticket-name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.ticket-roll { display: flex; align-items: center; gap: 8px; font: 400 22px/1 var(--display); }
.ticket.karli { background: linear-gradient(90deg, #ffe08a, var(--gold)); }
.ticket.karli .ticket-no { color: #8a5a00; }
.ticket.karli .ticket-name::before { content: "👑 "; }
.ticket.me { box-shadow: inset 0 0 0 3px var(--red); }
.ticket.fresh { animation: ticket-in .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ticket-in { from { transform: translateX(-24px) rotate(-3deg); opacity: 0; } }

.mini-die {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 28px; height: 28px; padding: 4px;
  border-radius: 6px;
  background: var(--ivory);
  box-shadow: inset 0 0 0 1.5px rgb(29 26 46 / .35);
}
.mini-die i { width: 5px; height: 5px; margin: auto; border-radius: 50%; }
.mini-die i.on { background: var(--ink); }
.mini-die.one i.on { background: #c41a2a; width: 7px; height: 7px; }
.karli .mini-die { background: #fff3c4; }

.offline {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--cream); box-shadow: 0 0 0 2px var(--red);
  font-size: 14px; z-index: 5;
}

/* ------------------------------------------------------------------ Dialoge */
dialog { color: var(--cream); }
dialog::backdrop { background: rgb(6 8 24 / .78); }

/* ----------------------------------------------------------- Gewinn-Screen */
.finale {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: radial-gradient(100% 70% at 50% 30%, #2d2a78 0%, var(--night) 50%, var(--night-deep) 100%);
  overflow-x: hidden; overflow-y: auto;
}
.finale[open] { display: block; }
.rays {
  position: fixed; left: 50%; top: 30%;
  width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax;
  background: repeating-conic-gradient(from 0deg, rgb(255 201 60 / .13) 0deg 9deg, transparent 9deg 18deg);
  mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%);
  animation: spin 40s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(1turn); } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.finale-inner {
  position: relative; z-index: 1;
  width: min(100% - 32px, 480px);
  margin: 0 auto;
  padding: calc(30px + env(safe-area-inset-top)) 0 calc(40px + env(safe-area-inset-bottom));
  display: grid; gap: 16px; text-align: center;
}
.finale-kicker { font-size: 19px; font-weight: 700; color: #e9dfc8; }
.finale-die {
  height: calc(var(--s) + 30px);
  display: grid; place-items: center;
  perspective: 800px;
}
.finale-die .die-tilt { width: var(--s); height: var(--s); }
/* --m setzt app.js: Lage mit der Siegerzahl oben. Der Würfel wiegt sich um die senkrechte Achse. */
.die-spin {
  --m: rotateX(0deg);
  transform: var(--m);
  animation: die-show 3.6s ease-in-out infinite;
}
@keyframes die-show {
  0%, 100% { transform: translateY(0) rotateY(-22deg) var(--m); }
  50%      { transform: translateY(-14px) rotateY(22deg) var(--m); }
}
/* --fit = Buchstaben im längsten Wort (setzt app.js) -> Name passt immer aufs Schild */
.sign-big .sign-board {
  font-size: clamp(16px, min(11vw, calc((min(100vw, 480px) - 110px) / (var(--fit, 6) * .82))), 58px);
  padding: 18px 14px 14px;
}
.finale-inner > * { min-width: 0; }
.winner-name { column-gap: .32em; row-gap: .1em; }
.winner-name .word { display: inline-block; white-space: nowrap; }
.winner-name .letter { display: inline-block; animation: pop .55s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes pop { from { transform: scale(0) rotate(-12deg); opacity: 0; } }
.winner-score { font: 400 22px/1.2 var(--display); color: var(--bulb); }
.winner-quip { font-size: 18px; color: #e9dfc8; }
.ranking-title { font-size: 17px; margin-top: 10px; text-align: left; }
.ranking { text-align: left; }
.ranking .ticket.top { box-shadow: inset 0 0 0 3px var(--red); }

/* --------------------------------------------------------- weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .rays, .die-spin, [data-chase] .bulb, .winner-name .letter, .ticket.fresh { animation: none; }
  .quip { transition: none; }
}

@media (min-width: 560px) {
  .booth { padding-top: 44px; gap: 26px; }
}