/* ==========================================================================
   Bildrätsel: Figuren, Waage, Tafel, Türen, Frösche, Scheibe, Schloss
   ========================================================================== */
.rt-avatar-svg { display: block; width: 100%; height: auto; }
.rt-svglabel { font-family: var(--rt-serif); font-style: italic; font-size: 15px; fill: #3a2a14; }

/* ---------- Figuren mit Sprechblase ---------- */
.rt-suspects, .rt-hatrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; align-items: end; }
.rt-hatrow { grid-template-columns: repeat(3, 1fr); max-width: 520px; margin: 0 auto 0.4rem; position: relative; }
.rt-suspect, .rt-hatman { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; background: transparent; border: 0; padding: 0.2rem; border-radius: 16px; transition: transform 0.15s; }
.rt-hatman { cursor: default; }
.rt-suspect:hover:not(:disabled) { transform: translateY(-4px); }
.rt-suspect .rt-avatar-svg, .rt-hatman .rt-avatar-svg { max-width: 92px; }
.rt-suspect b, .rt-hatman b { font-family: var(--rt-serif); color: #3a2a14; }
.rt-bubble2 {
    position: relative; display: block; min-height: 3.6em; width: 100%; padding: 0.45rem 0.55rem; border-radius: 14px; background: #fffdf2; border: 2px solid #c9a766;
    font-family: var(--rt-serif); font-size: 0.88rem; line-height: 1.3; text-align: center; color: #3a2a14; display: flex; align-items: center; justify-content: center;
}
.rt-bubble2::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: #fffdf2; border-right: 2px solid #c9a766; border-bottom: 2px solid #c9a766; transform: translateX(-50%) rotate(45deg); }
.rt-suspect.ok { background: #d9f2d0; outline: 3px solid #15803d; }
.rt-suspect.bad { opacity: 0.45; filter: grayscale(0.6); }
.rt-hatarrow { grid-column: 1 / -1; text-align: center; color: #86703f; font-size: 0.8rem; }
@media (max-width: 620px) { .rt-suspects { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 3: Alter ---------- */
.rt-agediag { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rt-agepanel { background: #fffaf0; border: 2px solid #c9a766; border-radius: 16px; padding: 0.5rem 0.8rem 0.7rem; text-align: center; }
.rt-agetitle { font-family: var(--rt-serif); font-weight: 700; color: #92400e; }
.rt-agefigs { display: flex; align-items: flex-end; gap: 0.6rem; justify-content: center; }
.rt-agefig { display: flex; flex-direction: column; align-items: center; width: 92px; font-size: 0.82rem; color: #3a2a14; }
.rt-agefig.small { width: 66px; }
.rt-agefig span { font-family: var(--rt-serif); font-weight: 700; color: #b45309; }
.rt-agearrow { color: #86703f; font-family: var(--rt-serif); font-style: italic; }

/* ---------- 5: Türen ---------- */
.rt-hallbg { fill: #e7d2a6; }
.rt-hallfloor { fill: #a47a50; }
.rt-doorbody { fill: #8a5a2b; stroke: #3a2a14; stroke-width: 4; }
.rt-knob { fill: #fcd34d; }
.rt-doortxt { fill: #f8edd3; font-family: var(--rt-serif); font-size: 14px; font-weight: 700; pointer-events: none; }
.rt-guardlbl { fill: #6b5428; font-size: 13px; font-weight: 700; }
.rt-door.live { cursor: pointer; }
.rt-door.live:hover .rt-doorbody { fill: #a87038; }

/* ---------- 6: Tafel ---------- */
.rt-chalk { background: linear-gradient(145deg, #2f4a3a, #223a2c); border: 8px solid #8a5a2b; border-radius: 10px; padding: 1.6rem 1rem; margin-bottom: 1rem; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.45); }
.rt-chalk-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: clamp(1.8rem, 6vw, 2.8rem); color: #f4f1e6; text-shadow: 0 0 3px rgba(255, 255, 255, 0.4); }
.rt-chalk-row .q { color: #fde68a; }

/* ---------- 2: Waage ---------- */
.rt-scalesvg { touch-action: none; }
.rt-scalebg { fill: #f6e9c6; stroke: #c9a766; stroke-width: 2; }
.rt-tray { fill: #d9bd86; stroke: #a47a50; stroke-width: 2; }
.rt-traylabel { font-size: 12px; fill: #6b5428; font-style: italic; }
.rt-post { fill: #8a5a2b; stroke: #3a2a14; stroke-width: 2; }
.rt-beam3 { stroke: #8a5a2b; stroke-width: 10; stroke-linecap: round; }
.rt-pivot { fill: #fcd34d; stroke: #92400e; stroke-width: 3; }
.rt-string { stroke: #6b5428; stroke-width: 2; fill: none; }
.rt-dish { fill: #c9a766; stroke: #6b5428; stroke-width: 3; stroke-linejoin: round; }
.rt-panlabel { font-size: 12px; fill: #6b5428; font-weight: 700; pointer-events: none; }
.rt-coin3 { cursor: grab; touch-action: none; }
.rt-coin3 circle { fill: #fcd34d; stroke: #92400e; stroke-width: 3; }
.rt-coin3 text { font-weight: 800; font-size: 15px; fill: #5b3a06; pointer-events: none; }
.rt-coin3.drag { cursor: grabbing; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.35)); }

/* ---------- 9: Öl ---------- */
.rt-water.oil { background: linear-gradient(#fcd34d, #d97706); }

/* ---------- 11: Frösche ---------- */
.rt-pondbg { fill: #8ed1f2; }
.rt-pad { fill: #3f9a4d; stroke: #1f6b2c; stroke-width: 3; }
.rt-frog { cursor: pointer; transition: transform 0.2s; }
.rt-frog.can { filter: drop-shadow(0 0 7px #fde047); }

/* ---------- 28: Scheibe ---------- */
.rt-wheel-out { fill: #8a5a2b; stroke: #3a2a14; stroke-width: 4; }
.rt-wheel-in { fill: #f3dfae; stroke: #3a2a14; stroke-width: 3; }
.rt-wheel-hub { fill: #fcd34d; stroke: #3a2a14; stroke-width: 3; }
.rt-wheel-key { font-family: var(--rt-serif); font-weight: 800; font-size: 34px; fill: #3a2a14; }
.rt-wl-out { font-weight: 800; font-size: 18px; fill: #f8edd3; font-family: var(--rt-serif); }
.rt-wl-in { font-weight: 800; font-size: 17px; fill: #7c2d12; font-family: var(--rt-serif); }
.rt-wheel-inner { transition: transform 0.25s; }
.rt-wheel-mark { fill: #be123c; }

/* ---------- 31: Schloss ---------- */
.rt-lock { display: inline-flex; gap: 0.5rem; padding: 0.8rem 1rem; border-radius: 18px; background: linear-gradient(#a9b4c2, #6b7787); border: 4px solid #3f4a5a; box-shadow: 0 6px 0 #2d3644; }
.rt-wheel { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.rt-wdigit { width: 54px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fdf6e3; border: 3px solid #3f4a5a; font-family: var(--rt-serif); font-weight: 800; font-size: 2.4rem; color: #3a2a14; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25); }
.rt-wbtn { width: 54px; height: 28px; border-radius: 8px; border: 2px solid #3f4a5a; background: #d9e0e8; cursor: pointer; font-size: 0.9rem; color: #2d3644; }
.rt-wbtn:hover { background: #fff; }