/* ==========================================================================
   Geschichte: Szenen, Kapitel, Notizbuch
   ========================================================================== */
body.rt-noscroll { overflow: hidden; }

/* ---------- Szenen ---------- */
.rt-cut { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; cursor: pointer; animation: rtCutIn 0.5s both; }
@keyframes rtCutIn { from { opacity: 0; } to { opacity: 1; } }
.rt-cut-deco span { position: absolute; opacity: 0.55; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.25)); line-height: 1; }
.rt-cut.dark .rt-cut-deco span { opacity: 0.4; }
.rt-cut-stage { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 clamp(0.5rem, 6vw, 4rem); margin-bottom: -2px; pointer-events: none; }
.rt-cut-fig { display: flex; flex-direction: column; align-items: center; width: clamp(120px, 22vw, 200px); opacity: 0.55; filter: grayscale(0.4); transform: translateY(8px); transition: opacity 0.3s, transform 0.3s, filter 0.3s; }
.rt-cut-fig.on { opacity: 1; filter: none; transform: translateY(0); }
.rt-cut-fig:empty { visibility: hidden; }
.rt-cut-fig span { margin-top: 0.2rem; padding: 0.1rem 0.6rem; border-radius: 999px; background: rgba(255, 248, 225, 0.92); border: 2px solid #b8945a; font-family: var(--rt-serif); font-size: 0.8rem; font-weight: 700; color: #3a2a14; text-align: center; }
.rt-cut-box { position: relative; margin: 0 auto 1.2rem; width: min(92vw, 760px); min-height: 7.5rem; padding: 1.1rem 1.4rem 1.6rem; border-radius: 20px; background: linear-gradient(170deg, #fffaf0, #f1e1bd); border: 4px double #b8945a; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); color: #3a2a14; }
.rt-cut-name { display: block; font-family: var(--rt-serif); font-weight: 800; color: #92400e; margin-bottom: 0.2rem; min-height: 1.4em; }
.rt-cut-text { font-size: clamp(1rem, 2.6vw, 1.2rem); line-height: 1.55; }
.rt-cut-text.in { animation: rtCutText 0.35s both; }
@keyframes rtCutText { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rt-cut-box.narr { background: linear-gradient(170deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94)); border-color: #94a3b8; color: #e2e8f0; }
.rt-cut-box.narr .rt-cut-text { font-style: italic; font-family: var(--rt-serif); text-align: center; }
.rt-cut-more { position: absolute; right: 18px; bottom: 8px; font-size: 0.8rem; color: #92400e; font-weight: 700; animation: rtBlink 1.4s infinite; }
.rt-cut-box.narr .rt-cut-more { color: #fcd34d; }
@keyframes rtBlink { 50% { opacity: 0.35; } }
.rt-cut-skip { position: absolute; top: 14px; right: 14px; padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; background: rgba(255, 248, 225, 0.9); border: 2px solid #b8945a; color: #3a2a14; }

/* ---------- Kapitel-Karte ---------- */
.rt-continue { max-width: 640px; margin: 0 auto 1.4rem; padding: 1rem 1.2rem; text-align: center; border-radius: 18px; background: linear-gradient(170deg, #fff6dc, #f4dca0); border: 3px solid #c58a1b; box-shadow: 0 8px 22px rgba(120, 80, 20, 0.3); animation: rtPop 0.5s both; }
.rt-continue p { margin-bottom: 0.7rem; font-family: var(--rt-serif); font-size: 1.1rem; }
.rt-continue.end { background: linear-gradient(170deg, #eef6d9, #d9ecb9); border-color: #6aa84f; }
.rt-chapter { max-width: 980px; margin: 0 auto 1rem; background: color-mix(in srgb, var(--bg-surface) 70%, transparent); border: 2px solid var(--border-color-hover); border-radius: 18px; padding: 0.4rem 0.9rem 0.9rem; }
.rt-chapter > summary { cursor: pointer; list-style: none; padding: 0.5rem 0; }
.rt-chapter > summary::-webkit-details-marker { display: none; }
.rt-chapter.locked { opacity: 0.55; padding: 0.4rem 0.9rem; }
.rt-chapter.locked .rt-ch-head { padding: 0.5rem 0; }
.rt-ch-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-family: var(--rt-serif); font-size: 1.15rem; }
.rt-ch-head small { color: var(--text-muted); font-family: var(--font-body); font-size: 0.8rem; margin-left: auto; }
.rt-ch-ico { font-size: 1.6rem; }
.rt-chapter .rt-grid { margin-top: 0.6rem; }
.rt-tile.locked { opacity: 0.55; cursor: not-allowed; }
.rt-stamp.skip { color: #86703f; border-color: #86703f; }

/* ---------- Notizbuch ---------- */
.rt-notebook { max-width: 640px; margin: 0 auto 1rem; background: linear-gradient(170deg, #fffdf2, #f3e6c4); border: 2px solid #c9a766; border-radius: 16px; padding: 0.7rem 1rem; box-shadow: 0 4px 14px rgba(90, 60, 20, 0.15); }
.rt-notebook summary { cursor: pointer; font-family: var(--rt-serif); font-weight: 700; font-size: 1.05rem; }
.rt-clues-list { list-style: none; margin-top: 0.7rem; display: grid; gap: 0.5rem; }
.rt-clues-list li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff8e4; border: 1px solid #d9c28f; font-size: 0.92rem; }
.rt-clues-list li > span { font-size: 1.5rem; line-height: 1.2; }
.rt-clues-list small { display: block; color: #86703f; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Rätselansicht: Auftritt der Figur ---------- */
.rt-speak.story .rt-avatar.big { width: 74px; height: 74px; overflow: hidden; background: radial-gradient(circle at 30% 25%, #fff8e4, #e8d3a0); display: flex; align-items: flex-end; justify-content: center; }
.rt-speak.story .rt-avatar.big svg { width: 70px; height: auto; margin-top: 4px; }
.rt-who { display: block; font-family: var(--rt-serif); color: #92400e; font-size: 0.85rem; margin-bottom: 0.15rem; }
.rt-speak.story .rt-bubble { background: #fffdf2; font-family: var(--rt-serif); font-size: 1.02rem; }
.rt-speak.after { margin-top: 0.8rem; }
.rt-speak.after .rt-bubble { background: #fffef8; border-color: #86a95a; }
.rt-speak.after .rt-bubble::before { background: #fffef8; border-color: #86a95a; }
.rt-newclue { display: flex; gap: 0.7rem; align-items: center; margin: 0.8rem 0; padding: 0.6rem 0.9rem; border-radius: 14px; background: #fff3c4; border: 2px dashed #d9a21b; animation: rtPop 0.6s both 0.4s; color: #3a2a14; }
.rt-newclue > span { font-size: 1.8rem; }
.rt-newclue small { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #92400e; }

/* ---------- Begehbare Karte ---------- */
.rt-worldwrap { max-width: 980px; margin: 0 auto 1.2rem; }
.rt-minimap { display: flex; justify-content: center; gap: 0; margin-bottom: 0.6rem; position: relative; }
.rt-mm-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 150px; background: none; border: 0; cursor: pointer; padding: 0.2rem 0; color: var(--text-main); }
.rt-mm-node + .rt-mm-node::before { content: ''; position: absolute; top: 22px; right: 50%; width: 100%; height: 4px; background: repeating-linear-gradient(90deg, #b8945a 0 8px, transparent 8px 14px); z-index: 0; }
.rt-mm-dot { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--rt-serif); font-weight: 800; background: #fff8e4; border: 3px solid #b8945a; box-shadow: 0 3px 0 #b7975a; transition: transform 0.2s; font-size: 1.3rem; }
.rt-mm-node.here .rt-mm-dot { background: var(--rt-brass); border-color: #92400e; transform: scale(1.12); }
.rt-mm-node:hover .rt-mm-dot { transform: scale(1.1); }
.rt-mm-node small { font-size: 0.74rem; font-weight: 700; text-align: center; max-width: 120px; line-height: 1.2; }
.rt-mm-todo, .rt-mm-done { position: absolute; top: -2px; right: calc(50% - 34px); z-index: 2; min-width: 20px; height: 20px; border-radius: 10px; font-size: 0.72rem; font-style: normal; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.rt-mm-todo { background: #be123c; color: #fff; } .rt-mm-done { background: #15803d; color: #fff; }

.rt-world { position: relative; aspect-ratio: 16 / 10; min-height: 340px; border-radius: 22px; overflow: hidden; border: 4px solid #8a6a3a; box-shadow: 0 14px 34px rgba(60, 40, 10, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.2); }
.rt-slide { animation: rtSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rtSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.rt-w-deco { position: absolute; transform: translate(-50%, -50%); opacity: 0.5; pointer-events: none; line-height: 1; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.2)); }
.rt-world.dark .rt-w-deco { opacity: 0.35; }
.rt-w-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(90, 60, 25, 0.38), rgba(60, 40, 15, 0.6)); border-top: 3px solid rgba(60, 40, 15, 0.45); pointer-events: none; }
.rt-w-name { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 0.25rem 1.1rem; border-radius: 999px; background: rgba(255, 248, 225, 0.94); border: 2px solid #b8945a; font-family: var(--rt-serif); font-weight: 800; color: #3a2a14; font-size: 1.05rem; white-space: nowrap; z-index: 4; }

.rt-spot { position: absolute; background: none; border: 0; cursor: pointer; padding: 0; z-index: 3; color: #3a2a14; transition: transform 0.15s; }
.rt-spot.p { bottom: 7%; width: clamp(80px, 15%, 140px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.rt-spot.p .rt-avatar-svg { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.35)); }
.rt-spot.p:hover { transform: translateX(-50%) translateY(-5px); }
.rt-spot.o, .rt-spot.f { transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.rt-spot.o:hover, .rt-spot.f:hover { transform: translate(-50%, -50%) scale(1.1); }
.rt-spot-e { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }
.rt-spot-e.big { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.rt-spot-l { margin-top: 2px; padding: 0.05rem 0.55rem; border-radius: 999px; background: rgba(255, 248, 225, 0.92); border: 2px solid #b8945a; font-family: var(--rt-serif); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.rt-badge2 { position: absolute; top: -6px; right: -4px; z-index: 5; min-width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.95rem; background: #be123c; color: #fff; border: 2px solid #fff8e4; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); animation: rtPulse 1.6s infinite; }
.rt-spot.p .rt-badge2 { top: -4px; right: 10%; }
.rt-spot.done .rt-badge2 { background: #15803d; animation: none; }
.rt-spot.done { opacity: 0.8; }
.rt-spot.locked .rt-badge2 { background: #475569; animation: none; }
.rt-spot.locked .rt-avatar-svg, .rt-spot.locked .rt-spot-e { filter: grayscale(1) brightness(0.8); }
@keyframes rtPulse { 50% { transform: scale(1.18); } }
.rt-spot.f { opacity: 0.9; }
.rt-spot.f .rt-spot-l { display: none; }
.rt-spot.f:hover .rt-spot-l { display: block; }
.rt-spot.f.sparkle .rt-spot-e { animation: rtSpark 1.8s infinite; }
@keyframes rtSpark { 50% { filter: drop-shadow(0 0 10px #fde047) drop-shadow(0 0 4px #fde047); } }
.rt-spot.f.seen { opacity: 0.55; }

.rt-w-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.8rem; border-radius: 999px; cursor: pointer; background: rgba(255, 248, 225, 0.94); border: 3px solid #b8945a; box-shadow: 0 3px 0 #b7975a; font-weight: 800; color: #3a2a14; }
.rt-w-arrow.l { left: 8px; } .rt-w-arrow.r { right: 8px; }
.rt-w-arrow small { font-family: var(--rt-serif); font-size: 0.78rem; max-width: 90px; line-height: 1.1; }
.rt-w-arrow:hover { background: #fffdf2; }
.rt-world-hint { margin-top: 0.5rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 640px) {
    .rt-world { min-height: 380px; aspect-ratio: auto; height: 440px; }
    .rt-mm-node { width: 33%; } .rt-mm-node small { font-size: 0.66rem; }
    .rt-w-arrow small { display: none; }
    .rt-spot.p { width: 26%; }
}
.rt-world { aspect-ratio: 16 / 9; max-height: 74vh; }
.rt-hero .rt-hat-ico { font-size: 2.4rem; margin-bottom: 0; }
.rt-hero .rt-rank-next, .rt-hero .rt-sub { display: none; }
.rt-hero { margin-bottom: 0.8rem; }
.rt-hero .rt-stats { margin-top: 0.5rem; }
.rt-hero .rt-title { font-size: clamp(1.8rem, 5vw, 2.4rem); }