/* 3D view (assets/maps/relief.js → public/maps/js/relief.js): used by /maps and by the admin review of
   map requests (public/admin/admin.js). Needs the design tokens of public/sounds/styles.css. */
.relief-view { position: absolute; inset: 0; z-index: 1200; background: #05090d; overflow: hidden; }
.relief-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.relief-bar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 12px; background: rgba(6, 16, 25, 0.86); border: 1px solid var(--border); border-radius: 12px; color: var(--text); pointer-events: auto; }
.relief-title { font-family: var(--font-serif); font-size: 18px; }
.relief-exag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.relief-exag input { accent-color: var(--accent); width: 120px; }
.relief-close { margin-left: auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 16px; }
.relief-close:hover { border-color: var(--accent); color: var(--accent-hi); }
.relief-note { position: absolute; left: 12px; bottom: 12px; max-width: min(640px, calc(100% - 24px)); margin: 0; padding: 6px 10px; font-size: 12px; color: var(--text-muted); background: rgba(6, 16, 25, 0.8); border-radius: 8px; }
.relief-tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-size: 12px; color: var(--text); background: rgba(6, 16, 25, 0.94); border: 1px solid var(--border); border-radius: 10px; pointer-events: none; max-width: 260px; }
.relief-tip strong { font-size: 13px; }
.relief-tip span { color: var(--text-muted); }
.relief-count { font-size: 12px; color: var(--text-dim); }
.relief-pop { position: absolute; z-index: 3; width: 320px; max-height: calc(100% - 80px); overflow: auto; padding: 14px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border-hi, var(--border)); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
.relief-pop-x { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.relief-pop-x:hover { color: var(--accent-hi); }
.relief-veil { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: rgba(5, 9, 13, 0.82); color: var(--text-muted); font-size: 14px; letter-spacing: 0.04em; transition: opacity 0.2s; }
.relief-veil[hidden] { display: none; }
.relief-poi .relief-exag input[type="checkbox"] { accent-color: var(--accent); width: auto; }
/* The POI sheet overlays the stage's right edge: the 3D views stop at its left so their bar, popups and
   canvas stay fully visible and clickable (phones: the sheet is ≈ full width, the 3D view stays under it). */
@media (min-width: 641px) { body.maps-panel-open .relief-view { right: min(340px, 90vw); } }
.relief-title { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.maps-fullscreen .relief-view { right: 0; }
/* 3D view: speed, focus controls */
.relief-view:focus { outline: none; }
.relief-speed { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.relief-focus { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.relief-focus[hidden] { display: none; }
.relief-unfocus { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.relief-unfocus:hover { border-color: var(--accent); color: var(--accent-hi); }
.relief-layers-wrap { position: relative; display: inline-flex; }
.relief-layers { position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; min-width: 220px; padding: 10px 12px; background: rgba(6, 16, 25, 0.95); border: 1px solid var(--border); border-radius: 10px; }
.relief-layers[hidden] { display: none; }
.relief-layers small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.relief-exag input[type="checkbox"] { accent-color: var(--accent); width: auto; }
.relief-share, .relief-fs { margin-left: 0; font-size: 15px; }
.relief-share { margin-left: auto; }
.relief-share ~ .relief-close { margin-left: 0; }
.relief-view:fullscreen { right: 0 !important; }
/* HUD: compass strip alone at the top; on the right a slim column: minimap, info line, icon buttons */
.relief-compass { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 33.3%; min-width: 240px; height: 24px; z-index: 2; pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(6, 16, 25, 0.55) 18%, rgba(6, 16, 25, 0.55) 82%, transparent); border-radius: 6px; }
.relief-compass canvas { display: block; width: 100%; height: 100%; }
.relief-side { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.relief-mini { pointer-events: auto; cursor: crosshair; width: 180px; height: 180px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.relief-mini canvas { display: block; width: 100%; height: 100%; }
.relief-info { max-width: 180px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 8px; font-size: 11px; color: var(--text-muted); background: rgba(6, 16, 25, 0.6); border-radius: 8px; text-align: right; }
.relief-info .relief-title { font-family: var(--font-serif); font-size: 14px; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relief-tools { display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.relief-tools .relief-focus { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.relief-tools .relief-focus[hidden] { display: none; }
.relief-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 9px; cursor: pointer;
	background: rgba(6, 16, 25, 0.82); border: 1px solid var(--border); color: var(--text); font-size: 15px; }
.relief-tool:hover { border-color: var(--accent); color: var(--accent-hi); }
.relief-tool input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.relief-tool:has(input:checked), .relief-tool[aria-expanded="true"] { background: rgba(52, 211, 153, 0.18); border-color: var(--accent); color: var(--accent-hi); }
.relief-tools .relief-layers-wrap { position: relative; display: block; }
.relief-tools .relief-layers { top: 0; left: auto; right: calc(100% + 8px); }
.relief-tools .relief-layers strong { font-size: 13px; color: var(--text); }
.relief-view .relief-note { bottom: 12px; }
.relief-view .relief-note[hidden] { display: none; }
@media (max-width: 640px) { .relief-mini { width: 120px; height: 120px; } .relief-info { max-width: 120px; } }
/* performance panel */
.relief-perf { min-width: 260px; }
.relief-perf em { font-style: normal; font-size: 12px; color: var(--accent-hi); }
.relief-perf-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.relief-perf-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relief-perf-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.relief-perf-btn:hover { border-color: var(--accent); color: var(--accent-hi); }
/* start picker: where to start (spawn point or compound) */
.relief-start { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 9, 13, 0.62); }
.relief-start-card { position: relative; width: min(620px, 100%); max-height: 100%; overflow: auto; padding: 18px 18px 14px; background: var(--surface); border: 1px solid var(--border-hi, var(--border)); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); color: var(--text); }
.relief-start-card h3 { margin: 0 0 4px; font-family: var(--font-serif); font-size: 22px; }
.relief-start-card p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; }
.relief-start-x { position: absolute; top: 10px; right: 10px; background: none; border: 0; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.relief-start-x:hover { color: var(--accent-hi); }
.relief-start-map { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #0a1118; }
.relief-start-map img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.relief-start-sp { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #05090d; background: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35); cursor: pointer; padding: 0; }
.relief-start-sp:hover, .relief-start-sp:focus-visible { transform: scale(1.35); background: #a7f3d0; }
.relief-start-cp { position: absolute; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(229, 231, 235, 0.35); background: rgba(6, 16, 25, 0.72); color: #f3f4f6; font: 600 11px system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.relief-start-cp:hover, .relief-start-cp:focus-visible { border-color: var(--accent); color: var(--accent-hi); z-index: 1; }
.relief-start-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
.relief-start-foot small { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 640px) { .relief-start-cp { font-size: 9px; padding: 1px 4px; } }
.relief-tip .relief-tip-pr { color: var(--accent-hi); }
/* touch screens: on-screen stick + up / down */
.relief-joy { position: absolute; left: 18px; bottom: 18px; z-index: 3; width: 110px; height: 110px; border-radius: 50%; background: rgba(6, 16, 25, 0.45); border: 1px solid rgba(229, 231, 235, 0.35); touch-action: none; }
.relief-joy-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(52, 211, 153, 0.55); border: 1px solid rgba(229, 231, 235, 0.6); pointer-events: none; }
.relief-updown { position: absolute; left: 140px; bottom: 18px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.relief-updown button { width: 44px; height: 44px; border-radius: 10px; background: rgba(6, 16, 25, 0.6); border: 1px solid rgba(229, 231, 235, 0.35); color: #f3f4f6; font-size: 16px; touch-action: none; }
.relief-tip .relief-tip-ct { color: #fbbf24; }
.relief-page-tool { position: relative; color: var(--accent-hi); border-color: var(--accent); }
.relief-tool-badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #05090d; font: 700 10px/16px system-ui, sans-serif; }