:root{color-scheme:dark;--paper:#fff;--muted:#aaa;--line:#555;--night:#000}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--paper);font:13px/1.5 Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;background:#0009;color:var(--paper);border:1px solid var(--line);padding:10px 14px;transition:background .15s,border-color .15s}button:hover{background:#333;border-color:var(--muted)}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--paper);outline-offset:4px}a{color:var(--muted)}button[disabled]{opacity:.4;cursor:default}[hidden]{display:none!important}#world{position:fixed;inset:0;isolation:isolate}#ocean{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;cursor:crosshair}.masthead{position:absolute;top:32px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.masthead button{pointer-events:auto;font:11px monospace;padding:12px 16px}.masthead button span{margin-left:14px}.eyebrow{font:9px/1.5 monospace;letter-spacing:2px;color:var(--muted);margin:0 0 8px}h1{font:42px/1 var(--font-display);letter-spacing:1px;margin:0}h2{font:27px/1.2 var(--font-heading);font-weight:normal;margin:8px 0 17px}.intro{color:var(--muted);font:12px var(--font-reading);margin:12px 0 0}.horizon-note{position:absolute;left:38px;right:38px;bottom:32px;display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1.3px;color:var(--muted);pointer-events:none}.dock{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;background:#000d;border:1px solid var(--line);box-shadow:0 12px 40px #0008;white-space:nowrap}.dock button{border-color:transparent;background:transparent;font:11px monospace;padding:11px 13px}.dock button:hover{background:#333}.dock-rule{height:17px;width:1px;background:var(--line);margin:0 3px}.dock #count{font-size:9px;color:var(--muted);margin-left:10px}.guidance{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);margin:0;color:var(--muted);font:10px monospace;white-space:nowrap;pointer-events:none}#notice{position:absolute;top:126px;left:50%;transform:translate(-50%,-5px);opacity:0;pointer-events:none;font:11px/1.5 monospace;color:var(--paper);padding:10px 15px;background:#000b;transition:opacity .7s,transform .7s;max-width:340px;text-align:center}#notice.visible{opacity:1;transform:translate(-50%,0)}#landmarks{position:absolute;inset:0;pointer-events:none}.landmark{position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:none;pointer-events:auto;transform:translate(-50%,-50%);color:var(--paper);border-radius:50%}.landmark::before{content:'';position:absolute;inset:7px;border:1px solid #fff8;transform:rotate(45deg);transition:transform .25s,border-color .25s}.landmark:hover{background:#0005}.landmark:hover:before,.landmark:focus-visible:before{transform:rotate(45deg) scale(1.2);border-color:var(--paper)}.landmark .spark{font:16px var(--font-reading);text-shadow:0 1px 3px #000}.landmark .place-label{position:absolute;top:39px;left:50%;transform:translateX(-50%);padding:4px 7px;background:#000e;color:var(--paper);font:9px monospace;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}.landmark:hover .place-label,.landmark:focus-visible .place-label{opacity:1}.landmark.explored::before{border-color:#aaa6}.landmark.explored .spark{font-size:10px;color:var(--muted)}.landmark.spotlit::before{border-color:var(--paper)}#tuning{position:absolute;right:22px;top:20px;bottom:24px;width:322px;background:#080808f5;border:1px solid var(--line);box-shadow:0 16px 60px #000b;overflow:auto;padding:20px;scrollbar-width:thin;scrollbar-color:var(--line) #000;z-index:5}.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.panel-head h2{font-size:23px;margin:7px 0 10px}.panel-head .eyebrow{font-size:8px;letter-spacing:1px}.panel-head button{font-size:22px;padding:0 7px;border:0}.panel-intro{font-size:11px;color:var(--muted);margin:0 0 19px}details{border-top:1px solid var(--line);padding:14px 0 3px}summary{font:12px var(--font-reading);cursor:pointer;margin-bottom:12px}summary:focus-visible{outline:2px solid white;outline-offset:3px}.setting{margin:0 0 15px;display:block;font:10px monospace;color:var(--muted)}.setting output{float:right;color:var(--paper);font-size:10px}.setting input[type=range]{display:block;width:100%;height:16px;accent-color:var(--paper);margin:8px 0 0;cursor:pointer}.setting input[type=checkbox]{accent-color:var(--paper);vertical-align:middle;margin:0 8px 0 0}.setting select{background:#000;color:var(--paper);border:1px solid var(--line);display:block;width:100%;padding:7px;margin-top:8px;font:10px monospace}.setting-help{font:12px/1.5 var(--font-reading);color:var(--muted);margin:0 0 12px}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:18px;border-top:1px solid var(--line);margin-top:12px}.panel-actions button,.panel-actions a{font:9px/1.5 monospace;padding:9px 7px;text-align:center}.panel-actions a{align-self:center;text-decoration:none}#performance{font:9px monospace;color:var(--muted);margin-top:18px}dialog{position:fixed;inset:0 auto 0 36px;width:365px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 64px);margin:auto 0;padding:30px;background:#080808f5;color:var(--paper);border:1px solid var(--line);box-shadow:0 20px 90px #000a;scrollbar-width:thin}dialog::backdrop{background:#0003}dialog h2{font-size:30px;margin:10px 0 18px}.dialog-close{position:absolute;right:10px;top:8px;border:0;background:transparent;font-size:23px;padding:0 8px}dialog p{color:var(--muted);line-height:1.8;font-size:13px}.story-number{font:9px monospace;letter-spacing:2px;color:var(--muted)}.story-art{display:block;width:100%;height:82px;margin:18px 0 20px;image-rendering:pixelated}.story-action{width:100%;margin:12px 0 0;font:11px monospace}.story-reply{min-height:25px;font:italic 13px/1.8 var(--font-reading)!important;color:var(--paper)!important}.letter{border-left:1px solid var(--line);padding:0 0 0 16px;font:italic 16px/1.8 var(--font-reading);color:var(--paper);margin:20px 0}.story-note{font:9px/1.6 monospace!important;margin-top:18px!important}#entries{list-style:none;margin:22px 0;padding:0}#entries li{border-top:1px solid var(--line);padding:13px 0}#entries button{display:flex;text-align:left;align-items:center;justify-content:space-between;gap:15px;width:100%;border:0;padding:0;background:none}#entries strong{font:16px var(--font-reading);font-weight:normal;display:block}#entries small{color:var(--muted);font:9px monospace;display:block;margin-top:5px}#entries .unknown{color:var(--muted);font:14px var(--font-reading)}#entries .index{font:9px monospace;color:var(--muted)}.log-foot{font:10px/1.7 monospace;color:var(--muted)}.no-script,#graphics-error{position:absolute;left:20%;right:20%;top:35%;padding:25px;background:#000;border:1px solid var(--muted);z-index:20}@media(max-width:760px){.masthead{left:20px;right:20px;top:24px}h1{font-size:33px}.eyebrow{font-size:8px;letter-spacing:1.4px}.intro{font-size:11px;max-width:180px}.masthead button{font-size:10px;padding:10px}.masthead button span{display:none}.horizon-note{left:20px;right:20px;bottom:111px;font-size:7px}.horizon-note span:last-child{display:none}.dock{bottom:45px;gap:0;padding:3px;max-width:calc(100% - 28px)}.dock button{font-size:10px;padding:10px 8px}.dock #count{margin-left:4px;font-size:8px}.dock-rule{margin:0 1px}.guidance{font-size:8px;bottom:20px}#notice{top:135px;font-size:10px;max-width:270px;width:max-content}#tuning{top:auto;left:12px;right:12px;bottom:12px;max-height:70dvh;width:auto;padding:18px}dialog{left:16px;right:16px;top:auto;bottom:18px;max-height:68dvh;width:auto;margin:0;padding:26px}dialog h2{font-size:26px}.story-art{height:60px}.landmark{width:40px;height:40px}.landmark::before{inset:10px}.place-label{display:none}.no-script,#graphics-error{left:20px;right:20px}}@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important}} 

.visitor-previews{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.visitor-previews button{font:10px/1.5 monospace;padding:9px 6px}.visitor-previews #stop-creature{grid-column:1/-1}#visitor-status{margin-top:12px;color:var(--muted)}

@media(max-width:760px){#tuning.visitor-mode{max-height:43dvh}}

/* The visitor itself is the target; its label appears only on hover or focus. */
#visitor-target{position:absolute;padding:0;background:transparent;border:1px solid transparent;min-width:44px;min-height:44px;cursor:help;touch-action:manipulation}
#visitor-target:hover,#visitor-target:focus-visible{border-color:var(--muted);background:#0000;outline-offset:4px}
#visitor-target span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#000;color:var(--paper);border:1px solid var(--line);padding:5px 8px;font:9px/1.4 monospace;white-space:nowrap;opacity:0;pointer-events:none}
#visitor-target:hover span,#visitor-target:focus-visible span{opacity:1}
#visitor-sheet{width:420px;max-height:calc(100dvh - 48px);padding:24px;background:#000}
.visitor-sheet-head{position:sticky;top:-24px;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#000;padding:10px 0;border-bottom:1px solid var(--line);margin-top:-10px}
#visitor-sheet .dialog-close{position:static;line-height:1;padding:0 5px;font-size:25px}
.visitor-number{font:9px/1.5 monospace;letter-spacing:1.4px;color:var(--muted)}
#visitor-sheet h2{font-size:34px;margin:22px 0 4px;line-height:1.1}
#visitor-alias{margin:0 0 18px;font:italic 14px/1.6 var(--font-reading);color:var(--muted)}
.visitor-figure{margin:0;border:1px solid var(--line);padding:9px 8px 8px;background:#000}
.visitor-portrait-frame{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;background:#000}
.visitor-portrait-crop{position:relative;overflow:hidden;flex:none;isolation:isolate;background:#000}
/* Multiply the selected ink into the artwork: black stays black and detail is preserved. */
.story-art-frame{position:relative;isolation:isolate;background:#000;margin:18px 0 20px;mix-blend-mode:screen}
.story-art-frame .story-art{margin:0;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:grayscale(1)}
#story{width:420px}
@media(max-width:760px){#story{width:auto;max-height:85dvh}}
.story-art-frame::after,.visitor-portrait-crop::after{content:'';position:absolute;inset:0;background:var(--paper);mix-blend-mode:multiply;pointer-events:none}
.visitor-portrait{display:block;position:absolute;max-width:none;height:auto;image-rendering:auto;filter:grayscale(1)}
.visitor-figure figcaption{text-align:center;font:8px monospace;letter-spacing:2px;color:var(--muted);padding:4px 0}
#visitor-sheet .visitor-intro{font:italic 16px/1.6 var(--font-reading);color:var(--paper);margin:18px 0}
.visitor-stats{display:grid;grid-template-columns:1fr 1fr;margin:0 0 24px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.visitor-stats>div{padding:12px 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);min-width:0}
.visitor-stats dt{font:8px/1.5 monospace;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px}
.visitor-stats dd{font:15px/1.4 var(--font-reading);color:var(--paper);margin:0}
#visitor-sheet h3{font:10px/1.5 monospace;text-transform:uppercase;letter-spacing:1.4px;color:var(--paper);margin:0 0 10px}
#visitor-sheet p{font-size:12px;line-height:1.75}
#visitor-sheet .visitor-legend-note{font-size:10px;color:var(--muted);margin:10px 0 22px}
.visitor-local{border-top:1px solid var(--line);padding-top:20px}
#visitor-sheet .visitor-habitat{font:20px/1.3 var(--font-reading);color:var(--paper);margin:4px 0 14px}
.visitor-local dl{margin:0}.visitor-local dl>div{display:grid;grid-template-columns:50px 1fr;gap:10px;margin:6px 0;font:11px/1.6 Arial,sans-serif}
.visitor-local dt{color:var(--muted)}.visitor-local dd{margin:0;color:var(--paper)}
#visitor-sheet .visitor-note{margin:14px 0 20px}
#visitor-sheet .visitor-sources{margin-top:0;padding-top:12px}
#visitor-sheet .visitor-sources summary{font:10px/1.5 monospace;margin-bottom:10px;color:var(--muted)}
.visitor-source{font:11px/1.6 Arial,sans-serif;text-underline-offset:3px}
#visitor-sheet .visitor-sources p{font-size:10px}
.visitor-return{width:100%;margin-top:15px;font:11px/1.5 monospace;border-color:var(--muted)}
@media(max-width:760px){#visitor-sheet{inset:auto 12px 12px;width:auto;max-width:calc(100vw - 24px);max-height:85dvh;padding:20px}.visitor-sheet-head{top:-20px}#visitor-sheet h2{font-size:30px}.visitor-stats dd{font-size:14px}#visitor-target span{font-size:8px}}

/* Quiet scene controls. Interactive house facades do not cover the roofs. */
#house-lights,#island-life{position:absolute;inset:0;pointer-events:none}
.house-switch,.search-spot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:1px solid transparent;background:transparent;pointer-events:auto}
.house-switch:hover{background:transparent;border-color:#aaa6}.house-switch:disabled{pointer-events:none;opacity:1}
.search-spot{cursor:crosshair}.search-spot:hover{background:transparent;border-color:transparent}
.house-switch:focus-visible,.search-spot:focus-visible{outline:1px dashed var(--paper);outline-offset:2px}
.life-controls{position:absolute;right:38px;top:88px;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.life-controls button{font:10px/1.5 monospace;padding:8px 10px;background:#000b}
#hunt-count{color:var(--muted);margin-left:8px}#ink-toggle{border-color:#333}
#hunt-progress{font:11px monospace;color:var(--paper);border-top:1px solid var(--line);padding-top:18px}
#hunt-sheet details{margin-top:16px}#hunt-sheet #hunt-clue{font:italic 15px/1.6 var(--font-reading);color:var(--paper)}
@media(max-width:760px){.life-controls{top:auto;bottom:108px;right:20px;gap:5px}.life-controls button{font-size:9px;padding:7px 9px}#hunt-sheet{max-height:80dvh}}

/* Copy cleanup: remove the space left by field-guide labels. */
.visitor-sheet-head{justify-content:flex-end;border-bottom:0;padding:0;margin-top:0}
#visitor-sheet h2{margin-top:10px}
.keyboard-help{margin:12px 0}
.keyboard-help .setting-help{margin-bottom:4px}

#visitor-sheet h3{font:16px/1.4 var(--font-heading);text-transform:none;letter-spacing:0}

/* Reading copy has its own family so controls retain their existing UI fonts. */
p{font-family:var(--font-reading)}
.static-fallback{position:fixed;inset:0;overflow:auto;max-width:1100px;margin:auto;padding:clamp(24px,5vw,60px);background:#000;color:var(--paper);z-index:101}.static-fallback h1{font-family:var(--font-display);line-height:1.2}.static-fallback p{font:18px/1.7 var(--font-reading);max-width:55ch}.static-fallback img{display:block;width:100%;height:auto;margin-top:28px}.static-fallback button{min-height:44px;font:12px monospace}

/* Keep the existing control typography with touch-sized hit areas. */
.masthead button,.dock button,.life-controls button,.dialog-close,.panel-head button,.story-action,.panel-actions button,.visitor-previews button{min-height:44px;min-width:44px}
.landmark{width:44px;height:44px}
.setting:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center}
.setting input[type=range]{height:32px}
summary{min-height:44px;padding-block:12px}
.masthead{top:max(32px,env(safe-area-inset-top));left:max(38px,env(safe-area-inset-left));right:max(38px,env(safe-area-inset-right))}
@media(max-width:760px){
 .masthead{top:max(24px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
 .dock{bottom:calc(45px + env(safe-area-inset-bottom))}
 .life-controls{top:calc(84px + env(safe-area-inset-top));bottom:auto}
 #tuning{bottom:calc(12px + env(safe-area-inset-bottom))}
 dialog{bottom:calc(18px + env(safe-area-inset-bottom))}
 .guidance{bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){.dock #count{display:none}.dock button{padding-inline:6px}}
@media(min-width:761px) and (max-height:480px){
 .dock{bottom:calc(12px + env(safe-area-inset-bottom))}
 .guidance{display:none}
}