:root{font-family:system-ui,sans-serif;color:#493c32;background:#e0cba6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#f8e9ca,#cdb38f);height:100dvh;overflow:hidden}main{height:100%;max-width:1300px;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:7px;padding:10px}header{display:flex;justify-content:space-between;align-items:center;gap:8px}header small{font-size:9px;letter-spacing:.14em}h1{font-family:Georgia,serif;font-size:32px;margin:0;color:#64503a}nav{display:flex;gap:5px}button{font:inherit;font-weight:700;padding:9px 12px;background:#f4e2bb;color:#4c4735;border:2px solid #a38a65;border-radius:13px;box-shadow:0 3px 0 #927759;cursor:pointer}button:hover{background:#fff1d4}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible{outline:3px solid #238b96;outline-offset:3px}button[aria-pressed=true]{background:#a9d1c7;border-color:#497d76}button:disabled{opacity:.5;cursor:wait}.stage{position:relative;overflow:hidden;border:5px solid #907556;border-radius:22px;min-height:0;background:#a68c66}#game{position:absolute;inset:0}#game canvas{display:block}#hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;transform:translate(-50%,-50%);border:2px solid transparent;background:transparent;box-shadow:none;border-radius:45%;padding:0;pointer-events:auto;min-width:30px;min-height:30px}.hotspot span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 8px;border-radius:9px;background:#fff4da;color:#374b43;opacity:0;pointer-events:none;font-size:12px}.hotspot:hover,.hotspot:focus-visible,.show-spots .hotspot{border-color:#fff3b9;background:#fff6bc20;box-shadow:0 0 0 2px #685b3e66}.hotspot:hover span,.hotspot:focus-visible span,.show-spots .hotspot span{opacity:1}.hotspot:hover{transform:translate(-50%,-50%)}#room-name{position:absolute;left:12px;top:10px;background:#fff0cece;border-radius:12px;padding:7px 12px;font-family:Georgia,serif;pointer-events:none}.speech{padding:9px 17px;background:#fcf0d5;border:2px solid #c3a87e;border-radius:16px;min-height:76px}.speaker{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#64857a}.speech p{font-size:15px;line-height:1.4;margin:3px 0}footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.bag{display:flex;gap:10px;align-items:center}.bag>b{font-size:12px}#inventory,#exits{display:flex;gap:7px;flex-wrap:wrap}#inventory button{min-width:80px;min-height:48px;font-size:12px;display:flex;align-items:center;gap:5px}#inventory img{width:30px;height:30px;object-fit:contain}#exits button{background:#c5d1b6;font-size:12px}#loading,#clue{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff0d4;border:3px solid #a98b61;padding:20px;border-radius:16px;text-align:center;max-width:90%;width:max-content}#clue{z-index:4}dialog{max-width:520px;max-height:90dvh;overflow:auto;border:3px solid #a58b64;border-radius:22px;background:#fff0d4;color:#4c4735;line-height:1.6;padding:25px}dialog::backdrop{background:#403a2bad}dialog h2{font-family:Georgia,serif}.seal{font-size:60px;color:#b58b31}#storage{position:fixed;bottom:0;left:0;right:0;background:#ffe6aa;margin:0;padding:5px;font-size:11px}[hidden]{display:none!important}
@media(max-width:650px){main{padding:5px;gap:4px}header{align-items:center}h1{font-size:22px}header small{display:none}nav{gap:3px;flex-wrap:wrap;justify-content:flex-end;max-width:210px}nav button{font-size:10px;padding:6px}.stage{border-width:3px;border-radius:14px}.speech{padding:6px 10px;min-height:82px}.speech p{font-size:12px}footer{flex-wrap:wrap}.bag{width:100%}#inventory button{min-width:64px;min-height:42px;font-size:11px;padding:6px}#exits{width:100%;justify-content:space-between}#exits button{font-size:11px;padding:7px}#room-name{font-size:11px;top:5px;left:5px;padding:5px}.hotspot span{font-size:10px}}
@media(max-height:480px) and (min-width:650px){main{grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:38px minmax(0,1fr) 96px;padding:4px;gap:4px}header{grid-column:1/-1}h1{font-size:23px}header small{display:none}.stage{grid-column:1;grid-row:2/4}.speech{grid-column:2;grid-row:2;overflow:auto}footer{grid-column:2;grid-row:3;align-self:end;flex-wrap:wrap;background:#e0cba6;z-index:3}footer .bag>b{display:none}#inventory button{min-height:32px;min-width:42px;padding:4px}#inventory img{width:20px;height:20px}#inventory,#exits{gap:3px}#exits button{font-size:10px;padding:4px}.speech p{font-size:12px}}