/* Rätsel aus Hybrid Schritt 5a/5b. Handy quer 844 x 390: oben die Kopfleiste, Mitte frei für die Szene, Bedienung an den Rändern. */
:root { --rz-bg: rgba(12, 18, 30, .78); --rz-line: rgba(255, 236, 200, .2); --rz-gold: #ffd166; }
#mg .mg-card { max-height: calc(100vh - 16px); overflow: auto; padding: 14px 20px; }
#mg .mg-card.many .mg-title { font-size: 25px; } #mg .mg-card.many .mg-text { font-size: 13px; margin-bottom: 8px; }
.mg-role { display: inline-flex; align-items: center; gap: 12px; text-align: left; max-width: 100%; }
.mg-ri { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #2e4a70, #142238); color: #bff1ff; box-shadow: inset 0 0 0 2px rgba(126, 224, 255, .6), 0 0 18px rgba(80, 180, 255, .35); }
.mg-ri svg { width: 28px; height: 28px; }
.mg-roster span { display: inline-flex; align-items: center; gap: 5px; } .mg-roster span.me { box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .6); } .mg-roster b { color: #fff3d6; font-weight: 600; }
.mg-roster span.helper { background: rgba(140, 255, 190, .1); box-shadow: inset 0 0 0 1px rgba(140, 255, 190, .45); }
.mg-swap { border: 0; padding: 2px 8px; border-radius: 8px; background: rgba(255, 209, 102, .18); color: #ffd166; font: 600 11px Fredoka, sans-serif; cursor: pointer; }
.mg-ask { margin-top: 8px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; color: #fff3d6; }
.mg-ask button { border: 0; padding: 6px 14px; border-radius: 10px; font: 700 13px Fredoka, sans-serif; cursor: pointer; background: #2fb37a; color: #fff; } .mg-ask button[data-no] { background: #5a3040; }

.rz-top { position: absolute; top: calc(8px + var(--st)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 14px; background: var(--rz-bg); box-shadow: inset 0 0 0 1px var(--rz-line); font: 600 11px Fredoka, sans-serif; color: #ffe8b8; white-space: nowrap; pointer-events: none !important; z-index: 2; }
.rz-name { font: 700 13px Cinzel, serif; color: #fff3d6; }
.rz-prog { display: flex; align-items: center; gap: 7px; }
.rz-lbl { color: rgba(255, 232, 184, .7); }
.rz-time { font: 800 17px Fredoka, sans-serif; color: #fff3d6; min-width: 44px; text-align: right; } .rz-time.low { color: #ff8f80; }
.rz-pips { display: inline-flex; gap: 4px; } .rz-pips i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .rz-pips i.on { background: #7dffb0; box-shadow: 0 0 7px #7dffb0; } .rz-pips i.bad { background: #ff6a5a; }
.rz-pips.sq i { border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; } .rz-pips.lamp i.on { background: #ffe08a; box-shadow: 0 0 8px #ffd166; }
.rz-bar { width: 70px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; } .rz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7dffb0, #2fb37a); transition: width .2s; } .rz-bar.gold i { background: linear-gradient(90deg, #ffe08a, #ffb020); }
.rz-n { font: 800 14px Fredoka, sans-serif; color: #fff3d6; } .rz-n.hot { color: #ff8f80; } .rz-bad { color: #ff8f80; font-weight: 700; }
.rz-hearts { display: inline-flex; gap: 3px; } .rz-hearts i { width: 13px; height: 12px; background: #ff5a6a; clip-path: path('M6.5 12L1 6.5A3.2 3.2 0 0 1 6.5 2a3.2 3.2 0 0 1 5.5 4.5z'); }

/* ---------- Waage ---------- */
.wg-ui > * { position: absolute; }
.wg-hint, .ts-hint, .kt-hint, .sp2-hint, .tp-hint { left: 50%; transform: translateX(-50%); top: calc(48px + var(--st)); font: 600 12.5px Fredoka, sans-serif; color: #fff3d6; text-shadow: 0 1px 6px #000, 0 0 2px #000; white-space: nowrap; pointer-events: none !important; position: absolute; }
.wg-plates { left: 50%; transform: translateX(-50%); bottom: calc(10px + var(--sb)); display: flex; gap: 8px; align-items: flex-end; }
.wg-plate { position: relative; width: 84px; height: 96px; border: 0; border-radius: 18px; padding: 16px 4px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #3a2408;
  background: radial-gradient(ellipse at 50% 30%, #f3d9a0, #c99a52 70%, #8a6430); box-shadow: 0 5px 0 #5a3c18, inset 0 0 0 2px rgba(255, 245, 210, .5), 0 8px 16px rgba(0, 0, 0, .4); transition: transform .15s, filter .15s; }
.wg-plate b { font: 700 13px Cinzel, serif; } .wg-plate .wg-w { font: 800 24px/1 Fredoka, sans-serif; }
.wg-plate.here { box-shadow: 0 5px 0 #5a3c18, inset 0 0 0 3px #fff, 0 0 18px rgba(255, 240, 180, .8); }
.wg-plate.eq { background: radial-gradient(ellipse at 50% 30%, #d8ffd0, #6cc070 70%, #2f7a3a); } .wg-plate.over { background: radial-gradient(ellipse at 50% 30%, #ffd6c8, #e0704a 70%, #8a2a14); }
.wg-plate.sunk { transform: translateY(8px) scale(.94); filter: saturate(.4) brightness(.75); } .wg-plate.ph { animation: wgph .5s infinite alternate; }
@keyframes wgph { to { box-shadow: 0 5px 0 #5a3c18, inset 0 0 0 3px #c79bff, 0 0 18px #c79bff; } }
.wg-plate.ufer { width: 66px; background: radial-gradient(ellipse at 50% 30%, #b8d4e6, #5f86a0 70%, #2f4a60); color: #0c1a26; }
.wg-plate:disabled { cursor: default; opacity: 1; }
.wg-tgt { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); min-width: 30px; padding: 2px 7px; border-radius: 10px; background: linear-gradient(#ffe8a0, #e0a020); color: #3a2208; font: 800 15px Fredoka, sans-serif; box-shadow: 0 2px 0 #8a5a10, 0 0 12px rgba(255, 209, 102, .7); }
.wg-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 18px; }
.wg-who em { font: 700 10px/16px Fredoka, sans-serif; font-style: normal; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: rgba(30, 20, 8, .75); color: #fff3d6; } .wg-who em.me { background: #2a7fd0; } .wg-who em.golem { background: #6a6a7a; }
.wg-who em sub { font-size: 8px; vertical-align: 0; margin-left: 1px; color: #ffd166; } .wg-who em.jar { background: none; padding: 0; } .wg-who em.jar svg { width: 13px; height: 17px; }
.wg-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; transform: rotate(-90deg); } .wg-ring circle { fill: none; stroke: #ff4a2a; stroke-width: 3; stroke-linecap: round; opacity: .9; }
.wg-plate:not(.over) .wg-ring { display: none; }
.wg-shelf { left: calc(12px + var(--sl)); top: calc(56px + var(--st)); display: none; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: var(--rz-bg); box-shadow: inset 0 0 0 1px var(--rz-line); max-height: calc(100vh - 180px); overflow: auto; }
.wg-shelf.on { display: flex; } .wg-shelf small { font: 600 10px Fredoka, sans-serif; color: #ffd9a0; letter-spacing: .08em; text-transform: uppercase; }
.wg-jar, .wg-drop { border: 0; background: none; padding: 0; cursor: pointer; } .wg-jar svg { width: 34px; height: 42px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); } .wg-jar:disabled { opacity: .4; }
.wg-drop { display: flex; flex-direction: column; align-items: center; color: #ffe8b8; font: 700 10px Fredoka, sans-serif; padding: 4px; border-radius: 10px; background: rgba(255, 209, 102, .15); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .6); } .wg-drop svg { width: 30px; height: 37px; }
.wg-gol { border: 0; min-width: 52px; padding: 7px 8px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff3d6; font: 700 13px Cinzel, serif; cursor: pointer; } .wg-gol.on { background: #8a8aa0; color: #111; }
.wg-side { right: calc(12px + var(--sr)); top: calc(56px + var(--st)); width: 150px; padding: 8px 10px; border-radius: 12px; background: var(--rz-bg); box-shadow: inset 0 0 0 1px var(--rz-line); font: 500 11px/1.3 Fredoka, sans-serif; color: #ffe8b8; pointer-events: none !important; }
.wg-side b { display: block; font: 700 14px Fredoka, sans-serif; color: #fff3d6; }

/* ---------- Tresor ---------- */
.ts-ui > * { position: absolute; }
.ts-guard { left: 50%; transform: translateX(-50%); top: calc(74px + var(--st)); width: min(420px, 50vw); height: 24px; border-radius: 12px; background: linear-gradient(#3a3440, #24202a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); pointer-events: none !important; }
.ts-guard .ts-zone { position: absolute; left: 8%; width: 51%; top: 0; bottom: 0; border-radius: 12px; background: rgba(255, 209, 102, .16); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .4); }
.ts-guard.near .ts-zone { background: rgba(255, 209, 102, .32); }
.ts-guard .ts-man { position: absolute; top: 2px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ff9a8a, #b02a1a); box-shadow: 0 0 10px rgba(255, 80, 60, .7); transition: left .25s linear; }
.ts-guard.boost .ts-man { box-shadow: 0 0 16px #ff3a1a, 0 0 0 3px rgba(255, 120, 60, .5); }
.ts-guard .ts-vault { position: absolute; left: 4px; top: 3px; width: 18px; height: 18px; color: #ffd166; } .ts-guard .ts-vault svg { width: 18px; height: 18px; }
.ts-guard small { position: absolute; right: 8px; top: 5px; font: 600 10px Fredoka, sans-serif; color: rgba(255, 232, 184, .7); }
.ts-guard.alarm { animation: tsAl .3s infinite alternate; } @keyframes tsAl { to { background: #8a1a10; } }
.ts-main { inset: 0; pointer-events: none !important; } .ts-main > * { pointer-events: auto; position: absolute; }
.ts-dialwrap { right: calc(14px + var(--sr)); bottom: calc(10px + var(--sb)); width: 210px; height: 210px; }
.ts-dial { width: 210px; height: 210px; touch-action: none; cursor: grab; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.ts-dial .rim { fill: #2a2630; stroke: #b8a070; stroke-width: 4; } .ts-dial .face { fill: url(#none); fill: #3c3644; stroke: #6a5c48; stroke-width: 2; }
.ts-dial text { font: 700 12px Fredoka, sans-serif; fill: #f3e2c0; } .ts-dial .mark { fill: #ffd166; } .ts-dial .hub { fill: #b8a070; } .ts-dial .top { fill: #ff6a4a; }
.ts-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 22px Fredoka, sans-serif; color: #fff3d6; pointer-events: none; }
.ts-dcol { right: calc(236px + var(--sr)); bottom: calc(16px + var(--sb)); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 132px; }
.ts-dir { display: flex; flex-direction: column; align-items: center; font: 600 11px/1.2 Fredoka, sans-serif; color: #ffe8b8; text-align: center; } .ts-dir svg { width: 34px; height: 34px; color: #ffd166; }
.ts-stop { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; color: #ff5a3a; background: rgba(0, 0, 0, .35); opacity: .25; transition: opacity .2s; font: 800 15px Fredoka, sans-serif; } .ts-stop svg { width: 26px; height: 26px; }
.ts-stop.on { animation: tsStop 1.6s ease-out; } @keyframes tsStop { 0% { opacity: 1; transform: scale(1.35); background: #ff3a1a; color: #fff; } 60% { opacity: 1; transform: scale(1); } 100% { opacity: .25; } }
.ts-set, .ts-lure, .ts-stopbtn { border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 13px Fredoka, sans-serif; color: #fff; }
.ts-set { width: 112px; height: 58px; border-radius: 16px; background: radial-gradient(circle at 50% 30%, #6fe0a0, #1f8a50); box-shadow: 0 5px 0 #0e4a28, 0 8px 16px rgba(0, 0, 0, .4); } .ts-set svg { width: 22px; height: 22px; }
.ts-ear { left: 50%; top: 50%; transform: translate(-50%, -40%); width: 330px; padding: 14px; border-radius: 22px; background: var(--rz-bg); box-shadow: inset 0 0 0 1px var(--rz-line); text-align: center; pointer-events: none !important; }
.ts-ear p { margin: 6px 0 0; font: 500 12px/1.35 Fredoka, sans-serif; color: #ffe8b8; }
.ts-earic { width: 44px; height: 44px; margin: 6px auto 0; color: #ffd166; } .ts-earic svg { width: 44px; height: 44px; }
.ts-wave { height: 64px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ts-wave i { width: 6px; height: 6px; border-radius: 3px; background: #6fd6ff; opacity: .5; }
.ts-wave.soft i { animation: tsSoft .5s ease-out; } .ts-wave.loud i { animation: tsLoud .9s ease-out; }
.ts-wave i:nth-child(3n) { animation-delay: .04s !important; } .ts-wave i:nth-child(3n+1) { animation-delay: .08s !important; }
@keyframes tsSoft { 30% { height: 18px; opacity: .8; } } @keyframes tsLoud { 20% { height: 60px; opacity: 1; background: #ffd166; box-shadow: 0 0 10px #ffd166; } }
.ts-stopbtn { right: calc(24px + var(--sr)); bottom: calc(20px + var(--sb)); width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #ff8a6a, #c42a1a); box-shadow: 0 6px 0 #6a1408, 0 10px 24px rgba(255, 60, 30, .45); font-size: 17px; } .ts-stopbtn svg { width: 40px; height: 40px; color: #fff; }
.ts-stopbtn:active, .ts-set:active, .ts-lure:active { transform: translateY(3px); }
.ts-lure { right: calc(24px + var(--sr)); bottom: calc(20px + var(--sb)); width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #9ab0ff, #3a4ac0); box-shadow: 0 6px 0 #1a2270, 0 10px 24px rgba(80, 100, 255, .4); font-size: 15px; } .ts-lure svg { width: 38px; height: 38px; }
.ts-lure:disabled { filter: grayscale(.8) brightness(.7); } .ts-lure em { font: 800 18px Fredoka, sans-serif; font-style: normal; }
.ts-wtxt { right: calc(150px + var(--sr)); bottom: calc(40px + var(--sb)); width: 220px; margin: 0; font: 500 12px/1.35 Fredoka, sans-serif; color: #ffe8b8; text-shadow: 0 1px 4px #000; pointer-events: none !important; }

/* ---------- Kartenleser ---------- */
.kt-ui > * { position: absolute; }
.kt-map { left: 50%; top: calc(70px + var(--st)); transform: translateX(-50%); padding: 8px; border-radius: 14px; background: linear-gradient(#e9d6a8, #c9a86a); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 0 0 2px #7a5a2a; }
.kt-ui.r-laeufer .kt-map { left: calc(50% - 90px); background: rgba(8, 10, 16, .82); box-shadow: inset 0 0 0 1px var(--rz-line), 0 8px 20px rgba(0, 0, 0, .5); }
.kt-svg { display: block; } .kt-svg line { stroke: #3a2410; stroke-width: 4; stroke-linecap: round; }
.kt-svg.full .floor { fill: rgba(255, 245, 220, .25); } .kt-svg.fog .floor { fill: rgba(255, 190, 90, .22); } .kt-svg.fog line { stroke: #ffcf8a; } .kt-svg .seen { fill: rgba(255, 255, 255, .06); }
.kt-svg .trap path { stroke: #c0281a; stroke-width: 3.5; stroke-linecap: round; } .kt-svg .trap.hit path { stroke: #ff5a3a; }
.kt-svg .lamp { fill: #ffe08a; stroke: #b07a10; stroke-width: 2; filter: drop-shadow(0 0 4px #ffd166); }
.kt-svg .exit rect { fill: #2fb37a; } .kt-svg .exit text { font: 800 9px Fredoka, sans-serif; fill: #fff; }
.kt-svg .ping { fill: none; stroke: #6fd6ff; stroke-width: 3; animation: ktPing 1s infinite; } @keyframes ktPing { 50% { stroke-width: 6; opacity: .5; } }
.kt-svg .runner circle { stroke: #1a1008; stroke-width: 2; } .kt-svg .runner.me circle { stroke: #fff; stroke-width: 3; } .kt-svg .runner text { font: 800 10px Fredoka, sans-serif; fill: #1a1008; pointer-events: none; }
.kt-pad { right: calc(26px + var(--sr)); bottom: calc(18px + var(--sb)); width: 196px; height: 196px; }
.kt-b { position: absolute; width: 66px; height: 66px; border: 0; border-radius: 50%; cursor: pointer; color: #fff3d6; background: radial-gradient(circle at 50% 30%, #4a5a80, #1d2a45); box-shadow: 0 4px 0 #0e1628, inset 0 0 0 2px rgba(255, 209, 102, .45), 0 6px 14px rgba(0, 0, 0, .45); display: grid; place-items: center; touch-action: none; }
.kt-b svg { width: 30px; height: 30px; } .kt-b:active { transform: translateY(3px); background: radial-gradient(circle at 50% 30%, #6a7ab0, #2d3a65); }
.kt-b.b-n { left: 65px; top: 0; } .kt-b.b-s { left: 65px; bottom: 0; } .kt-b.b-w { left: 0; top: 65px; } .kt-b.b-o { right: 0; top: 65px; }

/* ---------- Spiegelstrahl ---------- */
.sp2-ui > * { position: absolute; }
.sp2-rooms { left: 50%; transform: translateX(-50%); top: calc(48px + var(--st)); display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 12px; background: var(--rz-bg); font: 600 10px Fredoka, sans-serif; color: rgba(255, 232, 184, .6); pointer-events: none !important; }
.sp2-rooms span { display: flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, .06); } .sp2-rooms span b { color: #fff3d6; }
.sp2-rooms span.lit { background: rgba(255, 209, 102, .28); color: #fff3d6; } .sp2-rooms span.me { box-shadow: inset 0 0 0 1.5px #fff; } .sp2-rooms span.bug::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5fd07a; }
.sp2-rooms i { width: 10px; height: 2px; background: rgba(255, 209, 102, .5); } .sp2-rooms em { font-style: normal; font-size: 14px; color: #6fd6ff; } .sp2-rooms em.lit { color: #ffd166; text-shadow: 0 0 8px #ffd166; }
.sp2-room { left: 50%; top: calc(84px + var(--st)); transform: translateX(-50%); }
.sg-svg { display: block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.sg-floor { fill: #c9a86a; stroke: #6a4a1a; stroke-width: 3; } .sg-tile { fill: #d8bc80; stroke: rgba(106, 74, 26, .35); }
.sg-wall { fill: #5a3e1a; } .sg-open { fill: none; stroke: #ffd166; stroke-width: 2.5; stroke-linejoin: round; }
.sg-sun { fill: #ffd166; filter: drop-shadow(0 0 6px #ffb020); }
.sg-pillar { fill: #8a6a3a; } .sg-pillar2 { fill: #b08a50; }
.sg-crystal path { fill: rgba(140, 220, 255, .55); stroke: #3a8ac8; stroke-width: 2; } .sg-crystal.lit path { fill: #fff6c0; stroke: #ffb020; filter: drop-shadow(0 0 10px #ffd166); }
.sg-beam { fill: none; stroke: #fff6c0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .sg-beam-glow { fill: none; stroke: #ffc840; stroke-width: 12; opacity: .7; stroke-linejoin: round; }
.sg-mir { cursor: pointer; } .sg-mir .hit { fill: transparent; } .sg-mir .ring { fill: rgba(30, 20, 8, .25); stroke: #ffd166; stroke-width: 2; stroke-dasharray: 4 3; }
.sg-mir .glass { fill: #dff4ff; stroke: #4a6a8a; stroke-width: 1.5; } .sg-mir.flat .glass { opacity: .3; } .sg-mir .dot { fill: #ffd166; }
.sg-bug { cursor: pointer; animation: sgBug .4s infinite alternate; } .sg-bug .hit { fill: rgba(95, 208, 122, .2); } @keyframes sgBug { to { transform-box: fill-box; } }
.sg-hunt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--rz-bg); color: #fff3d6; font: 700 12px Fredoka, sans-serif; }
.sg-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; } .sg-mini small { color: #ffd9a0; } .sg-mini button { border: 0; background: rgba(95, 208, 122, .2); border-radius: 50%; cursor: pointer; }
.sp2-hint { top: auto !important; bottom: calc(12px + var(--sb)); }

/* ---------- Sphinx ---------- */
.sx-ui > * { position: absolute; }
.sx-tab { left: 50%; transform: translateX(-50%); top: calc(54px + var(--st)); width: min(560px, 74vw); padding: 12px 16px; border-radius: 16px; text-align: center; color: #3a2408; background: linear-gradient(#ead7a8, #c8a464); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 0 0 2px #7a5a2a; }
.sx-seq { display: flex; gap: 8px; justify-content: center; align-items: center; } .sx-seq span { width: 44px; height: 44px; border-radius: 10px; background: rgba(58, 36, 8, .85); display: grid; place-items: center; } .sx-seq svg { width: 32px; height: 32px; }
.sx-seq .q { background: #ffd166; color: #3a2408; font: 800 24px Fredoka, sans-serif; }
.sx-eq div { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 3px 0; font: 800 20px Fredoka, sans-serif; } .sx-eq span { width: 38px; height: 38px; border-radius: 9px; background: rgba(58, 36, 8, .85); display: grid; place-items: center; } .sx-eq svg { width: 28px; height: 28px; } .sx-eq em { font-style: normal; min-width: 28px; }
.sx-q { margin: 6px 0 0; font: 600 15px/1.35 Fredoka, sans-serif; } .sx-q.big { font-size: 16px; margin: 0; }
.sx-opts { left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--sb)); display: grid; grid-template-columns: repeat(2, 236px); gap: 10px; }
.sx-o { height: 56px; border: 0; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px Fredoka, sans-serif; color: #fff3d6; background: radial-gradient(circle at 50% 20%, #4a5a80, #1d2a45); box-shadow: 0 4px 0 #0e1628, inset 0 0 0 2px rgba(255, 209, 102, .4); }
.sx-o svg { width: 28px; height: 28px; } .sx-o.gone { opacity: .25; text-decoration: line-through; } .sx-o:active { transform: translateY(3px); }

/* ---------- Bildsteine ---------- */
.bs-ui > * { position: absolute; }
.stone-svg { width: 100%; height: 100%; }
.bs-laid { left: 50%; transform: translateX(-50%); top: calc(50px + var(--st)); display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 16px; background: var(--rz-bg); box-shadow: inset 0 0 0 1px var(--rz-line); pointer-events: none !important; }
.bs-laid small { font: 600 10px Fredoka, sans-serif; color: #ffd9a0; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.bs-laid .st { width: 62px; height: 62px; border-radius: 16px; padding: 9px; box-sizing: border-box; position: relative; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); color: #ffe8b8; }
.bs-laid .st.on { background: radial-gradient(circle at 40% 30%, #8a8a9a, #4a4a5a); box-shadow: 0 4px 0 #2a2a36, inset 0 0 0 2px rgba(255, 255, 255, .25); color: #fff; animation: bsIn .35s ease-out; }
.bs-laid .st em { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); font: 600 10px Fredoka, sans-serif; font-style: normal; color: #ffe8b8; white-space: nowrap; }
@keyframes bsIn { from { transform: scale(1.6) rotate(-12deg); opacity: 0; } }
.bs-main { inset: 0; pointer-events: none !important; } .bs-main > * { position: absolute; pointer-events: auto; }
.bs-target { left: calc(14px + var(--sl)); bottom: calc(14px + var(--sb)); width: 190px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(#ead7a8, #c8a464); color: #3a2408; box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 0 0 2px #7a5a2a; }
.bs-target small { font: 600 10px Fredoka, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #7a4a10; } .bs-target b { display: block; font: 700 18px/1.15 Cinzel, serif; margin: 3px 0 2px; } .bs-target span { font: 500 12px Fredoka, sans-serif; } .bs-target p { margin: 6px 0 0; font: 700 12px Fredoka, sans-serif; color: #8a2a10; }
.bs-grid { right: calc(12px + var(--sr)); bottom: calc(10px + var(--sb)); display: grid; grid-template-columns: repeat(5, 50px); gap: 6px; padding: 8px; border-radius: 14px; background: var(--rz-bg); }
.bs-s { width: 50px; height: 50px; padding: 9px; border: 0; border-radius: 12px; cursor: pointer; color: #fff; background: radial-gradient(circle at 40% 30%, #7a7a8a, #3a3a4a); box-shadow: 0 3px 0 #22222c; } .bs-s.used { opacity: .25; } .bs-s:disabled { cursor: default; }
.bs-cands { left: 50%; transform: translateX(-50%); bottom: calc(40px + var(--sb)); display: grid; grid-template-columns: repeat(3, 196px); gap: 8px; }
.bs-c { height: 58px; border: 0; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #3a2408; background: linear-gradient(#ead7a8, #c8a464); box-shadow: 0 4px 0 #6a4a1a, inset 0 0 0 2px rgba(255, 255, 255, .4); }
.bs-c b { font: 700 14px Cinzel, serif; } .bs-c span { font: 500 11px Fredoka, sans-serif; } .bs-c.pick { box-shadow: 0 4px 0 #6a4a1a, inset 0 0 0 3px #2a7fd0, 0 0 16px rgba(80, 160, 255, .7); } .bs-c.right { background: linear-gradient(#d8ffd0, #6cc070); } .bs-c:disabled { cursor: default; }
.bs-tip { left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--sb)); margin: 0; font: 600 12px Fredoka, sans-serif; color: #fff3d6; text-shadow: 0 1px 6px #000; white-space: nowrap; }

/* ---------- Tempellauf ---------- */
.tp-ui > * { position: absolute; }
.tp-grid { left: 50%; top: calc(80px + var(--st)); transform: translateX(-50%); }
.tp-svg { display: block; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.tp-t { fill: #8a7a5a; stroke: #4a3a1a; stroke-width: 2; } .tp-t.safe { fill: #e8c060; } .tp-t.tilt.up { fill: #ffe08a; animation: tpUp .4s infinite alternate; } .tp-t.tilt.down { fill: #6a5a40; stroke-dasharray: 4 3; }
@keyframes tpUp { to { fill: #fff2b0; } }
.tp-t.can { fill: #a89a70; stroke: #6fd6ff; stroke-width: 3; cursor: pointer; } .tp-t.here { stroke: #fff; stroke-width: 3; }
.tp-start, .tp-goal { fill: rgba(47, 179, 122, .5); stroke: #2fb37a; stroke-width: 2; } .tp-goal { fill: rgba(255, 209, 102, .4); stroke: #ffd166; } .tp-lbl { font: 700 12px Fredoka, sans-serif; fill: #fff3d6; }
.tp-me { fill: #2a7fd0; stroke: #fff; stroke-width: 3; }
.tp-hint { top: auto !important; bottom: calc(14px + var(--sb)); }

/* ---------- Zuschauer: Mitraten bei der Sphinx, Live-Tafel-Bausteine ---------- */
.sp-sx { display: flex; flex-direction: column; gap: 5px; } .sp-sx small { font: 600 10px Fredoka, sans-serif; color: #ffd9a0; }
.sp-sx .sp-sxo { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .sp-sx button { border: 0; padding: 6px; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff3d6; font: 600 11px Fredoka, sans-serif; display: flex; align-items: center; gap: 4px; justify-content: center; } .sp-sx button svg { width: 18px; height: 18px; }
.sp-sx button.gone { opacity: .3; } .sp-sx .sp-sxh { font: 500 11px/1.3 Fredoka, sans-serif; color: #bff1ff; }
.lv-guard { position: relative; display: block; width: 110px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .12); } .lv-guard i { position: absolute; top: -2px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ff6a4a; }
/* Geheimer Auftrag: Siegel neben dem Namen, Kärtchen im Beutel */
.bd-bag .it.mission { background: linear-gradient(#8a1a2a, #5a0a18); color: #ffe8b8; box-shadow: inset 0 0 0 1px #ffb0a0; }
.bdf .seal { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a8a, #a01020); box-shadow: 0 0 0 1px #3a0008; }
.lv-q { font: 600 11px Fredoka, sans-serif; color: #fff3d6; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lv-st { display: flex; gap: 4px; } .lv-st i { width: 24px; height: 24px; color: #fff3d6; }
/* Sichtung S5 (waage-2-spiel): Rätsel-Leisten links lagen über der Minimap. Im Rätsel braucht es die Minimap nicht. */
body.in-mg .hud-tl { opacity: 0; pointer-events: none; }
/* Sichtung S5 mit 3D-Arena: die Mechanik steht im Raum, unten nur noch knappe Steuerung */
.wg-plate { width: 62px; height: 62px; padding: 8px 2px 4px; border-radius: 14px; }
.wg-plate .wg-w { font-size: 18px; } .wg-plate.ufer { width: 58px; }
.wg-side { width: 136px; }
/* Kartenleser mit 3D-Gruft: Karte und Läufer-Skizze an den Rand, die Mitte zeigt den Raum */
.kt-ui .kt-map { left: calc(10px + var(--sl)) !important; top: auto !important; bottom: calc(10px + var(--sb)); transform: scale(.62); transform-origin: 0 100%; }
.kt-ui.r-laeufer .kt-map { transform: scale(.5); }
.kt-pad { width: 168px; height: 168px; } .kt-b { width: 56px; height: 56px; } .kt-b.b-n, .kt-b.b-s { left: 56px; } .kt-b.b-w, .kt-b.b-o { top: 56px; }
/* Spiegelstrahl und Tresor mit 3D-Schauplatz: Bedienfeld an den Rand, die Mitte zeigt Kammer, Spiegel und Strahl im Raum */
.sp2-room { left: auto !important; right: calc(10px + var(--sr)); top: auto !important; bottom: calc(40px + var(--sb)); transform: scale(.6) !important; transform-origin: 100% 100%; }
.ts-ear { left: calc(12px + var(--sl)) !important; top: auto !important; bottom: calc(12px + var(--sb)); transform: none !important; width: 250px; padding: 10px; }
/* Arena (3D-Schauplatz): Titelleiste klein oben links, Bedienung als schmale Spalte am rechten Rand, Mitte frei für den Raum.
   Platten, Krüge, Spiegel und Felder lassen sich direkt im Raum antippen (mg/arena.js). */
#mg.has-arena .rz-top { left: calc(10px + var(--sl)); transform: scale(.82); transform-origin: 0 0; }
#mg.has-arena .wg-hint, #mg.has-arena .ts-hint, #mg.has-arena .kt-hint, #mg.has-arena .tp-hint { top: auto; bottom: calc(8px + var(--sb)); }
#mg.has-arena .wg-plates { left: auto; right: calc(8px + var(--sr)); bottom: auto; top: calc(56px + var(--st)); transform: none; flex-direction: column; gap: 5px; }
#mg.has-arena .wg-plate { width: 54px; height: 46px; padding: 3px 2px; } #mg.has-arena .wg-plate.ufer { width: 54px; height: 54px; }
#mg.has-arena .wg-plate .wg-w { font-size: 15px; } #mg.has-arena .wg-plate .wg-tgt { transform: scale(.8); }
#mg.has-arena .wg-side { right: calc(70px + var(--sr)); width: 128px; }
#mg.has-arena .ts-guard { left: calc(10px + var(--sl)); transform: none; top: calc(50px + var(--st)); width: 300px; }
/* Sichtung arena3: in Arenen Namensschilder kompakt (schmaler Balken, Name klein darunter), damit sie keine Rätsel-Beschriftung verdecken */
body.in-arena .plate { flex-direction: column-reverse; }
body.in-arena .plate .pl-lvl, body.in-arena .plate .pl-xp { display: none; }
body.in-arena .plate .pl-bar { width: 34px; height: 5px; }
body.in-arena .plate .pl-name { margin: 1px 0 0; font-size: 9.5px; opacity: .85; }
/* Kartenleserin sieht das Labyrinth im Raum: keine zweite 2D-Karte; Läufer behalten ihre kleine Skizze der gesehenen Felder */
#mg.has-arena .kt-ui:not(.r-laeufer) .kt-map { display: none; }
/* Schritt 6: Missionen im 3D-Schauplatz. Nur Kopfleiste und eine Hinweiszeile unten, bedient wird im Raum. */
.s6-ui { position: absolute; inset: 0; } #mg .s6-ui, #mg .s6-ui * { pointer-events: none !important; } /* Bedienung im 3D-Raum: der Rahmen darf keine Tipps abfangen */
.s6-hint { position: absolute; left: 50%; bottom: calc(10px + var(--sb)); transform: translateX(-50%); max-width: min(600px, 72vw); padding: 6px 14px; border-radius: 12px;
  background: rgba(14, 12, 10, .72); border: 1px solid rgba(255, 226, 170, .32); color: #fff3d6; font: 600 13.5px/1.25 Fredoka, sans-serif; text-align: center; text-shadow: 0 1px 4px #000; }
.s6-hint.pop { animation: s6pop .35s ease-out; }
@keyframes s6pop { from { transform: translateX(-50%) scale(1.08); } to { transform: translateX(-50%) scale(1); } }
.rz-bar.hot i { background: linear-gradient(90deg, #ffb347, #ff4a1a); } .rz-bar.water i { background: linear-gradient(90deg, #6fd6ff, #2a7ad0); }
/* Truhe: Joystick links bleibt im Minispiel sichtbar */
body.mg-joy #joyLayer { display: block !important; } body.mg-joy .joy-hint { display: none !important; }
body.mg-joy .s6-hint { left: 58%; }
/* Tempellauf mit 3D-Tempelboden: das flache Gitter entfällt */
#mg.has-arena .tp-grid { display: none; }
#mg.has-arena .tp-ui, #mg.has-arena .tp-ui * { pointer-events: none !important; }