/* The scene is letterboxed inside a 16:9 stage; UI uses real, readable CSS pixels. */
html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#071419}button,input,select{font-family:inherit}button{min-height:44px}button:focus-visible{outline:2px solid #f0d899;outline-offset:2px}
body>header,main>.intro,main>.objective,.world-bottom{display:none}main{position:absolute;inset:48px 0 0;display:grid;place-items:center;max-width:none;padding:0;margin:0}.game-shell{width:var(--stage-width);height:var(--stage-height);box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:0;background:#091a20;box-shadow:none}canvas{flex:none;aspect-ratio:1200/540;object-fit:contain;user-select:none;-webkit-user-select:none}.world-top{top:0;left:0;right:0;height:40px;align-items:center;padding:0 10px;background:#102429}.place,.stars{padding:4px 8px;border:0;background:none;backdrop-filter:none;box-shadow:none;letter-spacing:.3px;font-size:11px}.stars b{display:inline;font-size:11px}.stars .coin-count{font-size:11px!important}.world-top .place{max-width:60%}.game-toolbar{position:absolute;left:8px;top:0;right:160px;height:48px;display:flex;align-items:center;gap:4px}.game-toolbar button{font-size:13px;padding:8px 12px}.at-start .game-toolbar{display:none}#display-tools{position:absolute;right:max(8px,env(safe-area-inset-right));top:0;z-index:10;height:48px;display:flex;align-items:center}#fullscreen-toggle{border:1px solid #bba16980;background:#142e32;color:#f0dfb5;border-radius:5px;padding:8px 12px;font-size:13px}#display-status{position:absolute;right:0;top:49px;width:260px;background:#10252e;color:#ecdfbf;font-size:12px;padding:8px;pointer-events:none}#display-status:empty{display:none}#display-tools:not(:focus-within) #display-status{clip-path:inset(50%);width:1px;height:1px;padding:0}
.game-actions{position:absolute;bottom:4px;right:8px;display:flex;gap:8px;align-items:center;height:48px}.game-actions #interact{position:static;transform:none;padding:8px 12px;max-width:230px;font-size:13px;white-space:normal}.game-actions #travel{font-size:12px;border:1px solid #8d815d55;border-radius:4px}.touch-controls{display:none;position:absolute;left:8px;bottom:4px;margin:0;gap:5px;height:48px}.touch-device .touch-controls{display:flex}.touch-controls button{width:48px;height:48px;min-width:48px}.touch-controls span{display:none}.touch-device #interact span{display:none}#toast{top:44px;padding:8px 12px;font-size:12px;max-width:80%;z-index:2;pointer-events:none}
#startup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);min-height:0;box-sizing:border-box;padding:12px 4%;}.start-top{padding-right:140px}.start-title{margin:8px 0 0}.start-title h1{font-size:clamp(38px,7vh,92px)}.start-title p{margin:5px 0}.start-stage{min-height:0;max-width:1060px;grid-template-columns:1fr minmax(240px,340px) 1fr;gap:10px}.start-menu{grid-column:auto;grid-row:auto;margin:0;padding:12px 18px}.start-hero,.start-hero.right{grid-column:auto;grid-row:auto;max-width:280px;min-height:0;justify-self:center}.start-hero .hero-art{height:min(42vh,340px);width:auto;aspect-ratio:3/4}.start-foot{margin:6px 0}.start-menu h2{margin:4px 0}.start-menu p{margin:6px 0}.start-menu button{padding:10px;margin:4px 0}.menu-rune{font-size:24px}
dialog,#puzzle,.setup-panel{box-sizing:border-box;position:fixed;top:var(--view-top,0px);bottom:auto;margin:8px auto;width:min(760px,calc(100% - 24px));max-width:760px;max-height:calc(var(--view-height,100dvh) - 16px);overflow:auto;overscroll-behavior:contain;padding:20px 28px;scroll-padding:12px}dialog .close{width:44px;height:44px;top:0;right:0;z-index:2;background:#152c30;border-radius:5px}dialog h2{font-size:30px;margin:4px 36px 8px}dialog p{font-size:14px;line-height:1.5}.setup-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;text-align:left}.setup-panel fieldset{margin:12px 0}.setup-panel .hero-option .hero-art{height:88px;width:66px}.hero-option{padding:6px}.setup-panel .note{margin:6px 0}.setup-panel input[type=text],.setup-panel select{font-size:16px;min-height:44px}.setup-panel input[type=radio],.setup-panel input[type=checkbox]{width:20px;height:20px;vertical-align:middle}.operations{gap:6px}.operations label{padding:10px 6px;min-height:44px;box-sizing:border-box}.operations input{margin-right:4px}.setup-actions{margin-top:10px;position:sticky;bottom:-20px;background:#14292e;padding:8px 0;z-index:1}.setup-error:empty{display:none}#puzzle .portrait,#quest-offer .portrait{float:left;margin:0 16px 8px 0;width:70px;height:74px}#puzzle #quest-intro{margin:4px 0;padding:0;border:0}#puzzle #equation{clear:both;margin:8px 0;padding:6px;font-size:36px}#puzzle #story{margin:6px 0}#feedback{margin:6px 0;min-height:20px}.answer-row input{font-size:20px;min-height:44px;box-sizing:border-box}.answer-row button{font-size:14px}#quest-book .section-heading{margin:12px 0;display:block}#quest-book .quests{grid-template-columns:1fr}#quest-book footer{gap:12px}#quest-book .quest strong{font-size:22px}
#orientation-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at center,#244743,#07171e 75%);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;color:#f0dfb5}#orientation-screen h1{font:36px Georgia;max-width:420px;line-height:1.2}#orientation-screen p{font-size:15px;line-height:1.6}.rotate-phone{font:100px Georgia;color:#e2c784;animation:rotate-phone 2.8s ease-in-out infinite}.orientation-blocked> :not(#orientation-screen){visibility:hidden!important}.orientation-blocked dialog::backdrop{background:transparent;backdrop-filter:none}.orientation-blocked *{animation-play-state:paused!important}#orientation-screen .rotate-phone{animation-play-state:running!important}@keyframes rotate-phone{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media(max-height:550px){.start-top,.start-title .eyebrow,.start-title p,.start-foot,.menu-rune,.start-hero figcaption{display:none}.start-title{margin:0}.start-title h1{margin:0;font-size:40px}.start-stage{width:100%;max-width:850px}.start-menu{padding:8px 14px}.start-menu h2{font-size:25px}.start-menu p{font-size:12px;line-height:1.3}.start-hero .hero-art{height:54vh}.start-menu #load-status{margin:2px 0;min-height:14px}dialog,#puzzle,.setup-panel{padding:12px 24px}.setup-panel h2{font-size:26px}.setup-panel>.note{margin:4px}.setup-panel .hero-option .hero-art{height:64px;width:48px}.setup-actions{bottom:-12px}.world-top .stars b:not(.coin-count){display:none}}
@media(max-width:700px){.game-toolbar{right:130px;left:2px;gap:0}.game-toolbar button{font-size:12px;padding:8px}.game-actions #travel{max-width:125px;padding:4px 8px}.game-actions #interact{max-width:175px}.touch-controls{left:4px;gap:3px}.touch-controls button{width:44px;min-width:44px}.game-actions{right:4px;gap:4px}#fullscreen-toggle{font-size:12px;padding:6px}.world-top{padding:0 4px}.place{font-size:10px}.start-stage{grid-template-columns:1fr 250px 1fr}.start-hero .hero-art{height:46vh}.setup-columns{gap:14px}}
@media(prefers-reduced-motion:reduce){.rotate-phone,.hero-art{animation:none!important}}

.quest-group h3{font:500 18px Georgia;color:#d9c18b;margin:10px 0}.quest-group .quests:empty:after{content:"Ingen oppdrag her ennå.";color:#9dafaa;font-size:13px;padding:8px}.easy-question{margin:8px auto;display:block}
.start-title h1{margin:0}

/* Nearby speech bubbles and an informational quest book. */
.game-shell > #interact{bottom:8px;left:auto;right:8px;transform:none;min-height:44px;z-index:3}
/* Content-sized parchment trim with a single, readable type scale. */
.game-shell > #interact.npc-bubble{bottom:auto;right:auto;width:max-content;max-width:min(260px,calc(100% - 16px));padding:10px 14px;border-radius:12px 12px 12px 3px;background:linear-gradient(145deg,#244447,#142b30);color:#fff0cc;border:2px solid #cfb476;text-align:left;box-shadow:inset 0 0 0 2px #142b30,inset 0 0 0 3px #cfb47635,0 4px 14px #0006;line-height:1.45;font:700 14px/1.45 'DM Sans',sans-serif}
#interact.npc-bubble::after{content:'';position:absolute;left:var(--tail-x);bottom:-8px;width:12px;height:12px;background:#193237;border-right:2px solid #cfb476;border-bottom:2px solid #cfb476;transform:translateX(-50%) rotate(45deg)}
#interact.npc-bubble strong,#interact.npc-bubble span,#interact.npc-bubble small{display:block;margin:0;font:inherit;color:inherit;overflow-wrap:anywhere}
#interact.npc-bubble strong{color:#f4d68e}
#interact.npc-bubble:hover{border-color:#ffe2a0;background:linear-gradient(145deg,#2b5051,#193237)}
article.quest:hover{transform:none;box-shadow:none}article.quest.undiscovered{opacity:.65}
@media(max-height:450px){.game-shell > #interact.npc-bubble{padding:7px 10px;font-size:13px}}

/* Let the scene aspect ratio, rather than an extra 16:9 frame, set the stage size. */
.game-shell{padding-top:40px;border:0}.touch-device .game-shell{padding-bottom:52px}
.game-toolbar{right:8px}
#display-tools{position:absolute;top:auto;bottom:5px;right:6px;height:44px;z-index:5}
#fullscreen-toggle{width:44px;height:44px;padding:0;border:0;border-radius:8px;background:#10292ba8;font-size:28px;color:#ead6a4;line-height:1}
#fullscreen-toggle:hover{background:#294949}#display-status{top:auto;bottom:48px}
.game-shell > #interact:not(.npc-bubble){right:60px}
#place-tip{position:absolute;z-index:4;pointer-events:none;padding:7px 12px;border:1px solid #c5ad73;border-radius:6px;background:#152e32ef;color:#f3dfb5;font:700 13px 'DM Sans',sans-serif}
#startup{width:100vw;height:100dvh;padding:24px 5%;justify-content:center}
.start-top{position:absolute;top:24px;left:5%;padding:0;font-size:11px;letter-spacing:3px}
.start-title{margin:0 0 20px}.start-title h1{font-size:clamp(52px,10vh,100px)}
.start-stage{flex:0;width:min(900px,100%);grid-template-columns:1fr minmax(240px,320px) 1fr;gap:32px;align-items:center}
.start-hero,.start-hero.right{width:100%;max-width:210px;height:300px;overflow:hidden;border:1px solid #c8ac6b80;border-radius:100px 100px 16px 16px;background:radial-gradient(ellipse at 50% 65%,#46615b99,#102c32bb);box-shadow:inset 0 0 0 5px #142d3055,0 14px 30px #0005;filter:none;display:flex;align-items:flex-end;justify-content:center}
.start-hero .hero-art{animation:none!important;transform:none!important;height:290px;width:218px;flex:none;filter:drop-shadow(0 5px 6px #0006)}
.start-menu{background:#10282cdb;padding:24px;border-radius:14px;border-color:#c8ac6b60;backdrop-filter:blur(5px)}
.start-menu p{font-size:14px;line-height:1.6;margin:0 0 18px}.start-menu button{padding:13px;margin:6px 0}.start-foot{margin:24px 0 0}
@media(max-height:550px){#startup{padding:12px 4%}.start-top{display:none}.start-title{margin:0 0 8px}.start-title h1{font-size:44px}.start-stage{gap:16px;grid-template-columns:1fr 250px 1fr}.start-hero,.start-hero.right{height:190px;max-width:145px}.start-hero .hero-art{height:190px;width:143px}.start-menu{padding:12px 16px}.start-menu p{font-size:12px;margin-bottom:8px}.start-menu button{padding:8px;margin:3px 0}.start-foot{display:none}}
.start-stage{flex:0 0 auto}

/* The supplied illustration already contains both heroes. */
.start-stage{width:min(320px,100%);grid-template-columns:minmax(0,1fr);gap:0}
@media(max-height:550px){.start-stage{width:250px;grid-template-columns:minmax(0,1fr)}}

.journal-button{position:absolute;top:48px;right:12px;z-index:3;width:66px;padding:5px;background:none;border:0;color:#f7e1b3;display:grid;justify-items:center;gap:4px}
.journal-cover{display:grid;place-items:center;width:42px;height:48px;background:linear-gradient(110deg,#422a22 12%,#996541 14%,#68432d 22%,#402b24);border:2px solid #b69254;border-left:5px solid #39271f;border-radius:3px 7px 7px 3px;box-shadow:3px 2px 0 #ead7a5,5px 4px 7px #0008,inset 0 0 0 3px #c2a36c35;font:26px Georgia;transform:rotate(-7deg)}
.journal-label{font:700 11px 'DM Sans',sans-serif;background:#142c30d9;padding:2px 5px;border-radius:4px}.journal-badge{position:absolute;top:0;right:4px;border-radius:50%;background:#f6d681;color:#283833;width:20px;height:20px;font-weight:800}
.has-reward .journal-cover{animation:journal-glow 2.4s ease-in-out infinite}.journal-button:hover .journal-cover{transform:rotate(0)}
@keyframes journal-glow{50%{box-shadow:3px 2px 0 #ead7a5,0 0 20px 5px #efd07f8a,inset 0 0 0 3px #c2a36c35}}
.claim-reward{align-self:flex-start;margin-top:8px;padding:9px 12px;font-size:13px}.coin-burst{display:inline-block;color:#f5d083;font-weight:800;font-size:21px;animation:coin-reveal .65s ease-out}#reward-status{min-height:28px}
@keyframes coin-reveal{from{transform:translateY(12px) scale(.75);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media(max-height:450px){.journal-button{top:44px;right:6px}.journal-cover{width:32px;height:36px;font-size:22px}.journal-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.has-reward .journal-cover,.coin-burst{animation:none}.has-reward .journal-cover{box-shadow:0 0 12px #efd07f}}

#reward-status:empty{display:none}#reward-status{position:sticky;top:0;z-index:2;padding:10px 44px 10px 12px;background:#172f32;border:1px solid #bca36c;border-radius:6px;text-align:center}

canvas{cursor:crosshair}

.home-edit{position:absolute;top:48px;left:12px;z-index:3;border:1px solid #c3a975;border-radius:6px;background:#163237e8;color:#f5dfb8;padding:8px 12px;font-size:13px}
.commerce-dialog .wares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;text-align:left}.ware{border:1px solid #b39b6260;background:#11272b;border-radius:9px;padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.ware h3{margin:0;color:#f2dfba;font-size:18px}.ware p{margin:0;font-size:13px}.ware small{color:#e7c88d}.ware button{font-size:13px;padding:8px;white-space:normal}.ware button:disabled{opacity:.6;cursor:default}.item-preview{width:160px;height:130px;max-width:100%;align-self:center;object-fit:contain}.ware .secondary{background:#223e40;color:#ebd8b1;border:1px solid #a58e6260;border-radius:4px}
#placement-bar{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;max-width:calc(100% - 120px);background:#123038f2;border:1px solid #dbc081;border-radius:8px;padding:6px 12px;color:#f0dfbd;font-size:13px}
#placement-bar .quiet{color:#f0dfbd}.placement-spot{position:absolute;transform:translate(-50%,-50%);z-index:4;max-width:150px;border:2px solid #f2d082;border-radius:14px;padding:8px 12px;background:#244a45e8;color:#fff0c6;font-size:12px;box-shadow:0 0 18px #efd99b77}
#local-admin label{display:grid;gap:8px;margin:16px 0;text-align:left}#local-admin input{min-height:44px;padding:10px}#local-admin form>.primary{padding:10px 20px}
@media(max-height:450px){.home-edit{top:44px;left:5px;font-size:12px}.commerce-dialog .wares{gap:8px}.ware{padding:8px}.item-preview{width:110px;height:90px}.placement-spot{font-size:11px;padding:5px;max-width:110px}#placement-bar{font-size:11px}}

.commerce-dialog>.close{position:sticky;top:0;float:right;margin-top:-8px;margin-right:-12px}.commerce-dialog>.close+h2{clear:none}

.furnishing-active #world { cursor: crosshair !important; }

#settings-dialog { width:min(540px,94vw); max-height:90dvh; overflow:auto; }
#settings-dialog > .close { position:sticky; top:0; float:right; }
#settings-form { clear:both; text-align:left; }
#settings-level { width:100%; margin:8px 0; }
.audio-settings { border:1px solid #d9bc7955; border-radius:12px; padding:16px; margin:20px 0; }
.audio-row + .audio-row { margin-top:20px; }
.audio-row > label:first-child { display:flex; justify-content:space-between; font-weight:700; }
.audio-row input[type=range] { width:100%; min-height:36px; accent-color:#d6bc79; padding:0; }
.audio-mute { display:flex; align-items:center; gap:10px; }
.audio-mute input { width:20px; height:20px; accent-color:#d6bc79; }
.settings-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
#settings-identity { color:#c5d1c7; }

#settings-dialog .settings-heading { display:flex; align-items:center; justify-content:space-between; position:sticky; top:-20px; z-index:3; background:#152c30; margin:-20px -28px 16px; padding:12px 20px; }
#settings-dialog .settings-heading h2 { margin:0; }
#settings-dialog .settings-heading .close { position:static; flex:0 0 44px; }
#settings-dialog .audio-mute { justify-content:flex-start; }
#settings-dialog .audio-mute input { flex:0 0 20px; margin:0; padding:0; }
#settings-test { padding:12px 18px; border:1px solid #b9a16a70; border-radius:5px; background:#243d3e; color:#eee0bc; }
#settings-level { padding:10px; border:1px solid #a4906055; border-radius:5px; background:#11272b; color:#f1e6c8; }

#story-intro { width:min(700px,calc(100% - 28px)); max-width:700px; color:#392b1a; border:1px solid #96713e; border-radius:18px 7px 20px 6px; padding:26px 44px; background:radial-gradient(ellipse at 50% 35%,#fff3ceaa,transparent 70%),repeating-linear-gradient(12deg,#80562106 0 1px,transparent 1px 5px),linear-gradient(100deg,#ba945f,#ead2a0 7%,#f1dfb8 50%,#d4b37b 94%,#ad844d); box-shadow:inset 0 0 35px #71441166,0 25px 90px #0009; text-align:center; }
#story-intro::backdrop { background:#061b20bb; backdrop-filter:blur(5px); }
#story-intro h2 { color:#493419; font:700 clamp(26px,4vw,40px) Georgia,serif; margin:12px 0 22px; }
#story-intro #story-page p { font-size:clamp(17px,2.1vw,21px); line-height:1.65; max-width:560px; margin:16px auto; }
#story-intro .story-kicker { font-size:11px; letter-spacing:3px; font-weight:700; }
.parchment-ornament { color:#81602f; font-size:28px; letter-spacing:14px; }
#story-count { color:#71552d; font-size:13px; }
.story-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #8d693655; padding-top:16px; }
.story-actions button { color:#4b351c; background:transparent; border:1px solid #87623566; border-radius:6px; padding:11px 14px; min-height:44px; }
.story-actions button:disabled { opacity:.4; }
#story-next { background:#364c3d; color:#fff2d0; border-color:#364c3d; }
#story-title:focus { outline:none; }
#story-error:empty { display:none; }
#story-error { color:#8a2920; }
#story-intro[open] { animation:unroll-story .45s ease-out; }
@keyframes unroll-story { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-height:550px) { #story-intro { padding:14px 26px; } #story-intro .parchment-ornament { display:none; } #story-intro h2 { margin:8px 0; font-size:25px; } #story-intro #story-page p { font-size:16px; line-height:1.45; margin:10px auto; } .story-actions { padding-top:8px; } }
@media(prefers-reduced-motion:reduce) { #story-intro[open] { animation:none; } }
#settings-story { padding:12px 18px; border:1px solid #b9a16a70; border-radius:5px; background:#243d3e; color:#eee0bc; }

#crystal-progress { display:flex; justify-content:center; gap:9px; margin:12px 0; } #crystal-progress[hidden] { display:none; } #crystal-progress span { width:12px; height:16px; background:#314b50; border:1px solid #95b1a766; border-radius:50% 50% 35% 35%; } #crystal-progress .lit { background:#f3d785; box-shadow:0 0 9px #f3d78599; border-color:#ffe8a8; }

#story-intro { top:var(--view-top,0px); bottom:0; margin:auto; height:fit-content; } #story-intro p { color:#493820; }

#story-voice { border:1px solid #87623566; border-radius:6px; padding:8px 16px; min-height:44px; color:#4b351c; background:#fff5db80; margin:0 0 12px; } #story-voice-status:empty { display:none; } #story-intro #story-voice-status { font-size:13px; }

.street-nav { position:absolute; top:139px; left:12px; right:12px; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.street-nav[hidden],.street-nav button[hidden] { display:none; }
.street-nav button { pointer-events:auto; max-width:190px; min-height:44px; padding:9px 12px; color:#f1dfb5; background:#142c30ee; border:1px solid #b9a16a99; border-radius:7px; font-size:13px; font-weight:600; box-shadow:0 3px 10px #0004; }
.street-nav [data-street=west] { order:0; }
.street-nav [data-street=east] { order:1; margin-left:auto; }
.street-nav button:hover { background:#294644; }
@media(max-height:450px) { .street-nav { top:106px; left:6px; right:6px; } .street-nav button { max-width:170px; font-size:12px; padding:7px 9px; } }