.roller-lock-scene{width:100%;max-width:400px;margin:auto;color:#ffe6c6;text-align:center}
.roller-lock-figure{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:18px;box-shadow:0 18px 48px #150b286b;isolation:isolate}
.roller-lock-figure>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.roller-lock-open{opacity:0;transition:opacity .65s ease}.is-unlocked .roller-lock-open{opacity:1}
.roller-bed{position:absolute;left:20.5%;top:62.9%;width:59%;height:10.4%;display:flex;gap:4%;padding:0 1%;border-radius:4px;overflow:hidden;background:#392115;box-shadow:inset 0 0 8px #1d0e0a}
.number-drum{position:relative;flex:1;min-width:0;height:100%;overflow:hidden;border:1px solid #89542b;border-radius:5px;background:linear-gradient(#3e2514,#b5884b 17%,#f4d18e 40%,#efd096 61%,#99703e 82%,#382314);touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 2px 0 2px #ffe3a566,inset -2px 0 2px #42241188}
.number-drum:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#20110cd9,transparent 30%,transparent 70%,#20110cd9);z-index:1}
.number-drum:focus-visible{outline:2px solid #ffe6b4;outline-offset:-2px}
.number-drum[aria-disabled=true]{cursor:default}
.drum-list{position:absolute;left:0;top:0;width:100%;will-change:transform;pointer-events:none}
.drum-list span{display:block;height:var(--drum-step,40px);line-height:var(--drum-step,40px);font-family:Georgia,'Times New Roman',serif;font-size:var(--drum-font,34px);font-weight:600;font-variant-numeric:tabular-nums lining-nums;color:#4a2b19;text-shadow:0 1px 0 #ffe9b97d;text-align:center;letter-spacing:0}
.roller-caption{font-size:15px;line-height:1.8;margin:15px 0 0;text-shadow:0 2px 8px #201028}
.roller-status{min-height:26px;font-size:14px;line-height:1.8;margin:4px 0 0;color:#f4cbd0}
.memory-lock-sheet #close{background:#452637aa;border-radius:50%;box-shadow:0 2px 12px #23132966}
/* Painted objects use the existing small light cue, never an outlined hit area. */
.scene-secret #secret-box:focus,.scene-secret #secret-lock:focus{outline:none}
@media(max-height:600px){.roller-lock-scene{max-width:270px}.roller-caption{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.roller-lock-open,.drum-list{transition-duration:.01ms!important}}
.room-memory-drums{position:absolute;left:55%;top:59.9%;width:5.3%;height:.9%;transform:translate(-50%,-50%);display:flex;overflow:hidden;pointer-events:none;background:linear-gradient(#74502b,#e3bf79 45%,#c39553 65%,#58351e);border-radius:1px;line-height:1;align-items:center;box-shadow:inset 0 1px 1px #31190980}
.room-memory-drums span{width:25%;text-align:center;font-family:Georgia,serif;font-weight:bold;color:#452515;border-right:.35px solid #714b2e}
/* Room-open-v2 numeric well: inset to its slanted face; keep this calibration with the asset. */
.room-memory-drums.is-open{left:80.49%;top:63.27%;width:3.6%;height:1.03%;transform:translate(-50%,-50%) matrix(.925,.256,-.583,.861,0,0)}

/* Share the same unfolding motion as letters and other inspected objects. */
#object-sheet{animation:unfold .55s cubic-bezier(.22,.6,.3,1) both}
#overlay.memory-lock-view{animation:memory-veil-in .55s ease both}
#overlay.memory-lock-view.inspect-leaving{animation:memory-veil-out .35s ease both}
#object-sheet.memory-lock-sheet.inspect-leaving{animation:memory-inspect-out .35s cubic-bezier(.22,.6,.3,1) both;pointer-events:none}
@keyframes memory-veil-in{from{background-color:#160d2500}to{background-color:#160d25b8}}
@keyframes memory-veil-out{from{background-color:#160d25b8}to{background-color:#160d2500}}
@keyframes memory-inspect-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(15px) scale(.94)}}