:root { --ui-surface: #141b1ddd; --ui-solid: #171e20; --ui-text: #f1f3ef; --ui-muted: #b6bfba; --ui-line: #becbc130; --ui-sage: #b3cead; --accent: var(--ui-sage); }
body { font-family: Inter, Arial, sans-serif; color: var(--ui-text); }
:focus-visible { outline: 3px solid var(--ui-sage); outline-offset: 3px; }
#panel { color: var(--ui-text); background: linear-gradient(110deg, rgba(11, 20, 23, 0.88), rgba(14, 23, 27, 0.74)); border: 1px solid var(--ui-line); border-radius: 0px; box-shadow: none; font: 400 17px / 1.5 Inter, Arial, sans-serif; max-height: 100dvh; }
#panel:is([data-screen="inventory"], [data-screen="craft"], [data-screen="workbench"], [data-screen="missions"], [data-screen="journal"], [data-screen="bed"]) { color: var(--ui-text); background: linear-gradient(110deg, rgba(11, 20, 23, 0.88), rgba(14, 23, 27, 0.74)); backdrop-filter: blur(3px) brightness(0.74); }
#panel h2, #panel h3, #panel h4, #panel .inventory-slot > span, #panel .inventory-slot strong { font-family: Inter, Arial, sans-serif; color: var(--ui-text); font-weight: 600; }
#panel h2 { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -0.025em; }
#panel:is([data-screen="inventory"], [data-screen="craft"], [data-screen="workbench"], [data-screen="missions"], [data-screen="journal"], [data-screen="bed"]) :is(p, small, .cost, .completed-missions small) { color: var(--ui-muted); }
#panel button { font-family: inherit; text-transform: none; letter-spacing: 0px; min-height: 48px; background: transparent; border: 1px solid var(--ui-line); border-radius: 3px; color: var(--ui-text); }
#panel button:hover { background: rgba(179, 206, 173, 0.09); border-color: var(--ui-sage); }
#panel .primary, #panel #inventory-craft { background: var(--ui-sage); border-color: var(--ui-sage); color: rgb(16, 32, 24); font-weight: 650; }
#panel .primary:hover { background: rgb(197, 223, 191); color: rgb(16, 32, 24); }
#panel button:disabled { opacity: 0.55; background: rgb(41, 50, 47); color: rgb(186, 196, 189); }
#panel .inventory-slot .item-icon { filter: none; color: var(--ui-sage); }
#panel .inventory-slot { border-color: var(--ui-line); }
#panel .inventory-slot strong { color: var(--ui-text); }
#panel .inventory-filters button[aria-pressed="true"] { color: var(--ui-text); border-bottom-color: var(--ui-sage); background: rgba(179, 206, 173, 0.094); }
#panel .inventory-summary, #panel .inventory-empty { font: inherit; color: var(--ui-muted); }
#panel .mission-card, #panel .recipe { border-color: var(--ui-line); }
#panel .mission-card .done, #panel .mission-card li span, #panel .mission-reward { color: var(--ui-sage); }
.mission-route { margin: 14px 0 18px; padding: 12px 14px; border: 1px solid var(--ui-line); border-left: 2px solid var(--ui-sage); border-radius: 8px; background: rgba(14,22,24,.58); font: 500 14px/1.5 Inter, Arial, sans-serif; }
#panel .cost span { color: var(--ui-text); background: rgba(179, 206, 173, 0.08); }
#panel .cost .missing { color: rgb(237, 177, 156); background: rgba(237, 177, 156, 0.063); }
#panel:is([data-screen="craft"], [data-screen="workbench"]) { position: fixed; inset: 0px; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0px; padding: clamp(20px, 4vw, 64px); display: flex; flex-direction: column; }
#panel:is([data-screen="craft"], [data-screen="workbench"]):not([open]) { display: none; }
#panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-body { flex: 1 1 0%; min-height: 0px; overflow: auto; display: flex; flex-direction: column; }
.player-tabs { display: flex; gap: 12px; border-bottom: 1px solid var(--ui-line); margin-bottom: 24px; flex-shrink: 0; }
#panel .player-tabs button { border: 0px; border-radius: 0px; padding: 8px 24px; font-size: 18px; }
#panel .player-tabs button[aria-current] { border-bottom: 4px solid var(--ui-sage); font-weight: 650; }
.craft-layout { display: grid; grid-template-columns: minmax(240px, 28%) minmax(0px, 1fr); gap: 32px; min-height: 0px; flex: 1 1 0%; }
.craft-catalogue { overflow: auto; border-right: 1px solid var(--ui-line); padding-right: 20px; }
.craft-station { padding: 0px 16px 16px; font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--ui-line); }
#panel .craft-row { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; width: 100%; min-height: 104px; text-align: left; border-top: 0px; border-right: 0px; border-image: none; border-bottom: 1px solid var(--ui-line); border-left: 4px solid transparent; padding: 14px 16px; border-radius: 0px; }
#panel .craft-row[aria-pressed="true"] { background: rgba(170, 202, 173, 0.145); border-left-color: var(--ui-sage); }
.craft-row .item-icon { width: 56px; height: 56px; color: rgb(203, 215, 199); }
.craft-row strong { display: block; font-size: 21px; font-weight: 600; line-height: 1.3; }
.craft-row small { display: block; font-size: 16px; margin-top: 5px; }
.craft-detail { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(280px, 0.95fr); gap: 28px; align-items: center; min-width: 0px; }
.craft-preview { min-width: 0px; height: 100%; min-height: 230px; max-height: 600px; position: relative; display: grid; place-items: center; overflow: hidden; }
.craft-preview > .item-icon { width: 65%; height: 65%; color: var(--ui-sage); }
.craft-preview canvas { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }
.craft-preview.preview-ready > .item-icon { visibility: hidden; }
#panel .craft-information h3 { font-size: clamp(26px, 2.8vw, 40px); margin: 0px; }
.craft-information .craft-type { margin: 3px 0px 24px; border-bottom: 1px solid var(--ui-line); padding-bottom: 22px; }
.craft-information h4 { font-size: 20px; margin: 30px 0px 8px; }
.craft-cost { border-collapse: collapse; width: 100%; font-size: 17px; margin-bottom: 26px; }
.craft-cost th, .craft-cost td { padding: 12px 6px; border-bottom: 1px solid var(--ui-line); text-align: center; font-weight: 400; }
.craft-cost th:first-child { text-align: left; }
.craft-cost thead th { color: var(--ui-muted); font-size: 15px; }
.craft-cost .item-icon { width: 28px; height: 28px; vertical-align: middle; margin-right: 9px; }
.craft-cost td:last-child { color: var(--ui-sage); }
.craft-cost td.missing { color: rgb(237, 177, 156); }
.cost-check { display: inline-block; margin-left: 10px; font-size: 19px; }
.craft-action { width: 100%; font-size: 20px; min-height: 60px !important; }
.craft-reason { font-size: 15px; }
#panel .craft-back { display: none; }
#panel[data-screen="pause"] { inset: 0px; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0px; margin: 0px; padding: 7vh 6vw; background: linear-gradient(90deg, rgba(8, 16, 19, 0.93), rgba(8, 16, 19, 0.52) 42%, rgba(8, 16, 19, 0.125)); }
#panel[data-screen="pause"] .pause-art, #panel[data-screen="pause"] .title-shade { display: none; }
#panel[data-screen="pause"] #panel-title { position: static; transform: none; margin: 0px 0px 30px; font: 600 clamp(34px, 4vw, 58px) / 1.15 Inter, Arial, sans-serif; letter-spacing: -0.02em; }
#panel[data-screen="pause"] .panel-head { position: absolute; top: 24px; right: 24px; }
#panel[data-screen="pause"] #panel-body { position: static; max-height: 75dvh; overflow: auto; }
#panel[data-screen="pause"] .pause-menu { position: static; transform: none; margin: 0px; width: min(420px, 100%); padding: 0px; display: flex; flex-direction: column; gap: 6px; }
#panel[data-screen="pause"] .menu-choice { justify-content: flex-start; min-height: 52px; height: auto; width: 100%; padding: 10px 16px; border: 1px solid transparent; font: 400 clamp(20px, 2vw, 30px) / 1.25 Inter, Arial, sans-serif; box-shadow: none; text-transform: none; }
#panel[data-screen="pause"] .menu-choice svg { display: none; }
#panel[data-screen="pause"] .menu-choice:is(:focus-visible, :hover) { background: rgba(179, 206, 173, 0.153); border-color: var(--ui-sage); border-left-width: 4px; outline-offset: 1px; }
#panel[data-screen="pause"] .pause-footer { position: static; margin: 28px 0px 0px; padding-top: 20px; border-top: 1px solid var(--ui-line); max-width: 420px; font: 16px / 1.5 Inter, Arial, sans-serif; }
.pause-objective { color: var(--ui-muted); }
.pause-objective strong { display: block; color: var(--ui-text); font-size: 19px; margin-top: 4px; }
body[data-paused="false"] header .brand { display: none; }
#objective { top: 32px; left: 32px; max-width: 440px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 3px solid var(--ui-sage); background: linear-gradient(90deg, rgba(16, 23, 25, 0.86), rgba(16, 23, 25, 0.46)); padding: 12px 18px; }
#objective .eyebrow { display: none; }
#objective h2 { font: 600 22px / 1.3 Inter, Arial, sans-serif; margin: 0px; color: var(--ui-text); }
#objective #objective-text { display: block; font-size: 16px; line-height: 1.5; margin-top: 5px; color: rgb(214, 222, 216); }
#objective #mission-progress:empty { display: none; }
#trail-guide { font: 14px / 1.4 Inter, Arial, sans-serif; color: var(--ui-muted); }
#hud .vitals { background: linear-gradient(90deg, rgba(16, 23, 25, 0.737), transparent); border: 0px; padding: 12px; }
#hud .vitals label { font: 14px / 1.4 Inter, Arial, sans-serif; letter-spacing: 0px; text-transform: none; color: var(--ui-text); }
.vitals meter, .vitals meter::-webkit-meter-bar { height: 7px; border-radius: 1px; background: rgba(227, 232, 222, 0.19); }
.vitals meter::-webkit-meter-optimum-value { background: var(--ui-sage); border-radius: 1px; }
.tool-slot { background: rgba(16, 23, 25, 0.85); border: 1px solid var(--ui-line); border-radius: 3px; }
.tool-slot[aria-pressed="true"] { border: 2px solid var(--ui-sage); background: rgba(23, 36, 31, 0.87); box-shadow: rgba(179, 206, 173, 0.133) 0px 0px 8px; }
.tool-slot span { font-size: 13px; }
.tool-slot[aria-pressed="true"]::after { display: none; }
#inventory-button, #target-action { background: rgba(16, 23, 25, 0.9); border: 1px solid var(--ui-line); font: 16px / 1.4 Inter, Arial, sans-serif; }
#target { font: 500 18px / 1.4 Inter, Arial, sans-serif; }
body[data-input="keyboard"] #pause-button { display: none; }
@media (max-width: 1050px) {
  .craft-detail { grid-template-columns: 1fr; gap: 12px; align-content: start; }
  .craft-preview { height: 220px; min-height: 180px; }
  .craft-information h4 { margin-top: 16px; }
  .craft-layout { grid-template-columns: minmax(220px, 34%) minmax(0px, 1fr); }
  .craft-row strong { font-size: 18px; }
}
@media (max-width: 650px) {
  #panel:is([data-screen="craft"], [data-screen="workbench"]) { padding: 20px max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-bottom)); overflow: auto; }
  .player-tabs { gap: 0px; margin-bottom: 16px; }
  #panel .player-tabs button { font-size: 16px; padding: 8px 14px; flex: 1 1 0%; }
  .craft-layout { display: block; }
  .craft-catalogue { border: 0px; padding: 0px; overflow: visible; }
  .craft-detail { display: none; }
  #panel[data-detail="true"] .craft-catalogue { display: none; }
  #panel[data-detail="true"] .craft-detail { display: block; }
  #panel .craft-back { display: block; margin-bottom: 10px; }
  .craft-preview { height: 230px; }
  .craft-information { padding-bottom: 18px; }
  .craft-action { position: sticky; bottom: 0px; }
  .craft-cost { font-size: 16px; }
  .craft-cost .item-icon { width: 22px; height: 22px; }
  #objective { top: 20px; left: 16px; max-width: calc(-104px + 100vw); padding: 9px 12px; }
  #objective h2 { font-size: 18px; }
  #objective #objective-text { font-size: 13px; }
  #trail-guide { font-size: 12px; }
  #hud .vitals label { font-size: 12px; }
  .tool-slot span { font-size: 11px; }
  #panel[data-screen="pause"] { padding: 65px 24px 24px; }
  #panel[data-screen="pause"] .menu-choice { font-size: 22px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #objective { top: 14px; left: 18px; max-width: 330px; padding: 8px 12px; }
  #objective h2 { font-size: 17px; }
  #objective #objective-text { font-size: 12px; }
  #panel[data-screen="pause"] { padding: 22px 6vw; }
  #panel[data-screen="pause"] #panel-title { font-size: 30px; margin-bottom: 12px; }
  #panel[data-screen="pause"] #panel-body { max-height: 72dvh; }
  .craft-preview { height: 180px; }
}
#panel { --field-ink: var(--ui-text); }
#panel #panel-title { font: 600 clamp(28px, 3vw, 42px) / 1.15 Inter, Arial, sans-serif; margin: 0px 0px 20px; letter-spacing: -0.025em; }
#panel:is([data-screen="inventory"], [data-screen="craft"], [data-screen="workbench"], [data-screen="missions"], [data-screen="journal"], [data-screen="bed"]) button { color: var(--ui-text); }
#panel #close-panel { color: var(--ui-text); }
#panel .panel-head { margin-bottom: 12px; }
#panel:is([data-screen="craft"], [data-screen="workbench"]) { padding: 24px 4vw; }
#panel .craft-row strong { color: var(--ui-text); }
#panel .craft-action.primary { background: var(--ui-sage); color: rgb(16, 32, 24); }
#panel .craft-cost .item-icon { display: inline-block; }
@media (min-width: 1051px) {
  .craft-information h4 { margin-top: 18px; }
  .craft-cost th, .craft-cost td { padding: 8px 4px; }
  .craft-preview { max-height: 100%; }
  .player-tabs { margin-bottom: 16px; }
}
#panel:is([data-screen="inventory"], [data-screen="craft"], [data-screen="workbench"], [data-screen="missions"], [data-screen="journal"], [data-screen="bed"]) { border: 1px solid var(--ui-line); box-shadow: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #panel:is([data-screen="craft"], [data-screen="workbench"]) { padding: 12px 24px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) .panel-head { position: absolute; right: 24px; top: 10px; border: 0px; margin: 0px; padding: 0px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-kicker { display: none; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-title { font-size: 26px; margin: 0px 60px 8px 0px; }
  #panel .player-tabs button { min-height: 44px; padding: 4px 14px; font-size: 16px; }
  .player-tabs { margin-bottom: 10px; }
  .craft-preview { height: 140px; min-height: 140px; }
  #panel .craft-row { min-height: 72px; padding: 8px; }
  .craft-row .item-icon { width: 40px; height: 40px; }
  .craft-action { position: sticky; bottom: 0px; }
}
#start .title-head h1 { font: 400 clamp(36px, 5.2vw, 78px) / 1.15 Inter, Arial, sans-serif; letter-spacing: 0.28em; }
.title-menu::before { display: none; }
#start .title-menu .menu-choice { font: 400 clamp(20px, 2.2vw, 30px) / 1.3 Inter, Arial, sans-serif; letter-spacing: 0px; text-transform: none; min-height: 52px; height: auto; padding: 10px 22px; border-width: 1px 1px 1px 4px; border-style: solid; border-color: transparent; border-image: none; background: transparent; color: var(--ui-text); box-shadow: none; }
#start .title-menu #start-button { background: rgba(170, 197, 170, 0.11); border-top: 1px solid rgba(179, 206, 173, 0.6); border-right: 1px solid rgba(179, 206, 173, 0.6); border-bottom: 1px solid rgba(179, 206, 173, 0.6); border-image: none; border-left: 5px solid var(--ui-sage); color: var(--ui-text); min-height: 66px; letter-spacing: 0px; }
#start .title-menu .menu-choice:hover, #start .title-menu .menu-choice:focus-visible { background: rgba(179, 206, 173, 0.145); border-color: var(--ui-sage); color: var(--ui-text); transform: none; }
#start .title-menu #title-support { font-size: 16px; min-height: 44px; margin-top: 12px; }
#start .journey-card { border-left-color: var(--ui-sage); background: rgba(16, 23, 25, 0.867); }
#start .journey-card small { font: 500 15px / 1.4 Inter, Arial, sans-serif; text-transform: none; }
#start .title-menu { gap: 6px; }
#panel .panel-head .eyebrow { font-family: Inter, Arial, sans-serif; letter-spacing: 0.1em; }
@media (max-width: 650px) {
  #start .title-head h1 { font-size: 36px; letter-spacing: 0.15em; }
  #start .title-menu .menu-choice { font-size: 22px; padding: 10px 16px; }
  #start .title-menu #start-button { min-height: 58px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #start .title-head { padding-top: 16px; }
  #start .title-head h1 { font-size: 30px; }
  #start .title-menu { padding-top: 16px; padding-bottom: 56px; }
  #start .title-menu .menu-choice { font-size: 18px; min-height: 44px; padding: 7px 16px; }
  #start .title-menu #start-button { min-height: 48px; }
  #start .title-menu #title-support { margin-top: 0px; }
}
#panel[data-screen="pause"][open] { padding: 7vh 6vw; background: linear-gradient(90deg, rgba(8, 16, 19, 0.92), rgba(8, 16, 19, 0.5) 48%, rgba(8, 16, 19, 0.145)); overflow: auto; }
#panel[data-screen="pause"] .pause-menu .menu-choice:not(:hover):not(:focus-visible) { border-color: transparent; background: transparent; }
#panel[data-screen="pause"] .pause-menu { padding: 0px; gap: 6px; }
#panel[data-screen="pause"] .pause-footer { background: transparent; backdrop-filter: none; display: block; letter-spacing: 0px; }
#panel[data-screen="pause"] #quit-to-menu { margin-top: 0px; }
@media (orientation: landscape) and (max-height: 500px) {
  #panel[data-screen="pause"][open] { padding: 16px 6vw; }
  #panel[data-screen="pause"] #panel-title { margin-bottom: 8px; }
  #panel[data-screen="pause"] .pause-menu { gap: 0px; }
  #panel[data-screen="pause"] .pause-menu .menu-choice { min-height: 44px; height: 44px; padding: 7px 16px; font-size: 20px; }
  #panel[data-screen="pause"] #panel-body { max-height: calc(100dvh - 72px); }
}
#panel .settings-menu .settings-group h3, #panel .settings-menu output, #panel .settings-menu summary, .binding-heading { color: var(--ui-sage); letter-spacing: 0.04em; }
.settings-menu input[type="range"], .settings-menu input[type="checkbox"] { accent-color: var(--ui-sage); }
#panel .settings-row { font-size: 16px; min-height: 64px; }
#panel .settings-menu input:focus-visible, #panel .settings-menu select:focus-visible, #panel .settings-menu button:focus-visible, #panel .settings-menu summary:focus-visible, #panel .binding-rows button:focus-visible { outline: 3px solid var(--ui-sage); }
#playtest-survey { background: rgba(21, 28, 31, 0.96); border-color: var(--ui-line); border-radius: 3px; color: var(--ui-text); }
#playtest-survey button { background: rgb(32, 40, 41); border-color: var(--ui-line); min-height: 48px; border-radius: 3px; }
#playtest-survey .survey-choice[aria-pressed="true"] { background: rgba(179, 206, 173, 0.14); border-color: var(--ui-sage); box-shadow: inset 4px 0 var(--ui-sage); }
#playtest-survey .survey-choice::before { content: "○"; margin-right: 16px; }
#playtest-survey .survey-choice[aria-pressed="true"]::before { content: "✓"; }
#playtest-survey [data-next], #playtest-survey[data-mode="ending"] [data-next] { background: var(--ui-sage); border-color: var(--ui-sage); color: rgb(16, 32, 24); }
#playtest-survey[data-mode="ending"] { background: rgba(16, 23, 26, 0.97); }
#playtest-survey[data-mode="ending"] .survey-intro { background: linear-gradient(135deg, rgb(29, 43, 47), rgb(16, 23, 26)); border-color: var(--ui-line); }
#playtest-survey[data-mode="ending"] .survey-intro::after { display: none; }
#playtest-survey[data-mode="ending"] .survey-intro strong { font: 500 clamp(36px, 4vw, 64px) / 1.15 Inter, Arial, sans-serif; letter-spacing: -0.025em; max-width: none; }
#playtest-survey[data-mode="ending"] .survey-intro p { color: var(--ui-muted); letter-spacing: 0px; font-size: 18px; }
#playtest-survey[data-mode="ending"] .survey-form { padding: 32px; justify-content: flex-start; }
#playtest-survey[data-mode="ending"] .survey-top { margin-bottom: 18px; }
#playtest-survey[data-mode="ending"] .survey-progress { margin-bottom: 20px; }
#playtest-survey[data-mode="ending"] h2 { font-size: clamp(26px, 3vw, 44px); margin-bottom: 24px; }
#playtest-survey .survey-nav { display: flex; flex-wrap: wrap; gap: 10px; }
#playtest-survey .survey-optional { font-size: 14px; color: var(--ui-muted); margin-bottom: 0px; }
@media (max-width: 760px) {
  #playtest-survey[data-mode="ending"] .survey-intro { display: none; }
  #playtest-survey[data-mode="ending"] .survey-form { min-height: 100dvh; padding: 24px; }
  #playtest-survey[data-mode="ending"] .survey-top { gap: 8px; font-size: 11px; }
  #playtest-survey .survey-nav button { flex: 1 1 0%; }
  #playtest-survey[data-mode="ending"] .survey-choice { min-height: 56px; padding: 12px 16px; }
}
.bug-report label { display: block; font-size: 18px; margin-bottom: 20px; }
.bug-report small { color: var(--ui-muted); font-size: 14px; }
.bug-report textarea { display: block; width: 100%; resize: vertical; min-height: 90px; margin-top: 8px; background: rgb(12, 19, 21); border: 1px solid var(--ui-line); padding: 12px; color: var(--ui-text); font: 16px / 1.5 Inter, Arial, sans-serif; }
.bug-report p { font-size: 15px; color: var(--ui-muted); }
.bug-report .settings-bottom { display: flex; gap: 12px; justify-content: space-between; }
.bug-report textarea:focus-visible { outline: 3px solid var(--ui-sage); }
#panel .journal { font: 400 17px / 1.65 Inter, Arial, sans-serif; }
#panel .journal h3 { font-size: 22px; margin-top: 24px; }
#panel:is([data-screen="inventory"], [data-screen="missions"], [data-screen="journal"]) { width: min(960px, 100vw); max-height: 94dvh; }
#panel .inventory-filters button { min-height: 48px; font-size: 15px; }
#toast, #mission-notice { background: rgba(16, 23, 25, 0.933); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--ui-sage); color: var(--ui-text); font: 400 16px / 1.5 Inter, Arial, sans-serif; border-radius: 3px; }
#panel button:focus-visible, #start button:focus-visible, #start a:focus-visible { outline: 3px solid var(--ui-sage); outline-offset: 3px; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  #panel, #playtest-survey, button { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
#touch-controls .touch-action-button { border-color: rgba(216, 226, 211, 0.5); background: rgba(21, 32, 35, 0.79); box-shadow: rgba(0, 0, 0, 0.333) 0px 3px 12px; color: var(--ui-text); }
#touch-controls .touch-action-primary { border-color: var(--ui-sage); background: rgba(36, 55, 47, 0.867); color: var(--ui-text); }
#touch-controls .touch-action-button:active { border-color: var(--ui-sage); background: rgb(65, 92, 73); }
body[data-input="touch"] #journal-button, body[data-input="touch"] #inventory-button { min-width: 48px; min-height: 48px; }
#movement-pad { background: rgba(16, 23, 25, 0.533); border-color: rgba(220, 227, 217, 0.5); }
#movement-thumb { background: rgba(205, 216, 211, 0.58); border-color: rgb(240, 242, 236); }
#panel .player-tabs button[aria-current] { border-bottom: 4px solid var(--ui-sage); background: transparent; }
body[data-large-text="true"] #panel { font-size: 20px; }
body[data-large-text="true"] #panel p, body[data-large-text="true"] #panel .journal, body[data-large-text="true"] #panel .settings-row { font-size: 20px; }
body[data-large-text="true"] #panel small, body[data-large-text="true"] #panel .craft-cost { font-size: 18px; }
body[data-large-text="true"] #objective h2 { font-size: 26px; }
body[data-large-text="true"] #objective #objective-text { font-size: 18px; }
body[data-large-text="true"] #playtest-survey { font-size: 20px; }
body[data-reduce-motion="true"] #panel, body[data-reduce-motion="true"] #playtest-survey, body[data-reduce-motion="true"] button { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
body[data-tv="true"] #panel { padding: 5vh 5vw; }
body[data-tv="true"] #panel button { min-height: 64px; font-size: 24px; }
body[data-tv="true"] #panel .craft-row { min-height: 130px; }
body[data-tv="true"] #panel .craft-row strong { font-size: 26px; }
body[data-tv="true"] #panel .craft-row small { font-size: 20px; }
body[data-tv="true"] #start .menu-choice { font-size: 32px; min-height: 64px; }
body[data-tv="true"] #objective { left: 5vw; top: 5vh; }
body[data-tv="true"] #hud { padding-left: 5vw; padding-right: 5vw; }
#start .journey-card:is(:hover, :focus-visible) { background: rgba(26, 40, 35, 0.933); border-color: var(--ui-sage); color: var(--ui-text); }
#start .journey-card strong, #start .journey-card small, #start .journey-card:is(:hover, :focus-visible) strong, #start .journey-card:is(:hover, :focus-visible) small, #start .journey-card::after { color: var(--ui-text); }
#start .journey-card::after { display: none; }
#objective .objective-head { position: absolute; top: 8px; right: 8px; margin: 0px; }
#objective h2 { padding-right: 50px; }
#journal-button { background: rgba(16, 23, 25, 0.74); border-color: var(--ui-line); }
body[data-input="touch"] #hud .vitals { position: fixed; left: max(16px,env(safe-area-inset-left)); bottom: calc(260px + env(safe-area-inset-bottom)); width: 134px; padding: 8px; background: rgba(16, 23, 25, 0.72); }
body[data-input="touch"] #hud .vitals label { font-size: 12px; }
@media (orientation: landscape) and (max-height: 500px) {
  body[data-input="touch"] #hud .vitals { bottom: calc(136px + env(safe-area-inset-bottom)); width: 130px; }
  #objective h2 { padding-right: 44px; }
}
.vitals #stamina::-webkit-meter-optimum-value, .vitals meter::-webkit-meter-optimum-value { background: var(--ui-sage); box-shadow: none; }
@media (max-width: 650px) {
  #start .title-head h1 { font-size: clamp(24px, 8vw, 36px); }
}
@media (max-width: 650px) {
  #objective { max-width: calc(-136px + 100vw); }
  #objective #objective-text { padding-right: 0px; }
  #objective .objective-head { right: 4px; }
  #objective h2 { padding-right: 46px; }
}
@media (max-width: 650px) {
  #objective .objective-head { right: -60px; top: 64px; }
  #objective h2 { padding-right: 0px; }
}
#playtest-survey .survey-top [data-close] { border: 1px solid var(--ui-line); background: rgb(32, 40, 41); padding: 10px 16px; font: 500 16px / 1.4 Inter, Arial, sans-serif; min-height: 48px; text-decoration: none; }
#playtest-survey .survey-top [data-close]:hover, #playtest-survey .survey-top [data-close]:focus-visible { border-color: var(--ui-sage); background: rgba(179, 206, 173, 0.125); }
#playtest-survey[data-mode="ending"] .survey-intro > div > p { display: block; }
#playtest-survey[data-mode="ending"] .survey-choice { font: 400 20px / 1.4 Inter, Arial, sans-serif; }
#playtest-survey .survey-nav button { font: 500 17px / 1.4 Inter, Arial, sans-serif; padding: 10px 18px; }
#playtest-survey .survey-step { color: var(--ui-sage); font-size: 14px; letter-spacing: 0.04em; }
@media (max-width: 760px) {
  #playtest-survey .survey-top [data-close] { font-size: 14px; padding: 8px 12px; }
  #playtest-survey[data-mode="ending"] .survey-choice { font-size: 18px; }
}
.guide-list { display: grid; gap: 10px; }
.guide-list button { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; text-align: left; font-size: 20px; }
.guide-reader { max-width: 72ch; margin: auto; }
.guide-transcript { font: 400 21px / 1.75 Inter, Arial, sans-serif; }
.guide-transcript p { margin: 0px 0px 24px; }
.guide-reader footer { display: flex; gap: 12px; justify-content: space-between; border-top: 1px solid var(--ui-line); padding-top: 20px; position: sticky; bottom: 0px; background: var(--ui-solid); }
#panel .guide-reader #guide-size[aria-pressed="true"] { border-color: var(--ui-sage); background: rgba(179, 206, 173, 0.125); }
body[data-large-text="true"] #panel .guide-transcript p { font-size: 26px; }
@media (max-width: 650px) {
  .guide-transcript { font-size: 19px; }
  .guide-reader footer { flex-wrap: wrap; }
  .guide-reader footer button { flex: 1 1 0%; min-width: 120px; }
  body[data-large-text="true"] #panel .guide-transcript p { font-size: 24px; }
}
#panel:has(.guide-reader) .panel-head { position: sticky; top: 0px; z-index: 3; background: var(--ui-solid); padding-bottom: 12px; }
@media (min-width: 900px) {
  #objective { left: max(32px,var(--safe-x,0px)); top: max(32px,var(--safe-y,0px)); }
  #hud { padding-left: max(24px,var(--safe-x,0px)); padding-right: max(24px,var(--safe-x,0px)); bottom: max(16px,var(--safe-y,0px)); }
  #start .title-head { padding-left: max(28px,5.5vw,var(--safe-x,0px)); padding-right: max(28px,5.5vw,var(--safe-x,0px)); padding-top: max(28px,var(--safe-y,0px)); }
  #start .title-menu { margin-left: max(28px,5.5vw,var(--safe-x,0px)); padding-bottom: max(80px,calc(var(--safe-y,0px) + 64px)); }
  #start .title-footer { left: var(--safe-x,0px); right: var(--safe-x,0px); bottom: var(--safe-y,0px); padding-left: 12px; padding-right: 12px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"], [data-screen="pause"])[open] { padding-left: max(4vw,var(--safe-x,0px)); padding-right: max(4vw,var(--safe-x,0px)); padding-top: max(24px,var(--safe-y,0px)); padding-bottom: max(24px,var(--safe-y,0px)); }
  body[data-tv="true"] #objective { left: var(--safe-x); top: var(--safe-y); }
  body[data-tv="true"] #hud { padding-left: var(--safe-x); padding-right: var(--safe-x); }
  body[data-tv="true"] #panel:not([data-screen="craft"]):not([data-screen="workbench"]):not([data-screen="pause"]) { max-width: calc(100vw - 2 * var(--safe-x)); max-height: calc(100dvh - 2 * var(--safe-y)); }
}
@media (max-width: 899px) {
  .screen-edge-setting { display: none !important; }
}
body[data-tv="true"] #panel p, body[data-tv="true"] #panel .settings-row, body[data-tv="true"] #panel .craft-cost { font-size: 26px; }
body[data-tv="true"] #panel small, body[data-tv="true"] #panel .craft-reason { font-size: 22px; }
body[data-tv="true"] #objective h2 { font-size: 28px; }
body[data-tv="true"] #objective #objective-text { font-size: 22px; }
body[data-tv="true"][data-large-text="true"] #panel p, body[data-tv="true"][data-large-text="true"] #panel .settings-row, body[data-tv="true"][data-large-text="true"] #panel .craft-cost { font-size: 32px; }
body[data-tv="true"][data-large-text="true"] #panel button { font-size: 30px; }
@media (min-width: 900px) {
  body[data-tv="true"] #panel[data-screen="pause"] .panel-head { top: max(24px,var(--safe-y)); right: max(24px,var(--safe-x)); }
}
@media (min-width: 900px) {
  body[data-tv="true"] #panel p, body[data-tv="true"] #panel .settings-row, body[data-tv="true"] #panel .craft-cost { font-size: clamp(26px, 2.4vh, 52px); }
  body[data-tv="true"] #panel button { font-size: clamp(24px, 2.2vh, 48px); min-height: clamp(64px, 5.9vh, 128px); }
  body[data-tv="true"] #panel #panel-title { font-size: clamp(42px, 3.9vh, 84px); }
  body[data-tv="true"] #start .title-menu { width: clamp(430px, 22.4vw, 860px); }
  body[data-tv="true"] #start .menu-choice { font-size: clamp(32px, 3vh, 64px); min-height: clamp(64px, 5.9vh, 128px); }
  body[data-tv="true"][data-large-text="true"] #panel p, body[data-tv="true"][data-large-text="true"] #panel .settings-row, body[data-tv="true"][data-large-text="true"] #panel .craft-cost { font-size: clamp(32px, 3vh, 64px); }
  body[data-tv="true"][data-large-text="true"] #panel button { font-size: clamp(30px, 2.8vh, 60px); }
}
body[data-tv="true"] #start .journey-card small { font-size: clamp(22px, 2vh, 44px); }
body[data-tv="true"] #start .journey-card strong { font-size: clamp(14px, 1.3vh, 28px); }
body[data-tv="true"] #start .journey-card { width: auto; min-width: 340px; }
body[data-tv="true"] #start .title-social a { min-width: 48px; min-height: 48px; display: grid; place-items: center; }
body[data-tv="true"] #panel .inventory-slot > span, body[data-tv="true"] #panel .inventory-slot strong { font-size: clamp(24px, 2.2vh, 48px); }
body[data-tv="true"] #panel .pause-footer { font-size: clamp(22px, 2vh, 44px); }
.item-render { object-fit: contain; filter: none !important; }
#panel .craft-row .item-render { width: 76px; height: 76px; max-width: none; margin-left: -8px; }
#panel .inventory-slot .item-render { object-fit: contain; }
@media (min-width: 651px) {
  .craft-detail { min-height: 0px; overflow: hidden; }
  .craft-information { min-height: 0px; max-height: 100%; overflow: auto; padding-bottom: 2px; }
  .craft-information .craft-action { position: sticky; bottom: 0px; }
  .craft-information h4 { margin-top: 18px; }
  .craft-cost { margin-bottom: 18px; }
}
@media (min-width: 900px) and (max-width: 1400px) {
  body[data-tv="true"] #start .title-head { display: grid; grid-template-columns: minmax(0px, 1fr) auto; grid-template-areas: "brand actions" "objective objective"; gap: 12px; }
  body[data-tv="true"] #start h1 { grid-area: brand; }
  body[data-tv="true"] #start .journey-wrap { grid-area: objective; margin-left: 0px; }
  body[data-tv="true"] #start .title-actions { grid-area: actions; }
}
@media (min-width: 900px) and (max-height: 800px) {
  body[data-tv="true"] #start .title-head h1 { font-size: 48px; }
  body[data-tv="true"] #start .title-menu { padding-top: 20px; }
  body[data-tv="true"] #start .menu-choice { font-size: 24px; min-height: 48px; }
  body[data-tv="true"] #start .title-menu #start-button { min-height: 54px; }
}
.craft-catalogue, .craft-information { scrollbar-width: thin; scrollbar-color: rgb(129, 144, 135) rgb(17, 25, 27); }
.game-version { display: block; font: 500 14px / 1.5 Inter, Arial, sans-serif; letter-spacing: 0.02em; color: rgb(198, 206, 200); }
.pause-footer .game-version { margin-bottom: 12px; }
body[data-tv="true"] .game-version { font-size: clamp(18px, 1.2vw, 40px); }
#objective { display: grid; grid-template-columns: minmax(0px, auto) auto; column-gap: 26px; width: max-content; max-width: min(760px, -160px + 100vw); padding: 0px 0px 0px 22px; border-width: 0px 0px 0px 3px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(194, 237, 192); border-image: none; background: none; box-shadow: none; backdrop-filter: none; text-shadow: rgba(0, 0, 0, 0.733) 0px 1px 4px, rgba(0, 0, 0, 0.467) 0px 0px 18px; }
#objective h2 { grid-area: 1 / 1; padding: 0px; margin: 0px; font-size: 22px; line-height: 1.3; font-weight: 600; }
#objective #objective-text { grid-area: 2 / 1; padding: 0px; margin: 2px 0px 0px; font-size: 17px; line-height: 1.4; color: rgb(240, 241, 238); max-width: 46ch; }
#objective .objective-head { position: static; grid-area: 1 / 2 / 3; align-self: end; display: block; margin: 0px; }
#objective :is(#mission-progress, #mission-reward) { display: none; }
#objective #trail-guide { grid-column: 1 / -1; position: static; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 9px 0 0; padding: 8px 12px 8px 9px; border: 1px solid rgba(194, 237, 192, .34); border-radius: 8px; background: rgba(16, 23, 25, .72); color: var(--ui-text); text-shadow: none; font: 500 13px/1.3 Inter, Arial, sans-serif; }
#trail-guide .waypoint-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--ui-sage); border-radius: 50%; color: var(--ui-sage); font-size: 23px; line-height: 1; transform: rotate(var(--bearing, 0deg)); }
#trail-guide .waypoint-copy { display: grid; min-width: 0; gap: 1px; }
#trail-guide strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trail-guide small { color: var(--ui-muted); font-size: 11px; line-height: 1.35; }
body[data-paused=true] #trail-guide, body[data-intro=true] #trail-guide { visibility: hidden; }
body[data-tv=true] #objective #trail-guide { font-size: 20px; padding: 10px 14px; }
body[data-tv=true] #trail-guide :is(strong,small) { font-size: 18px; }
@media (max-width: 600px) { #objective #trail-guide { margin-top: 2px; padding: 5px 8px 5px 5px; gap: 7px; } #trail-guide .waypoint-icon { width: 24px; height: 24px; font-size: 19px; } #trail-guide strong { font-size: 11px; } #trail-guide small { font-size: 10px; } }
#objective #journal-button { display: flex; align-items: center; gap: 12px; margin: 0px; padding: 0px; min-height: 44px; border: 0px; background: none; color: rgb(244, 244, 240); font: 400 17px / 1.2 Inter, Arial, sans-serif; text-shadow: inherit; white-space: nowrap; }
#journal-button kbd { display: grid; place-items: center; min-width: 35px; height: 33px; border: 1.5px solid rgb(239, 239, 238); border-radius: 5px; background: rgba(37, 42, 43, 0.333); font: inherit; }
#objective #journal-button:focus-visible { outline: 2px solid var(--ui-sage); outline-offset: 6px; border-radius: 4px; }
#objective #journal-button:hover { color: rgb(194, 237, 192); }
body[data-input="touch"] #objective #journal-button { padding: 8px 12px; border: 1px solid rgb(224, 227, 223); border-radius: 7px; background: rgba(32, 37, 39, 0.72); min-height: 48px; }
body[data-input="touch"] #journal-button svg { width: 30px; height: 30px; }
@media (max-width: 900px) {
  #objective { left: max(20px,env(safe-area-inset-left)); top: max(24px,env(safe-area-inset-top)); max-width: calc(-110px + 100vw); padding-left: 16px; column-gap: 16px; }
  #objective h2 { font-size: 20px; padding: 0px; }
  #objective #objective-text { font-size: 15px; max-width: 38ch; }
  #objective .objective-head { position: static; }
}
@media (max-width: 600px) {
  #objective { grid-template-columns: minmax(0px, 1fr); width: calc(-100px + 100vw); max-width: none; row-gap: 10px; }
  #objective .objective-head { grid-area: 3 / 1; justify-self: start; }
  #objective h2 { font-size: 19px; }
  #objective #objective-text { font-size: 15px; }
  #objective #journal-button { font-size: 15px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #objective { top: max(14px,env(safe-area-inset-top)); max-width: calc(-160px + 100vw); column-gap: 18px; }
  #objective h2 { font-size: 18px; }
  #objective #objective-text { font-size: 14px; max-width: 36ch; }
}
body[data-tv="true"] #objective { max-width: calc(100vw - 2 * var(--safe-x) - 140px); }
body[data-tv="true"] #objective #journal-button { font-size: 24px; min-height: 52px; }
body[data-large-text="true"] #objective { grid-template-columns: minmax(0px, 1fr); }
body[data-large-text="true"] #objective .objective-head { grid-area: 3 / 1; margin-top: 10px; justify-self: start; }
#hud .vitals { width: 290px; padding: 8px 0px; background: none; text-shadow: rgb(0, 0, 0) 0px 1px 4px; }
#hud .vitals label { display: grid; grid-template-columns: 72px minmax(0px, 1fr) 30px; align-items: center; gap: 12px; margin: 9px 0px; font: 400 16px / 1.3 Inter, Arial, sans-serif; }
#hud .vitals label span { grid-area: 1 / 3; float: none; text-align: right; font: inherit; }
#hud .vitals label meter { grid-area: 1 / 2; display: block; width: 100%; height: 8px; margin: 0px; }
#hud .vitals label[data-danger="true"] { color: #ffd2a6; text-shadow: 0 0 9px rgba(230, 95, 52, .65); }
#hud .vitals label[data-danger="true"] meter::-webkit-meter-optimum-value { background: #e9905c; }
#hud .vitals label[data-danger="true"] meter::-moz-meter-bar { background: #e9905c; }
#inventory-button { display: flex; align-items: center; gap: 12px; border: 0px; background: none; min-height: 44px; white-space: nowrap; font-weight: 400; }
#inventory-button kbd { display: grid; place-items: center; min-width: 35px; height: 33px; border: 1.5px solid rgb(239, 239, 238); border-radius: 5px; font: inherit; }
body[data-input="touch"] #hud .vitals { width: 220px; padding: 6px 10px; background: rgba(32, 37, 39, 0.66); border-radius: 4px; }
body[data-input="touch"] #hud .vitals label { font-size: 13px; grid-template-columns: 55px minmax(0px, 1fr) 25px; gap: 8px; margin: 5px 0px; }
body[data-input="touch"] #inventory-button { border: 1px solid rgb(224, 227, 223); border-radius: 7px; background: rgba(32, 37, 39, 0.72); padding: 8px; gap: 8px; }
@media (orientation: landscape) and (max-height: 500px) {
  body[data-input="touch"] #hud { top: auto; bottom: max(12px,env(safe-area-inset-bottom)); left: 0px; right: 0px; padding: 0px; display: block; }
  body[data-input="touch"] #hud .hotbar-wrap { position: fixed; left: 50%; bottom: max(12px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; justify-content: center; gap: 8px; }
  body[data-input="touch"] #hud .tool-slot { width: 60px; min-height: 66px; }
  body[data-input="touch"] #hud .vitals { bottom: calc(136px + env(safe-area-inset-bottom)); width: 208px; }
  body[data-input="touch"] #inventory-button { font-size: 13px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  body[data-input="touch"] #inventory-button span:last-child { display: none; }
}
#panel[data-screen="pause"] { padding: 12vh 5.4vw; background: linear-gradient(90deg, rgba(8, 11, 13, 0.78), rgba(8, 11, 13, 0.314) 50%, rgba(8, 11, 13, 0.125)); }
#panel[data-screen="pause"] #panel-title { font-size: clamp(36px, 3.5vw, 58px); margin-bottom: 40px; }
#panel[data-screen="pause"] .pause-menu { width: min(390px, 100%); gap: 4px; }
#panel[data-screen="pause"] .menu-choice { font-size: clamp(22px, 2.15vw, 36px); min-height: 54px; padding: 8px 12px; border-radius: 5px; }
#panel[data-screen="pause"] .pause-footer { display: block; margin-top: 40px; max-width: 380px; padding-top: 24px; }
#panel[data-screen="pause"] .pause-objective { display: block; font-size: 20px; }
#panel[data-screen="pause"] .pause-objective strong { font-size: 24px; font-weight: 400; }
#panel[data-screen="pause"] .game-version { position: fixed; bottom: 18px; left: 5.4vw; font-size: 12px; opacity: 0.6; }
#panel[data-screen="pause"] #pause-control-hint { position: fixed; bottom: 28px; right: 5vw; display: flex; align-items: center; gap: 12px; }
body[data-input="touch"] #pause-control-hint { display: none !important; }
@media (max-height: 650px) {
  #panel[data-screen="pause"] { padding: 24px 5vw; }
  #panel[data-screen="pause"] #panel-title { margin-bottom: 16px; }
  #panel[data-screen="pause"] #panel-body { max-height: calc(100dvh - 110px); }
  #panel[data-screen="pause"] .pause-footer { margin-top: 20px; padding-top: 16px; }
}
#movement-pad { border: 2px solid rgb(228, 230, 227); background: rgba(35, 40, 41, 0.71); box-shadow: none; }
#movement-pad::before { display: none; }
#movement-thumb { border: 2px solid rgb(239, 239, 236); background: linear-gradient(rgb(160, 162, 160), rgb(97, 100, 98)); box-shadow: none; }
#touch-controls .touch-actions { display: flex; gap: 14px; align-items: center; padding-bottom: 58px; }
#touch-controls .touch-action-button { background: rgba(35, 40, 41, 0.81); border: 2px solid rgb(217, 222, 217); box-shadow: none; color: rgb(243, 244, 239); }
#touch-controls :is(#touch-gather, #touch-jump) { width: 76px; height: 76px; min-width: 76px; min-height: 76px; margin: 0px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font-size: 14px; }
#touch-controls #touch-sprint { position: absolute; left: 140px; bottom: 0px; width: 54px; height: 54px; min-width: 54px; min-height: 54px; }
#touch-controls #touch-use { position: absolute; right: 0px; bottom: 0px; width: auto; max-width: 230px; min-width: 160px; height: 50px; min-height: 50px; border-radius: 8px; display: flex; gap: 10px; padding: 8px 12px; font-size: 15px; text-align: left; border-color: var(--ui-sage); }
#touch-controls #touch-use[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #touch-controls #touch-sprint { left: 114px; }
  #touch-controls :is(#touch-gather, #touch-jump) { width: 64px; height: 64px; min-width: 64px; min-height: 64px; font-size: 12px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  #touch-controls #touch-sprint { left: 120px; bottom: 14px; width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  #touch-controls .touch-actions { gap: 8px; }
  #touch-controls :is(#touch-gather, #touch-jump) { width: 60px; height: 60px; min-width: 60px; min-height: 60px; font-size: 12px; }
}
#panel[data-screen="pause"][open] { padding: 12vh max(5.4vw,var(--safe-x,0px)); }
#panel[data-screen="pause"]::backdrop { background: rgba(0, 0, 0, 0.133); backdrop-filter: none; }
#panel[data-screen="pause"] .pause-footer { padding: 24px 12px 0px; }
#panel[data-screen="pause"] .menu-choice { backdrop-filter: none; }
@media (max-height: 650px) {
  #panel[data-screen="pause"][open] { padding: 24px max(5vw,var(--safe-x,0px)); }
  #panel[data-screen="pause"] .pause-menu .menu-choice { min-height: 48px; height: auto; }
}
#start .title-head { display: block; padding: 15vh 5.5vw 0px; height: auto; }
#start .title-head h1 { font: 400 clamp(34px, 4vw, 66px) / 1.2 Inter, Arial, sans-serif; letter-spacing: 0.45em; margin: 0px; }
#start .journey-wrap { display: none; }
#start .title-actions { position: absolute; right: 24px; top: 24px; }
#start .title-menu { position: relative; inset: auto; transform: none; margin: 8vh 0px 0px 5.5vw; padding: 0px 0px 90px; width: min(420px, 80vw); gap: 4px; max-height: none; overflow: visible; }
#start .title-menu .menu-choice { font-size: clamp(22px, 2vw, 32px); min-height: 54px; height: auto; padding: 10px 24px; border: 1px solid transparent; border-radius: 4px; backdrop-filter: none; background: transparent; }
#start .title-menu .menu-choice svg { display: none; }
#start .title-menu #start-button { min-height: 72px; background: rgba(170, 197, 170, 0.145); border-top: 1px solid rgba(179, 206, 173, 0.6); border-right: 1px solid rgba(179, 206, 173, 0.6); border-bottom: 1px solid rgba(179, 206, 173, 0.6); border-image: none; border-left: 5px solid var(--ui-sage); }
#start #title-support { position: fixed; bottom: 16px; right: 24px; width: auto !important; min-height: 32px !important; font-size: 13px !important; margin: 0px !important; }
#start .title-menu > a.menu-choice:not(#title-support) { position: fixed; bottom: 16px; right: 160px; width: auto; font-size: 13px; min-height: 32px; }
.title-current-objective { border-top: 1px solid rgba(208, 215, 208, 0.29); margin: 18px 16px 0px; padding-top: 16px; font-size: 17px; color: var(--ui-muted); }
.title-current-objective strong { display: block; font-weight: 400; font-size: 22px; color: var(--ui-text); margin-top: 5px; }
#start .title-footer { background: none; border: 0px; backdrop-filter: none; min-height: 32px; font-size: 11px; }
#start .title-social { display: none; }
@media (max-height: 850px) {
  #start .title-head { padding-top: 6vh; }
  #start .title-menu { margin-top: 5vh; }
  .title-current-objective { margin-top: 10px; padding-top: 10px; }
}
@media (max-width: 650px) {
  #start .title-head { padding: 12vh 24px 0px; }
  #start .title-head h1 { font-size: 30px; letter-spacing: 0.2em; }
  #start .title-menu { margin: 5vh 24px 0px; width: calc(100% - 48px); }
  #start .title-menu .menu-choice { font-size: 22px; min-height: 48px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #start .title-head { padding: 24px 5vw 0px; }
  #start .title-menu { margin: 20px 5vw 0px; max-height: calc(100dvh - 105px); overflow: auto; width: 46vw; padding-bottom: 60px; }
  #start .title-menu .menu-choice { font-size: 20px; min-height: 48px; }
  #start .title-menu #start-button::after { top: 2px; right: 2px; }
  .title-current-objective { font-size: 14px; }
  .title-current-objective strong { font-size: 18px; }
}
#start .saved-region { display: block; font: 400 18px / 1.3 Inter, Arial, sans-serif; color: var(--ui-muted); margin-top: 3px; }
#panel:is([data-screen="craft"], [data-screen="workbench"])[open] { padding-top: 88px; background: linear-gradient(90deg, rgba(10, 17, 20, 0.62), rgba(13, 21, 25, 0.47)); }
#panel:is([data-screen="craft"], [data-screen="workbench"])::backdrop { background: rgba(3, 9, 12, 0.25); backdrop-filter: blur(2px); }
#panel:is([data-screen="craft"], [data-screen="workbench"]) .panel-head { position: absolute; left: 4vw; right: 4vw; top: 18px; display: flex; justify-content: space-between; align-items: center; }
#panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-kicker { font: 500 21px / 1.2 Inter, Arial, sans-serif; letter-spacing: 0.25em; color: var(--ui-text); }
#panel:is([data-screen="craft"], [data-screen="workbench"]) .player-tabs { position: absolute; top: 8px; left: 35%; right: 16%; justify-content: center; border: 0px; margin: 0px; }
#panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-title { margin: 0px 0px 18px; font-size: 40px; }
#panel .craft-station { display: flex; gap: 0px; padding: 0px; margin-bottom: 14px; }
#panel .craft-station button { flex: 1 1 0%; border-width: 0px 0px 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: none; border-radius: 0px; font-size: 18px; min-height: 48px; }
#panel .craft-station button[aria-pressed="true"] { border-bottom-color: var(--ui-sage); font-weight: 600; }
.craft-information { border-left: 1px solid var(--ui-line); padding-left: 26px; }
#panel .craft-row { grid-template-columns: 92px 1fr; min-height: 114px; padding: 12px 14px; gap: 14px; }
#panel .craft-row .item-icon { width: 88px; height: 76px; }
@media (max-width: 1050px) {
  .craft-information { border: 0px; padding-left: 0px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) .player-tabs { left: 28%; right: 10%; }
  #panel .craft-row { grid-template-columns: 60px 1fr; }
  #panel .craft-row .item-icon { width: 56px; height: 56px; }
}
@media (max-width: 650px) {
  #panel:is([data-screen="craft"], [data-screen="workbench"])[open] { padding: 90px 20px 20px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) .panel-head { top: 12px; left: 20px; right: 20px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-kicker { font-size: 14px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) .player-tabs { top: 52px; left: 20px; right: 20px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) .player-tabs button { font-size: 14px; padding: 6px; }
  #panel:is([data-screen="craft"], [data-screen="workbench"]) #panel-title { font-size: 28px; margin: 12px 0px 18px; }
}

/* Completion reference 14/15. */
#playtest-survey[data-mode=ending]{background:#080d1040}
#playtest-survey[data-mode=ending]::backdrop{background:#05090d55;backdrop-filter:none}
#playtest-survey[data-mode=ending] .survey-shell{grid-template-columns:52% 48%;padding:110px 3vw 5vh;gap:0}
#playtest-survey[data-mode=ending] .survey-intro{background:none;border:0;padding:0 4vw 0 1vw;justify-content:center;min-height:0}
#playtest-survey[data-mode=ending] .survey-brand{position:fixed;top:40px;left:4vw;letter-spacing:.4em;font-weight:400}
#playtest-survey[data-mode=ending] .survey-intro strong{font-size:clamp(36px,3.5vw,58px);padding-bottom:24px;border-bottom:1px solid #d3ded155}
#playtest-survey[data-mode=ending] .survey-intro p{font-size:clamp(20px,1.8vw,30px);color:var(--ui-text);margin:18px 0}
#playtest-survey[data-mode=ending] .survey-intro .ending-detail{font-size:clamp(17px,1.5vw,24px);color:var(--ui-muted)}
#playtest-survey[data-mode=ending] .survey-intro>small{display:none}
#playtest-survey[data-mode=ending] .survey-form{background:#111718ed;border:1px solid #bcc8bc70;border-radius:5px;min-height:0;padding:28px;position:relative}
#playtest-survey[data-mode=ending] .survey-top{border-bottom:1px solid var(--ui-line);padding-bottom:14px;margin-bottom:30px;font-size:20px;letter-spacing:0}
#playtest-survey[data-mode=ending] .survey-top [data-close]{position:fixed;right:3vw;top:28px;background:#151b1bd9;border:1px solid #bcc8bc88;border-radius:4px;padding:10px 18px;font-size:17px}
#playtest-survey[data-mode=ending] .survey-progress{display:none}
#playtest-survey[data-mode=ending] .survey-step{position:absolute;top:30px;right:30px;font-size:17px;letter-spacing:0;color:var(--ui-muted)}
#playtest-survey[data-mode=ending] .survey-choice{display:flex;align-items:center;gap:18px;font-size:22px;font-weight:400;min-height:66px;border-radius:5px;padding:12px 20px}
#playtest-survey[data-mode=ending] .survey-choice::before{content:'';width:28px;height:28px;border:2px solid #f0f0eb;border-radius:50%;margin:0;flex-shrink:0}
#playtest-survey[data-mode=ending] .survey-choice[aria-pressed=true]{box-shadow:none}
#playtest-survey[data-mode=ending] .survey-choice[aria-pressed=true]::before{content:'✓';background:var(--ui-sage);border-color:var(--ui-sage);color:#17211a;display:grid;place-items:center}
#playtest-survey[data-mode=ending] .survey-nav{display:flex;flex-direction:column;align-items:stretch;margin-top:20px;gap:12px}
#playtest-survey[data-mode=ending] .survey-nav button{width:100%;margin:0;text-align:left;padding:12px 20px;font-size:20px}
#playtest-survey[data-mode=ending] [data-next]{background:#aacaad33;color:var(--ui-text);border:1px solid var(--ui-sage);border-left-width:4px}
#playtest-survey[data-mode=ending] [data-skip]{border:1px solid var(--ui-line);background:#ffffff05;color:var(--ui-text)}
#playtest-survey[data-mode=ending] .survey-optional{border-top:1px solid var(--ui-line);padding-top:18px;font-size:16px}
@media(max-width:760px){#playtest-survey[data-mode=ending] .survey-shell{display:block;padding:90px 16px 20px}#playtest-survey[data-mode=ending] .survey-intro{display:none}#playtest-survey[data-mode=ending] .survey-form{padding:22px;min-height:0}#playtest-survey[data-mode=ending] .survey-top [data-close]{top:16px;right:16px}#playtest-survey[data-mode=ending] .survey-choice{font-size:19px;min-height:60px}#playtest-survey[data-mode=ending] .survey-step{top:24px;right:24px}}

#panel[data-screen=note]{width:83vw;max-width:1450px;max-height:88dvh;padding:28px 34px;background:#171a19ed;border:1px solid #bfc4b899;border-radius:6px}
#panel[data-screen=note] #panel-title{font-size:24px;font-weight:400;border-bottom:1px solid var(--ui-line);padding-bottom:14px;margin:0 0 24px}
#panel[data-screen=note] .panel-head{display:none}
.recovered-note{display:grid;grid-template-columns:40% 1fr;gap:5%;align-items:start}
.note-art{aspect-ratio:460/575;background:linear-gradient(155deg,#d7c8a9,#ae9874);border-radius:3px}
#panel .note-transcription h3{font-size:clamp(26px,3vw,44px);margin:0}
#panel .note-transcription p{font-size:clamp(18px,1.65vw,28px);line-height:1.45;margin:24px 0;color:var(--ui-text)}
#panel .note-transcription .note-source{color:var(--ui-muted);margin:4px 0 24px;border-bottom:1px solid var(--ui-line);padding-bottom:18px;font-size:20px}
.note-controls{display:flex;align-items:center;gap:18px;border-top:1px solid var(--ui-line);padding-top:18px;margin-top:22px}.note-controls #note-close{margin-left:auto}.note-controls span{color:var(--ui-sage);font-size:15px}
body[data-large-text=true] #panel .note-transcription p{font-size:28px}
@media(max-width:700px){#panel[data-screen=note]{width:calc(100vw - 24px);padding:22px;max-height:94dvh}.recovered-note{display:flex;flex-direction:column;gap:18px}.note-art{width:160px;align-self:center}.note-controls{position:sticky;bottom:0;background:var(--ui-solid);flex-wrap:wrap}.note-controls span{display:none}#panel .note-transcription p{font-size:19px}}
.read-maintenance-note{align-self:flex-start;margin-top:12px}
#mission-notice{position:fixed;top:100px;right:32px;left:auto;bottom:auto;transform:none;display:flex;align-items:center;gap:14px;width:max-content;max-width:340px;padding:14px 18px;background:#151a19ed;border:1px solid #aacaad66;border-radius:5px;text-align:left;font:15px/1.4 Inter,Arial,sans-serif}
#mission-notice[hidden]{display:none}#mission-notice small,#mission-notice strong,#mission-notice div>span{display:block}#mission-notice small{font-size:13px;color:#c7d8c6}#mission-notice strong{font-size:17px;font-weight:500}#mission-notice div>span{font-size:13px;margin-top:3px}.notice-check{border:2px solid var(--ui-sage);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;color:var(--ui-sage);font-size:22px;flex-shrink:0}body[data-paused=true] #mission-notice{visibility:hidden}
@media(max-width:600px){#mission-notice{top:190px;right:16px;max-width:calc(100vw - 32px)}}

body[data-input=touch] #target[data-context=interaction]{display:none}
#target-label:empty{display:none}
body[data-paused=false] header .location{position:fixed;display:block;top:max(28px,var(--safe-y,0px));right:max(32px,var(--safe-x,0px));left:auto;transform:none;text-align:right}
body[data-paused=false] header #region{display:none}
body[data-paused=false] header #day{font:400 20px/1.3 Inter,Arial,sans-serif;letter-spacing:0;color:#f2f3ee;text-shadow:0 1px 4px #000}
body[data-input=touch][data-paused=false] header .location{right:140px;top:26px}
@media(max-width:600px){body[data-input=touch][data-paused=false] header .location{top:76px;right:20px}body[data-paused=false] header #day{font-size:15px}}

/* Reader is a centred modal, independent of side-panel positioning. */
#panel[data-screen=note][open]{inset:0;margin:auto;height:fit-content;transform:none}

body:has(dialog[open]) #prop-review-controls{visibility:hidden}

#playtest-survey[data-mode=ending][data-stage=review] .survey-top>span,#playtest-survey[data-stage=review] .survey-step{display:none}
#playtest-survey[data-mode=ending][data-stage=review] .survey-top{border:0;margin:0;padding:0}
#playtest-survey[data-mode=ending][data-stage=review] #survey-title{border-bottom:1px solid var(--ui-line);padding-bottom:14px;margin:0 0 10px}
#playtest-survey[data-mode=ending] .survey-summary{font-size:clamp(16px,1.3vw,22px);gap:0;margin:0}
#playtest-survey[data-mode=ending] .survey-summary dt,#playtest-survey[data-mode=ending] .survey-summary dd{border-bottom:1px solid var(--ui-line);margin:0;padding:12px 0}
#playtest-survey[data-mode=ending] .survey-summary dd{color:var(--ui-sage);padding-left:14px}
#playtest-survey .survey-comments{display:grid;gap:8px;margin:16px 0;font-size:18px}
#playtest-survey .survey-comments textarea{width:100%;font:inherit;padding:12px;resize:vertical}
#playtest-survey[data-stage=review] .survey-content>button{justify-self:start;min-width:150px;font-size:18px}
#playtest-survey[data-mode=ending][data-stage=review] .survey-nav{flex-direction:row}
#playtest-survey[data-mode=ending][data-stage=review] [data-back]{width:auto;min-width:100px}
#playtest-survey[data-mode=ending][data-stage=review] [data-next]{text-align:center;background:var(--ui-sage);color:#152219;border-width:1px}
@media(max-width:760px){#playtest-survey[data-mode=ending] .survey-summary{grid-template-columns:1fr;font-size:17px}#playtest-survey[data-mode=ending] .survey-summary dt{border:0;padding-bottom:0}#playtest-survey[data-mode=ending] .survey-summary dd{padding:4px 0 12px}}

body[data-paused=true]>header{visibility:hidden}

/* Keep the time label clear of the mission panel on narrow portrait screens. */
@media (max-width: 600px) and (orientation: portrait) {
  body[data-paused=false]:not([data-input=touch]) #objective {
    top: 68px;
    max-width: calc(100vw - 32px);
  }
  body[data-paused=false][data-input=touch] #objective {
    top: 20px;
    max-width: min(220px, calc(100vw - 170px));
  }
  body[data-paused=false][data-input=touch] #objective #objective-text {
    display: none;
  }
}

#panel[data-screen=note][open]{max-width:none;width:83vw;padding:24px 2.5vw}
#panel[data-screen=note] #panel-title{font-size:clamp(24px,1.6vw,32px)}
#panel .note-transcription h3{font-size:clamp(30px,2.9vw,56px);font-weight:500}
#panel .note-transcription p{font-size:clamp(20px,1.8vw,36px);margin:32px 0;line-height:1.4}
.note-saved{position:absolute;right:2.5vw;top:28px;color:var(--ui-sage);font-size:clamp(16px,1.2vw,24px)}
.note-art-toggle{display:none}.note-art[hidden]{display:none}
.note-art{aspect-ratio:768/520;background-repeat:no-repeat;background-color:transparent;box-shadow:0 8px 28px #0006;transform:rotate(-1.2deg)}
#note-text-size{background:transparent;border-color:transparent;font-weight:400}
@media(max-width:700px){#panel[data-screen=note][open]{width:calc(100vw - 24px);padding:22px}.note-saved{display:none}.note-art-toggle{display:block;margin:0 0 16px}.note-art{width:min(100%,320px);margin:0 auto 8px}#panel .note-transcription p{font-size:19px;margin:24px 0}.note-controls{z-index:1;padding-bottom:8px}}

@media(min-width:1100px){
 .craft-information{align-self:start;margin-top:4vh;padding-top:0}
 #panel .craft-row{grid-template-columns:130px 1fr;min-height:130px}
 #panel .craft-row .item-icon{width:126px;height:108px}
 .craft-row strong{font-size:clamp(24px,1.7vw,32px)}.craft-row small{font-size:clamp(18px,1.25vw,24px)}
 .craft-information,.craft-cost{font-size:clamp(18px,1.35vw,26px)}
 #panel .craft-information h3{font-size:clamp(36px,2.8vw,54px)}
 .craft-cost th,.craft-cost td{padding:16px 6px}
 .craft-cost thead th{font-size:20px}
 .craft-information h4{font-size:24px;margin-top:36px}
 .craft-preview{max-height:72vh}
}
@media(max-width:650px){#panel:is([data-screen=craft],[data-screen=workbench]) .panel-head{border-bottom:0}#panel:is([data-screen=craft],[data-screen=workbench])[open]{padding-top:104px}}

/* Reference interaction language: rounded edges, white rim, soft selected glow.
   Tabs retain the reference underline; disabled actions never advertise focus. */
:root{--ui-radius:8px;--ui-focus-rim:#f4fff1;--ui-focus-glow:0 0 0 1px #f4fff1,0 0 8px #e6ffe35c,0 0 22px #b8f4b52e;--ui-selected-fill:linear-gradient(110deg,#b3cead40,#b3cead1a)}
#panel button,#playtest-survey button,#start .title-menu .menu-choice,#start .journey-card{border-radius:var(--ui-radius);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}
#panel button:focus-visible,#start button:focus-visible,#start a:focus-visible,#playtest-survey button:focus-visible,
body[data-input=gamepad] #panel button:focus,body[data-input=gamepad] #start button:focus{
 outline:1px solid var(--ui-focus-rim);outline-offset:0;border-color:var(--ui-focus-rim);box-shadow:var(--ui-focus-glow)}
#panel button:not(:disabled):hover,#playtest-survey button:not(:disabled):hover,#start .title-menu .menu-choice:not(:disabled):hover{border-color:var(--ui-focus-rim);box-shadow:var(--ui-focus-glow)}
#panel .craft-action.primary:not(:disabled),#playtest-survey[data-mode=ending][data-stage=review] [data-next]:not(:disabled){background:linear-gradient(115deg,#b5d5af,#95bc94);border:2px solid var(--ui-focus-rim);box-shadow:var(--ui-focus-glow);border-radius:9px;color:#101b12}
#panel .craft-row[aria-pressed=true],#panel .inventory-slot[aria-pressed=true],#playtest-survey .survey-choice[aria-pressed=true],.tool-slot[aria-pressed=true]{border-color:var(--ui-focus-rim);background:var(--ui-selected-fill);box-shadow:inset 0 0 0 1px #f4fff155,0 0 12px #d8fbdc24;border-radius:var(--ui-radius)}
#panel[data-screen=pause] .pause-menu .menu-choice:is(:hover,:focus-visible),#start .title-menu .menu-choice:is(:hover,:focus-visible){background:var(--ui-selected-fill);border:1px solid var(--ui-focus-rim);box-shadow:var(--ui-focus-glow);border-radius:var(--ui-radius);outline:0}
#panel .craft-station button,#panel .player-tabs button,#panel .inventory-filters button{border-radius:0;box-shadow:none}
#panel .craft-station button[aria-pressed=true]{border-color:transparent transparent var(--ui-sage)}
#panel :is(.craft-station,.player-tabs,.inventory-filters) button:not([aria-pressed=true]):not([aria-current]):hover{border-color:transparent;background:#b3cead12;box-shadow:none}
#panel button:disabled,#playtest-survey button:disabled{box-shadow:none;outline:none}
#panel .craft-catalogue{padding-left:3px;padding-top:3px;padding-bottom:3px}
#panel .settings-menu button:focus-visible,#panel .binding-rows button:focus-visible{outline:1px solid var(--ui-focus-rim)}

#start .title-menu #start-button:not(:disabled){border:1px solid var(--ui-focus-rim);border-radius:var(--ui-radius);background:var(--ui-selected-fill);box-shadow:var(--ui-focus-glow)}
#panel[data-screen=pause] .pause-menu .menu-choice:focus{border:1px solid var(--ui-focus-rim);border-radius:var(--ui-radius);background:var(--ui-selected-fill);box-shadow:var(--ui-focus-glow)}

/* Keyboard selection wins over a parked pointer: one focus glow at a time. */
#panel:has(:focus-visible) button:hover:not(:focus-visible):not([aria-pressed=true]):not(.primary){box-shadow:none;outline:none}
#panel[data-screen=pause]:has(:focus-visible) .menu-choice:hover:not(:focus-visible){border-color:transparent;background:transparent;color:var(--ui-text)}
#panel:has(:focus-visible) #close-panel:hover:not(:focus-visible){border-color:var(--ui-line)}

#playtest-survey[data-mode=ending] .survey-choice[aria-pressed=true]{border-color:var(--ui-focus-rim);border-radius:8px;box-shadow:var(--ui-focus-glow);background:var(--ui-selected-fill)}
#playtest-survey[data-mode=ending] [data-next]:not(:disabled){border:2px solid var(--ui-focus-rim);border-radius:8px;box-shadow:var(--ui-focus-glow)}

#playtest-survey .survey-check{border-radius:8px}
#playtest-survey .survey-check:has(input:checked){border-color:var(--ui-focus-rim);background:var(--ui-selected-fill);box-shadow:var(--ui-focus-glow)}
#playtest-survey .survey-check:has(input:focus-visible){outline:1px solid var(--ui-focus-rim);box-shadow:var(--ui-focus-glow)}

#playtest-survey[data-mode=ending][data-stage=review] .survey-nav{flex-wrap:nowrap}
#playtest-survey[data-mode=ending][data-stage=review] .survey-nav [data-next]{width:auto;flex:1}
#playtest-survey[data-mode=ending][data-stage=review] .survey-optional{display:none}
#playtest-survey[data-mode=ending] .survey-summary dd{text-align:left}
#playtest-survey[data-mode=ending] .survey-comments textarea{background:#ffffff06;border:1px solid #becbc170;border-radius:6px}
#playtest-survey[data-mode=ending] .survey-content details>summary{font-weight:400;font-size:18px;min-height:48px;padding:12px;border:1px solid var(--ui-line);border-radius:7px}
#playtest-survey[data-mode=ending] .survey-disclosure{font-size:15px;margin:12px 0}
@media(min-width:1100px) and (min-height:850px){#playtest-survey[data-mode=ending][data-stage=review] .survey-shell{padding-top:11vh}#playtest-survey[data-mode=ending] .survey-intro{justify-content:flex-start;padding-top:18vh}}

#panel :is(input,select,textarea,summary):focus-visible,#playtest-survey :is(input,textarea,summary):focus-visible{outline:1px solid var(--ui-focus-rim);outline-offset:2px;box-shadow:var(--ui-focus-glow);border-radius:6px}
#objective #journal-button:focus-visible,#inventory-button:focus-visible{outline:1px solid var(--ui-focus-rim);outline-offset:0;box-shadow:var(--ui-focus-glow);border-radius:8px}
body[data-reduce-motion=true] button{transition:none}

#start button{border-radius:8px}
#start .title-menu #start-button:not(:focus):not(:hover){border-color:transparent;background:transparent;box-shadow:none}
#start:has(:focus-visible) .title-menu #start-button:not(:focus-visible){border-color:transparent;background:transparent;box-shadow:none}
#start:has(:focus-visible) .menu-choice:hover:not(:focus-visible){border-color:transparent;background:transparent;box-shadow:none}

@media(min-width:900px){#panel[data-screen=pause] .pause-menu{width:clamp(280px,24vw,620px)}#panel[data-screen=pause] .pause-footer{max-width:clamp(280px,24vw,620px)}}
.tool-slot[aria-pressed=true]{box-shadow:0 0 0 1px var(--ui-focus-rim),0 0 10px #d8fbdc55}

@media(min-width:1100px){#panel .craft-row{min-height:clamp(92px,12vh,145px);grid-template-columns:clamp(76px,7.5vw,130px) 1fr}#panel .craft-row .item-icon{width:100%;height:clamp(70px,10vh,108px)}}

@media(min-width:1800px){body[data-tv=true]{--ui-radius:12px;--ui-focus-glow:0 0 0 2px #f4fff1,0 0 12px #e6ffe35c,0 0 30px #b8f4b52e}}

@media(min-width:900px){
 body[data-tv=true] #start .saved-region{font-size:clamp(22px,1.25vw,48px)}
 body[data-tv=true] #start .title-current-objective{font-size:clamp(22px,1.25vw,48px);padding-top:24px}
 body[data-tv=true] #start .title-current-objective strong{font-size:clamp(26px,1.5vw,58px)}
 body[data-tv=true] #start #title-support,body[data-tv=true] #start .title-menu>a.menu-choice:not(#title-support){font-size:clamp(20px,1.2vw,46px)!important;min-height:48px!important;bottom:max(24px,var(--safe-y));right:max(24px,var(--safe-x))}
 body[data-tv=true] #start .title-menu>a.menu-choice:not(#title-support){right:calc(max(24px,var(--safe-x)) + clamp(230px,14vw,540px))}
 body[data-tv=true] #start .title-footer{font-size:clamp(18px,1vw,38px)}
}

/* Game menus retain native scrolling without browser scrollbar chrome. */
:is(#panel,#start,#playtest-survey), :is(#panel,#start,#playtest-survey) *{scrollbar-width:none}
:is(#panel,#start,#playtest-survey)::-webkit-scrollbar,
:is(#panel,#start,#playtest-survey) *::-webkit-scrollbar{display:none}
#panel #close-panel,#panel #pause-control-hint{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:88px;min-height:44px;padding:8px 12px;font-size:14px;line-height:1.2}
#panel #close-panel .control-key,#panel #pause-control-hint .control-key{font-size:12px;line-height:1;padding:5px 6px;border:1px solid #e8f3e9aa;border-radius:4px;background:transparent}
#panel #close-panel .pad-glyph,#panel #pause-control-hint .pad-glyph{width:28px;height:28px}
#panel[data-screen=pause] .panel-head{display:none}
body[data-input=touch] #panel #pause-control-hint{display:inline-flex!important}
body[data-input=touch] #panel #close-panel,body[data-input=touch] #panel #pause-control-hint{min-height:48px}

/* Mouse actions use the same quiet white/sage language as controller glyphs. */
.mouse-hint{display:inline-flex;align-items:center;vertical-align:middle;width:28px;height:36px;flex:none;color:#edf6e8}
.mouse-hint svg{display:block;width:100%;height:100%;overflow:visible}
.mouse-shell{fill:#111c21;stroke:currentColor;stroke-width:1.6}
.mouse-seam{fill:none;stroke:currentColor;stroke-width:1;opacity:.6}
.mouse-wheel{fill:currentColor}
.mouse-button{fill:#d6e9ca;transform-box:fill-box;transform-origin:center;animation:mouse-press 2.6s ease-in-out infinite;animation-delay:var(--click-phase,0ms)}
.mouse-click-rays{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;opacity:0;animation:mouse-click-rays 2.6s ease-out infinite;animation-delay:var(--click-phase,0ms)}
@keyframes mouse-press{0%,24%,100%{opacity:.65;transform:translateY(0)}10%,16%{opacity:1;transform:translateY(1.5px)}}
@keyframes mouse-click-rays{0%,6%,26%,100%{opacity:0}10%,16%{opacity:.9}}
body[data-reduce-motion=true] .mouse-hint *{animation:none!important}
@media(prefers-reduced-motion:reduce){.mouse-hint *{animation:none!important}}

/* One game-menu shell: no inherited right-edge application drawers. */
#panel:not([data-screen=pause]):not([data-screen=craft]):not([data-screen=workbench]):not([data-screen=guest]){
 position:fixed;inset:0;margin:auto;width:min(960px,calc(100vw - 80px));height:fit-content;max-height:calc(100dvh - 80px);max-width:none;
 padding:clamp(24px,3vw,48px);border:1px solid var(--ui-line);border-radius:12px;
 background:linear-gradient(145deg,#182528f5,#0d171df7);box-shadow:0 24px 100px #0008;
 overflow:auto;scrollbar-gutter:auto;animation:game-menu-in .18s ease-out;
}
#panel:not([data-screen=pause]):not([data-screen=craft]):not([data-screen=workbench]):not([data-screen=guest]) .panel-head{position:static;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;padding:0 0 16px;background:transparent}
#panel[data-screen=note] .panel-head{display:none!important}
#panel::backdrop{background:#03090ca8;backdrop-filter:blur(5px)}
#panel:is([data-screen=pause],[data-screen=craft],[data-screen=workbench]){animation:game-menu-in .18s ease-out}
@keyframes game-menu-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
@media(max-width:700px),(max-height:520px){
 #panel:not([data-screen=pause]):not([data-screen=craft]):not([data-screen=workbench]):not([data-screen=guest]){inset:0;margin:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
}
body[data-reduce-motion=true] #panel{animation:none!important}
@media(prefers-reduced-motion:reduce){#panel{animation:none!important}}

/* Short screens keep the recipe, preview and cost readable together.
   Actions stay in document flow so they cannot cover the cost or item name. */
#panel .craft-information .craft-action { position: static; }
@media (min-width:1051px) and (max-height:850px) {
  .craft-information { margin-top:0; align-self:start; }
  #panel .craft-information h3 { font-size:30px; }
  .craft-information .craft-type { margin:3px 0 12px; padding-bottom:10px; }
  .craft-information h4 { font-size:20px; margin:18px 0 8px; }
  .craft-cost th,.craft-cost td { padding:9px 6px; }
  .craft-cost thead th { font-size:17px; }
  #panel .craft-action { min-height:52px!important; font-size:18px; }
  .craft-reason { margin:10px 0 0; }
}
@media (min-width:651px) and (max-width:1050px) and (min-height:501px) {
  .craft-detail { overflow:auto; }
  .craft-information { max-height:none; overflow:visible; }
}
@media (min-width:651px) and (max-height:500px) {
  .craft-layout { grid-template-columns:minmax(180px,27%) minmax(0,1fr); gap:16px; }
  .craft-detail { grid-template-columns:minmax(100px,30%) minmax(0,1fr); align-content:stretch; align-items:stretch; gap:16px; }
  .craft-preview { height:100%; min-height:0; }
  .craft-information { overflow:auto; padding:0 4px 20px; }
  #panel .craft-information h3 { font-size:23px; }
  #panel .craft-information p { font-size:14px; }
  #panel .craft-cost { font-size:14px; }
  #panel .craft-cost th,#panel .craft-cost td { padding:6px 2px; }
  #panel .craft-action { font-size:16px; min-height:48px!important; }
}

/* Two fixed masked guests, framed in the same full-screen game interface. */
#panel[data-screen=guest] {position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;box-sizing:border-box;padding:clamp(20px,3vw,48px);border:0;border-radius:0;overflow:auto;background:linear-gradient(110deg,#0c151bf2,#15222bea);}
#panel[data-screen=guest] .panel-head {display:flex;position:static;align-items:center;justify-content:space-between;margin:0;padding:0;}
#panel[data-screen=guest] #panel-title {margin:12px 0;}
#panel[data-screen=guest] #panel-status:empty {display:none;}
#panel[data-screen=guest] #panel-body {overflow:auto;}
.guest-layout {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);align-items:center;min-height:0;gap:5vw;}
.guest-preview {height:calc(100dvh - 180px);min-height:180px;position:relative;}
.guest-preview canvas {display:block;width:100%;height:100%;}
.guest-choice {max-width:460px;}
.guest-options {display:flex;gap:12px;margin-bottom:24px;}
.guest-options button {flex:1;min-height:52px;border-radius:9px;}
#panel[data-screen=guest] .guest-options button[aria-pressed=true] {color:#f3fff0;border-color:#f3fff0;box-shadow:0 0 0 1px #f3fff0,0 0 12px #e1ffce60;background:#a9c8a530;}
#guest-loading {min-height:1.5em;font-size:14px;}
#enter-axio {min-height:52px;width:100%;}
@media(max-width:650px) { .guest-layout {display:flex;flex-direction:column;gap:8px;min-height:0;} .guest-preview {width:100%;height:46vh;min-height:210px;} .guest-choice {width:100%;} .guest-options {margin-bottom:0;} }
@media(min-width:651px) and (max-height:500px) { .guest-layout {min-height:0;gap:24px;} .guest-preview {height:60vh;min-height:180px;} .guest-options {margin-bottom:8px;} }

/* Asset completion only: no timed fill, smoothing or minimum display duration. */
#loading-status {width:100%;box-sizing:border-box;margin:4px 0 14px;padding:0 4px;color:#dce6df;font:13px/1.5 Arial,sans-serif;}
#loading-status[hidden] {display:none;}
.loading-caption {display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;}
#loading-count {font-variant-numeric:tabular-nums;white-space:nowrap;color:#bac9be;}
#loading-progress {display:block;appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:4px;overflow:hidden;background:#dce6df24;color:#d8ead3;}
#loading-progress::-webkit-progress-bar {background:#dce6df24;border-radius:4px;}
#loading-progress::-webkit-progress-value {background:#d8ead3;border-radius:4px;}
#loading-progress::-moz-progress-bar {background:#d8ead3;border-radius:4px;}

#water-return{position:fixed;inset:0;z-index:200;background:#000;opacity:0;pointer-events:none;transition:opacity .4s ease;}
#water-return.active{opacity:1;pointer-events:auto;}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-shell{display:flex;align-items:center;justify-content:center;padding:100px 20px 30px;min-height:100dvh;box-sizing:border-box}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-intro{display:none}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-form{width:min(520px,100%);border-radius:20px;padding:32px;box-sizing:border-box}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-step{position:static;font-size:12px;letter-spacing:.12em;margin:24px 0 12px}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-top>span{display:none}
#playtest-survey[data-mode=ending][data-stage=complete] .survey-nav{display:none}
#playtest-survey[data-stage=complete] .survey-top{border:0;padding:0;margin:0;height:0;min-height:0}
#playtest-survey[data-stage=complete] .survey-status:empty{display:none}
#note-close{display:inline-flex;align-items:center;gap:10px}
@media(max-width:700px){
  #panel[data-screen=note] .note-controls{background:#152125}
  #panel[data-screen=note] .note-controls #note-close span{display:inline-flex}
}
@media(max-height:560px){
  #playtest-survey[data-mode=ending][data-stage=complete] .survey-shell{align-items:flex-start;padding:80px 20px 16px}
  #playtest-survey[data-mode=ending][data-stage=complete] .survey-form{width:min(680px,100%);padding:20px 24px}
  #playtest-survey[data-mode=ending][data-stage=complete] .survey-step{margin:0 0 6px}
  #playtest-survey[data-stage=complete] #survey-title{margin:0 0 8px;font-size:24px}
  #playtest-survey[data-stage=complete] .survey-content{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  #playtest-survey[data-stage=complete] .survey-content p{grid-column:1/-1;max-width:none;margin:0;line-height:1.4}
  #playtest-survey[data-stage=complete] .completion-follow{padding:12px}
}

/* Recovery must stay above the game menu, including on narrow displays. */
#fatal{inset:0;margin:auto;width:min(520px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,4vw,36px);border:1px solid #c5d4cf66;border-radius:20px;background:#1b2329;color:#edf2ef;box-shadow:0 20px 80px #0009}#fatal::backdrop{background:#090e12d9}#fatal h2{font-size:clamp(24px,5vw,32px);margin:0 0 16px}#fatal p{line-height:1.6;margin:0 0 24px}#fatal-retry{min-height:48px;border-radius:12px;width:100%;background:#dce7df;color:#15211c}#fatal a{display:block;margin-top:20px;text-align:center}

@media(min-width:900px) and (max-height:850px){#panel[data-screen=pause][open]{padding:6vh 6vw}#panel[data-screen=pause] #panel-title{margin-bottom:20px}#panel[data-screen=pause] #panel-body{max-height:none;min-height:0;flex:1}#panel[data-screen=pause] .pause-footer{margin-top:18px;padding-top:16px}}

/* The title sound control opens a compact adjustment in the same menu material. */
#start .title-sound-wrap{position:relative;z-index:5;flex:none}
#start #title-sound{color:#f7f5ef}
#start #title-sound:hover,#start #title-sound:focus-visible{background:#f8f5ed;color:#111717;border-color:#f8f5ed}
#start .title-volume-popover{position:absolute;top:calc(100% - 1px);right:0;box-sizing:border-box;width:min(224px,calc(100vw - 24px));padding:14px 16px 16px;border:1px solid #f2eee057;border-radius:8px;background:#0c1010d6;color:#f7f5ef;box-shadow:0 12px 28px #0009;backdrop-filter:blur(9px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
#start .title-sound-wrap:hover .title-volume-popover,#start .title-sound-wrap:focus-within .title-volume-popover{opacity:1;visibility:visible;pointer-events:auto;transform:none}
#start .title-volume-popover label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d3d1ca;font:700 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.14em;white-space:nowrap}
#start .title-volume-popover output{color:#f7f5ef;font-variant-numeric:tabular-nums;letter-spacing:0}
#start #title-volume{display:block;box-sizing:border-box;appearance:none;-webkit-appearance:none;width:100%;height:6px;margin:19px 0 5px;border:0;border-radius:999px;background:linear-gradient(to right,#f2eee0 0 var(--volume-fill,35%),#f2eee044 var(--volume-fill,35%) 100%);cursor:pointer}
#start #title-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid #f2eee0;border-radius:50%;background:#0c1111;box-shadow:0 0 0 2px #0c1111,0 0 10px #f2eee077}
#start #title-volume::-moz-range-thumb{width:16px;height:16px;border:1px solid #f2eee0;border-radius:50%;background:#0c1111;box-shadow:0 0 0 2px #0c1111,0 0 10px #f2eee077}
#start #title-volume:focus-visible{outline:2px solid #f8dfb8;outline-offset:7px}
@media(max-width:440px){
 /* Keep the touch version beside the icon so it does not cover the title. */
 #start #title-sound,#start #title-gear{width:44px;height:44px}
 #start .title-volume-popover{top:0;right:calc(100% + 8px);width:min(180px,calc(100vw - 140px));padding:10px 12px 11px}
 #start .title-volume-popover label{font-size:9px;letter-spacing:.08em}
 #start #title-volume{height:30px;margin:4px 0 0;background-size:100% 6px;background-repeat:no-repeat;background-position:center}
 #start #title-volume::-webkit-slider-thumb{width:20px;height:20px}
 #start #title-volume::-moz-range-thumb{width:20px;height:20px}
}
@media(max-width:360px){#start .title-volume-popover{top:-12px}}
@media(max-width:300px) and (max-height:700px){
 #start .title-menu>button.menu-choice:not(#start-button){min-height:40px;padding:4px 18px;font-size:20px}
 #start .title-current-objective{margin-top:4px;padding-top:6px;font-size:14px}
 #start .title-current-objective strong{font-size:19px}
}
@media(min-width:900px) and (max-height:850px){
  body[data-tv=true] #start .title-current-objective{margin-top:4px;padding-top:8px;font-size:16px}
  body[data-tv=true] #start .title-current-objective strong{font-size:20px;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){#start .title-volume-popover{transition:none}}

/* A narrow keyboard/gamepad viewport needs two HUD rows. The wide vitals
   otherwise overflow the old 105px grid column into the hotbar and Inventory. */
@media(max-width:600px) and (orientation:portrait){
  body:not([data-input=touch]) #hud{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0 12px max(12px,env(safe-area-inset-bottom))}
  body:not([data-input=touch]) #hud .vitals{width:min(260px,100%);max-width:100%;padding:0}
  body:not([data-input=touch]) #hud .hotbar-wrap{width:100%;min-width:0;justify-content:flex-end;gap:8px}
  body:not([data-input=touch]) #hud #hotbar{min-width:0;max-width:calc(100% - 52px);overflow-x:auto;justify-content:flex-end}
  body:not([data-input=touch]) #hud #inventory-button{flex:0 0 44px;min-width:44px;padding:4px}
  body:not([data-input=touch]) #inventory-button span:last-child{display:none}
}
@media(max-width:360px) and (orientation:portrait){
  body:not([data-input=touch]) #hud .vitals{width:min(210px,100%)}
}

/* Placement instructions replace the objective on touch screens. The old
   centred hint crossed the joystick, action buttons and hotbar on phones. */
body[data-input=touch][data-building=true] #objective,
body[data-input=touch][data-building=true] #game-chat{visibility:hidden}
@media(max-width:600px) and (orientation:portrait){
  body[data-input=touch] #build-hint:not([hidden]){
    top:max(16px,env(safe-area-inset-top));
    left:max(16px,env(safe-area-inset-left));
    right:max(130px,env(safe-area-inset-right));
    width:auto;max-width:none;transform:none;
    z-index:20;text-align:left;align-items:stretch;
    gap:4px;padding:9px 10px;
  }
  body[data-input=touch] #touch-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  body[data-input=touch] #touch-build button{min-width:0;min-height:44px;padding:6px 3px;font-size:12px}
}
@media(orientation:landscape) and (max-height:500px){
  body[data-input=touch] #build-hint:not([hidden]){
    top:max(12px,env(safe-area-inset-top));left:50%;right:auto;
    width:min(320px,44vw);transform:translateX(-50%);
    z-index:20;gap:4px;padding:8px 10px;
  }
}