:root{color-scheme:light;--ink:#393529;--muted:#716a54;--paper:#f5e8c9;--line:#b6a075;--dark:#32382b;--cream:#f3e6c8}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Georgia,serif;color:var(--ink);background:#2d362b}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#f4e8ce;border-radius:3px;padding:.7rem 1rem;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible,#game:focus-visible{outline:3px solid #66857d;outline-offset:4px}button:disabled{cursor:default}h1,h2,p{margin:0}h2{font-size:1.8rem;font-weight:500;line-height:1.2}p{font-size:1.0625rem;line-height:1.65}a{color:#426050;text-underline-offset:4px}button:hover{background:#fff3d7}button:active{transform:translateY(1px)}[hidden]{display:none!important}
.topbar{height:80px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:3;padding:0 32px;background:#f1e5cc;border-bottom:3px solid #67563c;box-shadow:0 2px 0 #d6bf91}.world-title{display:flex;align-items:center;gap:13px}.world-title h1{font-weight:500;letter-spacing:.035em;font-size:1.65rem;line-height:1}.world-title #location{display:block;font-family:system-ui,sans-serif;letter-spacing:.21em;font-size:.75rem;margin-top:7px}.sigil{font-size:2.5rem;line-height:1;color:#877b52}.topbar nav{display:flex;align-items:center;gap:10px}.topbar nav button{font-size:.9375rem;border-color:#b9aa8c;background:transparent;padding:.55rem .95rem}.topbar nav #help-btn{width:36px;height:36px;padding:0;border-radius:50%}.topbar nav button span{margin-left:15px;color:#807657}#play-area{position:relative;height:calc(100dvh - 80px);min-height:200px;overflow:hidden}#game{width:100%;height:100%;outline:none}#game canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#scene-label{position:absolute;pointer-events:none;left:26px;top:24px;display:flex;flex-direction:column;gap:5px;padding:12px 17px;background:#303a2cdd;border:1px solid #c1c8a45a;color:#f5ead5;box-shadow:0 3px 10px #1c271b30}#scene-kicker{font:.7rem system-ui,sans-serif;letter-spacing:.2em}#scene-name{font-size:1.2rem}.controls{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);display:flex;gap:22px;align-items:center;padding:10px 18px;background:#303a2ced;color:#f1e8d2;border:1px solid #bfc8a360;white-space:nowrap;font:.875rem system-ui,sans-serif;pointer-events:none}.controls span{display:flex;gap:4px;align-items:center}kbd{font:.75rem system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:3px;min-width:20px;height:23px;padding:0 3px;opacity:.8}.prototype-label{position:absolute;right:22px;bottom:22px;font:italic .875rem Georgia,serif;color:#f2ebd3;text-shadow:0 1px 4px #283324;pointer-events:none}#interact{position:absolute;left:50%;bottom:87px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:9px 19px;box-shadow:0 4px 0 #3f47389c;border:2px solid #7b6949;max-width:90%;font-size:1rem;z-index:2}#interact:active{transform:translateX(-50%) translateY(1px)}#toast{position:absolute;top:25px;left:50%;transform:translateX(-50%);background:#f5e9cf;box-shadow:0 5px 20px #28331e55;max-width:90%;padding:12px 20px;font-size:1rem;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}#loading{position:absolute;inset:0;background:#303a2c;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f1e3c2;z-index:5}.loading-star{font-size:3rem;animation:breathe 1.5s ease-in-out infinite}@keyframes breathe{50%{opacity:.35}}
.parchment{border:2px solid #766347;border-radius:4px;background:linear-gradient(115deg,#f8edcf,#eee0bc);color:var(--ink);padding:30px;box-shadow:inset 0 0 0 5px #f8eccf,inset 0 0 0 7px #c8b48c,0 15px 75px #17211788}.parchment::backdrop{background:#1e2b254a;backdrop-filter:blur(1px)}.close{position:absolute;right:13px;top:12px;width:34px;height:34px;padding:0;border:0;background:transparent;font:1.65rem Georgia,serif;z-index:2}.eyebrow{display:block;font:.7rem system-ui,sans-serif;letter-spacing:.18em;color:#716349;margin-bottom:10px}.visitor-dialog{width:470px;max-width:calc(100% - 28px);max-height:90dvh;padding:38px}.visitor-dialog p{margin:17px 0 22px}.visitor-dialog label[for]{display:block;font-size:.9375rem;margin-bottom:7px}#visitor-name{width:100%;padding:10px 12px;border:1px solid #a99775;background:#fff6de;font-size:1rem;color:var(--ink);border-radius:3px}.visitor-dialog fieldset{border:0;margin:23px 0;padding:0}.visitor-dialog legend{font-size:.9375rem;margin-bottom:12px}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.swatches label{position:relative;cursor:pointer}.swatches input{position:absolute;opacity:0}.swatch{display:block;border:1px solid transparent;padding:9px 3px 6px;text-align:center;font-size:.8125rem}.swatch:before{content:'';display:block;width:23px;height:23px;margin:0 auto 7px;border:3px solid #fff0cf;box-shadow:0 0 0 1px #8e7e5b;background:linear-gradient(to bottom,#bccbbd 62%,#465747 62%)}.heather:before{background:linear-gradient(to bottom,#d3c3d0 62%,#614e5d 62%)}.ochre:before{background:linear-gradient(to bottom,#dbcdad 62%,#6a5a34 62%)}.river:before{background:linear-gradient(to bottom,#b7ccd1 62%,#40595e 62%)}.swatches input:checked+.swatch{border-color:#8c7955;background:#e4d7b2}.swatches input:focus-visible+.swatch{outline:2px solid #4c6e5b;outline-offset:3px}.primary{background:#465a45;color:#fff3d7;border-color:#344b35;box-shadow:inset 0 0 0 2px #ffffff17}.primary:hover{background:#526c4f}.wide{width:100%;display:flex;justify-content:space-between;align-items:center}.visitor-dialog p.small{font:.8125rem system-ui,sans-serif;color:#746951;text-align:center;margin:15px 0 0}
.conversation{position:fixed;top:auto;bottom:32px;margin:0 auto;width:960px;max-width:calc(100% - 40px);max-height:calc(100dvh - 140px);padding:28px 28px 24px;grid-template-columns:minmax(0,1fr) 222px;gap:28px;overflow:auto}.conversation[open]{display:grid}.conversation-copy{min-width:0}.conversation-copy h2{margin-bottom:13px}#dialogue-text{min-height:64px;white-space:pre-line;line-height:1.55}#dialogue-role{padding-right:20px}#questions{display:grid;gap:4px;margin-top:16px;border-top:1px solid #c6b38c;padding-top:12px}#questions button{font-size:.9375rem;padding:8px 10px;text-align:left;background:transparent;border:1px solid transparent;line-height:1.3}#questions button:before{content:'›';display:inline-block;width:18px;color:#8d7650}#questions button:hover,#questions button[aria-pressed=true]{background:#e5d4ad;border-color:#c6b48e}#portrait-side{padding-top:26px;text-align:center;align-self:center}#portrait{width:100%;height:260px;image-rendering:pixelated;background-position:center;background-repeat:no-repeat;background-size:contain;mask-image:linear-gradient(#000 85%,transparent)}#portrait-name{display:block;font-size:1.35rem;padding:8px 0;border-top:1px solid #c3ae83}.portrait-flourish{display:block;color:#a39062;font-size:1.5rem;margin-top:6px}#dialogue-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}#dialogue-actions:empty{display:none}#dialogue-actions button,#dialogue-actions a{font-size:.9rem;padding:8px 11px;border:1px solid #b7a27b;background:#fbefd1;border-radius:3px}
.panel{width:640px;max-width:calc(100% - 30px);max-height:calc(100dvh - 90px);padding:35px;overflow:auto}.panel h2{margin-bottom:20px}.place-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.place-card{text-align:left;padding:14px;display:flex;flex-direction:column;gap:7px;background:#f8edcf}.place-card strong{font-size:1rem;font-weight:500}.place-card small{font:.8125rem/1.4 system-ui,sans-serif;color:#736952}.resource-card{border-top:1px solid #cab68f;padding:15px 0;display:flex;flex-direction:column;gap:8px}.resource-card h3{font-weight:500;font-size:1.15rem;margin:0}.resource-card p{font-size:.9375rem}.resource-card .unconnected{font:.8125rem/1.4 system-ui,sans-serif;color:#7a6c53}.resource-card button,.resource-card a{align-self:flex-start}.resource-card button{font-size:.9375rem;padding:6px 12px}.panel p{margin-bottom:13px}.realm-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}.realm-button{display:flex;gap:10px;align-items:center;text-align:left;background:#f9ecd1}.realm-button[aria-pressed=true]{border:2px solid #78694f;padding:calc(.7rem - 1px) calc(1rem - 1px);background:#dfd3b1}.realm-symbol{color:var(--realm-color);text-shadow:0 1px 1px #65502c;font-size:1.6rem;line-height:1}.portal-orb{width:32px;height:32px;border-radius:50%;background:var(--realm-color);box-shadow:0 0 20px var(--realm-color);margin:0 auto 14px}#portal-description{text-align:center}.travel-link{display:block;text-align:center;margin-top:15px}.help-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.help-rows p{font-size:1rem;border-bottom:1px solid #cfbb94;padding-bottom:12px}.help-rows kbd{margin-right:5px}.back-link{margin-top:15px;background:transparent;font-size:.9375rem}.storage-note{font:.8125rem/1.4 system-ui,sans-serif;margin-top:15px;color:#74684e}
@media(min-width:1700px){.topbar{padding:0 50px}#scene-label{left:40px;top:30px}.conversation{width:1000px}}@media(max-width:800px){.topbar{height:68px;padding:0 15px}.world-title h1{font-size:1.3rem}.world-title #location{font-size:.6rem}.sigil{font-size:2rem}.topbar nav{gap:6px}.topbar nav button{font-size:.8125rem;padding:7px 9px}.topbar nav button span{display:none}#play-area{height:calc(100dvh - 68px)}.controls{gap:12px;font-size:.75rem;padding:8px 12px}.controls span:nth-child(2){display:none}.prototype-label{display:none}.conversation{bottom:15px;max-height:calc(100dvh - 100px);grid-template-columns:minmax(0,1fr) 150px;gap:12px;padding:25px 20px}#portrait{height:190px}.conversation-copy h2{font-size:1.5rem}#dialogue-text{font-size:1rem}.parchment::backdrop{backdrop-filter:none}#scene-label{left:15px;top:15px}.panel{padding:30px 24px}}
@media(max-width:520px){.conversation{grid-template-columns:1fr;max-width:calc(100% - 20px)}#portrait-side{position:absolute;right:30px;top:35px;padding:0;width:65px}#portrait{height:75px;mask-image:none}#portrait-name,.portrait-flourish{display:none}.conversation-copy h2,.conversation-copy .eyebrow{padding-right:76px}.conversation-copy h2{margin-bottom:28px}#dialogue-text{min-height:0}#questions button{padding:9px 4px}.controls{display:none}#interact{bottom:24px}.visitor-dialog{padding:30px}.place-list,.realm-list{grid-template-columns:1fr}.topbar nav #visitor-btn{font-size:.75rem}#scene-label{padding:9px 12px}#scene-name{font-size:1rem}.help-rows{grid-template-columns:1fr}#toast{width:90%}}
.eyebrow,#scene-kicker{font-size:.75rem}#portrait{height:auto;aspect-ratio:1}.world-title #location{font-size:.75rem}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain} .reading-panel{width:760px}.guide-status{font:italic .9375rem/1.5 Georgia,serif;color:var(--muted)}.guide-contents{display:flex;flex-wrap:wrap;gap:7px;border-block:1px solid var(--line);padding:14px 0;margin:16px 0 24px}.guide-contents button{font-size:.9375rem;padding:6px 10px;background:transparent}.guide-section{margin-top:28px}.guide-section h3{font-size:1.35rem;line-height:1.4;font-weight:500;border-bottom:1px solid #cab68f;padding-bottom:8px;margin:0 0 15px;scroll-margin-top:20px}.guide-section h3:focus{outline:2px solid #66857d;outline-offset:5px}.guide-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.guide-actions .back-link{margin-top:0}
.sound-muted span{text-decoration:line-through}.music-volume-field{margin:26px 0 18px}.music-volume-label{display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:1rem}.music-volume-label output{font-variant-numeric:tabular-nums;color:var(--muted)}#music-volume{display:block;width:100%;height:36px;margin:10px 0 0;accent-color:#526b54;cursor:pointer;touch-action:pan-y}.panel .music-status{font-size:.9375rem;color:var(--muted);margin-bottom:0}
.resource-card.resource-featured{border:1px solid #8d7655;border-left:5px solid #60704b;background:#e7dbb9;padding:18px;margin-bottom:18px}.resource-featured a{font-weight:600}.resource-section{margin-top:26px}.resource-section>h3{font-weight:500;font-size:1.35rem;margin:0 0 10px}.resource-card h4{font-weight:500;font-size:1.15rem;margin:0}.resource-card p{font-size:1rem}.resource-card a{overflow-wrap:anywhere}
@media(max-width:520px){.topbar{padding-inline:10px}.world-title{gap:7px}.world-title .sigil{display:none}.topbar nav{gap:4px}.topbar nav button{padding-inline:7px}}

/* Let Safari's visible viewport determine the available play area. */
body{height:var(--viewport-height,100dvh);display:flex;flex-direction:column}
.topbar{flex-shrink:0}
#play-area{flex:1;min-height:0;height:auto}
#game{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#game canvas{width:100%;height:100%;touch-action:none}
#recenter{position:absolute;left:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2;min-height:44px;font-size:14px}
.conversation{column-gap:28px;row-gap:14px;grid-template-rows:auto 1fr}
.conversation-heading{grid-column:1;grid-row:1;min-width:0}
.conversation-heading h2{font-size:1.8rem;font-weight:500;line-height:1.2}
.conversation-heading .eyebrow{line-height:1.45;overflow-wrap:anywhere}
.conversation-copy{grid-column:1;grid-row:2}
#portrait-side{grid-column:2;grid-row:1 / span 2}
.panel>#panel-title,.panel>#panel-kicker{padding-right:38px}
.network-note{font:14px/1.5 system-ui,sans-serif;color:var(--muted)}
.visitor-dialog p.network-note{margin:16px 0}
#loading p{padding:0 20px;text-align:center}
@media(max-width:800px){
 .conversation{column-gap:12px}
 .conversation-heading h2{font-size:1.5rem}
}
@media(max-width:520px){
 .conversation{grid-template-columns:64px minmax(0,1fr);gap:16px 14px;padding:25px 20px}
 .conversation-heading{grid-column:2;grid-row:1;padding-right:32px;align-self:center}
 .conversation-heading h2{margin:0}
 #dialogue-role{padding-right:0;letter-spacing:.12em}
 .conversation-copy{grid-column:1 / -1;grid-row:2}
 #portrait-side{position:static;grid-column:1;grid-row:1;width:64px;padding:0;align-self:start}
 #portrait{width:64px;height:64px;mask-image:none}
 .conversation .close{top:10px;right:10px;width:40px;height:40px}
}
@media(pointer:coarse){
 .controls,.prototype-label,#interact kbd{display:none}
 #interact{bottom:16px;min-height:44px}
 .topbar nav button{min-height:40px}
 .topbar nav #help-btn{width:40px;height:40px}
 #interact{left:auto;right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;max-width:min(60%,320px)}
 #interact:active{transform:translateY(1px)}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){
 .topbar{height:48px;padding:0 12px}
 .world-title h1{font-size:1.2rem}
 .world-title #location,.world-title .sigil{display:none}
 .topbar nav{gap:6px}
 .topbar nav button{font-size:14px;padding:5px 10px}
 .topbar nav button span{display:none}
 #scene-label{top:8px;left:10px;max-width:45%;padding:7px 10px}
 #scene-name{display:none}
 #scene-kicker{font-size:12px;letter-spacing:.1em}
 #interact{bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:7px 12px;font-size:14px}
 .conversation{bottom:8px;max-height:calc(100dvh - 64px);padding:22px;grid-template-columns:minmax(0,1fr) 100px;gap:12px}
 #portrait-side{padding-top:20px}
 .panel,.visitor-dialog{max-height:calc(100dvh - 24px);padding:26px}
}

/* Browser text stays crisp at device resolution, without enlarging the game canvas. */
#map-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none;contain:layout style paint}
.map-label{position:absolute;top:0;left:0;white-space:nowrap;font-family:Georgia,serif;font-size:max(.875rem,calc(1.0625rem * var(--map-zoom,1)));line-height:1.2;color:#f9f0da;background:#35412fec;padding:calc(5px * var(--map-label-scale,1)) calc(8px * var(--map-label-scale,1))}
.map-label-visitor{font-size:max(.875rem,calc(.9375rem * var(--map-zoom,1)));color:#fff6de;background:#3b5540;padding:calc(4px * var(--map-label-scale,1)) calc(7px * var(--map-label-scale,1))}