@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #17251f;
  --forest: #294238;
  --moss: #587060;
  --paper: #ebe9df;
  --paper-2: #f5f3e9;
  --line: #b9b9aa;
  --yellow: #d8b65b;
  --orange: #b7633b;
  --water: #83a6a2;
  --white: #fffef7;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background: #0e1814;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
body { margin: 0; min-height: 100dvh; background: #0e1814; }
button { font: inherit; }
.app { width: 100%; max-width: 1120px; min-height: 100dvh; margin: 0 auto; background: var(--paper); position: relative; overflow: hidden; padding-bottom: 76px; }
.topbar { height: 69px; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper); }
.agency-mark { display: flex; gap: 10px; align-items: center; }
.agency-mark img { width: 41px; height: 41px; }
.agency-mark span { display: block; font: 500 9px/1.2 "DM Mono", monospace; letter-spacing: .15em; color: #b9c4bb; }
.agency-mark strong { display: block; margin-top: 3px; font: 700 18px/1 Inter; letter-spacing: .06em; }
.icon-button { border: 1px solid #607169; background: transparent; color: var(--paper); width: 34px; height: 34px; border-radius: 50%; font: 500 16px "DM Mono"; cursor: pointer; }
.status-strip { min-height: 54px; display: grid; grid-template-columns: 1.2fr .9fr 1fr .9fr; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.status-item { padding: 9px 7px; border-right: 1px solid var(--line); min-width: 0; }
.status-item:last-child { border-right: 0; }
.status-item small { display: block; font: 500 8px/1.2 "DM Mono", monospace; letter-spacing: .1em; color: #6f776e; white-space: nowrap; }
.status-item strong { display: block; margin-top: 3px; font: 600 12px/1.1 Inter; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view { display: none; }
.view.active { display: block; }
.map-wrap { height: clamp(345px, 54dvh, 575px); position: relative; overflow: hidden; background: #cfd5c8; }
.world-map { width: 100%; height: 100%; display: block; filter: saturate(.84); }
.map-bg { fill: #d9d8c8; }
.water-shape { fill: #9eb9b3; opacity: .86; }
.mountain-zone { fill: #bbc0b2; opacity: .72; }
.forest-zone { fill: #aab9a2; opacity: .8; }
.contour { fill: none; stroke: #abb0a3; stroke-width: .35; opacity: .7; }
.trail { stroke: #fffdf1; stroke-width: 1.05; stroke-linecap: round; opacity: .95; }
.trail-shadow { stroke: #798779; stroke-width: 1.7; stroke-linecap: round; opacity: .46; }
.trail.active { stroke: var(--yellow); stroke-width: 1.5; stroke-dasharray: 2 1; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -3; } }
.map-node { cursor: pointer; }
.map-node circle { fill: var(--paper-2); stroke: var(--forest); stroke-width: .85; transition: .18s; }
.map-node:hover circle, .map-node.selected circle { fill: var(--yellow); stroke-width: 1.3; }
.map-node.locked circle { fill: #a6a79f; stroke-dasharray: 1 1; }
.map-node text { font: 600 2.5px Inter; fill: #26382f; paint-order: stroke; stroke: #e9e9df; stroke-width: .65px; stroke-linejoin: round; pointer-events: none; }
.terrain-glyph { font: 500 3.1px "DM Mono"; text-anchor: middle; pointer-events: none; }
.player-marker { pointer-events: none; filter: drop-shadow(0 1px 1px #20332888); }
.player-marker circle:first-child { fill: var(--ink); stroke: var(--white); stroke-width: .8; }
.player-marker circle:last-child { fill: var(--yellow); }
.camera-marker { fill: var(--orange); stroke: white; stroke-width: .5; }
.map-key { position: absolute; right: 11px; bottom: 9px; padding: 5px 7px; background: #eceaddd9; font: 500 8px "DM Mono"; letter-spacing: .08em; }
.map-key i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: var(--ink); border: 2px solid white; border-radius: 50%; vertical-align: -1px; }
.weather-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.weather-layer.rain, .weather-layer.heavy-rain, .weather-layer.storm { opacity: .45; background-image: repeating-linear-gradient(104deg, transparent 0 12px, #f4f7f3 13px 14px, transparent 15px 25px); animation: rain .7s linear infinite; }
.weather-layer.fog { opacity: .5; background: linear-gradient(170deg, transparent 10%, #f1f0e5 40%, transparent 75%); animation: fog 8s ease-in-out infinite alternate; }
.weather-layer.snow, .weather-layer.heavy-snow { opacity: .6; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 17px 19px; animation: snow 6s linear infinite; }
@keyframes rain { to { background-position: 18px 30px; } }
@keyframes snow { to { background-position: 12px 38px; } }
@keyframes fog { to { transform: translateX(8%); } }
.field-console { background: var(--paper); border-top: 3px solid var(--ink); min-height: 225px; padding: 14px 16px 20px; }
.location-line { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.location-line > div:first-child { min-width: 0; flex: 1; }
.location-line h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { margin: 0 0 5px; font: 500 9px/1.2 "DM Mono"; letter-spacing: .12em; color: #6e766d; text-transform: uppercase; }
.location-line h2, .panel-title h1 { margin: 0; font-size: 21px; line-height: 1.1; }
.fatigue { min-width: 116px; }
.fatigue label { display: flex; justify-content: space-between; font: 500 8px "DM Mono"; letter-spacing: .08em; }
.meter { height: 5px; margin-top: 5px; background: #c8c8bb; }
.meter i { display: block; height: 100%; background: var(--forest); transition: width .25s; }
.meter i.high { background: var(--orange); }
.route-select { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 13px 0; }
.route-select label { font: 500 9px "DM Mono"; letter-spacing: .08em; }
select { width: 100%; border: 1px solid #969b91; border-radius: 0; background: var(--paper-2); color: var(--ink); padding: 10px 34px 10px 10px; font: 600 13px Inter; }
select:disabled { opacity: 1; color: #59645d; background: #dddcd0; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.action-grid > * { min-width: 0; }
.stable-actions .hike-action { grid-column: 1 / -1; min-height: 52px; }
.stable-actions .hide-button { grid-column: 1 / -1; margin: 0; }
.sos-button { width: 100%; margin-top: 7px; padding: 7px; border: 1px solid #a2563c; background: transparent; color: #8f482f; font: 600 9px "DM Mono"; letter-spacing: .08em; cursor: pointer; }
.hide-button { width: 100%; min-height: 43px; margin-top: 7px; padding: 7px 12px; border: 1px solid #65776d; background: #d9ddd1; color: var(--ink); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.hide-button span { font-weight: 700; font-size: 11px; letter-spacing: .07em; }
.hide-button small { font: 500 8px "DM Mono"; color: #5e6b63; }
.hide-button:disabled { opacity: .38; cursor: not-allowed; }
.primary, .secondary, .text-button { min-height: 45px; border: 1px solid var(--ink); cursor: pointer; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.primary { background: var(--ink); color: var(--white); }
.primary:hover { background: #2d493d; }
.secondary { background: transparent; color: var(--ink); }
.secondary:hover { background: #dedccd; }
.primary:disabled, .secondary:disabled { opacity: .38; cursor: not-allowed; }
.wide { width: 100%; }
.event-log { margin-top: 13px; border-top: 1px solid var(--line); }
.event-row { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px solid #d2d1c5; font-size: 12px; }
.event-row time { flex: 0 0 43px; font: 500 9px "DM Mono"; color: #747a72; padding-top: 2px; }
.event-row.clue span { font-weight: 600; }
.event-row.reward span { color: #416144; font-weight: 700; }
.event-row.danger span { color: #984b33; font-weight: 600; }
.panel-view { min-height: calc(100dvh - 199px); padding: 19px 15px 28px; background: var(--paper); }
.panel-title { display: flex; align-items: end; justify-content: space-between; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.panel-title p { margin: 0; font: 500 10px "DM Mono"; color: #687169; }
.card-list { display: grid; gap: 10px; margin-top: 12px; }
.card { background: var(--paper-2); border: 1px solid var(--line); padding: 13px; }
.camera-card-head, .gear-head, .note-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.camera-card h2, .gear-card h2, .note-card h2 { margin: 0; font-size: 15px; }
.camera-card p, .gear-card p { margin: 5px 0 0; font-size: 11px; color: #626b63; }
.tag { background: #dde0d4; padding: 4px 6px; font: 500 8px "DM Mono"; letter-spacing: .06em; white-space: nowrap; }
.tag.new { color: var(--white); background: var(--orange); }
.capture-list { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.capture-thumb { aspect-ratio: 1.2; padding: 6px; border: 0; background: #18221d; color: #e6ede3; text-align: left; cursor: pointer; overflow: hidden; }
.capture-thumb small { display: block; font: 400 7px "DM Mono"; opacity: .65; }
.capture-thumb span { display: block; margin-top: 12px; font: 500 8px "DM Mono"; transform: rotate(-4deg); }
.camera-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.text-button { min-height: 32px; padding: 5px 8px; background: transparent; }
.empty { padding: 38px 18px; text-align: center; border: 1px dashed #a4a79d; color: #677068; }
.empty strong { display: block; color: var(--ink); margin-bottom: 6px; }
.note-card.unknown { opacity: .64; }
.note-grid { display: grid; grid-template-columns: 72px 1fr; gap: 5px 10px; margin: 13px 0 0; font-size: 11px; }
.note-grid dt { font: 500 9px "DM Mono"; color: #70776f; }
.note-grid dd { margin: 0; font-weight: 600; }
.confidence { display: flex; gap: 3px; }
.confidence i { display: block; width: 22px; height: 4px; background: #d3d4ca; }
.confidence i.on { background: var(--moss); }
.gear-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.gear-card button { min-width: 77px; }
.gear-card.owned { border-left: 4px solid var(--moss); }
.gear-card.locked { opacity: .65; }
.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1120px); height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); border-top: 1px solid #53645b; }
.bottom-nav button { position: relative; border: 0; background: transparent; color: #89988f; display: grid; place-content: center; justify-items: center; gap: 3px; cursor: pointer; }
.bottom-nav img { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: .82; }
.bottom-nav span { font: 500 8px "DM Mono"; letter-spacing: .09em; }
.bottom-nav button.active { color: var(--yellow); }
.bottom-nav button.active img { opacity: 1; }
.bottom-nav b { position: absolute; top: 8px; left: calc(50% + 9px); min-width: 16px; height: 16px; border-radius: 9px; background: var(--orange); color: white; font: 600 9px/16px Inter; }
dialog { color: var(--ink); }
.paper-dialog { width: 430px; max-width: calc(100vw - 30px); border: 0; padding: 28px 25px 23px; background: var(--paper-2); box-shadow: 0 18px 60px #0008; overflow-x: hidden; }
.specimen-help-dialog { width: 520px; max-height: min(90dvh, 760px); overflow-y: auto; }
dialog::backdrop { background: #0c1611c9; backdrop-filter: blur(2px); }
.paper-dialog h1 { margin: 0 0 13px; font-size: 26px; }
.paper-dialog p, .paper-dialog li { font-size: 13px; line-height: 1.5; }
.paper-dialog ol { padding-left: 20px; }
.paper-dialog li { margin-bottom: 6px; }
.memo { border-left: 3px solid var(--yellow); padding: 8px 10px; background: #e4e2d6; }
.briefing-goal { padding: 9px 11px; border: 1px solid #b8ad87; background: #e8e2cb; }
.hint-steps { margin: 17px 0; padding: 0 !important; list-style: none; counter-reset: hints; }
.hint-steps li { position: relative; padding: 0 0 12px 34px; counter-increment: hints; }
.hint-steps li::before { content: counter(hints); position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 500 10px/23px "DM Mono"; text-align: center; }
.hint-steps strong, .hint-steps span { display: block; }
.hint-steps span { margin-top: 2px; color: #545e57; }
.dialog-close { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 25px; cursor: pointer; }
.capture-dialog { width: 520px; max-width: calc(100vw - 22px); border: 0; padding: 0; background: #101713; color: #ebf1e7; box-shadow: 0 18px 60px #000b; }
.compact-dialog { width: 390px; }
.wait-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 18px; }
.wait-options button { min-height: 67px; padding: 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.wait-options strong, .wait-options small { display: block; }
.wait-options strong { font-size: 11px; }
.wait-options small { margin-top: 5px; font: 500 9px "DM Mono"; color: #697269; }
.encounter-dialog { width: 520px; max-width: calc(100vw - 22px); border: 1px solid #536158; padding: 0; background: #101713; color: #ebf1e7; box-shadow: 0 18px 60px #000b; }
.encounter-scene { min-height: 330px; padding: 27px 23px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: radial-gradient(circle at 50% 43%, #394a40, #111914 68%); }
.encounter-scene.compact { min-height: 250px; justify-content: center; }
.encounter-scene .eyebrow { color: #aebbb2; }
.encounter-scene h1 { margin: 4px 0 7px; font-size: 24px; }
.encounter-scene p { margin: 4px 0; font-size: 12px; color: #c0cbc3; }
.encounter-silhouette { position: absolute; inset: 20px 0 auto; text-align: center; font: 400 150px/1 serif; color: #080e0b; opacity: .73; transform: rotate(-7deg); }
.encounter-actions { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid #536158; }
.encounter-actions .secondary { border-color: #98a89e; color: #e6eee8; }
.encounter-actions .wide, .encounter-actions .bait-row, .encounter-actions .encounter-hint { grid-column: 1 / -1; }
.encounter-hint { margin: 0; font: 500 9px/1.4 "DM Mono"; color: #9caaa0; text-align: center; }
.bait-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 3px; }
.bait-row > small { width: 100%; font: 500 8px "DM Mono"; letter-spacing: .1em; color: #9ba99f; }
.bait-row button { flex: 1; min-height: 34px; font-size: 9px; }
.alert-row { display: flex; justify-content: space-between; margin: 16px 0 9px; font: 500 10px "DM Mono"; letter-spacing: .08em; color: var(--yellow); }
.timing-bar { height: 34px; position: relative; margin: 8px 3px 14px; border: 1px solid #809086; background: #26332b; }
.success-zone { position: absolute; inset-block: 0; background: #6f966b; box-shadow: inset 0 0 0 1px #a9c89e; }
.timing-bar b { position: absolute; z-index: 2; top: -6px; width: 4px; height: 46px; margin-left: -2px; background: #f3ead0; box-shadow: 0 0 7px #fff; }
.tap-button { min-height: 56px; }
.specimen-found { min-height: 340px; align-items: center; justify-content: center; text-align: center; }
.specimen-found img { width: 92px; height: 115px; filter: drop-shadow(0 10px 12px #0007); }
.specimen-case { margin-top: 16px; padding: 15px; color: #e7e5d9; background: #24322b; border: 7px solid #45564c; box-shadow: inset 0 0 0 1px #78847c, 0 4px 10px #1c29221f; }
.case-heading { display: flex; justify-content: space-between; align-items: end; padding-bottom: 12px; border-bottom: 1px solid #68766d; }
.case-heading .eyebrow { color: #96a49b; }
.case-heading h2 { margin: 0; font-size: 15px; }
.case-heading > strong { font: 500 13px "DM Mono"; color: var(--yellow); }
.case-tools { display: flex; align-items: center; gap: 9px; }
.case-tools > strong { font: 500 13px "DM Mono"; color: var(--yellow); }
.case-tools button { width: 28px; height: 28px; border: 1px solid #839087; border-radius: 50%; background: transparent; color: #f0ead5; font: 600 13px "DM Mono"; cursor: pointer; }
.case-intro { margin: 10px 0 0; color: #b8c2bb; font-size: 10px; line-height: 1.45; }
.specimen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding-top: 11px; }
.specimen-slot { min-width: 0; padding: 8px 4px; border: 1px solid #526158; background: #19241e; text-align: center; }
.specimen-slot:last-child { grid-column: 2; }
.scale-mount { height: 65px; display: grid; place-items: center; }
.scale-mount img { width: 39px; height: 54px; filter: drop-shadow(0 4px 4px #0008); }
.scale-mount i { width: 32px; height: 45px; display: block; border: 1px dashed #56665c; border-radius: 50% 50% 45% 45%; opacity: .55; }
.specimen-slot strong, .specimen-slot small { display: block; overflow: hidden; text-overflow: ellipsis; }
.specimen-slot strong { font: 500 8px "DM Mono"; letter-spacing: .05em; }
.specimen-slot small { margin-top: 3px; font: 400 7px "DM Mono"; color: #849088; }
.specimen-slot.collected { border-color: #967f45; background: #202a24; }
.office-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border: 1px solid var(--line); }
.office-stats span { padding: 9px 5px; border-right: 1px solid var(--line); text-align: center; font: 500 7px "DM Mono"; color: #6e766e; }
.office-stats span:last-child { border-right: 0; }
.office-stats b { display: block; margin-bottom: 3px; color: var(--ink); font: 700 14px Inter; }
.subheading { margin-top: 25px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.subheading h2 { margin: 0; font-size: 17px; }
.completion-dialog { text-align: center; }
.consequence-dialog { text-align: center; }
.consequence-mark { width: 54px; height: 54px; margin: 0 auto 15px; border: 3px solid var(--orange); border-radius: 50%; color: var(--orange); font: 700 29px/48px "DM Mono"; }
.consequence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 18px 0; }
.consequence-grid span { padding: 12px 6px; border: 1px solid var(--line); font: 500 8px "DM Mono"; color: #6d756e; }
.consequence-grid strong { display: block; margin-bottom: 3px; color: var(--ink); font: 700 13px Inter; }
.completion-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 18px 0; }
.completion-stats span { padding: 12px 6px; border: 1px solid var(--line); font: 500 8px "DM Mono"; color: #6d756e; }
.completion-stats strong { display: block; color: var(--ink); font: 700 20px Inter; }
.capture-photo { min-height: 370px; position: relative; padding: 21px; overflow: hidden; background: radial-gradient(circle at 45% 35%, #33453a, #111914 70%); }
.capture-photo::after { content: ''; position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.capture-stamp { position: relative; z-index: 2; font: 500 10px/1.5 "DM Mono"; letter-spacing: .06em; }
.evidence-word { position: absolute; z-index: 1; font-family: "DM Mono"; text-transform: uppercase; text-shadow: 0 0 7px #d9efdc66; }
.capture-controls { padding: 14px; border-top: 1px solid #536158; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.capture-controls .secondary { border-color: #a9b6ad; color: #e6eee8; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 84px; transform: translate(-50%, 16px); width: min(calc(100% - 30px), 400px); padding: 11px 14px; background: #111c17; color: white; text-align: center; font: 500 11px/1.4 "DM Mono"; opacity: 0; pointer-events: none; transition: .22s; box-shadow: 0 5px 25px #0006; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.settings { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }

@media (min-width: 760px) {
  .app { min-height: 900px; margin-top: 18px; margin-bottom: 18px; box-shadow: 0 20px 70px #0007; }
  #map-view.active { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, .9fr); }
  .map-wrap { height: calc(100dvh - 217px); min-height: 650px; }
  .field-console { border-top: 0; border-left: 3px solid var(--ink); min-height: 650px; max-height: calc(100dvh - 217px); overflow-y: auto; }
  .panel-view { padding-inline: max(24px, calc((100% - 820px) / 2)); }
  .card-list { grid-template-columns: repeat(2, 1fr); }
  .capture-list { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }