*{box-sizing:border-box}html,body{margin:0;background:#111;color:#eee;font-family:"Courier New",monospace}body{padding:8px}#game{max-width:1500px;margin:auto;display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto 220px;border:5px ridge #9b6a25;background:#27231e;min-height:900px}.owl{font-size:42px}#side{border-right:5px ridge #8d6429;background:#25231f}header{height:105px;display:flex;align-items:center;gap:15px;padding:14px;border-bottom:4px ridge #8d6429;color:#ffd36a;font-size:31px}nav{padding:10px}.navbtn,.qbtn{width:100%;min-height:70px;margin:5px 0;border:4px ridge #a36d27;background:linear-gradient(#55391f,#2b2118);color:#eee;font:700 19px "Courier New";text-align:left;padding:0 18px;cursor:pointer}.navbtn:hover,.navbtn:focus,.qbtn:hover{background:linear-gradient(#7a541f,#40301c);color:#ffe26e;outline:2px solid #e9b33c}.navbtn:active,.navbtn.active{border-style:inset;background:#704b1b;color:#ffe26e;transform:translateY(1px)}#view{min-width:0;background:#161616;position:relative;overflow:hidden}#scene{height:100%;min-height:670px;position:relative;overflow:hidden;background:#201d18}#room{position:absolute;width:100%;height:100%;object-fit:cover;image-rendering:auto}#player{position:absolute;width:76px;left:52%;top:72%;transform:translate(-50%,-100%);filter:drop-shadow(0 5px 3px #0008);transition:none;z-index:5;image-rendering:auto}.hotspot{position:absolute;z-index:6;opacity:0;border:2px solid #f4b941;background:#151515dd;color:#fff;padding:7px 10px}.hotspot:hover,.hotspot:focus{opacity:1}.pathDebug .hotspot{opacity:.85}#page{position:absolute;inset:18px;overflow:auto;background:#e2b96f;color:#21170d;border:7px ridge #a26e2c;padding:28px;z-index:10;box-shadow:inset 0 0 0 3px #3a291b}#page h1{margin-top:0;font-size:34px}#page h2{border-bottom:2px solid #6f4a1c;padding-bottom:6px}.card{border:3px ridge #9d6a2d;padding:15px;margin:12px 0;background:#f0cf8e}footer{grid-column:1/3;display:grid;grid-template-columns:390px 1fr 390px;border-top:5px ridge #8d6429;background:#17191a}.status,.dialog,.quick{padding:16px;border-right:4px ridge #765627}.status b,.quick b{display:block;color:#ffd45e;font-size:22px;margin-bottom:10px}.status div{margin:10px 0}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#34df72}.ok{color:#48ef7a}.dialog{background:#111820}.dialog b{color:#40e878}.dialog p{font-size:18px;line-height:1.5}.quick{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quick b{grid-column:1/3}.qbtn{min-height:52px;margin:0;font-size:15px;text-align:center;padding:5px}@media(max-width:850px){body{padding:0}#game{display:block;min-height:0;border-width:2px}#side{border:0}header{height:auto}nav{display:grid;grid-template-columns:repeat(2,1fr)}.navbtn{min-height:48px;font-size:14px}#scene{min-height:520px}footer{display:block}.quick{display:none}.status,.dialog{border-right:0;border-top:2px solid #765627}#player{width:58px}}
#player{width:110px;transform:translate(-50%,-100%) scale(var(--scale,1));transform-origin:50% 100%;z-index:7;pointer-events:none}.hotspot{opacity:.02;min-width:90px;min-height:46px;cursor:pointer;border-radius:4px}.hotspot:hover,.hotspot:focus-visible{opacity:1;background:#171717e8;border-color:#f5bd42;outline:2px solid #171717}.hotspot:active{transform:translateY(2px);border-style:inset}#leds i{position:absolute;width:3px;height:3px;background:#6dff72;box-shadow:0 0 5px #6dff72;z-index:3;animation:blink 1.3s steps(2,end) infinite}@keyframes blink{50%{opacity:.18}}#pathLayer{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}#pathLayer line{stroke:#ffd24a;stroke-width:.18;stroke-dasharray:.7 .7}#pathLayer circle{fill:#fff3a5;stroke:#8b5b00;stroke-width:.15}.showPaths .hotspot{opacity:.85}.navbtn span:first-child{display:inline-block;width:35px;text-align:center}@media(prefers-reduced-motion:reduce){#leds i{animation:none}#player{transition:none}}

/* Foreground room layer: transparent PNG drawn above Owly. Keep same dimensions/aspect ratio as server-room.png. */
#roomForeground{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;pointer-events:none;image-rendering:auto}
/* Interactive hotspots stay above the foreground artwork. */
.hotspot{z-index:9}
/* Content pages remain above the whole room scene. */
#page{z-index:20}

/* Pixel-perfect image-mask hotspots.
   The PNG masks themselves are never drawn; app.js reads their alpha channel. */
#scene.mask-hotspot-active { cursor: pointer; }
#hotspotLabel {
  position:absolute; z-index:30; pointer-events:none; display:none;
  transform:translate(-50%,-125%); padding:7px 10px;
  border:2px solid #f4b941; border-radius:4px;
  background:#151515e8; color:#fff; font-weight:700;
  box-shadow:0 2px 8px #0009;
}
#hotspotLabel.visible { display:block; }
/* Old rectangular hotspot buttons are no longer used. */
.hotspot { display:none !important; }


/* Mobile layout: banner -> room -> navigation -> status/dialog */
@media (max-width: 700px) {
  html, body { width:100%; overflow-x:hidden; }
  body { padding:0; }
  #game { display:flex; flex-direction:column; width:100%; min-height:100vh; margin:0; border-width:2px; }
  #side { display:contents; }
  header { order:1; width:100%; height:64px; justify-content:center; padding:8px 12px; border:0; border-bottom:3px ridge #8d6429; font-size:24px; background:#25231f; }
  header .owl { font-size:32px; }
  #view { order:2; width:100%; overflow:hidden; }
  #scene { width:100%; height:auto; min-height:0; aspect-ratio:16/9; }
  #room, #roomForeground { width:100%; height:100%; object-fit:cover; }
  #player { width:clamp(42px, 9vw, 58px); }
  nav { order:3; width:100%; display:grid; grid-template-columns:1fr; gap:4px; padding:8px; border-top:3px ridge #8d6429; background:#25231f; }
  .navbtn { min-height:48px; margin:0; font-size:15px; padding:0 14px; }
  footer { order:4; display:block; width:100%; border-top:3px ridge #8d6429; }
  .status, .dialog { padding:12px 14px; border-right:0; border-top:2px solid #765627; }
  .status b { font-size:18px; }
  .status div { margin:6px 0; font-size:14px; }
  .dialog p { font-size:15px; margin-bottom:4px; }
  .quick { display:none; }
  #page { inset:8px; padding:16px; border-width:4px; }
  #page h1 { font-size:26px; }
  #hotspotLabel { font-size:12px; padding:5px 7px; }
}


/* Add this to style-layered.css */
@media(max-width:700px){
  #mobileRoomHint{
    position:absolute;inset:0;z-index:40;pointer-events:none;
    background:linear-gradient(#0002,#0005);
    transition:opacity .3s ease;
  }
  #mobileRoomHint.closing{opacity:0}
  .mobileHintTitle{
    position:absolute;left:50%;top:5%;transform:translateX(-50%);
    padding:8px 12px;border:2px solid #f4b941;border-radius:5px;
    background:#151515e8;color:#ffe26e;font-weight:700;
    white-space:nowrap;box-shadow:0 2px 8px #000b;
    animation:mobileHintPulse 1.2s ease-in-out infinite alternate;
  }
  .mobileHintSub{
    position:absolute;left:50%;top:14%;transform:translateX(-50%);
    background:#111d;color:#fff;padding:5px 8px;border-radius:4px;
    white-space:nowrap;font-size:12px;
  }
  .mobileObjectHint{
    position:absolute;transform:translate(-50%,-50%);
    padding:5px 7px;border:2px solid #f4b941;border-radius:4px;
    background:#151515e8;color:#fff;font-size:11px;font-weight:700;
    white-space:nowrap;box-shadow:0 0 10px #000;
    animation:mobileHintPulse .9s ease-in-out infinite alternate;
  }
  @keyframes mobileHintPulse{
    from{transform:translate(-50%,-50%) scale(.96);opacity:.72}
    to{transform:translate(-50%,-50%) scale(1.05);opacity:1}
  }
  .mobileHintTitle{
    animation:mobileTitlePulse 1.2s ease-in-out infinite alternate;
  }
  @keyframes mobileTitlePulse{
    from{transform:translateX(-50%) scale(.97)}
    to{transform:translateX(-50%) scale(1.04)}
  }
}
/* All scene layers share artwork bounds calculated by engine.js. */
#room,#roomForeground { object-fit:fill; inset:auto; }
#leds { position:absolute; pointer-events:none; }
#scene { transition:opacity .26s ease; }
#scene.transitioning { opacity:0; pointer-events:none; }
#roomForeground[hidden],#locationExit[hidden] { display:none; }
#locationName { position:absolute;top:12px;left:12px;z-index:12;padding:5px 9px;background:#111c;border:1px solid #916a32;color:#ffd36a;font-size:12px;pointer-events:none; }
#locationExit { position:absolute;bottom:14px;right:14px;z-index:12;border:3px ridge #a36d27;background:#2b2118;color:#ffd36a;font:700 15px 'Courier New';padding:10px 16px;cursor:pointer; }
#locationExit:hover,#locationExit:focus-visible { background:#55391f;outline:2px solid #ffd36a; }
#pathLayer { z-index:11;inset:auto; }
#pathLayer text { font-size:1.4px;fill:#fff;stroke:#000;stroke-width:.08;paint-order:stroke; }
@media(max-width:700px) { #scene[data-location="town"] { aspect-ratio:3/2; } }
@media(prefers-reduced-motion:reduce) { #scene { transition:none; } }
/* Keep the home exit control clear of Owly's floor-level entrance. */
#locationExit { top:12px;bottom:auto;font-size:12px;padding:7px 10px; }
/* Comic action cues stay separate from artwork and preserve the feet anchor. */
#actionBubble { position:absolute;z-index:14;pointer-events:none;transform:translate(-50%,-100%);max-width:170px;padding:7px 10px;border:2px solid #321e0c;background:#ffe9b0;color:#321e0c;box-shadow:3px 3px 0 #0008;font:bold 12px 'Courier New';text-align:center; }
#actionBubble[hidden] { display:none; }
#actionBubble::after { content:'';position:absolute;left:50%;bottom:-8px;border:7px solid transparent;border-top-color:#ffe9b0;border-bottom:0; }
#player.acting { animation:owlyAction .65s steps(2,end) infinite; }
@keyframes owlyAction { 0%,100% { transform:translate(-50%,-100%) scale(var(--scale,1)) rotate(-2deg); } 50% { transform:translate(-50%,-100%) scale(var(--scale,1)) rotate(2deg); } }
@media(prefers-reduced-motion:reduce) { #player.acting { animation:none; } }
/* Recorded conversation controls use the existing bottom game UI. */
#dialogueAudio { display:grid;grid-template-columns:1fr auto auto;gap:6px;margin-top:12px;font-size:13px; }
#dialogueAudio[hidden] { display:none; }
#dialogueTitle,#dialogueState { grid-column:1/-1; }
#dialogueTitle { color:#ffd36a;font-weight:bold; }
#dialogueAudio button { border:2px ridge #a36d27;background:#2b2118;color:#ffd36a;padding:6px 10px;font:inherit;cursor:pointer; }
#dialoguePlay { grid-column:2; }
#dialogueAudio button:disabled { opacity:.5;cursor:default; }
#dialogueAudio button:focus-visible { outline:2px solid #ffd36a; }
#soundToggle { margin-top:10px;border:2px ridge #a36d27;background:#2b2118;color:#ffd36a;padding:5px 9px;font:inherit;cursor:pointer; }
#soundToggle:focus-visible { outline:2px solid #ffd36a; }
header .owl { width:64px;height:64px;object-fit:contain;flex-shrink:0; }
@media(max-width:700px) { header .owl { width:46px;height:46px; } }
#arcadeWindow { width:min(620px,95vw);max-height:92vh;overflow:auto;padding:0;border:5px ridge #9b6a25;background:#292a25;color:#ffe9b0;font-family:'Courier New',monospace; }
#arcadeWindow::backdrop { background:#000b; }
#arcadeWindow header { height:auto;min-height:48px;padding:10px;font-size:16px;justify-content:space-between;background:#49391e; }
#arcadeWindow button { border:3px outset #9b773c;background:#373b30;color:#ffe9b0;font:700 14px 'Courier New',monospace;padding:8px 12px;cursor:pointer; }
#arcadeWindow button:active { border-style:inset; }
#arcadeWindow button:focus-visible { outline:2px solid #ffd36a;outline-offset:2px; }
#arcadeWindow [hidden] { display:none!important; }
.arcadeBody { padding:16px; }
#arcadeMenu,.arcadeToolbar,#arcadeControls { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center; }
#arcadeCanvas { display:block;width:100%;max-width:480px;height:auto;margin:auto;border:3px inset #726545; }
#arcadeScore { min-height:42px; }
#mineBoard { display:grid;grid-template-columns:repeat(9,1fr);max-width:405px;margin:auto; }
#mineBoard button { padding:0;aspect-ratio:1;font-size:18px; }
#mineBoard button.revealed { border:1px solid #555;background:#c0b797;color:#182619; }
#arcadeWindow h2 { margin:8px 0;font-size:20px; }
.arcadeBody p { margin:8px 0;font-size:13px; }
#arcadeCanvas { max-width:400px; }
#mineBoard { max-width:315px; }
#arcadeScore { min-height:24px; }
#arcadeControls,.arcadeToolbar { margin:8px 0; }