:root {
  --forest:#0b1d17;
  --forest-95:rgba(9,24,19,.95);
  --forest-70:rgba(9,24,19,.7);
  --forest-45:rgba(9,24,19,.45);
  --moss:#153c2f;
  --gold:#d8b879;
  --gold-soft:rgba(216,184,121,.4);
  --bone:#f3efe7;
  --bone-80:rgba(243,239,231,.8);
  --bone-60:rgba(243,239,231,.62);
  --line:rgba(243,239,231,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --label:500 10.5px/1.2 var(--sans);
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--forest); }
body { color:var(--bone); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; }
::selection { background:var(--gold); color:var(--forest); }
button,a,input,select,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:progress; }
svg { width:18px; height:18px; flex:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:1px solid var(--gold); outline-offset:4px; }
#world { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.grade { position:fixed; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to bottom,rgba(9,24,19,.34),transparent 22%,transparent 72%,rgba(9,24,19,.38)),radial-gradient(ellipse at center,transparent 58%,rgba(9,24,19,.32)); }
.grain { position:fixed; inset:-40%; z-index:60; pointer-events:none; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .25s steps(2) infinite; }
@keyframes grain { 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,3%)} }

/* Loader ------------------------------------------------------------------- */
#loader { position:fixed; inset:0; z-index:110; display:grid; place-content:center; justify-items:center; gap:22px; background:var(--forest); transition:opacity .9s var(--ease),visibility .9s; }
#loader img { width:64px; height:64px; opacity:.9; animation:breathe 2.4s ease-in-out infinite; }
#loader div { width:120px; height:1px; background:rgba(216,184,121,.18); overflow:hidden; }
#loader i { display:block; height:100%; width:100%; background:var(--gold); transform:translateX(-100%); animation:loadline 1.6s var(--ease) forwards; }
body.ready #loader { opacity:0; visibility:hidden; }
@keyframes breathe { 50%{transform:scale(.94);opacity:.6} }
@keyframes loadline { to{transform:none} }

/* Arrival ------------------------------------------------------------------ */
#arrival { position:fixed; inset:0; z-index:100; overflow:hidden; background:var(--forest); transition:opacity 1.4s var(--ease),visibility 1.4s,filter 1.4s var(--ease); }
#arrival picture,#arrival picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#arrival picture img { transform:scale(1.08); transition:transform 1.6s var(--ease); }
body.ready #arrival picture img { transform:scale(1); transition-duration:9s; }
.arrival-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,20,15,.82),rgba(7,20,15,.38) 48%,rgba(7,20,15,.05) 75%),linear-gradient(to top,rgba(7,20,15,.72),transparent 42%); }
.arrival-brand { position:absolute; top:32px; left:clamp(24px,5vw,78px); display:flex; align-items:center; gap:14px; color:#fff; text-decoration:none; }
.arrival-brand img,.brand img { width:30px; height:30px; }
.arrival-brand span,.brand span { font:400 12px/1 var(--sans); letter-spacing:.46em; }
.arrival-copy { position:absolute; left:clamp(24px,7vw,112px); bottom:clamp(96px,15vh,150px); width:min(900px,76vw); }
.arrival-copy h1 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(64px,8.6vw,138px); line-height:.84; letter-spacing:-.035em; text-wrap:balance; }
.arrival-copy h1 span,.arrival-copy h1 em { display:block; }
.arrival-copy h1 em { color:var(--gold); font-style:italic; }
.arrival-lead { max-width:38ch; margin:30px 0 34px; font-size:16px; line-height:1.6; color:var(--bone-80); }
#enter-world { display:inline-flex; align-items:center; gap:26px; padding:7px 7px 7px 26px; border:1px solid rgba(243,239,231,.5); background:rgba(9,24,19,.28); border-radius:999px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:15px; letter-spacing:.01em; transition:border-color .4s,background .4s,opacity .4s; }
#enter-world b { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--gold); color:var(--forest); transition:transform .5s var(--ease); }
#enter-world b svg { width:20px; height:20px; }
#enter-world:hover:not(:disabled) { border-color:var(--gold); background:rgba(9,24,19,.5); }
#enter-world:hover:not(:disabled) b { transform:rotate(-45deg); }
#enter-world:disabled { opacity:.55; }
#enter-world:disabled b { animation:breathe 1.6s ease-in-out infinite; }
.arrival-foot { position:absolute; left:clamp(24px,5vw,78px); right:clamp(24px,5vw,78px); bottom:28px; display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:18px; font:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80); }
/* Staged arrival: headline rises, then lead, then call to action. */
.arrival-copy h1 span,.arrival-copy h1 em,.arrival-lead,#enter-world,.arrival-foot { opacity:0; transform:translateY(24px); transition:opacity 1.2s var(--ease),transform 1.2s var(--ease); }
body.ready .arrival-copy h1 span,body.ready .arrival-copy h1 em,body.ready .arrival-lead,body.ready #enter-world,body.ready .arrival-foot { opacity:1; transform:none; }
body.ready .arrival-copy h1 em { transition-delay:.12s; }
body.ready .arrival-lead { transition-delay:.3s; }
body.ready #enter-world { transition-delay:.45s; }
body.ready .arrival-foot { transition-delay:.6s; }
body.entered #arrival { opacity:0; visibility:hidden; filter:blur(14px); }
body.entered #arrival picture img { transform:scale(1.12); transition:transform 1.6s var(--ease); }

/* Top bar ------------------------------------------------------------------ */
#topbar { position:fixed; z-index:20; left:0; top:0; width:100%; height:80px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(22px,4vw,64px); opacity:0; transform:translateY(-14px); transition:opacity .9s 1.8s var(--ease),transform .9s 1.8s var(--ease); pointer-events:none; }
body.entered #topbar { opacity:1; transform:none; }
body.entered #topbar .brand,body.entered #topbar .top-actions { pointer-events:auto; }
.brand { display:flex; align-items:center; justify-self:start; gap:13px; text-decoration:none; }
#place { display:flex; align-items:center; gap:10px; font:var(--label); letter-spacing:.2em; text-transform:uppercase; transition:opacity .4s; }
#place i { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(216,184,121,.16); }
body.overlay-open #place { opacity:0; }
.top-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.top-actions button { display:flex; align-items:center; gap:10px; border:1px solid rgba(243,239,231,.3); background:var(--forest-45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:999px; height:42px; padding:0 17px; font:var(--label); letter-spacing:.14em; text-transform:uppercase; transition:border-color .3s,background .3s,color .3s; }
.top-actions button:hover { border-color:var(--gold); }
#sound { border-color:transparent; background:none; backdrop-filter:none; }
#sound svg { opacity:.55; transition:opacity .3s,color .3s; }
#sound[aria-pressed="true"] svg { opacity:1; color:var(--gold); }
#language { min-width:42px; justify-content:center; padding:0!important; }
#menu-open { padding-left:19px; }
#menu-open:hover { background:var(--gold); color:var(--forest); }

#world-title { position:fixed; z-index:8; left:clamp(22px,4vw,64px); top:112px; pointer-events:none; opacity:0; transform:translateY(16px); transition:opacity 1s 2.1s var(--ease),transform 1s 2.1s var(--ease); text-shadow:0 2px 24px rgba(9,24,19,.45); }
body.entered #world-title { opacity:1; transform:none; }
body.walked #world-title,body.entered.walked #world-title { opacity:0; transform:translateY(-10px); transition-delay:0s; }
#world-title p { margin:0 0 10px; font:var(--label); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-80); }
#world-title h2 { margin:0; font:400 clamp(38px,3.6vw,58px)/.95 var(--serif); letter-spacing:-.02em; max-width:9ch; }
body.lang-pl #world-title h2 { max-width:11ch; }

#reticle { position:fixed; z-index:7; left:50%; top:50%; width:26px; height:26px; transform:translate(-50%,-50%); pointer-events:none; opacity:0; transition:opacity .4s; }
body.pointer-locked #reticle { opacity:.75; }
#reticle i { position:absolute; inset:9px; border:1px solid var(--gold); border-radius:50%; }

/* Ring markers: the ring floats above its light column; the label names the section. */
#markers { position:fixed; inset:0; z-index:9; pointer-events:none; }
.world-marker { position:absolute; left:0; top:0; transform-origin:24px 50%; pointer-events:auto; display:flex; align-items:center; gap:12px; border:0; padding:0; background:none; color:var(--bone); will-change:transform; }
.world-marker > i { position:relative; display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(243,207,142,.9); border-radius:50%; background:rgba(9,24,19,.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 0 22px rgba(243,207,142,.35),0 8px 24px rgba(0,0,0,.25); transition:background .35s var(--ease),transform .35s var(--ease); }
.world-marker > i::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px 4px rgba(243,207,142,.55); transition:background .35s; }
.world-marker > i::after { content:""; position:absolute; inset:-8px; border:1px solid rgba(243,207,142,.6); border-radius:50%; animation:markerPulse 2.6s var(--ease) infinite; }
.world-marker > span { display:grid; gap:4px; padding:9px 14px 10px; text-align:left; background:var(--forest-70); border:1px solid var(--gold-soft); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.22); opacity:0; transform:translateX(-6px); transition:opacity .35s var(--ease),transform .35s var(--ease),background .35s; pointer-events:none; }
.world-marker small { font:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.world-marker b { font:400 21px/1 var(--serif); white-space:nowrap; }
.world-marker.flip { flex-direction:row-reverse; transform-origin:calc(100% - 24px) 50%; }
.world-marker.flip > span { text-align:right; transform:translateX(6px); }
.world-marker.labelled > span,.world-marker.near > span,.world-marker.hover > span,.world-marker:focus-visible > span { opacity:1; transform:none; }
.world-marker.hover > i,.world-marker:focus-visible > i { background:var(--gold); transform:scale(1.08); }
.world-marker.hover > i::before,.world-marker:focus-visible > i::before { background:var(--forest); box-shadow:none; }
.world-marker.hover > span { background:var(--forest-95); border-color:var(--gold); }
@keyframes markerPulse { from{transform:scale(.6);opacity:0} 30%{opacity:.9} to{transform:scale(1.5);opacity:0} }

#action-prompt { position:fixed; z-index:10; left:50%; bottom:44px; transform:translate(-50%,14px); display:flex; align-items:center; gap:12px; padding:7px 18px 7px 7px; border:1px solid var(--gold-soft); border-radius:999px; background:var(--forest-70); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .3s; }
#action-prompt.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#action-prompt:hover { border-color:var(--gold); }
#action-prompt kbd { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--gold); color:var(--forest); font:500 12px var(--sans); }
#action-prompt span { font:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-80); }
#action-prompt b { font:400 21px/1 var(--serif); }
#action-prompt svg { color:var(--gold); }

#controls { position:fixed; z-index:8; left:clamp(22px,4vw,64px); bottom:30px; display:grid; grid-template-columns:auto auto; align-items:center; gap:10px 16px; opacity:0; transform:translateY(14px); transition:opacity .9s 2.3s var(--ease),transform .9s 2.3s var(--ease); }
body.entered #controls { opacity:1; transform:none; }
#controls > p { margin:0; font:var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--bone-60); }
.keys { display:grid; grid-template-columns:repeat(3,24px); grid-template-rows:repeat(2,24px); gap:4px; }
.keys kbd { display:grid; place-items:center; border:1px solid rgba(243,239,231,.34); border-radius:5px; background:var(--forest-45); font:500 10px var(--sans); }
.keys kbd:nth-child(1) { grid-column:2; grid-row:1; }
.keys kbd:nth-child(2) { grid-column:1; grid-row:2; }
.keys kbd:nth-child(3) { grid-column:2; grid-row:2; }
.keys kbd:nth-child(4) { grid-column:3; grid-row:2; }
.mouse-icon { display:flex; align-items:center; gap:9px; }
.mouse-icon i { display:block; width:16px; height:24px; border:1px solid rgba(243,239,231,.45); border-radius:8px; position:relative; }
.mouse-icon i::after { content:""; position:absolute; width:2px; height:5px; border-radius:2px; background:var(--gold); left:6px; top:4px; }
.mouse-icon span { font:var(--label); letter-spacing:.14em; text-transform:uppercase; }
#mouse-mode { grid-column:1/-1; justify-self:start; border:0; border-bottom:1px solid rgba(243,239,231,.4); padding:3px 0 5px; background:none; text-align:left; font:var(--label); letter-spacing:.14em; text-transform:uppercase; transition:border-color .3s,color .3s; }
#mouse-mode:hover { color:var(--gold); border-color:var(--gold); }

#compass { position:fixed; z-index:8; left:50%; top:96px; transform:translateX(-50%); display:flex; align-items:center; gap:9px; opacity:0; transition:opacity .9s 2.2s; }
body.entered #compass { opacity:.8; }
#compass span { font:var(--label); letter-spacing:.15em; }
#compass b { width:96px; height:1px; background:rgba(243,239,231,.3); position:relative; }
#compass b i { position:absolute; left:50%; top:-3px; width:7px; height:7px; background:var(--gold); transform:translateX(-50%) rotate(45deg); }

#minimap { position:fixed; z-index:8; right:clamp(22px,4vw,64px); bottom:28px; width:216px; padding:13px; background:var(--forest-70); border:1px solid var(--gold-soft); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; transition:width .45s var(--ease),opacity .9s 2.3s; }
body.entered #minimap { opacity:1; }
#minimap.big { width:min(430px,calc(100vw - 44px)); }
.map-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font:var(--label); letter-spacing:.16em; text-transform:uppercase; }
.map-head button { border:0; border-bottom:1px solid rgba(243,239,231,.4); padding:2px 0; background:none; font:var(--label); letter-spacing:.12em; text-transform:uppercase; }
.map-field svg { width:100%; height:auto; display:block; }
.shore { fill:rgba(102,157,138,.3); }
.route,.branch { fill:none; stroke:rgba(216,184,121,.75); stroke-width:3; stroke-linecap:round; stroke-dasharray:1 5; }
.map-dot { fill:var(--gold); stroke:#fff; stroke-width:1; }
#map-player { fill:#fff; }
#map-arrow { fill:#fff; transform-origin:108px 139px; }
#minimap small { display:block; text-align:center; margin-top:5px; font:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-60); }

/* Menu --------------------------------------------------------------------- */
#menu { position:fixed; inset:0; z-index:70; padding:26px clamp(24px,6vw,90px) 34px; background:var(--forest-95); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); overflow:auto; opacity:0; visibility:hidden; transform:scale(1.015); transition:opacity .55s var(--ease),visibility .55s,transform .55s var(--ease); }
#menu.show { opacity:1; visibility:visible; transform:none; }
.menu-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--gold-soft); }
.menu-top > span { display:flex; align-items:center; gap:13px; font:var(--label); letter-spacing:.18em; text-transform:uppercase; }
.menu-top img { width:30px; height:30px; }
.menu-top button { display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(243,239,231,.34); border-radius:50%; background:none; transition:background .3s,color .3s; }
.menu-top button:hover { background:var(--bone); color:var(--forest); }
.menu-intro { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:end; padding:44px 0 38px; }
.menu-intro p { margin:0; font-size:15px; color:var(--bone-80); }
.menu-intro h2 { margin:0; font:400 clamp(44px,5vw,78px)/.92 var(--serif); letter-spacing:-.02em; color:var(--gold); }
#menu-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.menu-item { min-height:118px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:18px 20px; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:none; text-align:left; transition:background .3s var(--ease),color .3s; }
.menu-item:hover,.menu-item:focus-visible { background:var(--gold); color:var(--forest); }
.menu-item small { font:var(--label); letter-spacing:.16em; text-transform:uppercase; opacity:.62; }
.menu-item b { font:400 26px/1 var(--serif); }
.menu-foot { display:flex; justify-content:space-between; align-items:center; padding-top:26px; }
.menu-foot button { display:flex; align-items:center; gap:16px; border:1px solid var(--gold); border-radius:999px; padding:14px 22px; background:var(--gold); color:var(--forest); font-size:14px; }
.menu-foot p { font:var(--label); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-60); }

/* Section panel: an editorial page laid over the live world. ---------------- */
#chapter { position:fixed; inset:0 0 0 auto; z-index:50; width:min(800px,58vw); background:var(--forest-95); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); overflow:auto; overscroll-behavior:contain; transform:translateX(103%); visibility:hidden; transition:transform .8s var(--ease),visibility .8s; border-left:1px solid var(--gold-soft); box-shadow:-40px 0 120px rgba(0,0,0,.35); scrollbar-width:thin; scrollbar-color:var(--gold-soft) transparent; }
#chapter.show { transform:none; visibility:visible; }
.chapter-bar { position:sticky; top:0; z-index:5; height:62px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 18px 0 26px; background:rgba(9,24,19,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
#chapter-close { justify-self:start; display:flex; white-space:nowrap; align-items:center; gap:12px; border:0; padding:8px 0; background:none; font:var(--label); letter-spacing:.16em; text-transform:uppercase; transition:color .3s; }
#chapter-close svg { color:var(--gold); transition:transform .4s var(--ease); }
#chapter-close:hover { color:var(--gold); }
#chapter-close:hover svg { transform:translateX(-4px); }
.chapter-count { font:400 italic 17px/1 var(--serif); color:var(--bone-60); font-variant-numeric:tabular-nums; }
.chapter-x { justify-self:end; display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(243,239,231,.28); border-radius:50%; background:none; transition:background .3s,color .3s; }
.chapter-x:hover { background:var(--bone); color:var(--forest); }
.chapter-image { position:relative; margin:0; height:min(46vh,420px); overflow:hidden; }
.chapter-image::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(9,24,19,.95),transparent 55%); }
.chapter-image img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.6s var(--ease); }
#chapter.show .chapter-image img { transform:none; }
.chapter-image figcaption { position:absolute; z-index:1; right:clamp(24px,5vw,66px); bottom:18px; font:italic 400 17px/1 var(--serif); color:var(--bone-80); }
#chapter article { padding:6px clamp(24px,5vw,66px) 48px; }
#chapter article > h2 { margin:0 0 20px; font:400 clamp(48px,4.8vw,80px)/.92 var(--serif); letter-spacing:-.03em; text-wrap:balance; color:var(--bone); }
.chapter-route { display:flex; align-items:center; gap:14px; margin:0 0 34px; font:var(--label); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.chapter-route i { width:40px; height:1px; background:var(--gold-soft); }
.chapter-route em { font:italic 400 17px/1 var(--serif); letter-spacing:0; text-transform:none; color:var(--bone-80); }
.chapter-body { color:var(--bone-80); font-size:15px; line-height:1.7; }
.chapter-body > p { max-width:60ch; margin:0 0 16px; }
.chapter-body > p.chapter-lead { font:400 24px/1.38 var(--serif); color:var(--bone); max-width:34ch; }
.chapter-quote { margin:40px 0; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:italic 400 clamp(26px,2.4vw,34px)/1.18 var(--serif); color:var(--gold); text-wrap:balance; }
.chapter-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; margin-top:8px; }
.chapter-list > div { padding:18px 0 4px; border-top:1px solid var(--gold-soft); }
.chapter-list small { display:block; margin-bottom:12px; font:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.chapter-list strong { display:block; margin-bottom:8px; font:400 24px/1.05 var(--serif); color:var(--bone); }
.chapter-list p { margin:0; font-size:13.5px; line-height:1.55; color:var(--bone-60); }
.chapter-form { display:grid; gap:16px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
.chapter-form .row { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.chapter-form label { display:grid; gap:8px; font:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-80); }
.chapter-form input,.chapter-form select,.chapter-form textarea { width:100%; border:0; border-bottom:1px solid rgba(243,239,231,.3); border-radius:0; padding:12px 2px; background:transparent; color:var(--bone); outline:none; font:300 15px var(--sans); text-transform:none; letter-spacing:0; color-scheme:dark; transition:border-color .3s; }
.chapter-form input:focus,.chapter-form select:focus,.chapter-form textarea:focus { border-color:var(--gold); }
.chapter-form input::placeholder,.chapter-form textarea::placeholder { color:rgba(243,239,231,.5); }
.chapter-form select option { background:var(--forest); }
.chapter-form textarea { min-height:110px; resize:vertical; }
.chapter-form button { justify-self:start; margin-top:6px; border:0; border-radius:999px; padding:14px 24px; background:var(--gold); color:var(--forest); font-size:14px; transition:background .3s; }
.chapter-form button:hover { background:var(--bone); }
.setting-note { margin:0; padding:12px 2px; border-bottom:1px solid rgba(243,239,231,.3); font:300 15px var(--sans); letter-spacing:0; text-transform:none; color:var(--bone); }
.chapter-nav { display:grid; grid-template-columns:1fr 1fr; margin-top:52px; border-top:1px solid var(--line); }
.chapter-nav button { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon small" "icon name"; align-items:center; gap:4px 16px; border:0; padding:22px 0; background:none; text-align:left; transition:color .3s; }
.chapter-nav button:last-child { grid-template-columns:1fr auto; grid-template-areas:"small icon" "name icon"; border-left:1px solid var(--line); padding-left:22px; text-align:right; }
.chapter-nav small { grid-area:small; font:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-60); }
.chapter-nav b { grid-area:name; font:400 24px/1.05 var(--serif); }
.chapter-nav svg { grid-area:icon; color:var(--gold); width:22px; height:22px; transition:transform .4s var(--ease); }
.chapter-nav button:hover { color:var(--gold); }
.chapter-nav button:first-child:hover svg { transform:translateX(-4px); }
.chapter-nav button:last-child:hover svg { transform:translateX(4px); }

#toast { position:fixed; z-index:90; left:50%; bottom:30px; transform:translate(-50%,15px); max-width:calc(100vw - 40px); padding:13px 20px; background:var(--bone); color:var(--forest); font-size:13px; opacity:0; pointer-events:none; box-shadow:0 14px 40px rgba(0,0,0,.25); transition:.4s var(--ease); }
#toast.show { opacity:1; transform:translate(-50%,0); }
#world-guide { position:fixed; z-index:26; left:50%; bottom:36px; width:min(380px,calc(100vw - 36px)); padding:18px 20px 18px; border:1px solid var(--gold-soft); background:var(--forest-95); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 24px 70px rgba(0,0,0,.3); opacity:0; visibility:hidden; transform:translate(-50%,18px); transition:.5s var(--ease); }
#world-guide.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
#world-guide > div { display:flex; align-items:center; justify-content:space-between; }
#world-guide small { font:italic 400 15px/1 var(--serif); color:var(--gold); font-variant-numeric:tabular-nums; }
#guide-close { display:grid; place-items:center; width:32px; height:32px; border:0; padding:0; background:none; color:var(--bone-60); }
#guide-close:hover { color:var(--bone); }
#world-guide h3 { margin:8px 0 6px; font:400 30px/1 var(--serif); }
#world-guide p { margin:0; font-size:14px; line-height:1.55; color:var(--bone-80); }
#guide-next { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding:12px 14px; border:1px solid var(--gold-soft); background:rgba(216,184,121,.08); font:var(--label); letter-spacing:.16em; text-transform:uppercase; transition:background .3s,color .3s; }
#guide-next svg { color:var(--gold); }
#guide-next:hover { background:var(--gold); color:var(--forest); }
#guide-next:hover svg { color:var(--forest); }
#mobile-controls { display:none; }

@media (max-width:1100px) and (min-width:901px) {
  #chapter { width:66vw; }
  .chapter-list { grid-template-columns:1fr 1fr; }
}

@media (max-width:900px) {
  .arrival-copy { width:calc(100vw - 48px); bottom:110px; }
  .arrival-copy h1 { font-size:clamp(58px,15.5vw,100px); }
  .arrival-foot span:nth-child(2) { display:none; }
  #topbar { height:68px; grid-template-columns:1fr auto; padding:0 16px; }
  #place,#sound span,#menu-open span { display:none; }
  .brand span { font-size:11px; letter-spacing:.34em; }
  .top-actions { gap:6px; }
  .top-actions button { height:42px; min-width:42px; padding:0 12px; justify-content:center; }
  #world-title { top:88px; left:18px; }
  #world-title h2 { font-size:38px; }
  #controls,#compass { display:none; }
  /* Phone layout: map top-right, joystick bottom-left, one action above it. */
  #minimap { top:80px; bottom:auto; right:14px; width:118px; padding:7px; }
  .map-head,#minimap small { display:none; }
  #action-prompt { left:auto; right:16px; bottom:34px; transform:translateY(14px); max-width:calc(100vw - 170px); padding:6px 14px 6px 6px; }
  #action-prompt.show { transform:none; }
  #action-prompt kbd { display:none; }
  #action-prompt span { display:none; }
  #action-prompt b { font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:10px; }
  #world-guide { bottom:158px; width:calc(100vw - 32px); }
  #toast { bottom:160px; }
  #menu { padding:18px; }
  .menu-intro { grid-template-columns:1fr; gap:10px; padding:28px 0; }
  .menu-intro h2 { font-size:44px; }
  #menu-grid { grid-template-columns:repeat(2,1fr); }
  .menu-item { min-height:96px; padding:14px; }
  .menu-item b { font-size:22px; }
  .menu-foot p { display:none; }
  #chapter { width:100vw; }
  .chapter-bar { grid-template-columns:1fr auto auto; gap:14px; padding:0 12px 0 18px; }
  .chapter-image { height:34vh; }
  .chapter-list { grid-template-columns:1fr; }
  .world-marker > i { width:42px; height:42px; }
  .world-marker b { font-size:18px; }
  #mobile-controls { position:fixed; z-index:12; inset:0; display:block; pointer-events:none; opacity:0; transition:opacity .9s 2.3s; }
  body.entered #mobile-controls { opacity:1; }
  #joystick { position:absolute; left:20px; bottom:calc(26px + env(safe-area-inset-bottom)); width:104px; height:104px; border:1px solid rgba(243,239,231,.35); border-radius:50%; background:var(--forest-45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:auto; touch-action:none; }
  #joystick i { position:absolute; inset:20px; border:1px solid rgba(216,184,121,.5); border-radius:50%; }
  #joystick b { position:absolute; left:50%; top:50%; width:36px; height:36px; transform:translate(-50%,-50%); border-radius:50%; background:var(--gold); box-shadow:0 6px 20px rgba(0,0,0,.3); }
  .touch-look { position:absolute; left:20px; bottom:calc(140px + env(safe-area-inset-bottom)); margin:0; font:var(--label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-80); text-shadow:0 1px 10px rgba(9,24,19,.6); transition:opacity .6s; }
  body.walked .touch-look { opacity:0; }
  body.overlay-open #mobile-controls { display:none; }
}

@media (max-width:520px) {
  .arrival-brand { top:22px; left:20px; }
  .arrival-copy { left:20px; width:calc(100vw - 40px); }
  .arrival-lead { max-width:31ch; margin:22px 0 28px; font-size:15px; }
  .arrival-foot { left:20px; right:20px; }
  .arrival-foot span:last-child { display:none; }
  #world-title h2 { max-width:8ch; }
  .menu-intro h2 { font-size:38px; }
  .chapter-form .row { grid-template-columns:1fr; }
  #chapter article > h2 { font-size:46px; }
  .chapter-body > p.chapter-lead { font-size:21px; }
  .chapter-nav b { font-size:20px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important; }
}