* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body {
    height:100%; overflow:hidden; overscroll-behavior:none;
    font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
    background:#0d0e22; color:#fff;
    touch-action:none; user-select:none; -webkit-user-select:none;
    position:fixed; width:100%;
  }
  #phone-wrap {
    width:100%; height:100dvh; max-width:520px; margin:0 auto; position:relative;
    overflow:hidden; background:#f6e8d7; display:flex; flex-direction:column;
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  @media (min-width:560px){
    body{display:flex;align-items:center;justify-content:center;background:#0d0e22 radial-gradient(circle at 50% 20%,#282a5a,#0d0e22);}
    #phone-wrap{height:min(92dvh,880px);border-radius:28px;border:8px solid #222;}
  }
  /* Top HUD — in-flow bar above the playable area */
  #hud {
    position:relative; z-index:60;
    display:flex; gap:8px; padding:10px;
    padding-top:max(10px, env(safe-area-inset-top));
    background:#1c1e3a; border-bottom:2px solid #33335a;
  }
  #hud button {
    pointer-events:auto; border:none; border-radius:999px;
    padding:8px 12px; font-size:14px; font-weight:700; cursor:pointer;
    background:rgba(255,255,255,.92); color:#333; box-shadow:0 2px 10px rgba(0,0,0,.25);
    display:flex; align-items:center; gap:4px;
  }
  #hud button:active{transform:scale(.94);}
  #spacer{flex:1;}
  /* Toast */
  #toast {
    position:absolute; left:50%; bottom:86px; transform:translateX(-50%) translateY(20px);
    background:rgba(20,20,35,.92); color:#fff; padding:10px 16px; border-radius:14px;
    font-size:14px; z-index:120; opacity:0; transition:all .3s; pointer-events:none;
    max-width:88%; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,.4);
  }
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  /* Views */
  #stage{position:relative; flex:1; overflow:hidden;}
  .view{position:absolute; inset:0; transition:opacity .5s, transform .5s;}
  .hidden-view{opacity:0; pointer-events:none; transform:scale(1.04);}
  /* ROOM */
  #view-room{background:linear-gradient(#cfe8ff 0 55%, #f6e8d7 55% 100%); transition:background .6s, filter .6s;}
  #view-room.night{background:linear-gradient(#060825 0 55%, #0c0e2a 55% 100%); filter:brightness(.55) saturate(1.2);}
  #view-room.night .day-only{opacity:.15;}
  .wall-deco{position:absolute;}
  /* floor */
  .floor-line{position:absolute; left:0; right:0; top:55%; height:4px; background:rgba(0,0,0,.08);}
  #rug{position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:70%; height:90px; background:#ff9d9d; border-radius:50%; opacity:.9; border:6px solid #ff7b7b; cursor:pointer;}
  #rug::after{content:''; position:absolute; inset:12px; border:3px dashed #fff; border-radius:50%;}
  /* Bed */
  #bed{position:absolute; left:4%; bottom:12%; width:52%; cursor:pointer; transition:translate .6s;}
  /* Closet */
  #closet{position:absolute; right:4%; top:14%; width:34%; height:52%; cursor:pointer; filter:drop-shadow(0 8px 12px rgba(0,0,0,.25)); transition:transform .15s;}
  #closet:active{transform:scale(.97);}
  /* Nightstand — right wall under the rocket frame, each drawer opens independently */
  #view-right #nightstand{position:absolute; right:8%; top:34%; width:30%;}
  #drawer-top,#drawer-bottom{cursor:pointer; transition:opacity .15s;}
  #drawer-top:active,#drawer-bottom:active{opacity:.65;}
  /* Tappable decor wiggles even when nothing is hidden inside */
  .tappable{cursor:pointer;}
  @keyframes nudge{0%,100%{rotate:0deg; translate:0 0;}25%{rotate:2.5deg; translate:2px -3px;}50%{rotate:-2deg; translate:-2px 1px;}75%{rotate:1.5deg; translate:1px 0;}}
  .nudged{animation:nudge .4s ease;}
  #drawer-box.opening{animation:drawerslide .35s ease;}
  @keyframes drawerslide{from{transform:translateY(14px); opacity:.4;}to{transform:translateY(0); opacity:1;}}
  /* Light switch */
  #lightswitch{position:absolute; left:44%; top:22%; width:44px; height:70px; background:#fff; border:3px solid #333; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; box-shadow:0 3px 0 #333; z-index:5;}
  #lightswitch:active{transform:translateY(2px); box-shadow:none;}
  #lightswitch .toggle{width:22px; height:30px; background:#ffd93d; border:2px solid #333; border-radius:5px; position:relative; transition:all .2s;}
  #lightswitch .toggle::after{content:''; position:absolute; left:1px; right:1px; height:12px; background:#333; border-radius:3px; top:2px; transition:all .2s;}
  #view-room.night #lightswitch .toggle::after{top:14px;}
  #lightswitch small{font-size:9px; font-weight:800; color:#333;}
  /* Look up */
  #lookup-btn{
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    background:#333; color:#fff; border:none; border-radius:999px; padding:10px 18px;
    font-weight:800; font-size:15px; cursor:pointer; z-index:10; box-shadow:0 4px 14px rgba(0,0,0,.3);
    animation:bob 1.6s ease-in-out infinite;
  }
  @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
  /* lamp glow in night */
  #room-dim{position:absolute; inset:0; background:#05061a; opacity:0; pointer-events:none; transition:opacity .6s; z-index:4;}
  #view-room.night #room-dim{opacity:.72;}
  #view-room.night.beam #room-dim{opacity:.28;}
  /* Side walls + sliding room views */
  .roomview{will-change:transform;}
  #view-left,#view-right{background:linear-gradient(#d8ecff 0 55%, #f1e3cd 55% 100%); transition:background .6s, filter .6s, transform .45s ease;}
  #view-left.night,#view-right.night{background:linear-gradient(#060825 0 55%, #0c0e2a 55% 100%); filter:brightness(.55) saturate(1.2);}
  #view-left.night .day-only,#view-right.night .day-only{opacity:.15;}
  #view-room.shaded,#view-left.shaded,#view-right.shaded{filter:brightness(.86);}
  .roomview .room-dim{position:absolute; inset:0; background:#05061a; opacity:0; pointer-events:none; transition:opacity .6s; z-index:4;}
  .roomview.night .room-dim{opacity:.72;}
  .roomview.night.beam .room-dim{opacity:.28;}
  /* Daylight shaft spilling from the open window */
  .moonbeam{position:absolute; top:-10%; left:-12%; width:75%; height:140%; transform:rotate(20deg); background:linear-gradient(rgba(255,250,222,.4),rgba(255,250,222,.1) 55%,transparent 80%); pointer-events:none; z-index:5; display:none; filter:blur(1px);}
  .roomview.night.beam .moonbeam{display:block;}
  /* Room navigation arrows + dots */
  .nav-arrow{position:absolute; top:44%; z-index:30; width:44px; height:44px; border-radius:50%; border:none; background:rgba(20,20,35,.55); color:#fff; font-size:18px; font-weight:900; cursor:pointer;}
  .nav-arrow:active{transform:scale(.9);}
  #nav-left{left:8px;} #nav-right{right:8px;}
  #view-dots{position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:30; display:flex; gap:6px; pointer-events:none;}
  #view-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); box-shadow:0 1px 4px rgba(0,0,0,.4);}
  #view-dots span.on{background:#ffd93d;}
  /* Window wall (daytime) */
  #window{position:absolute; left:50%; top:34%; transform:translateX(-50%); width:66%; max-width:300px; aspect-ratio:3/3.4; background:#7a5230; border-radius:14px; padding:12px; box-shadow:0 10px 24px rgba(0,0,0,.3);}
  #window-frame{position:relative; width:100%; height:100%; border-radius:8px; overflow:hidden; background:linear-gradient(#7ec8f7 0 62%, #9fd68f 62% 100%);}
  #window-glass{position:absolute; inset:0; cursor:zoom-in;}
  .w-sun{position:absolute; left:14%; top:12%; width:44px; height:44px; border-radius:50%; background:#ffdf5a; box-shadow:0 0 30px #ffdf5a;}
  .w-cloud{position:absolute; height:22px; background:#fff; border-radius:12px; opacity:.9; animation:drift 9s ease-in-out infinite alternate;}
  .w-cloud.c1{left:8%; top:24%; width:80px;} .w-cloud.c2{left:52%; top:12%; width:60px; animation-delay:-4s;}
  @keyframes drift{from{translate:-8px 0;}to{translate:10px 0;}}
  #window-glass svg.mountains{position:absolute; left:0; right:0; bottom:0; width:100%; height:52%;}
  .mullion-v{position:absolute; left:50%; top:0; bottom:0; width:8px; transform:translateX(-50%); background:#f3e9d2;}
  .mullion-h{position:absolute; left:0; right:0; top:46%; height:8px; background:#f3e9d2;}
  .glass-shine{position:absolute; left:-30%; top:-20%; width:60%; height:140%; transform:rotate(18deg); background:linear-gradient(rgba(255,255,255,.35),transparent 70%); pointer-events:none;}
  .curtain{position:absolute; top:-4px; bottom:-4px; width:22%; background:repeating-linear-gradient(90deg,#c0392b 0 10px,#a93226 10px 20px); border-radius:8px; z-index:3; cursor:pointer; transition:width .6s ease; box-shadow:0 4px 10px rgba(0,0,0,.3); animation:sway 4s ease-in-out infinite;}
  .curtain.left{left:-8px;} .curtain.right{right:-8px; animation-delay:-2s;}
  @keyframes sway{0%,100%{rotate:-1deg;}50%{rotate:1deg;}}
  #window.closed .curtain{width:54%; animation:none;}
  #sill{position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:60%; max-width:280px; height:14px; background:#5d3a1e; border-radius:6px;}
  /* Window close-up overlay */
  #overlay-window{background:linear-gradient(#4a3826,#241a10);}
  #zoom-scene{position:relative; width:92%; max-width:380px; aspect-ratio:3/3.9; border-radius:14px; overflow:hidden; background:linear-gradient(#6ec1f5 0 58%, #8fce8a 58% 100%); border:10px solid #7a5230; box-shadow:0 14px 40px rgba(0,0,0,.5);}
  #zoom-scene .zoom-day{transition:opacity .6s;}
  #zoom-scene.closed .zoom-day{opacity:0;}
  .z-sun{position:absolute; left:12%; top:10%; width:56px; height:56px; border-radius:50%; background:#ffdf5a; box-shadow:0 0 40px #ffdf5a;}
  .z-cloud{position:absolute; height:26px; background:#fff; border-radius:14px; opacity:.92; animation:drift 8s ease-in-out infinite alternate;}
  .z-cloud.c1{left:6%; top:26%; width:110px;} .z-cloud.c2{left:56%; top:14%; width:80px; animation-delay:-3s;}
  .birds{position:absolute; left:0; right:0; top:38%; text-align:center; font-size:20px; letter-spacing:8px; animation:drift 6s ease-in-out infinite alternate;}
  .z-mountains{position:absolute; left:0; right:0; bottom:0; width:100%; height:46%;}
  .z-shine{position:absolute; left:-30%; top:-20%; width:55%; height:140%; transform:rotate(18deg); background:linear-gradient(rgba(255,255,255,.3),transparent 70%); pointer-events:none;}
  .bcurtain{position:absolute; top:0; bottom:0; width:14%; background:repeating-linear-gradient(90deg,#c0392b 0 12px,#a93226 12px 24px); z-index:3; cursor:pointer; transition:width .6s ease; box-shadow:0 4px 12px rgba(0,0,0,.35);}
  .bcurtain.left{left:0; border-radius:0 10px 10px 0;} .bcurtain.right{right:0; border-radius:10px 0 0 10px;}
  #zoom-scene.closed .bcurtain{width:51%;}
  /* Right wall distractions */
  #shelf{position:absolute; left:13%; top:13%; width:36%; filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));}
  #poster2{position:absolute; right:8%; top:12%; width:24%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));}
  #plant{position:absolute; left:50%; bottom:8%; transform:translateX(-50%); font-size:56px; transform-origin:bottom center;}
  /* Watering can pickup + inventory + drag ghost */
  #can{position:absolute; right:9%; bottom:8%; width:64px; height:64px; cursor:pointer;}
  #can-btn{width:52px; height:52px; flex:none; display:none; align-items:center; justify-content:center; background:#fff; border-radius:14px; cursor:grab; touch-action:none; padding:6px;}
  #can-btn:active{cursor:grabbing;}
  #can-drag{position:fixed; z-index:300; width:54px; height:54px; transform:translate(-50%,-60%); pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
  #bloom{position:absolute; left:50%; top:-6px; transform:translateX(-50%); font-size:34px; display:none;}
  /* Inventory key + drag ghost + lock states */
  #key-btn{width:52px; height:52px; flex:none; display:none; align-items:center; justify-content:center; font-size:28px; background:#fff; border-radius:14px; cursor:grab; touch-action:none;}
  #key-btn:active{cursor:grabbing;}
  #key-drag{position:fixed; z-index:300; font-size:44px; transform:translate(-50%,-60%); pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));}
  #drawer-top.unlocked circle, #drawer-bottom.unlocked circle{fill:#ffd93d;}
  /* Inventory bar */
  #inventory{
    background:#1c1e3a; padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:10px; z-index:55; border-top:2px solid #33335a;
  }
  #inv-label{font-size:12px; opacity:.7; font-weight:700; letter-spacing:.5px;}
  #uv-btn{
    flex:1; border:none; border-radius:14px; padding:13px; font-size:16px; font-weight:800;
    background:#3a3f6b; color:#8a8fa8; cursor:pointer; transition:all .2s;
  }
  #uv-btn.has-tool{background:#fff; color:#222;}
  #uv-btn.uv-on{background:#7b2ff7; color:#fff; box-shadow:0 0 18px #a86bff;}
  /* code readout removed from inventory */
  /* Overlays (closet / drawer / ceiling) */
  .overlay{position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; transition:opacity .35s, transform .35s;}
  .overlay.hidden-view{opacity:0; pointer-events:none; transform:translateY(20px) scale(1.02);}
  .overlay-header{display:flex; align-items:center; gap:10px; padding:12px; padding-top:max(12px, env(safe-area-inset-top));}
  .back-btn{border:none; background:#fff; color:#222; font-weight:800; padding:10px 14px; border-radius:12px; cursor:pointer; font-size:15px;}
  .overlay-title{font-weight:800; font-size:17px; text-shadow:0 2px 8px rgba(0,0,0,.5);}
  .overlay-body{flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:16px;}
  /* Closet interior */
  #overlay-closet{background:linear-gradient(#6b4a2f,#3d2817);}
  #closet-inner{width:88%; max-width:360px; background:#2b1d12; border:8px solid #1a110a; border-radius:12px; min-height:380px; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:20px; box-shadow:inset 0 0 60px rgba(0,0,0,.7);}
  #gift{cursor:grab; transition:transform .2s; text-align:center; position:relative; touch-action:none; width:190px; margin:0 auto;}
  #gift:active{cursor:grabbing;}
  #gift-art{position:relative; width:170px; height:170px; margin:0 auto;}
  #gift-box{position:absolute; inset:10px 15px; background:linear-gradient(#9c6b3f,#7a5230); border-radius:10px; border:4px solid #4a2c14;}
  #gift-box .tape-v{position:absolute; left:50%; top:0; bottom:0; width:18px; transform:translateX(-50%); background:#c9a100;}
  #gift-box .tape-h{position:absolute; top:50%; left:0; right:0; height:18px; transform:translateY(-50%); background:#c9a100;}
  #gift-paper{position:absolute; inset:10px 15px; border-radius:10px; overflow:hidden;}
  #gift-paper .strip{position:relative; height:20%; background:linear-gradient(90deg,#d63d3d,#e84545,#d63d3d); border-bottom:1px solid #a82a2a; transition:transform .45s ease, opacity .45s ease;}
  #gift-paper .strip i{position:absolute; left:50%; top:0; bottom:0; width:20px; transform:translateX(-50%); background:#ffd93d;}
  #gift-paper .strip.gone{transform:translateX(130%) rotate(10deg); opacity:0;}
  #gift-paper .strip:nth-child(even).gone{transform:translateX(-130%) rotate(-10deg); opacity:0;}
  #gift-bow{position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:42px; transition:transform .5s ease, opacity .5s ease; pointer-events:none;}
  #gift-bow.off{transform:translate(-50%,-70px) rotate(50deg); opacity:0;}
  #tear-meter{font-weight:800; margin-top:6px; font-size:14px;}
  #gift .ribbon{transition:all .8s;}
  #gift.unwrapping .ribbon{transform:translateY(-40px) rotate(20deg); opacity:0;}
  #gift .wrap{transition:all .8s; transform-origin:left center;}
  #gift.unwrapping .wrap{transform:perspective(400px) rotateY(-80deg); opacity:0;}
  #lockbox-wrap{display:none; text-align:center; width:100%;}
  #lockbox-wrap.show{display:block; animation:pop .5s;}
  @keyframes pop{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
  #lockbox{cursor:pointer; transition:transform .15s;}
  #lockbox:active{transform:scale(.97);}
  .riddle{margin-top:12px; background:#f5e6c8; color:#4a3517; font-style:italic; font-size:14px; line-height:1.5; padding:12px 14px; border-radius:10px; border:2px dashed #a07d3a;}
  #open-keypad-btn{margin-top:14px; background:#ffd93d; border:3px solid #4a3517; color:#4a3517; font-weight:900; font-size:17px; padding:12px 22px; border-radius:14px; cursor:pointer;}
  /* Drawer */
  #overlay-drawer{background:rgba(10,10,25,.92);}
  #drawer-box{width:88%; max-width:360px; background:#8a5a33; border-radius:16px; padding:22px; border:6px solid #5d3a1e; text-align:center;}
  #flashlight-item{cursor:pointer; background:#222; border-radius:14px; padding:18px; margin-top:12px; border:3px solid #555; transition:transform .15s;}
  #flashlight-item:active{transform:scale(.95);}
  #flashlight-item.taken{opacity:.3; pointer-events:none;}
  /* Ceiling — bright & clear when lamp is on, starfield only in the dark */
  #overlay-ceiling{background:#f2ebdc; transition:background .5s;}
  #overlay-ceiling.lights-off{background:#05061a;}
  #overlay-ceiling.lights-off:not(.sealed){background:#2b3352;}
  #overlay-ceiling .overlay-title{color:#333; text-shadow:none;}
  #overlay-ceiling.lights-off .overlay-title{color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5);}
  #overlay-ceiling .back-btn{box-shadow:0 2px 10px rgba(0,0,0,.2);}
  #stars-field{position:absolute; inset:0;}
  .g-star{position:absolute; border-radius:50%; opacity:.07; transition:opacity .5s; background:radial-gradient(circle,#b9b2a4 0%,transparent 70%);}
  #overlay-ceiling.lights-off.sealed .g-star{opacity:1; background:radial-gradient(circle,#d6ffe0 0%,#7bff9e 40%,transparent 70%); animation:twinkle 2s infinite alternate;}
  @keyframes twinkle{from{filter:brightness(.8)}to{filter:brightness(1.4)}}
  /* Ceiling lamp — the only thing visible with the lights on */
  #bulb-wrap{position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); text-align:center; transition:opacity .4s;}
  #overlay-ceiling.lights-off #bulb-wrap{opacity:.25; filter:saturate(.4) brightness(.7);}
  #bulb-glow{position:absolute; left:50%; top:30%; width:280px; height:280px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,240,180,.9) 0%,rgba(255,240,180,.25) 45%,transparent 70%); pointer-events:none;}
  #overlay-ceiling.lights-off #bulb-glow{opacity:0;}
  /* Hidden marks stay invisible unless it is truly dark, no matter what */
  #overlay-ceiling:not(.lights-off.sealed) :is(.c-star,.c-line,.uv-digit,.uv-link){opacity:0 !important;}
  #scan-status{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); max-width:92%; text-align:center; background:rgba(0,0,0,.07); color:#333; padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; z-index:6; pointer-events:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #overlay-ceiling.lights-off #scan-status{background:rgba(255,255,255,.12); color:#fff;}
  /* UV spotlight global */
  #uv-spotlight{
    position:absolute; width:190px; height:190px; border-radius:50%; pointer-events:none; z-index:90;
    background:radial-gradient(circle, rgba(180,120,255,.55) 0%, rgba(123,47,247,.35) 35%, rgba(123,47,247,.12) 60%, transparent 72%);
    border:2px solid rgba(200,150,255,.6); box-shadow:0 0 40px rgba(150,80,255,.6), inset 0 0 40px rgba(150,80,255,.3);
    display:none; transform:translate(-50%,-50%);
  }
  #uv-spotlight.on{display:block;}
  /* Welcome note */
  #welcome{position:absolute; inset:0; z-index:200; background:rgba(10,10,25,.65); display:flex; align-items:center; justify-content:center; padding:20px; transition:opacity .4s;}
  #welcome.hidden-view{opacity:0; pointer-events:none;}
  #note-paper{background:#fffbe8; color:#3a2f1a; width:100%; max-width:360px; border-radius:6px; padding:28px 24px; transform:rotate(-1.5deg); box-shadow:0 12px 40px rgba(0,0,0,.5); position:relative; font-family:'Segoe Print','Comic Sans MS',cursive;}
  #note-paper::before{content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(3deg); width:110px; height:28px; background:rgba(255,217,61,.85); box-shadow:0 2px 5px rgba(0,0,0,.2);}
  #note-paper h2{text-align:center; font-size:20px; letter-spacing:1px; margin-bottom:10px;}
  #note-paper p{font-size:16px; line-height:1.65;}
  #note-paper .tap-hint{margin-top:14px; text-align:center; font-size:13px; font-weight:800; background:#3a2f1a; color:#fffbe8; padding:8px; border-radius:8px; animation:bob2 1.4s infinite;}
  @keyframes bob2{0%,100%{opacity:1}50%{opacity:.6}}
  /* Generic modal */
  .modal{position:absolute; inset:0; z-index:150; background:rgba(5,5,15,.75); display:flex; align-items:center; justify-content:center; padding:18px; transition:opacity .3s;}
  .modal.hidden-view{opacity:0; pointer-events:none;}
  .card{background:#fff; color:#222; border-radius:20px; padding:22px; width:100%; max-width:340px; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.5);}
  .card h3{margin-bottom:10px;}
  /* Keypad */
  #keypad-dots{display:flex; gap:10px; justify-content:center; margin:14px 0;}
  .dot{width:22px; height:22px; border-radius:50%; border:3px solid #333; background:#eee;}
  .dot.filled{background:#7b2ff7; border-color:#7b2ff7;}
  #keypad-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px;}
  #keypad-grid button{padding:16px; font-size:22px; font-weight:900; border-radius:14px; border:2px solid #ddd; background:#f5f5f5; cursor:pointer;}
  #keypad-grid button:active{background:#7b2ff7; color:#fff; transform:scale(.93);}
  /* Hint modal */
  #hint-text{background:#fff8dc; border-radius:12px; padding:14px; font-size:15px; line-height:1.5; min-height:70px; color:#333; margin:10px 0;}
  /* Dialog close buttons */
  .overlay-header .spacer{flex:1;}
  .close-btn{border:none; background:rgba(255,255,255,.92); color:#222; font-weight:900; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; flex:none; box-shadow:0 2px 10px rgba(0,0,0,.25);}
  .close-btn:active{transform:scale(.9);}
  .card{position:relative;}
  .card .close-btn{position:absolute; top:10px; right:10px; width:32px; height:32px; font-size:14px;}
  #reveal-close{position:absolute; top:12px; right:12px; z-index:5;}
  /* Inspect (close-up look) overlay */
  #overlay-inspect{background:rgba(10,10,25,.92);}
  #inspect-box{width:88%; max-width:340px; background:#f7f1e3; color:#333; border-radius:16px; padding:20px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.5); animation:pop .35s;}
  #inspect-box .flavor{font-size:14px; line-height:1.5; margin-top:10px; color:#5a4a33;}
  #inspect-art{transition:transform .3s; cursor:pointer;}
  #inspect-art.tilted{transform:rotate(-5deg);}
  .lift-stage{position:relative; height:150px; cursor:pointer;}
  .lift-rug{position:absolute; left:10px; right:10px; top:20px; bottom:20px; background:#ff9d9d; border:6px solid #ff7b7b; border-radius:50%; transition:transform .4s; z-index:2;}
  .lift-rug::after{content:''; position:absolute; inset:10px; border:3px dashed #fff; border-radius:50%;}
  .lift-bed{position:absolute; left:6px; right:6px; top:24px; bottom:24px; background:#ff6b81; border:6px solid #c94f63; border-radius:16px; transition:transform .4s; z-index:2; display:flex; align-items:center; justify-content:center; font-size:44px;}
  .lift-stage.lifted .lift-rug, .lift-stage.lifted .lift-bed{transform:translateY(-36px) rotate(-7deg);}
  .lift-under{position:absolute; left:0; right:0; bottom:6px; text-align:center; opacity:0; transition:opacity .4s;}
  .lift-stage.lifted .lift-under{opacity:1;}
  .ipop{display:inline-block; transition:transform .2s;}
  .ipop.pop{animation:ipop .45s ease;}
  @keyframes ipop{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}
  #plant-big{position:relative; display:inline-block; font-size:96px; cursor:pointer; transform-origin:bottom center;}
  /* (no visible bed game — taps shove the bed directly) */
  #ladybug{position:absolute; left:18%; top:30%; font-size:26px; display:none;}
  /* Reveal */
  #overlay-reveal{background:radial-gradient(circle at 50% 30%,#ff9ecb,#7b2ff7 60%,#1a1b3a); z-index:180; text-align:center;}
  #reveal-photo{width:82%; max-width:320px; background:#fff; padding:10px 10px 14px; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); transform:translateY(120px) scale(.5); opacity:0; transition:all 1s cubic-bezier(.2,1.4,.4,1);}
  #overlay-reveal.show-photo #reveal-photo{transform:translateY(0) scale(1); opacity:1;}
  #reveal-banner{margin-top:16px; opacity:0; transform:scale(.8); transition:all .8s .5s;}
  #overlay-reveal.show-photo #reveal-banner{opacity:1; transform:scale(1);}
  #reveal-banner h1{font-size:32px; letter-spacing:2px; color:#ffe93d; text-shadow:0 3px 0 #c44,0 0 24px rgba(255,255,255,.6);}
  #reveal-banner p{font-size:16px; font-weight:800; margin-top:6px; line-height:1.5;}
  #due-badge{display:inline-block; margin-top:10px; background:#fff; color:#d6336c; font-weight:900; padding:10px 18px; border-radius:999px; font-size:16px;}
  #confetti-canvas{position:absolute; inset:0; pointer-events:none;}
  .btn-row{display:flex; gap:10px; margin-top:12px;}
  .btn-row button{flex:1; padding:12px; border-radius:12px; border:none; font-weight:800; font-size:15px; cursor:pointer;}

/* Storybook visual system: peach plaster, teal joinery, honey oak, paper. */
:root{--ink:#254945;--teal:#245d58;--deep:#183d3b;--peach:#f3d4bb;--paper:#fff9eb;--gold:#edc46c;--muted:#6e8176;--line:#d9dfcc;--coral:#d77963;}
html,body{position:relative;min-height:100%;height:100%;font-family:'Avenir Next','Trebuchet MS',sans-serif;background:#183d3b;color:var(--ink);touch-action:manipulation;}
body{background:radial-gradient(ellipse at 50% 40%,#34655c 0,#183d3b 72%);}
button{font:inherit;color:inherit;touch-action:manipulation;}
button,[role="button"]{-webkit-tap-highlight-color:transparent;}
button:focus-visible,[role="button"]:focus-visible{outline:3px solid #c78330;outline-offset:5px;}
button:disabled{opacity:.45;cursor:default;}
.hidden-view{visibility:hidden;}
.sprite{display:block;width:100%;background-image:url('assets/room-atlas.webp');background-repeat:no-repeat;pointer-events:none;}
.icon{width:22px;height:22px;display:block;flex:none;}
#phone-wrap{max-width:480px;background:var(--paper);box-shadow:0 28px 90px #072e3270;isolation:isolate;}
#masthead{position:relative;display:flex;align-items:center;gap:10px;padding:18px 20px 12px;padding-top:max(18px,env(safe-area-inset-top));background:var(--paper);z-index:61;}
.brand-symbol{width:38px;height:44px;display:grid;place-items:center;background:var(--teal);color:var(--gold);border-radius:20px 20px 11px 11px;font-size:29px;box-shadow:inset 0 0 0 4px #ffffff12;}
.brand>span{display:block;font-family:Georgia,serif;font-weight:700;font-size:25px;letter-spacing:-1px;line-height:1.1;}
.brand small{display:block;font-size:10px;color:var(--muted);margin-top:5px;letter-spacing:.2px;}
#hud{position:absolute;right:15px;top:max(22px,env(safe-area-inset-top));padding:0;gap:6px;background:none;border:0;z-index:62;}
#hud button{width:34px;height:36px;border:1px solid #d9dfcc;background:#f6f3e6;border-radius:11px;color:var(--teal);box-shadow:0 2px 0 #d9dfcc;padding:7px;justify-content:center;}
#hud #btn-lang{font-size:10px;font-weight:900;}
#spacer{display:none;}
#stage{min-height:0;border-top:1px solid #e3d7bc;isolation:isolate;}
#room-caption{position:absolute;top:22px;left:0;right:0;text-align:center;z-index:12;pointer-events:none;}
#room-name{display:block;font-family:Georgia,serif;font-size:24px;font-weight:bold;letter-spacing:-.7px;}
#room-instruction{display:block;margin-top:6px;color:#6d796a;font-size:11px;}
#room-caption.is-covered{visibility:hidden;}
#view-room,#view-left,#view-right{background:linear-gradient(#f5dac2,#f5dac2 44%,#99b5a2 44%,#99b5a2 64%,#c4a072 64%,#dec39a 100%);transition:transform .45s ease;filter:none;}
.roomview::before{content:'';position:absolute;inset:44% 0 36%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 3px),#6e978c60 calc(20% - 3px),#c9d5b760 20%);border-top:8px solid #bdd0b7;border-bottom:10px solid #567c70;box-shadow:0 -2px #7d9c86,0 4px 0 #3e695952,0 9px 12px #5f4b3520;pointer-events:none;}
.roomview::after{content:'';position:absolute;left:-30%;right:-30%;top:64%;bottom:-55%;background:repeating-linear-gradient(90deg,transparent 0,transparent 85px,#8765482e 86px,#fff0d438 88px),repeating-linear-gradient(0deg,transparent 0,transparent 86px,#86674922 87px,transparent 89px);transform:perspective(160px) rotateX(30deg);transform-origin:top;pointer-events:none;}
.floor-line{display:none;}
#view-room.night,#view-left.night,#view-right.night{background:linear-gradient(#8b9090 0 44%,#456465 44% 64%,#6a6961 64%,#7d7b6a);filter:none;}
#view-room.shaded,#view-left.shaded,#view-right.shaded{filter:brightness(.9);}
#view-room.night .day-only,.roomview.night .day-only{opacity:.65;}
#room-dim,.roomview .room-dim{z-index:6;background:#101d33;}
#view-room.night #room-dim,.roomview.night .room-dim{opacity:.8;}
#view-room.night.beam #room-dim,.roomview.night.beam .room-dim{opacity:.35;}
.moonbeam{z-index:7;}
.scene-object{padding:0;border:0;background:none;cursor:pointer;display:block;filter:drop-shadow(0 7px 3px #624d3026);line-height:0;z-index:3;}
.scene-object .sprite{width:100%;}
.scene-object:active{filter:drop-shadow(0 2px 1px #624d3030) brightness(1.04);}
#bed{left:4%;bottom:12%;width:57%;z-index:4;transition:translate .4s ease;}
#closet{right:5%;top:auto;bottom:27%;width:34%;height:auto;filter:drop-shadow(4px 8px 3px #654a3028);}
#frame{position:absolute;left:8%;top:21%;width:24%;rotate:-5deg;transition:rotate .5s ease;}
#frame.straight{rotate:0deg;}
#poster{position:absolute;top:22%;right:33%;width:25%;padding:12px 4px 9px;background:#fff7dd;border:1px solid #d3b68b;border-radius:2px;rotate:5deg;font-family:Georgia,serif;font-size:12px;font-style:italic;line-height:1.25;box-shadow:0 4px 5px #68513515;z-index:2;}
#poster::before{content:'';position:absolute;width:28px;height:10px;background:#ddb87399;top:-6px;left:calc(50% - 14px);rotate:-5deg;}
#poster span{color:#ba745f;}
#rug{left:49%;bottom:8%;width:77%;height:14%;max-height:112px;border:8px solid #aa614a;background:repeating-radial-gradient(ellipse at center,#c88967 0 4px,#dcaa7c 5px 7px,#c88967 8px 11px);box-shadow:0 5px 1px #8a634629;opacity:1;z-index:2;}
#rug::after{inset:8px;border:3px solid #f1c997;}
#lightswitch{top:49%;left:44%;width:37px;height:55px;border:2px solid #baa782;border-radius:7px;background:#fff6da;box-shadow:0 3px 0 #b3997a;z-index:5;}
#lightswitch small{font-size:7px;color:#576759;}
#lightswitch small:first-child{display:none;}
#lightswitch .toggle{height:27px;width:19px;background:#e6c37b;border:1px solid #bb9458;}
#lightswitch .toggle::after{background:#fff0c7;box-shadow:0 1px 2px #77633d60;height:10px;}
#lookup-btn{top:13%;padding:7px 11px;background:#fff9ebd9;color:#496f62;border:1px solid #d7c3a5;font-size:10px;box-shadow:0 2px 0 #c7b697;border-radius:20px;animation:none;display:flex;align-items:center;gap:5px;}
#lookup-btn .icon{width:13px;height:13px;}
.nav-arrow{top:auto;bottom:18px;width:45px;height:41px;background:#fff7e5;border:1px solid #b79d70;border-radius:15px;color:var(--teal);box-shadow:0 3px 0 #b39365;display:grid;place-items:center;}
#nav-left{left:23px;}#nav-right{right:23px;}
.nav-arrow .icon{margin:auto;}
#view-dots{bottom:39px;gap:7px;}
#view-dots span{width:6px;height:6px;background:#9b936e;box-shadow:none;}
#view-dots span.on{width:20px;border-radius:6px;background:var(--teal);}
#room-page{position:absolute;z-index:30;bottom:19px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;color:#6c725c;}
#window{top:23%;width:64%;max-width:290px;aspect-ratio:1.05;background:#be8d54;border:3px solid #977342;border-radius:70px 70px 6px 6px;padding:10px;box-shadow:0 7px 0 #946e44,0 11px 14px #71594035;z-index:3;}
#window-frame{border-radius:55px 55px 0 0;background:linear-gradient(#add8cf 0 62%,#a4c394 62% 100%);border:3px solid #f9e9c8;}
#window-glass{touch-action:manipulation;}
.mullion-v,.mullion-h{background:#fcf0ce;box-shadow:1px 1px 0 #b29d74;}
.curtain,.bcurtain{background:repeating-linear-gradient(90deg,#c77865 0 9px,#d79177 10px 19px,#bb6f5c 20px 26px);box-shadow:3px 3px 5px #5e443a20;animation:none;}
.curtain{top:-7px;bottom:-3px;width:18%;border-radius:13px 13px 30px 6px;}
.curtain.right{border-radius:13px 13px 6px 30px;}
#window::before{content:'';position:absolute;top:-11px;left:-19px;right:-19px;height:7px;border-radius:8px;background:#785c3d;box-shadow:0 2px 0 #ba975f;}
#sill{width:70%;height:12px;left:50%;bottom:auto;top:calc(23% + min(61vw, 275px));background:#d8ae74;border:1px solid #a98453;z-index:3;display:none;}
#plant{width:33%;left:62%;bottom:18%;font-size:0;z-index:4;}
#shelf{left:7%;top:auto;bottom:31%;width:42%;filter:drop-shadow(3px 8px 3px #624d3026);}
#poster2{right:10%;top:22%;width:25%;rotate:3deg;}
#view-right #nightstand{right:8%;top:auto;bottom:27%;width:36%;filter:drop-shadow(3px 7px 3px #624d3026);}
#nightstand-art{width:100%;}
#drawer-top,#drawer-bottom{position:absolute;left:10%;right:9%;height:28%;border:0;border-radius:6px;background:transparent;color:transparent;}
#drawer-top{top:23%;}#drawer-bottom{top:54%;}
#drawer-top.unlocked::after,#drawer-bottom.unlocked::after{content:'✓';position:absolute;right:6%;top:9%;font-size:16px;line-height:1;color:#315b43;background:#fbe7a5;border-radius:50%;padding:2px;}
#can{right:12%;bottom:13%;width:22%;height:auto;z-index:4;}
#inventory{display:block;padding:12px 20px max(16px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid #e1ccaa;z-index:55;box-shadow:0 -4px 15px #82644712;}
#inventory-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
#inv-label{font-size:12px;font-weight:800;letter-spacing:0;opacity:1;color:#375c50;}
#inventory-tip{font-size:9px;color:#6f7c6b;}
#inventory-slots{display:flex;gap:8px;align-items:stretch;height:55px;}
#uv-btn{font-size:11px;flex:1;padding:7px 12px;border:1px dashed #b3bba2;background:#eeeddd;border-radius:12px;color:#76816d;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:none;}
#uv-btn .icon{opacity:.55;}
#uv-btn .sprite{width:38px;flex:none;}
#uv-btn.has-tool{background:#e5ecdf;border:1px solid #a1b8a0;color:#305c4f;}
#uv-btn.uv-on{background:#ded4f0;border-color:#ac90d3;color:#62458d;box-shadow:inset 0 0 16px #b28be740;}
#key-btn,#can-btn{height:55px;width:57px;flex:none;background:#f7edd4;border:1px solid #d7c096;border-radius:12px;padding:7px;}
#key-btn .sprite,#can-btn .sprite{width:100%;}
#key-btn[aria-pressed="true"],#can-btn[aria-pressed="true"]{outline:2px solid var(--teal);outline-offset:2px;background:#dfebd8;}
#key-drag,#can-drag{width:60px;height:auto;}
#toast{bottom:125px;background:var(--deep);border:1px solid #668977;color:#fff8e2;padding:12px 17px;font-size:12px;line-height:1.4;border-radius:13px;max-width:85%;width:max-content;box-shadow:0 6px 15px #153d3b33;z-index:220;}
.overlay{color:var(--paper);z-index:40;}
.overlay-header{padding:14px 18px;min-height:66px;background:#143b3a20;border-bottom:1px solid #ffffff15;}
.overlay-title{font-size:15px;font-weight:700;text-shadow:none;}
.back-btn,.close-btn{background:var(--paper);color:var(--teal);border:1px solid #d6c9a7;box-shadow:0 2px 0 #133b3626;}
.back-btn{border-radius:10px;font-size:12px;padding:9px 12px;min-height:40px;}
.close-btn{border-radius:12px;width:40px;height:40px;font-size:16px;}
.overlay-body{padding:20px;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;}
#overlay-closet{background:linear-gradient(135deg,#46716b,#254b47);}
#closet-inner{width:100%;min-height:0;max-width:355px;padding:28px 18px;border:9px solid #b78953;border-radius:90px 90px 13px 13px;background:repeating-linear-gradient(90deg,transparent 0,transparent 70px,#38291320 71px),linear-gradient(#574431,#776042);box-shadow:inset 0 7px 25px #312a2440,0 7px 0 #193b3260;}
#gift{width:100%;max-width:230px;}
#gift-art{width:205px;height:225px;max-width:100%;}
#gift-illustration{position:absolute;inset:0;transition:clip-path .3s;}
#gift-box,#gift-paper,#gift-bow{display:none;}
#tear-meter{font-size:12px!important;line-height:1.55;font-weight:600!important;color:#ffecc9;}
#lockbox{position:relative;width:190px;max-width:80%;margin:0 auto;}
.riddle{font-family:Georgia,serif;font-size:14px;line-height:1.65;background:#fff0cc;color:#6e5435;border:0;border-radius:3px 12px 12px 3px;padding:16px;margin-top:18px;box-shadow:-3px 0 #c4a466;}
#open-keypad-btn{background:#ecc477;color:#4e5037;border:1px solid #ffe6aa;border-radius:12px;box-shadow:0 4px 0 #a98048;font-size:14px;padding:11px 22px;margin:18px 0 5px;}
#overlay-inspect,#overlay-drawer{background:#274e49f5;}
#inspect-box{width:100%;background:var(--paper);color:var(--ink);border-radius:18px;padding:25px 22px;box-shadow:0 7px 0 #193c3740;}
#inspect-box .flavor{font-size:13px;color:#6a725a;line-height:1.6;}
.inspect-sprite{width:75%;max-width:220px;margin:0 auto 15px;}
#plant-big{width:200px;max-width:85%;font-size:0;}
#plant-big .sprite{width:100%;}
.lift-stage{height:190px;}
.lift-rug{top:25px;bottom:45px;border-color:#ab7151;background:repeating-radial-gradient(ellipse at center,#c58d66 0 5px,#dfb68a 6px 9px);}
.lift-rug::after{border:2px solid #f5d7a6;}
.lift-stage.lifted .lift-rug{transform:translateY(-70px) rotate(-12deg);pointer-events:none;}
.lift-under{bottom:0;pointer-events:none;}
.lift-stage.lifted .lift-under{pointer-events:auto;}
#rug-key{display:block;width:65px;margin:0 auto;border:0;background:none;}
#drawer-box{width:100%;background:#a67f50;border-color:#cfaa70;border-width:7px;border-radius:17px;padding:23px;box-shadow:inset 0 6px 20px #503a2c40,0 6px 0 #193b3240;}
#drawer-name{color:#fff0d6;font-family:Georgia,serif;font-size:20px;}
#flashlight-item,#drawer-empty{background:#796243!important;border:1px solid #c8a675!important;border-radius:11px!important;color:#fff3d9;}
#flashlight-item .sprite{width:135px;margin:0 auto 8px;}
#overlay-window{background:#46716b;}
#zoom-scene{max-height:85%;width:auto;max-width:100%;border-color:#c39a60;border-radius:65px 65px 8px 8px;background:linear-gradient(#acd5c9 0 58%,#b1ce9a 58%);box-shadow:0 7px 0 #2b4e4250;}
#overlay-ceiling{background:radial-gradient(ellipse at 50% 30%,#fff8de,#e5d7b7);}
#scan-status{left:20px;right:20px;bottom:25px;transform:none;max-width:none;white-space:normal;overflow-wrap:anywhere;line-height:1.5;background:#fff8e7e8;color:#526754;border:1px solid #c7caae;border-radius:12px;text-shadow:none;padding:12px;font-size:12px;}
#overlay-ceiling.lights-off #scan-status{background:#203638e0;color:#c0d9bf;border-color:#42625b;}
#uv-spotlight{mix-blend-mode:screen;opacity:.7;}
#welcome{padding:26px;background:#193f3bd9;backdrop-filter:blur(7px);}
#note-paper{max-width:355px;background:#fff5df;border:1px solid #efd7ac;border-radius:110px 110px 22px 22px;padding:30px 26px 23px;transform:none;box-shadow:0 10px 0 #102f3540,0 25px 60px #092e3040;font-family:inherit;text-align:center;}
#note-paper::before{display:none;}
#welcome-art{width:133px;margin:0 auto 20px;filter:drop-shadow(0 5px 0 #dcba8529);}
#note-paper h2{font-family:Georgia,serif;font-size:36px;letter-spacing:-1.8px;line-height:1.08;color:#244f46;margin:0 auto 18px;max-width:265px;white-space:pre-line;}
#note-paper p{font-size:13px;line-height:1.7;color:#68715b;margin:0 0 7px;}
#note-paper .tap-hint{display:block;width:100%;padding:15px;border:1px solid #49715c;box-shadow:0 4px 0 #123f35;border-radius:12px;background:#2c6150;color:#fff7df;font-size:14px;font-weight:700;margin:23px 0 17px;animation:none;}
#welcome-footer{font-size:9px;color:#8b8970;}
.welcome-spark{position:absolute;color:#d5ab57;}
.spark-one{top:86px;left:35px;font-size:29px;rotate:-12deg;}
.spark-two{top:133px;right:36px;font-size:22px;}
.modal{background:#173e3bcc;backdrop-filter:blur(5px);padding:22px;}
.card{background:var(--paper);color:var(--ink);border:1px solid #e6d5af;box-shadow:0 7px 0 #153c3a50;border-radius:24px;padding:26px 22px;max-width:350px;max-height:calc(100dvh - 35px);overflow:auto;touch-action:pan-y;}
.card h3{font-family:Georgia,serif;font-size:23px;letter-spacing:-.7px;padding:10px 15px;}
.card .close-btn{width:32px;height:32px;font-size:12px;border-radius:50%;}
#keypad-dots{gap:10px;margin:20px 0;}
.dot{border-radius:10px;width:39px;height:44px;border:1px solid #c2c8ae;background:#eeeedd;display:grid;place-items:center;color:var(--teal);font-size:24px;font-weight:bold;}
.dot.filled{background:#d8e4ce;border-color:#88a488;}
#keypad-grid{gap:8px;}
#keypad-grid button{padding:11px;font-size:21px;color:#416653;border:1px solid #d5d6bd;box-shadow:0 3px 0 #d2d3b9;background:#f5f0dc;border-radius:11px;min-height:47px;}
#keypad-grid button:active{background:#dae7cd;color:#2b5d4d;}
.btn-row button{font-size:12px;background:#e7e9d6!important;color:#375e50!important;border:1px solid #c7cdb2;min-height:40px;border-radius:10px;}
#hint-next{background:var(--teal)!important;color:var(--paper)!important;}
#hint-text{background:#f0e9cc;color:#5d694f;font-size:14px;padding:20px;text-align:left;border-radius:12px;line-height:1.75;}
#hint-count{display:block;font-family:inherit;font-size:11px;letter-spacing:1px;color:#8e9677;margin-top:8px;}
#overlay-reveal{background:radial-gradient(ellipse at 50% 20%,#527e68,#254f48 80%);}
#overlay-reveal .overlay-body{padding:24px;justify-content:center;}
#reveal-photo{width:80%;max-width:285px;padding:10px;background:#fff6e2;border-radius:8px;box-shadow:0 8px 0 #133d3620,0 15px 40px #12362e30;}
#reveal-banner{margin-top:27px;width:100%;}
#reveal-banner h1{font-family:Georgia,serif;font-size:42px;font-weight:700;letter-spacing:-1.8px;color:#ffe7ac;text-shadow:none;}
#reveal-banner p{font-size:16px;line-height:1.65;font-weight:500;color:#fff7df;margin-top:12px;}
#due-badge{background:#f9e8bb;color:#516643;border:1px solid #fef6d5;border-radius:8px;font-size:12px;padding:12px 18px;margin-top:21px;letter-spacing:.3px;}
#btn-replay{background:#ffffff12!important;color:#ebefce!important;border:1px solid #bbcea155;max-width:190px;margin:10px auto 0;}
@media(min-width:560px){#phone-wrap{height:min(94dvh,940px);border:5px solid #57786b;border-radius:29px;}body{display:flex;align-items:center;justify-content:center;}#masthead{padding-top:20px;}#hud{top:23px;}}
@media(max-width:380px){.brand>span{font-size:21px;}.brand small{font-size:8px;}.brand-symbol{width:30px;height:37px;font-size:23px;}#masthead{padding-left:14px;gap:7px;}#hud{right:11px;gap:4px;}#hud button{width:30px;height:33px;padding:6px;}#inventory-tip{font-size:8px;}#room-name{font-size:22px;}#poster{font-size:10px;}#note-paper h2{font-size:31px;}}
@media(max-height:720px){#masthead{padding-top:12px;padding-bottom:10px;}#hud{top:15px;}#inventory{padding-top:9px;padding-bottom:max(11px,env(safe-area-inset-bottom));}#inventory-heading{margin-bottom:6px;}#inventory-slots,#key-btn,#can-btn{height:47px;}#room-caption{top:14px;}#room-name{font-size:22px;}#room-instruction{font-size:10px;}#lookup-btn{top:15%;}#closet{width:30%;}#bed{width:51%;}#shelf{width:35%;}#window{width:55%;top:26%;}#plant{width:28%;}#note-paper{padding-top:22px;padding-bottom:19px;}#welcome-art{width:95px;margin-bottom:14px;}#note-paper h2{font-size:31px;}#reveal-photo{max-width:210px;}#reveal-banner{margin-top:16px;}#reveal-banner h1{font-size:32px;}#reveal-banner p{font-size:14px;}#due-badge{margin-top:13px;}#closet-inner{padding:18px 14px;}#gift-art{width:150px;height:164px;}#lockbox{width:145px;}.riddle{font-size:12px;padding:12px;margin-top:12px;}#open-keypad-btn{margin-top:12px;}}
@media(max-height:520px) and (orientation:landscape){body{overflow:auto;}#phone-wrap{height:720px;min-height:720px;margin:0 auto;border-radius:0;}#welcome{position:fixed;}#note-paper{max-width:480px;padding:20px;border-radius:25px;}#welcome-art{width:70px;float:left;margin:25px 20px;}#note-paper h2{font-size:25px;white-space:normal;}#welcome-footer{display:none;}.card{max-height:95dvh;}#reveal-photo{max-width:170px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}#reveal-photo,#reveal-banner{transition:none!important;}}
/* Final sizing refinements from phone previews. */
.brand>span{font-size:20px;letter-spacing:-.7px;}
#bed .sprite{clip-path:polygon(0 0,100% 0,100% 100%,77% 100%,77% 95%,29% 95%,29% 100%,0 100%);}
.reveal-caption{font-family:Georgia,serif;font-style:italic;color:#6e7b5d;font-size:11px;padding:9px 2px 3px;}
#inspect-art{width:210px;max-width:100%;margin:auto;}
#plant-big:focus-visible{outline-offset:6px;}
#hint-prev:disabled,#hint-next:disabled{opacity:.4;}
@media(min-width:430px){.brand>span{font-size:25px;}}
@media(max-width:380px){.brand>span{font-size:17px;letter-spacing:-.6px;}.brand small{font-size:8px;}}
@media(max-width:380px){.brand small{display:none;}}
#overlay-reveal .overlay-body{justify-content:safe center;}
#gift-illustration{pointer-events:none;}
#gift-box{display:block;inset:auto 10px 22px;background:none;border:0;border-radius:0;}
#gift-illustration{z-index:1;}
#plant>.sprite,#plant-big>.sprite{clip-path:polygon(0 0,85% 0,85% 10%,100% 10%,100% 100%,0 100%);}
#window-landscape,#zoom-landscape{position:absolute;inset:0;overflow:hidden;}
#window-landscape .sprite,#zoom-landscape .sprite{position:absolute;inset:0;height:100%;}
#cozy-card{background:#f8e8c5!important;color:#54745c;border:1px solid #ccb18c!important;font-family:Georgia,serif;font-style:italic;rotate:3deg;padding:28px 18px!important;}
#zoom-scene{width:min(100%,340px);flex:none;max-height:calc(100% - 8px);}
#gift-box{inset:auto 17% 25px;}
/* Unwrapping: the intact gift is swapped for its torn paper pieces on the first tear, and each
   piece rips away (the bow lifts off) to reveal the lockbox underneath. */
/* The chest sits fully inside the gift's outline and below the bow's tear line, so nothing pokes out
   as the paper comes off. The gift is drawn at full width, so margin-top (a % of width) tracks its height. */
#gift-box{inset:0 auto auto 13.6%;width:68.3%;margin-top:45.6%;}
#gift:not(.torn) #gift-box{visibility:hidden;}
#gift-paper{display:block;position:absolute;inset:0;z-index:1;overflow:visible;border-radius:0;pointer-events:none;}
#gift-paper .paper{position:absolute;inset:0;transform-origin:var(--ox) var(--oy);}
#gift:not(.torn) .paper,#gift.torn #gift-illustration{visibility:hidden;}
#gift-paper .paper.peel{animation:peel .7s cubic-bezier(.4,.1,.7,1) forwards;}
#gift-paper .paper[data-part="bow"].peel{animation-name:untie;}
#gift-paper .paper.gone{display:none;}
@keyframes peel{
  30%{transform:perspective(420px) translate(calc(var(--dir)*10px),-10px) rotateY(calc(var(--dir)*-35deg)) rotate(calc(var(--dir)*5deg));filter:brightness(1.08) drop-shadow(0 6px 4px #0004);}
  100%{transform:perspective(420px) translate(calc(var(--dir)*130px),70px) rotateY(calc(var(--dir)*-85deg)) rotate(calc(var(--dir)*30deg));opacity:0;}
}
@keyframes untie{
  30%{transform:translateY(-22px) rotate(calc(var(--dir)*-8deg)) scale(1.05);}
  100%{transform:translate(calc(var(--dir)*40px),-110px) rotate(calc(var(--dir)*35deg)) scale(.85);opacity:0;}
}
/* Bookshelf close-up: the compartment art is a 9-slice frame, so it can be taller than the painting.
   Books stand on its floor; a small hatch in the back panel hides the bookmark. */
#shelf-niche{position:relative;width:100%;aspect-ratio:1.48;border:1px solid transparent;border-image:url(assets/shelf-niche.webp) 72 96 105 95 fill / 10.5% 9.6% 15.2% 9.4% stretch;}
#shelf-books{position:absolute;left:9.4%;right:9.6%;bottom:11%;height:76%;display:flex;align-items:flex-end;justify-content:center;gap:1.6%;}
.shelf-book{flex:none;padding:0;border:0;background:none;line-height:0;cursor:grab;touch-action:none;filter:drop-shadow(1px 3px 2px #3a1f0d55);transition:translate .2s ease;}
.shelf-book .sprite{width:100%;}
.shelf-book.out{translate:0 -12px;}
.shelf-book.dragging{cursor:grabbing;transition:none;z-index:2;filter:drop-shadow(2px 9px 5px #3a1f0d70);}
#shelf-niche.solved .shelf-book{cursor:pointer;}
#shelf-hatch{position:absolute;left:13%;top:15%;width:24%;height:19%;perspective:300px;}
#shelf-cavity{position:absolute;inset:0;border-radius:3px;background:linear-gradient(#24130a,#43260f);box-shadow:inset 0 4px 8px #000b;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
#shelf-cavity .sprite{width:30%;translate:0 70%;transition:translate .6s .4s ease;}
#shelf-door{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,#8d4716,#a3561f 50%,#8d4716);box-shadow:inset 0 0 0 1px #5a2c0caa,inset 0 1px 2px #ffd9a045;transform-origin:left center;transition:transform .6s ease;}
#shelf-door::after{content:'';position:absolute;right:9%;top:50%;width:5px;height:5px;border-radius:50%;background:#d9a441;translate:0 -50%;}
#shelf-niche.solved #shelf-door{transform:rotateY(-105deg);}
#shelf-niche.solved #shelf-cavity .sprite{translate:0 10%;}
#shelf-clue{display:flex;gap:12px;align-items:center;text-align:left;}
#shelf-clue .sprite{width:34px;flex:none;}
/* Night at the window: lamp off means night outside, with a moon whose phase follows the sill dial. */
.night-sky{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none;background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 45% 14%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 46%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 34% 52%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 86% 20%,#fff 0 1px,transparent 1.5px),linear-gradient(#0f1c3e,#1d3160 70%,#24355a);}
.roomview.night .night-sky,#zoom-scene.night .night-sky{opacity:1;}
.moon{position:absolute;right:16%;top:12%;width:22%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff1c2;box-shadow:0 0 18px #fff1c270;}
.moon::after{content:'';position:absolute;inset:-3%;border-radius:50%;background:#132245;transform:translateX(var(--shadow,110%));transition:transform .5s ease;}
.shooting-star{position:absolute;left:8%;top:16%;width:70px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff0,#fff);opacity:0;rotate:20deg;}
.shooting-star.shoot{animation:shoot 1.1s ease-out;}
@keyframes shoot{0%{opacity:0;translate:0 0;}15%{opacity:1;}100%{opacity:0;translate:180px 70px;}}
#moon-wish{position:absolute;left:17%;right:17%;bottom:66px;z-index:4;margin:0;padding:8px 10px;border-radius:10px;background:#0f1c3ecc;text-align:center;font:italic 13px/1.45 Georgia,serif;color:#fff1c2;opacity:0;pointer-events:none;transition:opacity .6s ease;}
#zoom-scene.night.wished:not(.closed) #moon-wish{opacity:1;}
#moon-dial{position:absolute;left:50%;bottom:10px;translate:-50% 0;z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid #d6c9a7;background:var(--paper);color:#a2732b;box-shadow:0 3px 0 #133b3640;display:none;place-items:center;cursor:pointer;}
#moon-dial .icon{width:24px;height:24px;fill:#edc46c;}
#zoom-scene.night #moon-dial{display:grid;}
/* Bloom, wind-up key, music box and the hiding ladybug. */
.plant-bloom{position:absolute;left:50%;top:0;width:36%;pointer-events:none;}
#ladybug{width:34px;}
#bloom{display:block;position:absolute;left:50%;top:-4%;width:46%;transform:none;translate:-50% 0;font-size:0;padding:0;border:0;background:none;cursor:pointer;line-height:0;}
#bloom .sprite{width:100%;}
#bloom-key{position:absolute;left:56%;top:46%;width:60%;translate:-50% -50%;rotate:-25deg;filter:drop-shadow(0 2px 3px #0007);}
#musicbox{position:absolute;left:6%;bottom:15%;width:28%;z-index:4;}
#windkey-btn{display:none;height:55px;width:57px;flex:none;align-items:center;justify-content:center;background:#f7edd4;border:1px solid #d7c096;border-radius:12px;padding:9px;}
#windkey-btn .sprite{width:100%;}
#ladybug-hide{position:absolute;width:40px;height:40px;padding:7px;border:0;background:none;translate:-50% -50%;rotate:-20deg;z-index:5;cursor:pointer;filter:drop-shadow(0 2px 1px #0003);}
#ladybug-hide .sprite{width:100%;}
#ladybug-hide.flying{animation:flyaway .6s ease-in forwards;}
@keyframes flyaway{to{translate:calc(-50% + 40px) calc(-50% - 70px);scale:.5;opacity:0;rotate:30deg;}}
#music-box{width:200px;max-width:80%;margin:0 auto;cursor:pointer;}
#music-box .sprite{width:100%;}
#music-keys{display:flex;justify-content:center;gap:6px;margin-top:14px;}
.music-key{flex:1 1 0;min-width:0;max-width:50px;height:54px;border-radius:12px;border:1px solid #c2c8ae;background:#f5f0dc;box-shadow:0 3px 0 #d2d3b9;display:grid;place-items:center;cursor:pointer;transition:background .15s,translate .15s;}
.music-key .icon{width:24px;height:24px;color:#5f4a2a;fill:var(--c);}
.music-key:nth-child(1){--c:#3b8a8c;}.music-key:nth-child(2){--c:#e07a63;}.music-key:nth-child(3){--c:#e8b440;}.music-key:nth-child(4){--c:#7ea65d;}.music-key:nth-child(5){--c:#94508f;}
.music-key.on{background:var(--c);translate:0 2px;box-shadow:0 1px 0 #d2d3b9;}
.music-key.on .icon{fill:#fff8e6;}
#music-listen{display:block;margin:14px auto 0;padding:10px 16px;border-radius:12px;border:1px solid #c7cdb2;background:#e7e9d6;color:#375e50;font-weight:700;font-size:13px;cursor:pointer;}
#music-listen[hidden]{display:none;}
@media(max-width:380px){#key-btn,#can-btn,#battery-btn,#windkey-btn{width:48px;}}
/* Batteries (bottom drawer) and the dead flashlight. */
#battery-item{cursor:pointer;background:#796243;border:1px solid #c8a675;border-radius:11px;padding:18px;margin-top:12px;color:#fff3d9;}
#battery-item .sprite{width:120px;margin:0 auto 8px;}
#battery-btn{display:none;height:55px;width:57px;flex:none;align-items:center;justify-content:center;background:#f7edd4;border:1px solid #d7c096;border-radius:12px;padding:7px;}
#battery-btn .sprite{width:100%;}
#uv-btn.dead{background:#eeeddd;border-style:dashed;color:#8a7f6a;}
#uv-btn.dead .sprite{filter:saturate(.35) brightness(.9);}
/* Picture lock: three emblem dials; the shelf bookmark shows the same emblems. */
#emblem-sub{font-size:13px;color:#6a725a;line-height:1.5;}
#emblem-dials{display:flex;gap:12px;justify-content:center;margin:20px 0 6px;}
#emblem-dials button{width:64px;height:76px;border-radius:14px;border:1px solid #c2c8ae;background:linear-gradient(#f7f1dc,#e6dfc2);box-shadow:inset 0 -4px 0 #d2caa8,0 3px 0 #c7bd98;display:grid;place-items:center;cursor:pointer;}
#emblem-dials button:active{translate:0 2px;box-shadow:inset 0 -2px 0 #d2caa8,0 1px 0 #c7bd98;}
#emblem-dials .icon{width:34px;height:34px;color:#a2732b;fill:#edc46c;}
.emblem-row{display:flex;gap:8px;margin-top:6px;}
.emblem .icon{width:22px;height:22px;color:#a2732b;fill:#edc46c;}
/* Rocket picture: a 3×3 sliding puzzle (mirrored on the wall); solved, a note slides out from behind it. */
.rocket-board{position:relative;display:block;width:100%;aspect-ratio:269/275;background:#2c3f3e;border-radius:4px;}
.rocket-piece{position:absolute;width:calc(100%/3);height:calc(100%/3);padding:0;border:0;background-image:url(assets/room-atlas.webp);background-repeat:no-repeat;transition:left .15s ease,top .15s ease;}
#rocket-stage{position:relative;width:210px;max-width:100%;margin:0 auto;transition:padding-bottom .6s ease;}
#rocket-puzzle{z-index:1;box-shadow:0 6px 12px #183d3b30;}
#rocket-puzzle .rocket-piece{cursor:pointer;box-shadow:inset 0 0 0 1px #00000018;}
#rocket-puzzle .rocket-piece.last{animation:pop .4s;}
#rocket-stage.solved{padding-bottom:70px;}
#rocket-stage.solved #rocket-puzzle{background:none;box-shadow:0 8px 14px #183d3b40;rotate:-2deg;transition:rotate .5s ease;}
#rocket-stage.solved #rocket-puzzle .rocket-piece{box-shadow:none;cursor:default;}
#rocket-note{position:absolute;left:10%;right:10%;bottom:4px;padding:12px 12px 10px;background:#fff6dc;border:1px solid #e3cfa0;box-shadow:0 3px 6px #0002;font:italic 13px/1.45 Georgia,serif;color:#6e5435;rotate:2deg;opacity:0;translate:0 -70px;transition:translate .6s ease .1s,opacity .3s ease;}
#rocket-note::before{content:'';position:absolute;top:-7px;left:calc(50% - 22px);width:44px;height:12px;background:#ddb87399;rotate:-4deg;}
#rocket-stage.solved #rocket-note{opacity:1;translate:0 0;}
/* Little secrets: a row of stars in the inventory heading, and a count on the reveal. */
#secret-tracker{display:flex;align-items:center;gap:2px;font-size:10px;font-weight:700;color:#6f7c6b;}
#secret-tracker span{margin-right:4px;}
#secret-tracker i{display:block;width:13px;height:13px;color:#b3bba2;}
#secret-tracker .icon{width:13px;height:13px;}
#secret-tracker i.found{color:#c99a3c;}
#secret-tracker i.found svg{fill:#edc46c;}
#rv-secrets{font-size:13px;color:#d9e6c8;margin-top:14px;}
#rv-bonus{font-size:14px;line-height:1.6;color:#ffe7ac;font-style:italic;margin-top:8px;}
/* The bed is pushed by dragging; its slide is animated from script, so no CSS transition. */
#bed{cursor:grab;touch-action:none;transition:none;}
#bed:active{cursor:grabbing;}
/* Easy ceiling: the code's digits glow under the UV beam (with faint links in reading order) and fade as it moves away. */
.uv-digit{position:absolute;transform:translate(-50%,-50%);font:900 60px Georgia,serif;letter-spacing:2px;color:#c58bff;text-shadow:0 0 12px #a020ff,0 0 30px #7b2ff7,0 0 60px #7b2ff7;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.uv-link{position:absolute;height:3px;background:linear-gradient(90deg,transparent,#b366ff,transparent);box-shadow:0 0 10px #a020ff;opacity:0;transition:opacity .5s ease;transform-origin:left center;pointer-events:none;}
.uv-digit.lit,.uv-link.lit{opacity:1;transition-duration:.2s;}
/* Difficulty choice on the first note; reopening the note only offers a way back to the room. */
#note-kicker{display:inline-block;margin:0 auto 10px;padding:4px 12px;border-radius:999px;background:#2c6150;color:#fff7df;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;}
#mode-title{font-family:Georgia,serif;font-size:15px;font-weight:700;color:#244f46;margin:18px 0 10px;}
#mode-choice{margin-bottom:16px;}
.mode-row{display:flex;gap:10px;}
.mode-btn{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 10px;border-radius:12px;border:1px solid #49715c;background:#2c6150;color:#fff7df;box-shadow:0 4px 0 #123f35;cursor:pointer;text-align:center;}
.mode-btn b{font-size:15px;}
.mode-btn span{font-size:11px;line-height:1.35;color:#d9ead6;font-weight:500;}
#start-hard{background:#6b4a6a;border-color:#83607f;box-shadow:0 4px 0 #3f2a3e;}
#start-hard span{color:#ecdcea;}
.mode-btn:active{translate:0 2px;box-shadow:0 2px 0 #123f35;}
#welcome:not(.started) #note-tap{display:none;}
#welcome.started #mode-choice{display:none;}
#welcome:not(.started) #note-paper{padding-bottom:18px;}
/* Ceiling constellations: stars and traced lines show only under the UV beam, with a short fade as it moves away. */
.c-star{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;padding:0;border:0;border-radius:50%;background:none;opacity:0;transition:opacity .5s ease;pointer-events:none;cursor:pointer;z-index:2;}
.c-star::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#e9d2ff;box-shadow:0 0 8px #c58bff,0 0 16px #7b2ff7;}
.c-star.picked::before{width:12px;height:12px;margin:-6px;background:#fff;box-shadow:0 0 0 3px #c58bff88,0 0 14px #c58bff,0 0 26px #7b2ff7;}
#stars-field.tracing .c-star{pointer-events:auto;}
.c-line{position:absolute;height:3px;margin-top:-1.5px;transform-origin:left center;border-radius:2px;background:#c58bff;box-shadow:0 0 8px #a020ff;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1;}
.c-line.done{height:4px;margin-top:-2px;background:#eed8ff;box-shadow:0 0 10px #c58bff,0 0 24px #7b2ff7;}
.c-line.wrong{background:#ff9a86;box-shadow:0 0 8px #ff6a55;animation:wrongfade .45s ease forwards;}
@keyframes wrongfade{to{opacity:0;}}
.c-star.lit,.c-line.lit{opacity:1;transition-duration:.2s;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}