:root{
  color-scheme: dark;
  --night:#0b0d1a;
  --ink:#140f0c;
  --panel:rgba(20,15,12,.94);
  --wood:#5c4130;
  --wood-hi:#8a6448;
  --wood-lo:#1b130e;
  --cream:#f3e7cf;
  --cream-dim:#b8aa93;
  --cream-faint:#8a7f6e;
  --ember:#ff9a3c;
  --ember-hi:#ffc46b;
  --ember-deep:#c4561f;
  --moss:#9cc07e;
  --paper:#efe2c6;
  --paper-ink:#2b1f17;
  --f-story:"Alegreya",Georgia,"Times New Roman",serif;
  --f-ui:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --f-hand:"Patrick Hand","Comic Sans MS","Segoe Print",cursive;
  --f-px:"Silkscreen","Courier New",monospace;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --side-w:268px;
  --px-border:0 -3px 0 0 var(--wood),0 3px 0 0 var(--wood),-3px 0 0 0 var(--wood),3px 0 0 0 var(--wood);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--f-ui);font-size:15px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
canvas.px-canvas{position:fixed;left:0;top:0;display:block;image-rendering:crisp-edges;image-rendering:pixelated}
#game{z-index:0}
#scene{z-index:1;opacity:0;transition:opacity .9s ease;pointer-events:none}
body.night #scene{opacity:1;pointer-events:auto}
#meditationBackdrop{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease}
body.night.meditating #meditationBackdrop.active.ready{opacity:1}
#meditationBackdrop img,#meditationBackdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#meditationDayLayer{position:absolute;inset:0}
#meditationNight{position:absolute;inset:0;opacity:var(--night-mix,1);transition:opacity 3s linear}
#meditationBackdrop video{opacity:0;transition:opacity .6s ease}
#meditationBackdrop video.playing:not(.unavailable){opacity:1}
#meditationShade{opacity:var(--shade-mix,1);transition:opacity 3s linear}
.pxbox{background:var(--panel);box-shadow:var(--px-border),0 12px 30px rgba(0,0,0,.45)}
.pxi{display:block;flex:none}
.px{font-family:var(--f-px)}

/* buttons */
.btn{font:inherit;font-family:var(--f-ui);font-size:14px;color:var(--cream);background:#2a1f18;border:0;border-radius:0;padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .08s,background .15s;
  box-shadow:0 -2px 0 0 var(--wood-hi),0 2px 0 0 var(--wood-lo),-2px 0 0 0 var(--wood-hi),2px 0 0 0 var(--wood-lo),inset 0 -3px 0 0 rgba(0,0,0,.28)}
.btn:hover{background:#35281e}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ember);color:#2a1406;box-shadow:0 -2px 0 0 var(--ember-hi),0 2px 0 0 var(--ember-deep),-2px 0 0 0 var(--ember-hi),2px 0 0 0 var(--ember-deep),inset 0 -3px 0 0 rgba(0,0,0,.18)}
.btn.primary:hover{background:#ffab5a}
.btn.big{font-size:16px;padding:12px 20px}
.btn.ghost{background:rgba(12,10,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.btn:focus-visible,.icon-btn:focus-visible,.link-btn:focus-visible,.mood:focus-visible,.nav-item:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
.link-btn{background:none;border:0;color:var(--cream-dim);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:6px 2px}
.link-btn:hover{color:var(--cream)}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;background:#2a1f18;border:0;border-radius:0;padding:0;cursor:pointer;box-shadow:0 -2px 0 0 var(--wood-hi),0 2px 0 0 var(--wood-lo),-2px 0 0 0 var(--wood-hi),2px 0 0 0 var(--wood-lo)}
.icon-btn:hover{background:#35281e}

/* title */
/* The title (the user's picture, design/camp/title/mockup.png, 2026-10-23): the logo and the line under it
   in the upper part, the lantern and the button near the bottom, the languages in the corner. */
#title{position:fixed;inset:0;z-index:20;display:flex;justify-content:center;padding:calc(var(--safe-t) + max(24px,8vh)) max(20px,4vw) calc(var(--safe-b) + max(28px,6vh));box-sizing:border-box;background:#0b1020;transition:opacity 1.6s ease}
#title.gone{opacity:0;pointer-events:none}
.returning #title{display:none}
/* The lake behind (the user's picture, 2026-10-27): the day plate under the night one, which shows by the camp's
   time of day (--tn, 0 day to 1 night: src/early.js at the first paint, src/title.js after), the user's loop of
   the nearer scene over them once it plays (two copies trade places with a cross-fade), a light shade over all. */
:root{--tn:1}
.title-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#0b1020}
.tb-plate{position:absolute;inset:0;background:50% 50% / cover no-repeat}
.tb-day{background-image:url(../assets/title/bg-day.webp)}
.tb-night{background-image:url(../assets/title/bg-night.webp);opacity:var(--tn)}
/* Only the hour's plate is fetched (src/early.js: tn-day, tn-night, tn-mix), and the scene fades in once it is in
   (tb-wait until then); the words and the button once src/ui.js has written them (#title.ready). */
.tn-night .tb-day,.tn-day .tb-night{display:none}
.title-bg,.title-logo{transition:opacity .9s ease}
.tb-wait .title-bg,.tb-wait .title-logo{opacity:0}
#title .sub,.title-star,.title-foot,.title-lang{transition:opacity .6s ease}
.tb-wait #title .sub,.tb-wait .title-star,.tb-wait .title-foot,.tb-wait .title-lang,
#title:not(.ready) .sub,#title:not(.ready) .title-star,#title:not(.ready) .title-foot,#title:not(.ready) .title-lang{opacity:0;pointer-events:none}
.tb-vids{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.tb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;opacity:0;transition:opacity .7s ease}
.tb-vid.on{opacity:1}
.tb-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,14,.2) 0%,rgba(5,6,14,0) 38%,rgba(5,6,14,.26) 100%)}
.title-inner{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.title-head{display:flex;flex-direction:column;align-items:center;gap:10px}
/* (the logo, 2026-11-07: about twice as wide as tall, kept to about the old wordmark's area and within the window's height) */
.title-logo{display:block;width:min(46vw,72vh,1400px);max-width:100%;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
#title .sub{font-family:var(--f-story),"SS Dodum";font-size:clamp(16px,1.6vw,26px);letter-spacing:.04em;margin:0;color:#f4e4c4;text-align:center;text-shadow:0 1px 2px rgba(22,14,6,.6),0 2px 16px rgba(22,14,6,.45)}
/* (signed out here because the account signed in elsewhere: the one-sign-in rule, src/camp-presence.js; red, the user, 2026-10-31) */
#title .sub.alert{color:#ff5a4e}
.title-star{display:flex;align-items:center;gap:clamp(8px,.8vw,14px);color:#e9c47c;font-size:clamp(12px,1vw,16px);line-height:1;text-shadow:0 0 8px rgba(233,196,124,.6)}
/* (the mock-up's thin rule either side of the star) */
.title-star i{display:block;width:clamp(64px,9.5vw,170px);height:1px;background:linear-gradient(90deg,rgba(244,228,196,0),rgba(244,228,196,.8));box-shadow:0 1px 2px rgba(22,14,6,.35)}
.title-star i:last-child{background:linear-gradient(270deg,rgba(244,228,196,0),rgba(244,228,196,.8))}
.title-foot{margin-top:clamp(44px,15vh,170px);display:flex;flex-direction:column;align-items:center}
/* The title's one button, the mock-up's white pill in every state: Google's sign-in (its G), Back to camp, Start. */
#title .btn.tbtn{gap:12px;min-width:clamp(230px,18vw,300px);justify-content:center;height:clamp(50px,6.4vh,60px);padding:0 30px 2px;border-radius:999px;background:#fff;color:#1f1f1f;font:600 clamp(17px,1.35vw,22px)/1 var(--cp-bold);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:filter .15s,transform .08s}
#title .btn.tbtn:hover{background:#fff;filter:brightness(1.04)}
#title .btn.tbtn:active{transform:translateY(1px)}
#title .btn.tbtn[disabled]{opacity:1;filter:saturate(.75) brightness(.9)}
#title .btn.tbtn .gmark{width:22px;height:22px;flex:none}
/* The guide under the button (the user, 2026-10-29): about.html, underlined. */
.title-guide{margin-top:clamp(14px,2vh,22px);font-size:15px;color:#f4e4c4;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-shadow:0 1px 2px rgba(22,14,6,.5)}
.title-guide:hover{color:#fff}
/* The guide's window over the title (the user, 2026-10-30): the page in a frame under a bar in the settings card's
   dress (styles/camp.css); the dark around it, its X and Esc close it. A phone gets the whole window. */
/* (.camp-guide, not .guide: the notice board's For Newcomers heading and link carry .guide, and took this overlay's
   dark fixed box; the user saw it as a shadow over the board, 2026-11-01) */
.camp-guide{position:fixed;inset:0;z-index:22;display:flex;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 18px) 18px calc(var(--safe-b) + 18px);box-sizing:border-box;background:rgba(8,5,3,.6)}
.guide-box{display:flex;flex-direction:column;width:min(780px,100%);height:min(100%,920px);box-sizing:border-box;padding:8px;border:2px solid transparent;border-radius:20px;background:linear-gradient(180deg,#241a12 0,#1b120c 40%,#150f0a 100%) padding-box,linear-gradient(180deg,#f3b86c 0,#ef9944 12%,#ee9240 100%) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.55)}
.guide-top{position:relative;display:flex;align-items:center;flex:none;height:47px;padding:0 0 0 12px}
.guide-title{font:700 25px/1 var(--cp-bold);color:#fef5de}
.guide-x{position:absolute;right:0;top:2px;width:43.5px;height:42.5px;display:grid;place-items:center;padding:0;border:2px solid #6a4f39;border-radius:9px;background:linear-gradient(180deg,#413020,#33241a);box-shadow:inset 0 1px 0 rgba(255,220,170,.08),0 2px 6px rgba(0,0,0,.35);cursor:pointer}
.guide-x:hover{filter:brightness(1.15)}
.guide-frame{flex:1 1 auto;width:100%;min-height:0;margin-top:6px;border:0;border-radius:12px;background:#140f0c}
@media (max-width:760px){.camp-guide{padding:0}.guide-box{width:100%;height:100%;border-radius:0;border-width:0;padding:calc(var(--safe-t) + 6px) 8px calc(var(--safe-b) + 8px)}.guide-title{font-size:21px}}
.title-lang{position:absolute;right:max(22px,4vw);bottom:calc(var(--safe-b) + 24px);display:flex;align-items:center;gap:7px;font-size:15px;color:var(--cream-faint);text-shadow:0 1px 2px rgba(22,14,6,.6),0 2px 12px rgba(22,14,6,.4)}
.title-lang button{font:inherit;color:var(--cream-faint);background:none;border:0;padding:4px 2px;cursor:pointer}
.title-lang button:hover{color:var(--cream)}
.title-lang button[aria-pressed="true"]{color:var(--cream);cursor:default}
.title-lang button:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
@media (max-width:760px){.title-logo{width:min(86vw,72vh)}.title-foot{margin-top:clamp(40px,12vh,120px)}}

/* side navigation: the menu card, its items and the settings popover's place are in styles/camp.css */
/* (the settings themselves: styles/camp.css, from the user's mock-up of 2026-10-17) */
.set-note{margin:0;font-size:12px;color:var(--cream-faint);line-height:1.4}
.icon-btn.on{background:#3a2a1e;box-shadow:0 -2px 0 0 var(--ember-hi),0 2px 0 0 var(--ember-deep),-2px 0 0 0 var(--ember-hi),2px 0 0 0 var(--ember-deep)}

/* overlays */
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 58%,rgba(3,3,10,.5) 100%)}
body.night #vignette{opacity:0}
#vignette{transition:opacity 2s ease}
body.is-day:not(.night) #vignette{opacity:.35}
#bubbles{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.bubble{position:absolute;left:0;top:0;background:var(--paper);color:var(--paper-ink);font-family:var(--f-hand);font-size:16px;line-height:1.15;padding:4px 9px 6px;max-width:170px;width:max-content;word-break:keep-all;opacity:0;transition:opacity .45s;
  box-shadow:0 -2px 0 0 var(--paper-ink),0 2px 0 0 var(--paper-ink),-2px 0 0 0 var(--paper-ink),2px 0 0 0 var(--paper-ink)}
.bubble.show{opacity:1}
.bubble small{display:block;font-family:var(--f-ui);font-size:10.5px;color:#8a6a48;margin-bottom:1px}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;background:var(--paper);box-shadow:0 2px 0 0 var(--paper-ink),-2px 0 0 0 var(--paper-ink),2px 0 0 0 var(--paper-ink)}
#narration{position:fixed;z-index:4;left:50%;top:32%;transform:translate(-50%,-50%);font-family:var(--f-story);font-size:clamp(19px,2.6vw,28px);letter-spacing:.02em;text-shadow:var(--ink-halo);white-space:nowrap;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
#narration.show{opacity:1}
/* "..돌아왔다." (the user, 2026-10-23): fading in over 3 s, 6 px smaller than the narration's other lines. */
#narration.back{font-size:clamp(13px,calc(2.6vw - 6px),22px)}
#narration.back.show{transition-duration:3s}
#areaTitle{position:fixed;z-index:4;left:var(--view-c,50%);top:58%;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity 1.2s ease;pointer-events:none;white-space:nowrap}
#areaTitle.show{opacity:1}
#areaTitle .ko{font-family:var(--f-story);font-size:clamp(22px,3vw,34px);text-shadow:0 2px 16px rgba(0,0,0,.9);display:flex;align-items:center;gap:14px;justify-content:center}
#areaTitle .ko::before,#areaTitle .ko::after{content:"";width:28px;height:2px;background:var(--ember-hi);opacity:.7}
#areaTitle .en{font-family:var(--f-px);font-size:10px;letter-spacing:.4em;color:var(--ember-hi);margin-top:6px;text-shadow:0 1px 8px rgba(0,0,0,.9)}
#travel{position:fixed;z-index:6;left:var(--view-c,50%);top:calc(var(--safe-t) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:13.5px;white-space:nowrap}
#travel .dots{display:inline-flex;gap:3px}
#travel .dots i{width:3px;height:3px;background:var(--ember-hi);animation:dot 1s steps(1) infinite}
#travel .dots i:nth-child(2){animation-delay:.33s}#travel .dots i:nth-child(3){animation-delay:.66s}
@keyframes dot{0%{opacity:.25}50%{opacity:1}}
#mapTip{position:fixed;z-index:6;left:0;top:0;pointer-events:none;padding:6px 10px;font-size:13px;white-space:nowrap;transform:translate(-50%,calc(-100% - 14px))}
#mapTip .en{font-family:var(--f-px);font-size:10.5px;letter-spacing:.06em;color:var(--ember-hi);margin-right:6px}
#mapTip .soon{color:var(--cream-faint);font-size:12px;margin-left:6px}
#toast{position:fixed;z-index:15;left:var(--view-c,50%);bottom:calc(var(--safe-b) + 28px);transform:translate(-50%,8px);display:flex;align-items:center;gap:9px;padding:9px 15px;font-size:14px;max-width:calc(100vw - 44px);width:max-content;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){body.panel-open #toast{bottom:auto;top:calc(var(--safe-t) + 70px)}}
.hintline{position:fixed;z-index:6;left:var(--view-l,19px);margin-left:19px;bottom:calc(var(--safe-b) + 22px);font-size:13px;color:var(--cream);background:rgba(10,8,8,.72);padding:8px 12px;max-width:calc(100vw - 60px);transition:opacity .8s;display:flex;align-items:center;gap:8px;box-shadow:var(--px-border)}
#btnSkip{position:fixed;z-index:21;right:19px;bottom:calc(var(--safe-b) + 19px);font-size:13px}

/* dialog */
#dialog{position:fixed;z-index:16;left:var(--view-c,50%);bottom:calc(var(--safe-b) + 22px);transform:translateX(-50%);width:min(620px,calc(100vw - 38px));box-sizing:border-box;padding:13px 18px 18px;cursor:pointer}
#dlgSpeaker{font-size:13px;color:var(--ember-hi);letter-spacing:.04em;margin-bottom:3px}
#dlgText{font-family:var(--f-story);font-size:18px;line-height:1.65;min-height:1.65em;word-break:keep-all}
#dlgMore{position:absolute;right:16px;bottom:10px;width:10px;height:6px;background:var(--ember-hi);clip-path:polygon(0 0,100% 0,50% 100%);animation:bob 1s steps(2) infinite}
@keyframes bob{50%{transform:translateY(3px)}}
.name-form{display:flex;flex-direction:column;gap:10px;margin-top:12px;cursor:default}
.name-row{display:flex;gap:12px;flex-wrap:wrap}
.name-row input{flex:1 1 170px;min-width:0}
.name-state{margin:0;font-size:14px;line-height:1.3;color:var(--ember-hi)}
.name-form.busy{opacity:.7;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips .btn{font-size:13px;padding:5px 10px}
input[type=text],textarea{font:inherit;color:var(--cream);background:rgba(255,236,205,.06);border:0;border-radius:0;box-shadow:inset 0 0 0 2px rgba(243,231,207,.16);padding:9px 11px;outline:none;user-select:text;-webkit-user-select:text;box-sizing:border-box}
input[type=text]:focus,textarea:focus{box-shadow:inset 0 0 0 2px var(--ember)}
textarea{display:block;width:100%;font-family:var(--f-hand);font-size:20px;line-height:1.3;resize:none}
::placeholder{color:var(--cream-faint);opacity:1}

/* place panel: its shell (the card, the X, beside the menu, a phone's sheet) is in styles/camp.css */
.p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.p-eyebrow{font-family:var(--f-px);font-size:10px;letter-spacing:.2em;color:var(--ember-hi);margin-bottom:4px}
.p-head h2{font-family:var(--f-story);font-weight:700;font-size:23px;line-height:1.25;margin:0;text-wrap:balance}
.p-head .who{font-size:13px;color:var(--cream-dim);margin-top:4px;word-break:keep-all}
.p-close{flex:none}
.day-badge{text-align:right;flex:none}
.day-badge .num{display:block;font-family:var(--f-px);font-size:15px;color:var(--ember-hi);letter-spacing:.05em}
.day-badge .lbl{font-size:12px;color:var(--cream-dim)}
.sec{display:flex;flex-direction:column;gap:10px}
.sec-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cream-dim)}
.sec-label .px{font-size:9.5px;letter-spacing:.22em;color:var(--cream-faint)}
.hero-btn{width:100%;box-sizing:border-box;justify-content:flex-start;padding:13px 14px;text-align:left;gap:12px}
.hero-btn .t{display:block;font-family:var(--f-story);font-weight:700;font-size:16px;line-height:1.3}
.hero-btn .s{display:block;font-size:12.5px;opacity:.8}
.done-box{display:flex;gap:12px;align-items:center;padding:11px 13px;background:rgba(255,154,60,.08);box-shadow:inset 0 0 0 2px rgba(255,154,60,.28)}
.done-box .t{font-family:var(--f-story);font-weight:700;font-size:15px}
.done-box .s{font-size:12.5px;color:var(--cream-dim)}
.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mood{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px 6px;font:inherit;font-size:12px;color:var(--cream-dim);background:rgba(255,236,205,.04);border:0;border-radius:0;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(243,231,207,.1)}
.mood[aria-pressed="true"]{color:var(--cream);background:rgba(255,154,60,.14);box-shadow:inset 0 0 0 2px var(--ember)}
.row-end{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.err{font-size:12.5px;color:#ffb08a;min-height:1em}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.entry{display:grid;grid-template-columns:20px 1fr;gap:10px;padding:11px 12px;background:rgba(255,236,205,.035);box-shadow:inset 0 0 0 1px rgba(243,231,207,.09)}
.entry.mine{background:rgba(255,154,60,.07);box-shadow:inset 0 0 0 1px rgba(255,154,60,.25)}
.entry .ic{padding-top:3px}
.entry .meta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--cream-faint)}
.entry .name{font-size:14px;color:var(--cream)}
.tag{font-family:var(--f-ui);font-size:11px;color:var(--moss);box-shadow:inset 0 0 0 1px rgba(156,192,126,.45);padding:0 6px;line-height:17px;align-self:center;white-space:nowrap}
.entry .line{font-family:var(--f-hand);font-size:20px;line-height:1.22;margin:3px 0 7px;word-break:keep-all;overflow-wrap:anywhere}
.entry .warm{font-size:12.5px;padding:5px 10px}
.entry .got{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cream-dim)}
.p-foot{display:flex;gap:12px;flex-wrap:wrap}
.p-foot .btn{flex:1 1 auto;justify-content:center}
.soon-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ember-hi);box-shadow:inset 0 0 0 1px rgba(255,196,107,.45);padding:2px 8px;width:max-content}
.plan{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.plan li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14px;line-height:1.5;word-break:keep-all}
.plan li::before{content:"";width:6px;height:6px;background:var(--ember);margin-top:8px}
.muted{color:var(--cream-dim);font-size:13.5px;margin:0;word-break:keep-all}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{padding:10px;background:rgba(255,236,205,.04);box-shadow:inset 0 0 0 1px rgba(243,231,207,.09)}
.stat .v{font-family:var(--f-px);font-size:16px;color:var(--ember-hi);display:block;font-variant-numeric:tabular-nums}
.stat .k{font-size:12px;color:var(--cream-dim)}
input[type=range]{accent-color:var(--ember);width:140px}
input[type=checkbox]{accent-color:var(--ember);width:18px;height:18px;margin:0}
.name-edit{display:flex;gap:10px}
.name-edit input{flex:1;min-width:0}

/* building hosts: portrait + speech bubble */
.host{display:flex;align-items:center;gap:14px;margin-top:14px}
.host-ava{width:56px;height:56px;flex:none;image-rendering:crisp-edges;image-rendering:pixelated;box-shadow:0 0 0 2px var(--wood)}
.host-ava.drawn{width:72px;height:72px;image-rendering:auto;box-shadow:0 0 0 2px var(--wood-hi),0 0 0 4px var(--wood-lo)}
.host-say{position:relative;background:var(--paper);color:var(--paper-ink);padding:7px 12px 9px;max-width:460px;box-shadow:0 -2px 0 0 var(--paper-ink),0 2px 0 0 var(--paper-ink),-2px 0 0 0 var(--paper-ink),2px 0 0 0 var(--paper-ink)}
.host-say::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--paper);box-shadow:-2px 0 0 0 var(--paper-ink),0 -2px 0 0 var(--paper-ink),0 2px 0 0 var(--paper-ink)}
.host-who{display:flex;align-items:baseline;gap:8px;font-size:13px}
.host-who b{font-weight:700}
.host-who span{font-family:var(--f-px);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#8a6a48}
.host-say p{margin:1px 0 0;font-family:var(--f-hand);font-size:18px;line-height:1.2}
.panel .host{margin-top:0}
.pop .host{margin-top:0}

/* pop card */
.pop{position:fixed;z-index:11;left:var(--view-c,50%);bottom:calc(var(--safe-b) + 24px);transform:translateX(-50%);width:min(400px,calc(100vw - 38px));box-sizing:border-box;padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.pop h3{font-family:var(--f-story);font-weight:700;font-size:18px;margin:0;display:flex;align-items:center;gap:9px}
.pop p{margin:0;word-break:keep-all}
.pop .quote{font-family:var(--f-story);color:var(--cream-dim);font-size:14.5px}

/* fire-gazing night mode */
/* Any record's bar takes a press and a drag (src/music.js, data-seek; the user, 2026-10-29). (The water's own player,
   .mp, went the same day: the camp's player, styles/mini-player.css, shows by the water instead.) */
[data-seek]{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
[data-seek]:focus{outline:none}
[data-seek]:focus-visible{outline:2px solid #f0c27a;outline-offset:3px;border-radius:4px}
/* Google's mark (the fires' sign-in, the settings' Account) and the privacy policy's small link */
.gmark{width:20px;height:20px;flex:none;background:#fff;padding:2px;box-sizing:border-box}
.acct-link{font-size:12.5px;color:var(--cream-dim)}
/* inside an app's own browser (src/early.js): the line left behind, and the sign-in's way out */
#outside{display:none}
html.outside body > :not(#outside){display:none !important}
html.outside #outside{display:grid}
.fn-anyway{align-self:flex-end;font-size:12.5px;padding:0}
.fn-url{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 10px;color:var(--cream);background:rgba(255,236,205,.06);border:0;border-radius:0;box-shadow:inset 0 0 0 1px rgba(243,231,207,.22);user-select:text;-webkit-user-select:text}
/* The shared fire's log (src/fire/fire.js, styles/fire.css). */
.chat-list{flex:1;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;list-style:none;margin:0;padding:12px 16px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin;scrollbar-color:rgba(243,231,207,.2) transparent;user-select:text;-webkit-user-select:text}
.msg{font-size:14.5px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;animation:msgin .35s ease}
@keyframes msgin{from{opacity:0;transform:translateY(4px)}}
.msg .who{font-size:13px;margin-right:7px}
.msg .time{font-size:11px;color:var(--cream-faint);margin-left:6px;font-variant-numeric:tabular-nums}
.msg.sys{font-size:12.5px;color:var(--cream-faint)}
.msg.me .who{color:var(--ember-hi)}

/* waterside meditation */
#medUI{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:0;transition:opacity .8s ease .3s}
body.night.meditating #medUI{opacity:1}
/* A line from the camp's book, read out by the water (src/quotes.js, updateMeditation in src/ui.js). */
.med-quote{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:min(34em,calc(100vw - 48px));text-align:center;opacity:0;transition:opacity 1.8s ease;pointer-events:none}
.med-quote.show{opacity:.94}
.med-quote .q{display:block;font-family:var(--f-story);font-style:italic;font-size:clamp(19px,2.3vw,27px);line-height:1.5;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.85);word-break:keep-all}
.med-quote .by{display:block;margin-top:14px;font-size:13.5px;letter-spacing:.08em;color:var(--cream-dim);text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* The bookmark ribbon (ribbonSVG in src/quotes.js), at the end of the line by the water and in the library. */
svg.ribbon{display:inline-block;flex:none;vertical-align:-.12em;overflow:visible}
.med-mark{pointer-events:auto;font:inherit;font-style:normal;line-height:1;background:none;border:0;padding:0 2px 0 .5em;color:var(--cream-dim);cursor:pointer;filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}
.med-mark:hover,.med-mark[aria-pressed="true"]{color:var(--ember-hi)}
.med-mark:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
/* The Books card's menu by the water (its card, its boxes and the screen's layout: styles/camp.css). */
.qdrop{position:relative}
.quote-menu{position:absolute;z-index:5;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 38px));box-sizing:border-box;padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;font-size:14px;background:rgba(10,9,15,.88)}
.qm-list{display:flex;flex-direction:column;gap:7px}
.qm-cat{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.qm-cat input{margin:2px 0 0}
.qm-cat b{display:block;font-weight:600;line-height:1.3}
/* The menu's levels: a book or a category is a row that opens; a crumb goes back up. */
.qm-head{margin:0;font-family:var(--f-px);font-size:10px;letter-spacing:.18em;color:var(--cream-faint)}
.qm-back{align-self:flex-start;font:inherit;font-size:13px;color:var(--cream-dim);background:none;border:0;padding:2px 0;cursor:pointer}
.qm-back:hover{color:var(--cream)}
.qm-row{display:flex;align-items:center;gap:10px}
.qm-row input{margin:0}
.qm-row button{flex:1;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;background:none;border:0;padding:5px 0;font:inherit;color:var(--cream);text-align:left;cursor:pointer}
.qm-row button:hover b{color:var(--ember-hi)}
.qm-row b{display:block;font-weight:600;line-height:1.3}
.qm-row i{font-style:normal;font-size:18px;line-height:1;color:var(--cream-faint)}
.qm-row button:focus-visible,.qm-back:focus-visible{outline:2px solid var(--ember-hi);outline-offset:2px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{font:inherit;font-size:13.5px;color:var(--cream-dim);background:rgba(255,236,205,.04);border:0;border-radius:0;padding:7px 13px;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(243,231,207,.12)}
.chip-btn:hover{color:var(--cream)}
.chip-btn[aria-pressed="true"]{color:var(--cream);background:rgba(255,154,60,.14);box-shadow:inset 0 0 0 2px var(--ember)}
.chip-btn:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}

/* map panning */
#game.can-grab{cursor:grab}
#game.grabbing{cursor:grabbing}
.recenter{position:fixed;z-index:6;right:calc(var(--view-r,0px) + 19px);bottom:calc(var(--view-b,0px) + var(--safe-b) + 19px)}

/* building pages: a regular web page under a pixel-art roof */
.page{--roof-h:240px;--roof-min:60px;--pg-bg:#15100d;--pg-card:#1d1612;--pg-line:rgba(243,231,207,.1);position:fixed;z-index:8;inset:0;background:var(--pg-bg);opacity:0;transition:opacity .45s ease;user-select:text;-webkit-user-select:text}
.page.open{opacity:1}
.page-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:var(--wood) transparent}
.page-roof{position:sticky;top:calc(var(--roof-min) - var(--roof-h));z-index:3;height:var(--roof-h);overflow:hidden;background:#0b0d1a;box-shadow:0 12px 26px rgba(0,0,0,.4);transform:translateY(-16px);transition:transform .7s var(--ease)}
.page.open .page-roof{transform:none}
.page-roof canvas{display:block;image-rendering:crisp-edges;image-rendering:pixelated}
.page-body{max-width:1120px;margin:0 auto;padding:34px 40px 56px;box-sizing:border-box;opacity:0;transform:translateY(12px);transition:opacity .5s ease .15s,transform .6s var(--ease) .15s}
.page.open .page-body{opacity:1;transform:none}
.page-foot-in{max-width:1120px;margin:0 auto;padding:18px 40px 22px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--cream-faint);border-top:1px solid var(--pg-line)}
.porch{height:30px;background:repeating-linear-gradient(90deg,transparent 0 93px,rgba(26,20,16,.85) 93px 96px),linear-gradient(180deg,#1a1410 0 3px,#8a6242 3px 5px,#6e4a2c 5px 12px,#1a1410 12px 13px,#7a5433 13px 21px,#1a1410 21px 22px,#6b4a2f 22px 30px)}
.page select,.page input[type=number]{font:inherit;font-size:14.5px;color:var(--cream);background:rgba(255,236,205,.06);border:0;border-radius:0;box-shadow:inset 0 0 0 2px rgba(243,231,207,.16);padding:9px 11px;outline:none;box-sizing:border-box}
.page select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffc46b' d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.page select option{background:#1d1612;color:var(--cream)}
.page select:focus,.page input[type=number]:focus{box-shadow:inset 0 0 0 2px var(--ember)}
.page textarea{font-family:var(--f-ui);font-size:15px;line-height:1.55;resize:vertical}
.page .btn .n{font-family:var(--f-px);font-size:11px;margin-left:2px;opacity:.8}

/* camp kitchen */
.page a{color:var(--ember-hi);text-underline-offset:3px}
.kx h1{font-family:var(--f-story);font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.12;margin:6px 0 10px;text-wrap:balance}
.kx h1:focus{outline:none}
.kx h2{font-family:var(--f-story);font-weight:700;font-size:22px;line-height:1.3;margin:0 0 14px}
.kx h3{margin:0}
.kx .p-eyebrow{display:flex;align-items:center;gap:8px;margin:0}
.kx-lede{font-size:17px;line-height:1.55;color:var(--cream-dim);margin:0;max-width:60ch}
.kx-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 28px;flex-wrap:wrap}
.kx-hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.kx-stats{display:flex;gap:16px;font-size:13px;color:var(--cream-faint);white-space:nowrap}
.kx-stats b{font-family:var(--f-px);font-weight:400;font-size:12.5px;color:var(--ember-hi);margin-right:5px}
.kx-sample{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:9px 12px;font-size:13.5px;color:var(--cream-dim);background:rgba(255,196,107,.06);box-shadow:inset 0 0 0 1px rgba(255,196,107,.22)}
.kx-sec{margin-top:56px}
.kx .kx-h2{font-size:clamp(26px,3vw,32px);line-height:1.2;margin:0 0 24px}
.kx-h2 span{background:linear-gradient(transparent 58%,rgba(255,154,60,.45) 58%);padding:0 3px}
.kx-h2.center{text-align:center}

/* photos (pixel art stands in if a photo can't load) */
.kx-img{position:relative;overflow:hidden;background:#241a14}
.kx-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.kx-img img.px{image-rendering:crisp-edges;image-rendering:pixelated}
.kx-card:hover .kx-img img,.kx-titem:hover .kx-img img,.kx-slide:hover .kx-img img{transform:scale(1.045)}
.kx-open{all:unset;cursor:pointer}
.kx-open::after{content:"";position:absolute;inset:0;z-index:1}
.kx-open:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
.kx-card:hover .kx-open,.kx-titem:hover .kx-open,.kx-slide:hover .kx-open{text-decoration:underline;text-decoration-color:var(--ember);text-decoration-thickness:2px;text-underline-offset:4px}
.kx-kw{font-family:var(--f-px);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);display:flex;align-items:center;gap:8px}
.kx-kw.hot{color:var(--ember-hi)}
.kx-rate-row{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--cream-dim)}
.kx-rate-row.big{font-size:14px}
.kx-rate{display:inline-flex;align-items:center;gap:8px}
.kx-rate.none{color:var(--cream-faint)}
.kx-stars{display:inline-flex;gap:2px}
.kx-time{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cream-dim)}
.kx-meta{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.kx-tag{font-family:var(--f-px);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:5px 7px 4px;color:var(--ember-hi);box-shadow:inset 0 0 0 1px rgba(255,196,107,.42)}
.kx-tag.m-stove{color:#a9c6ee;box-shadow:inset 0 0 0 1px rgba(143,179,232,.42)}
.kx-tag.m-nocook{color:var(--moss);box-shadow:inset 0 0 0 1px rgba(156,192,126,.45)}
.kx-by{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--cream-dim)}
.kx-by .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kx-by.big{font-size:14px}
.kx-by.big b{color:var(--cream);font-weight:500}
.kx-by.big .kx-ava{width:42px;height:42px}
.kx-ava{width:28px;height:28px;flex:none;image-rendering:crisp-edges;image-rendering:pixelated}
.kx-ava.mid{width:42px;height:42px}
.kx-ava.big{width:56px;height:56px}
.kx-mallows{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.kx-note{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--cream-faint)}

/* 1. My Recipes */
.kx-my{margin-top:34px;padding:22px 24px 26px;background:linear-gradient(180deg,#231a14,#1a130f);box-shadow:inset 0 0 0 1px var(--pg-line)}
.kx-my-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kx .kx-logo{display:flex;align-items:center;gap:11px;margin:0;font-size:30px;line-height:1;letter-spacing:-.01em}
.kx-logo em{font-style:normal;color:#ff7f86}
.kx-car-nav{display:flex;gap:10px}
.kx-arrow{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;background:#2a1f18;box-shadow:0 -2px 0 0 var(--wood-hi),0 2px 0 0 var(--wood-lo),-2px 0 0 0 var(--wood-hi),2px 0 0 0 var(--wood-lo)}
.kx-arrow:hover{background:#35281e}
.kx-arrow[disabled]{opacity:.3;cursor:default}
.kx-arrow:focus-visible,.kx-tab:focus-visible,.kx-heart:focus-visible,.kx-savebtn:focus-visible,.kx-add:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
.kx-my-sub{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:10px 0 20px;font-size:14.5px;color:var(--cream-dim)}
.kx-my-sub strong{font-family:var(--f-story);font-size:20px;color:var(--cream)}
.kx-tabs{display:flex;gap:8px;flex-wrap:wrap}
.kx-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;color:var(--cream-dim);background:rgba(255,236,205,.04);border:0;padding:7px 13px;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(243,231,207,.12)}
.kx-tab[aria-pressed="true"]{color:var(--cream);background:rgba(255,95,109,.12);box-shadow:inset 0 0 0 2px #ff5f6d}
.kx-tab .n{font-family:var(--f-px);font-size:10.5px;color:var(--ember-hi)}
.kx-car{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 4);gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x pan-y;padding:4px 2px 8px;margin:0 -2px}
.kx-car::-webkit-scrollbar{display:none}
.kx-slide{position:relative;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line),0 8px 18px rgba(0,0,0,.25)}
.kx-slide-img{aspect-ratio:27/17}
.kx-slide-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:15px 16px 16px}
.kx-slide h3{font-family:var(--f-story);font-weight:700;font-size:18px;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kx-badge{position:relative;z-index:2;align-self:center;margin:-29px 0 2px;font-family:var(--f-px);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#2a1406;background:var(--ember-hi);padding:6px 11px 5px;box-shadow:0 -2px 0 0 #ffe2a6,0 2px 0 0 var(--ember-deep),-2px 0 0 0 #ffe2a6,2px 0 0 0 var(--ember-deep)}
.kx-savebtn{position:relative;z-index:2;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:10px 12px;font:inherit;font-weight:700;font-size:14.5px;color:var(--cream);background:transparent;border:0;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(243,231,207,.45)}
.kx-savebtn:hover{background:rgba(255,236,205,.06)}
.kx-savebtn[aria-pressed="true"]{color:#ffc2c2;box-shadow:inset 0 0 0 2px #ff5f6d}
.kx-slide .kx-note{margin-top:auto}
.kx-add{align-items:center;justify-content:center;gap:9px;min-height:250px;padding:20px;text-align:center;font:inherit;color:var(--cream);cursor:pointer;border:0;background:rgba(255,236,205,.02);box-shadow:inset 0 0 0 2px rgba(243,231,207,.18)}
.kx-add:hover{box-shadow:inset 0 0 0 2px var(--ember)}
.kx-add strong{font-family:var(--f-story);font-size:18px}
.kx-add span{font-size:13.5px;color:var(--cream-dim)}

/* 2. Trending Now */
.kx-trend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 44px}
.kx-titem{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start}
.kx-thumb{aspect-ratio:200/132}
.kx-titem-body{display:flex;flex-direction:column;gap:7px;padding-top:4px}
.kx-titem h3{font-family:var(--f-story);font-weight:700;font-size:20px;line-height:1.3;text-wrap:balance}
.kx-tmeta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cream-dim)}

/* 3. All Recipes */
.kx-toolbar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.kx-search{flex:1 1 320px;max-width:540px;display:flex;align-items:center;gap:10px;padding:0 12px;background:rgba(255,236,205,.05);box-shadow:inset 0 0 0 2px rgba(243,231,207,.14);cursor:text}
.kx-search:focus-within{box-shadow:inset 0 0 0 2px var(--ember)}
.kx-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--cream);font:inherit;font-size:15px;padding:11px 0;user-select:text;-webkit-user-select:text}
.kx-search input::-webkit-search-cancel-button{filter:invert(.75)}
.kx-sort{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:13.5px;color:var(--cream-dim)}
.kx-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;touch-action:pan-x pan-y}
.kx-chips .chip-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.kx-chips .sep{width:1px;height:22px;background:var(--pg-line);margin:0 4px;flex:none}
.kx-count{display:flex;align-items:center;gap:12px;margin:22px 0 16px;font-size:13.5px;color:var(--cream-faint)}
.kx-count .link-btn{font-size:13.5px;padding:0}
.kx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:36px 26px}
.kx-card{position:relative;min-width:0;display:flex;flex-direction:column}
.kx-card-img{aspect-ratio:3/2}
.kx-card.mine .kx-card-img{box-shadow:0 0 0 2px rgba(255,154,60,.45)}
.kx-heart{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;cursor:pointer;background:rgba(20,15,12,.72);box-shadow:inset 0 0 0 2px rgba(243,231,207,.22)}
.kx-heart:hover{background:rgba(20,15,12,.92)}
.kx-heart[aria-pressed="true"]{box-shadow:inset 0 0 0 2px #ff5f6d}
.kx-card-body{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:14px}
.kx-card h3{font-family:var(--f-story);font-weight:700;font-size:19px;line-height:1.28;text-wrap:balance}
.kx-card .kx-by{margin-top:auto;padding-top:4px}
.kx-empty{display:flex;align-items:center;gap:20px;padding:26px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line)}
.kx-empty strong{display:block;font-family:var(--f-story);font-size:18px}
.kx-empty p{margin:2px 0 12px;font-size:14px;color:var(--cream-dim)}

/* gear shop (reuses the kitchen's kx-* components) */
.gx-price{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--cream-faint)}
.gx-price b{font-family:var(--f-ui);font-weight:700;font-size:16px;color:var(--cream)}
.gx-spec{margin:0;font-size:14px;color:var(--cream-dim)}
.gx-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.kx-kw .hot,.kx-kw.hot{color:var(--ember-hi)}
.kx-tmeta .kx-ava{width:22px;height:22px}
.gx-noimg{display:grid;place-items:center;background:linear-gradient(180deg,#2a2018,#1d1612)}
.gx-price.big b{font-size:24px}
.gx-rate-link{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;background:none;border:0;padding:2px 0;font:inherit;font-size:14px;color:var(--cream-dim);cursor:pointer}
.gx-rate-link:hover span{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
.gx-keys{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.gx-keys li{display:flex;flex-direction:column;font-size:14px}
.gx-keys span{font-family:var(--f-px);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}
.gx-buy{display:flex;flex-direction:column;gap:10px;padding:16px 18px;margin-top:4px;background:var(--pg-card);box-shadow:inset 0 0 0 2px rgba(255,196,107,.28)}
.gx-buy-t{font-family:var(--f-px);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember-hi)}
.gx-buy-note{margin:0;font-size:13.5px;color:var(--cream-dim)}
.gx-buy-btn{justify-content:center}
.gx-shop{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 12px;color:var(--cream);text-decoration:none;background:rgba(255,236,205,.04);box-shadow:inset 0 0 0 1px var(--pg-line)}
.gx-shop:hover{box-shadow:inset 0 0 0 2px var(--ember)}
.gx-shop .pr{font-weight:700}
.gx-shop .go{display:inline-flex;align-items:center;gap:6px;color:var(--ember-hi);font-size:13px}
.gx-disclose{margin:0;font-size:12px;line-height:1.45;color:var(--cream-faint)}
.gx-tabs{position:sticky;top:calc(var(--roof-min) + 0px);z-index:2;display:flex;gap:4px;margin:34px 0 0;padding:8px 0;background:var(--pg-bg);border-bottom:1px solid var(--pg-line);overflow-x:auto;scrollbar-width:none}
.gx-tabs button{background:none;border:0;padding:8px 14px;font:inherit;font-size:14.5px;color:var(--cream-dim);cursor:pointer;white-space:nowrap}
.gx-tabs button:hover{color:var(--cream);box-shadow:inset 0 -2px 0 0 var(--ember)}
.gx-sec{margin-top:34px;scroll-margin-top:calc(var(--roof-min) + 64px)}
.gx-sec h2{font-family:var(--f-story);font-weight:700;font-size:24px;margin:0 0 16px}
.gx-sec h3{font-family:var(--f-story);font-weight:700;font-size:18px;margin:0 0 10px}
.gx-procon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gx-procon>div{padding:16px 18px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line)}
.gx-procon ul,.gx-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.gx-procon li,.gx-box li{display:grid;grid-template-columns:16px 1fr;gap:8px;font-size:15px;line-height:1.5}
.gx-pros li::before{content:"+";font-family:var(--f-px);color:var(--moss)}
.gx-cons li::before{content:"−";font-family:var(--f-px);color:#ff9a8a}
.gx-box li::before{content:"";width:6px;height:6px;margin-top:8px;background:var(--ember)}
.gx-cols{margin-top:26px}
.gx-specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 28px;margin:0 0 12px}
.gx-specs div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--pg-line);font-size:15px}
.gx-specs dt{color:var(--cream-dim)}
.gx-specs dd{margin:0}
.gx-rsum{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 34px;align-items:center;padding:18px 20px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line)}
.gx-ravg{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:110px}
.gx-ravg b{font-family:var(--f-story);font-size:44px;line-height:1}
.gx-ravg span{font-size:13px;color:var(--cream-faint)}
.gx-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gx-bars li{display:grid;grid-template-columns:48px 1fr 40px;align-items:center;gap:10px;font-size:13px;color:var(--cream-dim)}
.gx-bar{height:10px;background:rgba(255,236,205,.08)}
.gx-bar i{display:block;height:100%;background:#ffb347}
.gx-bars .pct{text-align:right;font-variant-numeric:tabular-nums}
.gx-rwrite{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:220px}
.gx-rwrite p{margin:0;font-size:14px;color:var(--cream-dim)}
.gx-rform{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding:18px 20px;background:var(--pg-card);box-shadow:inset 0 0 0 2px rgba(255,154,60,.35)}
.gx-rform label{display:flex;flex-direction:column;gap:7px}
.gx-rform .lbl{font-size:14px;color:var(--cream-dim)}
.gx-rform input[type=text],.gx-rform select{width:100%}
.gx-rform-t{font-family:var(--f-story);font-weight:700;font-size:18px}
.gx-rate-in{display:flex;align-items:center;gap:4px}
.gx-rate-in button{background:none;border:0;padding:3px;cursor:pointer}
.gx-rate-in button:focus-visible{outline:2px solid var(--ember-hi);outline-offset:2px}
.gx-rate-lbl{margin-left:10px;font-size:14px;color:var(--cream-dim)}
.gx-rform .err{margin:0}
.gx-reviews{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column}
.gx-review{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--pg-line)}
.gx-review.mine{background:rgba(255,154,60,.05);padding-left:12px;padding-right:12px}
.gx-rhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.gx-rtitle{margin-top:4px;font-family:var(--f-story);font-weight:700;font-size:17px}
.gx-rmeta{font-size:12.5px;color:var(--cream-faint)}
.gx-review p{margin:8px 0 10px;font-size:15px;line-height:1.55}
.gx-helpful{font:inherit;font-size:13px;color:var(--cream-dim);background:rgba(255,236,205,.04);border:0;padding:5px 11px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(243,231,207,.2)}
.gx-helpful[aria-pressed="true"]{color:var(--ember-hi);box-shadow:inset 0 0 0 1px var(--ember)}
.gx-cmp-wrap{overflow-x:auto;touch-action:pan-x pan-y}
.gx-cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.gx-cmp th,.gx-cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--pg-line)}
.gx-cmp thead th{vertical-align:bottom;font-weight:400}
.gx-cmp tbody th{font-weight:400;color:var(--cream-dim);width:120px}
.gx-cmp-name{display:flex;flex-direction:column;gap:8px;width:100%;background:none;border:0;padding:0;font:inherit;font-family:var(--f-story);font-weight:700;font-size:16px;color:var(--cream);text-align:left;cursor:pointer}
.gx-cmp-name[disabled]{cursor:default}
.gx-cmp-name:not([disabled]):hover{text-decoration:underline;text-decoration-color:var(--ember)}
.gx-cmp-name .kx-img{display:block;aspect-ratio:3/2}
.gx-this{display:inline-block;margin-bottom:6px;font-family:var(--f-px);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-hi)}
.gx-cmp-n{margin-left:6px}
@media (max-width:760px){.gx-procon{grid-template-columns:1fr}.gx-rsum{grid-template-columns:1fr}.gx-rwrite{max-width:none}}
.gx-icon{opacity:.8}

/* recipe view */
.kx-crumbs{display:flex;align-items:center;gap:10px;min-width:0;margin-bottom:22px;font-size:13.5px;color:var(--cream-faint)}
.kx-crumb{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;font:inherit;color:var(--cream-dim);cursor:pointer}
.kx-crumb:hover{color:var(--cream)}
.kx-crumb:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
.kx-crumbs .cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kx-d-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:start}
.kx-d-photo{margin:0}
.kx-d-photo .kx-img{aspect-ratio:3/2}
.kx-d-photo figcaption{margin-top:9px;font-size:12.5px;color:var(--cream-faint)}
.kx-d-photo figcaption a{color:var(--cream-dim)}
.kx-d-info{display:flex;flex-direction:column;gap:12px}
.kx-d-info h1{margin:0}
.kx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:4px 0 0}
.kx-facts div{padding:10px 12px;background:rgba(255,236,205,.04);box-shadow:inset 0 0 0 1px var(--pg-line)}
.kx-facts dt{font-family:var(--f-px);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.kx-facts dd{margin:4px 0 0;font-size:15px}
.kx-d-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.kx-d-cols{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:40px;margin-top:38px;padding-top:30px;border-top:1px solid var(--pg-line)}
.kx-ingr ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:2px}
.kx-ingr label{display:flex;align-items:flex-start;gap:11px;padding:7px 8px;font-size:15px;line-height:1.45;cursor:pointer}
.kx-ingr label:hover{background:rgba(255,236,205,.04)}
.kx-ingr input{margin-top:3px;flex:none}
.kx-ingr input:checked+span{color:var(--cream-faint);text-decoration:line-through;text-decoration-color:rgba(243,231,207,.35)}
.kx-steps ol{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:18px}
.kx-steps li{counter-increment:st;display:grid;grid-template-columns:30px 1fr;gap:14px;font-size:15.5px;line-height:1.6}
.kx-steps li::before{content:counter(st);width:26px;height:26px;display:grid;place-items:center;margin-top:1px;font-family:var(--f-px);font-size:12px;color:#2a1406;background:var(--ember);box-shadow:0 -2px 0 0 var(--ember-hi),0 2px 0 0 var(--ember-deep),-2px 0 0 0 var(--ember-hi),2px 0 0 0 var(--ember-deep)}
.kx-tips{margin-top:40px;padding-top:30px;border-top:1px solid var(--pg-line)}
.kx-tips ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.kx-tip{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:15px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line)}
.kx-tip .who{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--cream-faint)}
.kx-tip .who b{font-size:14px;font-weight:500;color:var(--cream)}
.kx-tip p{margin:4px 0 0;font-family:var(--f-hand);font-size:19px;line-height:1.25;overflow-wrap:anywhere}
.kx-more{margin-top:44px}
.kx-form{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-top:26px}
.kx-form label{display:flex;flex-direction:column;gap:7px}
.kx-form .lbl{font-size:14px;color:var(--cream-dim)}
.kx-form .lbl em{font-style:normal;font-size:12.5px;color:var(--cream-faint);margin-left:6px}
.kx-form input[type=text],.kx-form select,.kx-form input[type=number]{width:100%}
.kx-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.kx-form .err{margin:0}
.kx-form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.kx-form-actions{display:flex;gap:12px}
@media (max-width:1100px){.kx-car{grid-auto-columns:calc((100% - 32px) / 3)}}
@media (max-width:980px){.kx-d-top,.kx-d-cols{grid-template-columns:1fr}.kx-d-cols{gap:30px}.kx-trend{grid-template-columns:1fr}}
@media (max-width:760px){
  .page-body{padding:22px 16px 40px}
  .page-foot-in{padding:16px}
  body.in-page .nav-toggle{top:calc(var(--safe-t) + 10px)}
  .kx-hero{align-items:flex-start}
  .kx-hero-side{align-items:flex-start}
  .kx-sec{margin-top:44px}
  .kx-my{margin:28px -16px 0;padding:18px 16px 20px}
  .kx .kx-logo{font-size:25px}
  .kx-car-nav{display:none}
  .kx-car{grid-auto-columns:74%;gap:12px}
  .kx-titem{grid-template-columns:118px minmax(0,1fr);gap:14px}
  .kx-titem h3{font-size:17px}
  .kx-sort{margin-left:0}
  .kx-chips{flex-wrap:nowrap;overflow-x:auto;margin:14px -16px 0;padding:2px 16px 8px;scrollbar-width:none}
  .kx-chips::-webkit-scrollbar{display:none}
  .kx-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 16px}
  .kx-tips ul{grid-template-columns:1fr}
  .kx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* a host's illustrated welcome */
.welcome{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px 20px 44px;background:rgba(8,6,5,.66);opacity:0;transition:opacity .35s ease;user-select:none;-webkit-user-select:none}
.welcome.open{opacity:1}
.welcome-card{position:relative;width:min(504px,92vw);transform:translateY(16px) scale(.98);transition:transform .5s var(--ease)}
.welcome.open .welcome-card{transform:none}
.welcome-art{display:block;width:100%;height:auto;max-height:88vh;max-height:88dvh;object-fit:cover;object-position:top;box-shadow:0 0 0 3px var(--wood-hi),0 0 0 6px var(--wood-lo),0 26px 60px rgba(0,0,0,.6)}
.welcome-say{position:absolute;left:-16px;right:-16px;bottom:-26px;padding:12px 16px 14px;display:flex;flex-direction:column;gap:6px}
.welcome-who{display:flex;align-items:baseline;gap:10px}
.welcome-who b{font-family:var(--f-story);font-size:18px;color:var(--ember-hi)}
.welcome-who span{font-family:var(--f-px);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.welcome-say p{margin:0;min-height:3.3em;font-family:var(--f-story);font-size:18px;line-height:1.55;cursor:default}
.welcome-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
@media (max-width:760px){.welcome-card{width:min(504px,88vw)}.welcome-say{left:-6px;right:-6px;bottom:-20px;padding:10px 13px 12px}.welcome-say p{font-size:16px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01s!important;animation:none!important}}

/* leaving through the gate: the camp fades to black before the expedition opens */
#fadeOut{position:fixed;inset:0;z-index:60;background:#000;opacity:0;pointer-events:none;transition:opacity .9s ease}
body.leaving #fadeOut{opacity:1;pointer-events:auto}

/* the gate: pick an expedition */
.exp-list{display:grid;gap:12px}
.exp-card{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 2px rgba(243,231,207,.08)}
.exp-card.locked{opacity:.5}
/* used today's three runs: greyed until midnight, the line where the button was */
.exp-card.closed{filter:grayscale(1);opacity:.55}
.exp-closed{font-size:13px;color:var(--cream-dim,#cbbfa8);align-self:start}
.exp-art{display:block;min-height:118px;background:radial-gradient(circle at 34% 74%,rgba(255,140,40,.6),rgba(255,140,40,0) 30%),linear-gradient(180deg,#232b36 0%,#4b5666 50%,#bfc8d2 51%,#8e99a6 100%);background-size:cover;background-position:center;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.exp-card.locked .exp-art{background:linear-gradient(180deg,#1b1f25,#2a2f36)}
.exp-art.has-art{background-position:30% 50%}
.exp-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.exp-title{font-family:var(--f-px);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.exp-premise{font-family:var(--f-story);font-size:14.5px;line-height:1.45;color:var(--cream-dim);word-break:keep-all}
.exp-meta{font-size:12px;color:var(--cream-faint)}
.exp-body .btn{align-self:flex-start;margin-top:4px}


/* ---------- journal room, map room, survival guide ---------- */
.rx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.rx-card,.rx-note{padding:18px 20px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line);display:flex;flex-direction:column;gap:6px}
.rx-card p,.rx-note p{margin:0}
.rx-label{font-family:var(--f-px);font-size:9.5px;letter-spacing:.16em;color:var(--cream-faint)}
.rx-title{font-family:var(--f-story);font-weight:700;font-size:19px;color:var(--cream)}
.rx-big{font-family:var(--f-px);font-size:17px;letter-spacing:.06em;color:var(--cream-dim);margin:4px 0 2px!important}
.rx-big.alive,.rx-res.alive{color:#9cd08a}
.rx-big.dead,.rx-res.dead{color:#ff8a70}
.rx-card .btn{margin-top:10px;align-self:flex-start}
.rx-cal-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;font-size:14px;color:var(--cream-dim)}
.rx-cal-head b{font-family:var(--f-story);font-size:18px;color:var(--cream)}
.rx-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:560px}
.rx-wd{font-family:var(--f-px);font-size:9.5px;letter-spacing:.12em;text-align:center;color:var(--cream-faint);padding-bottom:4px}
.rx-day{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(255,236,205,.04);box-shadow:inset 0 0 0 1px rgba(243,231,207,.08);font-size:13px;color:var(--cream-dim)}
.rx-day b{font-weight:400}
.rx-day i{font-style:normal;font-size:15px;line-height:1}
.rx-day.blank{background:none;box-shadow:none}
.rx-day.off{opacity:.38}
.rx-day.alive{background:rgba(156,208,138,.14);box-shadow:inset 0 0 0 1px rgba(156,208,138,.5)}
.rx-day.alive i{color:#9cd08a}
.rx-day.dead{background:rgba(255,122,102,.12);box-shadow:inset 0 0 0 1px rgba(255,122,102,.45)}
.rx-day.dead i{color:#ff8a70}
.rx-day.today{box-shadow:inset 0 0 0 2px var(--ember-hi)}
.rx-runs{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.rx-date{font-family:var(--f-px);font-size:10px;letter-spacing:.16em;color:var(--ember-hi);margin:14px 0 2px;text-transform:uppercase}
.rx-date:first-child{margin-top:0}
.rx-run{background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line)}
.rx-run-head{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 16px;font-size:14px;color:var(--cream-dim)}
.rx-run-head:hover{background:rgba(255,236,205,.03)}
.rx-run-head:focus-visible{outline:2px solid var(--ember-hi);outline-offset:-2px}
.rx-when{font-family:var(--f-px);font-size:11px;color:var(--cream-faint);font-variant-numeric:tabular-nums}
.kx-tag.rx-practice{color:var(--cream-faint);box-shadow:inset 0 0 0 1px rgba(243,231,207,.2)}
.rx-name{color:var(--cream);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-res{grid-column:3;font-size:13.5px}
.rx-meta{grid-column:4;grid-row:1;font-size:13px;color:var(--cream-faint);white-space:nowrap}
.rx-run-body{padding:4px 16px 16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;font-size:14px;color:var(--cream-dim)}
.rx-run-body[hidden]{display:none}
.rx-run-map svg{display:block;width:100%;height:auto}
.rx-run-info p{margin:0 0 6px}
.rx-run-info b{color:var(--cream);margin-right:6px}
.rx-run-info ul{margin:0;padding-left:18px}
.rx-run-info li{margin:0 0 4px}
.rx-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:22px}
.rx-endings{columns:2;margin:10px 0 0;padding:0;list-style:none;font-size:14px;color:var(--cream-faint)}
.rx-endings li{margin:0 0 6px}
.rx-endings li.got{color:var(--cream)}
.rx-notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.rx-note h3{font-family:var(--f-story);font-size:20px;margin:2px 0 4px;color:var(--cream)}
.rx-note ul{margin:4px 0 6px;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--cream-dim)}
.rx-note li{margin:0 0 6px}
.rx-taught{font-family:var(--f-story);font-style:italic;font-size:15px;color:var(--ember-hi)}
.rx-note.locked h3{color:var(--cream-faint)}
.rx-note.locked{opacity:.7}
.rx-note.flash{box-shadow:inset 0 0 0 2px var(--ember-hi);transition:box-shadow .3s}
@media (max-width:760px){
  .rx-run-head{grid-template-columns:auto auto minmax(0,1fr)}
  .rx-meta{grid-column:1 / -1;grid-row:auto}
  .rx-res{grid-column:1 / -1}
  .rx-run-body,.rx-cols{grid-template-columns:1fr}
}

.rx-pin{position:relative;max-width:640px;padding:22px 24px 18px;background:var(--paper);color:var(--paper-ink);box-shadow:0 10px 24px rgba(0,0,0,.35);transform:rotate(-.4deg);display:flex;flex-direction:column;gap:8px}
.rx-pin::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#d0503a;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.rx-pin p{margin:0}
.rx-pin .rx-label{color:#8a5a2a}
.rx-pin .rx-title{color:var(--paper-ink);font-size:22px}
.rx-pin .kx-note{color:#6d5a44}
.rx-pin .rx-res.alive{color:#3f7a2a}
.rx-pin .rx-res.dead{color:#a8402e}
.rx-conds{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14.5px;color:#4a3a2a}
.rx-pin-foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:6px}
.rx-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.rx-post{padding:16px 18px;background:var(--pg-card);box-shadow:inset 0 0 0 1px var(--pg-line);display:flex;flex-direction:column;gap:6px}
.rx-post h3{font-family:var(--f-story);font-size:19px;margin:0;color:var(--cream)}
.rx-post p{margin:0;font-size:14.5px;line-height:1.55;color:var(--cream-dim)}
.rx-soon{margin:0;padding-left:18px;font-size:15px;line-height:1.6;color:var(--cream-dim)}
.rx-soon b{color:var(--cream)}

/* ---------- Korean ---------- */
html[lang="ko"]{--f-story:"Alegreya","Gowun Batang",serif;--f-ui:"Alegreya Sans","Gowun Dodum",system-ui,sans-serif;--f-hand:"Patrick Hand","Gowun Dodum",cursive;--f-px:"Silkscreen","Gowun Dodum",sans-serif}
html[lang="ko"] body{word-break:keep-all}
/* Hangul has no pixel font: labels set in Silkscreen switch to the UI font, a little larger, without the wide tracking. */
html[lang="ko"] .px,html[lang="ko"] .eyebrow,html[lang="ko"] #areaTitle .en,html[lang="ko"] #mapTip .en,html[lang="ko"] .p-eyebrow,html[lang="ko"] .rx-label,html[lang="ko"] .rx-big,html[lang="ko"] .rx-wd,html[lang="ko"] .rx-date,html[lang="ko"] .rx-when,html[lang="ko"] .rx-runs .kx-tag{font-family:var(--f-ui);letter-spacing:.03em;text-transform:none}
html[lang="ko"] #areaTitle .en{font-size:14px;letter-spacing:.14em}
html[lang="ko"] #mapTip .en{font-size:13px}
html[lang="ko"] .eyebrow{font-size:12.5px}
html[lang="ko"] .p-eyebrow,html[lang="ko"] .rx-label{font-size:12px}
html[lang="ko"] .sec-label .px,html[lang="ko"] .set-head .px{font-size:12px}
html[lang="ko"] .rx-big{font-size:19px}
html[lang="ko"] .rx-wd{font-size:11.5px}
html[lang="ko"] .rx-date,html[lang="ko"] .rx-when{font-size:12.5px}
html[lang="ko"] .rx-runs .kx-tag{font-size:11.5px}

/* ================= the painted camp village (src/village/) ================= */
/* The camp's view on a desk: the painting fills the window beside the menu, and the pixel map's canvas,
   vignette, tips and bubbles stay out of the way. body.view-painted is set by src/ui.js. */
body.view-painted #game,body.view-painted #vignette,body.view-painted #bubbles,body.view-painted #mapTip,body.view-painted #recenter{display:none!important}
.village{position:fixed;z-index:0;inset:0;overflow:hidden;background:#0b0d1a;touch-action:none}
.village canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.village.dragging canvas{cursor:grabbing}
/* The zoom bar and the sign over a lit place: styles/camp.css. */
/* What the camp's people say, over their heads: the painted paper bubble (design/camp/village/bubble_white.png,
   cut by scripts/camp/build-bubble.py into assets/camp/village/ui/). The body with its tail is one nine-slice at
   screen scale drawn as a border-image: 18 px corners, the tail inside the wider bottom-left tile (so tail and
   paper are one painting, no seam), the words reaching into the paper border. The bubble hangs from its tail's
   tip (18 px in from the paper's left edge, at the very bottom), to the upper right of the speaker; near the
   right edge of the screen it flips to the upper left (.flip), the words flipped back. Dogs get the burst. At
   night (--night 0..1) the paper dims and, away from a fire (--warm 0 far, 1 beside one), takes the camp's blue
   through a one-colour silhouette of the same picture laid over it, like the tints on the painted people.
   These sit over the pixel map's .bubble rules above (paper box, pixel shadow, little square tail). */
.village .bubble{position:absolute;z-index:3;transform-origin:0 0;transform:translate(-18px,-100%);max-width:212px;min-width:30px;padding:0 8px 0 0;background:none;box-shadow:none;
  border:solid transparent;border-width:18px 18px 40px 47px;border-image:url(../assets/camp/village/ui/bubble.webp) 36 36 81 94 fill / 18px 18px 40px 47px stretch;
  font-family:var(--f-story);font-size:14px;line-height:1.35;text-align:center;color:#3a2a1a;pointer-events:none;
  opacity:0;transition:opacity .25s ease;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)) brightness(calc(1 - var(--night,0) * (.24 - .14 * var(--warm,0))))}
.village .bubble.on{opacity:1}
.village .bubble.flip{transform:translate(18px,-100%) scaleX(-1)}
.village .bubble.flip .words{transform:scaleX(-1)}
.village .bubble::after{content:none}
.village .bubble .words{display:block;margin:-7px 0 -7px -21px}
.village .bubble .tint{position:absolute;inset:-18px -18px -40px -47px;border:solid transparent;border-width:18px 18px 40px 47px;border-image:url(../assets/camp/village/ui/bubble-tint.webp) 36 36 81 94 fill / 18px 18px 40px 47px stretch;opacity:calc(var(--night,0) * .45 * (1 - var(--warm,0)))}
.village .bubble.bark{transform:translate(-50%,-100%);width:103px;height:84px;min-width:0;padding:0;border:0;border-image:none;display:grid;place-items:center;font-weight:700;background:url(../assets/camp/village/ui/burst.webp) center/100% 100% no-repeat}
.village .bubble.bark .words{margin:0}
.village .bubble.bark .tint{inset:0;border:0;border-image:none;background:url(../assets/camp/village/ui/burst-tint.webp) center/100% 100% no-repeat}
/* Without a title screen the painted camp asks for a click on the picture (enterOverlay in src/ui.js). */
.enter{position:fixed;inset:0;z-index:30;display:grid;place-items:center;align-content:center;padding:0 24px;background:rgba(6,8,18,.16);transition:opacity .5s;cursor:pointer;text-align:center;user-select:none}
/* "..돌아왔다." fades in over 3 s; the line asking for a click bobs and breathes as the cabin's first hint does
   (styles/cabin.css cbHintBob; the user, 2026-10-23), after the title when there is one. */
@keyframes hintIn{from{opacity:0}to{opacity:1}}
@keyframes hintBob{from{opacity:1;transform:translateY(-3px)}to{opacity:.22;transform:translateY(10px)}}
.enter-title{font-size:46px;letter-spacing:.06em;color:rgba(255,250,240,.84);text-shadow:var(--ink-halo);animation:hintIn 3s ease both}
.enter-title:empty{display:none}
.enter-hint{margin-top:22px;font-size:30px;letter-spacing:.02em;color:rgba(255,250,240,.72);text-shadow:var(--ink-halo);animation:hintIn .9s ease .7s both,hintBob 2.3s cubic-bezier(.37,0,.63,1) 1.6s infinite alternate}
.enter-title:not(:empty)~.enter-hint{animation-delay:2.2s,3.1s}
@media (max-width:760px){.enter-title{font-size:28px}.enter-hint{font-size:20px}}

/* ================= a host's line typed out (src/talk.js) ================= */
/* The rest of the line keeps its room unseen; screen readers get the whole line at once. (The Library's
   own styles are in styles/library.css.) */
.talk-out{visibility:hidden}
.talk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A hand over everything that can be clicked, wherever it is (the user, 2026-10-22: the arrow stayed everywhere);
   a disabled button keeps the arrow. (The painted village's own hand is set on its canvas: src/village/village.js.) */
button,[role="button"],a[href],label,summary,select,input[type="checkbox"],input[type="radio"],input[type="range"]{cursor:pointer}
button:disabled,button[aria-disabled="true"]{cursor:default}