/* ── Yacht — Teakdeck ─────────────────────────────────────────────────────────────────────────────────────────────
   Eigene Optik nach Charakter (Memo „Spiele-Optik mit Wow“): Teakdeck von oben im Abendlicht, Würfelkiste mit Messingrand und
   Marine-Filz, elfenbeinfarbene CSS-3D-Würfel, Logbuch als Papierblatt mit Handschrift. Startbildschirm-Norm sb-*.
   Raster: quer Kiste links, Logbuch rechts; hochkant untereinander (@media unten). Schriften aus fonts.hirsing.eu
   (DM Serif Display = Titel, Caveat = Einträge im Logbuch, Lato = Bedienung). */
@font-face { font-family: 'DM Serif Display'; font-display: swap; src: url('https://fonts.hirsing.eu/dm-serif-display-v17-latin/dm-serif-display-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/caveat-v23-latin/caveat-v23-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 400; font-display: swap; src: url('https://fonts.hirsing.eu/lato-v25-latin/lato-v25-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/lato-v25-latin/lato-v25-latin-700.woff2') format('woff2'); }

:root {
  --marine: #0f2238; --marine-hell: #1d3d63; --messing: #d4a64e; --messing-hell: #f3d58e; --messing-dunkel: #8a6420;
  --elfenbein: #f7f1e3; --papier: #f4ecd8; --tinte: #1c2f52; --rot: #b8432f; --text: #f5efe2; --leise: #c9bba0;
  --teak: #8a5a32; --teak-hell: #a87344; --fuge: #2a1a0e;
  --titel: 'DM Serif Display', Georgia, serif; --hand: 'Caveat', 'Kalam', cursive; --sans: 'Lato', system-ui, sans-serif;
  --rand: max(14px, env(safe-area-inset-left)); --oben: max(12px, env(safe-area-inset-top)); --unten: max(12px, env(safe-area-inset-bottom));
  --w: clamp(52px, 6.4vw, 84px);   /* Würfelkante */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--sans); color: var(--text); }
/* Teakdeck: Planken (Maserung + dunkle Fugen), Abendlicht von links oben, Randabdunklung */
body {
  background:
    radial-gradient(ellipse 70% 60% at 22% 18%, rgba(255, 196, 120, 0.22), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(90deg, transparent 0 118px, var(--fuge) 118px 122px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 9px, rgba(255, 230, 190, 0.05) 9px 12px, transparent 12px 27px),
    linear-gradient(180deg, var(--teak-hell), var(--teak) 60%, #74482a);
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
.versteckt { display: none !important; }

/* ── Deck-Raster ───────────────────────────────────────────────────────── */
.deck { position: fixed; inset: var(--oben) var(--rand) var(--unten); display: grid; gap: 14px clamp(16px, 2.6vw, 40px);
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "oben oben" "kiste logbuch"; }
.deck-oben { grid-area: oben; display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: 160px; }   /* Platz für die GameZone-Pille */
.status { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.status .runde { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--messing-hell); }
.status .wer { font-family: var(--titel); font-size: clamp(20px, 2vw, 28px); }
.knoepfe { display: flex; gap: 8px; margin-left: auto; }
.rund { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(243, 213, 142, 0.45);
  background: rgba(15, 34, 56, 0.72); color: var(--messing-hell); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund .strich-aus { display: none; } .rund.aus .strich-aus { display: inline; } .rund.aus .welle { display: none; }
body.im-menue .knoepfe { visibility: hidden; }
/* Startbild: was unter der Startkarte läge, bleibt weg (Prüfung 30.10.: Kiste und Würfeln-Knopf schienen durch die Karte).
   Quer: Karte links über dem Holz, Logbuch rechts als Kulisse; hochkant: Kiste oben würfelt die Demo, Logbuch weg (Karte unten). */
body.im-menue .wurf-zeile { visibility: hidden; }
@media (min-width: 821px) and (min-aspect-ratio: 4/5) { body.im-menue .kiste-bereich { visibility: hidden; } }
@media (max-width: 820px), (max-aspect-ratio: 4/5) { body.im-menue .logbuch { visibility: hidden; } }

/* ── Würfelkiste ───────────────────────────────────────────────────────── */
.kiste-bereich { grid-area: kiste; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 18px; }   /* Polster: Messingrand (box-shadow) ragt 15px hinaus */
.kiste { position: relative; border-radius: 22px; padding: clamp(26px, 4vh, 46px) clamp(16px, 2.6vw, 36px);
  /* Marine-Filz mit Körnung, innen Schatten; Holzkante + Messingrand außen */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 40% 35%, var(--marine-hell), var(--marine) 75%);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 0 10px #5b3a20, 0 0 0 13px var(--messing), 0 0 0 15px var(--messing-dunkel), 0 24px 50px rgba(0, 0, 0, 0.55); }
.wuerfelreihe { display: flex; justify-content: center; gap: clamp(12px, 2.2vw, 30px); perspective: 900px; min-height: calc(var(--w) * 1.5); align-items: center; padding-bottom: calc(var(--w) * 0.75); }   /* unten Platz für die Zahlen */
.platz { position: relative; width: var(--w); height: var(--w); padding: 0; border: 0; background: none; transition: transform 0.25s ease; transform-style: preserve-3d; }
.platz:disabled { cursor: default; }
.platz::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%); }
/* Gehalten: leicht nach unten geschoben, goldene Kanten an jeder Würfelseite (folgen der Würfelform) und ein goldener Schein auf
   dem Filz. Bis 28.10. ein flacher Messingring um den Platz — passte nicht zum schräg liegenden Würfel (Micha: „unschöne Ränder“):
   .platz.gehalten::before { content: ''; position: absolute; inset: -9px; border-radius: 18px; border: 3px solid var(--messing);
     box-shadow: 0 0 0 1px var(--messing-dunkel), 0 0 16px rgba(243, 213, 142, 0.45); } */
.platz.gehalten { transform: translateY(calc(var(--w) * 0.32)); }
.platz.gehalten .seite { box-shadow: inset 0 0 0 calc(var(--w) * 0.045) var(--messing), inset 0 0 calc(var(--w) * 0.12) rgba(212, 166, 78, 0.45); }
.platz.gehalten::after { left: -12%; right: -12%; bottom: -18px; height: 18px; background: radial-gradient(ellipse, rgba(243, 213, 142, 0.55), transparent 70%); }
/* Gewürfelte Zahl klein unter dem Würfel (gezählt wird die Vorderseite, oben liegt eine andere Zahl — Micha 28.10.) */
.zahl { position: absolute; left: 0; right: 0; bottom: calc(var(--w) * -0.98);   /* unter der Haltelinie (gehalten sinkt 0,32 w ab) */ text-align: center; font-family: var(--titel); font-size: calc(var(--w) * 0.3);
  line-height: 1; color: var(--messing-hell); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none; }
.platz.gehalten .zahl { transform: translateY(calc(var(--w) * -0.32)); }   /* Zahl bleibt in der Reihe, wenn der Würfel zum Halten absinkt */
/* vor dem ersten Wurf abgedunkelt — deckende Schicht auf jeder Seite. Nicht über opacity/filter: am preserve-3d-Element macht das den
   Würfel flach, auf den Seiten scheinen die hinteren Augen durch (Micha 28.10.) */
.platz.leer .seite::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(12, 24, 40, 0.42); }
.platz.leer .kern { background: #83817a; }   /* Kernfarbe mit derselben Abdunklung gemischt */
.platz.huepfen { animation: huepfen 0.95s cubic-bezier(.3, .7, .4, 1); }
@keyframes huepfen {
  0% { transform: translate(0, 0); } 18% { transform: translate(var(--dx), calc(var(--w) * -0.9)) rotate(var(--dreh)); }
  55% { transform: translate(calc(var(--dx) * 0.4), 0) rotate(calc(var(--dreh) * -0.4)); } 72% { transform: translate(calc(var(--dx) * 0.15), calc(var(--w) * -0.14)); }
  100% { transform: translate(0, 0); } }
.wuerfel { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.95s cubic-bezier(.2, .75, .25, 1); }
/* Innerer Kern (.kern, sechs eckige Flächen knapp unter den Seiten, main.js): füllt die Würfelecken, die die abgerundeten Seiten frei
   lassen — sonst klaffen beim Drehen an den Ecken Lücken (Micha 28.10.: „unschöne Ränder“). Wirkt wie eine abgeschrägte Kante. */
.kern { position: absolute; inset: 1.5%; background: #d9ceb3; backface-visibility: hidden; }   /* kleiner als der Würfel: reicht nicht bis an die
   Kanten — sonst flimmert beim Rollen ein heller Rahmen entlang der Kanten (Micha 28.10.) */
.kern.vorn { transform: translateZ(calc(var(--w) * 0.47)); } .kern.hinten { transform: rotateY(180deg) translateZ(calc(var(--w) * 0.47)); }
.kern.rechts { transform: rotateY(90deg) translateZ(calc(var(--w) * 0.47)); } .kern.links { transform: rotateY(-90deg) translateZ(calc(var(--w) * 0.47)); }
.kern.oben { transform: rotateX(90deg) translateZ(calc(var(--w) * 0.47)); } .kern.unten { transform: rotateX(-90deg) translateZ(calc(var(--w) * 0.47)); }
.seite { position: absolute; inset: 0; backface-visibility: hidden; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; border-radius: 10%;
  background: radial-gradient(circle at 30% 25%, #fffdf6, var(--elfenbein) 55%, #e3d8bf); box-shadow: inset 0 0 0 1px rgba(120, 100, 60, 0.25), inset 0 -4px 10px rgba(120, 95, 50, 0.25); }
.seite i { display: block; }
.seite .auge { margin: 16%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d5e93, var(--tinte) 70%); box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5); }
.seite.vorn .auge { margin: 8%; background: radial-gradient(circle at 35% 35%, #e0705a, var(--rot) 70%); }   /* die Eins (Seite vorn, main.js SEITEN) groß und rot */
.vorn { transform: translateZ(calc(var(--w) / 2)); } .hinten { transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.rechts { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); } .links { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.oben { transform: rotateX(90deg) translateZ(calc(var(--w) / 2)); } .unten { transform: rotateX(-90deg) translateZ(calc(var(--w) / 2)); }

.wurf-zeile { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.wuerfe { display: flex; gap: 8px; justify-self: end; }
.wuerfe i { width: 14px; height: 14px; border-radius: 50%; background: var(--messing); box-shadow: 0 0 0 2px var(--messing-dunkel), 0 0 10px rgba(243, 213, 142, 0.5); transition: opacity .2s, transform .2s; }
.wuerfe i.weg { opacity: 0.18; transform: scale(0.75); box-shadow: 0 0 0 2px var(--messing-dunkel); }
.wurf-knopf { min-width: 200px; padding: 14px 30px; border: 0; border-radius: 999px; font-family: var(--titel); font-size: 24px; color: #2a1c07;
  background: linear-gradient(180deg, var(--messing-hell), var(--messing) 55%, #b5852f); box-shadow: 0 2px 0 var(--messing-dunkel), 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform .08s, filter .2s; }
.wurf-knopf:hover:not(:disabled) { filter: brightness(1.06); }
.wurf-knopf:active:not(:disabled) { transform: translateY(1px); }
.wurf-knopf:disabled { cursor: default; filter: grayscale(0.6) brightness(0.8); opacity: 0.7; }
.hinweis { font-size: 14px; color: var(--leise); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.deck.ki-dran .wurf-knopf { opacity: 0.45; }

/* ── Logbuch ───────────────────────────────────────────────────────────── */
.logbuch { grid-area: logbuch; min-height: 0; display: flex; flex-direction: column; border-radius: 6px 14px 14px 6px; color: var(--tinte);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 6%), var(--papier);
  box-shadow: -6px 0 0 #2c3e60, -9px 0 0 #1b2a45, 0 20px 46px rgba(0, 0, 0, 0.55); transform: rotate(0.6deg); }
.logbuch-titel { margin: 0; padding: 12px 18px 6px; font-family: var(--titel); font-weight: 400; font-size: 26px; border-bottom: 2px solid rgba(28, 47, 82, 0.5); }
.logbuch-blatt { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 10px; scrollbar-width: thin; }
.blatt { width: 100%; border-collapse: collapse; font-size: 14px; }
.blatt th { padding: 6px 4px 4px; font-weight: 700; font-size: 13px; text-align: center; color: rgba(28, 47, 82, 0.7); max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blatt th.dran { color: var(--rot); }
.blatt td { padding: 3px 4px; border-bottom: 1px solid rgba(80, 120, 170, 0.28); height: 30px; }
.blatt .kat { white-space: nowrap; }
.blatt .kat-name { font-weight: 700; }
.blatt .kat-info { display: block; font-size: 11px; color: rgba(28, 47, 82, 0.55); line-height: 1.1; }
.blatt .feld { text-align: center; min-width: 46px; font-family: var(--hand); font-size: 22px; line-height: 1; color: var(--tinte); }
.blatt .feld.dran { background: rgba(212, 166, 78, 0.12); }
.blatt .feld.moeglich { color: rgba(28, 47, 82, 0.38); }
.blatt .feld.moeglich.null { color: rgba(184, 67, 47, 0.35); }
.blatt tr.waehlbar { cursor: pointer; }
.blatt tr.waehlbar:hover .feld.moeglich { color: var(--rot); background: rgba(184, 67, 47, 0.1); }
.blatt tr.waehlbar:hover .kat-name { color: var(--rot); }
.blatt tr.ki-wahl .feld.moeglich { color: var(--rot); background: rgba(184, 67, 47, 0.14); }
.blatt .feld.neu-eingetragen { animation: eintrag 0.8s ease-out; }
@keyframes eintrag { 0% { transform: scale(1.6); color: var(--rot); } 100% { transform: none; } }
.blatt tr.summe td { background: rgba(28, 47, 82, 0.05); font-weight: 700; }
.blatt tr.summe .feld { font-family: var(--sans); font-size: 15px; }
.blatt tr.bonus .feld { font-size: 13px; color: rgba(28, 47, 82, 0.6); }
.blatt tr.erste-unten td { border-top: 2px solid rgba(28, 47, 82, 0.45); }
.blatt tr.gesamt td { border-top: 2px solid var(--tinte); border-bottom: 3px double var(--tinte); font-size: 16px; }
.blatt tr.gesamt .feld { font-size: 19px; color: var(--rot); }

/* ── Meldung (eingetragen, Yacht!, Bonus) ──────────────────────────────── */
.meldung { position: fixed; left: 50%; top: 18%; transform: translate(-50%, -10px); padding: 10px 22px; border-radius: 999px; z-index: 30; pointer-events: none;
  background: rgba(15, 34, 56, 0.9); border: 1px solid rgba(243, 213, 142, 0.5); color: var(--messing-hell); font-family: var(--titel); font-size: 22px;
  opacity: 0; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }

/* ── Startbildschirm (Norm sb-*) ───────────────────────────────────────── */
.ebene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.sb { justify-content: flex-start; padding-left: clamp(16px, 7vw, 110px);
  background: linear-gradient(90deg, rgba(10, 22, 38, 0.95) 0%, rgba(10, 22, 38, 0.78) 38%, rgba(10, 22, 38, 0.15) 70%); }
.sb-karte { width: min(500px, 100%); max-height: 100%; overflow-y: auto; padding: 8px 4px; scrollbar-width: none; }
.sb-titel { margin: 0; font-family: var(--titel); font-weight: 400; font-size: clamp(60px, 8vw, 118px); line-height: 0.92;
  background: linear-gradient(180deg, #fff7e2 0%, var(--messing-hell) 45%, var(--messing) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(212, 166, 78, 0.35)); }
.sb-unterzeile { margin: 10px 0 24px; color: var(--leise); font-size: clamp(15px, 1.5vw, 18px); }
.sb-gruppe { margin: 0 0 14px; }
.sb-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--messing-hell); margin-bottom: 6px; opacity: 0.85; }
.sb-wahl { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(243, 213, 142, 0.25); }
.sb-wahl button { flex: 1; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font-weight: 700; transition: background .15s, color .15s; }
.sb-wahl button:hover { color: var(--text); }
.sb-wahl button.an { background: linear-gradient(180deg, var(--messing-hell), var(--messing)); color: #2a1c07; box-shadow: 0 2px 10px rgba(212, 166, 78, 0.35); }
.sb-namen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sb-namen input { min-width: 0; padding: 9px 14px; border: 1px solid rgba(243, 213, 142, 0.25); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--text); font: inherit; font-weight: 700; }
.sb-namen input:focus { outline: none; border-color: var(--messing); }
.sb-namen input::placeholder { color: var(--leise); font-weight: 400; }
.sb-start { width: 100%; margin: 10px 0 14px; padding: 14px; border: 0; border-radius: 999px; font-family: var(--titel); font-size: 28px; color: #2a1c07;
  background: linear-gradient(180deg, var(--messing-hell), var(--messing) 55%, #b5852f); box-shadow: 0 2px 0 var(--messing-dunkel), 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.sb-start:hover { filter: brightness(1.06); }
.sb-hilfe { border: 1px solid rgba(243, 213, 142, 0.22); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--leise); background: rgba(255, 255, 255, 0.03); }
.sb-hilfe summary { color: var(--text); font-weight: 700; cursor: pointer; }
.sb-hilfe p { margin: 8px 0 0; line-height: 1.5; }
.sb-sprache { margin-top: 12px; background: none; border: 1px solid rgba(243, 213, 142, 0.3); border-radius: 999px; padding: 6px 14px; color: var(--leise); font-size: 13px; }

/* ── Ende / Pause ──────────────────────────────────────────────────────── */
#ende, #pause { background: rgba(8, 16, 28, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.karte { width: min(420px, 100%); max-height: 100%; overflow-y: auto; padding: 24px 26px; text-align: center; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 20%, var(--marine-hell), var(--marine)); border: 1px solid rgba(243, 213, 142, 0.45); box-shadow: 0 0 0 4px rgba(212, 166, 78, 0.15), 0 24px 60px rgba(0, 0, 0, 0.6); }
.karte h2 { margin: 0 0 12px; font-family: var(--titel); font-weight: 400; font-size: 34px; color: var(--messing-hell); }
.stand { list-style: none; counter-reset: platz; margin: 0 auto 6px; padding: 0; max-width: 300px; text-align: left; }
.stand li { counter-increment: platz; display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(243, 213, 142, 0.18); font-size: 17px; }
.stand li::before { content: counter(platz) '.'; color: var(--leise); width: 1.4em; }
.stand li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand li b { color: var(--messing-hell); }
.knopf-gross { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-family: var(--titel); font-size: 22px; color: #2a1c07;
  background: linear-gradient(180deg, var(--messing-hell), var(--messing)); }
.knopf-leise { display: block; width: 100%; margin-top: 8px; padding: 9px; border: 1px solid rgba(243, 213, 142, 0.3); border-radius: 999px; background: none; color: var(--leise); }

/* ── Hochkant / schmal (Handy) ─────────────────────────────────────────── */
@media (max-width: 820px), (max-aspect-ratio: 4/5) {
  :root { --w: clamp(38px, 10.5vw, 60px); }   /* schräg gestellte Würfel brauchen seitlich Luft */
  .deck { inset: var(--oben) 8px var(--unten); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "oben" "kiste" "logbuch"; gap: 10px; }
  .deck-oben { padding-left: 0; padding-top: 50px; min-height: 0; }
  .knoepfe { position: absolute; top: 0; right: 0; }
  .rund { width: 36px; height: 36px; }
  .status .wer { font-size: 20px; }
  .kiste { padding: 18px 10px 26px; border-radius: 16px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 0 6px #5b3a20, 0 0 0 8px var(--messing), 0 0 0 9px var(--messing-dunkel), 0 14px 30px rgba(0, 0, 0, 0.5); }
  .wuerfelreihe { gap: 16px; min-height: calc(var(--w) * 1.6); }
  .kiste-bereich { gap: 12px; padding: 0 10px; }
  .wurf-zeile { grid-template-columns: auto 1fr; } .wuerfe { justify-self: start; } .hinweis { display: none; }
  .wurf-knopf { min-width: 0; padding: 11px 18px; font-size: 21px; }
  .logbuch { transform: none; } .logbuch-titel { font-size: 20px; padding: 8px 14px 4px; }
  .blatt .kat-info { display: none; } .blatt td { height: 27px; } .blatt .feld { font-size: 20px; min-width: 38px; }
  .sb { justify-content: center; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(10, 22, 38, 0.3) 0%, rgba(10, 22, 38, 0.95) 45%); }
  .sb-titel { font-size: 64px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
  :root { --w: clamp(40px, 5.6vw, 58px); }
  .kiste { padding: 14px 14px 20px; } .wuerfelreihe { min-height: calc(var(--w) * 1.35); } .kiste-bereich { gap: 10px; }
  .wurf-knopf { padding: 8px 20px; font-size: 19px; }
  .blatt td { height: 22px; } .blatt .feld { font-size: 17px; } .blatt .kat-info { display: none; }
  .sb-karte { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-content: center; }
  .sb-titel, .sb-unterzeile { grid-column: 1 / -1; } .sb-titel { font-size: 56px; } .sb-unterzeile { margin: 4px 0 10px; }
}