/* ================= the camp's UI, redesigned (2026-10-16) =================
   Built from the user's mock-up (design/camp/ui/mockups/village-ui-v2.png, 1672 × 941) and their pictures
   of the hover sign and of "Leave a line" (sign-hover.png, leave-a-line.png, leave-a-line-open.png). Every
   size and place below is the mock-up's, in css px from the window's edges: the menu a card at the left,
   the clock and My Cabin in two cards at the top right, the panel under them, the zoom bar at the bottom.
   The painting runs under all of them. Record and measurements: design/camp/ui/README.md.
   Type: Crimson Text (the serif), Asap (the bold sans), Cabin (the plain sans), Silkscreen (the labels),
   matched on the mock-up's glyphs. Icons: styles/camp-icons.css (scripts/camp/build-ui.py). */
:root{
  --side-w:322px;
  --cp-line:#b8763c;--cp-line-hi:#eba64c;--cp-line-soft:#4d3c2d;
  --cp-bg:#1b130d;--cp-text:#fbf7ee;--cp-muted:#c2b6a8;--cp-gold:#f6c945;--cp-orange:#fd9a3c;
  --cp-serif:"Crimson Text","Gowun Batang",Georgia,serif;
  --cp-sans:"Cabin","Gowun Dodum",system-ui,sans-serif;
  --cp-bold:"Asap","Gowun Dodum",system-ui,sans-serif;
  --cp-px:"Silkscreen","Gowun Dodum",monospace;
}
/* The divider: a thin line either side of a dot, a diamond and a dot. */
.cp-rule{height:13px;flex:none;background:
  linear-gradient(180deg,#0a0607 0 1px,#b0733a 1px 3px) left center / calc(50% - 17px) 3px no-repeat,
  linear-gradient(180deg,#0a0607 0 1px,#b0733a 1px 3px) right center / calc(50% - 17px) 3px no-repeat,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 13'%3E%3Cg fill='%23fbaa49'%3E%3Crect x='2' y='5' width='3' height='3'/%3E%3Cpath d='M16 .5l6 6-6 6-6-6z'/%3E%3Crect x='27' y='5' width='3' height='3'/%3E%3C/g%3E%3C/svg%3E") center / 32px 13px no-repeat}
/* The labels in small capitals: THE CAMP, A PLACE TO UNWIND, TODAY AT THE FIRE… */
.nav-label,.cf-eyebrow span,.cf-label{font:700 12px/1 var(--cp-px);letter-spacing:.2em;color:var(--cp-gold);text-transform:uppercase;white-space:nowrap}

/* ---- the menu ---- */
.side{position:fixed;z-index:12;left:22px;top:16px;bottom:40px;width:300px;box-sizing:border-box;padding:0 18px 22px;display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;
  background:linear-gradient(180deg,#21160f 0%,#1d140e 30%,#1a120d 100%);border:2px solid var(--cp-line);border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.45);
  transition:transform .5s var(--ease);scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
body.nav-closed .side{transform:translateX(calc(-100% - 30px))}
body.pre .side{transform:translateX(calc(-100% - 60px));pointer-events:none}
body.pre .nav-toggle{transform:translateX(-400px);pointer-events:none}
/* The logo (2026-11-07, assets/brand/) across the card. */
.brand{padding:18px 0 0}
.brand-logo{display:block;width:100%;height:auto}
.tagline{margin:11px 0 0 7px;font:400 19.6px/1.15 var(--cp-serif);color:#ded5c9;white-space:nowrap}
.side > .cp-rule{margin:16.3px 2px 0 4px}
.nav-group{display:flex;flex-direction:column;gap:3.4px}
.nav-label{margin:19px 0 10px 7px}
#navGroups > .cp-rule{margin:12px 2px 0 4px}
#navGroups > .cp-rule + .nav-group .nav-label{margin:13.7px 0 1px 7px}
/* (60 px tall on the mock-up's 941 px window; a shorter window shortens the items so the gate stays in the card) */
.nav-item{position:relative;display:flex;align-items:center;gap:0;height:clamp(40px,calc((100vh - 414px) / 10),60px);height:clamp(40px,calc((100dvh - 414px) / 10),60px);padding:0;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--cp-text);text-align:left;cursor:pointer;font:inherit;width:100%;box-sizing:border-box}
.nav-item .ico{flex:none;width:70px;height:100%;display:grid;place-items:center}
.nav-item .en{display:block;flex:1;min-width:0;margin-left:12.5px;font:400 22.4px/1 var(--cp-serif);letter-spacing:0;text-transform:none;color:#fefefc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.3em 0;margin-top:-.3em;margin-bottom:-.3em}
.nav-item .dot{position:absolute;right:18.5px;top:calc(50% - 6.25px);width:12.5px;height:12.5px;border-radius:50%;background:#fecd4d;box-shadow:0 0 6px rgba(254,205,77,.35);opacity:0}
.nav-item:hover,.nav-item.hot,.nav-item.going{background:rgba(255,226,180,.06)}
.nav-item[aria-current="location"]{background:linear-gradient(180deg,#331f11,#2f1e10);border-color:#bd7d30;box-shadow:none}
.nav-item[aria-current="location"] .dot{opacity:1}
.nav-item[aria-current="location"] .en{margin-right:38px}
.nav-item:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}

/* The arrow that folds the menu away: a small tab on the card's right edge, halfway down. */
.nav-toggle{position:fixed;z-index:13;top:calc(50% - 26px);left:320px;width:22px;height:52px;display:grid;place-items:center;padding:0;border:2px solid var(--cp-line);border-left:0;border-radius:0 12px 12px 0;cursor:pointer;background:#1c130d;box-shadow:6px 6px 16px rgba(0,0,0,.35);transition:left .5s var(--ease),transform .5s var(--ease)}
.nav-toggle:hover{background:#2a1c12}
body.nav-closed .nav-toggle{left:0}

/* ---- the clock, the friends disc and the settings disc, top right (the user's mock-up, 2026-10-29:
   design/camp/ui/mockups/hud-wood.webp, measured on it at its own 1658 x 949; every size here is its) ---- */
.hud{position:fixed;z-index:12;top:20px;right:18px;display:flex;align-items:center;gap:12px;transition:opacity .4s ease}
body.pre .hud,body.in-page .hud,body.at-fire .hud,body.night .hud,body.leaving .hud{opacity:0;pointer-events:none}
/* The friends and the settings discs (the user's pictures; .pg-round like every building's settings and Back). */
.hud .pg-round{width:66px;height:66px}
/* The clock on the mock-up's wooden plaque (cut from it with the moon and the words taken off its panel, sharpened:
   scripts/camp/build-plaque.py), drawn as a border-image: the corners with their rivets stay, the plain middle
   stretches when the words need more room. On its panel the painted moon and stars by night and the painted sun by
   day (the user, 2026-10-30, in place of the mock-up's pixel ones), the time, and the time of day with the days. */
.hud-clock{position:relative;box-sizing:border-box;height:87px;min-width:192px;display:flex;align-items:center;padding:0 7px 0 3.2px;color:var(--cp-text);text-align:left;
  border:solid transparent;border-width:25px 28px;border-image:url(../assets/camp/ui/plaque.webp) 100 112 fill / 25px 28px stretch;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
/* The moon and the sun (scripts/camp/build-clock-sky.py): the pixel moon's box, at the mock-up's 0.93, each picture
   drawn over it with its glow spilling past; the crescent fills the box's height, the sun is at the moon's scale, and
   both are centred on the box, so the time stays put between day and night. */
.hud-sky{position:relative;display:block;flex:none;width:36.8px;height:40px;margin-top:2px;transform:scale(.93)}
.hud-sky::before{content:"";position:absolute;background:center / 100% 100% no-repeat}
.hud-sky.moon::before{left:-9.63px;top:-2.68px;width:51.67px;height:49.33px;background-image:url(../assets/camp/ui/clock-moon.webp)}
.hud-sky.sun::before{left:-5.72px;top:-3.38px;width:46.33px;height:46.67px;background-image:url(../assets/camp/ui/clock-sun.webp)}
.hud-clock .hud-txt{margin:6px 0 0 20px}
.hud-txt{display:flex;flex-direction:column;min-width:0}
.hud-clock .num{font:700 25.4px/1 var(--cp-bold);letter-spacing:.08em;color:#fbd38d;font-variant-numeric:tabular-nums}
.hud .lbl{margin-top:7px;font:400 17.4px/1 var(--cp-serif);color:#b3a091;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.3em 0;margin-bottom:-.3em}
.hud-clock .lbl{margin-top:calc(7px - .3em)}
/* The settings, under the clock (the user's mock-up, 2026-10-17: design/camp/ui/mockups/settings.webp, drawn
   at 2x; every size here is half of its). Four cards: Audio, Time of day, Language, Account. */
.settings{position:fixed;z-index:14;top:126px;right:22px;width:473px;max-width:calc(100vw - 24px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;box-sizing:border-box;
  padding:12.5px 12.5px 13px;display:flex;flex-direction:column;gap:8.5px;scrollbar-width:none;
  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);font:400 15px/1.3 var(--cp-sans);color:#fbf5e8}
.settings::-webkit-scrollbar{display:none}
/* The panels' border (2 px; the mock-up drew 3), and 90% of the mock-up's size (the user, 2026-10-17): the
   whole card shrunk toward its top right corner, so it stays where it was and lays out as before. A phone
   keeps it at the window's width. */
@media (min-width:761px){.settings{transform:scale(.9);transform-origin:100% 0;max-height:calc((100vh - 140px) / .9);max-height:calc((100dvh - 140px) / .9)}}
.st-top{position:relative;display:flex;align-items:center;height:47px;box-sizing:border-box;padding:9px 0 0 9.5px}
.st-title{margin-left:14.5px;font:700 25px/1 var(--cp-bold);color:#fef5de}
.st-top .ci-set-deco{margin:7px 0 0 7.5px}
.st-x{position:absolute;right:2.5px;top:4px;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}
.st-x:hover{filter:brightness(1.15)}
.st-card{display:flex;flex-direction:column;border:1.5px solid #4f3a2a;border-radius:14px;background:linear-gradient(180deg,#2a1d13,#24190f);box-shadow:inset 0 1px 0 rgba(255,220,170,.05)}
.st-h{display:flex;align-items:center;height:36px;box-sizing:border-box;padding:13px 15px 0 15.5px}
.st-h b{margin-left:12px;font:700 20px/1 var(--cp-bold);color:#fff9e2}
.st-h .ci{flex:none}
.st-line{margin-left:auto;padding-left:12px;font:400 15px/1.2 var(--cp-sans);color:#d2c4b4;text-align:right}
.st-list{margin:7px 8.5px 7.5px;border:1px solid #3f3024;border-radius:11px;background:#1e160f;padding:0 7px 0 14.5px}
.st-row{position:relative;display:flex;align-items:center;min-height:43px;border-top:1px solid #362a20}
.st-row:first-child{min-height:51.5px;border-top:0}
.st-ico{flex:none;width:32px;display:flex;align-items:center}
.st-lbl{margin-right:auto;font:400 17.5px/1 var(--cp-sans);color:#fffce6;white-space:nowrap}
.st-sound{width:44.5px;height:34.5px;display:grid;place-items:center;padding:0;border:1.5px solid #f0a662;border-radius:9px;background:linear-gradient(180deg,#7a3e14,#5e300f);box-shadow:0 0 8px rgba(240,150,70,.25);cursor:pointer}
.st-sound[aria-pressed="false"]{border-color:#6a4f39;background:#2b1f17;box-shadow:none}
.st-sound[aria-pressed="false"] .ci{opacity:.45}
.st-sound[aria-pressed="false"]::after{content:"";position:absolute;width:24px;height:2px;border-radius:1px;background:#e9b98a;transform:rotate(-38deg)}
.settings input.st-range{-webkit-appearance:none;appearance:none;width:184px;height:21px;margin:0 15.5px 0 auto;background:none;cursor:pointer}
.st-range::-webkit-slider-runnable-track{height:12.5px;box-sizing:border-box;border:2px solid #4b4948;border-radius:7px;background:linear-gradient(90deg,#f09238 0,#e47c27 var(--pct),#232323 var(--pct),#232323 100%)}
.st-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:21px;height:21px;margin-top:-6.25px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffb15e,#f8913a 70%);box-shadow:0 0 9px rgba(250,150,60,.55),0 1px 2px rgba(0,0,0,.45)}
.st-range::-moz-range-track{height:8.5px;border:2px solid #4b4948;border-radius:7px;background:#232323}
.st-range::-moz-range-progress{height:8.5px;border-radius:7px;background:#e8812b}
.st-range::-moz-range-thumb{width:21px;height:21px;border:0;border-radius:50%;background:#f8913a;box-shadow:0 0 9px rgba(250,150,60,.55)}
.st-range:focus-visible{outline:2px solid var(--cp-gold);outline-offset:3px;border-radius:8px}
.st-pct{width:30px;text-align:right;font:400 14px/1 var(--cp-sans);color:#c1b4a7;font-variant-numeric:tabular-nums}
.settings input.cp-switch{margin-right:3px;width:50px;height:25.5px;border-radius:13px;background:#2b2019;box-shadow:inset 0 0 0 1.5px #5f4635}
.settings input.cp-switch::after{top:2px;left:2px;width:21.5px;height:21.5px;background:#a89a8a}
.settings input.cp-switch:checked{background:#653918;box-shadow:inset 0 0 0 1.5px #a26538}
.settings input.cp-switch:checked::after{transform:translateX(24.5px);background:radial-gradient(circle at 40% 35%,#ffc277,#fbab5e 70%);box-shadow:0 0 8px rgba(250,160,80,.55)}
.st-times{display:grid;grid-template-columns:266fr 247fr 295fr;gap:8px;margin:9.5px 11px 0 12px}
.st-time{display:flex;align-items:center;justify-content:center;gap:13px;height:42.5px;padding:0 6px;border:1.5px solid #6b4e3d;border-radius:10px;background:linear-gradient(180deg,#33241a,#2a1e15);font:500 17.5px/1 var(--cp-sans);color:#fffae3;cursor:pointer;white-space:nowrap}
.st-time:hover{border-color:#8a6a50}
.st-time[aria-pressed="true"]{border:2px solid #f2a24e;background:linear-gradient(180deg,#52301a,#3f2511);box-shadow:0 0 10px rgba(242,162,78,.18);color:#fff5d4}
.st-note{margin:9.5px 16px 6.5px 18px;font:400 15.5px/1.3 var(--cp-sans);color:#b9ac9f}
.st-langs{display:flex;justify-content:flex-end;gap:7px;margin:2px 12.5px 8px}
.st-lang{height:37px;padding:0;border:1.5px solid #594535;border-radius:9px;background:linear-gradient(180deg,#33251b,#2b1f16);font:400 15.5px/1 var(--cp-sans);color:#d5bfac;cursor:pointer}
.st-lang[data-lang="en"]{width:93.5px}
.st-lang[data-lang="ko"]{width:83px}
.st-lang[aria-pressed="true"]{border:2px solid #f2a24e;background:linear-gradient(180deg,#4d2c15,#3d2410);color:#facc95}
/* At the fire: the log's text size, in place of the language and the account. */
.st-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:9.5px 11px 11px 12px}
.st-size{height:42.5px;padding:0;border:1.5px solid #6b4e3d;border-radius:10px;background:linear-gradient(180deg,#33241a,#2a1e15);font-family:var(--cp-sans);line-height:1;color:#d5bfac;cursor:pointer}
.st-size:nth-child(1){font-size:13px}.st-size:nth-child(2){font-size:15px}.st-size:nth-child(3){font-size:17.5px}.st-size:nth-child(4){font-size:20px}.st-size:nth-child(5){font-size:23px}
.st-size:hover{border-color:#8a6a50}
.st-size[aria-pressed="true"]{border:2px solid #f2a24e;background:linear-gradient(180deg,#52301a,#3f2511);box-shadow:0 0 10px rgba(242,162,78,.18);color:#fff5d4}
.ci.ci-set-text{width:24px;height:24px;background:none;font:700 19px/24px var(--cp-bold);color:#f2a24e;text-align:center}
.ci.ci-set-text::before{content:"Aa"}
html[lang="ko"] .ci.ci-set-text::before{content:"가"}
body.at-fire .settings{top:calc(var(--safe-t) + 80px);right:16px;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px)}
@media (min-width:761px){body.at-fire .settings{max-height:calc((100vh - 96px) / .9);max-height:calc((100dvh - 96px) / .9)}}
.st-acct{display:flex;align-items:center;gap:0;margin:8px 10px 7.5px 10.5px}
.st-google{display:flex;align-items:center;justify-content:center;gap:12.5px;width:256px;height:43px;padding:0 20px 0 4px;border:1.5px solid #6a4c31;border-radius:9px;background:linear-gradient(180deg,#43301f,#35261a);font:500 18px/1 var(--cp-sans);color:#fffce9;cursor:pointer;white-space:nowrap}
.st-google:hover{filter:brightness(1.1)}
.st-google[disabled]{opacity:.6;cursor:default}
.st-google .gmark{width:27.5px;height:27.5px;padding:0;background:none}
.st-google.out{width:auto;margin-left:auto;padding:0 18px;font-size:16px}
.st-rule{flex:none;width:2px;height:34px;margin:0 16px 0 14px;border-radius:1px;background:#3d3022}
.st-acct .acct-link{flex:1;text-align:center}
.st-who{display:flex;align-items:center;gap:10px;min-width:0;font:400 15px/1.3 var(--cp-sans);color:#e9dfd2;overflow-wrap:anywhere}
.st-time:focus-visible,.st-lang:focus-visible,.st-size:focus-visible,.st-google:focus-visible,.st-sound:focus-visible,.st-x:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}

/* ---- the panel: under the cards on the right, or beside the menu on the left ---- */
.panel{position:fixed;z-index:10;left:auto;right:22px;top:126px;bottom:auto;width:455px;max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);box-sizing:border-box;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#281a10 0,#1e140e 160px,#1b120d 320px,#1a120d 100%);border:2px solid var(--cp-line);border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.5);
  opacity:0;transform:translateX(calc(100% + 34px));transition:opacity .35s,transform .35s var(--ease)}
.panel.open{opacity:1;transform:none}
body.panel-left .panel{right:auto;left:338px;top:16px;max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}
body.panel-left.nav-closed .panel{left:22px}
body.panel-left .panel:not(.open){transform:translateX(calc(-100% - 34px))}
.panel-scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:29px 27px 28px 31px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:#5c4130 transparent;border-radius:18px}
.panel-x{position:absolute;z-index:2;top:18px;right:18px;width:43px;height:43px;display:grid;place-items:center;padding:0;border:1.5px solid #ad7338;border-radius:10px;background:#1d1410;cursor:pointer}
.panel-x:hover{background:#2a1c12}
.panel-x:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}

/* The campfire's panel (campfireHTML in src/ui.js). */
.cf{display:flex;flex-direction:column}
.cf-eyebrow{display:flex;align-items:center;gap:16px;height:25.6px;padding-left:7.2px;margin-right:56px}
.cf-eyebrow span{letter-spacing:.155em}
.cf-title{margin:4px 0 0 6px;font:700 57.5px/1 var(--cp-serif);color:#fdfcf2;letter-spacing:-.005em;padding:.06em 0}
.cf-sub{margin:1px 0 0 5px;font:400 22.6px/1.2 var(--cp-serif);color:#f2efe8}
/* How many times the camp has been opened (ui.js Visits). */
.cf-visits{margin:6px 6px 0 0;font:400 14px/1.3 var(--cp-sans);color:var(--cp-muted);text-align:right}
.cf-visits[hidden]{display:none}
.cf-fire{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.cf-sit{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:59px;padding:0 16px;box-sizing:border-box;border:0;border-radius:8px;cursor:pointer;
  padding-bottom:3px;background:#fd9a3c;box-shadow:inset 0 1px 0 #fccd6c,inset 0 -3px 0 #e07f35,0 3px 0 rgba(0,0,0,.35);font:700 24px/1 var(--cp-bold);color:#1c1007;transition:filter .15s,transform .08s}
.cf-sit:hover{filter:brightness(1.06)}
.cf-sit:active{transform:translateY(1px)}
.cf-sit[disabled]{cursor:default;filter:saturate(.75) brightness(.92)}
.cf-sit:focus-visible{outline:2px solid var(--cp-gold);outline-offset:3px}
.cf-sit.google{background:#fff;box-shadow:inset 0 -3px 0 #dcdcdc,0 3px 0 rgba(0,0,0,.35);color:#1f1f1f;font-size:19px}
.cf-sit .gmark{width:22px;height:22px}
.cf-fire-note{margin:0;font:400 15px/1.35 var(--cp-sans);color:var(--cp-muted);text-align:center}
.cf-fire .fire-captcha:empty{display:none}
.cf-more{align-self:center;padding:2px 4px;border:0;background:none;font:500 15px/1.3 var(--cp-sans);color:#e0b768;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.cf-fires{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cf-fires li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:8px 10px 8px 14px;border:1px solid var(--cp-line-soft);border-radius:10px;background:#231913;font:400 18px/1.2 var(--cp-serif)}
.cf-fires .ct{font:400 15px/1 var(--cp-sans);color:var(--cp-muted)}
.cf-fires button{padding:7px 12px;border:1.5px solid #ab7847;border-radius:8px;background:#2a1e16;font:600 14px/1 var(--cp-bold);color:var(--cp-text);cursor:pointer}
.cf-fires button[disabled]{opacity:.5;cursor:default}
.cf > .cp-rule{margin-top:18px}
.cf-label{margin:19px 0 0 2px}
.cf-label.notes{margin-top:16px}
.cf-card{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;margin-top:14px;padding:0;border:1.5px solid #ab7847;border-radius:10px;background:#281c15;color:var(--cp-text);text-align:left;font:inherit;cursor:pointer}
.cf-card:focus-visible,.cf-leave-h:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}
button.cf-card:hover{background:#2f2119}
.cf-card .tt{display:flex;flex-direction:column;min-width:0;flex:1}
.cf-card .t{font:600 22.5px/1 var(--cp-serif);color:#fcfbf8;padding:.2em 0;margin:-.2em 0}
.cf-card .s{font:400 17.9px/1 var(--cp-serif);color:#b0a598;padding:.2em 0;margin:-.2em 0}
.cf-log{height:82px}
.cf-log > .ci-log{margin:6px 0 0 25.7px}
.cf-log .tt{margin-left:26px}
.cf-log .s{margin-top:3px}
.cf-log > .ci-arrow{margin:0 16.5px 6px 0}
/* After today's log: the camp's count, then "Leave a line" (the user's pictures). */
.cf-kept{margin:13px 0 0 10px;font:400 16px/1.2 var(--cp-sans);color:#a59a8b}
.cf-leave{height:auto;min-height:65px;padding:8px 0;margin-top:5px;border-color:#5a4632;background:#211a15}
.cf-leave > .ci-feather,.cf-leave-h > .ci-feather{margin-left:17px}
.cf-leave .tt{margin-left:25px}
.cf-leave .t{font-size:23.3px}
.cf-leave .s{margin-top:6px;font:400 16px/1.15 var(--cp-sans);color:#a39a8d}
.cf-leave > .ci-plus,.cf-leave-h > .ci-chevron{margin-right:17px}
.cf-leave.open{display:block;height:auto;min-height:0;padding:0 12.6px 14px;border-color:#896433;background:#1e1812;cursor:default}
.cf-leave-h{display:flex;align-items:center;width:calc(100% + 25.2px);min-height:63px;box-sizing:border-box;margin:0 -12.6px;padding:8px 0;border:0;border-radius:10px 10px 0 0;background:none;color:var(--cp-text);text-align:left;font:inherit;cursor:pointer}
.cf-leave-h > .ci-chevron{margin-right:21px}
.cf-leave textarea{display:block;width:100%;height:auto;box-sizing:border-box;margin-top:0;padding:9px 12px;border:1.5px solid #7a5a30;border-radius:8px;background:#171410;box-shadow:none;font:500 16.4px/1.3 var(--cp-sans);color:#e8e6e3;resize:none;overflow-y:auto;field-sizing:content;min-height:40px;max-height:92px}
.cf-leave textarea:focus{border-color:#c8903f;box-shadow:none}
.cf-leave textarea::placeholder{color:#8a8173}
.cf-saved{display:inline-flex;align-items:center;gap:15px;height:32.5px;margin-top:8.5px;padding:0 15px 0 14px;border:1.5px solid #855d2c;border-radius:8px;background:#211a14;font:600 15.2px/1 var(--cp-bold);color:#e6e2dc;cursor:pointer}
.cf-saved:hover,.cf-saved[aria-expanded="true"]{background:#2b2118}
.cf-quotes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:190px;overflow-y:auto}
.cf-quotes button{display:flex;align-items:flex-start;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--cp-line-soft);border-radius:8px;background:#231913;font:400 15px/1.35 var(--cp-sans);color:#e0dbd2;text-align:left;cursor:pointer}
.cf-quotes button:hover{border-color:#855d2c}
.cf-quotes .pxi{margin-top:3px}
.cf-none{margin:8px 0 0 2px;font:400 14.5px/1.3 var(--cp-sans);color:#9c9284}
.cf-felt{margin:12px 0 0 1.7px;font:400 15.6px/1 var(--cp-sans);color:#b2a999}
.cf-moods{display:grid;grid-template-columns:repeat(4,1fr);gap:6.5px;margin-top:9px}
.cf-mood-t{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:59px;box-sizing:border-box;padding:7px 0 0;border:1.5px solid #3e3326;border-radius:8px;background:#1c1611;font:600 14.6px/1 var(--cp-bold);color:#e6e3df;cursor:pointer}
.cf-mood-t .ci{margin:calc((27.2px - var(--h)) / 2) 0}
.cf-mood-t .ci-t-sun{--h:27.2px}.cf-mood-t .ci-t-cloud{--h:19.2px}.cf-mood-t .ci-t-rain{--h:24px}.cf-mood-t .ci-t-storm{--h:25.6px}
.cf-mood-t{gap:5px}
.cf-mood-t[aria-pressed="true"]{border-color:#cb9746;background:linear-gradient(180deg,#3a2716,#33220f)}
.cf-mood-t:hover{border-color:#6f5638}
.cf-acts{display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-top:6.5px}
.cf-acts .err{margin-right:auto;font:400 13.5px/1.2 var(--cp-sans);color:#ffb08a}
.cf-cancel{padding:6px 2px;border:0;background:none;font:500 16.4px/1 var(--cp-sans);color:#9a8c76;cursor:pointer}
.cf-cancel:hover{color:#c5b7a1}
.cf-post{display:inline-flex;align-items:center;gap:10px;height:32.5px;padding:0 15px 0 11px;border:1.5px solid #cd9d48;border-radius:8px;background:#2a1c10;font:600 15.4px/1 var(--cp-bold);color:#e6b65a;cursor:pointer}
.cf-post .ci-feather{width:18px;height:20.7px}
.cf-post:hover{background:#352412}
.cf-back{display:flex;align-items:center;gap:13px;margin:13px 0 0 4px;padding:4px 0;border:0;background:none;font:500 15.6px/1 var(--cp-sans);color:#c8a565;cursor:pointer}
.cf-back:hover{color:#e6c27f}
/* Tonight's notes. */
.cf-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cf-label + .cf-notes{margin-top:14px}
.cf-note{display:flex;align-items:flex-start;padding:11.7px 16px 12px 0;border:1px solid var(--cp-line-soft);border-radius:10px;background:#241912}
.cf-mood{flex:none;width:88px;height:37px;box-sizing:border-box;padding-right:4.5px;display:flex;justify-content:center;align-items:center;margin-top:2.9px}
.cf-mood .ci-t-rain{width:32.5px;height:34.8px}
.cf-mood .ci-t-storm{width:34.8px;height:37.1px}
.cf-nb{flex:1;min-width:0}
.cf-nh{display:flex;align-items:baseline;gap:10px}
.cf-nh .nm{flex:1;min-width:0;font:400 19.2px/1 var(--cp-serif);color:#f6f4ed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.3em 0;margin:-.3em 0}
.cf-nh .ago{flex:none;font:400 16.8px/1 var(--cp-serif);color:#d1c2af}
.cf-note .tx{margin:6px 0 0;font:400 20.9px/1.2 var(--cp-serif);color:#f1f0ef;overflow-wrap:anywhere}
.cf-mallow{display:flex;width:max-content;align-items:center;gap:16px;height:43px;box-sizing:border-box;margin:9px 0 0 -3px;padding:0 20px 0 12.5px;border:1.5px solid #825932;border-radius:8px;background:#251a13;font:400 21px/1 var(--cp-serif);color:#fdfaef}
button.cf-mallow{cursor:pointer}
button.cf-mallow:hover{background:#2e2016;border-color:#a2713d}
button.cf-mallow[aria-pressed="true"]{border-color:#d29a48;background:#2e1f12;cursor:default}
.cf-mallow .n{min-width:8px}
/* Reporting a note (beyond the mock-up: a line everyone reads needs a way to report it). The flag shows on
   hover where there is one, always on touch screens. */
.cf-flag{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-6px -7px -6px -4px;padding:0;border:0;border-radius:6px;background:none;color:#8a7c68;cursor:pointer}
.cf-flag:hover,.cf-flag[aria-expanded="true"]{color:#e6b65a;background:#2e2016}
@media (hover:hover){.cf-note .cf-flag{opacity:0;transition:opacity .15s}.cf-note:hover .cf-flag,.cf-note .cf-flag:focus-visible,.cf-note .cf-flag[aria-expanded="true"]{opacity:1}}
.cf-report{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 20px;margin-top:10px}
.cf-report-why{flex:1 0 100%;height:32.5px;padding:0 8px;border:1.5px solid #3e3326;border-radius:8px;background:#1c1611;font:400 14.5px/1 var(--cp-sans);color:#e6e3df}
.cf-report-send{order:2;height:32.5px;padding:0 14px;border:1.5px solid #cd9d48;border-radius:8px;background:#2a1c10;font:600 14.5px/1 var(--cp-bold);color:#e6b65a;cursor:pointer}
.cf-report-send:hover{background:#352412}
.cf-report-cancel{order:1;padding:6px 2px;border:0;background:none;font:500 14.5px/1 var(--cp-sans);color:#9a8c76;cursor:pointer}
.cf-report-cancel:hover{color:#c5b7a1}

/* The other places' panels (the waterside, the gate, a place still to come) in the same dress. */
.panel .p-head{padding-right:56px}
.panel .p-eyebrow{font:700 12px/1 var(--cp-px);letter-spacing:.2em;color:var(--cp-gold);margin:0 0 10px}
.panel .p-head h2{font:700 44px/1.05 var(--cp-serif);color:#fdfcf2}
.panel .p-head .who{margin-top:6px;font:400 19px/1.25 var(--cp-serif);color:#e8e2d8}
.panel .sec-label{font:400 17px/1.2 var(--cp-serif);color:#d8cfc2}
.panel .sec-label .px{font:700 11px/1 var(--cp-px);letter-spacing:.2em;color:var(--cp-gold)}
.panel .hero-btn{border-radius:8px;background:#fd9a3c;color:#1c1007;box-shadow:inset 0 1px 0 #fccd6c,inset 0 -3px 0 #e07f35,0 3px 0 rgba(0,0,0,.35)}
.panel .hero-btn .t{font:700 20px/1.2 var(--cp-bold)}
.panel .hero-btn .s{font:400 14px/1.3 var(--cp-sans);opacity:.85}
.panel .btn{border-radius:8px;box-shadow:none;border:1.5px solid #ab7847;background:#281c15;font-family:var(--cp-bold);font-weight:600}
.panel .btn.primary{border-color:transparent;background:#fd9a3c;color:#1c1007;box-shadow:inset 0 1px 0 #fccd6c,inset 0 -3px 0 #e07f35}
.panel .chip-btn{border-radius:8px;box-shadow:inset 0 0 0 1.5px #4d3c2d}
.panel .chip-btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px #cb9746;background:#33220f;color:var(--cp-text)}
.panel .exp-card{border-radius:10px;box-shadow:none;border:1px solid var(--cp-line-soft);background:#231913}
.panel .exp-art{border-radius:6px}
.panel .stat{border-radius:10px}

/* The waterside's panel (watersideHTML in src/ui.js): the "Hear lines" switch. (Its player went on 2026-10-29:
   the camp's player shows beside the panel instead, styles/mini-player.css.) */
.sw-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--cp-line-soft);border-radius:10px;background:#241912;cursor:pointer}
.sw-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sw-t b{font:600 19px/1.15 var(--cp-serif);color:#fbf7ee}
.sw-t span{font:400 14.5px/1.3 var(--cp-sans);color:#a59a8b}
input.cp-switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:50px;height:28px;margin:0;border:0;border-radius:14px;background:#3a2b20;box-shadow:inset 0 0 0 1.5px #6b5038;cursor:pointer;transition:background .2s,box-shadow .2s}
input.cp-switch::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#d9cfc2;transition:transform .2s var(--ease),background .2s}
input.cp-switch:checked{background:#fd9a3c;box-shadow:inset 0 0 0 1.5px #fd9a3c}
input.cp-switch:checked::after{transform:translateX(22px);background:#fff8ec}
input.cp-switch:focus-visible{outline:2px solid var(--cp-gold);outline-offset:3px}

/* ---- by the water (the meditation's screen, src/ui.js; the user, 2026-10-17) ----
   Top left the player and the Books card in the waterside panel's dress; top right the settings and Back
   to the water (.page-bar, as in every building). The Books card's menu: the first box shows the books,
   then a book's categories; a category's subcategories open in a second box to its right. */
#medUI .med-tools{position:absolute;top:calc(var(--safe-t) + 18px);left:19px;display:flex;align-items:flex-start;gap:12px;pointer-events:auto}
#medUI .med-bar{pointer-events:auto}
/* one row (the user, 2026-10-17): the book, "Hear lines" and its switch, the arrow that opens the books */
.med-books{display:flex;align-items:center;gap:12px;box-sizing:border-box;padding:12px 10px 12px 14px;background:#241912;border:1px solid var(--cp-line-soft);border-radius:10px}
.med-books-ico{display:grid;place-items:center}
.med-books-sw{display:flex;align-items:center;gap:12px;cursor:pointer}
.med-books-sw span{font:400 14.5px/1.2 var(--cp-sans);color:#e6dccd;white-space:nowrap}
.med-books-open{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.med-books-open:hover{background:rgba(255,226,180,.08)}
.med-books-open:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}
.med-books-open .ci-chevron{transform:rotate(180deg);transition:transform .2s}
.med-books-open[aria-expanded="true"] .ci-chevron{transform:none}
.qm-boxes{position:absolute;z-index:5;top:calc(100% + 8px);left:0;display:flex;align-items:flex-start;gap:8px}
.qm-boxes .quote-menu{position:static;width:256px;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;box-sizing:border-box;padding:12px 14px 14px;gap:9px;background:#1b130d;border:1.5px solid var(--cp-line);border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.5);font:400 14.5px/1.3 var(--cp-sans)}
.qm-boxes .qm-head{font:700 11px/1 var(--cp-px);letter-spacing:.2em;color:var(--cp-gold);text-transform:uppercase}
.qm-boxes .qm-row{border-radius:8px;padding:0 6px;margin:0 -6px}
.qm-boxes .qm-row.open{background:#2e2016;box-shadow:inset 0 0 0 1px #855d2c}
.qm-boxes .qm-row.open i{color:#e6b65a}
.qm-boxes .qm-row b,.qm-boxes .qm-cat b{font-weight:500}
html[lang="ko"] .qm-boxes .qm-head{font-family:var(--cp-sans);font-weight:500;font-size:13px;letter-spacing:.1em}
/* a narrow window: the bar on top and the cards under it */
@media (max-width:980px){
  #medUI{display:flex;flex-direction:column;align-items:stretch;gap:12px;box-sizing:border-box;padding:calc(var(--safe-t) + 14px) 12px 0}
  #medUI .med-bar{position:static;align-self:flex-end;order:1}
  #medUI .med-tools{position:static;order:2;flex-wrap:wrap;left:auto;top:auto}
  body.meditating .settings{top:calc(var(--safe-t) + 102px);right:12px}
}
@media (max-width:760px){
  .med-books{width:100%}
  .med-books-sw{flex:1;justify-content:space-between}
  .qdrop{width:100%}
  .qm-boxes{right:0;flex-wrap:wrap}
  .qm-boxes .quote-menu{width:100%}
}

/* ---- the sign over a place the painting points at (renderSign in src/village/village.js) ---- */
.sign{position:absolute;z-index:3;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .18s ease;padding:0;background:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:3.5px;white-space:nowrap;text-align:left}
.sign.on{opacity:1}
.sign.armed{pointer-events:auto}
.sg-card{display:flex;align-items:center;min-height:71px;box-sizing:border-box;padding:6px 17px 6px 20px;border:2px solid #dc9d4c;border-radius:14px;background:linear-gradient(180deg,#27190c,#1a130b);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 8px 18px rgba(0,0,0,.4)}
.sg-card > .ci{margin-right:16px}
.sg-t{display:flex;flex-direction:column}
.sg-t b{display:block;font:700 22.3px/1 var(--cp-bold);letter-spacing:0;text-transform:none;color:#fffdfb;padding:.15em 0;margin:-.15em 0}
.sg-t > span{margin-top:6px;font:500 16px/1 var(--cp-sans);color:#d9d0c5}
.sg-pill{display:flex;align-items:center;height:36px;box-sizing:border-box;padding:0 15px 0 11px;border:2px solid #d38347;border-radius:11px;background:linear-gradient(180deg,#2a1b0f,#352115);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 6px 14px rgba(0,0,0,.35)}
.sg-pill > .ci{margin-right:16px}
.sg-pill span:last-child{font:500 16px/1 var(--cp-sans);color:#d9d0c5}
.sg-ptr,.sg-dot{position:absolute;display:none;pointer-events:none}
.sign.ptr .sg-ptr,.sign.ptr .sg-dot{display:block}
.sg-ptr{left:50%;top:100%;width:2px;height:var(--ptr-len,26px);margin-left:-1px;background:#fff5df;border-radius:1px;transform-origin:50% 0;transform:rotate(var(--ptr-rot,0rad));box-shadow:0 0 3px rgba(0,0,0,.35)}
.sg-dot{left:calc(50% + var(--dot-x,0px));top:calc(100% + var(--dot-y,28px));width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff5df;box-shadow:0 0 6px rgba(255,240,200,.75)}
.sg-go{margin-top:9px;align-self:flex-start;padding:6px 12px;border:1.5px solid #f0a843;border-radius:8px;background:#3e2716;font:600 14px/1 var(--cp-bold);color:#fff5df;cursor:pointer}

/* ---- the zoom bar, bottom middle (in the free part when the panel is beside the menu) ---- */
.zoom-bar{position:absolute;z-index:4;left:50%;right:auto;bottom:calc(var(--safe-b) + 55px);transform:translateX(-50%);display:flex;gap:0;padding:3px;border:2px solid var(--cp-line);border-radius:30px;background:#1b120d;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.4)}
body.panel-left.panel-open .zoom-bar{left:calc(815px + (100% - 815px) / 2)}
/* (away with the menu and the cards while the title and the way in are on) */
.zoom-bar{transition:opacity .4s ease}
body.pre .zoom-bar{opacity:0;pointer-events:none}
.zoom-bar button{display:flex;align-items:center;gap:12px;height:48px;box-sizing:border-box;padding:0 24px 0 27px;border:2px solid transparent;border-radius:20px;background:none;font:400 16.8px/1 var(--cp-serif);color:#f4f0e9;cursor:pointer;white-space:nowrap}
.zoom-bar button:first-child{padding:0 14px 0 21px}
.zoom-bar button:hover:not([disabled]){background:rgba(255,226,180,.06)}
.zoom-bar button[aria-pressed="true"]{border-color:#f2aa40;background:linear-gradient(180deg,#4c2a15,#553118);color:#fcf8ea}
.zoom-bar button[disabled]{cursor:default}
.zoom-bar button:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}

/* ---- in every building (and by the water), top right: the settings, then Back to camp ---- */
/* Two round wooden buttons, the user's pictures (2026-10-26: the notice board's painted arrow, liked, and a gear made
   in the same wood; assets/camp/ui/round-*.webp). Until then the Library's copper frame with a triangle and the words.
   The bar hides where a building opens something over its room (a book, a card, the journal, the map, the deck). */
.page-bar{position:absolute;z-index:9;top:calc(var(--safe-t) + 18px);right:20px;display:flex;align-items:flex-start;gap:12px;transition:opacity .25s ease}
#page:has(.lib.dim) .page-bar,#page:has(.cb.reading) .page-bar,#page:has(.lk.atlas) .page-bar,#page:has(.lk.deck) .page-bar,#page:has(.tv.dim) .page-bar,#page:has(.tv.counter) .page-bar{opacity:0;pointer-events:none}
.lib-edge-main .lib-back{display:none}
.pg-round{--pg-shadow:drop-shadow(0 3px 5px rgba(0,0,0,.45));position:relative;display:block;flex:none;width:80px;height:80px;padding:0;border:0;border-radius:50%;background:center / 100% 100% no-repeat;cursor:pointer;filter:var(--pg-shadow);transition:transform .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}
.pg-round.pg-back{background-image:url(../assets/camp/ui/round-back.webp)}
.pg-round.pg-set{background-image:url(../assets/camp/ui/round-settings.webp)}
.pg-round.pg-friends{background-image:url(../assets/camp/ui/round-friends.webp)}
.pg-round:hover{transform:scale(1.05);filter:var(--pg-shadow) drop-shadow(0 0 8px rgba(255,205,135,.5)) brightness(1.05)}
.pg-round:active{transform:scale(.95)}
.pg-round:focus-visible{outline:2px solid #f0c27a;outline-offset:3px}
.pg-round.pg-set.on{filter:var(--pg-shadow) drop-shadow(0 0 8px rgba(255,205,135,.55)) brightness(1.12)}
@media (prefers-reduced-motion:reduce){.pg-round{transition:none}.pg-round:hover,.pg-round:active{transform:none}}
body.in-page .settings,body.meditating .settings{top:calc(var(--safe-t) + 108px);right:20px}
.page-foot .pg-round{width:52px;height:52px}

/* ---- building pages cover the window (styles/main.css); their content starts beside the menu card ---- */
.page-scroll{left:338px;transition:left .5s var(--ease)}
body.nav-closed .page-scroll{left:0}

/* ---- toasts and the first visit's hint sit above the zoom bar ---- */
body.view-painted #toast{bottom:calc(var(--safe-b) + 128px)}
body.view-painted .hintline{left:var(--view-c,50%);margin-left:0;bottom:calc(var(--safe-b) + 128px);transform:translateX(-50%);width:max-content;border-radius:10px;box-shadow:0 0 0 1.5px #5c4130}

/* ---- a phone: the menu slides in as a card, the panel is a sheet over the bottom ---- */
@media (max-width:760px){
  :root{--side-w:0px}
  .side{left:12px;top:calc(var(--safe-t) + 12px);bottom:calc(var(--safe-b) + 12px);width:min(300px,calc(100vw - 48px));box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 16px 36px rgba(0,0,0,.45)}
  body.nav-closed .side{box-shadow:none}
  .nav-toggle{left:calc(min(300px,100vw - 48px) + 10px)}
  .hud{top:calc(var(--safe-t) + 12px);right:12px;gap:8px}
  .hud .pg-round{width:46px;height:46px}
  /* (the plaque at 56 tall, its corners at the same scale; the time only, as the card had) */
  .hud-clock{height:56px;min-width:0;padding:0 6px 0 2px;border-width:16.1px 18px;border-image-width:16.1px 18px}
  .hud-clock > .hud-sky{transform:scale(.67);transform-origin:center;margin:0 -6px}
  .hud-clock .hud-txt{margin:0 0 0 8px}
  .hud-clock .num{font-size:18px}
  .hud .lbl{display:none}
  .settings{top:calc(var(--safe-t) + 76px);right:12px;width:calc(100vw - 24px)}
  /* the sliders take what the row has left, so a long name (자연의 소리) keeps its room; both start where the
     longer name ends */
  .settings input.st-range{flex:1 1 auto;width:auto;min-width:80px;max-width:184px;margin:0 12px 0 14px}
  .st-row:has(.st-range) .st-lbl{min-width:6.1em}
  html[lang="ko"] .st-row:has(.st-range) .st-lbl{min-width:4.7em}
  .panel,body.panel-left .panel{left:12px;right:12px;top:auto;bottom:calc(var(--safe-b) + 12px);width:auto;max-height:62vh;max-height:62dvh;transform:translateY(calc(100% + 60px))}
  body.panel-left .panel:not(.open){transform:translateY(calc(100% + 60px))}
  .panel-scroll{padding:22px 18px 22px}
  .panel-x{top:12px;right:12px}
  .cf-title{font-size:44px}
  .cf-eyebrow{margin-right:52px}
  .zoom-bar{bottom:calc(var(--safe-b) + 16px)}
  .zoom-bar button{height:40px;padding:0 13px 0 14px;gap:8px;font-size:16px}
  .page-scroll,body.nav-closed .page-scroll{left:0}
  .page-bar{top:calc(var(--safe-t) + 12px);right:14px;gap:8px}
  .page-bar .pg-round{width:52px;height:52px}
  body.in-page .settings{top:calc(var(--safe-t) + 72px);right:14px}
  body.meditating .settings{top:calc(var(--safe-t) + 74px);right:12px}
  body.view-painted #toast,body.view-painted .hintline{bottom:calc(var(--safe-b) + 84px)}
  body.view-painted.panel-open #toast{bottom:auto}
  /* the menu open over the camp: the cards at the top right step back under its shade */
  body:not(.nav-closed) .hud{opacity:0;pointer-events:none}
  body.view-painted .hintline{width:auto;max-width:calc(100vw - 32px)}
}
@media (max-width:420px){
  .zoom-bar button{padding:0 10px;font-size:15px}
  .zoom-bar button .ci{display:none}
  .cf-leave .tt{margin-left:16px}
  .cf-moods{gap:5px}
  .cf-mood-t{font-size:13px}
}

/* ---- Korean: Hangul has no pixel face; labels take the plain sans, a little larger, less spaced ---- */
html[lang="ko"] .nav-label,html[lang="ko"] .cf-eyebrow span,html[lang="ko"] .cf-label,html[lang="ko"] .panel .p-eyebrow,html[lang="ko"] .panel .sec-label .px{font-family:var(--cp-sans);font-weight:500;font-size:14px;letter-spacing:.12em}
html[lang="ko"] .nav-item .en{font-family:var(--cp-serif);font-size:20px;line-height:1;letter-spacing:0;color:#fefefc}
html[lang="ko"] .cf-title{font-size:48px}
/* (the Korean tagline is longer: a size that keeps it on the card's one line) */
html[lang="ko"] .tagline{font-size:16px}