/* The Lookout Station (src/lookout.js). The room: the user's painting laid out in its own pixels (1855 x 1237,
   "design px", extended to 3:2: design/camp/lookout/README.md) and scaled to cover the page (.lk.stage); the
   maps on the desk and the door are cut from it, their outlines pulse now and then and pointing at one dims
   the rest, the cabin's way (styles/cabin.css). On a phone (.lk.stack) the painting is a backdrop and the two
   are tiles. The expedition map (.lk-over): the user's mock-up (design/camp/lookout/mockups/map-view.png),
   measured in the plate's px (1672 x 933: the mock-up's less 3.48 px in y); the plate covers the page, the
   left column and Head out keep to its corners. */
.lk{--lk-serif:"Crimson Text","Gowun Batang",Georgia,serif;--lk-sans:"Hind","Gowun Dodum",system-ui,sans-serif;
  position:absolute;inset:0;overflow:hidden;background:#0b0806;color:#faeed9;font-family:var(--lk-sans);opacity:0;transition:opacity .6s ease}
.lk.on{opacity:1}
.lk button{font-family:inherit;line-height:1;-webkit-tap-highlight-color:transparent}
.lk-title{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lk-stage{position:absolute;left:0;top:0;width:1855px;height:1237px;transform-origin:0 0;--day:0}
.lk-room,.lk-day{position:absolute;left:0;top:0;width:1855px;height:1237px;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.lk-day{opacity:var(--day);transition:opacity 2s linear}

/* pointing at a thing dims the rest of the room (the cabin's: the room at about half its light); the thing
   pointed at stays above, lit, until the room is back */
.lk-dim{position:absolute;inset:0;z-index:1;background:rgba(10,6,3,.5);opacity:0;transition:opacity .35s ease;pointer-events:none}
.lk-stage:has(.lk-thing:hover) .lk-dim,.lk-stage:has(.lk-thing:focus-visible) .lk-dim{opacity:1}

/* ---- the things: cut from the painting where it has them, by night and by day; on their own their outlines
   come and go softly, both together every 3 s (the cabin's) ---- */
.lk-things{position:absolute;inset:0;pointer-events:none}
.lk-thing{position:absolute;z-index:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;color:#faf1e6;transition:filter .2s,z-index 0s linear .35s}
.lk-thing img{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.lk-thing .obj{inset:0;width:100%;height:100%}
.lk-thing .obj.d{opacity:var(--day);transition:opacity 2s linear}
.lk-thing .ring{left:calc(-1 * var(--pad));top:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad));height:calc(100% + 2 * var(--pad));opacity:0;animation:lkRing 3s ease-in-out 1s infinite both;transition:opacity .25s}
@keyframes lkRing{0%{opacity:0}30%{opacity:.5}60%,100%{opacity:0}}
/* (they are the painting's own pixels: lifting one would show the painted copy under it, so it only lights) */
.lk-thing:hover,.lk-thing:focus-visible{z-index:2;filter:brightness(1.06);outline:none;transition:filter .2s,z-index 0s}
.lk-thing:hover .ring,.lk-thing:focus-visible .ring{opacity:1!important}
/* the name tag (the cabin's): the Korean name over the English one */
.lk-thing .tag{position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;box-sizing:border-box;padding:15px 24px 14px;border-radius:18px;background:rgba(48,26,10,.9);border:2.5px solid #c98a45;box-shadow:0 6px 18px rgba(0,0,0,.4);white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .2s,transform .2s;pointer-events:none}
.lk-thing .tag b{font:600 27px/1 var(--lk-sans);color:#fbeedd}
.lk-thing .tag i{font:400 18px/1 var(--lk-sans);font-style:normal;color:#e6cba6}
.lk-thing:hover .tag,.lk-thing:focus-visible .tag{opacity:1;transform:translate(-50%,0)}
.lk-thing.desk .tag{left:47%;bottom:calc(100% + 10px)}
.lk-thing.door .tag{left:50%;top:30%}
@media (prefers-reduced-motion:reduce){.lk-thing .ring{animation:none;opacity:.3}}

/* ---- Birch, the ranger (scripts/lookout/build-birch.py, mirrored): on the floor by the door, her boots on the
   floor at y 1000, 720 design px tall (the user, 2026-10-19: 20% bigger than the 600 the room's perspective gave),
   her right edge where it was (1316), clear of the door; a soft shadow under her boots; by night
   dimmer and warmer, as the lamps and the stove light her. She comes in from the door's side, the Library's
   Juno's way (src/library.js), and blinks now and then. Under the room's dim when a thing is pointed at. ---- */
.lk-npc{position:absolute;inset:0;pointer-events:none;filter:brightness(calc((1 - .34 * var(--night,0)) * var(--hl,1))) sepia(calc(.28 * var(--night,0))) drop-shadow(0 0 8px rgba(255,205,135,var(--glow,0)));transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out,filter .2s ease}
.lk.npc-away .lk-npc{transform:translateX(140px);opacity:0;transition:none}
.lk-npc img{position:absolute;display:block;user-select:none;-webkit-user-select:none}
.lk-birch{left:978.0px;top:282.2px;height:720px;width:auto}
.lk-blink{left:1084.0px;top:365.9px;width:107.6px;height:56.5px;opacity:0}
.lk-blink.shut{opacity:1}
.lk-shadow{position:absolute;left:999px;top:983px;width:256px;height:34px;border-radius:50%;background:radial-gradient(closest-side,rgba(30,14,4,.5),rgba(30,14,4,.22) 60%,rgba(30,14,4,0))}
/* pointing at her has her talk (src/talkbox.js): an unseen button over her figure, which lights her a little */
.lk-talk{position:absolute;z-index:3;left:1000px;top:285px;width:300px;height:715px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lk-talk img{display:none;width:100%;height:auto;pointer-events:none}
.lk-talk:focus-visible{outline:2px solid #f0c27a;outline-offset:4px;border-radius:14px}
.lk-stage:has(.lk-talk:hover),.lk-stage:has(.lk-talk:focus-visible){--hl:1.2;--glow:.3}
@media (prefers-reduced-motion:reduce){.lk-npc{transition:none}}

/* ---- a phone, or a window near square: the painting behind, the things as tiles at the bottom ---- */
.lk.stack .lk-stage{position:absolute;inset:0;width:auto;height:auto;transform:none!important}
.lk.stack .lk-room,.lk.stack .lk-day{position:fixed;width:100%;height:100%;object-fit:cover;object-position:46% 55%}
.lk.stack .lk-stage::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.15),rgba(11,8,6,0) 30%,rgba(11,8,6,.25) 60%,rgba(11,8,6,.72));pointer-events:none}
.lk.stack .lk-dim{display:none}
.lk.stack .lk-things{position:absolute;left:12px;right:12px;top:auto;bottom:calc(var(--safe-b) + 14px);display:grid;grid-template-columns:repeat(2,1fr);gap:10px;pointer-events:auto}
.lk.stack .lk-thing{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;aspect-ratio:1.25;border-radius:16px;background:rgba(34,20,11,.82);border:1.5px solid rgba(214,168,112,.3);overflow:hidden}
.lk.stack .lk-thing .obj{left:9%;top:9%;width:82%;height:58%;object-fit:contain}
.lk.stack .lk-thing .ring{display:none}
.lk.stack .lk-thing .tag{left:0;right:0;bottom:12px;top:auto;padding:0;gap:4px;border:0;background:none;box-shadow:none;opacity:1;transform:none!important}
.lk.stack .lk-thing .tag b{font-size:16px}
.lk.stack .lk-thing .tag i{font-size:11.5px}
.lk.stack .lk-thing:hover,.lk.stack .lk-thing:focus-visible{filter:brightness(1.1)}

/* ---- the expedition map (the mock-up): over the room, the room's corners put away ---- */
.lk-over{position:absolute;inset:0;z-index:5;overflow:hidden;background:#140b05;animation:lkIn .35s ease both}
.lk-over[hidden]{display:none}
@keyframes lkIn{from{opacity:0}to{opacity:1}}
.lk.atlas .lk-things{visibility:hidden}
.lk-ostage{position:absolute;left:0;top:0;width:1672px;height:933px;transform-origin:0 0}
.lk-plate{position:absolute;left:0;top:0;width:1672px;height:933px;display:block;user-select:none;-webkit-user-select:none}
/* the map on the felt, in perspective (src/lookout.js: SHEET_MATRIX), a little shadow under its edges */
/* (in the desk's warm sunlight, as the mock-up's map is) */
.lk-sheet{position:absolute;left:0;top:0;width:1000px;height:750px;transform-origin:0 0;filter:sepia(.32) brightness(1.06) drop-shadow(0 3px 3px rgba(26,14,4,.5))}
.lk-sheet .lk-map{display:block;width:1000px;height:750px}
/* the window's shadow on the felt goes on over the map (scripts/lookout/build-atlas.py: the shade), cut to it */
.lk-shade{position:absolute;left:300px;top:169px;width:1307px;height:607px;pointer-events:none;clip-path:polygon(172px .5px,1172px 43.5px,1307px 606.5px,0 580.5px)}
.lk-clip{position:absolute;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(20,10,2,.45))}
.lk-clip.l{left:516px;top:161.5px;width:68px;height:46px}
.lk-clip.r{left:1339px;top:189.5px;width:67px;height:46px}
.lk-marks{position:absolute;inset:0;pointer-events:none}
.lk-wait{position:absolute;left:300px;width:1307px;top:440px;margin:0;text-align:center;font:400 26px/1.3 var(--lk-serif);color:#f5e6cc;text-shadow:0 1px 8px rgba(0,0,0,.9)}
/* the episode's name and the compass rose, printed on the map where the mock-up has them */
.lk-name{position:absolute;left:488px;top:217px;color:#201913}
/* (Wildfire's campground is where the name goes on the other maps: its name goes on the forest at the bottom right) */
.lk-name.wildfire{left:1190px;top:672px}
/* (a pale haze under the name and the rose, as the mock-up's paper and fog are there: the painted maps are dark
   at their edges) */
.lk-haze{position:absolute;margin:0;background:url("../assets/camp/lookout/fog.webp") center/100% 100% no-repeat;filter:sepia(.55) brightness(1.04);opacity:.8}
.lk-haze.name{left:450px;top:180px;width:360px;height:120px}
.lk-haze.name.wildfire{left:1152px;top:635px}
.lk-haze.rose{left:1318px;top:228px;width:165px;height:132px}
.lk-name-i{position:absolute;left:0;top:0;width:73px;height:41px}
.lk-name-i.wave{left:12px;top:2px;width:42px;height:37px}
.lk-name-i.pine{left:18px;top:-6px;width:32px;height:44px}
.lk-name b{position:absolute;left:87px;top:9px;font:600 24px/1 var(--lk-serif);letter-spacing:.14em;white-space:nowrap}
.lk-name i{position:absolute;left:87px;top:35px;font:500 13.5px/1 var(--lk-sans);font-style:normal;white-space:nowrap;letter-spacing:.02em}
.lk-rose{position:absolute;left:1337.75px;top:231px;width:122px;height:122px;overflow:visible;transform:scaleY(.74) rotate(-7deg)}
.lk-rose-l{font:600 15px/1 var(--lk-serif)}
/* fog round a place never found (the mock-up's wisps), and the places */
.lk-fog{position:absolute;width:300px;height:170px;margin:-85px 0 0 -150px;background:url("../assets/camp/lookout/fog.webp") center/100% 100% no-repeat}
.lk-q{position:absolute;width:27px;height:27px;margin:-13.5px 0 0 -13.5px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 50% 40%,#5b3720,#3b2112);border:2px solid #e8c79a;box-shadow:0 1px 4px rgba(0,0,0,.5);font:700 17px/1 var(--lk-sans);color:#f7e8d0}
.lk-pin{position:absolute;width:0;height:0}
.lk-pin i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:#1c1510;border:2.6px solid #f7f1e7;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.lk-pin b{position:absolute;white-space:nowrap;font:600 18.5px/1 var(--lk-sans);color:#fffaf1;text-shadow:0 0 7px rgba(12,9,6,.95),0 0 3px rgba(12,9,6,.95),0 1px 2px #000}
.lk-pin.right b{left:15px;top:-22px}
.lk-pin.left b{right:15px;top:-22px}
.lk-pin.top b{left:0;bottom:12px;transform:translateX(-50%)}
.lk-pin.bottom b{left:0;top:12px;transform:translateX(-50%)}

/* ---- the left column and Head out, at the mock-up's scale, kept to the page's corners ---- */
.lk-edge{position:absolute;z-index:2;width:0;height:0}
.lk-edge.l{left:0;top:0;transform-origin:0 0}
.lk-edge.br{right:0;bottom:0;transform-origin:100% 100%}
.lk-edge.l::before{content:"";position:absolute;left:0;top:0;width:470px;height:933px;background:linear-gradient(90deg,rgba(20,10,4,.55),rgba(20,10,4,.32) 55%,rgba(20,10,4,0));pointer-events:none}
.lk-back,.lk-ep,.lk-go{position:absolute;box-sizing:border-box;padding:0;border:0;background:none;cursor:pointer;color:#f6e5c9;text-align:left}
.lk-back::before,.lk-ep::before,.lk-go::before{content:"";position:absolute;inset:0;border-style:solid;border-color:transparent;pointer-events:none}
.lk-back{left:28px;top:16.5px;width:295px;height:61px}
.lk-back::before{border-width:10px;border-image:url("../assets/camp/lookout/frame-back.webp") 10 fill / 10px stretch}
.lk-back-i{position:absolute;left:26px;top:13px;width:30px;height:37px}
.lk-back span{position:absolute;left:78px;top:22px;font:500 23px/1 var(--lk-sans);letter-spacing:.01em;white-space:nowrap}
.lk-head-i{position:absolute;left:28px;top:122.5px;width:94px;height:57px}
.lk-head h2{position:absolute;left:128px;top:115px;margin:0;font:600 42px/1 var(--lk-serif);color:#f4e4c9;white-space:nowrap}
.lk-head span{position:absolute;left:136px;top:161px;font:400 18.5px/1 var(--lk-serif);letter-spacing:.1em;color:#b99670;white-space:nowrap}
/* the expeditions: the chosen one in the gold frame, a little wider, with its chevron */
.lk-ep{left:21px;width:328px;height:104px}
.lk-ep::before{border-width:11px;border-image:url("../assets/camp/lookout/frame-ep.webp") 11 fill / 11px stretch}
.lk-ep.on{left:19px;width:345px;height:105px;cursor:default}
.lk-ep.on::before{border-width:12px;border-image:url("../assets/camp/lookout/frame-sel.webp") 12 fill / 12px stretch}
.lk-ep.s0{top:260.5px}.lk-ep.s1{top:378.5px}.lk-ep.s2{top:498px}
.lk-ep:not(.on):hover{filter:brightness(1.12)}
.lk-ep-i{position:absolute;color:#ebcda8}
.lk-ep-i.mtn{left:5px;top:29px;width:88px;height:50px}
.lk-ep-i.wave{left:11px;top:26px;width:66px;height:58px}
.lk-ep-i.pine{left:15px;top:14.5px;width:56px;height:76px}
.lk-ep b{position:absolute;left:109px;top:22px;font:400 30.5px/1 var(--lk-serif);color:#f8ead2;white-space:nowrap}
.lk-ep i{position:absolute;left:110px;top:61.5px;font:400 15px/1 var(--lk-serif);font-style:normal;letter-spacing:.15em;color:#c9a57c;white-space:nowrap}
.lk-ep i:not(.ko){text-transform:uppercase}
.lk-ep i.ko{font:500 20.5px/1 var(--lk-sans);letter-spacing:0;top:58.5px}
.lk-ep.on b{left:110px}
.lk-ep-chev{position:absolute;left:303px;top:38px;width:26px;height:29px;display:none}
.lk-ep.on .lk-ep-chev{display:block}
/* Head out: the brass plate */
.lk-go{right:31px;bottom:45.5px;width:382px;height:101px;color:#381c0a}
.lk-go::before{border-width:13px;border-image:url("../assets/camp/lookout/frame-go.webp") 13 fill / 13px stretch}
.lk-go:hover{filter:brightness(1.07)}
.lk-go-i{position:absolute;left:31px;top:23px;width:88px;height:49px}
.lk-go span{position:absolute;left:139px;top:35px;font:700 36.5px/1 var(--lk-sans);white-space:nowrap}
.lk-go-chev{position:absolute;left:327px;top:34px;width:27px;height:32px}
.lk-back:focus-visible,.lk-ep:focus-visible,.lk-go:focus-visible{outline:2px solid #f0c27a;outline-offset:3px}
/* the page's Back to camp and settings step aside while the map is open (styles/camp.css) */

/* ---- the expedition map on a phone, or a window near square (no mock-up: the same parts, stacked): the desk
   darkened behind, Back and the expeditions in a row at the top, the map flat across the screen
   (src/lookout.js, fitAtlas), Head out at the bottom ---- */
.lk.stack .lk-over::before{content:"";position:absolute;inset:0;background:url("../assets/camp/lookout/atlas-plate.webp") 48% 40%/cover no-repeat;filter:brightness(.4) saturate(.9)}
.lk.stack .lk-ostage{width:100%;height:100%;transform:none!important}
.lk.stack .lk-plate,.lk.stack .lk-shade,.lk.stack .lk-clip,.lk.stack .lk-name,.lk.stack .lk-rose,.lk.stack .lk-haze{display:none}
.lk.stack .lk-sheet{filter:sepia(.28) brightness(1.04) drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.lk.stack .lk-wait{left:0;width:100%;top:45%;font-size:18px}
.lk.stack .lk-fog{width:170px;height:96px;margin:-48px 0 0 -85px}
.lk.stack .lk-q{width:22px;height:22px;margin:-11px 0 0 -11px;border-width:1.5px;font-size:14px}
.lk.stack .lk-pin i{left:-6px;top:-6px;width:12px;height:12px;border-width:2px}
.lk.stack .lk-pin b{font-size:12.5px}
.lk.stack .lk-pin.right b{left:10px;top:-16px}
.lk.stack .lk-pin.left b{right:10px;top:-16px}
.lk.stack .lk-pin.top b{bottom:9px}
.lk.stack .lk-pin.bottom b{top:9px}
.lk.stack .lk-edge{transform:none!important;width:auto;height:auto}
.lk.stack .lk-edge.l{left:12px;right:12px;top:calc(var(--safe-t) + 12px)}
.lk.stack .lk-edge.l::before,.lk.stack .lk-head{display:none}
/* (clear of the camp menu's arrow on the left edge, as the cabin's name is) */
.lk.stack .lk-back{position:relative;left:0;top:0;width:auto;height:42px;display:inline-flex;align-items:center;padding:0 18px 0 38px;margin-left:22px}
.lk.stack .lk-back::before{border-width:7px;border-image-width:7px}
.lk.stack .lk-back-i{left:13px;top:10px;width:17px;height:21px}
.lk.stack .lk-back span{position:relative;left:auto;top:auto;font-size:15px}
.lk.stack .lk-eps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:10px}
.lk.stack .lk-ep{position:relative;left:auto!important;top:auto!important;width:auto!important;height:62px!important;text-align:center}
.lk.stack .lk-ep::before{border-width:7px;border-image-width:7px}
.lk.stack .lk-ep-i{left:50%!important;top:9px!important;width:34px!important;height:24px!important;transform:translateX(-50%)}
.lk.stack .lk-ep-i.pine,.lk.stack .lk-ep-i.wave{width:26px!important}
.lk.stack .lk-ep b{left:4px;right:4px;top:39px;font-size:14px;overflow:hidden;text-overflow:ellipsis}
.lk.stack .lk-ep i,.lk.stack .lk-ep-chev{display:none!important}
.lk.stack .lk-edge.br{left:12px;right:12px;bottom:calc(var(--safe-b) + 12px)}
.lk.stack .lk-go{position:relative;right:auto;bottom:auto;width:100%;height:56px}
.lk.stack .lk-go::before{border-width:8px;border-image-width:8px}
.lk.stack .lk-go-i{left:20px;top:12px;width:56px;height:31px}
.lk.stack .lk-go span{left:0;right:0;top:17px;text-align:center;font-size:21px}
.lk.stack .lk-go-chev{left:auto;right:20px;top:15px;width:17px;height:21px}

/* ---- Birch on a phone: her cameo above the tiles (whose height is the two-column grid's: (100vw - 34px) / 2
   wide at 1.25), coming in from the right as she does; pointing at it has her talk ---- */
.lk.stack .lk-npc{display:none}
.lk.stack .lk-talk{left:auto;top:auto;right:16px;bottom:calc(var(--safe-b) + 14px + (100vw - 34px) / 2.5 + 12px);width:70px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .45s ease-out}
.lk.stack .lk-talk img{display:block}
.lk.stack.npc-away .lk-talk{transform:translateX(60px);opacity:0;transition:none}