/* Geometry owns the room, glass and landscape. DOM owns accessible controls. */
body { --text-on-dark:#bdb8ac; background:radial-gradient(ellipse at 48% 40%,#565047,#302d28 70%,#25241f); }
body::before { opacity:.025; }
.room-header { position:absolute; z-index:7; inset:0 0 auto; height:62px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#e9e1d2; }
.room-wordmark { color:inherit; text-decoration:none; font-size:14px; letter-spacing:.12em; display:flex; align-items:center; gap:12px; }
.room-wordmark>span { font-size:30px; line-height:1; color:#b8a58b; transform:rotate(180deg); }
.room-wordmark small { margin-left:4px; padding-left:14px; border-left:1px solid #a094803d; font-size:10px; font-weight:400; color:#b6ad9e; letter-spacing:.15em; }
.view-controls { display:flex; align-items:center; gap:5px; }
.view-controls>span { font-size:11px; letter-spacing:.08em; color:#bfb5a3; margin-right:10px; }
.view-controls button { width:35px; height:35px; border:1px solid #c1b39b33; border-radius:50%; color:#dbd2c1; background:transparent; font-size:18px; }
.view-controls button:hover,.view-controls button[aria-pressed="true"] { background:#d3c4aa1c; border-color:#cabb9e77; }
.screen { padding:62px 28px 168px; }
.window { width:min(1280px,100%,calc((100svh - 358px) * 1.95031 + 128px)); padding:64px; background:transparent!important; box-shadow:0 35px 60px -30px #141511ad; border-radius:0; }
#screen-game .window { width:min(1280px,100%,calc((100svh - 368px) * 1.95031 + 128px)); }
.window::before,.window::after { display:none; }
.window > canvas.world-3d { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.glass { z-index:1; background:transparent; box-shadow:none; border-radius:0; }
.scene { visibility:hidden; }
.target img { visibility:hidden; }
.target { opacity:0!important; animation:none!important; box-shadow:none!important; }
.scene-wrap { pointer-events:none; }
.mask { opacity:0!important; }
.glass-shine { box-shadow:none; background:none; }
.frost--home { background:linear-gradient(90deg,#e5e9e77a,transparent 58%); pointer-events:none; }
.frost--home::after { opacity:.12; }
.home-copy { inset:auto auto 12% 7%; width:360px; padding:28px 24px; align-items:flex-start; text-align:left; transform:none; border-radius:2px; background:linear-gradient(110deg,#f6f4e9e8,#f6f4e9bf 70%,#f6f4e900); text-shadow:none; }
.home-copy .eyebrow { color:#5d675e; font-size:10px; letter-spacing:.2em; margin-bottom:12px; }
.home-copy h1 { font-size:45px; line-height:1.4; letter-spacing:.09em; padding-left:0; color:#303c36; }
.home-copy .sub { color:#59665d; font-size:13px; line-height:1.9; }
.home-copy .little-rule { width:32px; background:#8f9b896e; margin:18px 0; }
.home-copy #btn-start { margin-top:22px; min-width:144px; background:#34463c; border-radius:3px; box-shadow:0 6px 14px #293a3226; }
.home-copy #btn-start:hover { background:#43594a; }
.home-footer { position:absolute; bottom:60px; display:flex; flex-direction:column; align-items:center; gap:15px; }
.home-footer .foot-hint { margin:0; font-size:12px; color:#c2b9a8; }
.journal-link { background:transparent; border:0; color:#e3d8c4; border-bottom:1px solid #ae9d7d66; padding:6px 3px; font-size:12px; letter-spacing:.07em; }
.journal-link span { margin-right:8px; }
.hud { top:16px; left:16px; right:16px; }
.pill,.counter { background:#f6f5eade; border-color:#fdf9ec66; box-shadow:none; backdrop-filter:blur(6px); }
.pill { height:34px; font-size:11px; }
.counter { height:34px; }
.discovery-list { position:absolute; bottom:16px; left:16px; z-index:4; display:flex; flex-wrap:wrap; gap:7px; pointer-events:none; max-width:calc(100% - 32px); list-style:none; margin:0; padding:0; }
.discovery-list>* { font-size:10px; line-height:1.5; border:1px solid #e2e8dcb3; background:#f8f8efe8; color:#566458; padding:6px 9px; border-radius:3px; }
.discovery-state { margin-left:6px; opacity:.65; font-size:9px; }
.discovery-list .is-found { border-color:#82987e; background:#edf2e6ef; color:#3b563f; }
.brush-cursor { border:1px solid #fff; box-shadow:0 1px 4px #173a3155; background:#ffffff06; }
.workbench { position:absolute; bottom:60px; width:min(520px,calc(100% - 48px)); }
.tool-tray { display:flex; padding:5px; gap:5px; border:1px solid #c1b1974a; background:#322d26e6; box-shadow:0 12px 28px -16px #080a08; border-radius:6px; }
.tool-button { flex:1; min-width:0; min-height:57px; display:flex; align-items:center; justify-content:center; gap:10px; color:#bdb3a0; border:1px solid transparent; border-radius:3px; background:transparent; padding:7px 10px; text-align:left; }
.tool-button svg { width:34px; height:30px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; }
.tool-button span { font-size:12px; line-height:1.5; white-space:nowrap; }
.tool-button small { display:block; font-size:9px; opacity:.7; font-weight:400; }
.tool-button:hover { background:#b6a58812; }
.tool-button[aria-pressed="true"] { background:#e3d6bd; border-color:#f2e7cf66; color:#3d4136; box-shadow:0 2px 6px #191b1633; }
.workbench-note { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:9px 2px 0; color:#beb49f; font-size:10px; }
.workbench-note p { margin:0; }
.clean-meter { white-space:nowrap; color:#aba590; }
#clear-progress { display:inline-block; width:33px; text-align:right; color:#e5dac6; font-variant-numeric:tabular-nums; }
#game-hint { position:absolute; bottom:159px; margin:0; font-size:11px; }
.game-controls { bottom:13px; right:0; width:100%; justify-content:center; gap:18px; }
.game-controls .quiet-button { font-size:10px; }
.audio-toggle { height:30px; border-color:#c8baa336; color:#c8bea9; background:transparent; font-size:10px; }
.music-credit { font-size:9px; }
.finish { align-items:flex-end; padding:26px; background:linear-gradient(0deg,#1e271c55,transparent 56%); }
.finish-card { width:520px; border-radius:6px; padding:26px 32px 22px; background:#f7f4e9f5; border-color:#fff8e9bb; }
.finish-mark { margin-bottom:12px; }
.finish h2 { font-size:34px; margin-bottom:10px; }
.finish .sub { font-size:13px; line-height:1.8; }
.finish-collection { font-size:12px; color:#627052; margin:12px 0 0; }
.finish-journal-link { border:0; border-bottom:1px solid #8a997866; padding:6px 0; background:transparent; color:#52694e; font-size:11px; margin-top:4px; }
.finish-actions { margin:20px 0 16px; }
.finish .btn { border-radius:3px; }
.finish .btn--primary { background:#34463c; }
.journal { width:min(700px,calc(100% - 40px)); max-height:85svh; overflow:auto; padding:34px; border:1px solid #f9f2df; border-radius:6px; background:#f3f0e5; color:#374539; box-shadow:0 30px 100px #0c120ba8; }
.journal::backdrop { background:#19211999; backdrop-filter:blur(4px); }
.journal-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.journal-heading .eyebrow { font-size:10px; color:#848574; margin-bottom:5px; }
.journal h2 { font-size:31px; line-height:1.5; margin:0; }
.journal-close { min-width:36px; min-height:36px; border:1px solid #969d834d; border-radius:50%; background:none; color:#59634c; font-size:24px; }
.journal-summary { color:#7d816f; font-size:12px; line-height:1.8; margin:15px 0 22px; }
.journal-scenes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.journal-scenes>* { min-height:145px; padding:16px; border:1px solid #c2c6b7; border-radius:3px; background:linear-gradient(150deg,#e5e8db,#d0dacf); color:#586b5e; overflow:hidden; position:relative; }
.journal-scenes>*[data-scene="night"] { background:linear-gradient(145deg,#3f515c,#71818b); color:#e4e5d6; }
.journal-scenes img { display:block; width:100%; max-height:100px; object-fit:cover; margin-bottom:10px; border-radius:2px; }
.journal-scenes .is-locked { opacity:.55; filter:grayscale(.8); }
.journal-scenes h3,.journal-scenes strong { font-family:var(--font-serif); font-size:17px; font-weight:400; }
.journal-scenes p { font-size:11px; line-height:1.6; margin-bottom:0; }
.journal h3 { font-size:12px; font-weight:500; margin:27px 0 13px; color:#717760; }
.journal-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.journal-items>* { padding:14px 8px; background:#e7e7dc; border:1px solid #dbdecd; border-radius:3px; text-align:center; font-size:11px; color:#8b8d7e; }
.journal-items img { display:block; height:48px; width:64px; object-fit:contain; margin:0 auto 9px; }
.journal-items .is-collected { background:#faf7ed; color:#455d48; border-color:#c6cfb8; }
.journal-items .is-locked img { opacity:.25; filter:grayscale(1); }
.journal-items small { display:block; font-size:9px; margin-top:6px; }
.journal-storage-note { font-size:10px; color:#91917d; margin:24px 0 0; line-height:1.7; }
.journal-storage-note[data-error="true"] { color:#8c6248; }
.webgl-status { position:absolute; inset:0; z-index:9; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:28px; background:#edf4f7ef; text-align:center; gap:14px; font-size:13px; line-height:1.8; color:#455c68; }
.webgl-status p { margin:0; }
.webgl-status a { color:#203f51; text-underline-offset:4px; }
.webgl-status[hidden] { display:none; }
.webgl-status__dot { width:5px; height:5px; border-radius:50%; background:#91aaa8; box-shadow:-12px 0 #91aaa844,12px 0 #91aaa844; }
@media(prefers-reduced-motion:no-preference) { .webgl-status__dot { animation:loading-breath 1.3s ease-in-out infinite; } }
@keyframes loading-breath { 50% { opacity:.35; } }
@media(max-width:899px) {
  .room-header { height:48px; padding:0 18px; }
  .room-wordmark { font-size:12px; gap:8px; }
  .room-wordmark>span { font-size:24px; }
  .room-wordmark small,.view-controls>span { display:none; }
  .view-controls { gap:4px; }
  .view-controls button { width:30px; height:30px; font-size:17px; }
  .screen { padding:50px 16px 148px; }
  .window { padding:28px; width:min(100%,calc((100svh - 238px) * .64 + 56px)); }
  .glass { aspect-ratio:.64; }
  #screen-game { padding-bottom:202px; }
  #screen-game .window { width:min(100%,calc((100svh - 310px) * .64 + 56px)); }
  .home-copy { inset:auto 2% 12%; width:auto; padding:20px 16px; }
  .home-copy .eyebrow { font-size:9px; letter-spacing:.1em; }
  .home-copy h1 { font-size:31px; }
  .home-copy .sub { font-size:11px; line-height:1.9; }
  .home-copy .little-rule { margin:13px 0; }
  .home-copy #btn-start { margin-top:18px; min-width:130px; font-size:12px; min-height:42px; }
  .home-footer { bottom:48px; gap:11px; width:100%; }
  .home-footer .foot-hint { font-size:10px; max-width:90%; white-space:normal; }
  .journal-link { font-size:11px; }
  .hud { top:12px; left:10px; right:10px; align-items:flex-start; flex-wrap:wrap; gap:6px; }
  .pill,.counter { font-size:10px; height:28px; padding:0 9px; }
  .counter b { font-size:12px; }
  .discovery-list { left:10px; bottom:10px; max-width:calc(100% - 20px); gap:4px; }
  .discovery-list>* { font-size:9px; padding:4px 6px; }
  .workbench { bottom:68px; width:calc(100% - 32px); max-width:460px; }
  .tool-tray { gap:3px; padding:4px; }
  .tool-button { min-height:52px; padding:6px 4px; gap:5px; }
  .tool-button svg { width:26px; height:26px; }
  .tool-button span { font-size:11px; }
  .tool-button small { font-size:8px; }
  .workbench-note { font-size:9px; margin-top:8px; gap:6px; }
  #game-hint { bottom:162px; font-size:10px; max-width:calc(100% - 32px); white-space:normal; }
  .game-controls { bottom:max(16px,env(safe-area-inset-bottom)); gap:13px; }
  .control-separator { display:none; }
  .audio-toggle { padding:0 9px; font-size:9px; height:30px; }
  .audio-toggle svg { width:13px; }
  .music-credit { font-size:8px; }
  .finish { padding:18px; }
  .finish-card { padding:23px 20px 18px; }
  .finish-actions { flex-direction:row; gap:8px; }
  .finish-actions .btn { min-height:43px; font-size:12px; padding:0 17px; }
  .journal { width:calc(100% - 28px); padding:23px 18px; }
  .journal-scenes { gap:10px; }
  .journal-scenes>* { min-height:110px; padding:12px; }
  .journal-scenes strong { font-size:15px; }
  .journal-items { gap:7px; }
  .journal-items>* { padding:12px 4px; font-size:10px; }
  .journal-items img { width:48px; height:38px; }
}
@media(max-width:899px) and (max-height:650px) {
  .home-copy { padding:14px 12px; bottom:8%; }
  .home-copy .eyebrow { font-size:8px; margin-bottom:7px; }
  .home-copy h1 { font-size:26px; }
  .home-copy .little-rule { margin:10px 0; }
  .home-copy #btn-start { margin-top:12px; min-height:37px; }
  .home-copy .sub { font-size:10px; }
  .home-footer { bottom:27px; }
  .pill { padding:0 7px; font-size:9px; }
  .pill .dot { display:none; }
  .finish-card { padding:18px; }
  .finish-mark { display:none; }
  .finish h2 { line-height:1.4; font-size:28px; }
}