/* The Lookout Station's deck (src/deck.js), from the user's two mock-ups (design/camp/lookout/deck/mockups/,
   1672 x 941, "design px"): the view covers the page; the corners are measured on the mock-ups and scaled
   from the page's corners with --u (src/deck.js, fit). Over the station's room (src/lookout.js), above
   Birch's talk. */
.dk{--dk-serif:"Crimson Text","Gowun Batang",Georgia,serif;position:absolute;inset:0;z-index:6;overflow:hidden;background:#0b0d14;opacity:0;transition:opacity .45s ease;touch-action:none;-webkit-tap-highlight-color:transparent}
.dk.on{opacity:1}
.dk.pan{cursor:grab}
.dk.pan:active{cursor:grabbing}
.dk-stage{position:absolute;inset:0}
/* each view's things in a pane as wide as its painting (1672 or 3344 design px: the width is set by src/deck.js),
   placed and scaled by its camera */
.dk-pane{position:absolute;left:0;top:0;height:941px;transform-origin:0 0;will-change:transform}
/* the two views, each its night painting with the day one over it by the camp's clock; the new one settles
   from a touch closer as it fades in */
.dk-view{position:absolute;inset:0;opacity:0;transform:scale(1.035);transform-origin:50% 55%;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.dk[data-view="wide"] .dk-view.wide,.dk[data-view="close"] .dk-view.close{opacity:1;transform:none}
.dk-plate{position:absolute;left:0;top:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.dk-plate.d{opacity:var(--day,1);transition:opacity 2s linear}
/* what moves, inside its view (so it fades and settles with the painting): behind the Wide View's near things
   (.back), and in front of them (.near) */
.dk-fx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
@media (prefers-reduced-motion:reduce){.dk-view,.dk-plate.d{transition:none}}
/* the arrows at the sides while the view can be moved that way (the user, 2026-10-23): thick, white, half
   see-through, blinking slowly; just under the middle, clear of the page's menu tab at the left edge; scaled
   like the corners (--u, src/deck.js fit) */
.dk-hint{position:absolute;z-index:1;top:calc(50% + 30px);width:calc(60px * max(var(--u,1), .62));height:calc(120px * max(var(--u,1), .62));pointer-events:none;opacity:0;transition:opacity .6s ease}
.dk-hint.l{left:calc(env(safe-area-inset-left,0px) + 28px)}
.dk-hint.r{right:calc(env(safe-area-inset-right,0px) + 28px)}
.dk-hint.on{opacity:1}
.dk-hint svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));animation:dk-blink 2.8s ease-in-out infinite}
.dk-hint.r svg{transform:scaleX(-1)}
@keyframes dk-blink{0%,100%{opacity:.16}50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.dk-hint svg{animation:none;opacity:.4}}

/* ---- the corners ---- */
.dk-edge{position:absolute;z-index:2;width:0;height:0;transform:scale(var(--u,1))}
.dk-edge.tl{left:0;top:0;transform-origin:0 0}
.dk-edge.tr{right:0;top:0;transform-origin:100% 0}
.dk-edge.bl{left:0;bottom:0;transform-origin:0 100%}
.dk button{font-family:var(--dk-serif);line-height:1;padding:0;cursor:pointer}
.dk-ic{position:absolute;display:block;pointer-events:none}
.dk button:focus-visible{outline:2px solid #f0c27a;outline-offset:3px}
/* Back, and the title */
.dk-back{position:absolute;left:32px;top:24px;width:71px;height:59px;box-sizing:border-box;border:1.5px solid rgba(150,108,78,.55);border-radius:15px;background:rgba(42,28,26,.86);color:#fcd299;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.dk-back:hover{filter:brightness(1.15)}
.dk-ic.back{left:12.5px;top:8.5px;width:46px;height:40px}
/* (the pill hugs its word: the mock-up's is 346 wide round "Lookout Station", 23 px after it) */
.dk-title{position:absolute;left:111px;top:24.5px;height:59px;box-sizing:border-box;padding:0 23px 0 89px;border-radius:30px;background:rgba(6,5,14,.68);box-shadow:0 4px 14px rgba(0,0,0,.3);color:#f7c584;pointer-events:none;white-space:nowrap}
.dk-ic.peaks{left:13px;top:5.5px;width:68px;height:44px}
.dk-title h2{position:relative;top:11px;margin:0;font:600 35.4px/1 var(--dk-serif);color:#f4d6a0;white-space:nowrap}
/* Wide View / Close View: the chosen one ringed in orange light */
.dk-views{position:absolute;right:25px;top:24px;height:59px;box-sizing:border-box;display:flex;align-items:center;padding:0 2px 0 0;border-radius:30px;background:rgba(16,8,14,.8);box-shadow:0 4px 14px rgba(0,0,0,.3)}
/* (each segment as wide as its word needs, the mock-up's width at least: 188 and 181; the user's Korean, 멀리서
   보기 and 가까이에서 보기, runs longer, so the toggle grows to the left) */
.dk-seg{position:relative;flex:none;height:55px;box-sizing:border-box;border:2.5px solid transparent;border-radius:28px;background:none;color:#f3dcb5;transition:border-color .25s,background .25s,box-shadow .25s}
.dk-seg.wide{margin-left:-1px;min-width:188px;padding:0 21px 0 72px}
.dk-seg.close{min-width:181px;padding:0 21px 0 67px}
.dk-seg.on{border-color:#f0942c;background:rgba(36,15,3,.94);box-shadow:0 0 12px rgba(240,148,44,.55),inset 0 0 9px rgba(240,148,44,.22);cursor:default}
.dk-seg:not(.on):hover{background:rgba(255,236,205,.05)}
.dk-seg span{display:block;position:relative;top:1.5px;font:600 20px/1 var(--dk-serif);letter-spacing:-.025em;white-space:nowrap;text-align:left}
html[lang="ko"] .dk-seg span{letter-spacing:0;top:2.5px}
.dk-ic.wide{left:16px;top:6px;width:46px;height:38px;color:#fcc479}
.dk-ic.close{left:15px;top:11px;width:42px;height:34px;color:#fbbb6d}
.dk-seg:not(.on) .dk-ic{color:#7d6650}
/* the sound chip: Nature Sounds Only, or With Music */
.dk-sound{position:absolute;left:32px;bottom:40px;width:341px;height:62px;box-sizing:border-box;border:1.5px solid rgba(214,168,112,.34);border-radius:31px;background:rgba(48,20,4,.74);color:#edcf98;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dk-sound:hover{filter:brightness(1.12)}
.dk-sound span{position:absolute;left:76px;top:20.5px;font:600 20.6px/1 var(--dk-serif);white-space:nowrap}
.dk-ic.leaf{left:21px;top:14px;width:38px;height:34px;color:#c18c54}
.dk-ic.note{left:24px;top:16px;width:30px;height:30px;color:#e2a865;display:none}
.dk-sound.music .dk-ic.leaf{display:none}
.dk-sound.music .dk-ic.note{display:block}
.dk-ic.bars{left:279px;top:12px;width:40px;height:32px;color:#ffda8c}

/* ---- a phone: the corners larger (src/deck.js), the title giving way to the toggle, clear of the camp
   menu's arrow on the left edge ---- */
.dk.narrow .dk-title{display:none}
.dk.narrow .dk-edge.tl{left:calc(env(safe-area-inset-left,0px) + 26px);top:var(--safe-t,0px)}
.dk.narrow .dk-edge.tr{top:var(--safe-t,0px)}
.dk.narrow .dk-edge.bl{bottom:var(--safe-b,0px)}