/* 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,:is(#quest-offer,.quest-offer-panel) .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; } }

/* The crystal belongs to the player until it is placed in the portal. */
#carried-crystal { position:absolute; z-index:3; left:12px; top:48px; display:grid; justify-items:center; gap:4px; padding:6px 9px; color:#defaff; background:#102c38ed; border:1px solid #68cae9; border-radius:9px; min-height:44px; }
#carried-crystal[hidden] { display:none; }
.crystal-token-label { font-size:11px; font-weight:700; }
.crystal-gem { display:block; width:26px; height:38px; background:conic-gradient(from 30deg,#c4f8ff,#3098dc,#8cecff,#1878ba,#c4f8ff); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.street-nav button.crystal-guide { border-color:#8ae7ff; box-shadow:0 0 15px #58bffb88,inset 0 0 12px #56cbfa30; animation:crystal-guide-glow 2.5s ease-in-out infinite; }
@keyframes crystal-guide-glow { 50% { box-shadow:0 0 22px #58bffbbb,inset 0 0 12px #56cbfa55; } }
#crystal-assembly { width:min(530px,90vw); text-align:center; padding:24px; border:1px solid #94c8d3; border-radius:20px; background:radial-gradient(ellipse at 50% 40%,#244e60,#10272d 75%); color:#f7e9c7; max-height:90dvh; overflow:auto; }
#crystal-assembly::backdrop { background:#03121dc9; }
#crystal-assembly h2 { font-size:clamp(22px,4vw,30px); }
#crystal-assembly p { color:#e0f0ee; }
.crystal-assembly-art { position:relative; width:220px; height:150px; margin:0 auto; }
.crystal-assembly-art i { position:absolute; left:92px; top:46px; width:36px; height:54px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(120deg,#e0fbff,#3299da); }
.crystal-assembly-art i:nth-child(1) { --piece-x:-76px; --piece-y:-20px; }
.crystal-assembly-art i:nth-child(2) { --piece-x:76px; --piece-y:-20px; }
.crystal-assembly-art i:nth-child(3) { --piece-x:0px; --piece-y:47px; }
#crystal-assembly[open] i { animation:crystal-join 1.8s ease-in-out both; }
.crystal-assembly-art .crystal-gem { position:absolute; left:80px; top:30px; width:60px; height:90px; }
#crystal-assembly[open] .crystal-gem { animation:crystal-reveal 2s ease-out both; }
@keyframes crystal-join { 0%,15% { transform:translate(var(--piece-x),var(--piece-y)) rotate(20deg); opacity:1; } 80% { opacity:1; } 100% { transform:translate(0,0); opacity:0; } }
@keyframes crystal-reveal { 0%,65% { opacity:0; transform:scale(.6); } 100% { opacity:1; transform:scale(1); } }
@media(max-height:450px) { #carried-crystal { top:44px; left:6px; padding:4px 7px; } #carried-crystal .crystal-gem { width:18px; height:25px; } #crystal-assembly { padding:12px; } #crystal-assembly h2 { margin:4px 0; } .crystal-assembly-art { height:115px; } #crystal-assembly p { margin:8px 0; } }
@media(prefers-reduced-motion:reduce) { .street-nav button.crystal-guide,#crystal-assembly[open] i,#crystal-assembly[open] .crystal-gem { animation:none; } .crystal-assembly-art i { display:none; } }

#crystal-assembly { top:var(--view-top,0px); bottom:0; margin:auto; height:fit-content; }

#local-admin { max-height:85dvh; overflow:auto; width:min(620px,92vw); }
.admin-quest { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid #91a5a333; text-align:left; }
.admin-quest span { display:grid; gap:5px; }
.admin-quest small { color:#c4d6d0; }
.admin-quest button { min-height:44px; padding:8px 12px; flex-shrink:0; }

/* Center within the visible viewport; tall worksheets stay scrollable. */
:is(#quest-offer,.quest-offer-panel), #puzzle, #troll-dialog, #fisher-dialog { top:calc(var(--view-top,0px) + var(--view-height,100dvh) / 2); bottom:auto; margin:0 auto; transform:translateY(-50%); height:auto; max-height:calc(var(--view-height,100dvh) - 16px); overflow:auto; }

#hugheim-map { position:fixed; inset:0; margin:auto; padding:0; width:min(calc(100vw - 16px),calc((var(--view-height,100dvh) - 16px) * 16 / 9)); max-width:none; max-height:calc(var(--view-height,100dvh) - 16px); height:fit-content; border:1px solid #b99a60; border-radius:8px; overflow:hidden; background:#14272b; }
#hugheim-map::backdrop { background:#07151c; }
.hugheim-map-frame { position:relative; }
.hugheim-map-frame>img { display:block; width:100%; height:auto; }
.map-scroll-label { position:absolute; left:var(--map-x); top:var(--map-y); transform:translate(-50%,-50%); min-height:44px; padding:8px 12px; border:0; border-radius:5px; color:#302414; background:transparent; box-shadow:none; font:600 clamp(12px,1.4vw,18px) Georgia,serif; white-space:nowrap; isolation:isolate; text-shadow:0 1px 1px #fff5; }
.map-scroll-label::before { content:""; position:absolute; inset:6px 0; z-index:-1; background:linear-gradient(100deg,#dfc692b8,#f4e6c5cc,#dfc692b8); border:1px solid #735a344d; border-radius:5px; box-shadow:0 2px 4px #0003; }
.map-scroll-label:hover::before { background:#f4e6c5ed; border-color:#80603a99; }
.map-scroll-label:focus-visible { outline:3px solid #a9f0ff; outline-offset:3px; }
.map-close { position:absolute; right:8px; top:8px; width:44px; height:44px; padding:0; border:1px solid #d4b578; border-radius:50%; background:#12282ce8; color:#f0dcaa; font-size:30px; }
#farm-world-map { position:absolute; top:54px; left:12px; min-height:44px; padding:10px 15px; background:#142c30ee; color:#f1dfb5; border:1px solid #b9a16a99; border-radius:7px; z-index:3; }
#farm-world-map[hidden] { display:none; }
@media(max-height:450px){.map-scroll-label { padding:8px 10px; } .map-close { top:3px; right:3px; } }

#world-map-button { right:88px; }
#world-map-button[hidden],#map-welcome[hidden] { display:none; }
.map-globe { width:46px; height:52px; display:block; filter:drop-shadow(0 3px 3px #0009); }
.map-globe svg { width:100%; height:100%; }
.new-map .map-globe { animation:map-invitation 2.5s ease-in-out infinite; }
@keyframes map-invitation { 50% { filter:drop-shadow(0 0 12px #a3eaff); } }
#map-welcome { position:absolute; top:14%; left:50%; transform:translateX(-50%); width:min(400px,calc(100% - 32px)); box-sizing:border-box; padding:14px 18px; border:1px solid #d2b375; border-radius:10px; background:#122c32f5; color:#f4e3bd; text-align:center; box-shadow:0 5px 20px #0008; }
#map-welcome strong { font:700 21px Georgia,serif; }
#map-welcome p { font-size:14px; line-height:1.45; margin:8px 0; color:#e2eee6; }
#map-welcome button { min-height:44px; padding:8px 20px; }
@media(max-height:450px){#world-map-button { right:78px; } .map-globe { width:34px; height:40px; } #map-welcome { top:12%; padding:8px 12px; } #map-welcome strong { font-size:17px; } #map-welcome p { font-size:12px; margin:4px 0; }}
@media(prefers-reduced-motion:reduce){.new-map .map-globe { animation:none; filter:drop-shadow(0 0 7px #a3eaff); }}

/* Shared icon row keeps captions aligned regardless of icon artwork. */
.journal-button { grid-template-rows:48px auto; align-items:center; }
.journal-cover { box-sizing:border-box; }
.map-globe { height:48px; }
#furnish-button { display:grid; grid-template-rows:48px auto; justify-items:center; align-items:center; gap:4px; padding:5px; width:100px; border:0; background:none; }
#furnish-button[hidden] { display:none; }
.furnish-icon { display:block; width:48px; height:48px; filter:drop-shadow(0 3px 3px #0008); }
.furnish-icon svg { width:100%; height:100%; }
#furnish-button:hover .furnish-icon { filter:drop-shadow(0 0 5px #d8b674); }
#furnish-button .journal-label { white-space:nowrap; }
@media(max-height:450px){.journal-button,#furnish-button { grid-template-rows:36px auto; } .map-globe,.furnish-icon { height:36px; } .furnish-icon { width:36px; }}

/* Fullscreen control must be inside the active modal to remain operable. */
#display-tools.in-dialog{position:sticky;top:auto;bottom:0;right:0;margin:8px 0 0 auto;width:44px;height:44px;z-index:20;clear:both;flex-shrink:0}
#display-tools.in-activity{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));margin:0}
#display-tools #fullscreen-toggle{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:28px;line-height:1;border:0;background:#10292be8;color:#ead6a4;border-radius:8px}

#display-tools[hidden]{display:none!important}

/* Same centered quest panel, with a compact six-term number sequence. */
#troll-dialog{text-align:center}
#troll-dialog .sequence-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:24px 0}
#troll-dialog .sequence-row span,#troll-dialog .sequence-row input{box-sizing:border-box;width:100%;min-width:0;padding:12px 2px;text-align:center;font-size:clamp(17px,3vw,30px);border:1px solid #bda66d;border-radius:8px;background:#0d262b;color:#f9e6b8}
#troll-dialog .sequence-row input{border:2px solid #e4c477;background:#294444}
#troll-dialog .answer-row{justify-content:center;flex-wrap:wrap}

/* Activity controls stay anchored to the visible game scene, outside grid flow. */
#fishing-stage > #display-tools.in-activity,
.cave-scene > #display-tools.in-activity{position:absolute;inset:auto max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) auto;transform:none;margin:0;width:44px;height:44px;align-self:auto;justify-self:auto}
/* Game pieces are moved, not selected as document text. Answer fields remain editable. */
.game-shell, #orchard-game, #feeding-game, #garden-game, #apple-catch-game, #fishing-game, #crab-cave{-webkit-user-select:none;user-select:none}
.game-shell input,.game-shell textarea,.game-shell [contenteditable="true"],dialog input,dialog textarea,dialog [contenteditable="true"]{-webkit-user-select:text;user-select:text}

/* Shared activity backdrop contract. Background fills the viewport; the logical
   playfield may be contained to preserve sprites, pointer coordinates and UI.
   New activities must declare --activity-background on their dialog and keep
   their foreground canvas/stage transparent. See docs/ACTIVITY_LAYOUT.md. */
#orchard-game{--activity-background:url('assets/steder/gullakergarden/orchard-v1.webp')}
#feeding-game{--activity-background:url('assets/steder/gullakergarden/feeding-yard-v1.webp')}
#garden-game{--activity-background:url('assets/steder/gullakergarden/garden-v1.webp')}
#apple-catch-game{--activity-background:url('assets/steder/lyslund/fridas-garden-v1.webp')}
#fishing-game{--activity-background:url('assets/steder/lyslund/strand/fishing-beach-v1.webp')}
#crab-cave{--activity-background:url('assets/steder/lyslund/strand/crab-cave-v1.webp')}
#dragon-game{--activity-background:url('assets/steder/takeskogen/dragon-clearing-v1.webp')}
dialog:is(#orchard-game,#feeding-game,#garden-game,#apple-catch-game,#fishing-game,#crab-cave,#dragon-game,#dragon-bridge,#wildlife-game)[open]{
 background-image:var(--activity-background);background-position:center;
 background-size:cover;background-repeat:no-repeat;border-radius:0;
 width:100vw;height:100dvh;max-width:none;max-height:none;
}
#garden-game #garden-board,#apple-catch-game #catch-stage,
#fishing-game #fishing-stage,#crab-cave .cave-scene,#dragon-game .dragon-scene{background:transparent}
/* Foreground canvas aspect ratios are owned by each activity, not world canvas. */
#crab-cave .cave-scene>canvas,#dragon-game .dragon-scene>canvas,
#apple-catch-game #catch-canvas,#garden-game #garden-hero{aspect-ratio:16/9}

#dragon-bridge{--activity-background:url('assets/steder/takeskogen/dragon-bridge-bank-v1.webp')}

/* Alva's catalogue: fixed pages keep purchases in place. Inventory is separate. */
#shop-dialog{width:min(1120px,96vw);max-width:96vw;height:min(720px,94dvh);max-height:94dvh;padding:clamp(20px,3vw,40px);background:#ead6a6 url('assets/steder/lyslund/hjem-og-butikk/alva-shop-frame-v1.webp') center/100% 100% no-repeat;color:#382b1d;border:0;border-radius:16px;overflow:auto;text-align:center}
#shop-dialog>h2{margin:0 0 5px;font-size:clamp(26px,3vw,42px);font-weight:700;color:#382b1d}
#shop-dialog>.close{position:absolute;right:18px;top:18px;float:none;margin:0;background:#4c3929;color:#ffedbd;border-radius:8px;width:36px;height:36px;padding:0;z-index:2}
#shop-dialog p{color:#57452d}#shop-dialog .shop-wallet{margin:0 0 12px;font-weight:700;font-size:16px}
.shop-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:14px}.shop-tab,.shop-page{border:1px solid #997849;border-radius:8px;background:#f5e6bf;color:#49351d;padding:9px 16px}.shop-tab[aria-pressed=true]{background:#244b40;color:#fff0c8}
.shop-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr);gap:22px}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:165px;gap:10px;min-height:340px}
.shop-product{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;padding:7px;background:#fff4d54d;border:1px solid #9b764867;border-radius:10px;color:#49351d}.shop-product[aria-pressed=true]{background:#ffefc8;border:2px solid #44684b;box-shadow:0 0 0 2px #44684b30}.shop-product strong{font-size:14px;line-height:1.15}.shop-product span{font-size:13px}.shop-product .item-preview{width:110px;height:90px;aspect-ratio:auto;cursor:pointer}
.shop-detail{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;border-left:1px solid #9b76485c;gap:10px}.shop-detail .item-preview{width:220px;height:179px;aspect-ratio:auto;cursor:default}.shop-detail h3{font:700 27px Georgia;margin:0}.shop-detail p{margin:0;font-size:15px;line-height:1.4}.shop-detail .shop-price{font-weight:700}.shop-detail small{font-size:12px}.shop-buy{min-width:150px;padding:12px 20px}.shop-buy:disabled{opacity:.65;cursor:default}.shop-pages{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:12px}.shop-page{padding:4px 18px}.shop-page:disabled{opacity:.35;cursor:default}#shop-dialog .shop-status{min-height:2.6em;margin:12px 0 0;font-size:14px;font-weight:700}
@media(max-height:650px){#shop-dialog{padding:20px 28px}.shop-grid{grid-auto-rows:125px;min-height:260px}.shop-product .item-preview{width:85px;height:69px}.shop-detail .item-preview{width:150px;height:122px}.shop-detail{gap:7px}.shop-tabs{margin-bottom:10px}#shop-dialog .shop-wallet{margin-bottom:7px}.shop-tabs button{padding:5px 12px}}
@media(max-width:720px){.shop-body{grid-template-columns:minmax(0,1.5fr) minmax(150px,1fr);gap:8px}.shop-detail{padding:8px}.shop-product strong{font-size:12px}.shop-detail h3{font-size:20px}.shop-detail p{font-size:12px}}
@media(max-height:420px){#shop-dialog{padding:12px 24px}#shop-dialog>h2{font-size:24px}#shop-dialog .shop-wallet{position:absolute;top:18px;left:24px;font-size:12px}.shop-grid{grid-auto-rows:78px;min-height:162px;gap:6px}.shop-product{padding:3px;gap:1px}.shop-product .item-preview{width:51px;height:41px}.shop-product strong,.shop-product span{font-size:10px}.shop-detail .item-preview{width:75px;height:61px}.shop-detail{gap:4px}.shop-detail p{font-size:11px}.shop-detail small{display:none}.shop-buy{padding:5px;min-width:120px}.shop-tabs{margin:4px 0 7px;gap:5px}.shop-tab{font-size:11px}.shop-pages{margin-top:5px}.shop-page{padding:1px 15px}#shop-dialog .shop-status{font-size:11px;margin-top:5px;min-height:2em}}

@media(max-height:420px){#shop-dialog .shop-tab{min-height:28px;padding:4px 10px}#shop-dialog .shop-page{min-height:26px;height:26px;padding:1px 15px}#shop-dialog .shop-buy{min-height:30px;padding:5px}#shop-dialog .shop-status{line-height:1.2}}

/* Compact storage, sharing Alva's illustrated frame. */
#furnishing-dialog{width:min(740px,94vw);max-height:92dvh;padding:28px;background:#ead6a6 url('assets/steder/lyslund/hjem-og-butikk/alva-shop-frame-v1.webp') center/100% 100% no-repeat;color:#382b1d;border:0;border-radius:16px;overflow:auto}
#furnishing-dialog h2{margin:0 40px 18px;color:#382b1d;font-size:28px}
#furnishing-dialog>.close{position:absolute;right:16px;top:16px;margin:0;background:#4c3929;color:#ffedbd}
.chest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:120px}
.chest-grid .shop-product{min-height:140px;padding:8px}.chest-grid .item-preview{width:105px;height:85px}.chest-grid strong{font-size:15px}.chest-grid span{font-size:13px}
#furniture-menu{position:fixed;z-index:1000;display:flex;flex-direction:column;gap:6px;padding:12px;width:190px;border:1px solid #c7ac70;border-radius:10px;background:#173638;color:#f3e0b4;box-shadow:0 8px 24px #0008}#furniture-menu[hidden]{display:none}#furniture-menu button{padding:8px;font-size:15px}#furniture-menu strong{text-align:center;margin-bottom:4px}
@media(max-height:500px){#furnishing-dialog{padding:18px}#furnishing-dialog h2{font-size:22px;margin-bottom:8px}.chest-grid .shop-product{min-height:88px;gap:1px}.chest-grid .item-preview{width:65px;height:53px}#furniture-menu{gap:3px;padding:8px}#furniture-menu button{padding:5px;min-height:28px}}

.furnish-icon .item-preview{width:100%;height:100%;object-fit:contain}