/* ==========================================================================
   Rätsel – Layton-Look: Pergament, Messing, Serifen
   (wird nach raetsel.css / raetsel-puzzles.css geladen und überschreibt)
   ========================================================================== */
body.rt-pagebody, body.rt-pagebody.light-mode {
    --text-main: #3a2a14;
    --text-muted: #86703f;
    --bg-surface: #f8edd3;
    --bg-surface-hover: #efdfba;
    --bg-base: #fdf6e3;
    --border-color: #d9c28f;
    --border-color-hover: #b7975a;
    --accent-amber: #b45309;
    --accent-cyan: #0e7490;
    --accent-emerald: #15803d;
    --accent-rose: #be123c;
    --accent-purple: #7e22ce;
    --accent-blue: #1d4ed8;
    --accent-fuchsia: #a21caf;
    --accent-orange: #c2410c;
    --shadow-glass: 0 6px 16px rgba(90, 60, 20, 0.18);
    --navbar-bg: rgba(240, 225, 190, 0.88);
    color: var(--text-main);
    background-color: #e9d8ae;
    background-image:
        radial-gradient(ellipse 1000px 560px at 50% -10%, rgba(255, 250, 230, 0.75), transparent 65%),
        radial-gradient(ellipse 700px 500px at 100% 100%, rgba(160, 110, 50, 0.22), transparent 70%),
        radial-gradient(ellipse 600px 400px at 0% 90%, rgba(160, 110, 50, 0.14), transparent 70%);
    background-attachment: fixed;
}
.rt-pagebody .theme-toggle { display: none; }
.rt-pagebody .navbar { border-bottom: 2px solid #c9a766; }
.rt-pagebody .glass-card:hover { box-shadow: 0 12px 26px rgba(90, 60, 20, 0.28); }
.rt-pagebody .section-subtitle { color: var(--accent-amber); background: rgba(180, 83, 9, 0.1); border-color: rgba(180, 83, 9, 0.3); }
.rt-pagebody .rt-chip { background: #f8edd3; }
.rt-pagebody .rt-chip.active { color: #2a1604; border-color: #92400e; }
.rt-pagebody .rt-tile-meta, .rt-pagebody .rt-sub { color: var(--text-muted); }
.rt-pagebody .rt-tile::after { border-color: color-mix(in srgb, var(--tile-accent) 16%, transparent); }
.rt-pagebody .rt-text .rt-quote { color: var(--text-main); }
.rt-pagebody .rt-msg.info { color: var(--text-muted); }
.rt-pagebody .rt-hat-ico { filter: drop-shadow(0 6px 8px rgba(60, 35, 10, 0.4)); }

.rt-page {
    --rt-brass: linear-gradient(145deg, #fde68a 0%, #f59e0b 55%, #b45309 100%);
    --rt-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Auswahl ---------- */
.rt-hero { position: relative; padding-top: 0.5rem; }
.rt-hat-ico {
    font-size: 3.2rem; line-height: 1; margin-bottom: 0.4rem;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    animation: rtBob 4s ease-in-out infinite;
}
@keyframes rtBob { 50% { transform: translateY(-5px) rotate(-3deg); } }
.rt-title { font-family: var(--rt-serif); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(2rem, 6vw, 2.9rem); }
.rt-sub { font-size: 1rem; }
.rt-stats { gap: 2rem; }
.rt-stat b { font-family: var(--rt-serif); font-size: 1.9rem; color: var(--accent-amber); }
.rt-progress {
    height: 10px; max-width: 380px; margin: 1rem auto 0; border-radius: 999px; overflow: hidden;
    background: var(--bg-surface); border: 1px solid var(--border-color);
}
.rt-progress i { display: block; height: 100%; background: var(--rt-brass); border-radius: 999px; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

.rt-chip { backdrop-filter: blur(6px); }
.rt-chip.active { background: var(--rt-brass); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35); }

.rt-grid { gap: 1rem; }
.rt-tile {
    overflow: hidden; padding: 1.1rem 1rem 0.9rem; min-height: 140px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--tile-accent) 10%, var(--bg-surface)) 0%, var(--bg-surface) 60%);
}
.rt-tile::before { width: 100%; height: 4px; inset: 0 0 auto 0; opacity: 0.9; }
.rt-tile::after {
    content: ''; position: absolute; right: -26px; bottom: -26px; width: 90px; height: 90px; border-radius: 50%;
    border: 10px solid color-mix(in srgb, var(--tile-accent) 14%, transparent);
}
.rt-tile-num {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
    font-family: var(--rt-serif); font-size: 1.25rem; color: #1a1205; line-height: 1;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tile-accent) 55%, #fff), var(--tile-accent));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--tile-accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rt-tile-title { font-size: 0.95rem; z-index: 1; margin-top: 0.2rem; }
.rt-tile-meta { z-index: 1; }
.rt-tile.solved { background: linear-gradient(160deg, color-mix(in srgb, var(--accent-emerald) 14%, var(--bg-surface)), var(--bg-surface) 70%); }
.rt-stamp {
    position: absolute; top: 14px; right: 10px; padding: 1px 8px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--accent-emerald); border: 2px solid var(--accent-emerald); border-radius: 6px;
    transform: rotate(9deg); opacity: 0.85;
}

/* ---------- Spielansicht ---------- */
.rt-play { max-width: 780px; }
.rt-play-title {
    font-family: var(--rt-serif); font-weight: 800; font-size: clamp(1.7rem, 5.5vw, 2.4rem); letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem;
}
.rt-no {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    font-size: 1.3rem; color: #1a1205; background: var(--rt-brass);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(120, 53, 15, 0.35);
}
.rt-pic { background: var(--rt-brass); color: #1a1205; border: 0; box-shadow: 0 3px 10px rgba(245, 158, 11, 0.35); }
.rt-text { font-size: 1.02rem; line-height: 1.7; }
.rt-text em { color: var(--accent-amber); font-style: normal; font-weight: 700; }
.rt-text .rt-quote {
    font-family: var(--rt-serif); font-size: 1.02rem; border-left: 4px solid var(--accent-amber);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-amber) 10%, transparent), transparent);
}

/* Pergament-Karte für das eigentliche Rätsel: helle Variablen gelten für alles darin */
.rt-stage {
    --text-main: #3a2a14;
    --text-muted: #86703f;
    --bg-surface: #f8edd3;
    --bg-surface-hover: #efdfba;
    --bg-base: #fdf6e3;
    --border-color: #d9c28f;
    --border-color-hover: #b7975a;
    --accent-amber: #b45309;
    --accent-cyan: #0e7490;
    --accent-emerald: #15803d;
    --accent-rose: #be123c;
    --accent-purple: #7e22ce;
    --shadow-glass: none;
    color: var(--text-main);
    padding: 1.4rem 1.2rem;
    border: 3px solid #b8945a;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(180, 130, 60, 0.18), transparent 60%),
        linear-gradient(170deg, #f9efd6, #f1e1bd);
    box-shadow: 0 14px 30px rgba(90, 60, 20, 0.28), inset 0 0 0 2px rgba(255, 248, 225, 0.8), inset 0 0 40px rgba(150, 100, 40, 0.18);
    animation: rtPaper 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rtPaper { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.rt-stage::before, .rt-stage::after {
    content: ''; position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fde68a, #92400e); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.rt-stage::before { left: 10px; }
.rt-stage::after { right: 10px; }
.rt-stage.done { background: linear-gradient(170deg, #eef6d9, #d9ecb9); border-color: #6aa84f; }
.rt-stage .rt-note, .rt-stage .rt-counter { color: #7a6334; }
.rt-stage .rt-counter b { color: #3a2a14; }
.rt-stage .rt-quote { color: #3a2a14; }
.rt-stage .rt-text em, .rt-stage em { color: #b45309; }

/* Buttons im Pergament */
.rt-stage .rt-btn { background: #fff8e4; border: 2px solid #c9a766; color: #4a3517; box-shadow: 0 3px 0 #b7975a; }
.rt-stage .rt-btn:hover:not(:disabled) { background: #fffdf2; border-color: #a9833f; transform: translateY(-1px); }
.rt-stage .rt-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #b7975a; }
.rt-stage .rt-btn.primary, .rt-btn.primary { background: var(--rt-brass); color: #2a1604; border: 2px solid #92400e; box-shadow: 0 3px 0 #92400e; }
.rt-stage .rt-btn.primary:hover:not(:disabled), .rt-btn.primary:hover:not(:disabled) { background: linear-gradient(145deg, #fef3c7, #fbbf24 55%, #d97706); border-color: #92400e; }
.rt-stage .rt-btn.on { background: #dff3f7; border-color: #0e7490; }
.rt-stage .rt-choice {
    background: #fff8e4; border: 2px solid #d9c28f; color: #3a2a14; box-shadow: 0 2px 0 #cdb27a;
    font-family: var(--font-body); font-weight: 500;
}
.rt-stage .rt-choice:hover:not(:disabled) { border-color: #b45309; background: #fffdf2; transform: translateY(-1px); }
.rt-stage .rt-choice.ok { background: #d9f2d0; border-color: #15803d; }
.rt-stage .rt-choice.bad { background: #fbd9dd; border-color: #be123c; opacity: 0.65; }
.rt-stage .rt-person { background: #fff8e4; border: 2px solid #d9c28f; color: #3a2a14; }
.rt-stage .rt-person b { font-family: var(--rt-serif); }
.rt-stage .rt-person.pick:hover { border-color: #b45309; transform: translateY(-2px); }
.rt-stage .rt-person.ok { background: #d9f2d0; border-color: #15803d; }
.rt-stage .rt-person.bad { background: #fbd9dd; border-color: #be123c; }
.rt-stage .rt-input { background: #fffdf2; border: 2px solid #c9a766; color: #3a2a14; font-family: var(--rt-serif); font-size: 1.08rem; }
.rt-stage .rt-input:focus { border-color: #b45309; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.rt-stage .rt-field.ok .rt-input { background: #d9f2d0; border-color: #15803d; }
.rt-stage .rt-field.bad .rt-input { background: #fbd9dd; border-color: #be123c; }
.rt-stage .rt-field-label { color: #6b5428; font-weight: 600; }
.rt-stage .rt-suffix { color: #86703f; }
.rt-stage .rt-big { font-family: var(--rt-serif); }

/* Schatten (27) bleiben dunkel auf Pergament */
body:not(.light-mode) .rt-shsym.shadow { filter: brightness(0) opacity(0.75); }

/* ---------- Meldungen, Hinweise, Ergebnis ---------- */
.rt-msg { font-family: var(--rt-serif); font-size: 1.05rem; }
.rt-hint { border-left: 4px solid var(--accent-amber); border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-amber) 9%, var(--bg-surface)), var(--bg-surface)); animation: rtPaper 0.4s both; }
.rt-coin {
    background: var(--rt-brass); color: #2a1604; border: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rt-coin.used { background: var(--rt-brass); border: 0; color: #2a1604; margin-right: 0; opacity: 0.85; }
.rt-result {
    position: relative; overflow: hidden; padding: 1.3rem 1.4rem; border-radius: 20px; border: 3px solid #6aa84f;
    background: linear-gradient(170deg, #f3f9e3, #dff0c1); color: #2c3a14; animation: rtPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes rtPop { from { opacity: 0; transform: scale(0.88) translateY(14px); } to { opacity: 1; transform: none; } }
.rt-result-head { font-family: var(--rt-serif); font-size: 1.6rem; color: #166534; }
.rt-result-head i { font-size: 1.9rem; color: #d97706; }
.rt-result-text { color: #2f3b1a; font-size: 1rem; line-height: 1.65; }
.rt-result .rt-btn { background: #fffdf2; border: 2px solid #86a95a; color: #2c3a14; box-shadow: 0 3px 0 #86a95a; }
.rt-result .rt-btn.primary { background: var(--rt-brass); border-color: #92400e; box-shadow: 0 3px 0 #92400e; color: #2a1604; }
.rt-result::after { content: '🎩'; position: absolute; right: 12px; top: -6px; font-size: 3rem; opacity: 0.1; transform: rotate(14deg); }

/* ---------- Konfetti ---------- */
.rt-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2000; }
.rt-confetti span { position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; opacity: 0; animation: rtFall linear forwards; }
@keyframes rtFall {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0.9; transform: translate(var(--dx), 105vh) rotate(var(--rot)); }
}

/* ---------- Kleine Feinheiten in den Rätseln ---------- */
.rt-scene { border: 3px solid #b8945a; box-shadow: 0 3px 8px rgba(80, 50, 10, 0.25); }
.rt-zone { background: #f3e3bd; border-color: #c9a766; }
.rt-water-bg { opacity: 1; }
.rt-hanoi .rt-peg, .rt-bank { background-color: #f3e3bd; }
.rt-ice-cell { box-shadow: inset 0 -3px 0 rgba(14, 116, 144, 0.18); }
.rt-rush { box-shadow: inset 0 0 0 2px #e8d6a8; }
.rt-jar { background: rgba(255, 255, 255, 0.5); border-color: #7a6334; }
.rt-tile:focus-visible, .rt-btn:focus-visible, .rt-choice:focus-visible, .rt-chip:focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rt-hat-ico, .rt-stage, .rt-result, .rt-hint { animation: none; }
}
@media (max-width: 520px) {
    .rt-stage { padding: 1.1rem 0.7rem; }
    .rt-no { width: 38px; height: 38px; font-size: 1.1rem; }
}