/* These are picture-space browser interactions, not generated character motion. */
.clue-interaction-host{position:absolute;top:var(--scene-top,60px);right:0;bottom:var(--scene-bottom,220px);left:0;z-index:7;overflow:hidden;pointer-events:none}
.ci-root{position:absolute;inset:0;overflow:hidden;pointer-events:none;--ci-progress:0;--ci-turn:0deg;--ci-drift:0px;--ci-x:50%;--ci-y:50%;color:#f0e9d9;font:12px/1.5 system-ui,sans-serif;user-select:none;-webkit-user-select:none}
.ci-surface{position:absolute;inset:0;z-index:2;pointer-events:none;touch-action:none}
.ci-sweep .ci-surface{pointer-events:auto;cursor:crosshair}
.ci-lamp-mask{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 80px at var(--ci-x) var(--ci-y),transparent 0,rgba(0,0,0,.06) 42%,rgba(0,0,0,.64) 100%)}
.ci-marker{position:absolute;z-index:3;width:38px;height:38px;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #eadcaa70;border-radius:50%;background:#1118;color:#eee3c6;font-size:11px;box-shadow:0 0 12px #0006;pointer-events:none}
.ci-marker.is-found{border-color:#e6d3a2;background:#71634455;color:#fff5ce}
.ci-hint{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);z-index:8;width:max-content;max-width:94%;padding:5px 9px;border-radius:4px;background:#090908c9;border:1px solid #8e85742e;color:#dfd7c7;text-align:center;font-size:10px;line-height:1.5;pointer-events:none}
.ci-dock{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);z-index:9;width:min(94%,390px);display:flex;justify-content:center;gap:7px;pointer-events:auto;padding:5px;border-radius:6px;background:#11110fe8;box-shadow:0 6px 22px #0005}
.ci-button{flex:1;min-width:0;min-height:44px;padding:7px 10px;border:1px solid #c5b79770;border-radius:4px;background:#24221dcc;color:#ede6d9;font:11px/1.45 system-ui,sans-serif;touch-action:manipulation}
.ci-button:hover:not(:disabled){background:#39342a}
.ci-root button:focus-visible,.ci-root input:focus-visible{outline:2px solid #f2d89a;outline-offset:3px}
.ci-root button:disabled,.ci-root input:disabled{opacity:.38;cursor:default}
.ci-slider{position:absolute;z-index:5;transform:translate(-50%,-50%);pointer-events:auto;padding:5px 9px 0;border:1px solid #b6a17b66;border-radius:5px;background:linear-gradient(180deg,#1d1911e8,#100e0ce8);box-shadow:0 3px 16px #0008}
.ci-slider-caption{display:block;color:#e5d5b7;font-size:10px;letter-spacing:1px;text-align:center;pointer-events:none}
.ci-range{display:block;width:100%;height:44px;margin:0;cursor:ew-resize;touch-action:none;accent-color:#c9b080;appearance:none;-webkit-appearance:none;background:transparent}
.ci-range::-webkit-slider-runnable-track{height:12px;border:1px solid #715537;border-radius:2px;background:repeating-linear-gradient(0deg,#46301d 0 2px,#5c4229 3px 4px);box-shadow:inset 0 2px 5px #000b}
.ci-range::-moz-range-track{height:12px;border:1px solid #715537;border-radius:2px;background:#4c3724}
.ci-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:42px;height:32px;margin-top:-11px;border:1px solid #d2c3a7;border-radius:4px;background:linear-gradient(90deg,#756b57,#b6a17b 48%,#756b57);box-shadow:0 2px 7px #000b}
.ci-range::-moz-range-thumb{width:40px;height:30px;border:1px solid #d2c3a7;border-radius:4px;background:#a48f6d}
.ci-shutters{position:absolute;z-index:1;overflow:hidden;pointer-events:none}
.ci-shutter{position:absolute;top:0;bottom:0;width:50%;border:1px solid #57422d;background:repeating-linear-gradient(90deg,#211b15 0 15%,#35291e 16%,#171411 17%,#292119 34%);box-shadow:inset 0 0 30px #000b}
.ci-shutter.left{left:0;transform:translateX(calc(var(--ci-progress)*-101%))}
.ci-shutter.right{right:0;transform:translateX(calc(var(--ci-progress)*101%))}
/* V8: physical occlusion follows the range value in the displayed image rectangle.
   No time-based transition: pause and reduced-motion leave exactly the current pose. */
.ci-slide-effect,.ci-slide-effect *,.ci-slide-effect::before,.ci-slide-effect::after{pointer-events:none!important}
.ci-slide-effect{position:absolute;z-index:1;overflow:hidden;isolation:isolate;contain:layout paint}
.ci-lamp-spill-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 27% 46%,#080705f2 0,#080705db 28%,#08070573 58%,transparent 88%);opacity:calc(var(--ci-progress)*.94)}
.ci-light-shield{position:absolute;top:1%;bottom:2%;left:0;width:92%;transform:translateX(calc(-103% + var(--ci-progress)*103%));clip-path:polygon(0 0,84% 1%,96% 6%,100% 15%,100% 86%,92% 98%,0 100%);background:linear-gradient(90deg,#0a0908 0,#17130f 44%,#0b0a08 88%,#3c3020 97%,#100d09),repeating-linear-gradient(4deg,transparent 0 3px,#aa927d05 4px 5px);border-right:2px solid #66513966;box-shadow:inset -10px 0 16px #000b,inset 1px 0 #38291e99}
.ci-light-shield::before{content:"";position:absolute;inset:6% 7% 8% 0;border-top:1px solid #7b5c382e;border-bottom:1px solid #7b5c3824;background:repeating-linear-gradient(87deg,transparent 0 11px,#bba28406 12px,transparent 13px 22px);opacity:.8}
.ci-light-shield::after{content:"";position:absolute;top:3%;right:5%;bottom:4%;width:2px;background:linear-gradient(180deg,transparent,#8067455c 30%,#80674524 74%,transparent);box-shadow:-2px 0 5px #000b}
.ci-peep-board{position:absolute;inset:0;transform:translateX(calc(101% - var(--ci-progress)*101%));overflow:hidden;background:repeating-linear-gradient(90deg,#281a10 0 28%,#3a2819 29%,#110d0a 30%,#23180f 33%);border-left:1px solid #7e5a36a6;box-shadow:-8px 0 15px #000c,inset 2px 0 3px #000;isolation:isolate}
.ci-peep-texture{position:absolute;inset:0;background-repeat:no-repeat;filter:brightness(.72) saturate(.72)}
.ci-peep-board::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#0009,transparent 8%,#0907041a 63%,#0009),repeating-linear-gradient(90deg,transparent 0 31%,#110b06a6 31.5%,#8768491c 32%,transparent 32.5%);box-shadow:inset 2px 0 2px #b7996324,inset -8px 0 12px #0008}
.ci-peep-board::after{content:"";position:absolute;z-index:2;left:0;right:0;top:35%;height:3%;min-height:7px;max-height:20px;border-top:1px solid #a58c5a36;border-bottom:1px solid #000b;background:linear-gradient(180deg,#28261fee,#181713ee 50%,#100f0cef);box-shadow:0 3px 4px #0007}
.ci-flap{position:absolute;z-index:5;min-height:88px;transform:translate(-50%,-50%) perspective(500px) translateX(var(--ci-drift)) rotateY(var(--ci-turn));transform-origin:center;touch-action:none;pointer-events:auto;border:1px solid #9c8460;border-radius:2px;background:repeating-linear-gradient(5deg,#8e795a 0 3px,#917d5c 4px 5px);color:#292218;text-shadow:0 1px #c4aa7c88;box-shadow:5px 7px 20px #0009;cursor:grab;font-size:11px;backface-visibility:visible}
.ci-bandage .ci-flap{min-height:62px;border-color:#9a9482;background:repeating-linear-gradient(2deg,#aba28b 0 2px,#8a8373 3px,#aaa18a 4px);color:#302e25}
.ci-slot,.ci-piece{position:absolute;z-index:5;transform:translate(-50%,-50%);pointer-events:auto;min-width:56px;min-height:56px;max-width:105px;padding:6px 8px;font:11px/1.4 system-ui,sans-serif;border-radius:5px}
.ci-slot{border:2px dashed #e3d7b8a8;background:#10100d70;color:#dfd5bd;box-shadow:0 0 0 5px #0003}
.ci-piece{border:1px solid #b7a17c;background:linear-gradient(105deg,#5c4930,#8d724c,#4d3d29);box-shadow:2px 4px 12px #000b;color:#fff0cf;touch-action:none;cursor:grab}
.is-selected .ci-piece{outline:2px solid #f3dca8;outline-offset:3px}
.is-selected .ci-slot{border-color:#ffe8ad;background:#65543255}
.is-placed .ci-slot{opacity:0}
.ci-knock-lights{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;gap:10px;pointer-events:none}
.ci-knock-light{width:36px;height:36px;display:grid;place-items:center;border:1px solid #bfb49470;border-radius:50%;color:#c6bda8;background:#171610c9;font-size:10px}
.ci-knock-light.is-lit{background:#d0af66;color:#17140e;box-shadow:0 0 22px #e4c987aa}
.ci-knock .ci-dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ci-knock .ci-replay{grid-column:1/-1;min-height:38px;background:transparent;border-color:#b0a38730;color:#cfc6b3}
.ci-root.is-disabled .ci-surface,.ci-root.is-paused .ci-surface,.ci-root.is-busy .ci-surface,.ci-root.is-done .ci-surface{pointer-events:none}
.ci-root.is-paused *{animation-play-state:paused!important}
.ci-root.is-done .ci-lamp-mask{opacity:0}
.ci-root.is-done .ci-marker,.ci-root.is-done .ci-flap,.ci-root.is-done .ci-slider,.ci-root.is-done .ci-knock-lights{display:none}
.ci-root.is-done .ci-piece{pointer-events:none;opacity:1}
.ci-root.is-wrong .ci-slot,.ci-root.is-wrong .ci-dock{border-color:#ce9475;box-shadow:0 0 12px #b5763833}
.ci-root.is-dragging .ci-piece,.ci-root.is-dragging .ci-flap{cursor:grabbing}
.ci-root.is-reduced *{animation:none!important;transition:none!important}
.on-title .clue-interaction-host,.saluting .clue-interaction-host{display:none}
#game:has(#scene-touch .ci-root) #scene-direction{display:none}
@media(max-width:760px){.ci-dock{width:min(94%,350px)}.ci-hint{font-size:9px;padding:4px 7px}.ci-button{padding:6px;font-size:10px}.ci-knock .ci-dock{bottom:34px}.ci-flap{min-height:76px}.ci-bandage .ci-flap{min-height:56px}}