/*
 * Enthüllung: Hintergründe (Themes) und Darstellungen der Zahl.
 * Themes angelehnt an MagicWeb (Mystisch, Bühne, Neon, Vintage, Modern),
 * ergänzt um Schwarz, Holztisch und Spieltisch.
 * Nur Systemschriften – lädt sofort, auch offline.
 *
 * Zustände: .reveal (aufgebaut, verdeckt) -> .reveal.is-playing (Animation läuft)
 */

.reveal {
    --bg: #000;
    --text: #fff;
    --accent: #fff;
    --digit: #fff;
    --digit-shadow: none;
    --head-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --object-shadow: 0 30px 40px rgba(0, 0, 0, .55);

    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text);
    touch-action: manipulation;
}

.bg-layer { position: absolute; inset: 0; display: none; pointer-events: none; }

.reveal-object {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.reveal.is-playing .reveal-object { animation: obj-in .7s ease-out forwards; }
@keyframes obj-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* Vorhang und Volant sind nur im Theme „Bühne“ sichtbar */
.curtain, .valance { display: none; }

/* =====================================================================
   THEMES
   ===================================================================== */

/* ---------- Schwarz ---------- */
.theme-schwarz { --bg: #000; }

/* ---------- Bühne: Zaubervorhang, Scheinwerfer ---------- */
.theme-buehne {
    --bg: #0a0807;
    --text: #f3e9da;
    --accent: #e8b75a;
    --digit: #fff6e0;
    --digit-shadow: 0 0 30px rgba(255, 215, 140, .55), 0 3px 0 #6b4a12;
    --head-font: 'Bodoni 72', Didot, 'Bodoni MT', Georgia, serif;
}
.theme-buehne .bg-1 {
    display: block;
    background:
        radial-gradient(90% 30% at 50% 100%, rgba(120, 60, 20, .4), transparent 70%),
        linear-gradient(#120d0b, #0a0807 60%, #1b0f09);
}
/* Scheinwerferkegel */
.theme-buehne .bg-2 {
    display: block;
    background: radial-gradient(48% 34% at 50% 50%, rgba(255, 236, 190, .3), rgba(255, 236, 190, .08) 60%, transparent 75%);
    opacity: 0;
}
.theme-buehne.is-playing .bg-2 { animation: spot-on 1.2s ease-out .9s forwards; }
@keyframes spot-on { to { opacity: 1; } }
/* Bühnenboden */
.theme-buehne .bg-3 {
    display: block;
    top: auto;
    height: 18%;
    background: linear-gradient(rgba(70, 35, 15, .9), #1a0d06), repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 60px);
    background-blend-mode: multiply;
    box-shadow: 0 -2px 0 rgba(232, 183, 90, .4);
}
.theme-buehne .curtain {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 51%;
    background:
        linear-gradient(rgba(0, 0, 0, .35), transparent 18%, transparent 80%, rgba(0, 0, 0, .55)),
        repeating-linear-gradient(90deg, #4c050d 0, #8c0d1d 4%, #c42139 7%, #8c0d1d 10.5%, #4c050d 14%);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .7), 0 0 30px rgba(0, 0, 0, .8);
    transition: transform 2.2s cubic-bezier(.6, 0, .25, 1) .25s;
}
.theme-buehne .curtain-l { left: 0; transform-origin: left center; }
.theme-buehne .curtain-r { right: 0; transform-origin: right center; }
.theme-buehne.is-playing .curtain-l { transform: translateX(-84%) scaleX(.9); }
.theme-buehne.is-playing .curtain-r { transform: translateX(84%) scaleX(.9); }
/* Volant (Querbehang) oben */
.theme-buehne .valance {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: max(70px, 10vh);
    background:
        radial-gradient(circle at 50% 0, #b3132a 68%, #6d0814 70%, transparent 72%) 0 100% / 64px 36px repeat-x,
        linear-gradient(#5f0711, #a3122a) top / 100% calc(100% - 22px) no-repeat;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .7));
}
.theme-buehne .valance::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 24px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
/* Objekt erscheint erst, wenn der Vorhang aufgeht */
.theme-buehne.is-playing .reveal-object { animation-delay: .9s; animation-duration: 1s; }

/* ---------- Mystisch: Nachthimmel, Sterne, Gold ---------- */
.theme-mystisch {
    --bg: #0b0820;
    --text: #e4ddff;
    --accent: #f5c66b;
    --head-font: Didot, 'Bodoni 72', 'Bodoni MT', Georgia, serif;
    --object-shadow: 0 0 60px rgba(150, 100, 255, .45);
}
.theme-mystisch .bg-1 {
    display: block;
    background:
        radial-gradient(60% 40% at 85% 25%, rgba(70, 160, 200, .18), transparent 70%),
        radial-gradient(70% 45% at 10% 60%, rgba(150, 60, 200, .22), transparent 70%),
        radial-gradient(130% 70% at 50% 0%, #3b1f73 0%, #1a1040 42%, #0b0820 78%);
}
.theme-mystisch .bg-2,
.theme-mystisch .bg-3 { display: block; }
.theme-mystisch .bg-2 {
    background-image:
        radial-gradient(1.4px 1.4px at 22px 34px, #fff, transparent),
        radial-gradient(1px 1px at 96px 128px, #fff, transparent),
        radial-gradient(1.2px 1.2px at 150px 60px, #fff, transparent),
        radial-gradient(1px 1px at 60px 180px, #fff, transparent),
        radial-gradient(1.6px 1.6px at 170px 170px, #ffe9b8, transparent);
    background-size: 190px 210px;
    animation: twinkle 3.5s ease-in-out infinite alternate;
}
.theme-mystisch .bg-3 {
    background-image:
        radial-gradient(2px 2px at 40px 80px, #fff, transparent),
        radial-gradient(1.6px 1.6px at 230px 40px, #d9c8ff, transparent),
        radial-gradient(2.2px 2.2px at 180px 260px, #fff, transparent),
        radial-gradient(1.4px 1.4px at 90px 300px, #ffe9b8, transparent);
    background-size: 280px 340px;
    animation: twinkle 5s ease-in-out 1s infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.theme-mystisch .d-digit {
    background: linear-gradient(100deg, #b8862b 0%, #ffe7a3 30%, #c9973a 50%, #fff3c9 70%, #b8862b 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 6s linear infinite;
    filter: drop-shadow(0 4px 30px rgba(245, 198, 107, .35));
}
@keyframes shimmer { to { background-position: -220% 0; } }
.theme-mystisch.is-playing .reveal-object { animation: mist-in 1.6s ease-out forwards; }
@keyframes mist-in {
    from { opacity: 0; filter: blur(18px); transform: scale(1.15); }
    to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ---------- Neon: Leuchtschrift, Synthwave-Gitter ---------- */
.theme-neon {
    --bg: #07031a;
    --text: #d7efff;
    --accent: #00f0ff;
    --digit: #fff;
    --digit-shadow: 0 0 6px #fff, 0 0 16px #ff2bd6, 0 0 36px #ff2bd6, 0 0 70px #ff2bd6;
    --head-font: Futura, 'Avenir Next Condensed', 'Trebuchet MS', 'Arial Narrow', sans-serif;
    --object-shadow: 0 0 10px rgba(0, 240, 255, .85), 0 0 40px rgba(255, 43, 214, .6);
}
.theme-neon .bg-1 {
    display: block;
    background:
        radial-gradient(circle at 50% 74%, rgba(255, 90, 180, .55) 0, rgba(255, 140, 60, .25) 14%, transparent 34%),
        linear-gradient(#07031a 0%, #150638 45%, #3a0a5a 72%, #07031a 100%);
}
.theme-neon .bg-2 {
    display: block;
    top: auto;
    height: 42%;
    background-image:
        linear-gradient(rgba(255, 43, 214, .75) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(255, 43, 214, .75) 1.5px, transparent 1.5px);
    background-size: 46px 46px;
    background-position: center 0;
    transform: perspective(260px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(transparent, #000 55%);
    mask-image: linear-gradient(transparent, #000 55%);
    animation: grid 2.4s linear infinite;
    opacity: .75;
}
@keyframes grid { to { background-position: center 46px; } }
.theme-neon.is-playing .reveal-object { animation: neon-on 1.4s steps(1, end) forwards; }
@keyframes neon-on {
    0% { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .1; } 30% { opacity: 1; }
    36% { opacity: .3; } 44% { opacity: 1; } 100% { opacity: 1; }
}
.theme-neon .d-digit { animation: flicker 6s 2s infinite; }
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: .55; }
}
.theme-neon .zodiac-glyph, .theme-neon .zodiac-name { color: #fff; text-shadow: 0 0 8px #00f0ff, 0 0 24px #00f0ff; }

/* ---------- Vintage: Papier, Ornamente ---------- */
.theme-vintage {
    --bg: #f1e6cc;
    --text: #3b2a1a;
    --accent: #8a2b1d;
    --digit: #2a1c10;
    --digit-shadow: 0 2px 0 rgba(255, 255, 255, .5);
    --head-font: Baskerville, 'Hoefler Text', 'Baskerville Old Face', Georgia, serif;
    --object-shadow: 0 14px 20px rgba(60, 35, 10, .4);
}
.theme-vintage .bg-1 {
    display: block;
    background-color: #f1e6cc;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .55), transparent 45%),
        radial-gradient(circle at 85% 65%, rgba(160, 110, 50, .14), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(140, 90, 40, .12), transparent 40%),
        repeating-radial-gradient(circle at 30% 40%, rgba(120, 80, 30, .03) 0 1px, transparent 1px 4px);
}
.theme-vintage .bg-2 { display: block; background: radial-gradient(ellipse at center, transparent 50%, rgba(90, 55, 20, .35) 100%); }
.theme-vintage .bg-3 {
    display: block;
    inset: calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px);
    border: 1px solid rgba(90, 55, 20, .4);
    outline: 1px solid rgba(90, 55, 20, .25);
    outline-offset: 5px;
}
.theme-vintage .bg-3::before,
.theme-vintage .bg-3::after {
    content: '❦\FE0E';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: var(--accent);
    background: #f1e6cc;
    padding: 0 .4em;
}
.theme-vintage .bg-3::before { top: -21px; }
.theme-vintage .bg-3::after { bottom: -21px; transform: translateX(-50%) rotate(180deg); }
.theme-vintage .d-digit { font-variant: small-caps; font-weight: 400; }
.theme-vintage .zodiac-medal { filter: sepia(.4); }
.theme-vintage.is-playing .reveal-object { animation: ink-in 1.8s ease-out forwards; }
@keyframes ink-in {
    from { opacity: 0; filter: blur(6px) sepia(1); }
    to   { opacity: 1; filter: blur(0) sepia(0); }
}

/* ---------- Modern: hell, große Typografie ---------- */
.theme-modern {
    --bg: #f6f5f2;
    --text: #18181b;
    --accent: #7c5cff;
    --head-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --object-shadow: 0 28px 36px rgba(30, 20, 70, .28);
}
.theme-modern .bg-1 {
    display: block;
    background:
        radial-gradient(38% 28% at 12% 18%, rgba(124, 92, 255, .38), transparent 70%),
        radial-gradient(34% 26% at 92% 40%, rgba(255, 140, 90, .32), transparent 70%),
        radial-gradient(44% 30% at 40% 88%, rgba(60, 200, 255, .28), transparent 70%);
    filter: blur(24px);
    animation: drift 12s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-4%, 3%) scale(1.08); } }
.theme-modern .d-digit {
    font-weight: 800;
    letter-spacing: -.05em;
    background: linear-gradient(120deg, #18181b 30%, var(--accent) 75%, #ff7a59);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 .08em;
}
.theme-modern.is-playing .reveal-object { animation: rise-in .9s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes rise-in {
    from { opacity: 0; transform: translateY(12%); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Holztisch ---------- */
.theme-holz {
    --bg: #4a2b16;
    --digit: #fdf3e1;
    --digit-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(255, 210, 150, .3);
    --head-font: var(--serif);
    --object-shadow: 0 30px 40px rgba(20, 8, 0, .6);
}
.theme-holz .bg-1 {
    display: block;
    background:
        repeating-linear-gradient(92deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(88deg, rgba(255, 220, 170, .06) 0 1px, transparent 1px 23px),
        repeating-radial-gradient(ellipse 160% 18% at 30% 40%, #6b3f20 0 6px, #5a331a 6px 11px, #74462a 11px 15px),
        #5a331a;
}
/* Dielen-Fugen */
.theme-holz .bg-2 {
    display: block;
    background: repeating-linear-gradient(90deg, transparent 0 calc(33.33% - 2px), rgba(20, 8, 0, .55) calc(33.33% - 2px) 33.33%);
}
/* Lichtkegel einer Lampe */
.theme-holz .bg-3 {
    display: block;
    background: radial-gradient(60% 45% at 50% 48%, rgba(255, 220, 160, .3), transparent 70%), radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- Spieltisch (grüner Filz) ---------- */
.theme-spieltisch {
    --bg: #0d4a2a;
    --accent: #e8c56a;
    --digit: #f1d58a;
    --digit-shadow: 0 3px 0 #6b5214, 0 0 30px rgba(241, 213, 138, .35);
    --head-font: var(--serif);
    --object-shadow: 0 24px 30px rgba(0, 20, 8, .6);
}
.theme-spieltisch .bg-1 {
    display: block;
    background:
        repeating-radial-gradient(circle at 37% 61%, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
        radial-gradient(75% 60% at 50% 45%, #1b7a45, #0f5a32 60%, #073019 100%);
}
.theme-spieltisch .bg-2 {
    display: block;
    inset: 7% 7%;
    border: 2px solid rgba(232, 197, 106, .45);
    border-radius: 48% / 30%;
    box-shadow: 0 0 0 6px rgba(232, 197, 106, .08);
}

/* =====================================================================
   DARSTELLUNGEN
   ===================================================================== */

/* ---------- Große Ziffer / Römisch ---------- */
.d-digit {
    font-family: var(--head-font);
    font-size: min(75vmin, 60vh);
    font-weight: 700;
    line-height: 1;
    color: var(--digit);
    text-shadow: var(--digit-shadow);
    font-variant-numeric: tabular-nums;
}
.d-roman {
    font-family: var(--serif);
    font-size: min(42vmin, 38vh);
    font-weight: 500;
    letter-spacing: .06em;
}
.theme-buehne .d-roman, .theme-holz .d-roman, .theme-spieltisch .d-roman { font-family: 'Trajan Pro', var(--serif); }

/* ---------- Würfel ---------- */
.die-wrap {
    --s: min(46vmin, 32vh);
    position: relative;
    width: var(--s);
    height: var(--s);
    perspective: 900px;
}
.die-drop { width: 100%; height: 100%; transform-style: preserve-3d; transform: translateY(-120vh); }
.is-playing .die-drop { animation: die-drop 1.7s cubic-bezier(.3, 0, .3, 1) forwards; }
@keyframes die-drop {
    0%   { transform: translateY(-120vh); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    45%  { transform: translateY(0); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    62%  { transform: translateY(-22%); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    78%  { transform: translateY(0); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    88%  { transform: translateY(-6%); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    100% { transform: translateY(0); }
}
.die-tilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(20deg); }
.die {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx0)) rotateY(var(--ry0));
}
.is-playing .die {
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 2.1s cubic-bezier(.12, .6, .25, 1);
}
.die-face {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    padding: 13%;
    border-radius: 16%;
    background: radial-gradient(circle at 30% 25%, #ffffff, #f3efe6 55%, #d9d2c3);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 -8px 18px rgba(0, 0, 0, .12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.die-face i { display: block; }
.die-face .pip {
    width: 72%;
    height: 72%;
    margin: auto;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #444, #0b0b0b 70%);
    box-shadow: inset 0 3px 4px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .7);
}
.die-face.f1 .pip { width: 95%; height: 95%; background: radial-gradient(circle at 40% 35%, #ff4a4a, #a30000 70%); }
.die-face.f1 { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); }
.die-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die-face.f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die-face.f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die-face.f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die-shadow {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -22%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
    opacity: 0;
}
.is-playing .die-shadow { animation: die-shadow 1.7s ease-in forwards; }
@keyframes die-shadow { 0% { opacity: 0; transform: scale(.4); } 45%, 100% { opacity: 1; transform: scale(1); } }
.theme-neon .die-face { box-shadow: inset 0 0 0 2px #00f0ff, 0 0 18px rgba(0, 240, 255, .6); }

/* ---------- Karten mit Umdreh-Animation (Spielkarte, ESP, Tarot) ---------- */
.card3d {
    --w: min(62vw, 40vh);
    width: var(--w);
    height: calc(var(--w) * 1.4);
    perspective: 1200px;
}
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}
.is-playing .card-inner { transition: transform 1.3s cubic-bezier(.3, .1, .2, 1) .35s; transform: rotateY(0); }
.card-inner > * {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--w) * .06);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: var(--object-shadow), 0 2px 4px rgba(0, 0, 0, .3);
}
.card-inner > :first-child { transform: rotateY(180deg); }

/* Spielkarte */
.pcard-front { width: 100%; height: 100%; background: #fff; }
.pcard-back {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 12px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .18) 0 3px, transparent 3px 12px),
        #b3132a;
    border: calc(var(--w) * .04) solid #fff;
}

/* ESP / Zener */
.esp-front {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fdfbf6;
    border: calc(var(--w) * .035) solid #1d2a5a;
    box-sizing: border-box;
}
.esp-front svg { width: 86%; height: 86%; stroke: #1d2a5a; }
.esp-back {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(0deg, #1d2a5a 0 6px, #24346f 6px 12px);
    border: calc(var(--w) * .035) solid #fdfbf6;
}
.esp-back span {
    font: 700 calc(var(--w) * .16)/1 var(--serif);
    letter-spacing: .15em;
    color: #fdfbf6;
}

/* Tarot */
.tarot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6% 6%;
    color: #f5d98a;
    background: linear-gradient(160deg, #241448, #120a2c);
    border: calc(var(--w) * .03) solid #d9b25c;
    outline: 1px solid rgba(217, 178, 92, .6);
    outline-offset: calc(var(--w) * -.06);
}
.tarot-back { justify-content: center; background: radial-gradient(circle, #3b2577, #120a2c 70%); }
.tarot-back span { font-size: calc(var(--w) * .35); text-shadow: 0 0 20px rgba(245, 217, 138, .7); }
.tarot-numeral { font: 600 calc(var(--w) * .12)/1 var(--serif); letter-spacing: .1em; margin-top: 4%; }
.tarot-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78%;
    aspect-ratio: 1;
}
.tarot-sun {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(245, 217, 138, .35) 0 3deg, transparent 3deg 15deg),
        radial-gradient(circle, rgba(245, 217, 138, .35), transparent 65%);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70%);
    mask-image: radial-gradient(circle, #000 55%, transparent 70%);
}
.is-playing .tarot-sun { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tarot-symbol {
    position: relative;
    font: calc(var(--w) * .34)/1 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols', var(--serif);
    text-shadow: 0 0 18px rgba(245, 217, 138, .8);
}
.tarot-name {
    width: 100%;
    padding-top: 4%;
    margin-bottom: 4%;
    font: 600 calc(var(--w) * .075)/1.2 var(--serif);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid rgba(217, 178, 92, .6);
}

/* ---------- Sternzeichen ---------- */
.zodiac {
    --z: min(70vw, 44vh);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--z) * .04);
}
.zodiac-ring {
    position: absolute;
    top: calc(var(--z) * -.09);
    left: 50%;
    width: calc(var(--z) * 1.18);
    height: calc(var(--z) * 1.18);
    margin-left: calc(var(--z) * -.59);
    border-radius: 50%;
    border: 1px dashed rgba(245, 198, 107, .45);
    background: repeating-conic-gradient(rgba(245, 198, 107, .5) 0 .6deg, transparent .6deg 30deg);
    -webkit-mask-image: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
    mask-image: radial-gradient(circle, transparent 64%, #000 65%, #000 70%, transparent 71%);
}
.is-playing .zodiac-ring { animation: spin 60s linear infinite; }
.zodiac-medal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--z);
    height: var(--z);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3b2a6e, #140c33 70%);
    border: calc(var(--z) * .025) solid #d9a94a;
    box-shadow: 0 0 0 calc(var(--z) * .015) #6b4a12, 0 0 50px rgba(245, 198, 107, .35), var(--object-shadow), inset 0 0 40px rgba(0, 0, 0, .6);
}
.zodiac-glyph {
    font: calc(var(--z) * .55)/1 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols', 'DejaVu Sans', serif;
    color: #f5c66b;
    text-shadow: 0 0 24px rgba(245, 198, 107, .7);
}
.zodiac-name {
    margin-top: calc(var(--z) * .08);
    font: 600 calc(var(--z) * .14)/1.1 var(--serif);
    letter-spacing: .08em;
    color: var(--accent);
    text-shadow: var(--digit-shadow);
}
.theme-schwarz .zodiac-name { color: #f5c66b; }
.zodiac-dates { font: italic calc(var(--z) * .065)/1.2 var(--serif); color: var(--text); opacity: .8; }

/* ---------- Notizbuch ---------- */
.notebook {
    --nw: min(84vw, 56vh);
    position: relative;
    width: var(--nw);
    height: calc(var(--nw) * 1.32);
    transform: rotate(-3deg);
}
.nb-page {
    position: absolute;
    inset: 0;
    padding: 14% 10% 8% 22%;
    border-radius: 3px 8px 8px 3px;
    background:
        linear-gradient(90deg, transparent calc(16% - 1px), rgba(220, 60, 60, .7) calc(16% - 1px), rgba(220, 60, 60, .7) calc(16% + 1px), transparent calc(16% + 1px)),
        repeating-linear-gradient(transparent 0 calc(var(--nw) * .075 - 1px), rgba(70, 120, 190, .45) calc(var(--nw) * .075 - 1px) calc(var(--nw) * .075)),
        radial-gradient(circle at 70% 30%, #fffdf6, #f6f1e2 70%, #ece4cf);
    background-position: 0 0, 0 calc(var(--nw) * .1), 0 0;
    box-shadow: var(--object-shadow), 0 1px 2px rgba(0, 0, 0, .3), inset -10px 0 20px rgba(0, 0, 0, .05);
    color: #1d3a8f;
    font-family: 'Bradley Hand', 'Segoe Print', 'Noteworthy', 'Marker Felt', 'Comic Sans MS', 'Chalkboard SE', cursive;
}
/* Papierlage darunter */
.notebook::before {
    content: '';
    position: absolute;
    inset: 1.5% -1.2% -1.5% 1.2%;
    border-radius: 3px 8px 8px 3px;
    background: #e9e2cf;
    box-shadow: var(--object-shadow);
}
.nb-rings {
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: calc(var(--nw) * -.035);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nb-rings i {
    display: block;
    width: calc(var(--nw) * .12);
    height: calc(var(--nw) * .035);
    border-radius: 999px;
    background: linear-gradient(#f4f4f4, #9a9a9a 45%, #e0e0e0 55%, #777);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .45);
}
.nb-rings i::after {
    content: '';
    display: block;
    width: calc(var(--nw) * .03);
    height: calc(var(--nw) * .03);
    margin-left: calc(var(--nw) * .075);
    border-radius: 50%;
    background: #1a120c;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
}
.nb-heading { font-size: calc(var(--nw) * .085); transform: rotate(-1.5deg); }
.nb-number {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52%;
    margin-top: 4%;
}
.nb-digit {
    font-size: calc(var(--nw) * .55);
    line-height: 1;
    transform: rotate(-4deg);
    text-shadow: 0 0 1px rgba(29, 58, 143, .6);
}
.nb-circle {
    position: absolute;
    inset: -4% 6%;
    width: 88%;
    height: 108%;
    overflow: visible;
}
.nb-circle path {
    fill: none;
    stroke: #c0392b;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
}
.nb-sign { text-align: right; font-size: calc(var(--nw) * .1); margin-top: 2%; }
.nb-write { display: inline-block; clip-path: inset(0 100% 0 0); }
.is-playing .nb-heading .nb-write { animation: write 1.2s steps(14, end) .5s forwards; }
.is-playing .nb-digit           { animation: write .9s ease-in-out 1.8s forwards; }
.is-playing .nb-circle path     { animation: circle 1s ease-in-out 2.8s forwards; }
.is-playing .nb-sign .nb-write  { animation: write .4s ease-out 3.8s forwards; }
@keyframes write { to { clip-path: inset(0 0 0 0); } }
@keyframes circle { to { stroke-dashoffset: 0; } }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
    .reveal *, .reveal *::before, .reveal *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}