/* Source-led instrument system. Layout and states share these tokens; this
   file deliberately does not change the canvas, camera or renderer dimensions. */
:root {
 --ui-cream:#f2e7cf;
 --ui-brass:#c8b48b;
 --ui-line:#c8b48b91;
 --ui-dim:#c2bca9;
 --ui-glass:rgba(29,32,24,.88);
 --ui-deep:#19251f;
 --ui-active:#9de4d6;
 --ui-type:ui-rounded,"Trebuchet MS",system-ui,sans-serif;
 --ui-title:Georgia,"Times New Roman",serif;
 --ui-radius:17px;
 --ui-edge:inset 0 0 0 3px #19251f,inset 0 0 0 4px #c8b48b25;
 font-family:var(--ui-type);
 color:var(--ui-cream);
}
.game-glyph { width:24px;height:24px;stroke-width:1.45;fill:none;stroke:currentColor; }
.game-glyph .glyph-fill { fill:currentColor;stroke:none; }
.game-glyph .glyph-cut { stroke:var(--ui-deep);stroke-width:.6; }
.primary,.secondary,.icon-btn,.interaction,.toast,.quest-panel,.compass,
.quest-bearing,.bottom-tools button,.wisp-counter {
 color:var(--ui-cream);border:1px solid var(--ui-line);background:var(--ui-glass);
 box-shadow:var(--ui-edge),0 4px 16px #0002;
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.primary,.secondary { border-radius:12px;letter-spacing:.015em;line-height:1.35; }
.primary { background:#344d40;color:var(--ui-cream);border-color:var(--ui-brass);padding:14px 22px;gap:20px;font-weight:600; }
.primary:hover,.secondary:hover { background:#40584a;filter:none; }
.primary:active,.secondary:active { background:#274b40;transform:translateY(1px);box-shadow:var(--ui-edge); }
.primary span { font-size:inherit; }
.secondary { font-size:14px; }
.danger { color:#f0b7a5; }
.icon-btn { border-radius:14px; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible {
 outline:2px solid var(--ui-active);outline-offset:4px;
}
.eyebrow,.quest-kicker,.chapter-kicker { font-family:var(--ui-type);font-weight:500;letter-spacing:.1em; }
.quest-panel { border-left:1px solid var(--ui-brass);border-radius:var(--ui-radius);padding:12px 15px;gap:12px; }
.quest-panel strong { font-family:var(--ui-type);font-size:calc(17px * var(--hud-scale));font-weight:500;line-height:1.3;margin:4px 0 7px; }
.quest-kicker { color:var(--ui-dim);font-size:max(11px,calc(11px * var(--hud-scale))); }
.quest-symbol { color:var(--ui-brass);margin-top:13px;flex-shrink:0; }
.quest-symbol svg { width:26px;height:26px; }
#quest-line { color:var(--ui-cream);font-size:max(13px,calc(13px * var(--hud-scale)));line-height:1.4; }
.quest-track { background:#d1c6a926;height:2px;margin-top:11px; }
.quest-track i { background:var(--ui-active); }
.compass { border-radius:40px;height:38px;padding:5px 17px; }
.compass>div { line-height:24px;font-size:14px;color:var(--ui-dim); }
.compass .north { color:var(--ui-brass); }
#compass-needle { top:24px;color:var(--ui-brass);font-style:normal; }
#compass-needle svg { width:16px;height:16px; }
#region-name { top:44px;font-family:var(--ui-type);color:var(--ui-cream);font-size:11px;text-shadow:0 2px 4px #000;letter-spacing:.1em; }
.wisp-counter { border-radius:14px;padding:7px 12px;gap:8px; }
.wisp-counter svg { color:var(--ui-active);filter:drop-shadow(0 0 5px #9de4d660); }
.wisp-counter b { font-weight:500;font-variant-numeric:tabular-nums; }
.guidance-dock { position:absolute;top:170px;left:30px;width:280px;pointer-events:none;z-index:2; }
.guidance-dock .quest-bearing,.guidance-dock .quest-bearing.offscreen {
 position:relative;inset:auto!important;transform:none!important;display:grid;
 grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;
 width:100%;max-width:100%;min-height:48px;border-radius:14px;padding:8px 12px;
 visibility:visible;pointer-events:auto;font-family:var(--ui-type);
 background:var(--ui-glass);border-color:var(--ui-line);box-shadow:var(--ui-edge),0 4px 16px #0002;
}
.guidance-dock .bearing-arrow { grid-column:1;grid-row:1;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--ui-line);border-radius:50%;color:var(--ui-brass);font-size:0; }
.guidance-dock .bearing-arrow svg { width:23px;height:23px; }
.guidance-dock .bearing-target,.guidance-dock .offscreen .bearing-target { display:block;grid-column:2;grid-row:1;color:var(--ui-cream);font-size:max(12px,calc(12px * var(--hud-scale)));line-height:1.3;text-align:left;white-space:normal;overflow-wrap:break-word; }
.guidance-dock .bearing-distance { grid-column:3;grid-row:1;font-size:12px;font-variant-numeric:tabular-nums;color:var(--ui-dim); }
.quest-bearing[data-arrived='true'] .bearing-arrow { color:var(--ui-active);border-color:var(--ui-active); }
.world-pin { font-family:var(--ui-type); }
.pin-label { border-radius:12px;background:var(--ui-glass);border:1px solid var(--ui-line);color:var(--ui-cream);font-size:13px;box-shadow:var(--ui-edge); }
.pin-diamond { color:var(--ui-brass); }
.pin-diamond svg { width:23px;height:23px; }
.world-pin.current .pin-diamond { color:var(--ui-active); }
.interaction,.toast { border-radius:14px;font-family:var(--ui-type);font-size:14px;line-height:1.45; }
.interaction { min-height:48px;gap:11px; }
.interaction .keycap { border:1px solid var(--ui-brass);border-radius:50%;background:#e5d9bd14;color:var(--ui-cream);min-width:30px;height:30px;display:grid;place-items:center;font-size:13px; }
.interaction .keycap svg { width:19px;height:19px; }
.bottom-tools button { border-radius:13px; }
.bottom-tools button>span:last-child { font-family:var(--ui-type);font-size:12px; }
.keyboard-guide { color:var(--ui-dim);font-family:var(--ui-type);font-size:12px; }
.keyboard-guide kbd { border-radius:5px;border-color:var(--ui-line);font-family:inherit;color:var(--ui-cream); }
.health { color:var(--ui-active); }
.action-btn,.joystick,.stick {
 border:1px solid var(--ui-brass);color:var(--ui-cream);border-radius:50%;
 background:rgba(42,42,32,.64);box-shadow:inset 0 0 0 4px #eee2c414,inset 0 0 0 5px #ddd0b42e;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.action-btn { transition:background .12s,border-color .12s,box-shadow .12s; }
.action-btn>span[data-icon] { display:block;width:54%;height:54%;flex:none; }
.action-btn svg { display:block;width:100%;height:100%;stroke-width:1.5; }
.action-btn small { font-family:var(--ui-type);font-size:max(11px,calc(11px * var(--hud-scale)));letter-spacing:.025em;font-weight:500;bottom:7px; }
.jump-btn>span[data-icon] { width:56%;height:56%; }
.bottom-tools .camera-touch { border-radius:50%;background:rgba(42,42,32,.64);border-color:var(--ui-brass); }
.camera-touch>span[data-icon] { width:25px;height:25px; }
.camera-touch svg { width:25px;height:25px; }
.joystick { background:#e7dccb0c;border-color:#d7cab771; }
.joystick:before { border:1px solid #dfd5c732;inset:19%; }
.joystick-cross { opacity:.45; }
.joystick-directions { position:absolute;inset:4%;width:92%;height:92%;fill:var(--ui-cream);opacity:.32;pointer-events:none; }
.stick { background:radial-gradient(circle at 40% 25%,#f0e6d67a,#d1c3a62e);border-color:#eee6d4;box-shadow:0 2px 8px #0002,inset 0 0 0 3px #f9e5ba0c; }
.joystick.active { border-color:var(--ui-active);background:#549c8522; }
.action-btn[data-state='available'] { background:#285248bd;border-color:var(--ui-active);box-shadow:inset 0 0 0 4px #9de4d61a,0 0 12px #9de4d635;color:#e4fcf1; }
.action-btn[data-state='pressed'],.action-btn[data-state='held'] { background:#397966e6;border-color:#d8fff1;box-shadow:inset 0 0 0 4px #d8fff129,0 0 13px #9de4d648;transform:none; }
.action-btn[data-state='disabled'],.action-btn[data-state='cooldown'] { color:#c6c2b293;border-color:#c8b48b59;background:#22291c7a;box-shadow:inset 0 0 0 4px #d7cba611; }
.action-btn[data-state='disabled'] small,.action-btn[data-state='cooldown'] small { color:var(--ui-dim); }
.action-btn[data-state='cooldown']:after { inset:5px;border:1px dashed #b8c7b3a0; }
.action-btn[data-engaged='true']:after {
 content:'';position:absolute;inset:-3px;border-radius:50%;padding:2px;
 background:conic-gradient(var(--ui-active) calc(var(--action-progress,0) * 1turn),#9de4d625 0);
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;pointer-events:none;
}
.action-btn[data-interaction='waiting']:after { background:conic-gradient(var(--ui-brass) calc(var(--action-progress,0) * 1turn),#c8b48b25 0); }
.companion-status { width:48px;gap:3px;color:var(--ui-cream);font-family:var(--ui-type); }
.companion-status .pip-portrait { width:48px;height:48px;border:1px solid var(--ui-active);border-radius:50%;background:#bbbbaa;box-shadow:0 0 0 3px #9de4d61a;overflow:hidden; }
.companion-status[data-status='resting'] .pip-portrait { border-color:var(--ui-brass);filter:saturate(.5); }
.companion-state { font-size:11px;text-shadow:0 2px 4px #000; }
/* Dialogues and menus are the same family of instruments, with the supplied
   artwork inset as images. No unrelated paper/card theme or invented portraits. */
#panel { color:var(--ui-cream);background:transparent;border:1px solid var(--ui-brass);border-radius:20px;padding:0;box-shadow:0 20px 80px #0006;overflow:hidden; }
#panel::backdrop { background:#091612ab;backdrop-filter:blur(6px); }
.panel-shell { background:#1e2c24f5;border-radius:19px;box-shadow:var(--ui-edge);max-height:calc(92dvh - 2px); }
.panel-header { color:var(--ui-cream);background:linear-gradient(120deg,#354433,#1d2d25);border-bottom:1px solid var(--ui-line);padding:24px 30px; }
.panel-header:after { display:none; }
.panel-header h2 { font-family:var(--ui-title);font-weight:400;font-size:32px;letter-spacing:-.015em; }
.panel-header .eyebrow { color:var(--ui-brass);font-size:11px; }
#panel-body { background:none;color:var(--ui-cream);padding:28px 30px;min-height:0; }
.panel-shell .eyebrow { color:var(--ui-brass); }
.chapter-card,.task-row,.outfit { background:#b5b99b09;color:var(--ui-cream);border:1px solid #c8b48b40;border-radius:12px;box-shadow:none; }
.chapter-card:hover,.task-row:hover,.outfit:hover { background:#b5b99b12; }
.chapter-card.current,.task-row.tracked,.outfit.selected { background:#82b29813;border-color:var(--ui-active);color:var(--ui-cream); }
.chapter-card img { border-radius:9px 0 0 9px; }
.chapter-card img,.chapter-card.current img { transform:none;filter:none;border:1px solid var(--ui-line);box-shadow:none; }
.chapter-list { gap:9px;border:0;padding-left:0; }
.chapter-card.current { margin:0;padding:11px 9px;box-shadow:none;border-radius:12px; }
.chapter-card:disabled { opacity:1;color:var(--ui-dim); }
.chapter-card:disabled .chapter-state { opacity:1; }
.chapter-card:disabled img { opacity:.65; }
.atlas-caption { color:var(--ui-dim); }
.chapter-info strong { font-family:var(--ui-title);font-weight:400; }
.chapter-number,.chapter-state,.chapter-tally,.task-row small,.track-state { color:var(--ui-dim); }
.map-footer { border-color:var(--ui-line); }
.map-footer p,.settings-note,.setting small,.pause-body p,.completion p,.journal-copy p,
.small-stat small,.story-beats li p,.walkthrough p,.walkthrough li,.guide-steps p,.friend span { color:var(--ui-dim); }
.atlas,.journal-art,.chapter-illustration,.dialogue .portrait { transform:none;border:1px solid var(--ui-line);border-radius:12px;box-shadow:none;overflow:hidden; }
.journal-art { background:#d9d3c7; }
.chapter-illustration { padding:0; }
.chapter-illustration>div { background:linear-gradient(transparent,#132b23); }
.chapter-illustration img { opacity:1; }
.journal-heading,.small-stat,.story-beats li,.walkthrough,.setting,.friend,.reward { border-color:#c8b48b38; }
.journal-heading h3,.journal-copy h3,.story-beats li strong,.walkthrough summary,.walkthrough h4,.guide-steps h4,.friend { font-family:var(--ui-title);font-weight:400;color:var(--ui-cream); }
.story-beats li.current strong,.ink-label,.friend.found { color:var(--ui-active); }
.story-beats li.done { opacity:.7; }
.beat-seal { color:var(--ui-brass);border-color:var(--ui-line); }
.story-beats li.current .beat-seal { background:#395b49;color:var(--ui-active);border-color:var(--ui-active); }
.story-beats li.done .beat-seal { background:#304436;color:var(--ui-dim); }
.task-glyph { color:var(--ui-brass); }
.tabs { border-bottom:1px solid var(--ui-line);gap:6px; }
.tabs button { min-height:44px;color:var(--ui-dim);border-radius:10px 10px 0 0;padding:12px 15px; }
.tabs button.active { border-color:var(--ui-line);background:#b9c4a618;color:var(--ui-cream);box-shadow:inset 0 -2px var(--ui-active); }
.setting select,.guide-select select { border:1px solid var(--ui-line);border-radius:10px;background:#182c22;color:var(--ui-cream);min-height:44px;padding:10px 12px; }
.setting input[type='range'] { accent-color:var(--ui-active); }
.toggle input { accent-color:var(--ui-active); }
.toggle input:not(:checked) { background:#18291f;border-color:#c8b48b6b; }
.toggle input:not(:checked):after { background:#b8b4a0;box-shadow:none; }
.toggle input:checked { background:#3d8a73;border-color:var(--ui-active); }
.setting .toggle { min-width:48px;min-height:44px;justify-content:center; }
.dialogue { grid-template-columns:154px minmax(0,1fr);gap:28px;padding:0; }
.dialogue .portrait { width:154px;height:209px; }
.dialogue p { color:var(--ui-cream);font-family:var(--ui-title);font-size:22px;line-height:1.6;font-style:normal; }
.completion h3,.pause-body h3 { font-family:var(--ui-title);font-weight:400;font-size:34px; }
.big-sigil { color:var(--ui-brass); }
.big-sigil svg { width:64px;height:64px; }
.note-bank button { background:#213a2d;color:var(--ui-cream);border:1px solid var(--ui-line);border-radius:12px; }
.note-progress i { background:#f4e8bf22;border:1px solid var(--ui-line); }
.note-progress i.lit { background:var(--ui-active); }
.mechanism { color:var(--ui-cream); }
#mechanism-feedback { color:var(--ui-dim); }
.title-links button { border-color:var(--ui-line); }
#load-retry { min-height:44px;border:1px solid var(--ui-line);border-radius:10px;padding:10px 16px;background:var(--ui-glass); }
@media(pointer:coarse),(max-width:900px) {
 .quest-panel { padding:10px 12px;gap:9px; }
 .quest-panel strong { font-size:max(14px,calc(16px * var(--hud-scale))); }
 #quest-line { font-size:max(12px,calc(12px * var(--hud-scale))); }
 .quest-symbol { margin-top:12px; }
 .quest-symbol svg { width:23px;height:23px; }
 .compass { height:32px;padding:2px 12px; }
 #compass-needle { top:19px; }
 #region-name { top:35px; }
 .guidance-dock { left:16px;right:70px;width:auto;top:calc(178px + var(--safe-top)); }
 .guidance-dock .quest-bearing { min-height:46px;padding:7px 10px; }
 .companion-status .pip-portrait { width:44px;height:44px; }
 .action-btn small { font-size:max(11px,calc(11px * var(--hud-scale)));bottom:6px; }
 .action-btn svg { width:100%;height:100%; }
 .camera-touch svg { width:24px;height:24px; }
 .panel-header { padding:20px; }
 .panel-header h2 { font-size:27px; }
 #panel-body { padding:22px 20px; }
 .dialogue { grid-template-columns:104px minmax(0,1fr);gap:18px; }
 .dialogue .portrait { width:104px;height:144px; }
 .dialogue p { font-size:18px;line-height:1.5; }
}
@media(max-width:600px) and (orientation:portrait) {
 .guidance-dock { top:calc(184px + var(--safe-top));left:16px;right:16px; }
 .quest-panel { max-width:calc(100vw - 82px); }
 .wisp-counter { padding:6px 8px;border-radius:12px; }
 .wisp-counter svg { width:17px;height:17px; }
 .dialogue { grid-template-columns:1fr;gap:16px; }
 .dialogue .portrait { margin:auto;width:118px;height:160px; }
 .dialogue p { margin:0 0 18px; }
 .settings-grid { display:block; }
 .setting { gap:12px;font-size:15px; }
 .setting small { font-size:13px; }
 .setting>span { min-width:0; }
 .setting select { max-width:132px; }
 .completion h3,.pause-body h3 { font-size:27px; }
 .reward { gap:12px;flex-wrap:wrap; }
}
@media(orientation:landscape) and (max-height:560px) {
 .guidance-dock { left:14px;right:auto;width:235px;top:calc(113px + var(--safe-top)); }
 .guidance-dock .quest-bearing { min-height:44px;padding:6px 8px;grid-template-columns:28px minmax(0,1fr) auto;gap:7px; }
 .guidance-dock .bearing-arrow { width:26px;height:26px; }
 .guidance-dock .bearing-arrow svg { width:20px;height:20px; }
 .guidance-dock .bearing-target { font-size:12px; }
 .panel-header { padding:15px 22px; }
 #panel-body { padding:20px 22px; }
 .dialogue .portrait { width:104px;height:144px; }
 .dialogue { grid-template-columns:104px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
 .action-btn,.primary,.secondary { transition:none; }
}
/* Source-sheet hierarchy: one goal/subtask instrument and a thin compass.
   These rules only arrange interface elements; they never resize the game. */
.top-hud { display:grid;grid-template-columns:minmax(210px,300px) minmax(130px,1fr) auto;column-gap:26px;row-gap:8px;align-items:start; }
.quest-instrument { grid-area:1/1/3/2;min-width:0;border:1px solid var(--ui-brass);border-radius:17px;background:var(--ui-glass);box-shadow:inset 0 0 0 3px #c8b48b10;backdrop-filter:blur(8px); }
.top-hud .quest-panel { display:flex;align-items:center;gap:10px;width:100%;max-width:none;min-height:44px;padding:9px 13px;border:0;border-radius:16px 16px 0 0;background:none;box-shadow:none;backdrop-filter:none; }
.top-hud .quest-panel strong { margin:0;font-size:max(14px,calc(16px * var(--hud-scale)));line-height:1.3;font-weight:500; }
.top-hud .quest-symbol { display:block;margin:0;flex:none; }
.top-hud .quest-symbol svg { width:23px;height:23px; }
.top-hud .quest-kicker,.top-hud #quest-line,.top-hud .quest-track { display:none; }
.top-hud .guidance-dock { position:relative;inset:auto;width:auto;margin:0 12px;border-top:1px solid #c8b48b66; }
.top-hud .guidance-dock .quest-bearing,.top-hud .guidance-dock .quest-bearing.offscreen { display:grid;position:relative;width:100%;min-height:44px;grid-template-columns:20px minmax(0,1fr);gap:9px;padding:7px 0;background:none;border:0;border-radius:0 0 14px 14px;box-shadow:none;backdrop-filter:none; }
.top-hud .guidance-dock .bearing-arrow { width:20px;height:20px;border:0;border-radius:0; }
.top-hud .guidance-dock .bearing-arrow svg { width:20px;height:20px; }
.top-hud .guidance-dock .bearing-target { font-size:max(12px,calc(12px * var(--hud-scale)));line-height:1.35; }
.top-hud .guidance-dock .bearing-distance { display:none; }
.top-hud .compass { grid-area:1/2;position:relative;inset:auto;transform:none;justify-self:center;width:min(100%,310px);height:30px;margin:0;padding:1px 18px;border-radius:30px;box-shadow:none; }
.top-hud .compass>div { border:0;padding:0;height:26px;line-height:26px; }
.top-hud #compass-needle { top:20px; }
.top-hud #region-name { display:none; }
.top-hud .top-actions { grid-area:1/3;display:flex;flex-direction:row;gap:12px;align-items:center; }
.top-hud .health { grid-area:2/3;position:relative;inset:auto;justify-self:end;align-self:start;width:max-content;margin:0; }
.top-hud .health[data-full='true'] { display:none; }
.bottom-tools button[data-open],.keyboard-guide { display:none; }
.action-btn small,.companion-state { display:none; }
.action-btn>span[data-icon] { width:62%;height:62%; }
.action-btn,.bottom-tools .camera-touch { box-shadow:inset 0 0 0 3px #e9d9bc12; }
.companion-status { height:48px; }
.world-pin .pin-label { display:none; }
.world-pin .pin-diamond { opacity:.85; }
/* Secondary navigation and full instructions remain available from Pause and
   the objective/journal. Context has one slot, not a stack of cards. */
.context-messages { position:absolute;display:flex;flex-direction:column;align-items:center;left:50%;bottom:calc(90px + var(--safe-bottom));width:min(390px,calc(100% - 32px));transform:translateX(-50%);gap:0;pointer-events:none; }
.context-messages .toast,.context-messages .interaction { position:relative;inset:auto;transform:none;margin:0;max-width:100%;width:auto;padding:8px 14px;box-shadow:none;font-size:14px;line-height:1.4;border-radius:22px; }
.context-messages .interaction { min-height:44px;pointer-events:auto; }
.context-messages .toast:not(.show) { display:none; }
.context-messages .toast.show { transform:none; }
.context-messages .keycap { display:none; }
body[data-touch-layout='right'] .interact-btn { left:0;right:auto;top:0; }
body[data-touch-layout='right'] .pip-btn { left:auto;right:0;top:22px; }
.pause-body .pause-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
.menu-detail,.chapter-log { border-top:1px solid #c8b48b38;margin-top:20px;padding-top:14px; }
.menu-detail>summary,.chapter-log>summary { min-height:44px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--ui-dim);font-family:var(--ui-type);font-size:15px;list-style:none; }
.menu-detail>summary:after,.chapter-log>summary:after { content:'+';font-size:20px;color:var(--ui-brass); }
.menu-detail[open]>summary:after,.chapter-log[open]>summary:after { content:'−'; }
.journal-focus { max-width:650px;margin:auto; }
.journal-focus .journal-heading { margin:0 0 20px;padding:0 0 18px; }
.journal-focus .journal-heading h3 { font-size:30px;margin:7px 0 12px; }
.journal-focus .task-list { margin:0; }
.journal-focus .task-row { min-height:64px; }
.journal-focus .chapter-log .story-beats { margin-top:15px; }
.journal-focus .chapter-log { margin-top:12px;padding:8px 0 0;border-bottom:0; }
.journal-focus .source-reference img { display:block;width:100%;margin-top:14px;border-radius:12px; }
@media(pointer:coarse),(max-width:900px) {
 .top-hud { grid-template-columns:minmax(170px,240px) minmax(100px,1fr) auto;column-gap:14px; }
 .top-hud .top-actions { gap:8px; }
 .top-hud .quest-panel { padding:8px 11px;gap:8px; }
 .top-hud .quest-panel strong { font-size:max(14px,calc(14px * var(--hud-scale))); }
 .top-hud .quest-symbol svg { width:21px;height:21px; }
 .top-hud .compass { height:27px;padding:0 14px; }
 .top-hud .compass>div { height:25px;line-height:25px;font-size:12px; }
 .top-hud #compass-needle { top:18px; }
 .context-messages { bottom:calc(216px + var(--safe-bottom));width:min(350px,calc(100% - 32px - var(--safe-left) - var(--safe-right))); }
 body[data-touch-layout='left'] .context-messages { bottom:calc(239px + var(--safe-bottom)); }
 .companion-status .pip-portrait { width:44px;height:44px; }
}
@media(orientation:portrait) and (max-width:900px) {
 .top-hud { grid-template-columns:minmax(0,1fr) 50px;gap:8px 10px; }
 .quest-instrument { grid-area:1/1; }
 .top-hud .top-actions { grid-area:1/2;flex-direction:column-reverse;gap:6px; }
 .top-hud .compass { display:none; }
 .top-hud .health { grid-area:2/2;justify-self:end; }
 .top-hud .health svg { width:14px;height:14px; }
 .top-hud .health { gap:2px; }
 .top-hud .wisp-counter { padding:6px 8px;font-size:14px;gap:4px; }
 .pause-body .pause-options { grid-template-columns:1fr; }
}
@media(orientation:landscape) and (max-height:560px) {
 .top-hud { grid-template-columns:minmax(175px,220px) minmax(90px,1fr) auto;column-gap:14px; }
 .top-hud .quest-panel { min-height:44px; }
 .top-hud .top-actions { gap:7px; }
 .top-hud .wisp-counter { padding:7px;font-size:13px; }
 .context-messages,body[data-touch-layout='left'] .context-messages { bottom:calc(8px + var(--safe-bottom));width:min(340px,calc(100% - 380px - var(--safe-left) - var(--safe-right))); }
 .context-messages .toast,.context-messages .interaction { padding:7px 10px;font-size:13px; }
 .top-hud .health { top:0;right:0; }
 .panel-header h2 { font-size:25px; }
}
@media(orientation:landscape) and (max-width:650px) {
 .top-hud { grid-template-columns:minmax(170px,210px) minmax(80px,1fr) 100px;column-gap:12px; }
 .top-hud .compass { width:100%; }
 .top-hud .quest-panel strong { font-size:max(14px,calc(13px * var(--hud-scale))); }
 .top-hud .guidance-dock .bearing-target { font-size:max(12px,calc(11px * var(--hud-scale))); }
}

/* One actionable companion portrait, in the former leaf action slot. */
#pip-btn{padding:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#pip-btn #companion-status{position:static;inset:auto;display:flex;width:100%;height:100%;margin:0;align-items:center;justify-content:center;pointer-events:none}
#pip-btn .pip-portrait{display:block;width:100%;height:100%;border:0;box-shadow:none;border-radius:50%;filter:none}
#camera-reset{display:flex;align-items:center;justify-content:center;padding:0;gap:0;line-height:0}
#camera-reset>span[data-icon]{display:flex;align-items:center;justify-content:center;position:static;width:26px;height:26px;margin:0;transform:none}
#camera-reset svg{display:block;width:26px;height:26px;margin:0;flex:none}
.desktop-hints{position:absolute;z-index:30;left:24px;bottom:28px;width:min(350px,calc(100vw - 48px));padding:18px;border:1px solid var(--ui-brass);border-radius:18px;background:#20271df2;color:var(--ui-cream);font:14px/1.45 var(--ui-type);pointer-events:auto;max-height:65vh;overflow:auto}
.desktop-hints[hidden]{display:none}
.desktop-hints strong{font-size:17px}.desktop-hints p{margin:9px 0}.desktop-hints kbd{color:var(--ui-active);font:inherit}
.desktop-hints button{min-height:44px;padding:8px 14px;border:1px solid var(--ui-brass);border-radius:10px;background:#345349;color:var(--ui-cream);cursor:pointer}
@media(hover:none),(pointer:coarse){.desktop-hints{display:none}}

#pip-btn{overflow:visible;background:conic-gradient(#9de4d6 calc(var(--help-fill,1)*1turn),#394a3b 0);border:0;padding:4px}#pip-btn #companion-status{border-radius:50%;overflow:hidden;background:#24382b}#pip-charges{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#183b30;border:1px solid #c8b48b;color:#fff4d5;font:12px/1 sans-serif}#pip-btn[data-state='cooldown']:after{display:none}
@media(hover:hover) and (pointer:fine) and (min-width:901px){
 #touch-controls{display:block;position:absolute;inset:0;pointer-events:none}
 #joystick{display:none}
 .action-cluster,body[data-touch-layout] .action-cluster{position:absolute;inset:auto 26px 28px auto;width:150px;height:160px}
 .action-cluster .action-btn{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:auto;border:1px solid var(--ui-brass);border-radius:50%;background-color:#293c2fea;color:var(--ui-cream)}
 #interact-btn{left:0;right:auto;top:0;width:60px;height:60px}
 #pip-btn{left:auto;right:0;top:22px;width:54px;height:54px}
 #jump-btn{left:auto;right:0;top:auto;bottom:0;width:76px;height:76px}
 #camera-reset{position:fixed;inset:auto 127px 32px auto;width:44px;height:44px}
}

/* Keep the projected title inside short landscape screens during the orbit. */
@media (orientation:landscape) and (max-height:560px){
 #entrance-logo{max-height:18dvh;object-fit:contain;transform:translate(-50%,-50%);margin-top:var(--safe-top,0px)}
}