@import url("/design-tokens.css");

.district-error { padding:40px; color:white; background:#080a0d; min-height:100vh; }
:root { --black:var(--bryk-ink); --panel:var(--bryk-panel); --white:var(--bryk-white); --orange:var(--bryk-orange); --lime:var(--bryk-lime); --line:var(--bryk-line); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--white); background:#07090c; font-family:var(--bryk-font-display); letter-spacing:.035em; }
button,a { font:inherit; }
button { color:inherit; }
button:focus-visible,a:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.district-app { min-height:100vh; overflow-x:clip; background:radial-gradient(circle at 80% 10%,rgba(var(--district-rgb),.12),transparent 36rem),linear-gradient(180deg,#0d1115,#06080a); }
.district-topbar { position:sticky; z-index:80; top:0; min-height:68px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:12px clamp(16px,3vw,48px); border-bottom:1px solid var(--line); background:rgba(7,9,12,.95); backdrop-filter:blur(15px); }
.back-city { display:flex; align-items:center; gap:10px; color:white; text-decoration:none; font-size:9px; letter-spacing:.13em; }
.back-city img { width:58px; height:48px; object-fit:contain; object-position:left center; filter:drop-shadow(3px 4px 0 rgba(var(--district-rgb),.55)); }
.back-city span { display:grid; place-items:center; width:30px; height:30px; color:#090b0e; background:var(--district-color); font-size:17px; }
.district-breadcrumb { display:flex; align-items:center; gap:9px; color:#687078; font:700 8px/1 system-ui,sans-serif; letter-spacing:.13em; }
.district-breadcrumb b { color:var(--district-color); }
.district-breadcrumb i { width:3px; height:3px; border-radius:50%; background:#697078; }
.page-route-links { justify-self:end; display:flex; gap:5px; }
.page-route-links a { padding:9px 11px; color:#8c9399; border:1px solid var(--line); text-decoration:none; font-size:8px; font-weight:800; }
.page-route-links a:hover { color:white; border-color:white; }
.ux-tooltip { position:relative; display:inline-flex; align-items:center; margin-left:4px; vertical-align:middle; text-shadow:none; }
.ux-tooltip-trigger { display:grid!important; flex:0 0 auto!important; place-items:center; width:20px!important; min-width:20px!important; height:20px!important; min-height:20px!important; padding:0!important; border:1px solid rgba(255,255,255,.45)!important; border-radius:50%; color:#fff!important; background:rgba(6,9,11,.85)!important; cursor:help; font:italic 900 10px/1 Georgia,serif!important; letter-spacing:0!important; }
.ux-tooltip-trigger:hover,.ux-tooltip-trigger:focus-visible,.ux-tooltip.is-open .ux-tooltip-trigger { color:#07090c!important; border-color:var(--district-color)!important; background:var(--district-color)!important; }
.ux-tooltip-panel { position:absolute; z-index:60; left:50%; bottom:calc(100% + 10px); display:grid; gap:8px; width:min(340px,78vw); padding:15px 16px; transform:translate(-50%,5px); visibility:hidden; opacity:0; pointer-events:none; border:1px solid rgba(var(--district-rgb),.68); color:#e8eaeb; background:#0b0f12; box-shadow:10px 12px 28px rgba(0,0,0,.5); font:600 12px/1.55 system-ui,sans-serif; letter-spacing:.005em; text-align:left; text-transform:none; transition:opacity .16s ease,transform .16s ease,visibility .16s; }
.ux-tooltip-panel strong { color:var(--district-color); font:900 10px/1.2 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
.ux-tooltip-panel > span { color:#e3e6e8!important; font:600 12px/1.55 system-ui,sans-serif!important; letter-spacing:0!important; }
.ux-tooltip-panel em { color:#777f85; font:normal 700 9px/1.35 system-ui,sans-serif; }
.ux-tooltip-panel::after { content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px; transform:translateX(-50%) rotate(45deg); border-right:1px solid rgba(var(--district-rgb),.55); border-bottom:1px solid rgba(var(--district-rgb),.55); background:#0b0f12; }
.ux-tooltip:hover .ux-tooltip-panel,.ux-tooltip:focus-within .ux-tooltip-panel,.ux-tooltip.is-open .ux-tooltip-panel { visibility:visible; opacity:1; transform:translate(-50%,0); }
.find-counter .ux-tooltip-panel { top:calc(100% + 10px); right:0; bottom:auto; left:auto; transform:translateY(-5px); }
.find-counter .ux-tooltip:hover .ux-tooltip-panel,.find-counter .ux-tooltip:focus-within .ux-tooltip-panel,.find-counter .ux-tooltip.is-open .ux-tooltip-panel { transform:translateY(0); }
.find-counter .ux-tooltip-panel::after { top:-5px; right:6px; bottom:auto; left:auto; transform:rotate(225deg); }
.find-counter .ux-tooltip-panel { color:#e8eaeb; font:600 12px/1.55 system-ui,sans-serif; letter-spacing:0; }
.explore-controls .ux-tooltip { margin:0 3px; }

.district-explorer { padding:0; }
.explorer-view { position:relative; height:calc(100vh - 68px); min-height:620px; overflow:hidden; overscroll-behavior-x:contain; background:#030609; cursor:grab; touch-action:pan-y pinch-zoom; isolation:isolate; }
.explorer-view.is-pan-mode { touch-action:none; }
.explorer-view.is-dragging { cursor:grabbing; }
.scene-world { position:absolute; z-index:0; inset:0; transform-origin:center; will-change:transform; transition:none; contain:paint; }
.explorer-view.is-dragging .scene-world { transition:none; }
.scene-world > img { width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; filter:saturate(1.18) contrast(1.1) brightness(.98); animation:none; transform:none; backface-visibility:hidden; }
.scene-world::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.46; background:linear-gradient(125deg,rgba(var(--district-rgb),.18),transparent 34%,rgba(0,0,0,.16) 72%),radial-gradient(circle at 50% 40%,transparent 48%,rgba(0,0,0,.42)); mix-blend-mode:soft-light; }
.scene-world.is-signal-view > img { filter:saturate(1.08) contrast(1.12) brightness(.86); }
.signal-atmosphere { --signal-shift-x:0px; --signal-shift-y:0px; position:absolute; z-index:2; inset:-3%; display:none; overflow:hidden; pointer-events:none; transform:translate3d(var(--signal-shift-x),var(--signal-shift-y),0); transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.scene-world.is-signal-view .signal-atmosphere { display:block; }
.signal-atmosphere::before { content:""; position:absolute; inset:0; opacity:.32; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(var(--district-rgb),.11) 5px),radial-gradient(circle at 50% 50%,transparent 38%,rgba(0,0,0,.58)); }
.signal-atmosphere::after { content:""; position:absolute; left:-12%; top:-20%; width:124%; height:18%; opacity:0; background:linear-gradient(transparent,rgba(var(--district-rgb),.58),transparent); mix-blend-mode:screen; animation:districtSignalSweep 5.5s ease-in-out infinite; }
.signal-atmosphere i { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--district-color); box-shadow:0 0 17px var(--district-color); animation:signalDust 3.8s ease-in-out infinite; }
.signal-atmosphere i:nth-child(1) { left:19%; top:68%; animation-delay:-.8s; }.signal-atmosphere i:nth-child(2) { left:71%; top:28%; width:3px; height:3px; animation-delay:-2.1s; }.signal-atmosphere i:nth-child(3) { left:84%; top:76%; width:4px; height:4px; animation-delay:-3s; }
.signal-atmosphere span { position:absolute; right:22px; top:22px; width:62px; height:62px; border-top:1px solid var(--district-color); border-right:1px solid var(--district-color); opacity:.72; }
.hotspot-layer { z-index:2; }
.scene-world.is-media-fallback::after,.route-player.is-media-fallback::after,.character-visual.is-media-fallback::after { content:"POSTER FALLBACK // DISTRICT SIGNAL RESTORING"; position:absolute; z-index:4; right:12px; top:12px; padding:7px 9px; color:#07090b; background:var(--district-color); font:900 6px/1 system-ui,sans-serif; letter-spacing:.1em; }
.hotspot-layer { position:absolute; inset:0; transition:opacity .2s ease; }
.hotspot-layer.is-hidden { opacity:0; pointer-events:none; }
.street-artifact { position:absolute; width:74px; height:92px; padding:0; transform:translate(-50%,-50%) rotate(var(--artifact-rotate)); border:0; background:transparent; cursor:crosshair; }
.artifact-art { position:absolute; inset:8px 10px 12px; overflow:hidden; border:1px solid rgba(255,255,255,.16); background:#101419; box-shadow:4px 6px 0 rgba(0,0,0,.55); clip-path:polygon(12% 0,92% 8%,100% 77%,77% 100%,4% 90%,0 18%); }
.artifact-art img { width:100%; height:100%; object-fit:cover; opacity:.58; filter:grayscale(.72) saturate(.65) contrast(1.22) brightness(.68); transition:filter .2s ease,opacity .2s ease; backface-visibility:hidden; }
.is-figurine-artifact .artifact-art img { object-fit:cover; object-position:center 18%!important; }
.artifact-glint { position:absolute; right:8px; top:5px; width:7px; height:7px; border-radius:50%; opacity:.26; background:var(--district-color); box-shadow:0 0 10px rgba(var(--district-rgb),.55); animation:artifactGlint 7.5s ease-in-out infinite; }
.artifact-label { position:absolute; left:50%; top:calc(100% - 5px); min-width:88px; padding:5px 7px; transform:translateX(-50%) rotate(-2deg); opacity:0; color:#080a0d; background:var(--district-color); box-shadow:3px 3px #000; pointer-events:none; font:900 6px/1 system-ui,sans-serif; letter-spacing:.1em; white-space:nowrap; transition:opacity .16s ease; }
.street-artifact:hover .artifact-art img,.street-artifact:focus-visible .artifact-art img,.street-artifact.is-inspecting .artifact-art img { opacity:1; filter:saturate(1.12) contrast(1.08) brightness(.98); }
.street-artifact:hover .artifact-art,.street-artifact:focus-visible .artifact-art,.street-artifact.is-inspecting .artifact-art { border-color:var(--district-color); box-shadow:4px 6px 0 #000,0 0 20px rgba(var(--district-rgb),.65); }
.street-artifact:hover .artifact-label,.street-artifact:focus-visible .artifact-label,.street-artifact.is-inspecting .artifact-label,.street-artifact.is-found .artifact-label { opacity:1; }
.street-artifact.is-inspecting::after { content:""; position:absolute; inset:0; opacity:.72; pointer-events:none; background:radial-gradient(circle at 14% 24%,var(--district-color) 0 2px,transparent 3px),radial-gradient(circle at 82% 72%,var(--district-color) 0 3px,transparent 4px),linear-gradient(112deg,transparent 18%,rgba(var(--district-rgb),.55) 25% 73%,transparent 80%); clip-path:polygon(0 38%,12% 21%,25% 34%,40% 8%,55% 29%,70% 4%,87% 31%,100% 19%,91% 67%,100% 83%,72% 69%,61% 100%,45% 73%,28% 94%,17% 68%,3% 79%); }
.street-artifact.is-found .artifact-art { border-color:var(--lime); box-shadow:4px 6px 0 #000,0 0 17px rgba(185,242,39,.55); }
.street-artifact.is-found .artifact-art img { opacity:1; filter:saturate(1.05) brightness(.92); }
.street-artifact.is-found .artifact-label { background:var(--lime); }
.signal-lens-artifact { z-index:4; width:116px; height:116px; transform:translate(-50%,-50%); }
.signal-lens-artifact .signal-reticle { position:absolute; inset:12px; border:1px solid rgba(var(--district-rgb),.72); border-radius:50%; box-shadow:0 0 0 7px rgba(var(--district-rgb),.08),0 0 36px rgba(var(--district-rgb),.42); animation:districtReticlePulse 2.2s ease-in-out infinite; }
.signal-lens-artifact .signal-reticle::before,.signal-lens-artifact .signal-reticle::after { content:""; position:absolute; background:var(--district-color); box-shadow:0 0 10px var(--district-color); }
.signal-lens-artifact .signal-reticle::before { left:50%; top:-12px; bottom:-12px; width:1px; }.signal-lens-artifact .signal-reticle::after { left:-12px; right:-12px; top:50%; height:1px; }
.signal-lens-artifact .signal-reticle i { position:absolute; width:18px; height:18px; border-color:var(--district-color); border-style:solid; }
.signal-lens-artifact .signal-reticle i:first-child { left:2px; top:2px; border-width:2px 0 0 2px; }.signal-lens-artifact .signal-reticle i:nth-child(2) { right:2px; bottom:2px; border-width:0 2px 2px 0; }
.signal-lens-artifact .signal-reticle b { position:absolute; inset:34px; border-radius:50%; background:rgba(var(--district-rgb),.24); box-shadow:0 0 22px var(--district-color); }
.signal-lens-artifact .artifact-label { top:calc(100% + 4px); opacity:.72; }
.signal-lens-artifact:hover .artifact-label,.signal-lens-artifact:focus-visible .artifact-label,.signal-lens-artifact.is-inspecting .artifact-label,.signal-lens-artifact.is-found .artifact-label { opacity:1; }
.signal-lens-artifact.is-inspecting .signal-reticle { border-radius:3px; animation:districtReticleLock .55s steps(3,end) infinite; }
.signal-lens-artifact.is-found .signal-reticle { border-color:var(--lime); box-shadow:0 0 0 7px rgba(185,242,39,.11),0 0 40px rgba(185,242,39,.54); animation:none; }
.signal-lens-artifact.is-found .artifact-label { background:var(--lime); }
.explorer-view.has-signal-find::after { content:"SIGNAL VERIFIED"; position:absolute; z-index:30; inset:0; display:grid; place-items:center; pointer-events:none; color:#080a0d; background:rgba(var(--district-rgb),.7); clip-path:polygon(0 45%,100% 34%,100% 63%,0 74%); font:900 clamp(38px,8vw,112px)/1 system-ui,sans-serif; letter-spacing:-.04em; animation:signalFoundFlash 1.1s cubic-bezier(.2,.8,.2,1) both; }
.scene-grid { position:absolute; z-index:3; inset:0; pointer-events:none; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),radial-gradient(circle at center,transparent 40%,rgba(0,0,0,.58)); background-size:80px 80px,80px 80px,100% 100%; }
.scene-lock { position:absolute; z-index:4; inset:0; display:none; place-content:center; justify-items:center; pointer-events:none; background:rgba(15,18,21,.64); backdrop-filter:grayscale(1) blur(1px); }
.scene-lock.is-visible { display:grid; }
.scene-lock-icon { position:relative; width:70px; height:58px; margin-bottom:28px; border-radius:5px; background:#aeb3b7; box-shadow:0 6px 0 #31363b; }
.scene-lock-icon::before { content:""; position:absolute; left:14px; top:-39px; width:34px; height:42px; border:10px solid #aeb3b7; border-bottom:0; border-radius:28px 28px 0 0; }
.scene-lock b { font-size:24px; letter-spacing:.14em; text-shadow:3px 3px #000; }
.scene-lock small { margin-top:8px; color:#a1a6aa; font:700 8px/1 system-ui,sans-serif; letter-spacing:.15em; }
.district-title-card { position:absolute; z-index:5; left:clamp(20px,5vw,72px); bottom:110px; pointer-events:none; text-shadow:4px 4px 0 #000; }
.district-title-card > span { color:var(--district-color); font:800 10px/1 system-ui,sans-serif; letter-spacing:.18em; }
.district-title-card h1 { margin:10px 0 5px; font-size:clamp(54px,8vw,118px); line-height:.82; letter-spacing:-.045em; }
.district-title-card p { margin:0; font-size:15px; letter-spacing:.16em; }
.find-counter { position:absolute; z-index:6; right:clamp(18px,3vw,48px); top:32px; display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid rgba(255,255,255,.35); background:rgba(6,8,10,.75); backdrop-filter:blur(8px); }
.find-counter b { color:var(--district-color); font-size:16px; }
.find-counter > span:not(.ux-tooltip) { color:#9da3a8; font:800 7px/1 system-ui,sans-serif; letter-spacing:.13em; }
.hunt-brief { position:absolute; z-index:6; left:clamp(18px,3vw,48px); top:54px; display:grid; gap:5px; max-width:280px; padding:10px 12px; border-left:3px solid var(--district-color); background:rgba(4,7,9,.78); backdrop-filter:blur(8px); pointer-events:none; }
.hunt-brief b { color:var(--district-color); font:900 8px/1 system-ui,sans-serif; letter-spacing:.13em; }
.hunt-brief span { color:#c8cdd0; font:600 10px/1.45 system-ui,sans-serif; letter-spacing:.01em; }
.compass { position:absolute; z-index:5; right:clamp(18px,3vw,48px); bottom:100px; display:grid; place-items:center; width:56px; height:56px; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(5,7,9,.68); }
.compass i { width:2px; height:32px; background:linear-gradient(var(--district-color) 50%,#555 50%); transform:rotate(12deg); }
.compass b { position:absolute; top:-15px; color:#d7dade; font-size:8px; }
.explore-controls { position:absolute; z-index:8; left:50%; bottom:25px; display:flex; align-items:center; gap:5px; transform:translateX(-50%); padding:6px; border:1px solid rgba(255,255,255,.26); background:rgba(7,9,12,.88); backdrop-filter:blur(12px); }
.explore-controls button { min-width:44px; height:34px; padding:0 11px; border:1px solid transparent; background:transparent; color:#838a91; cursor:pointer; font-size:8px; font-weight:900; letter-spacing:.1em; }
.explore-controls button:hover { color:white; background:#171c21; }
.explore-controls .view-button.is-active { color:#090b0d; background:var(--district-color); }
.scene-pan-toggle { display:none; }
.scene-pan-toggle[aria-pressed="true"] { color:#090b0d; background:var(--district-color); }
.explore-controls .control-divider { width:1px; height:20px; margin:0 5px; background:var(--line); }
.explore-controls output { min-width:42px; color:#8b9298; font:700 8px/1 system-ui,sans-serif; text-align:center; }
.drag-hint { position:absolute; z-index:5; left:clamp(18px,3vw,48px); bottom:32px; margin:0; color:rgba(255,255,255,.58); font:700 7px/1 system-ui,sans-serif; letter-spacing:.14em; }
.district-film-pin { position:absolute; z-index:9; right:clamp(18px,3vw,46px); bottom:31px; display:flex; align-items:center; gap:11px; min-width:195px; padding:8px 13px 8px 8px; border:1px solid rgba(255,255,255,.5); background:rgba(5,7,10,.82); backdrop-filter:blur(10px); cursor:pointer; text-align:left; }
.district-film-pin > i { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--district-color); box-shadow:0 0 22px rgba(var(--district-rgb),.68); }
.district-film-pin > i::after { content:"▶"; margin-left:2px; color:#080a0d; font-size:11px; }
.district-film-pin span { display:grid; gap:5px; }.district-film-pin small { color:var(--district-color); font:800 6px/1 system-ui,sans-serif; letter-spacing:.11em; }.district-film-pin b { font-size:8px; letter-spacing:.1em; }

.district-info { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,7vw,110px); width:min(1500px,100%); margin:0 auto; padding:clamp(60px,8vw,120px) clamp(18px,4vw,70px); }
.kicker { margin:0 0 9px; color:var(--district-color); font:800 9px/1 system-ui,sans-serif; letter-spacing:.2em; }
.district-story h2,.route-copy h2,.finds-heading h2,.mini-map-copy h2 { margin:0; font-size:clamp(42px,5vw,76px); line-height:.88; letter-spacing:-.04em; }
.district-story > p:nth-of-type(2),.route-copy > p:nth-of-type(2),.mini-map-copy > p:nth-of-type(2) { max-width:760px; margin:26px 0; color:#9ea4a9; font:500 13px/1.75 system-ui,sans-serif; }
.signal-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:var(--line); gap:1px; }
.signal-grid span { display:grid; gap:8px; padding:18px; background:#0c1014; }
.signal-grid small { color:#646c73; font:700 7px/1 system-ui,sans-serif; letter-spacing:.12em; }
.signal-grid b { font-size:11px; }
.state-lab { align-self:start; padding:24px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(25,29,34,.96),rgba(9,11,14,.96)); }
.lab-heading { display:flex; justify-content:space-between; gap:15px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:9px; font-weight:800; letter-spacing:.13em; }
.lab-heading small { color:#697078; font:700 7px/1 system-ui,sans-serif; }
.state-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:16px; }
.state-switch button { min-height:42px; border:1px solid var(--line); background:#0a0d11; color:#7b8389; cursor:pointer; font-size:9px; font-weight:900; }
.state-switch button.is-active { color:#080a0d; border-color:var(--district-color); background:var(--district-color); }
.state-lab > p { color:#8e959b; font:500 10px/1.6 system-ui,sans-serif; }
.collector-tools { margin-top:16px; }
.collector-tools > summary { min-height:40px; display:grid; place-items:center; padding:0 12px; color:#cfd3d6; border:1px solid rgba(255,255,255,.22); background:#0a0d11; cursor:pointer; font:900 8px/1 system-ui,sans-serif; letter-spacing:.11em; list-style:none; }
.collector-tools > summary::-webkit-details-marker { display:none; }
.collector-tools[open] > summary { color:#080a0d; border-color:var(--district-color); background:var(--district-color); }
.export-actions { display:grid; gap:6px; }
.collector-tools .export-actions { margin-top:6px; }
.export-actions button,.route-actions button { min-height:40px; padding:10px 13px; border:1px solid rgba(255,255,255,.2); background:transparent; cursor:pointer; font-size:8px; font-weight:900; letter-spacing:.1em; }
.export-actions button:hover,.route-actions button:hover { color:#080a0d; border-color:var(--district-color); background:var(--district-color); }

.character-file { display:grid; grid-template-columns:minmax(300px,.72fr) 1.28fr; width:min(1500px,100%); min-height:520px; margin:0 auto; border-top:1px solid var(--line); border-left:1px solid var(--line); border-right:1px solid var(--line); background:linear-gradient(135deg,rgba(var(--district-rgb),.1),#080b0e 45%); }
.character-visual { position:relative; min-height:520px; overflow:hidden; background:radial-gradient(circle at 50% 32%,rgba(var(--district-rgb),.25),transparent 48%),#040609; }
.character-visual img { width:100%; height:100%; object-fit:contain; object-position:center; filter:saturate(1.06) contrast(1.04); animation:none; transform:none; backface-visibility:hidden; }.character-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,5,8,.92),transparent 42%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 5px); }
.character-visual span,.character-visual i { position:absolute; z-index:2; left:24px; }.character-visual span { top:24px; padding:8px 10px; color:#080a0d; background:var(--district-color); font:900 8px/1 system-ui,sans-serif; letter-spacing:.11em; box-shadow:5px 5px #000; }.character-visual i { bottom:24px; color:var(--district-color); font:normal 900 8px/1 system-ui,sans-serif; letter-spacing:.13em; }
.character-copy { align-self:center; padding:clamp(35px,7vw,110px); }.character-copy h2 { margin:0; font-size:clamp(62px,9vw,132px); line-height:.78; letter-spacing:-.055em; text-shadow:6px 6px #000; }.character-copy > p:nth-of-type(2) { max-width:650px; color:#9da4aa; font:500 12px/1.75 system-ui,sans-serif; }
.character-copy dl { display:grid; gap:1px; margin:25px 0; background:var(--line); }.character-copy dl div { display:grid; grid-template-columns:140px 1fr; gap:18px; padding:14px; background:#0b0e12; }.character-copy dt { color:#616a71; font:800 7px/1 system-ui,sans-serif; letter-spacing:.12em; }.character-copy dd { margin:0; font:900 9px/1 system-ui,sans-serif; }
.character-copy button { min-height:44px; padding:0 17px; color:#080a0d; border:1px solid var(--district-color); background:var(--district-color); cursor:pointer; font-size:8px; font-weight:900; letter-spacing:.11em; }

.district-route { display:grid; grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr); grid-template-rows:auto auto; gap:12px clamp(25px,5vw,80px); width:min(1680px,100%); margin:0 auto; padding:clamp(55px,7vw,105px) clamp(18px,4vw,70px); border-top:1px solid var(--line); }
.route-copy { align-self:center; }
.route-copy h2 span,.finds-heading h2 span { color:var(--district-color); }
.route-actions { display:flex; flex-wrap:wrap; gap:7px; }
.route-actions button:first-child { color:#080a0d; border-color:var(--district-color); background:var(--district-color); }
.route-actions button:disabled { opacity:.45; cursor:wait; }
.export-status { min-height:15px; margin-top:13px; color:var(--district-color); font:800 8px/1 system-ui,sans-serif; letter-spacing:.12em; }
.route-player { position:relative; min-height:520px; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.23); background:#030609; }
.route-player > .route-poster,.route-player > .route-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; backface-visibility:hidden; }
.route-player > .route-poster { z-index:0; filter:saturate(1.14) contrast(1.08) brightness(.86); transition:opacity .45s ease; animation:none; transform:none; }
.route-player > .route-film { z-index:1; filter:saturate(1.18) contrast(1.08) brightness(.94); transform:none; animation:none; }
.route-player.has-route-video > .route-poster { opacity:0; }
.route-player.is-route-fallback > .route-film { display:none; }
.route-player.is-reframing .route-film-grade { animation:routeReframeGrade .65s ease-out; }
.route-film-grade { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(var(--district-rgb),.16),transparent 38%),linear-gradient(0deg,rgba(0,0,0,.86),transparent 55%),radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.34)); }
.route-film-status { position:absolute; z-index:5; top:20px; left:20px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.28); background:rgba(3,6,9,.72); backdrop-filter:blur(10px); color:#dfe3e6; font:900 7px/1 system-ui,sans-serif; letter-spacing:.12em; }
.route-film-status i { width:7px; height:7px; border-radius:50%; background:var(--district-color); box-shadow:0 0 14px var(--district-color); }
.route-overlay { position:absolute; z-index:4; inset:auto 0 0; display:grid; padding:80px 25px 25px; pointer-events:none; background:linear-gradient(transparent,rgba(0,0,0,.88)); }
.route-overlay span { color:var(--district-color); font:800 8px/1 system-ui,sans-serif; letter-spacing:.14em; }
.route-overlay b { margin-top:6px; font-size:22px; }
.route-meter { position:absolute; z-index:6; inset:0 0 auto; height:3px; background:rgba(255,255,255,.12); }
.route-meter i { display:block; width:25%; height:100%; background:var(--district-color); box-shadow:0 0 12px var(--district-color); transition:width .3s ease; }
.route-strip { grid-column:2; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.route-thumb { position:relative; aspect-ratio:16/9; padding:0; overflow:hidden; border:1px solid var(--line); background:#080b0e; cursor:pointer; }
.route-thumb img { width:100%; height:100%; object-fit:cover; filter:grayscale(.55) saturate(.7) contrast(1.08) brightness(.56); animation:none; transform:none; transition:filter .35s ease; backface-visibility:hidden; }
.route-thumb:hover img,.route-thumb.is-active img { filter:saturate(1.15) contrast(1.08) brightness(.86); transform:none; }
.route-thumb.is-active { border-color:var(--district-color); }
.route-thumb span { position:absolute; inset:auto 6px 6px; display:grid; grid-template-columns:24px 1fr; align-items:center; gap:6px; min-height:27px; padding:3px 7px 3px 3px; color:#080a0d; background:var(--district-color); text-align:left; }
.route-thumb span b { display:grid; place-items:center; min-height:21px; border:1px solid rgba(0,0,0,.3); font-size:8px; }.route-thumb span small { overflow:hidden; font:900 6px/1.2 system-ui,sans-serif; letter-spacing:.04em; white-space:nowrap; text-overflow:ellipsis; }

.finds-section { width:min(1680px,100%); margin:0 auto; padding:clamp(65px,8vw,120px) clamp(18px,4vw,70px); border-top:1px solid var(--line); }
.finds-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.finds-heading-copy { max-width:620px; }
.finds-heading-copy > p { margin:0; color:#a6adb2; font:500 12px/1.7 system-ui,sans-serif; }
.finds-program-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.finds-program-meta span { padding:8px 10px; color:var(--district-color); border:1px solid rgba(var(--district-rgb),.42); background:rgba(var(--district-rgb),.07); font:900 7px/1 system-ui,sans-serif; letter-spacing:.11em; }
.finds-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.find-card { display:grid; grid-template-columns:minmax(180px,.9fr) 1.1fr; min-height:280px; padding:0; overflow:hidden; border:1px solid var(--line); background:#0d1115; text-align:left; cursor:pointer; }
.find-card > div { position:relative; overflow:hidden; }
.find-card img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.24) blur(4px); transform:none; transition:filter .35s ease,opacity .35s ease; backface-visibility:hidden; }
.find-card > div i { position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.035) 13px 14px); }
.find-card > span { display:flex; flex-direction:column; justify-content:center; padding:26px; }
.find-card small { color:var(--district-color); font:800 8px/1 system-ui,sans-serif; letter-spacing:.14em; }
.find-card b { margin-top:9px; font-size:26px; line-height:1; }
.find-card em { margin-top:12px; color:#6d757c; font:normal 700 8px/1 system-ui,sans-serif; letter-spacing:.1em; }
.find-card.is-found img { filter:saturate(1.05) brightness(.82); transform:none; }
.find-card:hover { border-color:var(--district-color); }
.find-card:hover img { filter:saturate(1.12) brightness(.9); transform:none; }

.district-mini-map { display:grid; grid-template-columns:1.35fr .65fr; min-height:600px; border-top:1px solid var(--line); background:#0a0d10; }
.mini-map-visual { position:relative; min-height:600px; overflow:hidden; }
.mini-map-visual img { width:100%; height:100%; object-fit:cover; filter:grayscale(.82) saturate(.72) brightness(.42) contrast(1.08); animation:none; transform:none; backface-visibility:hidden; }
.mini-map-visual > i { position:absolute; inset:0; clip-path:polygon(var(--shape)); background-image:linear-gradient(rgba(var(--district-rgb),.38),rgba(var(--district-rgb),.08)),url("/assets/bryk-city-map-master-v2.webp"); background-size:100% 100%; filter:saturate(1.45) brightness(1.1) drop-shadow(2px 0 var(--district-color)) drop-shadow(-2px 0 var(--district-color)) drop-shadow(0 2px var(--district-color)) drop-shadow(0 -2px var(--district-color)); }
.mini-map-visual > span { position:absolute; display:grid; place-items:center; width:54px; height:42px; transform:translate(-50%,-50%); color:#080a0d; background:var(--district-color); border:2px solid #fff; box-shadow:5px 5px #000; font-size:13px; font-weight:900; }
.mini-map-copy { align-self:center; padding:clamp(35px,5vw,80px); }
.neighbor-links { display:grid; gap:7px; }
.neighbor-links a { display:grid; padding:14px; color:white; border:1px solid var(--line); background:#0d1115; text-decoration:none; }
.neighbor-links a:hover { border-color:var(--district-color); }
.neighbor-links small { color:var(--district-color); font:800 7px/1 system-ui,sans-serif; letter-spacing:.12em; }
.neighbor-links b { margin-top:6px; font-size:12px; }
.neighbor-links span { margin-top:5px; color:#687078; font-size:8px; }
.map-return { display:inline-block; margin-top:16px; padding:13px 17px; color:#080a0d; background:var(--district-color); text-decoration:none; font-size:8px; font-weight:900; letter-spacing:.11em; }

.district-film-dialog { width:min(1280px,calc(100vw - 24px)); max-width:none; height:min(780px,calc(100vh - 24px)); max-height:none; padding:0; overflow:hidden; color:white; border:1px solid rgba(255,255,255,.35); background:#040609; box-shadow:0 40px 120px rgba(0,0,0,.88); }
.district-film-dialog::backdrop { background:rgba(0,0,0,.88); backdrop-filter:blur(10px); }.district-film-poster,.district-film-dialog video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:none; transform:none; backface-visibility:hidden; }.district-film-poster { z-index:0; filter:saturate(1.08) contrast(1.04); transition:opacity .2s ease; }.district-film-dialog video { z-index:1; opacity:0; background:transparent; transition:opacity .25s ease; }.district-film-dialog.has-video .district-film-poster,.district-film-dialog.is-awaiting-play .district-film-poster { opacity:0; }.district-film-dialog.has-video video,.district-film-dialog.is-awaiting-play video { opacity:1; }.district-film-dialog.is-poster-fallback video { opacity:0; }.district-film-shade { position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(3,5,8,.9),transparent 65%),linear-gradient(0deg,rgba(3,5,8,.9),transparent 52%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 5px); }
.district-film-status { position:absolute; z-index:3; top:22px; left:22px; margin:0; padding:7px 10px; color:#080a0d; background:var(--district-color); font:900 7px/1 system-ui,sans-serif; letter-spacing:.12em; }.district-film-dialog.is-loading .district-film-status::before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#080a0d; animation:filmSignal 1s steps(2,end) infinite; }
.district-film-copy { position:absolute; z-index:3; left:clamp(24px,5vw,70px); bottom:clamp(30px,7vw,85px); max-width:600px; }.district-film-copy span { color:var(--district-color); font:900 8px/1 system-ui,sans-serif; letter-spacing:.14em; }.district-film-copy h2 { margin:10px 0 8px; font-size:clamp(52px,8vw,108px); line-height:.8; letter-spacing:-.05em; text-shadow:6px 6px #000; }.district-film-copy p { color:#c4c8cb; font:600 11px/1.5 system-ui,sans-serif; }.district-film-copy button { min-height:40px; padding:0 15px; border:1px solid rgba(255,255,255,.38); background:rgba(3,5,8,.7); cursor:pointer; font-size:7px; font-weight:900; letter-spacing:.11em; }
.district-film-close { position:absolute; z-index:4; right:15px; top:15px; width:44px; height:44px; border:1px solid white; background:rgba(0,0,0,.65); cursor:pointer; font-size:25px; }

.find-dialog { width:min(1040px,calc(100vw - 26px)); max-width:none; height:min(620px,calc(100vh - 26px)); max-height:none; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.3); background:#080b0e; color:white; box-shadow:0 35px 100px rgba(0,0,0,.8); }
.find-dialog::backdrop { background:rgba(0,0,0,.84); backdrop-filter:blur(8px); }
.find-burst { position:absolute; z-index:7; inset:0; overflow:hidden; pointer-events:none; }
.find-burst i { position:absolute; left:50%; top:50%; width:11px; height:92px; opacity:0; background:var(--district-color); transform-origin:50% 180%; }
.find-burst i:nth-child(1) { --burst-angle:0deg; }.find-burst i:nth-child(2) { --burst-angle:58deg; }.find-burst i:nth-child(3) { --burst-angle:116deg; }.find-burst i:nth-child(4) { --burst-angle:174deg; }.find-burst i:nth-child(5) { --burst-angle:232deg; }.find-burst i:nth-child(6) { --burst-angle:300deg; }
.find-burst span { position:absolute; left:50%; top:50%; width:120px; height:120px; border:2px solid var(--district-color); border-radius:50%; opacity:0; transform:translate(-50%,-50%); }
.find-dialog.is-revealing .find-burst i { animation:findShardBurst .8s cubic-bezier(.15,.75,.2,1) both; }.find-dialog.is-revealing .find-burst span { animation:findRingBurst .95s ease-out both; }
.find-dialog.is-revealing .find-copy { animation:findCopyReveal .65s cubic-bezier(.2,.8,.2,1) .18s both; }
.find-image { position:absolute; inset:0 44% 0 0; overflow:hidden; }
.find-image img { width:100%; height:100%; object-fit:cover; animation:none; transform:none; backface-visibility:hidden; }
.find-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 65%,#080b0e); }
.find-copy { position:absolute; right:0; top:0; bottom:0; width:48%; display:flex; flex-direction:column; justify-content:center; padding:50px; }
.find-copy > span { color:var(--district-color); font:800 8px/1 system-ui,sans-serif; letter-spacing:.15em; }
.find-copy h2 { margin:10px 0; font-size:clamp(38px,5vw,68px); line-height:.86; letter-spacing:-.035em; }
.find-copy p { color:#aab0b4; font:500 12px/1.65 system-ui,sans-serif; }
.find-claim-box { display:grid; gap:7px; margin-top:10px; padding:13px; border:1px solid color-mix(in srgb,var(--district-color) 55%,transparent); background:rgba(var(--district-rgb),.07); }
.find-claim-box > small { color:var(--district-color); font:800 7px/1 system-ui,sans-serif; letter-spacing:.13em; }
.find-claim-box code { color:white; font:900 15px/1.2 system-ui,sans-serif; letter-spacing:.12em; }
.find-claim-box > div { display:flex; gap:5px; }
.find-claim-box button { min-height:32px; padding:0 10px; border:1px solid rgba(255,255,255,.25); background:transparent; color:white; cursor:pointer; font-size:7px; font-weight:900; letter-spacing:.08em; }
.find-claim-box button:last-child { color:#080a0d; border-color:var(--district-color); background:var(--district-color); }
.find-copy a { align-self:flex-start; margin-top:12px; padding:13px 16px; color:#080a0d; background:var(--district-color); text-decoration:none; font-size:8px; font-weight:900; letter-spacing:.1em; }
.find-close { position:absolute; z-index:5; right:15px; top:15px; width:42px; height:42px; border:1px solid white; background:rgba(0,0,0,.5); font-size:25px; cursor:pointer; }
footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding:17px clamp(18px,3vw,48px); color:#596168; border-top:1px solid var(--line); font-size:8px; font-weight:800; letter-spacing:.13em; }
footer > a { display:inline-flex; align-items:center; min-height:44px; color:#ff9a58; font-size:.875rem; text-decoration:none; }

@keyframes hotspotPulse { 0%,100% { box-shadow:0 0 0 rgba(var(--district-rgb),0); } 50% { box-shadow:0 0 25px rgba(var(--district-rgb),.8); } }
@keyframes artifactGlint { 0%,82%,100% { opacity:.2; filter:brightness(1); } 88% { opacity:.9; filter:brightness(1.8); } }
@keyframes routeReframeGrade { from { opacity:.35; background-color:rgba(var(--district-rgb),.3); } to { opacity:1; background-color:transparent; } }
@keyframes filmSignal { 50% { opacity:.28; } }
@keyframes districtSignalSweep { 0%,10% { top:-20%; opacity:0; } 22% { opacity:.58; } 72% { opacity:.24; } 85%,100% { top:110%; opacity:0; } }
@keyframes signalDust { 0%,100% { opacity:.12; transform:translate3d(0,8px,0) scale(.65); } 50% { opacity:.85; transform:translate3d(8px,-12px,0) scale(1.2); } }
@keyframes districtReticlePulse { 0%,100% { opacity:.52; transform:scale(.84) rotate(-4deg); } 50% { opacity:1; transform:scale(1.05) rotate(2deg); } }
@keyframes districtReticleLock { 0% { transform:scale(.9); } 100% { transform:scale(1.04); } }
@keyframes signalFoundFlash { 0% { opacity:0; transform:translateX(-16%); } 26%,66% { opacity:.94; transform:translateX(0); } 100% { opacity:0; transform:translateX(13%); } }
@keyframes findShardBurst { 0% { opacity:0; transform:translate(-50%,-50%) rotate(var(--burst-angle)) scaleY(.1); } 28% { opacity:.9; } 100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--burst-angle)) translateY(-190px) scaleY(1); } }
@keyframes findRingBurst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.3); } 30% { opacity:.85; } 100% { opacity:0; transform:translate(-50%,-50%) scale(5); } }
@keyframes findCopyReveal { from { opacity:0; transform:translateX(34px) rotate(1deg); } to { opacity:1; transform:none; } }

@media (max-width:1000px) {
  .district-breadcrumb { display:none; }
  .district-topbar { grid-template-columns:1fr auto; }
  .district-info,.district-mini-map { grid-template-columns:1fr; }
  .district-route { grid-template-columns:1fr; }
  .route-strip { grid-column:1; }
  .district-mini-map { min-height:0; }
  .mini-map-visual { min-height:520px; }
  .finds-grid { grid-template-columns:1fr; }
  .character-file { grid-template-columns:1fr; }.character-visual { min-height:460px; }.character-copy { padding:54px 35px; }
}

@media (max-width:680px) {
  .back-city b { display:none; }
  .back-city img { width:44px; height:44px; }
  .page-route-links a { padding:8px; font-size:7px; }
  .ux-tooltip-panel,.find-counter .ux-tooltip-panel { position:fixed; z-index:100; left:12px; right:12px; top:auto; bottom:72px; width:auto; transform:translateY(8px); }
  .ux-tooltip:hover .ux-tooltip-panel,.ux-tooltip:focus-within .ux-tooltip-panel,.ux-tooltip.is-open .ux-tooltip-panel,.find-counter .ux-tooltip:hover .ux-tooltip-panel,.find-counter .ux-tooltip:focus-within .ux-tooltip-panel,.find-counter .ux-tooltip.is-open .ux-tooltip-panel { transform:translateY(0); }
  .ux-tooltip-panel::after { display:none; }
  .explorer-view { height:78vh; min-height:540px; }
  .district-title-card { left:18px; right:18px; bottom:120px; }
  .district-title-card h1 { font-size:50px; }
  .hunt-brief { left:12px; top:48px; max-width:210px; padding:8px 10px; }
  .hunt-brief span { font-size:9px; }
  .street-artifact { width:62px; height:78px; }
  .artifact-label { min-width:78px; font-size:5px; }
  .drag-hint,.compass { display:none; }.district-film-pin { right:10px; bottom:72px; min-width:0; padding:7px; }.district-film-pin span { display:none; }
  .explore-controls { left:10px; right:10px; bottom:18px; transform:none; justify-content:center; gap:3px; overflow:visible; padding:5px; }
  .explore-controls .control-divider,.explore-controls output { display:none; }
  .explore-controls button { flex:0 0 auto; min-width:36px; padding:0 7px; }
  .explore-controls .view-button { min-width:52px; }
  .explore-controls #sceneReset { min-width:46px; }
  .scene-lock b { font-size:16px; }
  .district-info { padding:55px 14px; }
  .signal-grid { grid-template-columns:1fr; }
  .district-route,.finds-section { padding:55px 14px; }
  .route-player { min-height:360px; }
  .route-film-status { top:10px; left:10px; }
  .route-overlay { padding:70px 14px 18px; }
  .route-overlay b { font-size:17px; }
  .route-strip { grid-template-columns:repeat(2,1fr); }
  .finds-heading { align-items:start; flex-direction:column; }
  .find-card { grid-template-columns:1fr; min-height:390px; }
  .find-card > div { min-height:220px; }
  .mini-map-visual { min-height:390px; }
  .find-dialog { height:min(760px,calc(100vh - 20px)); }
  .find-image { inset:0 0 48% 0; }
  .find-image::after { background:linear-gradient(transparent 60%,#080b0e); }
  .find-copy { top:48%; width:100%; padding:28px; }
  .find-copy h2 { font-size:40px; }
  .character-file { min-height:0; }.character-visual { min-height:400px; }.character-copy { padding:44px 22px; }.character-copy h2 { font-size:58px; }.character-copy dl div { grid-template-columns:1fr; gap:8px; }
  .district-film-copy { left:20px; right:20px; bottom:25px; }.district-film-copy h2 { font-size:52px; }
  footer { display:grid; }
}

@media (max-width:420px) {
  .explore-controls .ux-tooltip,.explore-controls .view-button[data-view="map"] { display:none; }
  .explore-controls .view-button { min-width:48px; }
  .explore-controls button { padding:0 5px; font-size:7px; }
  .signal-lens-artifact { width:92px; height:92px; }
  .signal-lens-artifact .signal-reticle b { inset:27px; }
}

@media (prefers-reduced-motion:reduce) { html:not(.motion-ready) *,html:not(.motion-ready) *::before,html:not(.motion-ready) *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.motion-off .route-player > .route-film { animation:none!important; transform:none!important; }
 .motion-off .signal-atmosphere,.motion-off .signal-lens-artifact .signal-reticle,.motion-off .find-burst { animation:none!important; transform:none; }
@media (prefers-reduced-motion:reduce) { .route-player > .route-film { animation:none!important; transform:none!important; } }

/* District readability pass for labels, controls, clue files, and claim support. */
.back-city,.district-breadcrumb,.page-route-links a { font-size:11px; line-height:1.35; }
.district-title-card > span,.find-counter > span:not(.ux-tooltip),.hunt-brief b,.scene-lock small,.drag-hint { font-size:10px; line-height:1.4; }
.hunt-brief span { font-size:12px; line-height:1.5; }
.explore-controls button,.explore-controls output,.district-film-pin small,.district-film-pin b { font-size:11px; }
.district-story > p:nth-of-type(2),.route-copy > p:nth-of-type(2),.mini-map-copy > p:nth-of-type(2),.finds-heading-copy > p,.character-copy > p:nth-of-type(2) { color:#b9c0c5; font-size:14px; line-height:1.7; }
.signal-grid small,.lab-heading small,.character-copy dt,.route-film-status,.route-overlay span,.route-thumb span small,.finds-program-meta span { font-size:10px; line-height:1.35; }
.signal-grid b,.lab-heading,.state-lab > p,.character-copy dd { font-size:12px; line-height:1.45; }
.state-switch button,.collector-tools > summary,.export-actions button,.route-actions button,.character-copy button { font-size:11px; }
.artifact-label,.scene-world.is-media-fallback::after,.route-player.is-media-fallback::after,.character-visual.is-media-fallback::after { font-size:10px; }
.district-app .mason-launcher b { font-size:12px!important; }.district-app .mason-launcher small { font-size:9px!important; }
.district-app .mason-log article p { font-size:13px!important; line-height:1.58!important; }.district-app .mason-chips button,.district-app .mason-panel form button { font-size:10px!important; }
@media (max-width:420px) { .explore-controls button { font-size:10px; } }

/* Responsive district ergonomics: scroll-safe exploration, explicit touch panning, and safe-area-aware controls. */
.district-film-dialog { height:min(780px,calc(100dvh - 24px)); }
.find-dialog { height:min(620px,calc(100dvh - 26px)); }

@media (max-width:1000px) {
  .district-topbar {
    padding-top:max(10px,env(safe-area-inset-top));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-left:max(16px,env(safe-area-inset-left));
  }
  .page-route-links a { display:flex; align-items:center; justify-content:center; min-width:48px; min-height:44px; }
  .character-visual { min-height:clamp(420px,70vw,560px); }
  .scene-pan-toggle { display:block; }
}

@media (max-width:680px) {
  .district-topbar { min-height:64px; gap:8px; padding-right:max(10px,env(safe-area-inset-right)); padding-left:max(10px,env(safe-area-inset-left)); }
  .back-city { min-width:48px; min-height:44px; }
  .back-city img { width:52px; height:42px; }
  .page-route-links { gap:4px; }
  .page-route-links a { min-width:54px; min-height:44px; padding:7px 8px; font-size:10px; }
  .explorer-view { height:min(78svh,720px); min-height:480px; }
  .district-title-card { left:16px; right:78px; bottom:124px; }
  .district-title-card h1 { max-width:100%; font-size:clamp(42px,13vw,62px); overflow-wrap:anywhere; }
  .district-title-card p { font-size:12px; line-height:1.35; }
  .find-counter { top:14px; right:max(10px,env(safe-area-inset-right)); padding:9px 10px; }
  .explore-controls {
    align-items:center;
    justify-content:flex-start;
    min-height:54px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    padding:5px;
    scrollbar-width:none;
  }
  .explore-controls::-webkit-scrollbar { display:none; }
  .explore-controls button { flex:0 0 auto; min-width:44px; height:44px; padding-inline:9px; font-size:10px; touch-action:manipulation; }
  .explore-controls .view-button { min-width:58px; }
  .explore-controls #sceneReset { min-width:54px; }
  .district-film-pin { right:max(10px,env(safe-area-inset-right)); bottom:82px; min-width:44px; min-height:44px; touch-action:manipulation; }
  .district-info,.district-route,.finds-section { padding-right:max(14px,env(safe-area-inset-right)); padding-left:max(14px,env(safe-area-inset-left)); }
  .district-story h2,.route-copy h2,.finds-heading h2,.mini-map-copy h2 { font-size:clamp(38px,12vw,58px); overflow-wrap:anywhere; }
  .signal-grid span { min-width:0; padding:16px; }
  .signal-grid b { overflow-wrap:anywhere; }
  .state-switch button,.collector-tools > summary,.export-actions button,.route-actions button,.character-copy button { min-height:46px; touch-action:manipulation; }
  .route-player { min-height:clamp(300px,92vw,390px); }
  .route-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .route-thumb { min-height:72px; touch-action:manipulation; }
  .find-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:none; }
  .find-copy { padding:26px 22px max(26px,env(safe-area-inset-bottom)); overflow-y:auto; overscroll-behavior:contain; }
  .find-copy h2 { font-size:clamp(36px,11vw,48px); }
  .find-copy a,.find-claim-box button { display:flex; align-items:center; justify-content:center; min-height:44px; }
  .find-close { top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); width:44px; height:44px; }
  .character-visual { min-height:clamp(360px,112vw,470px); }
  .character-copy { padding:44px 20px; }
  .character-copy h2 { max-width:100%; font-size:clamp(52px,17vw,72px); overflow-wrap:anywhere; }
  .district-film-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .district-film-close { top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); }
  .district-film-copy { left:max(20px,env(safe-area-inset-left)); right:max(20px,env(safe-area-inset-right)); bottom:max(25px,env(safe-area-inset-bottom)); }
  footer { padding-right:max(14px,env(safe-area-inset-right)); padding-bottom:max(20px,env(safe-area-inset-bottom)); padding-left:max(14px,env(safe-area-inset-left)); line-height:1.55; }
}

@media (max-width:420px) {
  .explore-controls > span,.explore-controls output { display:none; }
  .explore-controls button { min-width:44px; padding-inline:6px; }
  .district-title-card { right:54px; }
  .find-counter > span:not(.ux-tooltip) { display:none; }
  .find-claim-box > div { display:grid; grid-template-columns:1fr; }
}

@media (max-width:960px) and (max-height:600px) and (orientation:landscape) {
  .explorer-view { height:calc(100dvh - 64px); min-height:430px; }
  .district-title-card { bottom:86px; }
  .district-title-card h1 { font-size:42px; }
  .explore-controls { bottom:10px; }
  .district-film-pin { bottom:66px; }
  .district-film-dialog,.find-dialog { width:calc(100vw - 12px); height:calc(100dvh - 12px); }
  .district-film-copy {
    top:max(64px,calc(env(safe-area-inset-top) + 54px));
    right:max(76px,calc(env(safe-area-inset-right) + 58px));
    bottom:max(12px,env(safe-area-inset-bottom));
    left:max(18px,env(safe-area-inset-left));
    max-height:none;
    padding-right:8px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .district-film-copy h2 { margin-block:7px; font-size:clamp(36px,6vw,54px); }
  .district-film-copy p { margin-block:7px; font-size:12px; line-height:1.45; }
  .district-film-copy button { min-height:44px; }
  .district-film-status { top:max(10px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); }
  .district-film-close,.find-close { top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); width:44px; height:44px; }
  .find-image { inset:0 55% 0 0; }
  .find-copy {
    top:0;
    right:0;
    bottom:0;
    width:58%;
    justify-content:flex-start;
    padding:max(64px,calc(env(safe-area-inset-top) + 54px)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) 20px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .find-copy h2 { margin-block:7px; font-size:clamp(30px,5vw,44px); }
  .find-copy p { margin-block:6px; font-size:11px; line-height:1.45; }
  .find-claim-box { gap:5px; margin-top:6px; padding:9px; }
  .find-claim-box button,.find-copy a { min-height:44px; }
  .find-copy a { margin-top:8px; }
}

@media (hover:none),(pointer:coarse) {
  .ux-tooltip-trigger { width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; }
  .explorer-view { touch-action:pan-y pinch-zoom; overscroll-behavior-x:contain; }
  .explorer-view.is-pan-mode { touch-action:none; }
  .scene-pan-toggle { display:block; }
  .explore-controls button { min-width:44px; height:44px; }
  .state-switch button,.collector-tools > summary,.route-actions button,.export-actions button,.character-copy button,.district-film-copy button,.find-claim-box button { min-height:44px; }
  .page-route-links a,.street-artifact,.explore-controls button,.state-switch button,.route-actions button,.export-actions button,.character-copy button { touch-action:manipulation; }
  .explore-controls button:hover,.find-card:hover,.neighbor-links a:hover { transform:none; }
}

/* Production refinement: let the district environment remain the hero. */
body { font-family:var(--bryk-font-ui); letter-spacing:0; }
.district-title-card h1,.district-section h2,.character-copy h2,.district-film-copy h2 { font-family:var(--bryk-font-display); }
.district-topbar { min-height:72px; border-color:var(--bryk-line); box-shadow:0 8px 30px rgba(0,0,0,.2); }
.district-title-card,.hunt-brief,.find-card,.character-sheet,.district-film,.route-card { border-color:var(--bryk-line); box-shadow:var(--bryk-shadow-soft); }
.district-title-card p,.hunt-brief p,.find-copy p,.character-copy p,.district-film-copy p { max-width:var(--bryk-reading-width); font-family:var(--bryk-font-ui); font-size:max(.9rem,14px); line-height:1.65; }
.page-route-links a,.district-breadcrumb,.artifact-label,.find-counter,.state-switch button { font-size:max(.68rem,11px); }
.explore-controls { border:1px solid var(--bryk-line); background:rgba(7,9,11,.8); box-shadow:0 12px 32px rgba(0,0,0,.28); backdrop-filter:blur(12px); }

@media (max-width:720px) {
  .district-title-card,.hunt-brief { box-shadow:0 14px 34px rgba(0,0,0,.28); }
}