/* Onir desktop interface: field journal, brass instruments and dark forest glass. */
:root{
  --onir-night:#16251e;
  --onir-forest:#26392e;
  --onir-brass:#d4af73;
  --onir-paper:#ead9b8;
  --onir-ink:#352a20;
  --onir-quiet:#baaa87;
}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #f8dc9c;outline-offset:3px}
.wordmark,.icon-button,.inventory-hint button,.text-button{transition:background .18s,border-color .18s,transform .18s,color .18s}
.wordmark:hover{background:#344537ed;border-color:#d8b77e;transform:translateY(-2px)}
.icon-button:hover,.inventory-hint button:hover{border-color:#e8c58a;color:#fff1cf;transform:translateY(-2px)}

/* The world stays visible around a legible editorial cover. */
.intro{background:linear-gradient(90deg,#0e211dd9 0%,#172b239d 39%,#172b231c 73%),radial-gradient(circle at 62% 53%,transparent 24%,#11221b47 100%)}
.intro-content{
  left:5.6%;top:52%;transform:translateY(-50%);width:min(570px,48vw);max-width:none;
  padding:30px 38px 26px;border:1px solid #c0a270ab;border-radius:3px;
  background:linear-gradient(142deg,#182b25f5 0%,#1d3028ec 62%,#1a2a24e3 100%);
  box-shadow:inset 0 0 0 4px #12221dc4,inset 0 0 0 5px #aa8a5859,0 25px 75px #0b190fc2;
  animation:onir-cover-in .5s ease-out both;
}
.intro-content::before,.intro-content::after{content:'';position:absolute;width:14px;height:14px;border-color:#d7b67b;pointer-events:none}
.intro-content::before{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.intro-content::after{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}
.intro-content>.eyebrow{font-size:10px;letter-spacing:1.7px;padding:7px 10px;background:#344033;border-color:#a98b5d}
.intro h1{font-size:clamp(43px,4.5vw,61px);line-height:1.07;letter-spacing:-1.8px;margin:19px 0 15px;color:#f6e9ca;text-shadow:0 2px 12px #091812a8}
.intro h1 em{color:#e5b77c}
.intro-content>p{font:14px/1.65 system-ui,sans-serif;color:#e5d8b9;letter-spacing:0;margin:0}
.intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:21px;align-items:stretch}
.intro-actions #start{grid-column:1/-1;width:100%;min-height:52px;font-size:13px;padding:14px 19px}
.intro-actions .text-button{width:100%;min-height:40px;padding:9px 11px;text-align:center;border:1px solid #a78a5d;background:#25382db8;color:#ecdaad;font:12px Georgia,serif}
.intro-actions .text-button:hover{background:#4a5339;border-color:#e1ba79;color:#fff0ca;transform:translateY(-2px)}
.intro-meta{border-top:1px solid #a88b5b6b;padding-top:13px;margin-top:18px;gap:10px;font:9px 'Courier New',monospace;letter-spacing:1.2px;color:#e2cd9f;opacity:1;flex-wrap:wrap}
.intro-meta i{color:#c29a62}
.intro-controls{display:flex;gap:16px;align-items:center;margin-top:12px;color:#c6bea3;font:11px system-ui,sans-serif}
.intro-controls span{display:flex;gap:7px;align-items:center;white-space:nowrap}
.intro-controls kbd{min-width:23px;padding:3px 5px;font-size:9px;color:#f0dfba;border-color:#927c55}
.intro-note{right:34px;bottom:56px;min-width:240px;padding:15px 18px;border:1px solid #a98d5c99;border-left:3px solid #d1ad72;background:#1a2c24da;box-shadow:0 8px 30px #0d1b15a8;animation:onir-cover-in .7s ease-out both}
.intro-note p{font-size:11px;line-height:1.55;color:#d8caac}
.intro-note .wind-glyph{font-size:32px;color:#dfba7b}
.version-label{left:5.6%;bottom:22px;font-size:9px;letter-spacing:1.4px;color:#e0d2b3;opacity:.9}
@keyframes onir-cover-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* Instruments have readable values; the action bar keeps its labels on screen. */
.topbar{top:22px;left:28px;right:28px}
.region{background:linear-gradient(90deg,transparent,#1d2d25e6 17%,#1d2d25e6 83%,transparent)}
.region small{font-size:10px;letter-spacing:1.7px;color:#ddc08e}
.region div>span{font-size:22px;color:#f4e6c8}
.vitals{top:111px;left:27px;width:226px;padding:12px 15px 13px;background:linear-gradient(150deg,#3d4839f2,#1b2b22f2);box-shadow:inset 0 0 0 3px #17271d,0 7px 28px #0e2016a8}
.instrument-label{font-size:10px;letter-spacing:1.4px;color:#d3bc91}
.vital-values strong{font-size:22px;margin-top:4px;color:#f8e5be}
.pressure-label{font-size:9px;letter-spacing:1.1px;margin-top:11px;color:#e0cda4}
.xp-row{font-size:10px;margin-top:10px;color:#ebd6ab}
.hearts .heart{width:6px;height:6px}
.quest{top:290px;left:27px;width:240px;padding:16px 17px 17px;background:linear-gradient(130deg,#e7d6b2,#cdb78d);box-shadow:0 7px 26px #14251b99,inset 0 0 20px #94703d25}
.quest .eyebrow{font-size:9px;letter-spacing:1.2px;color:#765631}
.quest h2{font-size:22px;margin:9px 0 7px;color:#3d3022}
.quest p{font-size:12px;line-height:1.5;color:#544330}
.beacon-dots{margin-top:12px}.beacon-dots span{font-size:10px;color:#6d5234;letter-spacing:.4px}
.map-wrap{top:112px;right:30px}.map-caption{font-size:9px;letter-spacing:1px}
.bottom-hud{left:29px;right:29px;bottom:53px}
.abilities{gap:11px;bottom:0;padding:10px 17px 9px;background:linear-gradient(180deg,#40503cf0,#202d22f2);border-color:#d0ae76}
.ability{width:63px;height:63px;border-width:2px}
.ability-icon{width:36px;height:36px}
.ability kbd{font-size:9px;bottom:-7px;padding:3px 5px}
.ability small{font:10px Georgia,serif;bottom:-25px;color:#f8e8c6;opacity:1;text-shadow:0 2px 5px #0d170e}
.ability.locked{opacity:.63;filter:saturate(.4)}
.ability.locked small::after{content:none}
.inventory-hint{gap:6px}
.inventory-hint button{min-width:133px;padding:7px 10px;text-align:left;font:12px Georgia,serif;border-color:#aa8c56;background:#26372bdc}
.inventory-hint kbd{font-size:10px;margin-right:7px}
.inventory-hint .has-points{border-color:#dfbd7b;box-shadow:0 0 0 1px #dfbd7b66,0 0 14px #d5ae5e55}
.save-status{font:9px 'Courier New',monospace;color:#e6d5b1;opacity:.9}
.movement-hint{font-size:11px;color:#f0e2bf;opacity:1;text-shadow:0 2px 5px #0b1b13}
.movement-hint small{font-size:10px;opacity:.9}
.interaction{font-size:13px;padding:12px 17px}
.toast{font-size:12px;padding:11px 18px;bottom:150px}

/* Parchment pages are for narrative; the satchel and talents stay on forest glass. */
.overlay{padding:22px;background:#101c17c9;backdrop-filter:blur(11px) saturate(.68)}
.overlay>.panel:not(.satchel-panel):not(.skills-panel){
  max-height:calc(100dvh - 44px);overflow:auto;
  border:2px solid #83633d;border-radius:3px;padding:34px 39px;
  background:radial-gradient(circle at 12px 12px,#c39d5e 0 2px,transparent 2.8px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#c39d5e 0 2px,transparent 2.8px),linear-gradient(130deg,#f0e0c1,#d4bd96);
  box-shadow:0 0 0 4px #18251dc9,0 0 0 5px #9d7c4e,0 26px 90px #07120bc7,inset 0 0 34px #83613920;
}
.panel .eyebrow{font-size:10px;letter-spacing:1.6px;color:#79542c}
.panel h2{font-size:35px;line-height:1.1;margin:12px 0 17px;color:#33271d}
.panel p{font:13px/1.65 system-ui,sans-serif;color:#51402d}
.panel .fine-print{font:11px/1.55 system-ui,sans-serif;color:#695238}
.panel .primary-button{min-height:49px;font-size:13px}
.panel>.text-button{font-size:12px;padding:10px 0}
.overlay .close-panel{right:15px;top:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #9d7747;background:#e6d3af;color:#533e27;border-radius:2px;font:27px/1 Georgia,serif;transition:background .18s,border-color .18s}
.overlay .close-panel:hover{background:#f7e6c5;border-color:#624525}
#menu>.panel{width:min(560px,calc(100vw - 54px));padding:40px 45px 33px}
#menu .primary-button{margin-top:28px}
#menu .panel>p{font-size:14px}

/* A two-page controls spread fits the usual PC viewport height. */
#helpPanel .help-panel{
  width:min(980px,calc(100vw - 54px));max-width:none;
  display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  grid-template-areas:'eyebrow controls' 'title controls' 'description controls' 'tip controls';
  column-gap:34px;row-gap:0;align-items:start;
}
.help-panel>.eyebrow{grid-area:eyebrow;margin-top:5px}
.help-panel>h2{grid-area:title;margin:10px 0 13px}
.help-panel>p:not(.fine-print){grid-area:description;margin:0;font-size:13px;line-height:1.7}
.help-panel>.fine-print{grid-area:tip;align-self:end;border-top:1px solid #a78757;padding-top:14px;margin:17px 0 0}
.help-panel .controls-list{grid-area:controls;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin:0;padding:6px 6px 4px 25px;border-left:1px solid #aa8b5c}
.help-panel .controls-list>div{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:62px;padding:7px 3px;border-bottom:1px solid #ad91666b;color:#483a29;font:11px/1.35 system-ui,sans-serif}
.help-panel .controls-list kbd{font-size:9px;padding:3px 5px;white-space:normal;line-height:1.25}
.help-panel .controls-list span kbd{padding:2px 4px}

#notebook .notebook-panel{max-width:850px;width:min(850px,calc(100vw - 54px))}
#notebook .notebook-panel>p:not(.fine-print){max-width:660px;margin-bottom:20px}
#notebookEntries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;counter-reset:onir-trace}
.notebook-entry{position:relative;min-height:167px;margin:0;padding:43px 16px 17px;border:1px solid #a7895a;background:#e5d2ac9e;counter-increment:onir-trace;box-shadow:inset 0 0 0 3px #f0dfbd88}
.notebook-entry::before{content:'TRACE 0' counter(onir-trace);position:absolute;top:15px;left:16px;color:#86633b;font:10px 'Courier New',monospace;letter-spacing:1.2px}
.notebook-entry h3{font-size:19px;margin:0 0 10px;color:#624527}
.notebook-entry p{font-size:12px;line-height:1.55;color:#50402d}
.notebook-entry.undiscovered{opacity:1;background:#d3c29fa3}
.notebook-entry.undiscovered h3{font-size:18px;color:#6c5b40}
.notebook-entry.undiscovered p{color:#776a52}
#notebook .fine-print{border-top:1px solid #ac8f62;margin:22px 0 0;padding-top:13px}

#dialogue .dialogue-panel{max-width:660px;width:min(660px,calc(100vw - 54px))}
.dialogue-heading{gap:22px}
.resident-seal{width:70px;height:70px;font-size:34px;box-shadow:0 0 0 4px #b3915f66,inset 0 0 16px #111c13}
.dialogue-heading h2{margin:5px 0 0}
.dialogue-panel .dialogue-text{font:19px/1.65 Georgia,serif;min-height:95px;margin:29px 0 15px;padding:19px 0;border-top:1px solid #b2966c;border-bottom:1px solid #b2966c;color:#3d2e21}
.dialogue-footer>span{font-size:11px;color:#735838}
.dialogue-footer .primary-button{min-width:220px;margin-top:0}
#ending .ending-panel{max-width:650px}
#ending .ending-symbol{margin-bottom:8px;font-size:48px}
.ending-stats{font-size:12px;color:#735838}

/* System screens share the same framing and legible controls. */
.panel.satchel-panel,.panel.skills-panel{border-color:#c4a06b;background:linear-gradient(140deg,#303d31,#1b2923);box-shadow:0 0 0 4px #13211af2,0 0 0 5px #7a633f,0 25px 90px #07130ccb}
.satchel-heading,.skills-heading{background:linear-gradient(90deg,#574b3470,#293a2c45);border-bottom-color:#aa8b5e88}
.satchel-heading .eyebrow,.skills-heading .eyebrow{color:#e0bd83}
.satchel-heading h2,.skills-heading h2{color:#f5e5c6}
.satchel-heading p,.skills-heading p{color:#c9b99a}
.panel.satchel-panel .close-panel,.panel.skills-panel .close-panel{background:#24352b;color:#ecd7ac;border-color:#ad8b59}
.item-filters button{font-size:12px;color:#d7c7a9}
.item-filters button[aria-pressed=true]{background:#b8966140;color:#ffe4b1}
.gear-slot strong,.item-name{font-size:13px}
.gear-slot small,.section-label{font-size:10px}
.item-detail .eyebrow{color:#725133}
.panel .item-detail p{font-size:12px;line-height:1.55}
.skills-footer{font-size:12px;line-height:1.45;color:#c1b293}
.st-slot select{font-size:13px;min-height:29px}
@media(min-width:960px){.panel.skills-panel{width:min(1180px,96vw)}}
@media(max-height:760px) and (min-width:960px){
  .intro-content{padding-top:24px;padding-bottom:22px}
  .intro h1{font-size:clamp(43px,4.25vw,56px)}
  .intro-note{bottom:46px}
  .version-label{bottom:17px}
  .help-panel .controls-list>div{min-height:56px}
}
@media(prefers-reduced-motion:reduce){.intro-content,.intro-note{animation:none}}