*{box-sizing:border-box}
html,body{width:100%;height:100%;min-height:100%;margin:0;background:#111e25;color:#edf0dc;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;overflow:hidden}
#shell{width:480px;height:270px;padding:0;transform:scale(var(--window-scale,1))}
header,footer{display:none}
#frame{position:relative;width:480px;height:270px;overflow:hidden;background:#2d6c7b;image-rendering:pixelated;image-rendering:crisp-edges}
#game,#game canvas{position:absolute;inset:0;width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges}
#loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#173c40 url("ui/loading-screen.webp") center/cover no-repeat;color:#fff0c6;text-align:center;image-rendering:auto}
#loading[hidden]{display:none}
.loading-title{width:290px;margin-top:-6px;text-shadow:0 2px 0 #143336}
.loading-title h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:.96;text-transform:uppercase}
.loading-title h2 span{display:block;font-size:30px;letter-spacing:4px;padding-left:4px}
.loading-title h2 strong{display:block;font-size:56px;letter-spacing:2px;margin-top:3px;padding-left:2px}
.loading-rule{display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#dbb271;margin:12px 0 8px}
.loading-rule::before,.loading-rule::after{content:"";width:34px;height:1px;background:currentColor}
#loading-message{max-width:240px;margin:0 auto;color:#f5dfb0;font:9px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em}
#enter-game{margin-top:9px;padding:5px 12px;border:1px solid #dbb271;background:#163e40;color:#fff0c6;font:10px Georgia,serif;letter-spacing:.04em;cursor:pointer}
#enter-game:hover{background:#295454}
#enter-game:focus-visible{outline:2px solid #fff0c6;outline-offset:2px}
#enter-game[hidden]{display:none}
#title-music{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);border:0;border-bottom:1px solid #dbb27180;padding:3px 6px;background:#173c40;color:#f5dfb0;font:9px Georgia,serif;cursor:pointer}
#title-music:focus-visible{outline:2px solid #fff0c6;outline-offset:2px}
#restart{position:absolute;z-index:6;right:36px;top:6px;height:20px;padding:0 6px;border:1px solid #b2bd9b80;background:#14252dc9;color:#f5f0d9;font:11px system-ui;cursor:pointer}
#restart:focus-visible{outline:2px solid #f0cc7b;outline-offset:1px}
.hud,.quest{position:absolute;z-index:2;top:calc(10px * var(--scale,1));background:#14252de8;border:calc(1px * var(--scale,1)) solid #b2bd9b;color:#f5f0d9;font-size:calc(12px * var(--scale,1));padding:calc(6px * var(--scale,1)) calc(9px * var(--scale,1));pointer-events:none}
.hud{left:calc(10px * var(--scale,1))}
.quest{right:calc(10px * var(--scale,1));max-width:47%;text-align:right}
.prompt{position:absolute;z-index:3;left:50%;bottom:23%;transform:translateX(-50%);background:#14252df2;border:calc(1px * var(--scale,1)) solid #e1d5a8;padding:calc(6px * var(--scale,1)) calc(10px * var(--scale,1));font-size:calc(13px * var(--scale,1));white-space:nowrap}
.dialogue,.quest-log,.start{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(82%,calc(560px * var(--scale,1)));background:#16262bf5;border:calc(2px * var(--scale,1)) solid #d5c99c;padding:calc(18px * var(--scale,1)) calc(20px * var(--scale,1));box-shadow:0 calc(8px * var(--scale,1)) calc(32px * var(--scale,1)) #071116b8}
.dialogue .speaker{font-size:calc(11px * var(--scale,1));letter-spacing:.14em;color:#e7bd75;text-transform:uppercase;margin-bottom:calc(9px * var(--scale,1))}
.dialogue .line{font-size:calc(16px * var(--scale,1));line-height:1.5;min-height:3em}
.dialogue .hint,.start p,.quest-log p{font-size:calc(11px * var(--scale,1));color:#b9c6b9;margin-top:calc(14px * var(--scale,1))}
.start{text-align:center}
.start h2{font-size:calc(24px * var(--scale,1));margin:0 0 calc(8px * var(--scale,1))}
.start p{line-height:1.5}
.start button{border:calc(1px * var(--scale,1)) solid #ead7a2;background:#bd7950;color:white;padding:calc(10px * var(--scale,1)) calc(17px * var(--scale,1));font-size:calc(14px * var(--scale,1));cursor:pointer}
.quest-log h2{font-size:calc(18px * var(--scale,1));margin:0 0 calc(12px * var(--scale,1))}
.quest-log ol{padding-left:calc(22px * var(--scale,1));margin:0}
.quest-log li{padding:calc(5px * var(--scale,1)) 0;font-size:calc(13px * var(--scale,1))}
.quest-log .done{color:#9ba99c;text-decoration:line-through}
.toast{position:absolute;z-index:5;top:22%;left:50%;transform:translateX(-50%);padding:calc(8px * var(--scale,1)) calc(12px * var(--scale,1));background:#14252df2;border:calc(1px * var(--scale,1)) solid #d5c99c;font-size:calc(13px * var(--scale,1))}

#dialogue[data-painted]{top:auto;bottom:8px;transform:translateX(-50%);width:94%;padding:10px 12px;border-width:1px}
#dialogue[data-painted] .speaker{font-size:10px;margin-bottom:5px}
#dialogue[data-painted] .line{font-size:12px;line-height:1.45;min-height:2.9em}
#dialogue[data-painted] .hint{font-size:9px;margin-top:6px}
#dialogue .choices{display:flex;gap:8px;margin-top:8px}
#dialogue .choices[hidden]{display:none}
#dialogue .choices button{font:inherit;font-size:11px;flex:1;background:#36514e;color:#f7edce;border:1px solid #b7be99;padding:6px;cursor:pointer}
#dialogue .choices button:focus{outline:2px solid #f0cc7b}
#portraits{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity 160ms ease,transform 160ms ease;image-rendering:auto}
#portraits.visible{opacity:1;transform:translateY(0)}
#portraits img{position:absolute;bottom:48px;height:158px;width:auto;max-width:210px;object-fit:contain;object-position:bottom;image-rendering:auto;transition:filter 140ms ease;filter:brightness(.55)}
#portraits img.left{left:12px} #portraits img.right{right:12px}
#portraits img.active{filter:brightness(1)} #portraits img.mirror{transform:scaleX(-1)}

/* ---- feel: prompt, hint, iris, menu --------------------------------------------------------------------- */
body{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
.prompt:not([hidden]){animation:promptIn 170ms ease-out}
@keyframes promptIn{from{opacity:0;transform:translateX(-50%) translateY(5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
#menu-button{position:absolute;z-index:6;right:92px;top:6px;height:20px;padding:0 6px;border:1px solid #b2bd9b80;background:#14252dc9;color:#f5f0d9;font:11px system-ui;cursor:pointer}
#menu-button:focus-visible{outline:2px solid #f0cc7b;outline-offset:1px}
#hint{position:absolute;z-index:5;left:50%;bottom:14px;transform:translate(-50%,6px);padding:5px 10px;max-width:92%;background:#14252de8;border:1px solid #b2bd9b99;color:#f5f0d9;font:9px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.03em;white-space:nowrap;opacity:0;transition:opacity 420ms ease,transform 420ms ease;pointer-events:none}
#hint.show{opacity:1;transform:translate(-50%,0)}
#iris{position:absolute;inset:0;z-index:9;background:#0b161b;opacity:0;pointer-events:none}
#menu{position:absolute;inset:0;z-index:12;display:grid;place-items:center;background:#08141bb8;font:9px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f1ecd2}
#menu[hidden]{display:none}
#menu .panel{width:440px;max-height:256px;padding:10px 14px 10px;background:#16262bf8;border:2px solid #d5c99c;box-shadow:0 4px 18px #071116c0}
#menu h2{margin:0 0 6px;font:700 13px Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#e7bd75;text-align:center}
#menu h3{margin:0 0 4px;font:700 8px system-ui;letter-spacing:.14em;text-transform:uppercase;color:#9fb3a4}
#menu .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#menu .row{display:grid;grid-template-columns:62px 1fr 22px;align-items:center;gap:6px;margin:3px 0}
#menu .keys .row{grid-template-columns:1fr auto}
#menu .row .val{text-align:right;color:#b9c6b9}
#menu input[type=range]{width:100%;height:14px;margin:0;accent-color:#e0b46a;background:transparent;cursor:pointer}
#menu .check{display:flex;gap:6px;align-items:flex-start;margin-top:8px;color:#cdd7c9;cursor:pointer}
#menu .check input{margin:1px 0 0;accent-color:#e0b46a}
#menu .cap{min-width:54px;padding:2px 6px;border:1px solid #b7be99;background:#2b3f3d;color:#fff0c6;font:9px system-ui;cursor:pointer}
#menu .cap.wait{background:#7a5a2a;color:#fff}
#menu .note{margin:6px 0 4px;color:#9fb0a2;font-size:8px;line-height:1.4}
#menu button.small{padding:2px 6px;border:1px solid #6b7f73;background:transparent;color:#cdd7c9;font:8px system-ui;cursor:pointer}
#menu .actions{display:flex;gap:8px;justify-content:center;margin-top:9px}
#menu .actions button{min-width:84px;padding:5px 10px;border:1px solid #b7be99;background:#36514e;color:#f7edce;font:10px system-ui;cursor:pointer}
#menu .actions .primary{background:#bd7950;border-color:#ead7a2}
#menu button:focus-visible,#menu input:focus-visible{outline:2px solid #f0cc7b;outline-offset:1px}

/* ---- touch controls, outside the scaled frame so they stay large on a phone --------------------------------- */
#touch{position:fixed;inset:0;z-index:30;pointer-events:none;font-family:system-ui,-apple-system,sans-serif}
#touch[hidden]{display:none}
#touch-zone{position:fixed;left:0;bottom:0;width:58%;height:76%;pointer-events:auto;touch-action:none}
#touch-stick{position:fixed;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;border:2px solid #f5f0d99a;background:#14252d66;opacity:0;transition:opacity 120ms;pointer-events:none}
#touch-stick.on{opacity:1}
#touch-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#f5f0d9b8;border:2px solid #14252d;transform:translate(-50%,-50%)}
#touch-interact{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));width:88px;height:88px;border-radius:50%;border:2px solid #f5f0d9cc;background:#14252dcc;color:#f5f0d9;display:grid;place-items:center;pointer-events:auto;touch-action:none;padding:0}
#touch-interact.down{background:#bd7950;transform:scale(.94)}
#touch-menu{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:44px;height:44px;border-radius:50%;border:2px solid #f5f0d9aa;background:#14252dbb;color:#f5f0d9;display:grid;place-items:center;pointer-events:auto;touch-action:none;padding:0}
#touch.quiet #touch-interact,#touch.quiet #touch-stick{display:none}
#touch.title #touch-menu{display:none}
#rotate-hint{display:none;position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);max-width:70%;padding:6px 10px;background:#14252de6;border:1px solid #b2bd9b99;color:#f5f0d9;font-size:12px;text-align:center;pointer-events:auto}
body.touch-ui #restart,body.touch-ui #menu-button{display:none}
@media (orientation:portrait){
  body.touch-ui{place-items:start center}
  body.touch-ui #shell{transform-origin:top center;margin-top:calc(max(env(safe-area-inset-top),0px) + 62px)}
  body.touch-ui #rotate-hint{display:block}
  #touch-zone{height:46%}
}

/* menu: time and weather, and the touch layout that sits outside the scaled frame */
#menu .world{margin-top:6px;padding-top:5px;border-top:1px solid #3c534d}
#menu .row.pick{grid-template-columns:62px 1fr}
#menu .opts{display:flex;gap:4px;flex-wrap:wrap}
#menu .opt{padding:2px 7px;border:1px solid #6b7f73;background:#243836;color:#cdd7c9;font:9px system-ui;cursor:pointer}
#menu .opt.on{background:#bd7950;border-color:#ead7a2;color:#fff}
#menu.full{position:fixed;z-index:40;inset:0}
#menu.full .panel{max-height:none;transform-origin:center}
#menu.stack .panel{width:270px}
#menu.stack .cols{grid-template-columns:1fr;gap:8px}
#menu.stack .actions{flex-wrap:wrap}
#touch.quiet #touch-menu{display:none}
#menu h3 .small{margin-left:6px;vertical-align:middle;text-transform:none;letter-spacing:0}
#menu .row{margin:2px 0}
#menu .check{margin-top:5px}
#menu .world{margin-top:5px;padding-top:4px}
#menu .actions{margin-top:7px}