:root {
  color-scheme: dark;
  --ivory: #f0eddf;
  --gold: #d0ba7d;
  --gold-bright: #e5d199;
  --muted: #b9c4b4;
  --subtle: #899d8b;
  --forest: #10251e;
  --glass: rgba(10, 27, 23, .91);
  --border: rgba(218, 199, 142, .24);
  --border-soft: rgba(218, 199, 142, .12);
  --safe-bottom: max(24px, env(safe-area-inset-bottom));
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: 14px;
  color: var(--ivory);
  accent-color: var(--gold);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0b1715; }
button, select, input, a { -webkit-tap-highlight-color: transparent; }
button, select, input { font: inherit; }
button, a, select, input { touch-action: manipulation; }
button { cursor: pointer; color: var(--ivory); border: 1px solid var(--border); background: var(--glass); border-radius: 4px; transition: background .16s, border-color .16s, color .16s; }
button:hover { background: #263d2d; border-color: var(--gold); }
button:disabled { opacity: .45; cursor: wait; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
button[aria-pressed="true"], button[aria-expanded="true"] { background: #3b472c; border-color: var(--gold); color: var(--gold-bright); }
a { color: var(--gold); }
[hidden] { display: none !important; }
.icon { width: 21px; height: 21px; display: inline-block; flex: 0 0 auto; vertical-align: middle; fill: none; }
#world-canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#world-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
.vignette { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 21, 19, .53), transparent 25%, transparent 63%, rgba(7, 19, 17, .58)); box-shadow: inset 0 0 120px rgba(8, 18, 16, .16); }
.eyebrow { font-size: 9px; letter-spacing: .23em; color: var(--gold); line-height: 1.6; }
.masthead { position: fixed; top: 25px; left: 30px; right: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; pointer-events: none; }
.brand { display: flex; gap: 11px; align-items: center; text-shadow: 0 2px 10px #0c211b; }
.brand-mark { width: 54px; height: 54px; object-fit: contain; }
.brand .eyebrow { font-size: 8px; letter-spacing: .3em; }
h1 { font: 400 24px/1.15 Georgia, "Times New Roman", serif; letter-spacing: .08em; margin: 4px 0 0; }
.brand p { font-size: 10px; letter-spacing: .12em; margin: 7px 0 0; color: var(--muted); }
.world-nav { display: flex; gap: 7px; pointer-events: auto; }
.world-nav button { height: 48px; min-width: 74px; display: flex; justify-content: center; align-items: center; gap: 7px; padding: 0 13px; font-size: 11px; backdrop-filter: blur(14px); }
.world-nav .icon { width: 19px; height: 19px; color: var(--gold); }
.world-nav .pause-trigger { min-width: 48px; padding: 0 12px; }
.world-nav .pause-trigger span { display: none; }
.quest-card { position: fixed; top: 121px; left: 30px; width: 294px; background: linear-gradient(135deg, rgba(14, 35, 27, .95), rgba(8, 23, 20, .87)); border: 1px solid var(--border); border-left: 2px solid var(--gold); padding: 16px 18px 12px; backdrop-filter: blur(14px); border-radius: 2px; box-shadow: 0 6px 30px rgba(0, 0, 0, .12); }
.quest-kicker { display: flex; align-items: center; gap: 7px; font-size: 9px; color: var(--gold); letter-spacing: .06em; }
.tiny-diamond { width: 4px; height: 4px; border: 1px solid var(--gold); transform: rotate(45deg); }
.quest-kicker b { margin-left: auto; font: 400 14px Georgia, serif; letter-spacing: .08em; }
.quest-heading { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.quest-heading .icon { color: var(--gold); width: 19px; height: 23px; }
.quest-heading h2 { font-size: 14px; font-weight: 500; margin: 0; letter-spacing: -.02em; }
.quest-card > p { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 9px 0 12px; }
.quest-dots { display: flex; gap: 5px; }
.quest-dots i { flex: 1; height: 2px; background: rgba(210, 195, 151, .16); }
.quest-dots i.found { background: var(--gold); box-shadow: 0 0 7px rgba(217, 190, 121, .35); }
.objective-row { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; margin-top: 12px; min-height: 15px; }
#objective-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#objective-distance { color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
#objective-bearing { color: var(--gold); font-size: 9px; white-space: nowrap; }
.region-caption { position: fixed; bottom: 88px; left: 30px; text-shadow: 0 2px 16px #10271d; pointer-events: none; }
.region-caption h2 { font-size: 29px; font-weight: 400; letter-spacing: -.03em; margin: 8px 0; }
.region-caption > p { color: var(--muted); font-size: 10px; letter-spacing: .04em; margin: 0; }
.region-caption .save-note { display: flex; align-items: center; gap: 5px; margin-top: 13px; color: #c3cfb9; font-size: 9px; letter-spacing: 0; }
.save-spark { width: 4px; height: 4px; background: #a6c7a5; border-radius: 50%; box-shadow: 0 0 7px #87aa76; }
.minimap-card { position: fixed; bottom: 24px; right: 30px; width: 183px; border: 1px solid var(--border); border-radius: 3px; background: var(--glass); padding: 11px 12px; backdrop-filter: blur(14px); }
.minimap-heading { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .06em; color: var(--gold); margin-bottom: 8px; }
.minimap-heading > span { display: flex; align-items: center; gap: 6px; }
.compass-north { font: 12px Georgia, serif; color: var(--gold-bright); }
.minimap-heading button { display: grid; place-items: center; min-width: 28px; min-height: 28px; background: transparent; border-color: transparent; font-size: 17px; }
.minimap-heading button:hover { border-color: var(--border); }
.map-ring { border: 1px solid var(--border); padding: 4px; border-radius: 50%; }
#minimap { display: block; width: 148px; height: 148px; border-radius: 50%; background: #183027; }
.map-legend { display: flex; gap: 11px; align-items: center; margin-top: 9px; font-size: 9px; color: var(--muted); }
.map-legend span { display: flex; gap: 5px; align-items: center; }
.map-legend i { width: 4px; height: 4px; background: var(--ivory); border-radius: 50%; }
.map-legend .relic-dot { background: var(--gold); border-radius: 0; transform: rotate(45deg); }
.map-scale { margin-left: auto; font-size: 8px; color: var(--subtle); }
.bottom-controls { position: fixed; bottom: 24px; left: 30px; display: flex; gap: 17px; align-items: center; font-size: 9px; color: var(--muted); }
.bottom-controls span { display: flex; gap: 4px; align-items: center; }
kbd { font: 9px/1.1 "SFMono-Regular", Consolas, monospace; border: 1px solid rgba(224, 218, 186, .27); border-radius: 2px; padding: 4px 5px; color: var(--ivory); background: rgba(11, 27, 22, .8); }
.action-buttons { position: fixed; bottom: 47px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 9px; }
.action-buttons button { width: 65px; height: 72px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 10px 6px 7px; border-radius: 5px; backdrop-filter: blur(14px); position: relative; }
.action-buttons .icon { color: var(--gold); width: 23px; height: 23px; }
.action-buttons span { color: var(--muted); font-size: 9px; margin-top: 6px; }
.action-buttons kbd { position: absolute; top: -9px; font-size: 7px; padding: 3px 4px; background: #172c21; }
.action-buttons .magic-action { height: 83px; width: 72px; border-color: rgba(218, 199, 142, .57); background: linear-gradient(135deg, rgba(55, 68, 36, .94), rgba(18, 36, 25, .95)); }
.magic-action .icon { width: 29px; height: 29px; }
.interaction-prompt { position: fixed; bottom: 150px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; border: 1px solid var(--gold); border-radius: 3px; background: rgba(12, 28, 21, .95); padding: 12px 17px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 25px rgba(0, 0, 0, .18); }
.interaction-prompt kbd { font-size: 12px; padding: 5px 8px; color: var(--gold-bright); }
.toast { position: fixed; top: 90px; left: 50%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none; padding: 13px 20px; width: max-content; max-width: min(520px, 84vw); border: 1px solid var(--gold); border-radius: 3px; background: rgba(12, 32, 23, .97); box-shadow: 0 10px 35px rgba(0, 0, 0, .22); font-size: 12px; text-align: center; line-height: 1.7; transition: opacity .2s, transform .2s; z-index: 15; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.subtitle-container { position: fixed; left: 50%; bottom: 193px; transform: translateX(-50%); width: min(560px, calc(100vw - 40px)); pointer-events: none; text-align: center; z-index: 6; }
#subtitle-text { display: inline-block; margin: 0; padding: 9px 15px; background: rgba(5, 18, 14, .87); color: var(--ivory); font-size: 13px; line-height: 1.8; border-radius: 3px; text-shadow: 0 1px 4px #091e14; }
.panel { position: fixed; right: 30px; top: 93px; bottom: 28px; width: 397px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(150deg, rgba(19, 39, 29, .98), rgba(8, 24, 20, .98)); border: 1px solid var(--border); border-radius: 4px; padding: 26px; backdrop-filter: blur(20px); box-shadow: 0 18px 80px rgba(0, 0, 0, .5); z-index: 10; scrollbar-width: thin; scrollbar-color: #526344 transparent; }
.panel::after { content: ""; position: absolute; top: 7px; left: 7px; width: 15px; height: 15px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); opacity: .45; pointer-events: none; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel-heading .eyebrow { font-size: 8px; letter-spacing: .19em; }
.panel-heading h2 { font-size: 24px; font-weight: 400; letter-spacing: -.035em; margin: 7px 0 0; line-height: 1.4; }
.panel-heading > button { min-width: 44px; height: 44px; padding: 10px; background: transparent; border-color: transparent; margin: -7px -9px 0 0; }
.panel-heading > button:hover { border-color: var(--border); }
.panel-heading > button .icon { width: 18px; height: 18px; color: var(--muted); }
.panel-intro { font-size: 12px; line-height: 1.9; color: var(--muted); margin: 22px 0; word-break: keep-all; }
.panel-footnote { border-top: 1px solid var(--border-soft); margin-top: 24px; padding-top: 16px; font-size: 10px; color: var(--subtle); line-height: 1.8; word-break: keep-all; }
.travel-button { display: block; width: 100%; padding: 17px 15px; min-height: 75px; text-align: left; margin-top: 10px; position: relative; background: linear-gradient(110deg, #1f392b, #142b21); }
.travel-button:nth-child(2) { background: linear-gradient(110deg, #423c26, #252c21); }
.travel-button:nth-child(3) { background: linear-gradient(110deg, #1c3940, #162e2c); }
.travel-button:nth-child(4) { background: linear-gradient(110deg, #343c34, #1b2c23); }
.travel-button b { display: block; font-size: 14px; font-weight: 500; margin-bottom: 9px; }
.travel-button small { font-size: 10px; color: var(--muted); }
.travel-button i { font-style: normal; float: right; color: var(--gold); margin-top: 6px; }
.camp-button, .wide-button { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; min-height: 45px; padding: 12px 14px; font-size: 12px; margin-top: 12px; }
.camp-button { margin-top: 18px; color: var(--gold); }
.camp-button .icon, .wide-button .icon { width: 18px; height: 18px; color: var(--gold); }
.button-arrow { margin-left: auto; color: var(--gold); }
.subtle-button { background: transparent; color: var(--muted); border-color: var(--border-soft); }
.field { display: block; font-size: 11px; color: var(--muted); margin-top: 21px; }
.field select { display: block; width: 100%; min-height: 46px; background: #1b3226; border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; color: var(--ivory); margin-top: 8px; font-size: 12px; }
.checkbox-field { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; margin-top: 2px; }
.checkbox-field input { width: 17px; height: 17px; margin: 0; }
.download-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 20px; padding: 13px; text-align: center; text-decoration: none; border: 1px solid var(--gold); border-radius: 3px; background: var(--gold); color: #16291e; font-size: 12px; font-weight: 500; }
.download-button:hover { background: var(--gold-bright); }
.download-button .icon { width: 18px; height: 18px; }
.guide-link { display: block; min-height: 44px; padding-top: 14px; color: var(--muted); font-size: 11px; text-align: center; text-decoration: none; }
.world-keepsake { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 15px; }
summary { min-height: 44px; cursor: pointer; color: var(--muted); font-size: 11px; padding: 10px 0; }
.asset-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 8px; font-size: 10px; color: var(--muted); }
.asset-summary b { display: block; font: 23px Georgia, serif; color: var(--gold); margin-bottom: 5px; }
.journal-prologue { display: flex; align-items: center; gap: 14px; border-left: 1px solid var(--gold); padding: 12px 14px; margin-top: 24px; background: rgba(188, 169, 113, .035); }
.journal-prologue .icon { width: 27px; height: 27px; color: var(--gold); }
.journal-prologue p { font-size: 11px; line-height: 1.9; color: var(--muted); margin: 0; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; margin-bottom: 12px; font-size: 10px; color: var(--gold); letter-spacing: .07em; }
.section-label > span { font-size: 8px; color: var(--subtle); }
.journal-objectives, #journal-list ol { list-style: none; padding: 0; margin: 0; }
.journal-entry { display: grid; grid-template-columns: 16px 1fr 38px; gap: 9px; align-items: start; position: relative; list-style: none; border: 1px solid var(--border-soft); border-left: 2px solid #687857; background: rgba(32, 52, 33, .4); padding: 14px 14px 14px 17px; margin-bottom: 11px; font-size: 12px; line-height: 1.8; }
.journal-entry[data-status="complete"], .journal-entry[data-status="collected"], .journal-entry[data-complete="true"] { border-left-color: var(--gold); background: rgba(80, 76, 40, .18); }
.journal-entry[data-status="locked"] { opacity: .65; }
.journal-entry h3, .journal-entry b, .journal-entry strong { margin: 0 0 6px; font-weight: 500; font-size: 13px; color: var(--ivory); }
.journal-entry p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.journal-entry small, .journal-region, .journal-hint { color: var(--muted); font-size: 10px; }
.journal-step-mark { color: var(--gold); font-size: 14px; }
.journal-status { text-align: right; white-space: nowrap; }
.journal-status, .entry-status { color: var(--gold); font-size: 9px; }
.empty-state { margin: 0; list-style: none; padding: 18px 10px; color: var(--subtle); font-size: 11px; line-height: 1.8; text-align: center; border: 1px dashed var(--border-soft); }
.inventory-items, #inventory-relics { display: grid; gap: 10px; }
.inventory-item { display: flex; align-items: center; gap: 13px; min-height: 90px; padding: 12px; border: 1px solid var(--border-soft); background: rgba(33, 50, 33, .35); font-size: 12px; }
.inventory-item > div { min-width: 0; flex: 1; }
.relic-status { color: var(--gold); font-size: 9px; white-space: nowrap; align-self: flex-start; padding-top: 4px; }
.inventory-item img { width: 55px; height: 55px; flex: 0 0 auto; }
.inventory-item[data-collected="false"] img { filter: grayscale(.7); opacity: .45; }
.inventory-item[data-collected="true"] { border-color: rgba(210, 187, 122, .43); background: linear-gradient(120deg, rgba(84, 81, 43, .28), rgba(26, 48, 31, .25)); }
.inventory-item h3, .inventory-item strong { display: block; font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.inventory-item p { font-size: 10px; line-height: 1.7; margin: 0; color: var(--muted); }
.inventory-item small { display: block; color: var(--gold); font-size: 9px; }
.inventory-item .status, .inventory-status { color: var(--gold); font-size: 10px; }
.companion-note { display: flex; align-items: center; gap: 12px; margin: 26px 0 15px; border-top: 1px solid var(--border-soft); padding-top: 20px; }
.companion-note b { font-size: 12px; font-weight: 500; }
.companion-note p { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 6px 0 0; }
.settings-group { border: 0; border-top: 1px solid var(--border-soft); padding: 19px 0 0; margin: 27px 0 0; min-width: 0; }
.settings-group legend { padding: 0 11px 0 0; color: var(--gold); font-size: 11px; }
.settings-group legend .icon { width: 17px; height: 17px; margin-right: 5px; }
.settings-group .field:first-of-type { margin-top: 0; }
.range-field { display: grid; grid-template-columns: 94px 1fr 29px; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); min-height: 44px; }
.range-field span { min-width: 0; }
.range-field output { font-size: 9px; text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.range-field input { min-width: 0; width: 100%; height: 26px; cursor: pointer; }
.field-note { margin: 10px 0 0; font-size: 10px; line-height: 1.8; color: var(--subtle); word-break: keep-all; }
.cache-status { display: block; margin-top: 14px; color: var(--gold); font-size: 10px; line-height: 1.8; }
.cache-progress { display: block; width: 100%; height: 5px; margin-top: 12px; accent-color: var(--gold); }
.cache-progress::-webkit-progress-bar { background: #263f2d; border-radius: 2px; }
.cache-progress::-webkit-progress-value { background: var(--gold); border-radius: 2px; }
.extra-settings { border-top: 1px solid var(--border-soft); margin-top: 26px; padding-top: 9px; }
.danger-button { color: #dcb1a0; border-color: rgba(174, 107, 78, .4); background: rgba(88, 44, 29, .13); }
#debug-stats { position: fixed; left: 30px; top: 308px; z-index: 4; color: #d4dec9; background: rgba(9, 24, 18, .95); border: 1px solid var(--border); padding: 13px; font: 10px/1.7 monospace; white-space: pre; border-radius: 3px; }
.touch-dpad { display: none; }
.modal-card { position: fixed; inset: 0; z-index: 18; display: grid; place-items: center; padding: 24px; background: rgba(6, 18, 14, .78); backdrop-filter: blur(8px); overflow-y: auto; overscroll-behavior: contain; }
.pause-content, .story-card { width: min(450px, 100%); text-align: center; padding: 33px 38px; border: 1px solid var(--border); border-radius: 4px; background: linear-gradient(145deg, #20382a, #0c2018); box-shadow: 0 20px 100px rgba(0, 0, 0, .45); }
.pause-content .eyebrow, .story-card > .eyebrow { display: block; }
.pause-crest { display: block; margin: 0 auto 18px; }
.pause-content h2, .story-card h2 { font-size: 25px; font-weight: 400; letter-spacing: -.04em; margin: 16px 0; }
.pause-content p, .story-card > p { color: var(--muted); font-size: 12px; line-height: 1.9; word-break: keep-all; }
.primary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; background: var(--gold); border-color: var(--gold); color: #1a2b20; padding: 13px 24px; font-size: 12px; font-weight: 500; border-radius: 3px; }
.primary-button:hover { background: var(--gold-bright); color: #102419; }
.primary-button .icon { width: 18px; height: 18px; }
.pause-content .primary-button, .story-card .primary-button { width: 100%; margin-top: 20px; }
.pause-content .pause-hint { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 9px; margin: 18px 0 0; }
.text-button { display: block; min-height: 44px; margin: 8px auto 0; padding: 10px 15px; background: transparent; border-color: transparent; color: var(--muted); font-size: 11px; }
.text-button:hover { background: transparent; color: var(--gold); border-color: transparent; }
.onboarding-steps { display: grid; gap: 12px; text-align: left; margin: 23px 0 4px; }
.onboarding-steps > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: center; padding: 11px 10px; border: 1px solid var(--border-soft); background: rgba(13, 29, 20, .35); }
.onboarding-steps .icon { grid-row: span 2; width: 23px; height: 23px; color: var(--gold); }
.onboarding-steps b { font-size: 11px; font-weight: 500; }
.onboarding-steps span { font-size: 10px; color: var(--muted); line-height: 1.6; }
.mobile-instruction { display: none; }
.completion-panel .story-card > img { display: block; margin: 0 auto 18px; }
.completion-note { border-top: 1px solid var(--border-soft); padding-top: 18px; margin-top: 22px; font-size: 11px !important; }
.loading-screen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; text-align: center; padding: 25px; background: radial-gradient(ellipse at 50% 32%, #254130, #0c1d17 67%, #071411); overflow-y: auto; }
.loading-screen.ready { background: linear-gradient(180deg, rgba(5, 18, 13, .64), rgba(6, 19, 14, .87)); backdrop-filter: blur(4px); }
.loading-landscape { position: absolute; inset: 0; pointer-events: none; background: url("assets/ui/forest-engraving.svg") center bottom / min(1200px, 155vw) auto no-repeat; opacity: .55; }
.loading-content { position: relative; width: min(700px, 100%); padding: 15px 0; }
.loading-kicker { font-size: 9px; letter-spacing: .3em; }
.loading-crest { display: block; margin: 24px auto 8px; width: 122px; height: 122px; filter: drop-shadow(0 0 22px rgba(215, 190, 125, .1)); }
.loading-screen h2 { font: 400 48px/1.1 Georgia, "Times New Roman", serif; letter-spacing: .08em; margin: 14px 0 0; color: var(--ivory); text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.loading-screen p { font-size: 12px; color: var(--muted); line-height: 1.9; }
.loading-screen .loading-tagline { font-size: 15px; letter-spacing: .26em; margin: 13px 0 0; color: var(--gold-bright); }
.title-rule { display: flex; align-items: center; gap: 16px; justify-content: center; width: 260px; max-width: 75vw; margin: 23px auto 0; color: var(--gold); }
.title-rule i { display: block; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border)); }
.title-rule i:last-child { transform: rotate(180deg); }
.title-rule span { font-size: 15px; }
.loading-screen .loading-story { margin: 18px 0 23px; font-size: 11px; letter-spacing: .02em; color: #c5ccb9; }
#loading-message { margin: 0; font-size: 10px; color: var(--subtle); }
.loading-track { height: 2px; background: rgba(125, 147, 107, .21); width: 280px; max-width: 75vw; margin: 15px auto 24px; }
.loading-track i { display: block; height: 100%; width: 5%; background: var(--gold); transition: width .3s; box-shadow: 0 0 9px rgba(215, 190, 125, .3); }
.start-actions { min-height: 49px; }
.start-actions .primary-button { min-width: 218px; }
.loading-screen .loading-note { font-size: 9px; letter-spacing: .07em; margin: 28px 0 0; color: var(--subtle); }
.loading-note span { margin: 0 10px; color: var(--gold); }
@media (max-width: 1100px) {
  .camera-hint { display: none !important; }
  .bottom-controls { gap: 10px; }
  .world-nav button { min-width: 64px; padding: 0 10px; }
  .quest-card { width: 269px; }
  .brand h1 { font-size: 22px; }
  .panel { width: 369px; }
  .minimap-card { width: 161px; padding: 9px; }
  #minimap { width: 131px; height: 131px; }
}
@media (max-width: 700px) {
  :root { --safe-bottom: max(22px, env(safe-area-inset-bottom)); }
  .masthead { top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; align-items: center; gap: 10px; }
  .brand { flex: 0 0 auto; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-copy { display: none; }
  .world-nav { gap: 4px; }
  .world-nav button, .world-nav .pause-trigger { min-width: 44px; width: 44px; height: 44px; padding: 10px; }
  .world-nav button span { display: none; }
  .world-nav .icon { width: 19px; height: 19px; }
  .quest-card { top: 83px; left: 16px; width: min(269px, calc(100vw - 32px)); padding: 12px 14px 10px; }
  .quest-kicker { font-size: 8px; }
  .quest-kicker b { font-size: 13px; }
  .quest-heading { margin-top: 9px; gap: 8px; }
  .quest-heading h2 { font-size: 12px; }
  .quest-heading .icon { width: 16px; height: 20px; }
  .quest-card > p { font-size: 10px; margin: 8px 0 9px; line-height: 1.7; }
  .objective-row { font-size: 9px; margin-top: 10px; }
  #objective-bearing { font-size: 8px; }
  .region-caption { bottom: 182px; left: 16px; width: calc(100vw - 163px); }
  .region-caption .eyebrow { font-size: 8px; letter-spacing: .17em; }
  .region-caption h2 { font-size: 23px; line-height: 1.3; margin: 7px 0; }
  .region-caption > p { font-size: 8px; line-height: 1.7; }
  .region-caption .save-note { font-size: 8px; margin-top: 8px; }
  .minimap-card { bottom: 175px; right: 16px; width: 120px; padding: 7px; }
  .minimap-heading { font-size: 7px; letter-spacing: 0; margin-bottom: 3px; }
  .minimap-heading > span { gap: 4px; }
  .compass-north { font-size: 10px; }
  .minimap-heading button { margin-right: -6px; font-size: 14px; min-width: 30px; min-height: 30px; }
  .map-ring { padding: 3px; }
  #minimap { width: 96px; height: 96px; }
  .map-legend { display: none; }
  .bottom-controls { display: none; }
  .action-buttons { left: auto; right: 16px; bottom: calc(var(--safe-bottom) + 7px); transform: none; gap: 6px; }
  .action-buttons button { min-width: 48px; width: 48px; height: 64px; padding: 9px 5px; }
  .action-buttons .magic-action { width: 52px; height: 72px; }
  .action-buttons .icon { width: 22px; height: 22px; }
  .action-buttons .magic-action .icon { width: 25px; height: 25px; }
  .action-buttons span { font-size: 8px; margin-top: 5px; }
  .action-buttons kbd { display: none; }
  .touch-dpad { position: fixed; display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 5px; left: 16px; bottom: var(--safe-bottom); }
  .touch-dpad button { min-width: 46px; min-height: 46px; font-size: 20px; font-weight: 300; touch-action: none; user-select: none; backdrop-filter: blur(12px); }
  .touch-dpad button.pressed { background: #465c37; border-color: var(--gold); }
  .touch-dpad [data-move="w"] { grid-column: 2; }
  .touch-dpad [data-move="a"] { grid-column: 1; grid-row: 2; }
  .touch-dpad [data-move="s"] { grid-column: 2; grid-row: 2; }
  .touch-dpad [data-move="d"] { grid-column: 3; grid-row: 2; }
  .interaction-prompt { bottom: 135px; padding: 10px 12px; font-size: 10px; max-width: calc(100vw - 32px); white-space: normal; }
  .interaction-prompt kbd { display: none; }
  .toast { top: 235px; width: calc(100% - 32px); max-width: none; padding: 11px 14px; font-size: 11px; }
  .subtitle-container { bottom: 331px; width: calc(100vw - 32px); }
  #subtitle-text { font-size: 11px; padding: 8px 12px; }
  .panel { top: 75px; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; padding: 22px; max-height: none; z-index: 10; }
  .panel-heading h2 { font-size: 22px; }
  .panel-heading .eyebrow { font-size: 7px; }
  .panel-intro { font-size: 11px; margin-top: 20px; }
  .modal-card { padding: 16px; }
  .pause-content, .story-card { padding: 27px 24px; }
  .pause-content h2, .story-card h2 { font-size: 23px; }
  .pause-content p, .story-card > p { font-size: 11px; }
  .desktop-instruction { display: none; }
  .mobile-instruction { display: inline; }
  .loading-screen { padding: 20px 16px; }
  .loading-content { padding: 10px 0; }
  .loading-kicker { font-size: 8px; letter-spacing: .2em; }
  .loading-crest { width: 104px; height: 104px; margin: 21px auto 8px; }
  .loading-screen h2 { font-size: clamp(27px, 8vw, 41px); letter-spacing: .035em; }
  .loading-screen .loading-tagline { font-size: 12px; margin-top: 13px; }
  .loading-story { margin-bottom: 18px !important; }
  .loading-screen .loading-note { font-size: 8px; }
  .loading-note span { margin: 0 7px; }
  .loading-landscape { opacity: .3; background-size: 185vw auto; }
  #debug-stats { top: 258px; left: 16px; max-width: calc(100vw - 32px); font-size: 8px; }
}
@media (max-width: 360px) {
  .masthead { left: 12px; right: 12px; gap: 5px; }
  .brand-mark { width: 32px; height: 32px; }
  .world-nav { gap: 3px; }
  .world-nav button, .world-nav .pause-trigger { width: 44px; min-width: 44px; }
  .touch-dpad { left: 12px; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
  .touch-dpad button { min-width: 44px; min-height: 44px; }
  .action-buttons { right: 12px; gap: 4px; }
  .action-buttons button { width: 44px; min-width: 44px; }
  .action-buttons .magic-action { width: 46px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .masthead { top: 17px; }
  .brand p { display: none; }
  .quest-card { top: 100px; }
  .region-caption { bottom: 66px; }
  .region-caption .save-note { margin-top: 6px; }
  .minimap-card { bottom: 16px; }
  .bottom-controls { bottom: 16px; }
  .panel { top: 79px; bottom: 18px; }
  .action-buttons { bottom: 30px; }
  .loading-crest { width: 84px; height: 84px; margin: 12px auto 3px; }
  .loading-screen h2 { font-size: 39px; }
  .loading-story { margin: 12px 0 !important; }
  .title-rule { margin-top: 13px; }
  .loading-screen .loading-note { margin-top: 18px; }
}
@media (max-height: 560px) and (max-width: 700px) {
  .quest-card { width: 220px; top: 74px; }
  .quest-card > p { display: none; }
  .quest-heading { margin-bottom: 9px; }
  .region-caption { display: none; }
  .minimap-card { bottom: 140px; width: 98px; }
  #minimap { width: 74px; height: 74px; }
  .minimap-heading > span { font-size: 0; }
  .compass-north { font-size: 9px; }
  .loading-crest { width: 70px; height: 70px; margin: 10px auto 0; }
  .loading-screen .loading-story, .loading-kicker { display: none; }
  .title-rule { margin-top: 13px; }
  .loading-screen .loading-note { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #dae2cd; --subtle: #c0cfb3; --border: rgba(230, 213, 166, .65); --border-soft: rgba(230, 213, 166, .4); --glass: rgba(5, 18, 13, .97); }
}