/* CSS entrypoint.
   build.ps1 concatenates the ordered files from src/ui/styles/ to preserve the
   historical cascade while keeping maintenance thematic. Numbered domain
   sublayers such as 23-00 through 23-z must retain their lexical order. */


/* Core application shell and shared design tokens.
   Later CSS layers assume these variables, map containers, panels and common
   controls exist, so keep broad visual primitives here instead of in feature
   layers. */

:root {
    --sand-1: rgba(248, 240, 218, 0.95);
    --sand-2: rgba(229, 214, 177, 0.92);
    --panel-compositor-base: #e5d6b1;
    --ink: #2b2418;
    --forest: #324f45;
    --wine: #7b3f2d;
    --gold: #a77918;
    --premium-gold-border-sweep:
        linear-gradient(
            110deg,
            rgba(166, 111, 36, 0.2) 0%,
            rgba(255, 213, 109, 0.72) 24%,
            rgba(255, 247, 204, 0.95) 38%,
            rgba(197, 137, 42, 0.7) 52%,
            rgba(255, 224, 132, 0.9) 68%,
            rgba(166, 111, 36, 0.2) 100%
        );
    --shadow: rgba(24, 19, 10, 0.32);
    --map-selection-ring: rgba(50, 79, 69, 0.96);
    --map-selection-ring-soft: rgba(50, 79, 69, 0.32);
    --map-selection-core: rgba(255, 249, 232, 0.98);
    --map-selection-shadow: rgba(24, 19, 10, 0.34);
    --map-inner-vignette:
        radial-gradient(ellipse at center, rgba(24, 19, 10, 0) 46%, rgba(24, 19, 10, 0.08) 72%, rgba(24, 19, 10, 0.24) 100%),
        linear-gradient(90deg, rgba(24, 19, 10, 0.3), rgba(24, 19, 10, 0.02) 11%, rgba(24, 19, 10, 0) 18%, rgba(24, 19, 10, 0) 82%, rgba(24, 19, 10, 0.02) 89%, rgba(24, 19, 10, 0.3)),
        linear-gradient(180deg, rgba(24, 19, 10, 0.20), rgba(24, 19, 10, 0) 12%, rgba(24, 19, 10, 0) 88%, rgba(24, 19, 10, 0.20));
    --scrollbar-track: rgba(191, 168, 118, 0.18);
    --scrollbar-track-strong: rgba(176, 149, 95, 0.24);
    --scrollbar-thumb: rgba(140, 108, 49, 0.54);
    --scrollbar-thumb-hover: rgba(111, 82, 31, 0.72);
    --scrollbar-thumb-border: rgba(255, 248, 235, 0.72);
    --surface-card-bg: rgba(255, 250, 237, 0.65);
    --surface-card-bg-strong: rgba(255, 250, 237, 0.72);
    --surface-card-border: rgba(88, 69, 37, 0.12);
    --section-heading-color: rgba(43, 36, 24, 0.65);
    --subsection-heading-color: rgba(110, 88, 52, 0.62);
    --hud-gap: 18px;
    --hud-top-edge-gap: 18px;
    --hud-top-side-gap: clamp(24px, 2.75vw, 56px);
    --hud-sidebar-width: 286px;
    --hud-panel-top: 88px;
    --hud-panel-width: 360px;
    --ui-compact-control-size: 34px;
    --top-bar-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --rotation-handle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M248.91 50a205.9 205.9 0 0 1 35.857 3.13c85.207 15.025 152.077 81.895 167.102 167.102 15.023 85.208-24.944 170.917-99.874 214.178-32.782 18.927-69.254 27.996-105.463 27.553-46.555-.57-92.675-16.865-129.957-48.15l30.855-36.768a157.846 157.846 0 0 0 180.566 15.797 157.846 157.846 0 0 0 76.603-164.274A157.848 157.848 0 0 0 276.429 100.4a157.84 157.84 0 0 0-139.17 43.862L185 192H57V64l46.34 46.342C141.758 71.962 194.17 50.03 248.91 50z'/%3E%3C/svg%3E");
    --pile-poil-cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAABACAYAAABcIPRGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAhgSURBVGhD7VlbTBvZGT4ezxhfweaaQLiFpCGXVbeqKu1Lq6ovVfvUlapKK/WpfezDdtU+9CFatU9V2626qKtKW5IAa8c3zDUBG2NjG4MxhjS7K6rd7FaJIOEWDAbb4WLMfNWZgeBMnBQSO8uqfNKn8cx//vP/3/nnnDMzJuQQmLYoTse7lOZEu+L+mo2dTvQqWh+Yla9L2x1JrNh1hXEH64FXDjgZoF8GeBlsdbGf329VvSZtf+SwbFX9cqeXBfpkwA0ispeKkCPu4IxTH+g1Up8jhUVTkVEY+Zs08QwOECQczOyDNvVZqc+Rwvx17XX0ZxHgIki0Mw/nrnLnpT5HCvNmbfYKOAnidmb+XjPXKPU5UsgUwPfuc0/AnSMvwKQ2wikD+nYnMCWthku2WwFyxAWY1UaarFCFPvk+3XsCvg4VcDGAiwPfv08MyhFvJ18HAUojXHJBAGjilE4OcHNCBWaaSYPU50hh3sQZMcACA0rwToVIlwIYVCBhZ2e/vKb81mdXiPaLJqKbereRk/p/5RAFcMCABnCqRbrU4J0FiFmZR8s2NrRmI8PJdtnoZjfTtmpW/1Dax1cKQYCbAzxaYGCXbh1SfSrErDKgnwV8SmBICfhYbPWy8ahZ++s9/xV7XeG9llMFT/b6CiEKUAAeHeCmyWuBwUJs96sRs8iQuqECvDpgUAdesKuQtLMbSybSvmQi1zc6ZP5H7Yx7zc7+Yc6hr5H2n3cIAgYLAG8R+EHKQsBThG2nRqhA6qZaOKfXRerBO1XY6aGbHQf4VCLdCqx3MuOLLew3pTHyinkTY6QTFkN6YJCyCPDqsT2gRczGINWvEc6F64I4A9KuQsSsBKmb1FYMeA2iv0eBpJ18PNeq+O4X/zRUzX5YUH2vRVskjZlTCAI8BYDfAHhoEnpgqBjb7kLEbHKknFoxwT2b14C0uxArVgabfRpgaNdGj1SoswBxG7O00cmObXXJIqleciN6nf1V3h7LF41UgArwl4IfKhEIfwnSg3qs2llsD+gBX4bNV4q0p1iwpZy6p2y0/WaHDEKfo3pgWIMdF4dkB/uX0HuVSmn8/4k5k74mauEa5/+hKpPaKB4LCJSD95UJhL8c6cESUYDbIJw/YfOWYq2dRcpVlNVvxSrHlosmfwK8vwII6LHVzaYfGpkfS+M/EzPNGsMjO/PnpEM+E7exiXUH8+91m/ydGckozFMBXjUQrAD8NIkyYJgmWYy1Dg7bnmIhyce2QDnSvlLEOxVIuWmSEttQCRLdStGP2gTfCmEZTtqY9zJjPxerZuaP8CmAYT0QKBWPTgViFvaDzFIutlEBGmCEjla5QAQqhOO2pwS8kJh4LjBAR7Qc294S8L79tvu+tCK7SdPf9FrwJODTYs3K9T+Z5XMQszGfI2gAgtVAsAp88BQQKAPv5LBsYX6z1064hQQBVUDgZAYrgeFKybUMHsYWrAL8dOIXRJ7M8jlYtjALCJYBI6fEDinp74ABW53Mw5lW9ju03aKRGDGkBUYz2uWaNO5QEVZsumlpns/EqpWZEioQqgHo6NNRoB2NVgM+HVYsnPXy5cuyhVbSIggIiZXKC0drhJVt2aKYkeb5TKxZmN/uuJRi8qE68CM1IkN1QKgS6R529e6Hiu8ttpH3qSCEa8GP1hyQtO3BibF6YLgMUTN78Ap8+r6qPGGTjWPYAH6sDnwoo1Mqwl9IJ/RHc23MNboxYbz+qcDZWXdoYuw06O0cNTMHF0Dx0ER+ttHDpjBWLXYSqhcZbgCClXSdjy2amJn1/qI0xhv27c8lreAhGaaxKw4vINxUqEvayACCJeDHzwIhmmQDED6DndBpJHvUiJkIkv3FwPg39u0CadAccfwMEKrCymEFUMy2yH6R7lNuInIGfPgc+PBZgZhoxIa7HEttBOvOEuF8z5ZrInIOCFe/mIDp60S/amE+wegJYPK8ONKUE41IhxqwbObECmTacs0J2vcLCqCImcjv4dEAk41AhHbWKHKiEZueSmz5q4GJC/vXc83Ji8Iq98ICFq6xlxLtzDLGaoGJS4875iNUxIUnReWDLyvgzTcJs2omVzFSAn7i4tMB8s3JS8JOH7UoHkhzOzCWWsgP1rsUm4g05Pd2yUY6aCMnsGxRfiLN68AINxFdwkr6ESoFLwjI822TSSpguARrNtYhzetQmDUWvQ2XVlyXI6/oVoqcF+eaV4e4Wf47aU6Hwl3HGzXJdvWnCJaKE+tVVEGYc2ex3qPCXBv3I2lOh8aCiX1r+wb7COH6XRFZguaSgoBarNmZu182K3LznXXFTGwIFIKnG0yeJ7Sw6oXKsGEjpqF3SW6+4EUt6saEjfmP8JpJA+VraaX7C31EGdBg4Sp5W5rHS2Gujf32pp1E6JsST59V8lEJOjCROmx0Mov3rsjfkObw0phuVZxO2ogfQ7rd0cqxiMkLwGgZVszk5pSd5OfTPP0bNWlj7tA3ppzu0nRAJs9hx6lOz11j3pHGzSmiRu4nqW72EX1zy9l8uHUJGKvBup25O5Or1edZuHyZyJaN5Cr8ReDp3hB5yVuJblz09vHrETVxVmm8vOD+FfL9jW42jsjpl6/C5EXwYw3Y6FburLZX/FQaKy+YatYYNm0kgPET4CdfEx81MklFZWOmbfe34B8sQ8zCDE/Z8/RVOhvWPmKaENYAt+gLTgYna4BbWXi7FvhXLXC7bpf1wMcNov9AAVZM5OfSGHnFgyvK11M3SNdmD5lYd5DwY3bIHjPZlYUdTDjZwYbXO9mxZBcb2ehVzK86WMftv5H8/rmRDVEj0d1vIlXTfycns/JPIj/bPWaSXrvzV1IZbeYaV2/W6KV9H+MYxzjGMY5xjGMc4/8E/wVNm29jIfennwAAAABJRU5ErkJggg==") 19 2, pointer;
    --beacon-hunt-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M21 39s12-10.7 12-22A12 12 0 0 0 9 17c0 11.3 12 22 12 22Z' fill='%232f8f7a' stroke='white' stroke-width='3'/%3E%3Ccircle cx='21' cy='17' r='4' fill='white'/%3E%3Cpath d='M14 8a15 15 0 0 1 14 0' fill='none' stroke='%23f1d78d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 21 39, crosshair;
    --app-background:
        radial-gradient(circle at top left, rgba(255, 250, 230, 0.8), rgba(230, 212, 172, 0.3) 35%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(120deg, #c6b182, #f2e6c0);
    --map-canvas-fallback-background: #d8edf2;
    --space-background: #02050b;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    color: var(--ink);
}

body {
    overflow: hidden;
    background: var(--app-background);
    user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
    user-select: text;
}

body.capture-mode {
    cursor: crosshair;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.riddle-pile-poil-mode #map,
body.riddle-pile-poil-mode #map .maplibregl-canvas-container,
body.riddle-pile-poil-mode #map .map-engine-pane,
body.riddle-pile-poil-mode #map .map-engine-layer,
body.riddle-pile-poil-mode #map .map-engine-interactive,
body.riddle-pile-poil-mode #map .map-engine-marker-icon,
body.riddle-pile-poil-mode #map .map-engine-image-layer,
body.riddle-pile-poil-mode #map .plan-image-overlay,
body.riddle-pile-poil-mode #map .plan-shape-overlay,
body.riddle-pile-poil-mode #map .postit-chip,
body.riddle-pile-poil-mode #map .compass-chip,
body.riddle-pile-poil-mode #map .search-place-chip,
body.riddle-pile-poil-mode #map .altitude-chip {
    cursor: var(--pile-poil-cursor);
}

body.riddle-pile-poil-mode #map,
body.riddle-pile-poil-mode #map .maplibregl-canvas-container,
body.riddle-pile-poil-mode #map .map-engine-pane,
body.riddle-pile-poil-mode #map .map-engine-layer,
body.riddle-pile-poil-mode #map .map-engine-interactive,
body.riddle-pile-poil-mode #map .map-engine-marker-icon,
body.riddle-pile-poil-mode #map .map-engine-image-layer,
body.riddle-pile-poil-mode #map .plan-image-overlay,
body.riddle-pile-poil-mode #map .plan-shape-overlay,
body.riddle-pile-poil-mode #map .postit-chip,
body.riddle-pile-poil-mode #map .compass-chip,
body.riddle-pile-poil-mode #map .search-place-chip,
body.riddle-pile-poil-mode #map .altitude-chip {
    cursor: none !important;
}

body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .maplibregl-canvas-container,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .map-engine-pane,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .map-engine-layer,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .map-engine-interactive,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .map-engine-marker-icon,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .map-engine-image-layer,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .plan-image-overlay,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .plan-shape-overlay,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .postit-chip,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .compass-chip,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .search-place-chip,
body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed #map .altitude-chip {
    cursor: auto !important;
}

body.riddle-pile-poil-mode #map .maplibregl-control-container,
body.riddle-pile-poil-mode #map .maplibregl-control-container * {
    cursor: auto;
}

body.riddle-satellite-challenge-mode #map,
body.riddle-satellite-challenge-mode #map .maplibregl-canvas-container,
body.riddle-satellite-challenge-mode #map .map-engine-pane,
body.riddle-satellite-challenge-mode #map .map-engine-layer,
body.riddle-satellite-challenge-mode #map .map-engine-interactive,
body.riddle-satellite-challenge-mode #map .map-engine-marker-icon,
body.riddle-satellite-challenge-mode #map .map-engine-image-layer,
body.riddle-satellite-challenge-mode #map .plan-image-overlay,
body.riddle-satellite-challenge-mode #map .plan-shape-overlay,
body.riddle-satellite-challenge-mode #map .postit-chip,
body.riddle-satellite-challenge-mode #map .compass-chip,
body.riddle-satellite-challenge-mode #map .search-place-chip,
body.riddle-satellite-challenge-mode #map .altitude-chip {
    cursor: none !important;
}

body.riddle-satellite-challenge-mode #map .maplibregl-control-container,
body.riddle-satellite-challenge-mode #map .maplibregl-control-container * {
    cursor: auto;
}

body.beacon-hunt-placement-mode #map,
body.beacon-hunt-placement-mode #map .maplibregl-canvas-container,
body.beacon-hunt-placement-mode #map .map-engine-pane,
body.beacon-hunt-placement-mode #map .map-engine-layer,
body.beacon-hunt-placement-mode #map .map-engine-interactive,
body.beacon-hunt-placement-mode #map .map-engine-marker-icon,
body.beacon-hunt-placement-mode #map .map-engine-image-layer,
body.beacon-hunt-placement-mode #map .plan-image-overlay,
body.beacon-hunt-placement-mode #map .plan-shape-overlay,
body.beacon-hunt-placement-mode #map .postit-chip,
body.beacon-hunt-placement-mode #map .compass-chip,
body.beacon-hunt-placement-mode #map .search-place-chip,
body.beacon-hunt-placement-mode #map .altitude-chip {
    cursor: var(--beacon-hunt-cursor);
}

body.beacon-hunt-placement-mode #map .maplibregl-control-container,
body.beacon-hunt-placement-mode #map .maplibregl-control-container * {
    cursor: auto;
}

body[data-theme="dark"] {
    --sand-1: rgba(30, 38, 43, 0.94);
    --sand-2: rgba(20, 27, 31, 0.92);
    --panel-compositor-base: #141b1f;
    --ink: #ede4d2;
    --forest: #4c6d5f;
    --wine: #b36a58;
    --gold: #d4b35c;
    --shadow: rgba(0, 0, 0, 0.56);
    --map-selection-ring: rgba(242, 212, 138, 0.98);
    --map-selection-ring-soft: rgba(242, 212, 138, 0.3);
    --map-selection-core: rgba(255, 248, 235, 0.98);
    --map-selection-shadow: rgba(0, 0, 0, 0.54);
    --map-inner-vignette:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.38) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.03) 12%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0.03) 88%, rgba(0, 0, 0, 0.36)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0.26));
    --scrollbar-track: rgba(237, 228, 210, 0.08);
    --scrollbar-track-strong: rgba(237, 228, 210, 0.12);
    --scrollbar-thumb: rgba(212, 179, 92, 0.36);
    --scrollbar-thumb-hover: rgba(242, 212, 138, 0.56);
    --scrollbar-thumb-border: rgba(13, 19, 22, 0.86);
    --surface-card-bg: rgba(16, 23, 27, 0.72);
    --surface-card-bg-strong: rgba(11, 18, 21, 0.66);
    --surface-card-border: rgba(237, 228, 210, 0.12);
    --section-heading-color: rgba(237, 228, 210, 0.84);
    --subsection-heading-color: rgba(237, 228, 210, 0.62);
    --app-background:
        radial-gradient(circle at top left, rgba(83, 96, 109, 0.32), rgba(19, 24, 28, 0.04) 35%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(120deg, #0e1518, #20292f);
}

#map .maplibregl-ctrl-logo {
    display: none !important;
}

#map .maplibregl-ctrl-attrib {
    margin: 0 6px 6px 0;
    padding: 2px 6px;
    border: 1px solid rgba(88, 69, 37, 0.08);
    border-radius: 8px 0 0 0;
    background: rgba(255, 250, 237, 0.46);
    color: rgba(43, 36, 24, 0.58);
    font-size: 0.64rem;
    line-height: 1.35;
    opacity: 0.62;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px rgba(24, 19, 10, 0.08);
    transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}

#map .maplibregl-ctrl-attrib:hover,
#map .maplibregl-ctrl-attrib:focus-within {
    opacity: 0.92;
    background: rgba(255, 250, 237, 0.82);
    color: rgba(43, 36, 24, 0.82);
}

#map .maplibregl-ctrl-attrib a {
    color: inherit;
    text-decoration-color: rgba(43, 36, 24, 0.34);
    text-underline-offset: 2px;
}

.map-scale-feedback {
    position: fixed;
    right: auto;
    left: 75%;
    bottom: calc(8px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 820;
    width: var(--map-scale-width, 150px);
    height: 27px;
    color: rgba(247, 240, 222, 0.94);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    filter:
        drop-shadow(0 1px 1px rgba(255, 250, 237, 0.86))
        drop-shadow(0 1px 2px rgba(24, 19, 10, 0.9));
    pointer-events: none;
}

.map-scale-feedback.hidden,
body:has(#map.maphora-globe-space) .map-scale-feedback {
    display: none;
}

.map-scale-feedback-labels {
    position: absolute;
    inset: 0 0 auto;
    height: 14px;
}

.map-scale-feedback-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 1px 2px rgba(24, 19, 10, 0.94);
}

.map-scale-feedback-label[data-map-scale-tick="0"] {
    left: 0;
}

.map-scale-feedback-label[data-map-scale-tick="1"] {
    left: 33.333%;
}

.map-scale-feedback-label[data-map-scale-tick="2"] {
    left: 66.667%;
}

.map-scale-feedback-label[data-map-scale-tick="3"] {
    left: 100%;
}

.map-scale-feedback-unit {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(24, 19, 10, 0.94);
}

.map-scale-feedback-track {
    position: absolute;
    inset: auto 0 0;
    height: 8px;
    display: flex;
    border-top: 2px solid rgba(42, 39, 31, 0.84);
}

.map-scale-feedback-segment {
    position: relative;
    flex: 1 1 33.333%;
    height: 4px;
    border-bottom: 1px solid rgba(42, 39, 31, 0.82);
}

.map-scale-feedback-segment:nth-child(odd) {
    background: rgba(240, 231, 207, 0.88);
}

.map-scale-feedback-segment:nth-child(even) {
    background: rgba(52, 48, 38, 0.82);
}

.map-scale-feedback-segment::before,
.map-scale-feedback-segment:last-child::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -1px;
    width: 1px;
    height: 7px;
    background: rgba(240, 231, 207, 0.92);
}

.map-scale-feedback-segment:last-child::after {
    right: -1px;
    left: auto;
}

body[data-theme="dark"] #map .maplibregl-ctrl-attrib {
    background: rgba(21, 28, 32, 0.46);
    color: rgba(237, 228, 210, 0.72);
    border-color: rgba(237, 228, 210, 0.08);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] #map .maplibregl-ctrl-attrib:hover,
body[data-theme="dark"] #map .maplibregl-ctrl-attrib:focus-within {
    background: rgba(21, 28, 32, 0.84);
    color: rgba(255, 248, 235, 0.9);
}

body[data-theme="dark"] #map .maplibregl-ctrl-attrib a {
    color: inherit;
    text-decoration-color: rgba(237, 228, 210, 0.36);
}

#map {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--map-canvas-fallback-background);
    transition: background-color 650ms ease;
}

/* Preset documents must never blur or scale the map behind them. This lives in
   the always-loaded core stylesheet so feature CSS load order cannot override it. */
body:has(#preset-player-modal:not(.hidden)) #map,
body:has(.preset-native-layer) #map,
body:has(#preset-player-modal:not(.hidden)) .immersive-scene,
body:has(.preset-native-layer) .immersive-scene,
body:has(#preset-player-modal:not(.hidden)) .maplibre-dom-desk-tool-surface,
body:has(.preset-native-layer) .maplibre-dom-desk-tool-surface,
body:has(#preset-player-modal:not(.hidden)) .immersive-air-css-overlay,
body:has(.preset-native-layer) .immersive-air-css-overlay,
body:has(#preset-player-modal:not(.hidden)) .immersive-air-canvas,
body:has(.preset-native-layer) .immersive-air-canvas,
body:has(#preset-player-modal:not(.hidden)) #map-engine-indicator,
body:has(.preset-native-layer) #map-engine-indicator {
    -webkit-filter: none !important;
    filter: none !important;
}

body:has(#preset-player-modal:not(.hidden)) #map,
body:has(.preset-native-layer) #map,
body:has(#preset-player-modal:not(.hidden)) .immersive-scene,
body:has(.preset-native-layer) .immersive-scene {
    -webkit-transform: none !important;
    transform: none !important;
}

.map-cursor-ground-shadow {
    --map-cursor-ground-shadow-offset: 76px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 810;
    width: 54px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(7, 8, 5, 0.5) 0%, rgba(7, 8, 5, 0.34) 34%, rgba(7, 8, 5, 0.12) 58%, rgba(7, 8, 5, 0) 78%);
    filter: blur(8px);
    opacity: 0.15;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + var(--map-cursor-ground-shadow-offset))) scaleX(0.82);
    will-change: left, top;
}

.map-cursor-ground-shadow.hidden {
    display: none !important;
}

.map-footer-credits {
    position: fixed;
    left: 50%;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 820;
    display: flex;
    gap: 8px;
    align-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

.maphora-feedback-trigger {
    width: 65px;
    height: 22px;
    box-sizing: border-box;
    padding: 3px 8px;
    border: 1px solid rgba(88, 69, 37, 0.08);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.72);
    color: rgba(43, 36, 24, 0.68);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(24, 19, 10, 0.08);
    backdrop-filter: blur(8px);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.maphora-feedback-trigger-icon {
    position: absolute;
    left: 4px;
    width: 9.2px;
    height: 9.2px;
    fill: currentColor;
}

.maphora-feedback-trigger-label {
    min-width: 0;
    transform: translateX(6px);
}

.maphora-feedback-trigger:hover,
.maphora-feedback-trigger:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 250, 237, 0.92);
    color: rgba(43, 36, 24, 0.9);
    box-shadow: 0 7px 16px rgba(24, 19, 10, 0.14);
}

body[data-theme="dark"] .maphora-feedback-trigger {
    border-color: rgba(237, 228, 210, 0.08);
    background: rgba(21, 28, 32, 0.72);
    color: rgba(237, 228, 210, 0.76);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .maphora-feedback-trigger:hover,
body[data-theme="dark"] .maphora-feedback-trigger:focus-visible {
    background: rgba(21, 28, 32, 0.92);
    color: rgba(255, 248, 235, 0.94);
}

#map .maplibregl-canvas-container,
#map .maplibregl-canvas {
    background: var(--map-canvas-fallback-background);
    transition: background-color 650ms ease;
}

#map.maphora-globe-space,
#map.maphora-globe-space .maplibregl-canvas-container,
#map.maphora-globe-space .maplibregl-canvas {
    background-color: var(--space-background);
}

#map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 760;
    pointer-events: none;
    background: var(--map-inner-vignette);
}

body[data-map-engine-active="maplibre"] #map::after {
    display: none;
}

body[data-map-engine-active="maplibre"][data-immersive-view="focus"]:not([data-focus-map-vignette="disabled"]) #map::after {
    display: block;
}

.maplibre-tool-overlay {
    position: absolute !important;
    inset: 0;
    z-index: 2;
    background: transparent !important;
}

.maplibre-direct-tool-overlay {
    pointer-events: none;
}

.maplibre-compat-pane-root,
.maplibre-compat-pane {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.maplibre-compat-pane-root {
    z-index: 3;
}

.maplibre-tool-overlay[data-camera-owner="maplibre"] {
    pointer-events: none;
}

.maplibre-tool-overlay[data-camera-owner="maplibre"] .map-engine-marker-icon,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .map-engine-marker-shadow,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .map-engine-interactive,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .map-engine-popup,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .map-engine-tooltip,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .plan-image-overlay,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .plan-shape-overlay,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .postit-chip,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .compass-chip,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .search-place-chip,
.maplibre-tool-overlay[data-camera-owner="maplibre"] .altitude-chip {
    pointer-events: auto;
}

.maplibre-dom-tool-surface {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
    contain: layout paint;
    transform: translateZ(0);
}

.maplibre-dom-desk-tool-surface {
    position: fixed;
    inset: 0;
    overflow: visible;
    contain: none;
    z-index: 40;
}

body[data-immersive-view="focus"] .maplibre-dom-desk-tool-surface,
body.immersive-view-transition-to-focus .maplibre-dom-desk-tool-surface {
    display: none;
}

.maplibre-dom-tool-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 4;
    pointer-events: auto;
    cursor: pointer;
    touch-action: none;
    overflow: visible;
    will-change: transform;
    backface-visibility: hidden;
}

.maplibre-dom-tool-marker.maplibre-native-marker,
.maplibre-dom-tool-marker.maplibre-native-image-marker,
.maplibre-dom-tool-marker.maplibre-native-shape-marker {
    width: var(--maplibre-dom-marker-hit-width, 96px) !important;
    height: var(--maplibre-dom-marker-hit-height, 96px) !important;
    margin-left: var(--maplibre-dom-marker-hit-margin-left, -48px);
    margin-top: var(--maplibre-dom-marker-hit-margin-top, -48px);
    /* The positioning box can be larger than the visible object; keep map pans
       alive on transparent pixels and let the real content handle interaction. */
    pointer-events: none !important;
}

.maplibre-dom-tool-marker.maplibre-native-marker > *,
.maplibre-dom-tool-marker.maplibre-native-image-marker > * {
    pointer-events: auto;
}

.maplibre-dom-tool-marker.maplibre-native-marker > .named-point-chip,
.maplibre-dom-tool-marker.maplibre-native-marker > .search-place-chip,
.maplibre-dom-tool-marker.maplibre-native-marker > .altitude-chip,
.maplibre-dom-tool-marker.maplibre-native-marker > .computed-area-shell,
.maplibre-dom-tool-marker.maplibre-native-marker > .postit-chip,
.maplibre-dom-tool-marker.maplibre-native-marker > .compass-chip,
.maplibre-dom-tool-marker.maplibre-native-image-marker > .plan-image-overlay,
.maplibre-dom-tool-marker.maplibre-native-shape-marker > .plan-shape-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
}

.maplibre-dom-tool-surface .maplibre-dom-tool-interactive,
.maplibre-dom-tool-surface .maplibre-dom-tool-marker,
.maplibre-dom-tool-surface .map-engine-marker-icon,
.maplibre-dom-tool-surface .point-chip,
.maplibre-dom-tool-surface .named-point-chip,
.maplibre-dom-tool-surface .postit-chip,
.maplibre-dom-tool-surface .compass-chip,
.maplibre-dom-tool-surface .search-place-chip,
.maplibre-dom-tool-surface .altitude-chip {
    pointer-events: auto;
}

.maplibre-dom-tool-popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 6;
    pointer-events: none;
    will-change: transform;
}

.maplibre-dom-tool-popup-card {
    min-width: 156px;
    max-width: 240px;
    padding: 10px 12px;
    transform: translate(-50%, calc(-100% - 18px));
    border-radius: 12px;
    background: rgba(255, 250, 237, 0.98);
    border: 1px solid rgba(88, 69, 37, 0.14);
    color: rgba(43, 36, 24, 0.92);
    box-shadow: 0 14px 28px rgba(24, 19, 10, 0.2);
    font-size: 0.86rem;
    line-height: 1.35;
    white-space: normal;
}

.maplibre-dom-tool-popup-card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(255, 250, 237, 0.98);
    border-right: 1px solid rgba(88, 69, 37, 0.14);
    border-bottom: 1px solid rgba(88, 69, 37, 0.14);
}

.maplibre-dom-marker-popup .maplibre-dom-tool-popup-card {
    min-width: 0;
    width: max-content;
    max-width: min(210px, calc(100vw - 32px));
    padding: 8px 10px;
    transform: translate(-50%, calc(-100% - 14px));
    border-radius: 10px;
    line-height: 1.25;
}

.maplibre-dom-marker-popup .maplibre-dom-tool-popup-card::after {
    bottom: -6px;
    width: 10px;
    height: 10px;
}

body[data-theme="dark"] .maplibre-dom-tool-popup-card {
    background: rgba(19, 27, 31, 0.98);
    border-color: rgba(237, 228, 210, 0.14);
    color: rgba(255, 248, 235, 0.92);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .maplibre-dom-tool-popup-card::after {
    background: rgba(19, 27, 31, 0.98);
    border-color: rgba(237, 228, 210, 0.14);
}

.maplibre-native-marker {
    z-index: 4;
    cursor: pointer;
    touch-action: none;
    pointer-events: auto;
    transition: opacity 180ms ease, filter 180ms ease;
}

.maplibre-native-marker.maphora-marker-cluster-member,
.map-engine-marker-icon.maphora-marker-cluster-member {
    opacity: 0 !important;
    filter: blur(2px);
    pointer-events: none !important;
}

.maplibre-native-shape-marker {
    z-index: 3;
    cursor: grab;
    touch-action: none;
    will-change: transform;
    pointer-events: auto;
}

.maplibre-native-image-marker {
    z-index: 3;
    cursor: grab;
    touch-action: none;
    will-change: transform;
    pointer-events: auto;
}

#map .maplibregl-marker.maplibre-native-marker,
#map .maplibregl-marker.maplibre-native-shape-marker,
#map .maplibregl-marker.maplibre-native-image-marker {
    z-index: 20;
    pointer-events: auto;
}

.map-engine-marker-hidden-by-native {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.map-engine-marker-hidden-by-native * {
    pointer-events: none !important;
}

.map-engine-shape-hidden-by-native {
    opacity: 0 !important;
    pointer-events: none !important;
}

.map-engine-line-hidden-by-native {
    opacity: 0 !important;
}

.map-engine-image-hidden-by-native {
    opacity: 0 !important;
    pointer-events: none !important;
}

.map-engine-riddle-map-content-hidden-by-native {
    opacity: 0 !important;
    pointer-events: none !important;
}

.map-engine-game-area-hidden-by-native {
    opacity: 0 !important;
    pointer-events: none !important;
}

.maplibre-native-riddle-map-content-marker {
    z-index: 2;
    width: 0;
    height: 0;
    pointer-events: none;
}

.maplibre-native-riddle-feedback-marker {
    z-index: 5;
    width: 0;
    height: 0;
    pointer-events: none;
}

.maplibre-native-line-label,
.maplibre-native-line-arrow {
    pointer-events: none;
}

#map .maplibre-native-line-popup {
    pointer-events: none;
}

#map .maplibre-native-line-popup .maplibregl-popup-content {
    padding: 10px 12px;
    border-radius: 14px;
    color: #3b3426;
    background: rgba(255, 248, 229, 0.96);
    border: 1px solid rgba(135, 103, 57, 0.22);
    box-shadow: 0 12px 24px rgba(61, 45, 21, 0.18);
    font-size: 13px;
    line-height: 1.35;
}

#map .maplibre-native-line-popup .maplibregl-popup-tip {
    border-top-color: rgba(255, 248, 229, 0.96);
    border-bottom-color: rgba(255, 248, 229, 0.96);
}

body.riddle-pile-poil-mode #map .maplibre-native-marker,
body.riddle-satellite-challenge-mode #map .maplibre-native-marker,
body.riddle-pile-poil-mode #map .maplibre-native-shape-marker,
body.riddle-satellite-challenge-mode #map .maplibre-native-shape-marker,
body.riddle-pile-poil-mode #map .maplibre-native-image-marker,
body.riddle-satellite-challenge-mode #map .maplibre-native-image-marker,
body.capture-mode #map .maplibre-native-marker,
body.capture-mode #map .maplibre-native-shape-marker,
body.capture-mode #map .maplibre-native-image-marker {
    pointer-events: none;
}

body.maplibre-native-shape-camera-moving #map .maplibre-native-shape-marker .plan-shape-frame {
    transition: none;
}

body.maplibre-native-shape-camera-moving #map .maplibre-native-shape-marker .maphora-user-path-glow-wide,
body.maplibre-native-shape-camera-moving #map .maplibre-native-shape-marker .maphora-user-path-glow-mid {
    transition: none;
}

body.maplibre-native-image-camera-moving #map .maplibre-native-image-marker .plan-image-frame {
    transition: none;
}

body.maplibre-native-image-camera-moving #map .maplibre-native-video-marker .plan-video-surface {
    pointer-events: none;
}

#map .maplibregl-control-container {
    position: absolute;
    z-index: 3;
}

/* Keep full-size compat panes from blocking pointer access to lower custom
   panes such as plan images. Real interactive children opt back in below. */
.map-engine-overlay-pane,
.map-engine-marker-pane,
.map-engine-shadow-pane,
.map-engine-tooltip-pane,
.map-engine-popup-pane {
    pointer-events: none;
}

.map-engine-overlay-pane svg,
.map-engine-overlay-pane path,
.map-engine-marker-pane > *,
.map-engine-shadow-pane > *,
.map-engine-tooltip-pane > *,
.map-engine-popup-pane > * {
    pointer-events: auto;
}

.map-engine-overlay-pane .maphora-user-path-glow-wide,
.map-engine-overlay-pane .maphora-user-path-glow-mid {
    pointer-events: none;
}

.map-engine-overlay-pane .maphora-user-path-core {
    pointer-events: auto;
}

.hud {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
}



/* Shell panels, top bar, status surfaces, notices and shared floating-panel chrome. */

body.capture-mode .toolbar,
body.capture-mode .inspector,
body.capture-mode .top-bar,
body.capture-mode .status-bar,
body.capture-mode .app-notice,
body.capture-mode .basemap-provider-hint,
body.capture-mode .map-layer-control,
body.capture-mode .map-engine-indicator,
body.capture-mode .map-scale-feedback,
body.capture-mode #settings-modal,
body.capture-mode #update-modal,
body.capture-mode #map .maplibregl-control-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.panel {
    pointer-events: auto;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.18), rgba(255, 253, 246, 0)),
        linear-gradient(180deg, var(--sand-1), var(--sand-2));
    /* Keep the panel fully paintable before its first composited frame. */
    background-color: var(--panel-compositor-base);
    border: 1px solid rgba(88, 69, 37, 0.22);
    border-radius: 16px;
    box-shadow:
        0 24px 52px rgba(24, 19, 10, 0.24),
        0 7px 16px rgba(24, 19, 10, 0.14),
        inset 0 1px 0 rgba(255, 250, 237, 0.46);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.draggable-panel {
    touch-action: pan-y;
}

.draggable-panel.is-dragging {
    will-change: transform;
}

.panel-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.panel-drag-handle {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    border-radius: 12px;
    background: rgba(255, 250, 237, 0.5);
    border: 1px solid rgba(88, 69, 37, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    cursor: grab;
    position: relative;
    overflow: hidden;
}

.panel-drag-handle:active {
    cursor: grabbing;
}

.panel-drag-handle::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 14px;
    border-radius: 999px;
    background:
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 10px / 12px 1.5px no-repeat;
    opacity: 0.95;
}

.toolbar {
    position: absolute;
    top: var(--hud-gap);
    left: var(--hud-gap);
    width: var(--hud-sidebar-width);
    max-height: calc(100vh - (var(--hud-gap) * 2));
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.inspector {
    position: absolute;
    top: var(--hud-panel-top);
    right: var(--hud-gap);
    width: var(--hud-panel-width);
    max-height: calc(100vh - var(--hud-panel-top) - var(--hud-gap));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
}

.inspector,
.settings-modal-body,
.riddle-detail-body,
.riddle-gallery-sections {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.inspector::-webkit-scrollbar,
.settings-modal-body::-webkit-scrollbar,
.riddle-detail-body::-webkit-scrollbar,
.riddle-gallery-sections::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.inspector::-webkit-scrollbar-track,
.settings-modal-body::-webkit-scrollbar-track,
.riddle-detail-body::-webkit-scrollbar-track,
.riddle-gallery-sections::-webkit-scrollbar-track {
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--scrollbar-track), var(--scrollbar-track-strong));
    box-shadow:
        inset 0 0 0 1px rgba(88, 69, 37, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.24);
}

.inspector::-webkit-scrollbar-thumb,
.settings-modal-body::-webkit-scrollbar-thumb,
.riddle-detail-body::-webkit-scrollbar-thumb,
.riddle-gallery-sections::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid var(--scrollbar-thumb-border);
    background:
        linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 72%, black));
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 3px 8px rgba(24, 19, 10, 0.14);
}

.inspector::-webkit-scrollbar-thumb:hover,
.settings-modal-body::-webkit-scrollbar-thumb:hover,
.riddle-detail-body::-webkit-scrollbar-thumb:hover,
.riddle-gallery-sections::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--scrollbar-thumb-hover) 76%, black));
    background-clip: padding-box;
}

.inspector::-webkit-scrollbar-corner,
.settings-modal-body::-webkit-scrollbar-corner,
.riddle-detail-body::-webkit-scrollbar-corner,
.riddle-gallery-sections::-webkit-scrollbar-corner {
    background: transparent;
}

#inspector-panel.inspector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 0;
    scrollbar-width: none;
}

#inspector-panel.inspector.hidden {
    display: none;
}

#inspector-panel.inspector .panel-header-row {
    padding: 18px 18px 0;
}

#inspector-panel.inspector > .selection-list {
    flex: 1 1 auto;
    min-height: 0;
    grid-auto-rows: max-content;
    align-content: start;
    padding: 0 14px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 91, 45, 0.46) transparent;
}

#inspector-panel.inspector::-webkit-scrollbar {
    display: none;
}

#inspector-panel.inspector > .selection-list::-webkit-scrollbar {
    width: 10px;
    height: 0;
}

#inspector-panel.inspector > .selection-list::-webkit-scrollbar:horizontal,
#inspector-panel.inspector > .selection-list::-webkit-scrollbar-button {
    display: none;
}

#inspector-panel.inspector > .selection-list::-webkit-scrollbar-track {
    margin: 2px 0 20px;
    border-radius: 999px;
    background: transparent;
}

#inspector-panel.inspector > .selection-list::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 3px solid rgba(0, 0, 0, 0);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(150, 116, 59, 0.64), rgba(104, 76, 35, 0.58));
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 237, 0.42),
        0 2px 6px rgba(24, 19, 10, 0.06);
}

#inspector-panel.inspector > .selection-list::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(130, 97, 45, 0.78), rgba(86, 61, 28, 0.72));
    background-clip: padding-box;
}

body[data-theme="dark"] #inspector-panel.inspector > .selection-list {
    scrollbar-color: rgba(219, 190, 119, 0.38) transparent;
}

body[data-theme="dark"] #inspector-panel.inspector > .selection-list::-webkit-scrollbar-track {
    background: transparent;
}

body[data-theme="dark"] #inspector-panel.inspector > .selection-list::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(220, 189, 110, 0.5), rgba(174, 135, 62, 0.46));
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, 0.18),
        0 3px 8px rgba(0, 0, 0, 0.16);
}

body[data-theme="dark"] #inspector-panel.inspector > .selection-list::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(242, 212, 138, 0.62), rgba(203, 160, 78, 0.58));
    background-clip: padding-box;
}

.slim-panel {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
}

.top-bar {
    position: absolute;
    top: var(--hud-top-edge-gap);
    left: 50%;
    right: auto;
    z-index: 5200;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    max-width: calc(100vw - (var(--hud-gap) * 2));
    min-height: 58px;
    overflow: visible;
    isolation: isolate;
}

.top-bar .panel-drag-handle {
    margin-left: 6px;
    margin-right: 1px;
}

.tab-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    overflow: visible;
    padding-bottom: 0;
    min-width: 0;
    max-width: min(520px, 68vw);
    position: relative;
}

.tab-button {
    min-width: 72px;
    max-width: min(420px, 54vw);
    padding: 8px 12px;
    border-radius: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    transform: none;
}

.tab-selector-shell {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.tab-selector {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    max-width: min(460px, 60vw);
    padding: 3px;
    border-radius: 13px;
    background: rgba(255, 250, 237, 0.28);
}

.tab-selector-shell.open .tab-selector {
    background: rgba(255, 250, 237, 0.42);
}

.tab-selector.single-tab {
    padding: 0;
    background: transparent;
}

.tab-selector-trigger {
    min-width: 82px;
    width: var(--tab-title-width, 12ch);
    max-width: min(420px, 54vw);
    padding-inline: 10px;
    border: none;
    border-radius: 10px;
    background: rgba(71, 93, 79, 0.12);
    box-shadow: none;
    color: var(--ink);
    text-align: left;
}

.tab-selector-trigger:hover,
.tab-selector-trigger:focus-visible {
    background: rgba(71, 93, 79, 0.22);
    box-shadow: none;
    color: var(--ink);
}

.tab-selector-toggle {
    width: 28px;
    height: 32px;
    padding: 0;
    margin-left: 1px;
    border-radius: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(43, 36, 24, 0.76);
    transform: none;
}

.tab-selector-toggle:hover,
.tab-selector-toggle:focus-visible {
    background: rgba(255, 250, 237, 0.38);
    color: rgba(43, 36, 24, 0.92);
    box-shadow: none;
    transform: none;
}

.tab-selector-chevron {
    width: 14px;
    height: 14px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    opacity: 0.78;
    transform: rotate(0deg);
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.tab-selector-shell.open .tab-selector-chevron {
    transform: rotate(180deg);
}

.tab-title-input {
    width: var(--tab-title-width, 14ch);
    max-width: min(460px, 60vw);
    min-width: 72px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(50, 79, 69, 0.28);
    background: rgba(255, 250, 237, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-align: center;
    font-weight: 600;
}

.tab-selector-input {
    width: var(--tab-title-width, 14ch);
    max-width: min(460px, 60vw);
    min-width: 84px;
    text-align: left;
    background: rgba(255, 248, 235, 0.98);
    border-color: rgba(50, 79, 69, 0.42);
}

.tab-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(280px, calc(100vw - 40px));
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(88, 69, 37, 0.14);
    background: linear-gradient(180deg, rgba(252, 246, 233, 0.98), rgba(239, 224, 193, 0.96));
    box-shadow: 0 16px 34px rgba(24, 19, 10, 0.14);
    backdrop-filter: blur(10px);
    display: grid;
    gap: 4px;
    z-index: 46;
}

.tab-switcher-row {
    position: relative;
    min-width: 0;
}

.tab-switcher-option {
    width: 100%;
    min-width: 0;
    padding: 9px 42px 9px 11px;
    border-radius: 12px;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    text-align: left;
    color: rgba(43, 36, 24, 0.84);
    transform: none;
}

.tab-switcher-option:hover,
.tab-switcher-option:focus-visible,
.tab-switcher-row:hover .tab-switcher-option,
.tab-switcher-row:focus-within .tab-switcher-option {
    background: rgba(50, 79, 69, 0.08);
    color: rgba(35, 54, 47, 0.96);
    box-shadow: none;
    transform: none;
}

.tab-switcher-close {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5px;
    width: 30px;
    height: 30px;
    margin-block: auto;
    padding: 0;
    border: none;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 248, 235, 0.88);
    color: rgba(43, 36, 24, 0.72);
    box-shadow: 0 6px 14px rgba(24, 19, 10, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    z-index: 1;
}

.tab-switcher-row:hover .tab-switcher-close,
.tab-switcher-row:focus-within .tab-switcher-close {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.tab-switcher-close:hover,
.tab-switcher-close:focus-visible {
    background: #c83f32;
    color: #fff8eb;
    box-shadow: 0 8px 16px rgba(154, 43, 32, 0.22);
    transform: none;
}

.tab-switcher-option-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-switcher-option-icon-shell {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 16.8px;
    height: 16.8px;
    align-items: center;
    justify-content: center;
}

.tab-switcher-option-icon {
    flex: 0 0 16.8px;
    width: 16.8px;
    height: 16.8px;
    object-fit: cover;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(43, 36, 24, 0.72);
}

.tab-switcher-option-icon-shell > img.tab-switcher-option-icon {
    transform: scale(1.35);
    transform-origin: center;
}

.tab-switcher-option-status-icon {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 11px;
    height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 250, 237, 0.54);
    border-radius: 999px;
    color: rgba(255, 250, 237, 0.98);
    background: rgba(52, 136, 76, 0.98);
    box-shadow: 0 3px 8px rgba(24, 19, 10, 0.24);
    pointer-events: none;
    z-index: 1;
}

.tab-switcher-option-status-icon .active-riddle-badge-status-icon-svg {
    width: 7px;
    height: 7px;
}

.tab-switcher-option-icon-fallback svg {
    width: 16.8px;
    height: 16.8px;
    display: block;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.top-bar-tab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.plan-actions-menu {
    position: relative;
}

.top-bar .plan-actions-menu-toggle.tab-save {
    display: none;
}

.plan-actions-menu-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-action-label {
    display: none;
}

.icon-button {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.top-bar-icon-button {
    width: 38px;
    height: 38px;
}

.gear-icon-svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.icon-transfer {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-duplicate {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.top-bar-divider {
    width: 1px;
    height: 30px;
    flex: 0 0 auto;
    align-self: center;
    margin: 0 2px 0 0;
    background: linear-gradient(
        180deg,
        rgba(88, 69, 37, 0.06),
        rgba(88, 69, 37, 0.34) 20%,
        rgba(88, 69, 37, 0.56) 50%,
        rgba(88, 69, 37, 0.34) 80%,
        rgba(88, 69, 37, 0.06)
    );
    box-shadow:
        1px 0 0 rgba(255, 250, 237, 0.48),
        0 0 0 1px rgba(88, 69, 37, 0.04);
    border-radius: 999px;
    opacity: 0.95;
}

.top-bar-riddle-divider {
    margin-left: 2px;
}

.active-riddle-badge.hidden + .top-bar-riddle-divider {
    display: none;
}

.top-bar-plan-divider {
    width: 1px;
    height: 30px;
    flex: 0 0 auto;
    align-self: center;
    margin: 0 2px;
    background: linear-gradient(
        180deg,
        rgba(88, 69, 37, 0.06),
        rgba(88, 69, 37, 0.34) 20%,
        rgba(88, 69, 37, 0.56) 50%,
        rgba(88, 69, 37, 0.34) 80%,
        rgba(88, 69, 37, 0.06)
    );
    box-shadow:
        1px 0 0 rgba(255, 250, 237, 0.48),
        0 0 0 1px rgba(88, 69, 37, 0.04);
    border-radius: 999px;
    opacity: 0.95;
}

.tab-save,
.tab-close,
.tab-add {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 0.95rem;
    border-radius: 10px;
    box-shadow: none;
    transform: none;
}

.tab-save {
    color: rgba(50, 79, 69, 0.82);
}

.tab-export,
.tab-import,
.tab-duplicate {
    color: rgba(60, 48, 27, 0.82);
}

body[data-theme="dark"] .tab-save,
body[data-theme="dark"] .tab-export,
body[data-theme="dark"] .tab-import,
body[data-theme="dark"] .tab-duplicate,
body[data-theme="dark"] .tab-close,
body[data-theme="dark"] .tab-add,
body[data-theme="dark"] .top-bar .icon-button,
body[data-theme="dark"] .tab-selector-toggle,
body[data-theme="dark"] .top-bar .gear-icon-svg {
    color: rgba(237, 228, 210, 0.84);
}

.tab-save:hover:not(:disabled),
.tab-save:focus-visible:not(:disabled) {
    background: rgba(50, 79, 69, 0.16);
    color: #22362f;
    box-shadow: none;
    transform: translateY(-1px);
}

.tab-export:hover:not(:disabled),
.tab-export:focus-visible:not(:disabled),
.tab-import:hover:not(:disabled),
.tab-import:focus-visible:not(:disabled),
.tab-duplicate:hover:not(:disabled),
.tab-duplicate:focus-visible:not(:disabled) {
    background: rgba(124, 107, 60, 0.14);
    color: #3f321d;
    box-shadow: none;
    transform: translateY(-1px);
}

body[data-theme="dark"] .tab-save:hover:not(:disabled),
body[data-theme="dark"] .tab-export:hover:not(:disabled),
body[data-theme="dark"] .tab-import:hover:not(:disabled),
body[data-theme="dark"] .tab-duplicate:hover:not(:disabled),
body[data-theme="dark"] .tab-close:hover:not(:disabled),
body[data-theme="dark"] .tab-add:hover:not(:disabled),
body[data-theme="dark"] .tab-selector-toggle:hover:not(:disabled),
body[data-theme="dark"] .top-bar .icon-button:hover:not(:disabled) {
    color: rgba(255, 248, 235, 0.96);
    background: rgba(255, 250, 237, 0.08);
}

body[data-theme="dark"] .toolbar .tool-button.active {
    background: rgba(255, 250, 237, 0.08);
    border-color: rgba(237, 228, 210, 0.22);
    color: rgba(255, 248, 235, 0.94);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 237, 0.04),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

body[data-theme="dark"] .toolbar .tool-button.active:hover,
body[data-theme="dark"] .toolbar .tool-button.active:focus-visible {
    background: rgba(255, 250, 237, 0.12);
    border-color: rgba(237, 228, 210, 0.3);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 237, 0.08),
        0 12px 22px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .tab-selector {
    background: rgba(255, 250, 237, 0.08);
}

body[data-theme="dark"] .tab-selector-shell.open .tab-selector {
    background: rgba(255, 250, 237, 0.12);
}

body[data-theme="dark"] .tab-selector.single-tab {
    background: transparent;
}

body[data-theme="dark"] .tab-selector-trigger {
    background: rgba(255, 250, 237, 0.08);
    color: rgba(237, 228, 210, 0.92);
}

body[data-theme="dark"] .tab-selector-trigger:hover,
body[data-theme="dark"] .tab-selector-trigger:focus-visible {
    background: rgba(255, 250, 237, 0.14);
    color: rgba(255, 248, 235, 0.96);
}

body[data-theme="dark"] .tab-switcher-menu {
    border-color: rgba(237, 228, 210, 0.1);
    background: linear-gradient(180deg, rgba(22, 30, 34, 0.98), rgba(15, 22, 26, 0.96));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .tab-switcher-option {
    color: rgba(237, 228, 210, 0.84);
}

body[data-theme="dark"] .tab-switcher-option:hover,
body[data-theme="dark"] .tab-switcher-option:focus-visible,
body[data-theme="dark"] .tab-switcher-row:hover .tab-switcher-option,
body[data-theme="dark"] .tab-switcher-row:focus-within .tab-switcher-option {
    background: rgba(237, 228, 210, 0.08);
    color: rgba(255, 248, 235, 0.96);
}

body[data-theme="dark"] .tab-switcher-close {
    background: rgba(15, 22, 26, 0.92);
    color: rgba(237, 228, 210, 0.82);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .tab-switcher-close:hover,
body[data-theme="dark"] .tab-switcher-close:focus-visible {
    background: #d84a3a;
    color: #fff8eb;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.tab-close {
    color: rgba(43, 36, 24, 0.72);
}

.tab-add {
    font-size: 1.18rem;
    line-height: 1;
}

.tab-save .icon-save {
    width: 18px;
    height: 18px;
}

.tab-close-trash-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}

.tab-close:hover:not(:disabled),
.tab-close:focus-visible:not(:disabled) {
    background: #c83f32;
    color: #fff8eb;
    box-shadow: 0 8px 16px rgba(154, 43, 32, 0.22);
}

body[data-theme="dark"] .tab-close:hover:not(:disabled),
body[data-theme="dark"] .tab-close:focus-visible:not(:disabled) {
    background: #d84a3a;
    color: #fff8eb;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.tab-close:disabled {
    opacity: 0.45;
    cursor: default;
}

.status-bar {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 0.8rem;
    line-height: 1.25;
    color: rgba(43, 36, 24, 0.66);
    background: linear-gradient(180deg, rgba(244, 232, 204, 0.72), rgba(232, 216, 181, 0.68));
    border: 1px solid rgba(123, 63, 45, 0.08);
    box-shadow: 0 8px 20px rgba(24, 19, 10, 0.08);
    backdrop-filter: blur(4px);
}

body[data-theme="dark"] .status-bar {
    color: rgba(237, 228, 210, 0.88);
    background: linear-gradient(180deg, rgba(20, 27, 31, 0.94), rgba(12, 18, 21, 0.93));
    border-color: rgba(237, 228, 210, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.app-notice {
    --app-notice-layer: 10000;
    position: absolute;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: min(460px, calc(100vw - 40px));
    padding: 12px 48px 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(123, 63, 45, 0.26);
    background: linear-gradient(180deg, rgba(255, 247, 235, 0.96), rgba(239, 219, 187, 0.94));
    color: rgba(43, 36, 24, 0.92);
    box-shadow: 0 14px 34px rgba(24, 19, 10, 0.18);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    pointer-events: none;
    z-index: var(--app-notice-layer) !important;
}

.app-notice-message {
    overflow-wrap: anywhere;
}

.app-notice-close {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: rgba(43, 36, 24, 0.58);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.app-notice-close:hover {
    border-color: rgba(123, 63, 45, 0.2);
    background: rgba(123, 63, 45, 0.1);
    color: rgba(43, 36, 24, 0.9);
}

.app-notice-close:focus-visible {
    outline: 2px solid rgba(123, 63, 45, 0.72);
    outline-offset: 1px;
}

body[data-theme="dark"] .app-notice {
    border-color: rgba(237, 228, 210, 0.16);
    background: linear-gradient(180deg, rgba(28, 37, 42, 0.98), rgba(15, 22, 25, 0.96));
    color: rgba(255, 248, 235, 0.94);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.active-riddle-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    align-self: center;
    gap: 6px;
    width: 60px;
    min-width: 60px;
    height: 40px;
    margin: 0 0 0 -2px;
    pointer-events: auto;
    overflow: visible;
    z-index: 2;
}

.active-riddle-badge.hidden {
    display: none;
}

.active-riddle-badge-entry {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 40px;
    transform: none;
    z-index: 1;
}

.active-riddle-badge-actions {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    justify-items: stretch;
    gap: 8px;
    width: max-content;
    z-index: 5601;
}

.active-riddle-badge-card {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    appearance: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    background: rgba(43, 36, 24, 0.08);
    border: 0;
    box-shadow:
        10px 0 22px rgba(24, 19, 10, 0.12),
        inset -1px 0 0 rgba(255, 250, 237, 0.2);
    backdrop-filter: none;
    transition:
        transform 140ms ease,
        box-shadow 140ms ease,
        filter 140ms ease;
}

.active-riddle-badge-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0) 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 36%);
    pointer-events: none;
}

.active-riddle-badge-card:hover {
    transform: none;
    filter: saturate(1.05) brightness(1.03);
    box-shadow:
        12px 0 24px rgba(24, 19, 10, 0.16),
        inset -1px 0 0 rgba(255, 250, 237, 0.24);
}

.active-riddle-badge-card:focus-visible {
    outline: 2px solid rgba(167, 121, 24, 0.72);
    outline-offset: -4px;
    transform: none;
}

.active-riddle-badge-card.is-selected {
    filter: saturate(1.08);
    box-shadow:
        12px 0 24px rgba(24, 19, 10, 0.16),
        inset -1px 0 0 rgba(255, 250, 237, 0.24);
}

.active-riddle-badge-card[data-riddle-session-status="paused"] {
    opacity: 0.82;
}

.active-riddle-badge-card[data-riddle-session-status="completed"] {
    box-shadow:
        12px 0 24px rgba(24, 19, 10, 0.16),
        inset -1px 0 0 rgba(255, 250, 237, 0.24);
}

.active-riddle-badge-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
    border: none;
    box-shadow: none;
}

.active-riddle-badge-status-icon {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(52, 136, 76, 0.96);
    color: rgba(255, 250, 237, 0.98);
    border: 1px solid rgba(255, 250, 237, 0.42);
    box-shadow: 0 4px 10px rgba(24, 19, 10, 0.22);
    pointer-events: none;
    z-index: 1;
}

.active-riddle-badge-status-icon-svg {
    width: 9px;
    height: 9px;
    display: block;
    fill: currentColor;
}

.active-riddle-badge-toggle {
    position: relative;
    left: auto;
    bottom: auto;
    flex: 0 0 20px;
    width: 20px;
    height: 40px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    transform: none;
    border-radius: 0 12px 12px 0;
    border: 0;
    background: rgba(247, 244, 238, 0.065);
    color: rgba(247, 244, 238, 0.88);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.08);
    backdrop-filter: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    z-index: 5602;
}

.active-riddle-badge-toggle:hover,
.active-riddle-badge-toggle:focus-visible {
    transform: none;
    background: rgba(247, 244, 238, 0.12);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.12);
}

.active-riddle-badge-toggle:focus-visible {
    outline: 2px solid rgba(167, 121, 24, 0.72);
    outline-offset: 1px;
}

.active-riddle-badge-toggle.is-selected {
    background: rgba(247, 244, 238, 0.09);
}

.active-riddle-badge-toggle-chevron {
    width: 14px;
    height: 14px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    opacity: 0.78;
    transform: rotate(0deg);
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.active-riddle-badge-toggle:hover .active-riddle-badge-toggle-chevron,
.active-riddle-badge-toggle:focus-visible .active-riddle-badge-toggle-chevron {
    opacity: 1;
    transform: translateY(1px);
}

.active-riddle-badge-entry.is-open .active-riddle-badge-toggle-chevron {
    transform: rotate(180deg);
}

.active-riddle-badge-entry.is-open .active-riddle-badge-toggle:hover .active-riddle-badge-toggle-chevron,
.active-riddle-badge-entry.is-open .active-riddle-badge-toggle:focus-visible .active-riddle-badge-toggle-chevron {
    transform: rotate(180deg) translateY(1px);
}

.active-riddle-badge-action {
    min-width: 152px;
    max-width: min(220px, calc(100vw - 36px));
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(88, 69, 37, 0.18);
    background: rgba(247, 238, 214, 0.94);
    color: rgba(43, 36, 24, 0.92);
    box-shadow: 0 12px 24px rgba(24, 19, 10, 0.16);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.active-riddle-badge-action:hover,
.active-riddle-badge-action:focus-visible {
    background: rgba(252, 246, 231, 0.98);
    border-color: rgba(88, 69, 37, 0.26);
}

body[data-theme="dark"] .active-riddle-badge-card {
    background: rgba(16, 23, 27, 0.26);
    box-shadow:
        12px 0 26px rgba(0, 0, 0, 0.28),
        inset -1px 0 0 rgba(255, 250, 237, 0.08);
}

body[data-theme="dark"] .active-riddle-badge-card:focus-visible {
    outline-color: rgba(212, 179, 92, 0.78);
}

body[data-theme="dark"] .active-riddle-badge-card.is-selected {
    box-shadow:
        12px 0 28px rgba(0, 0, 0, 0.34),
        inset -1px 0 0 rgba(255, 250, 237, 0.1);
}

body[data-theme="dark"] .active-riddle-badge-card[data-riddle-session-status="completed"] {
    box-shadow:
        12px 0 28px rgba(0, 0, 0, 0.34),
        inset -1px 0 0 rgba(255, 250, 237, 0.1);
}

body[data-theme="dark"] .active-riddle-badge-toggle {
    background: rgba(247, 244, 238, 0.065);
    color: rgba(247, 244, 238, 0.88);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.08);
}

body[data-theme="dark"] .app-notice-close {
    color: rgba(255, 248, 235, 0.62);
}

body[data-theme="dark"] .app-notice-close:hover {
    border-color: rgba(237, 228, 210, 0.18);
    background: rgba(237, 228, 210, 0.1);
    color: rgba(255, 248, 235, 0.94);
}

body[data-theme="dark"] .active-riddle-badge-toggle:hover,
body[data-theme="dark"] .active-riddle-badge-toggle:focus-visible {
    background: rgba(247, 244, 238, 0.12);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.12);
}

body[data-theme="dark"] .active-riddle-badge-toggle:focus-visible {
    outline-color: rgba(212, 179, 92, 0.78);
}

body[data-theme="dark"] .active-riddle-badge-action {
    background: rgba(20, 27, 31, 0.96);
    border-color: rgba(237, 228, 210, 0.12);
    color: rgba(245, 236, 221, 0.92);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .active-riddle-badge-action:hover,
body[data-theme="dark"] .active-riddle-badge-action:focus-visible {
    background: rgba(28, 37, 42, 0.98);
    border-color: rgba(237, 228, 210, 0.2);
}

.app-notice::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 999px;
    vertical-align: middle;
    background: var(--wine);
    box-shadow: 0 0 0 4px rgba(123, 63, 45, 0.12);
}

.app-notice[data-kind="info"]::before {
    background: var(--forest);
    box-shadow: 0 0 0 4px rgba(50, 79, 69, 0.12);
}

/* Standalone desktop projection of the active challenge. The badge is moved
   back into the compact host below the desktop breakpoint. */
.active-riddle-bar {
    position: fixed;
    top: 18px;
    left: calc(50% - 620px);
    width: min(400px, calc(100vw - 24px));
    min-width: 360px;
    padding: 0;
    overflow: visible;
    pointer-events: auto;
}

.active-riddle-bar.hidden { display: none; }

.active-riddle-bar-header {
    min-height: 44px;
    display: flex;
    align-items: stretch;
}

.active-riddle-bar-heading {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 14px;
    user-select: none;
}

.active-riddle-bar-panel-drag-handle {
    align-self: center;
    margin: 2px 6px 2px 0;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-header {
    position: absolute;
    top: 12px;
    left: 96px;
    right: 10px;
    min-height: 28px;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-heading {
    gap: 6px;
    padding: 0;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-title {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: none;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-category-icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-toggle {
    width: 26px;
    min-width: 26px;
    min-height: 28px;
}

.active-riddle-bar:not(.is-collapsed) .active-riddle-bar-panel-drag-handle {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    margin: 0 0 0 4px;
}

.active-riddle-bar-category-icon {
    width: 31.2px;
    height: 31.2px;
    flex: 0 0 31.2px;
    align-self: center;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.active-riddle-bar-category-icon.hidden { display: none; }

.active-riddle-bar-category-icon .riddle-gallery-nav-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.active-riddle-bar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.active-riddle-bar-toggle {
    position: relative;
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.active-riddle-bar-toggle-chevron {
    width: 16px;
    height: 16px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--top-bar-chevron-icon) center / 16px 16px no-repeat;
    mask: var(--top-bar-chevron-icon) center / 16px 16px no-repeat;
    transform: rotate(180deg);
    transition: transform 160ms ease;
}

.active-riddle-bar.is-collapsed .active-riddle-bar-toggle-chevron { transform: rotate(0deg); }
.active-riddle-bar.is-collapsed .active-riddle-badge { display: none; }
.active-riddle-compact-host { display: contents; }
.active-riddle-compact-host.hidden + .top-bar-riddle-divider { display: none; }

.active-riddle-desktop-entry,
.active-riddle-desktop-copy,
.active-riddle-desktop-actions { min-width: 0; }

.active-riddle-desktop-entry {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 44px 16px 16px;
}

.active-riddle-desktop-image {
    width: 64px;
    height: 68px;
    align-self: start;
    margin-top: -22px;
    object-fit: cover;
    border-radius: 9px;
}

.active-riddle-desktop-copy { display: grid; gap: 12px; }

.active-riddle-desktop-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.active-riddle-desktop-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
    gap: 8px;
}

.active-riddle-desktop-action {
    position: relative;
    width: 42px;
    min-width: 38px;
    max-width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
}

.active-riddle-desktop-action svg { width: 20px; height: 20px; }

.active-riddle-hint-panel {
    display: grid;
    gap: 10px;
    margin: 0 18px 14px;
    padding: 14px;
    border: 1px solid rgba(225, 183, 92, 0.32);
    border-radius: 14px;
    background: rgba(5, 16, 28, 0.46);
}

.active-riddle-hint-heading,
.active-riddle-hint-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.active-riddle-hint-heading > button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font-size: 1.3rem;
}

.active-riddle-hint-reward,
.active-riddle-hint-complete,
.active-riddle-hint-error,
.active-riddle-hint-panel > p { margin: 0; }

.active-riddle-hint-reward { color: #f2ca72; font-weight: 700; }
.active-riddle-hint-result { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.active-riddle-hint-result span { color: rgba(247, 244, 238, 0.68); }
.active-riddle-hint-result strong { color: rgba(255, 250, 241, 0.98); }
.active-riddle-hint-error { color: #ffb4aa; }

.active-riddle-hint-reveal {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(225, 183, 92, 0.5);
    border-radius: 11px;
    color: #fff7e5;
    background: rgba(201, 145, 35, 0.3);
    font-weight: 700;
}

.active-riddle-hint-reveal:hover:not(:disabled),
.active-riddle-hint-reveal:focus-visible:not(:disabled) {
    border-color: #f2ca72;
    background: rgba(201, 145, 35, 0.48);
}

.active-riddle-desktop-action-open-hints.is-active {
    color: #f7d98e;
    border-color: rgba(242, 202, 114, 0.72);
    background: rgba(225, 183, 92, 0.18);
}

@media (min-width: 721px) {
    .active-riddle-bar .active-riddle-badge {
        position: static;
        width: 100%;
        min-width: 0;
        height: auto;
        margin: 0;
        display: block;
    }

    .active-riddle-bar .active-riddle-badge-compact-entry,
    .top-bar-riddle-divider { display: none; }
}

@media (max-width: 720px) {
    .active-riddle-bar { display: none !important; }
    .active-riddle-desktop-entry { display: none; }
    .active-riddle-hint-panel { margin: 8px; min-width: min(300px, calc(100vw - 32px)); }
}


/* Camera controls own their surface and remain outside the map gesture target. */
.map-camera-navigation {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 830;
    width: 148px;
    padding: 10px 7px 5px;
    border: 1px solid rgba(235, 221, 190, 0.2);
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(20, 42, 68, 0.62), rgba(12, 27, 46, 0.58) 74%);
    color: #f5efdf;
    box-shadow: 0 10px 30px rgba(2, 10, 20, 0.16), inset 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
    user-select: none;
    touch-action: none;
}

.map-camera-navigation:is(:hover, :focus-within) {
    border-color: rgba(235, 221, 190, 0.27);
    background: linear-gradient(165deg, rgba(20, 42, 68, 0.74), rgba(12, 27, 46, 0.7) 74%);
    box-shadow: 0 12px 32px rgba(2, 10, 20, 0.2), inset 0 1px rgba(255, 255, 255, 0.075);
}

.map-camera-navigation[hidden],
body[data-solar-system-view] .map-camera-navigation,
body:not([data-app-surface-ready="true"]) .map-camera-navigation {
    display: none;
}

.map-camera-compass-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.map-camera-compass { width: 80px; height: 80px; border-radius: 50%; cursor: grab; }
.map-camera-compass:active { cursor: grabbing; }
.map-camera-navigation svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.map-camera-dial { width: 80px; height: 80px; overflow: visible; }
.map-camera-dial circle { stroke: rgba(235, 221, 190, 0.32); }
.map-camera-ticks { stroke: rgba(235, 221, 190, 0.6); }
.map-camera-dial .map-camera-needle-north { fill: #edb168; stroke: #edb168; }
.map-camera-dial .map-camera-needle-south { fill: rgba(235, 221, 190, 0.5); stroke: none; }

.map-camera-navigation button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    box-shadow: none;
}
.map-camera-navigation .map-camera-north {
    position: absolute;
    inset: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    isolation: isolate;
    background: transparent;
    color: #f5d5a6;
    font: 700 13px/1 system-ui, sans-serif;
}
.map-camera-north::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(37, 53, 71, 0.72);
    border: 1px solid rgba(235, 221, 190, 0.2);
}
.map-camera-navigation button:hover:not(:disabled) { background: rgba(65, 71, 68, 0.62); color: #ffe1b5; }
.map-camera-navigation :is(button, input, [role="slider"]):focus-visible { outline: 2px solid #f4c583; outline-offset: 2px; }
.map-camera-pitch-row { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 3px; }
.map-camera-pitch-row svg { flex: 0 0 17px; width: 17px; height: 17px; color: #c5c2b5; }
.map-camera-pitch {
    flex: 1;
    min-width: 0;
    width: 70px;
    height: 32px;
    margin: 0;
    padding: 0;
    accent-color: #edb168;
    background: transparent;
    cursor: ew-resize;
}

@media (max-width: 640px), (max-height: 520px) {
    .map-camera-navigation {
        padding-top: 6px;
    }
    .map-camera-compass-wrap { height: 72px; }
    .map-camera-pitch-row { height: 36px; }
}


/* Map status indicators, toolbar controls, layer menus and shared form controls. */

.map-engine-indicator {
    position: static;
    max-width: min(260px, calc(50vw - 24px));
    height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(88, 69, 37, 0.08);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.72);
    color: rgba(43, 36, 24, 0.68);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(24, 19, 10, 0.08);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

.map-engine-indicator[data-fallback="true"] {
    color: rgba(123, 63, 45, 0.74);
    background: rgba(255, 250, 237, 0.78);
}

body[data-theme="dark"] .map-engine-indicator {
    border-color: rgba(237, 228, 210, 0.08);
    background: rgba(21, 28, 32, 0.58);
    color: rgba(237, 228, 210, 0.64);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

body[data-theme="dark"] .map-engine-indicator[data-fallback="true"] {
    color: rgba(255, 214, 203, 0.82);
    background: rgba(21, 28, 32, 0.76);
}

.panel-title {
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.app-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.toolbar-primary-actions {
    margin-top: 14px;
}

.toolbar-primary-action-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
    text-align: center;
}

.toolbar-primary-action-button > span[data-i18n-text] {
    display: block;
    min-width: 0;
    text-align: center;
}

.toolbar-primary-action-icon {
    --toolbar-primary-icon-shift-y: 0px;
    position: absolute;
    left: 14px;
    top: 50%;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: currentColor;
    display: block;
    transform: translateY(calc(-50% + var(--toolbar-primary-icon-shift-y)));
}

.toolbar-primary-action-icon-map {
    width: 24px;
    height: 24px;
    --toolbar-primary-icon-shift-y: 1px;
}

.app-version {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    opacity: 0.72;
    text-align: left;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin: 0;
}

.app-version-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: opacity 160ms ease, color 160ms ease;
}

.app-version-button:hover,
.app-version-button:focus-visible {
    opacity: 1;
    color: rgba(111, 84, 38, 0.96);
}

.app-version-button:focus-visible {
    outline: 2px solid rgba(111, 84, 38, 0.28);
    outline-offset: 4px;
    border-radius: 6px;
}

.app-version-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
}

.basemap-provider-hint {
    display: grid;
    gap: 6px;
    padding: 9px 10px 10px;
    border-radius: 12px;
    background: rgba(71, 93, 79, 0.08);
    border: 1px solid rgba(71, 93, 79, 0.12);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.basemap-provider-hint::after {
    display: none;
}

.basemap-provider-hint-label {
    font-size: 0.68rem;
    line-height: 1.25;
    color: rgba(43, 36, 24, 0.7);
    text-align: center;
}

.basemap-provider-hint-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.basemap-provider-hint-action {
    width: auto;
    min-width: 78px;
    min-height: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    background: rgba(71, 93, 79, 0.07);
    border: 1px solid rgba(71, 93, 79, 0.12);
    color: rgba(50, 79, 69, 0.9);
    box-shadow: none;
    justify-content: center;
}

.basemap-provider-hint-action:hover,
.basemap-provider-hint-action:focus-visible {
    background: rgba(71, 93, 79, 0.12);
    border-color: rgba(71, 93, 79, 0.18);
    transform: none;
}

.app-update-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(167, 121, 24, 0.14);
    border: 1px solid rgba(167, 121, 24, 0.26);
    color: #7b5a10;
    box-shadow: none;
    transform: none;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    align-self: center;
}

.app-update-badge:hover,
.app-update-badge:focus-visible {
    background: rgba(167, 121, 24, 0.2);
    border-color: rgba(167, 121, 24, 0.34);
    box-shadow: none;
    transform: none;
}

body[data-theme="dark"] .app-update-badge {
    background: rgba(212, 179, 92, 0.12);
    border-color: rgba(212, 179, 92, 0.24);
    color: #f2d48a;
}

body[data-theme="dark"] .app-update-badge:hover,
body[data-theme="dark"] .app-update-badge:focus-visible {
    background: rgba(212, 179, 92, 0.18);
    border-color: rgba(212, 179, 92, 0.3);
}

body[data-theme="dark"] .basemap-provider-hint {
    background: rgba(212, 179, 92, 0.08);
    border-color: rgba(212, 179, 92, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .basemap-provider-hint::after {
    background: linear-gradient(180deg, rgba(16, 22, 25, 0.52), rgba(16, 22, 25, 0));
}

body[data-theme="dark"] .basemap-provider-hint-label {
    color: rgba(237, 228, 210, 0.72);
}

body[data-theme="dark"] .basemap-provider-hint-action {
    background: rgba(212, 179, 92, 0.08);
    border-color: rgba(212, 179, 92, 0.12);
    color: rgba(242, 212, 138, 0.84);
}

body[data-theme="dark"] .basemap-provider-hint-action:hover,
body[data-theme="dark"] .basemap-provider-hint-action:focus-visible {
    background: rgba(212, 179, 92, 0.14);
    border-color: rgba(212, 179, 92, 0.2);
}

.panel-subtitle,
.muted,
.coordinates,
#hint-label {
    color: rgba(43, 36, 24, 0.64);
    text-align: center;
}

body[data-theme="dark"] .panel-subtitle,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .coordinates,
body[data-theme="dark"] #hint-label {
    color: rgba(237, 228, 210, 0.74);
}

.section-label,
.browser-subsection-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-label {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--section-heading-color);
}

.toolbar-section {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(88, 69, 37, 0.14);
}

.toolbar-section-body {
    display: grid;
    gap: 10px;
}

.basemap-display-options {
    display: grid;
    gap: 10px;
}

.basemap-display-provider {
    display: grid;
    gap: 3px;
    padding: 0 2px;
}

.basemap-display-provider strong {
    font-size: 0.95rem;
}

.basemap-display-provider span {
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(43, 36, 24, 0.62);
}

.basemap-display-button-stack {
    gap: 8px;
}

.basemap-display-button {
    text-align: left;
}

.map-layer-control {
    position: absolute;
    right: 26px;
    bottom: 26px;
    z-index: 44;
    display: grid;
    justify-items: end;
    gap: 10px;
    pointer-events: auto;
}

.map-layer-button {
    position: relative;
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    color: rgba(43, 36, 24, 0.88);
    background: linear-gradient(180deg, rgba(255, 250, 237, 0.96), rgba(232, 216, 181, 0.92));
    border: 1px solid rgba(88, 69, 37, 0.18);
    box-shadow:
        0 14px 28px rgba(24, 19, 10, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.map-layer-button:hover,
.map-layer-button:focus-visible,
.map-layer-button[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(255, 253, 245, 0.98), rgba(239, 225, 194, 0.96));
    box-shadow:
        0 16px 32px rgba(24, 19, 10, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.map-layer-button:focus-visible {
    outline: 2px solid rgba(50, 79, 69, 0.62);
    outline-offset: 3px;
}

.map-layer-button-icon {
    width: 25px;
    height: 25px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-layer-provider-icon {
    display: none;
}

.map-layer-control.has-provider-recommendation .map-layer-button-icon:not(.map-layer-provider-icon) {
    display: none;
}

.map-layer-control.has-provider-recommendation .map-layer-provider-icon {
    display: block;
    color: currentColor;
}

.map-layer-count-badge {
    position: absolute;
    top: -6px;
    right: -4px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 2px solid rgba(255, 250, 237, 0.96);
    background: #e84a4a;
    color: #fffaf0;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(74, 20, 20, 0.28);
    pointer-events: none;
}

.map-layer-menu {
    width: min(236px, calc(100vw - 40px));
    padding: 10px;
    border: 1px solid rgba(88, 69, 37, 0.18);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 250, 237, 0.94), rgba(232, 216, 181, 0.9));
    box-shadow: 0 18px 36px rgba(24, 19, 10, 0.2);
    backdrop-filter: blur(12px);
}

.map-layer-menu .basemap-display-button-stack {
    gap: 8px;
}

.map-layer-menu .basemap-provider-hint:not(.hidden) + .basemap-display-options:not(:empty) {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid rgba(88, 69, 37, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 250, 237, 0.48);
}

.map-layer-menu-button {
    min-height: 38px;
    justify-content: flex-start;
}

body[data-theme="dark"] .map-layer-menu {
    background: linear-gradient(180deg, rgba(20, 27, 31, 0.96), rgba(12, 18, 21, 0.94));
    border-color: rgba(237, 228, 210, 0.12);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

body[data-theme="dark"] .map-layer-menu .basemap-provider-hint:not(.hidden) + .basemap-display-options:not(:empty) {
    border-top-color: rgba(237, 228, 210, 0.2);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .map-layer-button {
    color: rgba(237, 228, 210, 0.9);
    background: linear-gradient(180deg, rgba(30, 38, 43, 0.96), rgba(16, 23, 27, 0.94));
    border-color: rgba(237, 228, 210, 0.12);
}

body[data-theme="dark"] .map-layer-button:hover,
body[data-theme="dark"] .map-layer-button:focus-visible,
body[data-theme="dark"] .map-layer-button[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(37, 48, 54, 0.98), rgba(22, 31, 35, 0.96));
}

.toolbar-section-toggle,
.browser-section-toggle {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    text-align: left;
}

.toolbar-section-toggle:hover,
.toolbar-section-toggle:focus-visible,
.browser-section-toggle:hover,
.browser-section-toggle:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.toolbar-section-label {
    margin: 0;
}

.toolbar-section-chevron,
.browser-section-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid rgba(88, 69, 37, 0.62);
    border-bottom: 2px solid rgba(88, 69, 37, 0.62);
    transform: rotate(45deg);
    transition: transform 140ms ease, opacity 140ms ease;
    opacity: 0.86;
}

.toolbar-section-toggle.collapsed .toolbar-section-chevron,
.browser-section-toggle.collapsed .browser-section-chevron {
    transform: rotate(-45deg);
}

.button-grid,
.button-stack {
    display: grid;
    gap: 8px;
}

.icon-button-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.icon-tool-button {
    min-width: 0;
    height: 46px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.icon-tool-button.danger {
    color: #6a2c1d;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    background: rgba(71, 93, 79, 0.12);
    color: var(--ink);
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

button:hover {
    transform: translateY(-1px);
    background: rgba(71, 93, 79, 0.22);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
}

button.active {
    background: linear-gradient(180deg, var(--forest), #22362f);
    color: #fff8eb;
}

.toolbar .tool-button {
    border: 1px solid transparent;
    transition:
        transform 120ms ease,
        background 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.toolbar .tool-button.active {
    background: rgba(255, 248, 235, 0.72);
    border-color: rgba(50, 79, 69, 0.26);
    color: #22362f;
    box-shadow:
        inset 0 0 0 1px rgba(50, 79, 69, 0.08),
        0 8px 16px rgba(24, 19, 10, 0.06);
}

.toolbar .tool-button.active:hover,
.toolbar .tool-button.active:focus-visible {
    background: rgba(255, 248, 235, 0.82);
    border-color: rgba(50, 79, 69, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(50, 79, 69, 0.12),
        0 10px 18px rgba(24, 19, 10, 0.08);
}

.toolbar .tool-button-draggable {
    cursor: grab;
}

.toolbar .tool-button-draggable:active,
.toolbar .tool-button-draggable.is-tool-dragging {
    cursor: grabbing;
}

.toolbar .is-tool-dragging {
    opacity: 0.78;
    transform: translateY(1px);
}

button.danger {
    background: rgba(123, 63, 45, 0.14);
}

button.danger:hover {
    background: rgba(123, 63, 45, 0.22);
}

.toolbar button[data-tooltip],
.inspector-group-global-toolbar button[data-tooltip] {
    position: relative;
    overflow: visible;
}

.toolbar button[data-tooltip]::after,
.inspector-group-global-toolbar button[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    width: 220px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(43, 36, 24, 0.94);
    color: #fff8eb;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) translateX(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
    z-index: 30;
    transition:
        opacity 120ms ease,
        transform 120ms ease,
        visibility 0s linear 120ms;
    transition-delay: 0s, 0s, 120ms;
}

.toolbar button[data-tooltip]::before,
.inspector-group-global-toolbar button[data-tooltip]::before {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    width: 10px;
    height: 10px;
    background: rgba(43, 36, 24, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
    z-index: 29;
    transition:
        opacity 120ms ease,
        visibility 0s linear 120ms;
    transition-delay: 0s, 120ms;
}

.toolbar button[data-tooltip]:hover::after,
.toolbar button[data-tooltip]:hover::before,
.toolbar button[data-tooltip]:focus-visible::after,
.toolbar button[data-tooltip]:focus-visible::before,
.inspector-group-global-toolbar button[data-tooltip]:hover::after,
.inspector-group-global-toolbar button[data-tooltip]:hover::before,
.inspector-group-global-toolbar button[data-tooltip]:focus-visible::after,
.inspector-group-global-toolbar button[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.toolbar button[data-tooltip]:hover::after,
.toolbar button[data-tooltip]:focus-visible::after,
.inspector-group-global-toolbar button[data-tooltip]:hover::after,
.inspector-group-global-toolbar button[data-tooltip]:focus-visible::after {
    transform: translateY(-50%) translateX(0);
    transition-delay: 1050ms, 1050ms, 1050ms;
}

.toolbar button[data-tooltip]:hover::before,
.toolbar button[data-tooltip]:focus-visible::before,
.inspector-group-global-toolbar button[data-tooltip]:hover::before,
.inspector-group-global-toolbar button[data-tooltip]:focus-visible::before {
    transition-delay: 1050ms, 1050ms;
}

.editor {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.basemap-settings {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.basemap-settings label {
    display: grid;
    gap: 4px;
    font-size: 0.92rem;
    color: rgba(43, 36, 24, 0.82);
}

.basemap-settings select,
.basemap-settings input {
    width: 100%;
}

.basemap-provider-fields {
    display: grid;
    gap: 8px;
}

.basemap-help {
    font-size: 0.82rem;
    color: rgba(43, 36, 24, 0.66);
    line-height: 1.35;
}
.plan-appearance-radial-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.plan-appearance-radial-icon circle {
    fill: currentColor;
    stroke: none;
}

.plan-appearance-panel {
    position: fixed;
    z-index: 58;
    top: 88px;
    right: 88px;
    width: min(470px, calc(100vw - 32px));
    max-height: min(720px, calc(100dvh - 112px));
    overflow: auto;
}

.plan-appearance-subtitle,
.plan-appearance-help {
    margin-top: 4px;
    color: var(--text-muted, #66736f);
    font-size: 0.78rem;
    line-height: 1.4;
}

.plan-appearance-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--accent, #2f8f7a) 18%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel-bg, #fff) 82%, var(--accent, #2f8f7a) 5%);
}

.plan-appearance-tabs button {
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    border-radius: 10px;
    color: var(--text-muted, #66736f);
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.plan-appearance-tabs button.active {
    color: var(--text, #18312b);
    background: var(--panel-bg, #fff);
    box-shadow: 0 5px 16px rgba(16, 43, 36, 0.1);
}

.plan-appearance-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.plan-appearance-choice-grid button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--text, #18312b) 14%, transparent);
    border-radius: 12px;
    color: var(--text, #18312b);
    background: color-mix(in srgb, var(--panel-bg, #fff) 94%, transparent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.plan-appearance-choice-grid button:hover,
.plan-appearance-choice-grid button.active {
    border-color: color-mix(in srgb, var(--accent, #2f8f7a) 70%, transparent);
    background: color-mix(in srgb, var(--accent, #2f8f7a) 11%, var(--panel-bg, #fff));
}

.plan-appearance-swatch {
    flex: 0 0 44px;
    height: 34px;
    border: 1px solid rgba(20, 30, 28, 0.16);
    border-radius: 8px;
    background: linear-gradient(145deg, #dbe9df, #f7f4e8 54%, #b9d3c8);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.plan-appearance-swatch[data-appearance-swatch="parchment"] {
    background: repeating-linear-gradient(8deg, rgba(94, 62, 28, 0.09) 0 1px, transparent 1px 5px), #d9c399;
}

.plan-appearance-swatch[data-appearance-swatch="cinematic"] {
    background: linear-gradient(152deg, #263d45 0 34%, #7f9a72 35% 60%, #d2a45e 61% 100%);
}

.plan-appearance-swatch[data-appearance-swatch="expedition"] {
    background: linear-gradient(145deg, #254f57, #587758 42%, #b89866 43% 57%, #3d6255 58%);
}

.plan-appearance-swatch[data-appearance-swatch="atlas"] {
    background: radial-gradient(ellipse at 55% 45%, #e4d59d 0 20%, #aab675 21% 40%, #5d8975 41% 61%, #34556d 62%);
}

.plan-appearance-swatch[data-appearance-swatch="nocturne"] {
    background: radial-gradient(circle at 65% 35%, #4b6372, #15242d 68%);
}

.plan-appearance-swatch[data-appearance-swatch="blueprint"] {
    background-color: #174d69;
    background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 8px 8px;
}

.plan-appearance-swatch[data-appearance-swatch="archive"] {
    background: repeating-linear-gradient(90deg, #ad9670 0 2px, #c2ac86 2px 5px);
}

.plan-appearance-range {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 12px;
    align-items: center;
    margin-top: 16px;
    color: var(--text, #18312b);
    font-size: 0.82rem;
    font-weight: 650;
}

.plan-appearance-range output {
    color: var(--text-muted, #66736f);
    font-variant-numeric: tabular-nums;
}

.plan-appearance-range input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    accent-color: var(--accent, #2f8f7a);
}

.plan-appearance-choice-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
}

.plan-appearance-choice-grid-three button {
    justify-content: center;
    min-height: 38px;
    padding: 7px 8px;
    text-align: center;
}

.plan-appearance-feature-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: start;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #2f8f7a) 18%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--panel-bg, #fff) 92%, var(--accent, #2f8f7a) 4%);
    cursor: pointer;
}

.plan-appearance-feature-toggle input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--accent, #2f8f7a);
}

.plan-appearance-feature-toggle span,
.plan-appearance-feature-toggle strong,
.plan-appearance-feature-toggle small {
    display: block;
}

.plan-appearance-feature-toggle strong {
    color: var(--text, #18312b);
    font-size: 0.84rem;
}

.plan-appearance-feature-toggle small,
.plan-appearance-source-note {
    margin-top: 3px;
    color: var(--text-muted, #66736f);
    font-size: 0.75rem;
    line-height: 1.4;
}

.plan-appearance-source-note {
    margin-bottom: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text, #18312b) 9%, transparent);
}

.plan-appearance-section-title {
    margin: 18px 0 8px;
    color: var(--text, #18312b);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.plan-appearance-section-title:first-child {
    margin-top: 0;
}

.plan-appearance-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--text, #18312b) 10%, transparent);
}

.plan-appearance-readonly-note {
    display: none;
    margin-bottom: 12px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--text-muted, #66736f);
    background: color-mix(in srgb, var(--accent, #2f8f7a) 8%, transparent);
    font-size: 0.78rem;
    line-height: 1.4;
}

.plan-appearance-panel[data-read-only="true"] .plan-appearance-readonly-note {
    display: block;
}

.plan-appearance-panel button:disabled,
.plan-appearance-panel input:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}
.maphora-maptiler-logo {
    position: absolute;
    bottom: 28px;
    left: 10px;
    z-index: 2;
    display: block;
    width: 100px;
    height: 30px;
}

.maphora-maptiler-logo img {
    display: block;
    width: 100%;
    height: 100%;
}


.map-click-menu-anchor {
    position: fixed;
    z-index: 5459;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border: 2px solid var(--maphora-gold, #d4a017);
    border-radius: 50%;
    background: rgba(8, 24, 39, 0.12);
    box-shadow:
        0 0 0 1px rgba(7, 20, 33, 0.78),
        0 0 0 6px rgba(212, 160, 23, 0.16),
        0 5px 16px rgba(3, 10, 18, 0.42),
        inset 0 0 10px rgba(7, 20, 33, 0.16);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: map-click-menu-anchor-enter 180ms ease-out both;
}

.map-click-menu-anchor::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(7, 20, 33, 0.72);
    border-radius: 50%;
    background: #f2ca72;
    box-shadow: 0 0 7px rgba(242, 202, 114, 0.72);
    transform: translate(-50%, -50%);
}

.map-click-menu-anchor[hidden] {
    display: none;
}

.map-click-menu {
    position: fixed;
    z-index: 5460;
    width: min(18rem, calc(100vw - 24px));
    display: grid;
    gap: 6px;
    padding: 9px;
    border: 1px solid rgba(214, 169, 75, 0.36);
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 0%, rgba(225, 183, 92, 0.13), transparent 42%),
        var(--maphora-chrome-gradient, linear-gradient(165deg, #142a44, #0c1b2e 74%));
    color: rgba(247, 244, 238, 0.92);
    box-shadow:
        0 18px 44px rgba(3, 10, 18, 0.4),
        0 0 24px rgba(9, 24, 40, 0.22),
        inset 0 1px 0 rgba(255, 244, 200, 0.1);
    font-family: var(--maphora-ui-font, "Segoe UI", Arial, sans-serif);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    transform-origin: top left;
    animation: map-click-menu-enter 140ms ease-out both;
}

.map-click-menu[hidden] {
    display: none;
}

.map-click-menu-coordinate-block {
    display: grid;
    gap: 3px;
    padding: 8px 10px 6px;
}

.map-click-menu-coordinate-label {
    color: #f2ca72;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.map-click-menu-coordinate-value {
    color: rgba(247, 244, 238, 0.78);
    font-family: inherit;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.015em;
    user-select: text;
}

.map-click-menu-action {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border: 1px solid rgba(247, 244, 238, 0.13);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
        rgba(12, 27, 46, 0.34);
    color: var(--maphora-ivory, #f7f4ee);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.map-click-menu-action:hover,
.map-click-menu-action:focus-visible {
    border-color: rgba(239, 198, 111, 0.48);
    background:
        linear-gradient(180deg, rgba(239, 198, 111, 0.16), rgba(239, 198, 111, 0.08)),
        rgba(12, 27, 46, 0.42);
    color: #f2ca72;
    box-shadow: inset 0 1px 0 rgba(255, 244, 200, 0.08);
    transform: none;
}

.map-click-menu-action:active {
    transform: translateY(1px);
}

.map-click-menu-action-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: grid;
    place-items: center;
    color: #f2ca72;
    transition: color 150ms ease;
}

.map-click-menu-action-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[data-theme="dark"] .map-click-menu {
    border-color: rgba(214, 169, 75, 0.42);
    background:
        radial-gradient(circle at 18% 0%, rgba(225, 183, 92, 0.1), transparent 42%),
        linear-gradient(165deg, #10233a, #071522 76%);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 244, 200, 0.08);
}

@keyframes map-click-menu-enter {
    from {
        opacity: 0;
        transform: translateY(-3px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes map-click-menu-anchor-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 640px), (pointer: coarse) {
    .map-click-menu-action {
        min-height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-click-menu-anchor,
    .map-click-menu {
        animation: none;
    }

    .map-click-menu-action {
        transition: none;
    }
}


/* Plan image, video and shape tools, overlays, manipulators and shared object controls. */

.image-tools {
    display: grid;
    gap: 10px;
}

.shape-picker-group {
    position: relative;
    display: grid;
    gap: 8px;
}

.shape-palette {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg);
}

.shape-palette.hidden {
    display: none;
}

.shape-palette-item {
    min-width: 0;
    min-height: 74px;
    padding: 8px 6px;
    display: grid;
    gap: 6px;
    justify-items: center;
    align-content: center;
    background: var(--surface-card-bg-strong);
    border: 1px solid var(--surface-card-border);
    box-shadow: none;
    transform: none;
    cursor: grab;
}

.shape-palette-item:active {
    cursor: grabbing;
}

.shape-palette-icon {
    width: 38px;
    height: 38px;
    color: rgba(123, 63, 45, 0.9);
    overflow: visible;
}

.shape-palette-icon rect,
.shape-palette-icon circle,
.shape-palette-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shape-palette-label {
    font-size: 0.76rem;
    line-height: 1.1;
    text-align: center;
}

.shape-palette-item:hover,
.shape-palette-item:focus-visible {
    background: rgba(71, 93, 79, 0.12);
    box-shadow: none;
    transform: none;
}

.shape-palette-item.active,
.shape-palette-item[aria-current="true"] {
    border-color: rgba(123, 63, 45, 0.45);
    background: rgba(71, 93, 79, 0.16);
    color: rgba(123, 63, 45, 0.95);
}

.shape-palette-item.dragging {
    opacity: 0.55;
}

.image-upload-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.image-upload-row button {
    flex: 1 1 auto;
}

.gallery-list {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow: auto;
}

.gallery-card {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg);
    cursor: grab;
}

.gallery-card:active {
    cursor: grabbing;
}

.gallery-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 255, 255, 0.72);
}

.gallery-meta {
    min-width: 0;
}

.gallery-name {
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-subtitle {
    font-size: 0.78rem;
    color: rgba(43, 36, 24, 0.62);
}

.gallery-delete {
    position: absolute;
    top: calc(50% - 17px);
    right: 8px;
    transform: none;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(123, 63, 45, 0.28);
    background: rgba(255, 250, 237, 0.96);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.32),
        0 6px 14px rgba(24, 19, 10, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 120ms ease;
}

.gallery-card:hover .gallery-delete,
.gallery-card:focus-within .gallery-delete {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.plan-image-action-button,
.plan-image-action-button:hover {
    opacity: 1;
}

.image-controls {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-card-border);
}

.image-controls.hidden {
    display: none;
}

.image-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.image-control-row input[type="range"] {
    flex: 1 1 auto;
}

.image-control-value {
    min-width: 58px;
    text-align: right;
    font-size: 0.82rem;
    color: rgba(43, 36, 24, 0.68);
}

.plan-image-icon {
    background: transparent !important;
    border: 0 !important;
}

.plan-image-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: grab;
}

.riddle-map-content-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.24));
    opacity: 0.94;
    will-change: left, top;
}

.riddle-map-content-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    user-select: none;
}

.riddle-map-content-overlay.is-unavailable {
    display: none;
}

.plan-image-fixed-size {
    transition: none !important;
}

.plan-image-overlay.is-dragging {
    cursor: grabbing;
}

.plan-shape-overlay {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    cursor: grab;
}

.plan-shape-overlay.is-dragging {
    cursor: grabbing;
}

.plan-shape-frame {
    position: absolute;
    display: block;
    border-radius: 0;
    overflow: visible;
    filter: drop-shadow(0 12px 24px rgba(24, 19, 10, 0.14));
    transition:
        box-shadow 140ms ease,
        filter 140ms ease,
        transform 140ms ease;
    pointer-events: none;
}

.plan-shape-frame.selected {
    filter: drop-shadow(0 18px 30px var(--map-selection-shadow));
    transform: scale(1.03);
}

.plan-shape-frame svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.plan-shape-selection-frame {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.maplibre-tool-overlay[data-camera-owner="maplibre"] .plan-shape-overlay {
    pointer-events: none;
}

.plan-shape-hit-target {
    fill: none;
    stroke: transparent;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
}

.plan-shape-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-shape-radiance-layer {
    color: currentColor;
    pointer-events: none;
}

.plan-shape-radiance-fill {
    fill: currentColor;
    stroke: none;
    opacity: var(--shape-radiance-opacity, 0.16);
    pointer-events: none;
}

.plan-shape-radiance-outline {
    fill: none;
    stroke: #fff;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: var(--shape-radiance-outline-opacity, 0.18);
    pointer-events: none;
}

.plan-freeform-shape-layer {
    filter: drop-shadow(0 6px 14px rgba(24, 19, 10, 0.16));
}

.plan-freeform-shape-layer.selected {
    filter:
        drop-shadow(0 0 2px rgba(255, 250, 237, 0.9))
        drop-shadow(0 0 12px var(--map-selection-shadow));
}

.plan-freeform-shape-radiance {
    pointer-events: none;
}

.freeform-area-shell {
    display: inline-flex;
    width: max-content;
    overflow: visible;
}

.freeform-area-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 5px 9px;
    color: #fff8e5;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(242, 169, 0, 0.96);
    border-radius: 12px;
    background: rgba(12, 29, 44, 0.92);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    transition: opacity 180ms ease, filter 180ms ease;
}

.maphora-emissive-path {
    --maphora-user-path-color: currentColor;
    --maphora-path-glow-wide-width: 14;
    --maphora-path-glow-mid-width: 9;
    --maphora-path-core-width: 4;
    --maphora-path-glow-wide-opacity: 0.12;
    --maphora-path-glow-mid-opacity: 0.22;
    --maphora-path-core-opacity: 0.96;
}

/* All three strokes inherit the user's path color; width and opacity create the glow. */
.plan-shape-frame .maphora-user-path-glow-wide,
.plan-shape-frame .maphora-user-path-glow-mid,
.plan-shape-frame .maphora-user-path-core {
    fill: none;
    stroke: var(--maphora-user-path-color, currentColor);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maphora-user-path-glow-wide,
.maphora-user-path-glow-mid {
    pointer-events: none;
}

.plan-shape-frame .maphora-user-path-glow-wide {
    stroke-width: var(--maphora-path-glow-wide-width);
    opacity: var(--maphora-path-glow-wide-opacity);
    filter: blur(1.8px);
}

.plan-shape-frame .maphora-user-path-glow-mid {
    stroke-width: var(--maphora-path-glow-mid-width);
    opacity: var(--maphora-path-glow-mid-opacity);
    filter: blur(0.8px);
}

.plan-shape-frame .maphora-user-path-core {
    stroke-width: var(--maphora-path-core-width);
    opacity: var(--maphora-path-core-opacity);
}

body.maphora-emissive-paths-disabled .maphora-user-path-glow-wide,
body.maphora-emissive-paths-disabled .maphora-user-path-glow-mid,
.maphora-emissive-path.no-emissive-glow .maphora-user-path-glow-wide,
.maphora-emissive-path.no-emissive-glow .maphora-user-path-glow-mid {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .maphora-user-path-glow-wide,
    .maphora-user-path-glow-mid {
        display: none;
    }
}

.plan-shape-center-guide {
    opacity: 0.3;
    pointer-events: none;
}

.plan-shape-center-guide path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.speed-time-range-label {
    position: absolute;
    left: 50%;
    top: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 220px;
    padding: 4px 8px;
    transform: translate(-50%, -100%);
    border-radius: 999px;
    background: rgba(32, 39, 37, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.18);
    color: #fff8eb;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

body[data-theme="dark"] .speed-time-range-label {
    background: rgba(237, 228, 210, 0.92);
    border-color: rgba(16, 23, 27, 0.18);
    color: rgba(16, 23, 27, 0.92);
}

.speed-time-range-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px 12px;
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.52);
    border: 1px solid rgba(88, 69, 37, 0.16);
}

.speed-time-range-field {
    display: grid;
    gap: 5px;
    color: rgba(43, 36, 24, 0.72);
    font-size: 0.73rem;
    font-weight: 700;
}

.speed-time-range-field input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.22);
    background: rgba(255, 250, 237, 0.84);
    color: rgba(43, 36, 24, 0.9);
    font: inherit;
    font-weight: 650;
}

.speed-time-range-input-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.speed-time-range-input-shell input {
    padding-right: 10px;
}

.speed-time-range-unit {
    max-width: 82px;
    overflow: hidden;
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

body[data-theme="dark"] .speed-time-range-controls {
    background: rgba(16, 23, 27, 0.54);
    border-color: rgba(237, 228, 210, 0.16);
}

body[data-theme="dark"] .speed-time-range-field {
    color: rgba(237, 228, 210, 0.72);
}

body[data-theme="dark"] .speed-time-range-field input {
    background: rgba(16, 23, 27, 0.78);
    border-color: rgba(237, 228, 210, 0.18);
    color: rgba(237, 228, 210, 0.9);
}

body[data-theme="dark"] .speed-time-range-unit {
    color: rgba(237, 228, 210, 0.62);
}

body[data-theme="dark"] .plan-shape-center-guide {
    opacity: 0.42;
}

.plan-shape-manipulator {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 250, 237, 0.96);
    border: 2px solid rgba(43, 36, 24, 0.8);
    box-shadow: 0 3px 10px rgba(24, 19, 10, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    pointer-events: auto;
}

.plan-shape-manipulator.rotate {
    left: 50%;
    top: -28px;
    width: 16px;
    height: 16px;
    transform: translateX(-50%);
    cursor: grab;
    background: rgba(50, 79, 69, 0.96);
    border-color: rgba(255, 250, 237, 0.94);
    color: rgba(255, 250, 237, 0.96);
}

.plan-shape-overlay.is-rotating .plan-shape-manipulator.rotate {
    cursor: grabbing;
}

.plan-shape-overlay:hover .plan-shape-manipulator,
.plan-shape-frame.selected .plan-shape-manipulator,
.plan-shape-overlay.is-manipulating .plan-shape-manipulator,
.plan-shape-overlay.is-rotating .plan-shape-manipulator {
    opacity: 1;
    visibility: visible;
}

.plan-shape-manipulator.resize-nw,
.plan-shape-manipulator.resize-se {
    cursor: nwse-resize;
}

.plan-shape-manipulator.resize-ne,
.plan-shape-manipulator.resize-sw {
    cursor: nesw-resize;
}

.plan-shape-manipulator.resize-nw {
    left: -10px;
    top: -10px;
}

.plan-shape-manipulator.resize-ne {
    right: -10px;
    top: -10px;
}

.plan-shape-manipulator.resize-se {
    right: -10px;
    bottom: -10px;
}

.plan-shape-manipulator.resize-sw {
    left: -10px;
    bottom: -10px;
}

.plan-shape-selection-frame[data-shape-frame-kind="circle"] .plan-shape-manipulator.resize-nw {
    left: 14.65%;
    top: 14.65%;
    transform: translate(-50%, -50%);
}

.plan-shape-selection-frame[data-shape-frame-kind="circle"] .plan-shape-manipulator.resize-ne {
    right: 14.65%;
    top: 14.65%;
    transform: translate(50%, -50%);
}

.plan-shape-selection-frame[data-shape-frame-kind="circle"] .plan-shape-manipulator.resize-se {
    right: 14.65%;
    bottom: 14.65%;
    transform: translate(50%, 50%);
}

.plan-shape-selection-frame[data-shape-frame-kind="circle"] .plan-shape-manipulator.resize-sw {
    left: 14.65%;
    bottom: 14.65%;
    transform: translate(-50%, 50%);
}

.plan-shape-size-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 182px;
    padding: 6px 10px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 250, 237, 0.96);
    border: 1px solid rgba(88, 69, 37, 0.18);
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.16);
    pointer-events: auto;
}

.plan-shape-size-label,
.plan-shape-size-value {
    font-size: 0.74rem;
    color: rgba(43, 36, 24, 0.74);
    white-space: nowrap;
}

.plan-shape-size-value {
    min-width: 44px;
    text-align: right;
}

.plan-shape-size-panel input[type="range"] {
    width: 104px;
    margin: 0;
    padding: 0;
    background: transparent;
}

body[data-theme="dark"] .plan-shape-size-panel {
    background: rgba(16, 23, 27, 0.96);
    border-color: rgba(237, 228, 210, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .plan-shape-size-label,
body[data-theme="dark"] .plan-shape-size-value {
    color: rgba(237, 228, 210, 0.82);
}

.plan-image-frame {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: visible;
    filter: drop-shadow(0 12px 24px rgba(24, 19, 10, 0.22));
    transition:
        box-shadow 140ms ease,
        filter 140ms ease,
        transform 140ms ease,
        outline-color 140ms ease;
}

.plan-image-frame.selected {
    outline: 4px solid var(--map-selection-core);
    outline-offset: 4px;
    box-shadow:
        0 0 0 10px var(--map-selection-ring-soft),
        0 18px 30px var(--map-selection-shadow);
    transform: scale(1.02);
}

.plan-image-frame.plan-video-frame.selected {
    transform: none;
}

.plan-image-manipulator,
.plan-image-rotate-stem,
.plan-image-opacity-panel,
.plan-image-action-button {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
}

.plan-image-overlay:hover .plan-image-manipulator,
.plan-image-overlay:hover .plan-image-rotate-stem,
.plan-image-overlay:hover .plan-image-opacity-panel,
.plan-image-overlay:hover .plan-image-action-button,
.plan-image-overlay.is-manipulating .plan-image-manipulator,
.plan-image-overlay.is-manipulating .plan-image-rotate-stem,
.plan-image-overlay.is-manipulating .plan-image-opacity-panel,
.plan-image-overlay.is-manipulating .plan-image-action-button {
    opacity: 1;
    visibility: visible;
}

.plan-image-manipulator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 250, 237, 0.96);
    border: 2px solid rgba(43, 36, 24, 0.8);
    box-shadow: 0 3px 10px rgba(24, 19, 10, 0.22);
}

.plan-image-manipulator.resize-nw,
.plan-image-manipulator.resize-se {
    cursor: nwse-resize;
}

.plan-image-manipulator.resize-ne,
.plan-image-manipulator.resize-sw {
    cursor: nesw-resize;
}

.plan-image-manipulator.resize-nw {
    left: -10px;
    top: -10px;
}

.plan-image-manipulator.resize-ne {
    right: -10px;
    top: -10px;
}

.plan-image-manipulator.resize-se {
    right: -10px;
    bottom: -10px;
}

.plan-image-manipulator.resize-sw {
    left: -10px;
    bottom: -10px;
}

.plan-image-rotate-stem {
    left: 50%;
    top: -20px;
    width: 2px;
    height: 10px;
    transform: translateX(-50%);
    background: rgba(43, 36, 24, 0.5);
    pointer-events: none;
}

.plan-image-manipulator.rotate {
    left: 50%;
    top: -30px;
    width: 16px;
    height: 16px;
    transform: translateX(-50%);
    cursor: grab;
    background: rgba(50, 79, 69, 0.96);
    border-color: rgba(255, 250, 237, 0.94);
    color: rgba(255, 250, 237, 0.96);
}

.plan-image-overlay.is-rotating .plan-image-manipulator.rotate {
    cursor: grabbing;
}

.plan-image-opacity-panel {
    left: 50%;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 154px;
    padding: 6px 10px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 250, 237, 0.96);
    border: 1px solid rgba(88, 69, 37, 0.18);
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.16);
}

.plan-image-opacity-panel input[type="range"] {
    width: 112px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.plan-image-opacity-value {
    min-width: 36px;
    font-size: 0.74rem;
    color: rgba(43, 36, 24, 0.72);
    text-align: right;
}

.plan-image-action-button {
    left: -36px;
    top: -36px;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(123, 63, 45, 0.16);
    background: rgba(255, 250, 237, 0.98);
    color: rgba(123, 63, 45, 0.94);
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.14);
    cursor: pointer;
    line-height: 1;
    overflow: visible;
    z-index: 3;
}

.plan-image-action-button .plan-image-close-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    display: block;
    flex: 0 0 auto;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: 1;
    pointer-events: none;
    transform: none !important;
}

.plan-image-action-button:hover {
    background: rgba(255, 250, 237, 0.98);
    border-color: rgba(123, 63, 45, 0.16);
    color: rgba(123, 63, 45, 0.8);
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.14);
    transform: none;
}

.plan-image-frame img {
    display: block;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: 10px;
    pointer-events: none;
}

.plan-document-surface {
    display: block;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    pointer-events: none;
    user-select: none;
    transform-origin: center center;
}

.plan-video-surface {
    background: #101010;
    pointer-events: auto;
}

.plan-image-frame.selected .plan-video-surface {
    pointer-events: auto;
}

.coordinate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hidden {
    display: none;
}

/* Keep floating panel textures resident across close/open cycles. A tiny
   non-zero opacity prevents Chromium from discarding their compositor tiles;
   pointer blocking, aria-hidden and inert keep them fully non-interactive. */
.panel.draggable-panel {
    will-change: opacity;
}

.panel.draggable-panel.hidden {
    display: block !important;
    opacity: 0.001 !important;
    pointer-events: none !important;
}

.plan-image-frame img.hidden,
.plan-document-surface.hidden {
    display: none;
}

textarea,
input,
select {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(88, 69, 37, 0.16);
    background: rgba(255, 250, 237, 0.82);
    padding: 10px 12px;
    color: var(--ink);
}

body[data-theme="dark"] textarea,
body[data-theme="dark"] input,
body[data-theme="dark"] select {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(11, 18, 21, 0.72);
    color: var(--ink);
}

body[data-theme="dark"] .shape-palette-icon {
    color: rgba(237, 228, 210, 0.86);
}

body[data-theme="dark"] .toolbar-section-chevron,
body[data-theme="dark"] .browser-section-chevron {
    border-color: rgba(237, 228, 210, 0.7);
}

body[data-theme="dark"] .toolbar-section {
    border-top-color: rgba(237, 228, 210, 0.1);
}

body[data-theme="dark"] .basemap-display-provider span {
    color: rgba(237, 228, 210, 0.62);
}

body[data-theme="dark"] .gallery-delete {
    border-color: rgba(237, 228, 210, 0.18);
    background: rgba(20, 27, 31, 0.96);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 210, 0.08),
        0 6px 14px rgba(0, 0, 0, 0.2);
}


.screenshot-capture-overlay {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.screenshot-capture-overlay.hidden {
    display: none;
}

.screenshot-capture-indicator {
    display: grid;
    gap: 18px;
    width: min(420px, calc(100vw - 56px));
    min-height: min(420px, calc(100vh - 56px));
    padding: 48px 34px;
    border-radius: 18px;
    background:
        linear-gradient(#f1d8a2, #f1d8a2) left top / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left top / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right top / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right top / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left bottom / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left bottom / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right bottom / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right bottom / 4px 54px no-repeat;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    align-content: center;
    justify-items: center;
    text-align: center;
    pointer-events: none;
}

.screenshot-capture-camera {
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 248, 218, 0.18), rgba(255, 248, 218, 0) 42%),
        linear-gradient(180deg, rgba(72, 61, 42, 0.96), rgba(14, 13, 12, 0.98));
    border: 2px solid rgba(239, 214, 154, 0.42);
    box-shadow:
        0 0 0 8px rgba(241, 216, 162, 0.08),
        0 0 36px rgba(241, 216, 162, 0.42),
        0 18px 36px rgba(16, 12, 8, 0.3),
        inset 0 1px 0 rgba(255, 248, 221, 0.18);
}

.screenshot-capture-camera svg {
    width: 48px;
    height: 48px;
    stroke: #f4d79b;
    stroke-width: 3.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.screenshot-capture-camera .camera-indicator-dot {
    fill: #f4d79b;
    stroke: none;
}

.screenshot-capture-copy {
    display: grid;
    gap: 4px;
}

.screenshot-capture-title {
    color: #fff8ea;
    font-size: 1.36rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.62),
        0 0 16px rgba(0, 0, 0, 0.42);
}

.screenshot-capture-hint {
    color: #fff8ea;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.28;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.62),
        0 0 16px rgba(0, 0, 0, 0.42);
}

.screenshot-capture-hint.secondary {
    color: #fff8ea;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.28;
}

body.capture-mode-pending .screenshot-capture-overlay {
    opacity: 0;
    pointer-events: none;
}

.screenshot-capture-flash {
    position: fixed;
    inset: 0;
    z-index: 5100;
    background: rgba(255, 255, 255, 0.92);
    opacity: 0;
    pointer-events: none;
}

.screenshot-capture-flash.active {
    animation: screenshot-capture-flash 180ms ease-out;
}

@keyframes screenshot-capture-flash {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 0.96;
    }

    100% {
        opacity: 0;
    }
}

body[data-theme="dark"] .screenshot-capture-indicator {
    background:
        linear-gradient(#f1d8a2, #f1d8a2) left top / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left top / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right top / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right top / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left bottom / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) left bottom / 4px 54px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right bottom / 54px 4px no-repeat,
        linear-gradient(#f1d8a2, #f1d8a2) right bottom / 4px 54px no-repeat;
}

body[data-theme="dark"] .screenshot-capture-camera {
    background:
        radial-gradient(circle at 35% 24%, rgba(255, 248, 218, 0.18), rgba(255, 248, 218, 0) 42%),
        linear-gradient(180deg, rgba(72, 61, 42, 0.96), rgba(14, 13, 12, 0.98));
}

body[data-theme="dark"] .screenshot-capture-camera svg {
    stroke: #f4d79b;
}

body[data-theme="dark"] .screenshot-capture-hint {
    color: #fff8ea;
}

body[data-theme="dark"] .screenshot-capture-hint.secondary {
    color: #fff8ea;
}


.toolbar-section {
    gap: 10px;
    margin-top: 14px;
    padding: 12px 12px 10px;
    border: 1px solid var(--surface-card-border);
    border-radius: 16px;
    background:
        linear-gradient(180deg, var(--surface-card-bg), rgba(255, 255, 255, 0));
}

.toolbar-section-body {
    gap: 8px;
    padding-top: 2px;
}

.toolbar-section-toggle,
.settings-section-toggle {
    gap: 10px;
}

.toolbar-section-label,
.settings-section-label {
    letter-spacing: 0.04em;
}

.button-stack,
.settings-radio-group,
.basemap-display-options {
    gap: 8px;
}

.settings-section {
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--surface-card-border);
    border-radius: 18px;
    background:
        linear-gradient(180deg, var(--surface-card-bg-strong), rgba(255, 255, 255, 0));
}

.settings-section + .settings-section {
    margin-top: 10px;
}

.settings-section-body {
    gap: 12px;
    padding-top: 2px;
}

body[data-theme="dark"] .toolbar-section,
body[data-theme="dark"] .settings-section {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}


:root {
    --player-auth-leather-texture: url("/assets/generated/ui/player-auth-leather-texture--detail@1x.webp");
    --player-auth-leather-texture-size: 720px 720px;
}

.player-welcome-overlay {
    --player-loading-blue: #62c9ff;
    --player-loading-blue-soft: #c7efff;
    --player-loading-blue-deep: #176eb7;
    --player-gold: #ffd26f;
    --player-gold-soft: #ffe6ac;
    --player-gold-deep: #a66f24;
    --player-ink: #070808;
    --player-panel: rgba(9, 9, 9, 0.84);
    --player-glass: rgba(17, 18, 17, 0.72);
    --player-green: #164f35;
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #f6e7c8;
    background: #07182b;
    pointer-events: auto;
    isolation: isolate;
    opacity: 1;
    transition: opacity 598ms ease, visibility 598ms ease;
}

.player-welcome-overlay.hidden {
    display: none;
}

.player-auth-card [hidden] {
    display: none !important;
}

#player-account-action-description {
    line-height: 1.5;
    margin: 0;
}

.player-auth-form > .player-field-action {
    position: static;
    display: flex;
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    white-space: normal;
}

.player-auth-recovery-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin-top: 8px;
}

.player-auth-recovery-actions > .player-field-action {
    position: static;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    white-space: normal;
}

.player-auth-recovery-separator {
    color: rgba(255, 211, 109, 0.42);
}

#player-account-action-form {
    display: grid;
    gap: 14px;
    padding-bottom: 24px;
}

#player-account-action-title,
#player-account-action-status {
    margin: 0;
}

#player-account-action-status:empty {
    display: none;
}

body:not([data-player-auth-overlay="hidden"]) {
    background: #07182b;
}

body:not([data-player-auth-overlay="hidden"]) .immersive-scene {
    opacity: 0 !important;
    filter: none;
    transform: scale(1.018);
    background-image: none !important;
    pointer-events: none;
    transition:
        opacity 960ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 960ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-player-auth-background="ready"]:not([data-player-auth-overlay="hidden"]) .immersive-scene {
    opacity: 0 !important;
    filter: none;
    transform: none;
    background-image: none !important;
}

body[data-immersive-surface-ready="true"][data-player-auth-background="ready"]:not([data-player-auth-overlay="hidden"]) {
    background: #07182b;
}

body[data-immersive-surface-ready="true"][data-player-auth-background="ready"]:not([data-player-auth-overlay="hidden"]) .immersive-scene {
    opacity: 0 !important;
    background-image: none !important;
}

body[data-player-auth-overlay="loading"] .player-welcome-overlay {
    background: #07182b;
}

body[data-player-auth-overlay="loading"] .player-welcome-shell {
    visibility: hidden;
    opacity: 0;
}

.player-sync-conflict-dialog {
    width: min(520px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.16));
    border-radius: 20px;
    color: var(--text-primary, #f7f9fc);
    background: var(--panel-bg, #172231);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.player-sync-conflict-dialog::backdrop {
    background: rgba(4, 10, 18, 0.58);
    backdrop-filter: blur(4px);
}

.player-sync-conflict-card {
    display: grid;
    gap: 14px;
    padding: 24px;
}

.player-sync-conflict-card h2,
.player-sync-conflict-card p {
    margin: 0;
}

.player-sync-conflict-card p {
    color: var(--text-secondary, #c7d0dc);
    line-height: 1.5;
}

.player-sync-conflict-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.player-sync-conflict-actions button {
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.player-sync-conflict-actions button.primary {
    border-color: transparent;
    color: #08121c;
    background: var(--accent, #68d7ff);
    font-weight: 700;
}

.player-sync-conflict-actions button:disabled {
    cursor: wait;
    opacity: 0.58;
}

.player-sync-conflict-error {
    color: #ffb5ad !important;
}

@media (max-width: 560px) {
    .player-sync-conflict-actions {
        grid-template-columns: 1fr;
    }
}

/* These loading layers must stay viewport-bound while the mobile auth shell
   retains its scroll position during the authenticated transition. */
.player-loading-brand {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 12;
    display: grid;
    justify-items: center;
    gap: 18px;
    width: min(240px, calc(100vw - 48px));
    color: var(--player-loading-blue-soft);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.96);
    transition:
        opacity 420ms ease,
        visibility 420ms ease,
        transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-player-auth-overlay="loading"] .player-loading-brand,
body[data-player-desktop-loading="true"] .player-welcome-overlay.is-exiting .player-loading-brand {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

body[data-player-desktop-loading="exiting"] .player-welcome-overlay.is-exiting .player-loading-brand {
    visibility: visible;
    opacity: 0;
    transform: translate(-50%, calc(-50% - 6px)) scale(1.015);
}

.player-loading-emblem {
    position: relative;
    display: grid;
    width: 146px;
    height: 146px;
    place-items: center;
    border-radius: 50%;
    filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.42));
}

.player-loading-emblem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from 28deg,
        transparent 0 16%,
        rgba(176, 230, 255, 0.3) 24%,
        var(--player-loading-blue) 31%,
        rgba(73, 176, 255, 0.08) 39%,
        transparent 48% 74%,
        rgba(94, 202, 255, 0.42) 85%,
        transparent 94%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
    animation: playerLoadingOrbitSpin 3800ms linear infinite;
}

.player-loading-emblem::after {
    content: "";
    position: absolute;
    inset: 19px;
    z-index: -1;
    border-radius: 34%;
    background: rgba(37, 143, 224, 0.18);
    box-shadow:
        0 0 34px rgba(70, 184, 255, 0.24),
        0 0 88px rgba(34, 137, 230, 0.14);
    animation: playerLoadingGlow 2200ms ease-in-out infinite;
}

.player-loading-orbit {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(196, 235, 255, 0.14);
    border-radius: 50%;
}

.player-loading-orbit::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 17px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8f4ff;
    box-shadow:
        0 0 0 4px rgba(80, 185, 255, 0.12),
        0 0 16px rgba(94, 202, 255, 0.82);
}

.player-loading-logo-frame {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    padding: 5px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(173, 226, 255, 0.5);
    border-radius: 29px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(70, 175, 255, 0.035));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 16px 36px rgba(0, 0, 0, 0.35);
}

.player-loading-logo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.2) 47%, transparent 67%);
    transform: translateX(-150%);
    animation: playerLoadingLogoSheen 2600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.player-loading-logo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 23px;
    object-fit: cover;
}

.player-loading-wordmark {
    margin-right: -0.34em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-shadow: 0 4px 18px rgba(83, 190, 255, 0.32);
}

.player-loading-progress {
    position: relative;
    width: 88px;
    height: 1px;
    overflow: hidden;
    background: rgba(188, 232, 255, 0.14);
}

.player-loading-progress > span {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, #8edaff 48%, transparent);
    transform: translateX(-110%);
    animation: playerLoadingProgress 1800ms ease-in-out infinite;
}

body[data-player-auth-overlay="loading"] .player-welcome-overlay::before {
    z-index: -2;
    background-color: rgba(1, 6, 13, 0.36);
    background-image:
        radial-gradient(ellipse at center, rgba(1, 8, 18, 0.8) 0, rgba(1, 7, 15, 0.58) 19%, rgba(1, 6, 13, 0.08) 48%),
        linear-gradient(180deg, rgba(2, 9, 19, 0.16), rgba(0, 3, 8, 0.48));
    background-position: center, center;
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
}

body[data-player-auth-overlay="loading"] .player-welcome-overlay::after {
    background: transparent;
    opacity: 0;
    animation: none;
}

body[data-player-auth-overlay] #map {
    transition: opacity 598ms ease, filter 598ms ease;
}

body[data-player-auth-overlay="loading"] #map,
body[data-player-auth-overlay="visible"]:not([data-map-surface-ready="true"]) #map {
    opacity: 0;
    pointer-events: none;
}

body[data-player-auth-overlay="loading"] #map {
    transition: none;
}

body[data-player-auth-overlay="visible"] #map {
    filter: blur(10px) saturate(0.9) brightness(0.82);
}

body:not([data-player-auth-overlay="hidden"]):not([data-player-auth-overlay="exiting"]) #map .maplibregl-control-container,
.player-welcome-overlay:not(.hidden):not(.is-exiting) ~ .hud {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body[data-player-auth-overlay] .hud,
body[data-player-auth-overlay] #map .maplibregl-control-container {
    transition: opacity 598ms ease, visibility 598ms ease;
}

body[data-player-auth-overlay="visible"] .hud,
body[data-player-auth-overlay="visible"] #map .maplibregl-control-container {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body[data-player-desktop-loading="true"],
body[data-player-desktop-loading="exiting"] {
    cursor: wait;
}

body[data-player-desktop-loading="true"]::before,
body[data-player-desktop-loading="true"]::after,
body[data-player-desktop-loading="exiting"]::before,
body[data-player-desktop-loading="exiting"]::after {
    content: none;
    display: none;
}

body[data-player-desktop-loading="true"]::before,
body[data-player-desktop-loading="exiting"]::before {
    inset: 0;
    z-index: 2190;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 210, 111, 0.14), rgba(255, 210, 111, 0) 220px),
        linear-gradient(145deg, rgba(4, 5, 5, 0.94), rgba(13, 16, 14, 0.92));
    background-position: center;
    background-size: cover;
    backdrop-filter: blur(8px) saturate(0.92);
    opacity: 1;
    transition: opacity 560ms ease;
}

body[data-player-auth-overlay="hidden"][data-player-desktop-loading="true"]::before,
body[data-player-auth-overlay="hidden"][data-player-desktop-loading="exiting"]::before {
    z-index: 5550;
}

body[data-player-desktop-loading="true"]::after,
body[data-player-desktop-loading="exiting"]::after {
    top: 50%;
    left: 50%;
    z-index: 5551;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 3px solid rgba(255, 210, 111, 0.26);
    border-top-color: rgba(255, 239, 190, 0.96);
    border-radius: 50%;
    box-shadow:
        0 0 28px rgba(255, 199, 89, 0.22),
        0 18px 54px rgba(0, 0, 0, 0.38);
    animation: playerDesktopLoadingSpin 820ms linear infinite;
    opacity: 1;
    transition: opacity 360ms ease;
}

body[data-player-desktop-loading="exiting"]::before,
body[data-player-desktop-loading="exiting"]::after {
    opacity: 0;
}

body[data-player-desktop-loading="true"] .player-welcome-overlay.is-exiting {
    display: grid;
    z-index: 5600;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms ease;
}

body[data-player-desktop-loading="exiting"] .player-welcome-overlay.is-exiting {
    display: grid;
    z-index: 5600;
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms ease;
}

body[data-player-desktop-loading="true"] .player-welcome-overlay.is-exiting::after,
body[data-player-desktop-loading="exiting"] .player-welcome-overlay.is-exiting::after {
    content: none;
}

body[data-player-desktop-loading="true"]:not([data-player-auth-overlay="hidden"])::after {
    opacity: 0;
}

.player-welcome-overlay.is-exiting {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.player-welcome-overlay::before,
.player-welcome-overlay::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.player-welcome-overlay::before {
    z-index: -2;
    background: transparent;
}

.player-welcome-overlay::after {
    z-index: -1;
    background: transparent;
    opacity: 0;
}

.player-photo-field {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: #07182b;
    opacity: 0;
    pointer-events: none;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.player-photo-field[data-state="ready"] {
    opacity: 0;
}

.player-photo-field[data-mode="auth"][data-state="ready"] {
    opacity: 1;
}

.player-photo-field-canvas {
    display: block;
    width: 100%;
    height: 100%;
    filter: none;
    transform: scale(1.012);
}

.player-photo-field[data-mode="auth"] .player-photo-field-canvas {
    filter: none;
}

.player-photo-field::after {
    content: none;
}

.player-welcome-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(390px, 512px);
    width: min(1280px, 100%);
    min-height: min(800px, calc(100vh - 36px));
    overflow: hidden;
    border: 1px solid rgba(255, 206, 115, 0.3);
    border-radius: 8px;
    background-color: rgba(7, 7, 7, 0.88);
    background-image:
        radial-gradient(ellipse at 86% 34px, rgba(255, 214, 126, 0.13), rgba(255, 214, 126, 0) 210px),
        linear-gradient(90deg, rgba(255, 224, 146, 0.025), rgba(255, 224, 146, 0.06) 56%, rgba(255, 224, 146, 0.025)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.62)),
        var(--player-auth-leather-texture);
    background-position: 86% 34px, center, center, center top;
    background-size: auto, auto, auto, cover;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 238, 189, 0.16),
        inset 0 0 0 1px rgba(255, 206, 115, 0.06);
    animation: none;
    transition: opacity 598ms ease, transform 598ms ease, filter 598ms ease;
}

.player-welcome-overlay.is-exiting .player-welcome-shell {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-8px) scale(0.985);
    animation: none;
}

@supports (height: 100dvh) {
    .player-welcome-shell {
        min-height: min(800px, calc(100dvh - 36px));
    }
}

.player-welcome-shell::before,
.player-welcome-shell::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.player-welcome-shell::before {
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: none;
}

.player-welcome-shell::after {
    content: none;
    display: none;
}

.player-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 24px 34px 32px;
    overflow: visible;
    background: #07182b;
}

.player-brand-panel::before {
    content: "";
    position: absolute;
    inset: 70px -260px 0 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 68% 60%, rgba(255, 160, 47, 0.36), rgba(255, 160, 47, 0.03) 35%, rgba(0, 0, 0, 0) 56%);
    opacity: 0.82;
    -webkit-mask-image: none;
    mask-image: none;
}

.player-brand-panel::after {
    content: none;
    display: none;
}

.player-window-bar,
.player-brand-hero,
.player-brand-path {
    position: relative;
    z-index: 4;
}

.player-window-bar {
    display: none;
}

.player-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.42rem;
    color: var(--player-gold);
    text-shadow: 0 0 18px rgba(255, 181, 63, 0.22);
}

.player-brand-mark svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    filter: drop-shadow(0 0 8px rgba(255, 194, 85, 0.28));
}

.player-icon-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: rgba(255, 210, 111, 0.88);
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 210, 111, 0.2);
    border-radius: 8px;
    font-size: 1.65rem;
    line-height: 1;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.player-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
}

.player-icon-button:hover,
.player-icon-button:focus-visible {
    border-color: rgba(255, 210, 111, 0.48);
    background: rgba(255, 210, 111, 0.08);
    transform: translateY(-1px);
}

.player-brand-hero {
    display: grid;
    justify-items: center;
    align-content: center;
    flex: 1;
    min-height: 286px;
    padding: 40px 8px 26px;
    text-align: center;
}

.player-brand-compass {
    position: relative;
}

.player-brand-compass::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: rgba(255, 195, 86, 0.2);
    filter: blur(18px);
}

.player-brand-compass svg {
    position: relative;
    width: 128px;
    height: 128px;
    fill: rgba(255, 208, 112, 0.2);
    stroke: #ffe3a1;
    stroke-width: 2.35;
    filter: drop-shadow(0 0 16px rgba(255, 180, 64, 0.42));
    animation: playerCompassBreathe 5.5s ease-in-out infinite;
}

.player-brand-hero h1 {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.4rem, 7.4vw, 5.7rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0;
    color: #ffd98d;
    text-shadow:
        0 2px 0 rgba(84, 43, 9, 0.55),
        0 18px 30px rgba(0, 0, 0, 0.72),
        0 0 24px rgba(255, 192, 82, 0.2);
}

.player-beta-badge {
    margin-top: 0.22em;
    padding: 0.24em 0.5em 0.2em;
    border: 1px solid rgba(255, 216, 141, 0.56);
    border-radius: 999px;
    color: #ffe5a5;
    background:
        linear-gradient(180deg, rgba(255, 233, 176, 0.12), rgba(255, 193, 86, 0.03)),
        rgba(5, 5, 5, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 213, 0.16),
        0 0 18px rgba(255, 193, 86, 0.18);
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.15em;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 195, 86, 0.24);
}

.player-brand-hero p {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
    align-items: center;
    gap: 12px;
    width: min(430px, 92%);
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    color: rgba(255, 248, 230, 0.95);
    text-transform: uppercase;
}

.player-brand-hero p::before,
.player-brand-hero p::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 207, 112, 0), rgba(255, 207, 112, 0.52));
}

.player-brand-hero p::after {
    background: linear-gradient(90deg, rgba(255, 207, 112, 0.52), rgba(255, 207, 112, 0));
}

.player-brand-path {
    display: grid;
    gap: 16px;
    width: 100%;
    margin: 0 0 8px;
}

.player-brand-path-intro {
    max-width: 680px;
    margin-bottom: 4px;
    text-align: center;
}

.player-brand-path-intro strong,
.player-brand-path-intro p {
    display: block;
}

.player-brand-path-intro strong {
    color: var(--player-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
}

.player-brand-path-intro p {
    margin: 5px 0 0;
    color: rgba(255, 247, 229, 0.82);
    line-height: 1.45;
}

.player-feature {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
}

.player-feature-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 214, 120, 0.72);
    border-radius: 50%;
    color: var(--player-gold);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 226, 164, 0.14), rgba(0, 0, 0, 0) 38%),
        rgba(0, 0, 0, 0.3);
    box-shadow:
        inset 0 0 18px rgba(255, 193, 80, 0.1),
        0 12px 24px rgba(0, 0, 0, 0.28);
}

.player-feature-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
}

.player-feature strong,
.player-feature small {
    display: block;
}

.player-feature strong {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--player-gold);
    font-size: 1.02rem;
    text-transform: uppercase;
}

.player-feature small {
    margin-top: 4px;
    color: rgba(255, 247, 229, 0.88);
    line-height: 1.4;
}

.player-auth-card {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-self: center;
    min-height: calc(100% - 48px);
    margin: 24px 24px 24px 0;
    overflow: hidden;
    border: 1px solid rgba(255, 207, 112, 0.26);
    border-radius: 8px;
    background-color: rgba(5, 5, 5, 0.94);
    background-image:
        radial-gradient(circle at 50% 0, rgba(255, 222, 145, 0.08), rgba(255, 222, 145, 0) 34%),
        linear-gradient(180deg, rgba(22, 22, 20, 0.78), rgba(5, 5, 5, 0.88)),
        var(--player-auth-leather-texture);
    background-position: center top, center, center;
    background-size: auto, auto, var(--player-auth-leather-texture-size);
    background-repeat: no-repeat, no-repeat, repeat;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.58),
        inset 0 1px 0 rgba(255, 238, 199, 0.08),
        inset 0 0 40px rgba(255, 198, 89, 0.03);
    backdrop-filter: blur(14px);
}

.player-auth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255, 221, 143, 0.035) 0 1px, rgba(0, 0, 0, 0) 1px 90px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 36%);
    opacity: 0.78;
}

.player-auth-tabs,
.player-auth-form,
.player-guest-block {
    position: relative;
    z-index: 1;
}

.player-auth-tabs {
    z-index: 8;
    isolation: isolate;
}

.player-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 66px;
    border-bottom: 1px solid rgba(234, 182, 91, 0.2);
    background:
        linear-gradient(90deg, rgba(255, 210, 111, 0) calc(50% - 1px), rgba(255, 210, 111, 0.36) 50%, rgba(255, 210, 111, 0) calc(50% + 1px)),
        rgba(0, 0, 0, 0.14);
}

.player-auth-tab {
    position: relative;
    z-index: 1;
    min-height: 66px;
    padding: 0 18px;
    color: rgba(249, 230, 188, 0.6);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.08));
    border: 0;
    border-radius: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    text-transform: uppercase;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.player-auth-tab.active {
    color: #ffe29c;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(255, 207, 112, 0.16), rgba(255, 207, 112, 0) 58%),
        linear-gradient(180deg, rgba(255, 208, 112, 0.11), rgba(0, 0, 0, 0.02));
    box-shadow:
        inset 0 1px 0 rgba(255, 238, 189, 0.08),
        inset 0 -1px 0 rgba(255, 207, 112, 0.1);
}

.player-auth-tab.active::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: -1px;
    left: 18%;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, rgba(255, 203, 82, 0), #ffc958 46%, #fff0b8 50%, #ffc958 54%, rgba(255, 203, 82, 0));
    box-shadow: 0 0 14px rgba(255, 196, 77, 0.66);
}

.player-auth-tab:hover,
.player-auth-tab:focus-visible {
    color: #ffe8b6;
}

.player-auth-form,
.player-guest-block {
    padding: 34px 40px 0;
}

.player-guest-block {
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: 34px;
}

.player-auth-heading {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    align-items: start;
    margin-bottom: 26px;
}

.player-auth-kicker {
    color: var(--player-gold);
    font-size: 1.6rem;
    line-height: 1.1;
    filter: drop-shadow(0 0 8px rgba(255, 199, 89, 0.34));
}

.player-auth-heading h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.17rem;
    line-height: 1.28;
    color: #ffe58f;
    letter-spacing: 0;
    text-transform: uppercase;
}

.player-auth-heading p {
    margin: 9px 0 0;
    color: rgba(255, 247, 230, 0.86);
    line-height: 1.45;
}

.player-auth-field {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    color: rgba(255, 246, 226, 0.84);
}

.player-auth-field > span:first-child {
    font-size: 0.8rem;
    color: rgba(255, 219, 151, 0.76);
}

.player-auth-field input {
    width: 100%;
    min-height: 56px;
    color: #fff5dc;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
        rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(235, 188, 93, 0.36);
    border-radius: 8px;
    padding: 0 17px;
    font: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.player-auth-field input::placeholder {
    color: rgba(255, 246, 226, 0.46);
}

.player-auth-field input:focus {
    border-color: rgba(255, 211, 109, 0.9);
    background: rgba(0, 0, 0, 0.32);
    box-shadow:
        0 0 0 3px rgba(255, 199, 80, 0.12),
        0 0 18px rgba(255, 199, 80, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-auth-field.is-invalid > span:first-child {
    color: #ffaaa0;
}

.player-auth-field input[aria-invalid="true"],
.player-auth-field input[aria-invalid="true"]:focus {
    border-color: #ff756b;
    background: rgba(92, 18, 18, 0.24);
    box-shadow:
        0 0 0 3px rgba(255, 92, 82, 0.16),
        0 0 18px rgba(255, 92, 82, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.player-password-row {
    position: relative;
    display: block;
}

.player-password-row input {
    padding-right: 100px;
}

.player-password-row input::-ms-clear,
.player-password-row input::-ms-reveal {
    display: none;
}

.player-password-row input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
}

.player-field-action {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 38px;
    padding: 0 11px;
    color: var(--player-gold);
    background: transparent;
    border: 0;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    font-size: 0.86rem;
    transition: background 160ms ease, color 160ms ease;
}

.player-field-action:hover,
.player-field-action:focus-visible {
    color: #fff0b6;
    background: rgba(255, 208, 112, 0.08);
}

.player-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 22px;
}

.player-check-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 246, 226, 0.86);
}

.player-check-row input {
    width: 20px;
    height: 20px;
    accent-color: #ffc85a;
}

.player-auth-status {
    margin: -6px 0 16px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 154, 112, 0.28);
    border-radius: 8px;
    color: #ffe7ad;
    background: rgba(132, 43, 30, 0.22);
    line-height: 1.35;
}

.player-primary-button,
.player-guest-button,
.player-session-button,
.player-session-logout {
    border-radius: 8px;
}

.player-primary-button {
    position: relative;
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    color: #ffe996;
    background:
        radial-gradient(circle at 94% 50%, rgba(255, 220, 110, 0.2), rgba(0, 0, 0, 0) 22%),
        linear-gradient(90deg, #155236, #123b2b 58%, #15412d);
    border: 1px solid rgba(255, 212, 92, 0.86);
    box-shadow:
        0 0 18px rgba(255, 189, 66, 0.3),
        inset 0 1px 0 rgba(255, 250, 220, 0.18),
        inset 0 0 20px rgba(255, 212, 92, 0.08);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.12rem;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.54);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.player-primary-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -32%;
    width: 28%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 243, 188, 0.2), rgba(255, 255, 255, 0));
    transform: skewX(-16deg);
    animation: playerButtonSheen 3.8s ease-in-out infinite;
}

.player-primary-button:hover:not(:disabled),
.player-primary-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 0 24px rgba(255, 189, 66, 0.42),
        0 16px 28px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 250, 220, 0.2);
    filter: saturate(1.08);
}

.player-primary-button:disabled,
.player-guest-button:disabled {
    cursor: wait;
    opacity: 0.68;
}

.player-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: rgba(255, 211, 109, 0.74);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.88rem;
    text-align: center;
    text-transform: uppercase;
}

.player-divider::before,
.player-divider::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 211, 109, 0.34));
}

.player-divider::after {
    background: linear-gradient(90deg, rgba(255, 211, 109, 0.34), rgba(0, 0, 0, 0));
}

.player-guest-button {
    display: inline-grid;
    grid-template-columns: auto minmax(0, max-content);
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    width: 100%;
    min-height: 66px;
    margin-top: 18px;
    padding: 10px 18px;
    color: var(--player-gold);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
        rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(235, 188, 93, 0.34);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.04rem;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.player-guest-copy {
    min-width: 0;
}

.player-button-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 210, 111, 0.28);
    border-top-color: rgba(255, 231, 173, 0.96);
    border-radius: 50%;
    animation: playerButtonLoadingSpin 780ms linear infinite;
}

.player-guest-button.is-loading {
    opacity: 0.84;
}

.player-guest-button.is-loading .player-button-spinner {
    display: block;
}

.player-guest-button:hover:not(:disabled),
.player-guest-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(255, 211, 109, 0.62);
    background: rgba(255, 211, 109, 0.07);
}

.player-guest-button small {
    display: block;
    margin-top: 4px;
    color: rgba(255, 216, 139, 0.72);
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    font-size: 0.86rem;
}

.player-session-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    pointer-events: auto;
}

.player-session-chip.hidden {
    display: none;
}

.player-session-button,
.player-account-menu-item {
    color: rgba(43, 36, 24, 0.9);
    background: rgba(71, 93, 79, 0.12);
    border: 1px solid rgba(88, 69, 37, 0.08);
    box-shadow: none;
    backdrop-filter: none;
}

.player-session-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    max-width: 178px;
    padding: 0 10px 0 8px;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
}

.player-session-button::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
    background: currentColor;
    -webkit-mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    mask: var(--top-bar-chevron-icon) center / 14px 14px no-repeat;
    opacity: 0.78;
    transform: rotate(0deg);
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

.player-session-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.player-session-button #player-session-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(88, 69, 37, 0.16);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 245, 212, 0.92), rgba(255, 211, 109, 0.35) 38%, rgba(50, 79, 69, 0.18) 100%);
    color: rgba(35, 54, 47, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    font-weight: 800;
    line-height: 1;
}

.player-avatar-session {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.player-avatar-menu {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
}

.player-avatar-profile {
    width: 54px;
    height: 54px;
    font-size: 1.25rem;
}

.player-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-avatar-image.hidden,
.player-avatar-fallback.hidden {
    display: none;
}

.player-session-button:hover,
.player-session-button:focus-visible,
.player-account-menu-item:hover,
.player-account-menu-item:focus-visible {
    color: rgba(35, 54, 47, 0.96);
    background: rgba(71, 93, 79, 0.22);
}

.player-session-button:hover::after,
.player-session-button:focus-visible::after {
    opacity: 0.95;
}

.player-account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 48;
    display: grid;
    width: max-content;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 28px));
    padding: 6px;
    gap: 4px;
    border: 1px solid rgba(88, 69, 37, 0.16);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(252, 246, 233, 0.98), rgba(239, 224, 193, 0.97));
    box-shadow: 0 18px 38px rgba(24, 19, 10, 0.18);
    backdrop-filter: blur(10px);
    animation: playerAccountMenuEnter 140ms ease-out both;
}

.player-account-menu.player-account-menu-portal {
    position: fixed;
    top: var(--player-account-menu-top, 0);
    left: var(--player-account-menu-left, 0);
    right: auto;
    z-index: 5600;
}

.player-account-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 9px 10px;
    border-bottom: 1px solid rgba(88, 69, 37, 0.12);
}

.player-account-summary-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.player-account-summary-copy strong,
.player-account-summary-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-account-summary-copy strong {
    color: rgba(43, 36, 24, 0.92);
    font-size: 0.92rem;
}

.player-account-summary-copy small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.76rem;
}

.player-account-summary-copy small.muted {
    font-style: italic;
}

.player-account-menu.hidden {
    display: none;
}

.player-account-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border-radius: 12px;
    box-shadow: none;
    text-align: left;
    font-weight: 650;
    transform: none;
}

body[data-theme="dark"] .player-session-button,
body[data-theme="dark"] .player-account-menu-item {
    color: rgba(237, 228, 210, 0.84);
    background: rgba(255, 250, 237, 0.08);
    border-color: rgba(237, 228, 210, 0.08);
}

body[data-theme="dark"] .player-session-button:hover,
body[data-theme="dark"] .player-session-button:focus-visible,
body[data-theme="dark"] .player-account-menu-item:hover,
body[data-theme="dark"] .player-account-menu-item:focus-visible {
    color: rgba(255, 248, 235, 0.96);
    background: rgba(255, 250, 237, 0.14);
}

body[data-theme="dark"] .player-account-menu {
    border-color: rgba(237, 228, 210, 0.12);
    background: linear-gradient(180deg, rgba(35, 32, 25, 0.98), rgba(19, 18, 16, 0.97));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

body[data-theme="dark"] .player-avatar {
    border-color: rgba(237, 228, 210, 0.14);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 238, 189, 0.92), rgba(255, 211, 109, 0.24) 38%, rgba(24, 35, 30, 0.88) 100%);
    color: rgba(255, 248, 235, 0.96);
}

body[data-theme="dark"] .player-account-summary {
    border-bottom-color: rgba(237, 228, 210, 0.1);
}

body[data-theme="dark"] .player-account-summary-copy strong {
    color: rgba(255, 248, 235, 0.94);
}

body[data-theme="dark"] .player-account-summary-copy small {
    color: rgba(237, 228, 210, 0.58);
}

.player-session-logout.hidden,
.player-auth-field.hidden {
    display: none;
}

@keyframes playerAccountMenuEnter {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes playerOverlayEnter {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes playerCompassBreathe {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.025) rotate(1.25deg);
    }
}

@keyframes playerButtonSheen {
    0%,
    52% {
        left: -32%;
    }
    100% {
        left: 112%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-welcome-shell,
    .player-brand-compass svg,
    .player-primary-button::after,
    .player-loading-emblem::before,
    .player-loading-emblem::after,
    .player-loading-logo-frame::after,
    .player-loading-progress > span,
    body[data-player-desktop-loading="true"] .player-welcome-overlay.is-exiting::after,
    body[data-player-desktop-loading="true"]::after,
    body[data-player-desktop-loading="exiting"]::after {
        animation: none;
    }

    .player-icon-button,
    .player-auth-field input,
    .player-field-action,
    .player-primary-button,
    .player-guest-button,
    .player-auth-tab,
    .player-photo-field,
    .player-welcome-overlay,
    .player-welcome-shell,
    body[data-player-auth-overlay] .hud,
    body[data-player-auth-overlay] #map .maplibregl-control-container {
        transition: none;
    }
}

body[data-player-auth-overlay="visible"] .player-welcome-overlay:not(.is-exiting) .player-welcome-shell {
    visibility: visible;
    opacity: 1;
}

@keyframes playerAuthLoadingSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes playerDesktopLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes playerLoadingOrbitSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes playerLoadingGlow {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.94);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

@keyframes playerLoadingLogoSheen {
    0%,
    35% {
        transform: translateX(-150%);
    }
    72%,
    100% {
        transform: translateX(150%);
    }
}

@keyframes playerLoadingProgress {
    0% {
        transform: translateX(-110%);
    }
    55%,
    100% {
        transform: translateX(110%);
    }
}

@keyframes playerButtonLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 980px) {
    .player-photo-field[data-state="ready"] {
        opacity: 1;
    }

    .player-photo-field[data-mode="auth"][data-state="ready"] {
        opacity: 1;
    }

    .player-welcome-overlay {
        overflow: auto;
        place-items: start center;
        padding: 14px;
        min-height: 100dvh;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .player-welcome-shell {
        grid-template-columns: 1fr;
        width: min(720px, 100%);
        min-height: auto;
    }

    .player-welcome-shell::after {
        inset: 66px 0 auto;
    }

    .player-brand-panel {
        min-height: 430px;
        padding: 22px 24px 28px;
        overflow: hidden;
    }

    .player-brand-hero {
        min-height: 236px;
        padding-top: 28px;
    }

    .player-brand-path {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 14px;
    }

    .player-brand-path-intro {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .player-feature {
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: start;
        text-align: center;
    }

    .player-auth-card {
        align-self: stretch;
        min-height: auto;
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }
}

@media (min-width: 981px) and (max-height: 760px) {
    .player-welcome-overlay {
        overflow: auto;
        place-items: start center;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .player-welcome-shell {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    :root {
        --player-auth-leather-texture-size: 560px 560px;
    }

    .player-photo-field[data-state="ready"] {
        opacity: 1;
    }

    .player-photo-field[data-mode="auth"][data-state="ready"] {
        opacity: 1;
    }

    .player-welcome-overlay {
        padding: 0;
    }

    .player-welcome-shell {
        width: 100%;
        min-height: 100svh;
        border-width: 0;
        border-radius: 0;
    }

    .player-welcome-shell::after {
        inset: 60px 0 auto;
    }

    .player-brand-panel {
        min-height: clamp(260px, 42svh, 360px);
        padding: 16px 18px 22px;
    }

    .player-brand-mark {
        font-size: 1.25rem;
    }

    .player-brand-mark svg {
        width: 34px;
        height: 34px;
    }

    .player-icon-button {
        width: 34px;
        height: 34px;
    }

    .player-brand-hero {
        min-height: clamp(150px, 26svh, 202px);
        padding: 18px 0 16px;
    }

    .player-brand-compass svg {
        width: 92px;
        height: 92px;
    }

    .player-brand-hero h1 {
        font-size: clamp(2.9rem, 18vw, 4.1rem);
    }

    .player-brand-hero p {
        width: 100%;
        font-size: 0.9rem;
    }

    .player-brand-path {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .player-feature {
        grid-template-columns: 44px 1fr;
        justify-items: stretch;
        text-align: left;
    }

    .player-feature-icon {
        width: 42px;
        height: 42px;
    }

    .player-feature-icon svg {
        width: 23px;
        height: 23px;
    }

    .player-auth-tabs,
    .player-auth-tab {
        min-height: 52px;
    }

    .player-auth-form,
    .player-guest-block {
        padding-left: 20px;
        padding-right: 20px;
    }

    .player-auth-heading {
        grid-template-columns: 28px 1fr;
        gap: 10px;
        margin-bottom: 22px;
    }

    .player-auth-heading h2 {
        font-size: 1.04rem;
    }

    .player-auth-field input {
        min-height: 52px;
    }

    .player-password-row input {
        padding-right: 88px;
    }

    .player-field-action {
        right: 6px;
        padding: 0 8px;
        font-size: 0.8rem;
    }

    .player-session-button {
        max-width: 116px;
        padding: 0 9px 0 8px;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 640px) {
        .player-welcome-shell {
            min-height: 100dvh;
        }
    }
}

@media (max-width: 420px) {
    .player-brand-panel {
        min-height: clamp(214px, 30svh, 252px);
        padding: 12px 16px 18px;
    }

    .player-brand-hero {
        min-height: clamp(188px, 25svh, 220px);
        padding: 12px 0 14px;
    }

    .player-brand-compass svg {
        width: 84px;
        height: 84px;
    }

    .player-brand-hero h1 {
        margin-top: 10px;
        font-size: clamp(2.72rem, 17vw, 3.72rem);
    }

    .player-brand-hero p {
        font-size: 0.82rem;
        line-height: 1.15;
    }

    .player-brand-path {
        display: none;
    }

    .player-auth-tab {
        padding: 0 10px;
        font-size: 0.92rem;
    }

    .player-auth-form,
    .player-guest-block {
        padding-left: 16px;
        padding-right: 16px;
    }

    .player-auth-form {
        padding-top: 24px;
    }

    .player-auth-heading {
        margin-bottom: 18px;
    }

    .player-auth-heading p {
        margin-top: 7px;
        line-height: 1.38;
    }

    .player-auth-field {
        margin-top: 11px;
    }

    .player-auth-field input {
        min-height: 48px;
    }

    .player-field-action {
        top: 5px;
        height: 38px;
    }

    .player-auth-options {
        margin: 14px 0 16px;
    }

    .player-primary-button {
        min-height: 56px;
    }

    .player-guest-block {
        padding-top: 18px;
        padding-bottom: 24px;
    }

    .player-guest-button {
        min-height: 58px;
        margin-top: 14px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .player-divider {
        font-size: 0.8rem;
    }
}


.monetization-modal {
    z-index: 2300;
}

.monetization-dialog {
    width: min(420px, calc(100vw - 32px));
    border-radius: 8px;
}

.monetization-header {
    align-items: flex-start;
}

.monetization-feature {
    min-height: 1rem;
    color: rgba(95, 73, 34, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.monetization-body p {
    margin: 0;
}

.monetization-usage {
    color: rgba(50, 44, 32, 0.72);
    font-size: 0.9rem;
}

.monetization-action {
    width: 100%;
}

.player-upgrade-pro-card {
    border-color: rgba(45, 102, 78, 0.22);
    background: linear-gradient(135deg, rgba(26, 117, 78, 0.12), rgba(235, 185, 95, 0.14));
}

.player-upgrade-pro-card.hidden,
.player-pro-subscription-card.hidden {
    display: none;
}

.player-upgrade-pro-card > div {
    display: grid;
    gap: 4px;
}

.player-upgrade-pro-card strong {
    color: rgba(43, 36, 24, 0.92);
    font-size: 0.95rem;
}

.player-upgrade-pro-card .player-primary-button {
    justify-self: stretch;
}

.player-pro-subscription-card {
    border-color: rgba(181, 126, 37, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 224, 132, 0.18), rgba(64, 115, 92, 0.1));
}

.player-pro-subscription-copy {
    display: grid;
    gap: 4px;
}

.player-pro-subscription-card strong {
    color: rgba(43, 36, 24, 0.92);
    font-size: 0.95rem;
}

.player-pro-subscription-card .player-primary-button {
    justify-self: stretch;
}

.player-pro-portal-status {
    min-height: 1em;
}

.player-pro-portal-status[data-kind="error"] {
    color: rgba(123, 45, 45, 0.88);
}

.player-session-chip.is-pro {
    border-radius: 999px;
}

.player-session-chip.is-pro::before {
    content: none;
}

.player-session-chip.is-pro .player-session-button {
    position: relative;
    isolation: isolate;
    z-index: 1;
    overflow: hidden;
    border-color: rgba(255, 224, 132, 0.42);
    border-radius: 999px;
    background: rgba(20, 42, 68, 0.065);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 0 16px rgba(214, 158, 54, 0.18);
}

.player-session-chip.is-pro .player-session-button::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    box-sizing: border-box;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--premium-gold-border-sweep);
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.78;
    animation: premiumGoldBorderSweep 6s ease-in-out infinite;
    pointer-events: none;
}

.player-session-chip.is-pro .player-session-button > *,
.player-session-chip.is-pro .player-session-button::after {
    position: relative;
    z-index: 1;
}

.player-session-chip.is-pro .player-session-button:hover::before {
    opacity: 0.94;
}

.player-session-chip.is-pro .player-session-button:active::before {
    opacity: 0.68;
}

.player-session-chip.is-pro .player-session-button[aria-expanded="true"]::before {
    opacity: 0.9;
}

.player-session-chip.is-pro .player-session-button[aria-expanded="true"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 0 18px rgba(214, 158, 54, 0.22);
}

.player-session-chip.is-pro .player-avatar-session {
    border-color: rgba(255, 224, 132, 0.54);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 0 10px rgba(255, 211, 109, 0.2);
}

@keyframes premiumGoldBorderSweep {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .player-session-chip.is-pro .player-session-button::before {
        padding: 0;
        border: 1.5px solid rgba(255, 213, 109, 0.72);
        background:
            linear-gradient(
                110deg,
                rgba(166, 111, 36, 0.18),
                rgba(255, 247, 204, 0.82),
                rgba(197, 137, 42, 0.58),
                rgba(166, 111, 36, 0.18)
            );
        background-size: 240% 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-session-chip.is-pro .player-session-button::before {
        animation: none;
    }
}

.player-pro-checkout-modal {
    z-index: 2250;
}

.player-pro-checkout-dialog {
    width: min(460px, calc(100vw - 32px));
    border-radius: 8px;
}

.player-pro-checkout-subtitle {
    margin-top: 3px;
}

.player-pro-checkout-body {
    gap: 12px;
}

.player-pro-checkout-promotion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 7px 10px;
    border: 1px solid rgba(190, 128, 34, 0.3);
    border-radius: 8px;
    background: rgba(255, 224, 132, 0.18);
    color: rgba(84, 58, 22, 0.9);
    font-size: 0.84rem;
}

.player-pro-checkout-promotion.hidden {
    display: none;
}

.player-pro-checkout-promotion strong {
    color: rgba(92, 62, 20, 0.98);
    font-weight: 850;
}

.player-pro-checkout-promotion span {
    color: rgba(84, 58, 22, 0.7);
}

.player-pro-checkout-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.player-pro-checkout-option {
    display: grid;
    min-height: 88px;
    gap: 5px;
    align-content: center;
    justify-items: start;
    padding: 14px;
    border: 1px solid rgba(50, 79, 69, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.36);
    color: rgba(43, 36, 24, 0.9);
    text-align: left;
}

.player-pro-checkout-option:hover,
.player-pro-checkout-option:focus-visible,
.player-pro-checkout-option[aria-pressed="true"] {
    border-color: rgba(26, 117, 78, 0.48);
    background: rgba(26, 117, 78, 0.14);
}

.player-pro-checkout-option strong {
    font-size: 0.98rem;
}

.player-pro-checkout-price {
    display: grid;
    gap: 2px;
    color: rgba(34, 98, 70, 0.98);
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.1;
}

.player-pro-checkout-price-regular {
    color: rgba(88, 67, 36, 0.62);
    font-size: 0.84rem;
    font-weight: 750;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.player-pro-checkout-price-discounted {
    color: rgba(31, 113, 74, 0.98);
    font-size: 1rem;
    font-weight: 850;
}

.player-pro-checkout-price.is-unavailable {
    color: rgba(123, 45, 45, 0.78);
    font-size: 0.86rem;
    font-weight: 700;
}

.player-pro-checkout-option small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.78rem;
    line-height: 1.35;
}

.player-pro-checkout-option[disabled] {
    cursor: wait;
    opacity: 0.64;
}

.player-pro-checkout-status {
    min-height: 1.2em;
    margin: 0;
    color: rgba(50, 44, 32, 0.72);
    font-size: 0.86rem;
}

.player-pro-checkout-status[data-kind="error"] {
    color: rgba(123, 45, 45, 0.88);
}

.monetization-locked {
    position: relative;
    opacity: 0.62;
    overflow: visible;
}

.monetization-locked,
.monetization-locked * {
    cursor: not-allowed;
}

.monetization-lock-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 5;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 244, 200, 0.82);
    border-radius: 999px;
    background: linear-gradient(180deg, #7a5721, #443314);
    box-shadow:
        0 2px 7px rgba(28, 20, 8, 0.24),
        inset 0 1px 0 rgba(255, 245, 200, 0.42);
    pointer-events: none;
}

.monetization-lock-badge::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 6px;
    height: 6px;
    border: 1.7px solid #fff0ad;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
}

.monetization-lock-badge::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 10px;
    height: 7px;
    border-radius: 2px;
    background: #fff0ad;
}

.riddle-detail-cta-primary .monetization-lock-badge,
.riddle-detail-secondary-action-primary .monetization-lock-badge {
    top: -6px;
    right: -6px;
}

body[data-theme="dark"] .monetization-feature,
body[data-theme="dark"] .monetization-usage {
    color: rgba(238, 225, 197, 0.72);
}

body[data-theme="dark"] .player-upgrade-pro-card {
    border-color: rgba(238, 210, 138, 0.24);
    background: linear-gradient(135deg, rgba(80, 142, 108, 0.18), rgba(238, 196, 112, 0.12));
}

body[data-theme="dark"] .player-upgrade-pro-card strong,
body[data-theme="dark"] .player-pro-subscription-card strong,
body[data-theme="dark"] .player-pro-checkout-option {
    color: rgba(238, 225, 197, 0.92);
}

body[data-theme="dark"] .player-pro-subscription-card {
    border-color: rgba(238, 210, 138, 0.24);
    background: linear-gradient(135deg, rgba(238, 196, 112, 0.14), rgba(80, 142, 108, 0.14));
}

body[data-theme="dark"] .player-session-chip.is-pro .player-session-button {
    border-color: rgba(255, 224, 132, 0.32);
    background: rgba(255, 250, 237, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 243, 196, 0.14),
        0 0 18px rgba(214, 158, 54, 0.18);
}

body[data-theme="dark"] .player-pro-checkout-option {
    border-color: rgba(238, 210, 138, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .player-pro-checkout-promotion {
    border-color: rgba(238, 210, 138, 0.24);
    background: rgba(238, 210, 138, 0.1);
    color: rgba(238, 225, 197, 0.82);
}

body[data-theme="dark"] .player-pro-checkout-promotion strong {
    color: rgba(255, 226, 151, 0.96);
}

body[data-theme="dark"] .player-pro-checkout-promotion span,
body[data-theme="dark"] .player-pro-checkout-price-regular {
    color: rgba(238, 225, 197, 0.58);
}

body[data-theme="dark"] .player-pro-checkout-price-discounted {
    color: rgba(255, 226, 151, 0.96);
}

body[data-theme="dark"] .player-pro-checkout-option:hover,
body[data-theme="dark"] .player-pro-checkout-option:focus-visible,
body[data-theme="dark"] .player-pro-checkout-option[aria-pressed="true"] {
    border-color: rgba(238, 210, 138, 0.42);
    background: rgba(238, 210, 138, 0.12);
}

body[data-theme="dark"] .player-pro-checkout-option small,
body[data-theme="dark"] .player-pro-checkout-price,
body[data-theme="dark"] .player-pro-checkout-status {
    color: rgba(238, 225, 197, 0.72);
}

body[data-theme="dark"] .player-pro-checkout-price.is-unavailable {
    color: rgba(255, 157, 157, 0.9);
}

body[data-theme="dark"] .player-pro-checkout-status[data-kind="error"] {
    color: rgba(255, 157, 157, 0.9);
}

@media (max-width: 520px) {
    .player-pro-checkout-options {
        grid-template-columns: 1fr;
    }
}


/* Player achievements panel and unlock feedback. */

.toolbar-primary-action-icon-achievements {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.achievements-panel {
    width: 460px;
    max-width: calc(100vw - 24px);
    height: min(620px, calc(100vh - 36px));
    max-height: calc(100vh - 36px);
    overflow: hidden;
}

@supports (height: 100dvh) {
    .achievements-panel {
        height: min(620px, calc(100dvh - 36px));
        max-height: calc(100dvh - 36px);
    }
}

.achievements-title-block {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.achievements-content {
    display: grid;
    align-content: start;
    gap: 12px;
    height: calc(100% - 44px);
    margin-top: 14px;
    padding-right: 4px;
    overflow: auto;
    overscroll-behavior: contain;
}

.riddle-gallery-grid.riddle-gallery-achievements-grid {
    grid-template-columns: minmax(0, 1fr);
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-catalog-main {
    gap: 10px;
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar {
    position: relative;
    isolation: isolate;
    min-height: 128px;
    padding: 18px 20px;
    overflow: hidden;
    border-color: rgba(177, 123, 29, 0.34);
    background: linear-gradient(90deg, #fffdf8 0%, #faf3e5 52%, #e8d1a7 100%);
    box-shadow:
        0 8px 20px rgba(76, 52, 17, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.riddle-gallery-achievements-hero {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 253, 248, 0.78) 37%, rgba(255, 253, 248, 0.08) 64%, transparent 100%);
    pointer-events: none;
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar .riddle-gallery-toolbar-main {
    position: relative;
    z-index: 1;
    align-items: center;
    min-height: 90px;
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar .riddle-gallery-toolbar-copy {
    gap: 12px;
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar .riddle-gallery-toolbar-title {
    color: #10243d;
    font-size: clamp(1.72rem, 2.1vw, 2.08rem);
    letter-spacing: 0.025em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

.riddle-gallery-catalog-shell[data-riddle-active-nav="achievements"] .riddle-gallery-achievements-toolbar .riddle-gallery-toolbar-subtitle {
    min-height: 44px;
    padding: 7px 14px 7px 10px;
    border: 1px solid rgba(207, 144, 32, 0.54);
    border-radius: 11px;
    background: rgba(255, 253, 248, 0.84);
    color: #182d46;
    font-family: var(--maphora-title-font, Georgia, serif);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(103, 69, 18, 0.08);
}

.riddle-gallery-sections.riddle-gallery-achievements-content {
    height: 100%;
    margin-top: 0;
    padding: 12px 12px 22px;
    overflow: auto;
    border: 1px solid var(--riddle-gallery-viewport-border);
    border-radius: 15px;
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.82), transparent 34%),
        rgba(255, 253, 248, 0.88);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(111, 73, 18, 0.12);
}

.riddle-gallery-achievements-content .achievements-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 10px;
}

.riddle-gallery-achievements-content .achievements-category {
    gap: 8px;
}

.riddle-gallery-achievements-content .achievements-category-heading {
    padding: 0 0 0 1px;
}

.riddle-gallery-achievements-content .achievements-category-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    order: 1;
    background: linear-gradient(90deg, rgba(100, 76, 38, 0.18), transparent);
}

.riddle-gallery-achievements-content .achievements-category-heading h3 {
    flex: 0 1 auto;
    color: rgba(43, 36, 24, 0.82);
    font-family: var(--maphora-title-font, Georgia, serif);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.riddle-gallery-achievements-content .achievements-category-heading span {
    order: 2;
}

.riddle-gallery-achievements-content .achievement-card {
    grid-template-columns: clamp(132px, 12vw, 160px) minmax(0, 1fr);
    gap: 14px;
    min-height: 168px;
    padding: 10px;
    border-radius: 12px;
    border-color: rgba(106, 91, 56, 0.22);
    background: rgba(255, 252, 244, 0.8);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 5px 13px rgba(66, 45, 14, 0.035);
}

.riddle-gallery-achievements-content .achievement-card.is-unlocked {
    border-color: rgba(66, 116, 72, 0.28);
    background:
        linear-gradient(90deg, rgba(87, 139, 88, 0.1), transparent 38%),
        rgba(255, 252, 244, 0.88);
}

.riddle-gallery-achievements-content .achievement-icon-slot {
    width: 100%;
    height: 100%;
    min-height: 146px;
    border-radius: 11px;
    border-color: rgba(158, 111, 32, 0.42);
    background: #eee5d2;
    box-shadow:
        0 5px 12px rgba(34, 25, 12, 0.14),
        inset 0 0 0 1px rgba(255, 235, 175, 0.26);
}

.riddle-gallery-achievements-content .achievement-icon-image {
    transition: scale 220ms ease, filter 220ms ease;
}

.riddle-gallery-achievements-content .achievement-card:hover .achievement-icon-image {
    scale: 1.025;
}

.riddle-gallery-achievements-content .achievement-card-main {
    align-self: stretch;
    gap: 6px;
}

.riddle-gallery-achievements-content .achievement-card-heading h4 {
    font-family: var(--maphora-title-font, Georgia, serif);
    font-size: 1.02rem;
    line-height: 1.22;
}

.riddle-gallery-achievements-content .achievement-card p {
    font-size: 0.84rem;
    line-height: 1.34;
}

.riddle-gallery-achievements-content .achievement-progress {
    margin-top: auto;
}

.riddle-gallery-achievements-content .achievement-progress-track {
    height: 7px;
}

.riddle-gallery-achievements-content .achievement-meta span {
    padding: 2px 7px;
}

.riddle-gallery-achievements-content .achievements-category:first-of-type .achievement-card {
    grid-template-columns: clamp(160px, 15vw, 188px) minmax(0, 1fr);
    min-height: 184px;
}

.riddle-gallery-achievements-content .achievements-category:first-of-type .achievement-icon-slot {
    min-height: 162px;
}

.achievements-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 250, 237, 0.56);
}

.achievements-summary-count,
.achievements-summary-source {
    min-width: 0;
    overflow-wrap: anywhere;
}

.achievements-summary-count {
    color: rgba(43, 36, 24, 0.9);
    font-size: 0.92rem;
    font-weight: 800;
}

.achievements-summary-source {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(50, 79, 69, 0.1);
    color: rgba(50, 79, 69, 0.86);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: right;
}

.achievements-inline-status {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(73, 107, 127, 0.18);
    background: rgba(73, 107, 127, 0.08);
    color: rgba(42, 62, 74, 0.9);
    font-size: 0.82rem;
    line-height: 1.35;
}

.achievements-state-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    border: 1px dashed rgba(88, 69, 37, 0.18);
    background: rgba(255, 250, 237, 0.52);
    color: rgba(43, 36, 24, 0.78);
    line-height: 1.42;
}

.achievements-state-card strong {
    color: rgba(43, 36, 24, 0.92);
}

.achievements-state-card.is-error {
    border-style: solid;
    border-color: rgba(123, 63, 45, 0.22);
    background: rgba(123, 63, 45, 0.07);
}

.achievements-retry {
    justify-self: start;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 8px;
}

.achievements-category {
    display: grid;
    gap: 8px;
}

.achievements-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.achievements-category-heading h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: rgba(43, 36, 24, 0.78);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.achievements-category-heading span {
    flex: 0 0 auto;
    color: rgba(43, 36, 24, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
}

.achievements-list {
    display: grid;
    gap: 8px;
}

.achievement-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 250, 237, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.achievement-card.is-unlocked {
    border-color: rgba(55, 120, 78, 0.26);
    background:
        linear-gradient(90deg, rgba(55, 120, 78, 0.1), transparent 46%),
        rgba(255, 250, 237, 0.76);
}

.achievement-card.is-locked {
    color: rgba(43, 36, 24, 0.68);
}

.achievement-card.is-locked:not(.is-secret) .achievement-icon-image {
    filter: grayscale(1);
    opacity: 0.48;
}

.achievement-card.is-secret {
    border-style: dashed;
}

.achievement-icon-slot {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 255, 255, 0.58);
}

.achievement-card.is-unlocked .achievement-icon-slot {
    border-color: rgba(55, 120, 78, 0.26);
    background: rgba(226, 246, 229, 0.72);
}

.achievement-card.is-secret .achievement-icon-slot {
    background: rgba(43, 36, 24, 0.08);
}

.achievement-icon-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.achievement-icon-fallback {
    color: rgba(167, 121, 24, 0.9);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1;
}

.achievement-card.is-secret .achievement-icon-fallback {
    color: rgba(43, 36, 24, 0.42);
}

.achievement-card-main {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.achievement-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
}

.achievement-card-heading h4 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: rgba(43, 36, 24, 0.92);
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.18;
}

.achievement-card p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: rgba(43, 36, 24, 0.68);
    font-size: 0.83rem;
    line-height: 1.36;
}

.achievement-card .achievement-action {
    color: var(--text-secondary, rgba(43, 36, 24, 0.64));
    font-size: 0.82rem;
    font-style: italic;
}

.player-achievements-profile-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.achievement-card.is-unlocked p {
    color: rgba(43, 36, 24, 0.78);
}

.achievement-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    max-width: 120px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(43, 36, 24, 0.06);
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.achievement-badge[data-achievement-tone="unlocked"] {
    border-color: rgba(55, 120, 78, 0.28);
    background: rgba(55, 120, 78, 0.12);
    color: rgba(36, 98, 58, 0.92);
}

.achievement-progress {
    display: grid;
    gap: 5px;
}

.achievement-progress-row,
.achievement-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.achievement-progress-row {
    justify-content: space-between;
    color: rgba(43, 36, 24, 0.58);
    font-size: 0.72rem;
    font-weight: 800;
}

.achievement-progress-row strong {
    color: rgba(43, 36, 24, 0.78);
}

.achievement-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(43, 36, 24, 0.1);
}

.achievement-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3c7b5a, #d3aa48);
}

.achievement-meta span {
    min-width: 0;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(43, 36, 24, 0.06);
    color: rgba(43, 36, 24, 0.56);
    font-size: 0.68rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.achievement-toast {
    position: fixed;
    top: var(--hud-panel-top);
    right: var(--hud-gap);
    bottom: auto;
    z-index: 6200;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    min-height: 70px;
    padding: 12px 42px 12px 12px;
    border-radius: 8px;
    border: 1px solid rgba(55, 120, 78, 0.28);
    background:
        linear-gradient(180deg, rgba(255, 250, 237, 0.96), rgba(234, 242, 223, 0.96));
    color: rgba(43, 36, 24, 0.92);
    box-shadow:
        0 18px 40px rgba(24, 19, 10, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.54);
    cursor: default;
    animation: achievement-toast-in 180ms ease-out;
}

.achievement-toast.hidden {
    display: none;
}

.achievement-toast-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: rgba(55, 120, 78, 0.13);
    color: #2f704d;
    font-size: 1.2rem;
    font-weight: 900;
}

.achievement-toast-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.achievement-toast-kicker,
.achievement-toast-copy strong,
.achievement-toast-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.achievement-toast-close {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: rgba(43, 36, 24, 0.58);
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.achievement-toast-close:hover {
    border-color: rgba(55, 120, 78, 0.2);
    background: rgba(55, 120, 78, 0.1);
    color: rgba(43, 36, 24, 0.9);
}

.achievement-toast-close:focus-visible {
    outline: 2px solid rgba(47, 112, 77, 0.72);
    outline-offset: 1px;
}

.achievement-toast-kicker {
    color: #2f704d;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.achievement-toast-copy strong {
    font-size: 0.94rem;
    line-height: 1.18;
}

.achievement-toast-copy small {
    color: rgba(43, 36, 24, 0.68);
    font-size: 0.8rem;
    line-height: 1.3;
}

@keyframes achievement-toast-in {
    0% {
        opacity: 0;
        transform: translateX(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

body[data-theme="dark"] .achievements-summary,
body[data-theme="dark"] .achievements-state-card,
body[data-theme="dark"] .achievement-card {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(16, 23, 27, 0.66);
    color: rgba(237, 228, 210, 0.78);
}

body[data-theme="dark"] .achievements-summary-count,
body[data-theme="dark"] .achievements-state-card strong,
body[data-theme="dark"] .achievements-category-heading h3,
body[data-theme="dark"] .achievement-card-heading h4 {
    color: rgba(237, 228, 210, 0.92);
}

body[data-theme="dark"] .achievements-summary-source,
body[data-theme="dark"] .achievements-category-heading span,
body[data-theme="dark"] .achievement-card p,
body[data-theme="dark"] .achievement-progress-row,
body[data-theme="dark"] .achievement-progress-row strong,
body[data-theme="dark"] .achievement-meta span {
    color: rgba(237, 228, 210, 0.68);
}

body[data-theme="dark"] .achievement-icon-slot {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(237, 228, 210, 0.07);
}

body[data-theme="dark"] .achievement-card.is-unlocked {
    border-color: rgba(93, 168, 112, 0.28);
    background:
        linear-gradient(90deg, rgba(93, 168, 112, 0.12), transparent 46%),
        rgba(16, 23, 27, 0.72);
}

body[data-theme="dark"] .achievement-badge {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(237, 228, 210, 0.07);
    color: rgba(237, 228, 210, 0.68);
}

body[data-theme="dark"] .achievement-badge[data-achievement-tone="unlocked"] {
    border-color: rgba(93, 168, 112, 0.32);
    background: rgba(93, 168, 112, 0.14);
    color: rgba(185, 235, 194, 0.92);
}

body[data-theme="dark"] .achievements-inline-status {
    border-color: rgba(123, 171, 198, 0.18);
    background: rgba(123, 171, 198, 0.08);
    color: rgba(206, 226, 238, 0.88);
}

body[data-theme="dark"] .achievement-toast {
    border-color: rgba(93, 168, 112, 0.32);
    background:
        linear-gradient(180deg, rgba(21, 29, 28, 0.96), rgba(23, 38, 31, 0.96));
    color: rgba(237, 228, 210, 0.94);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
}

body[data-theme="dark"] .achievement-toast-copy small {
    color: rgba(237, 228, 210, 0.68);
}

body[data-theme="dark"] .achievement-toast-kicker {
    color: rgba(185, 235, 194, 0.92);
}

body[data-theme="dark"] .achievement-toast-close {
    color: rgba(237, 228, 210, 0.68);
}

body[data-theme="dark"] .achievement-toast-close:hover {
    border-color: rgba(93, 168, 112, 0.26);
    background: rgba(93, 168, 112, 0.14);
    color: rgba(237, 228, 210, 0.94);
}

@media (prefers-reduced-motion: reduce) {
    .riddle-gallery-achievements-content .achievement-icon-image {
        transition: none;
    }

    .riddle-gallery-achievements-content .achievement-card:hover .achievement-icon-image {
        scale: 1;
    }

    .achievement-toast {
        animation: none;
    }
}

@media (max-width: 640px) {
    .achievements-panel {
        width: calc(100vw - 16px) !important;
        height: min(72dvh, 560px) !important;
        max-width: none;
    }

    .achievement-card {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
    }

    .achievement-icon-slot {
        width: 42px;
        height: 42px;
    }

    .achievement-card-heading {
        grid-template-columns: 1fr;
    }

    .achievement-badge {
        justify-self: start;
    }

    .achievement-toast {
        right: 10px;
        top: calc(70px + env(safe-area-inset-top));
        bottom: auto;
        width: calc(100vw - 20px);
    }
}


.cadastre-parcel-popup {
    z-index: 7;
}

.cadastre-parcel-popup .maplibre-dom-tool-popup-card {
    min-width: 224px;
    max-width: min(292px, calc(100vw - 32px));
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: auto;
}

.cadastre-parcel-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.cadastre-parcel-card-loading {
    min-height: 52px;
    align-items: center;
}

.cadastre-parcel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: start;
    gap: 10px;
}

.cadastre-parcel-kicker {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cadastre-parcel-title {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(35, 27, 18, 0.96);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.cadastre-parcel-close {
    justify-self: end;
}

.cadastre-parcel-status {
    color: rgba(43, 36, 24, 0.74);
    font-size: 0.86rem;
    font-weight: 700;
}

.cadastre-parcel-processing-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cadastre-processing-icon {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(43, 36, 24, 0.22);
    border-top-color: #f97316;
    border-radius: 999px;
    flex: 0 0 auto;
    animation: cadastre-processing-spin 0.75s linear infinite;
}

@keyframes cadastre-processing-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cadastre-processing-icon {
        animation-duration: 1.8s;
    }
}

.cadastre-parcel-facts {
    display: grid;
    gap: 6px;
}

.cadastre-parcel-fact {
    display: grid;
    grid-template-columns: minmax(96px, 0.75fr) minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    color: rgba(43, 36, 24, 0.72);
    cursor: help;
    font-size: 0.78rem;
}

.cadastre-parcel-fact span {
    min-width: 0;
    overflow-wrap: normal;
}

.cadastre-parcel-fact span::after {
    content: "\00a0:";
}

.cadastre-parcel-fact strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(35, 27, 18, 0.94);
    font-size: 0.82rem;
}

.cadastre-boundary-marker-popup .maplibre-dom-tool-popup-card {
    max-width: min(336px, calc(100vw - 32px));
}

.cadastre-boundary-marker-card {
    gap: 12px;
}

.cadastre-boundary-parcel-list {
    display: grid;
    gap: 6px;
}

.cadastre-boundary-parcel-row {
    display: grid;
    gap: 2px;
    padding: 8px;
    border: 1px solid rgba(88, 69, 37, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.48);
}

.cadastre-boundary-parcel-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(35, 27, 18, 0.94);
    font-size: 0.82rem;
}

.cadastre-boundary-parcel-row span,
.cadastre-boundary-parcel-row small {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(43, 36, 24, 0.66);
    font-size: 0.72rem;
    font-weight: 700;
}

body[data-theme="dark"] .cadastre-parcel-kicker,
body[data-theme="dark"] .cadastre-parcel-status,
body[data-theme="dark"] .cadastre-parcel-fact {
    color: rgba(255, 248, 235, 0.66);
}

body[data-theme="dark"] .cadastre-parcel-title,
body[data-theme="dark"] .cadastre-parcel-fact strong {
    color: rgba(255, 248, 235, 0.94);
}

body[data-theme="dark"] .cadastre-processing-icon {
    border-color: rgba(255, 248, 235, 0.2);
    border-top-color: #fb923c;
}

body[data-theme="dark"] .cadastre-boundary-parcel-row {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .cadastre-boundary-parcel-row strong {
    color: rgba(255, 248, 235, 0.94);
}

body[data-theme="dark"] .cadastre-boundary-parcel-row span,
body[data-theme="dark"] .cadastre-boundary-parcel-row small {
    color: rgba(255, 248, 235, 0.64);
}

@media (max-width: 520px) {
    .cadastre-parcel-popup .maplibre-dom-tool-popup-card {
        max-width: calc(100vw - 24px);
    }

    .cadastre-parcel-fact {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}


/* Shared player-content moderation lifecycle and status badges. */

.player-content-moderation-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.42rem;
    padding: 0.28rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e8ebef;
    color: #4c596b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.player-content-moderation-status::before {
    width: 0.42rem;
    height: 0.42rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.player-content-moderation-status[data-tone="success"] {
    border-color: rgba(36, 100, 63, 0.18);
    background: #dff2e7;
    color: #24643f;
}

.player-content-moderation-status[data-tone="warning"] {
    border-color: rgba(133, 90, 8, 0.18);
    background: #fff0c9;
    color: #855a08;
}

.player-content-moderation-status[data-tone="danger"] {
    border-color: rgba(139, 51, 44, 0.18);
    background: #fae1df;
    color: #8b332c;
}

.player-content-moderation-status[data-tone="pending"] {
    border-color: rgba(52, 88, 141, 0.18);
    background: #e3ebfa;
    color: #34588d;
}

.player-content-moderation-status[data-state="pending_review"]::before,
.player-content-moderation-status[data-state="sync_pending"]::before {
    animation: player-content-moderation-pulse 1.8s ease-in-out infinite;
}

body[data-theme="dark"] .player-content-moderation-status {
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.09);
    color: rgba(247, 244, 238, 0.76);
}

body[data-theme="dark"] .player-content-moderation-status[data-tone="success"] {
    background: rgba(54, 142, 91, 0.22);
    color: #a8e1bc;
}

body[data-theme="dark"] .player-content-moderation-status[data-tone="warning"] {
    background: rgba(201, 145, 31, 0.2);
    color: #f2cf78;
}

body[data-theme="dark"] .player-content-moderation-status[data-tone="danger"] {
    background: rgba(201, 71, 59, 0.2);
    color: #f1aaa3;
}

body[data-theme="dark"] .player-content-moderation-status[data-tone="pending"] {
    background: rgba(75, 119, 184, 0.24);
    color: #b7cff4;
}

@keyframes player-content-moderation-pulse {
    0%, 100% { opacity: 0.42; transform: scale(0.82); }
    50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .player-content-moderation-status::before {
        animation: none !important;
    }
}


.onf-public-forests-layer-button {
    min-width: 58px;
}

.onf-public-forests-radial-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #f5c45a;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0;
}

.onf-public-forests-radial-core {
    border-color: rgba(245, 158, 11, 0.66);
}

.onf-public-forest-popup {
    z-index: 7;
}

.onf-public-forest-label-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
}

.onf-public-forest-parcel-label {
    position: absolute;
    min-width: 18px;
    max-width: 72px;
    padding: 1px 5px;
    border: 1px solid rgba(111, 73, 6, 0.24);
    border-radius: 8px;
    background: rgba(255, 248, 213, 0.88);
    box-shadow: 0 1px 3px rgba(39, 26, 4, 0.14);
    color: #5f3b00;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    overflow: hidden;
}

.onf-public-forest-popup .maplibre-dom-tool-popup-card {
    min-width: 236px;
    max-width: min(308px, calc(100vw - 32px));
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: auto;
}

.onf-public-forest-card {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.onf-public-forest-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: start;
    gap: 10px;
}

.onf-public-forest-kicker {
    color: rgba(31, 73, 40, 0.72);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.onf-public-forest-title {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(22, 48, 29, 0.96);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
}

.onf-public-forest-close {
    justify-self: end;
}

.onf-public-forest-facts {
    display: grid;
    gap: 6px;
}

.onf-public-forest-fact {
    display: grid;
    grid-template-columns: minmax(86px, 0.75fr) minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    color: rgba(35, 67, 41, 0.74);
    font-size: 0.78rem;
}

.onf-public-forest-fact strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgba(20, 50, 27, 0.94);
    font-size: 0.82rem;
}

body[data-theme="dark"] .onf-public-forest-kicker,
body[data-theme="dark"] .onf-public-forest-fact {
    color: rgba(224, 255, 228, 0.66);
}

body[data-theme="dark"] .onf-public-forest-title,
body[data-theme="dark"] .onf-public-forest-fact strong {
    color: rgba(241, 255, 238, 0.94);
}

@media (max-width: 520px) {
    .onf-public-forest-popup .maplibre-dom-tool-popup-card {
        max-width: calc(100vw - 24px);
    }

    .onf-public-forest-fact {
        grid-template-columns: 1fr;
        gap: 1px;
    }
}


/* Wikipedia discovery is rendered as several geographic callouts inside the
   map stacking context. Shell controls keep priority while cards remain usable. */
.wikipedia-discovery-callouts {
    position: absolute;
    z-index: 48;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.wikipedia-discovery-callout {
    --wikipedia-callout-pointer-x: 50%;
    position: absolute;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    width: 218px;
    min-height: 70px;
    padding: 9px 11px 9px 9px;
    overflow: visible;
    color: var(--ink);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255, 253, 246, 0.91), rgba(238, 222, 184, 0.82)),
        var(--panel-compositor-base);
    border: 1px solid rgba(167, 121, 24, 0.4);
    border-radius: 13px;
    box-shadow: 0 13px 30px rgba(31, 23, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(13px) saturate(1.1);
    -webkit-backdrop-filter: blur(13px) saturate(1.1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(0.98);
    transition: opacity 140ms ease, transform 160ms ease;
}

.wikipedia-discovery-callout[data-has-image="true"] {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 10px;
    width: 252px;
    min-height: 96px;
    padding: 6px 12px 6px 6px;
}

.wikipedia-discovery-callout[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.wikipedia-discovery-callout::after {
    content: "";
    position: absolute;
    left: var(--wikipedia-callout-pointer-x);
    bottom: -7px;
    width: 12px;
    height: 12px;
    background: rgba(242, 229, 197, 0.92);
    border-right: 1px solid rgba(167, 121, 24, 0.4);
    border-bottom: 1px solid rgba(167, 121, 24, 0.4);
    transform: translateX(-50%) rotate(45deg);
}

.wikipedia-discovery-callout-mark {
    display: grid;
    place-items: center;
    align-self: start;
    width: 27px;
    height: 27px;
    color: var(--gold);
    background: rgba(167, 121, 24, 0.09);
    border: 1px solid rgba(167, 121, 24, 0.26);
    border-radius: 50%;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
}

.wikipedia-discovery-callout-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wikipedia-discovery-callout[data-has-image="true"] .wikipedia-discovery-callout-mark {
    align-self: stretch;
    width: 82px;
    height: auto;
    min-height: 82px;
    border-color: rgba(167, 121, 24, 0.34);
    border-radius: 9px;
    box-shadow: 0 3px 10px rgba(31, 23, 10, 0.2);
}

.wikipedia-discovery-callout-copy { min-width: 0; }

.wikipedia-discovery-callout[data-has-image="true"] .wikipedia-discovery-callout-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82px;
}

.wikipedia-discovery-callout-eyebrow {
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.wikipedia-discovery-callout-title {
    display: block;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wikipedia-discovery-callout[data-has-image="true"] .wikipedia-discovery-callout-title {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wikipedia-discovery-callout-description:empty { display: none; }

.wikipedia-discovery-callout-description {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    font-size: 9.5px;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wikipedia-discovery-callout:hover,
.wikipedia-discovery-callout:focus-visible {
    border-color: color-mix(in srgb, var(--gold) 72%, white);
    box-shadow: 0 17px 36px rgba(31, 23, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.78);
    outline: none;
}

.wikipedia-discovery-radial-button .map-radial-layer-icon text {
    fill: currentColor;
    stroke: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;
    font-weight: 700;
}

.wikipedia-discovery-radial-button[data-load-state="loading"] .map-radial-item-core::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid transparent;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: wikipedia-discovery-loading 900ms linear infinite;
}

body[data-theme="dark"] .wikipedia-discovery-callout {
    background: linear-gradient(135deg, rgba(20, 38, 58, 0.94), rgba(10, 23, 38, 0.88)), var(--panel-compositor-base);
    border-color: rgba(224, 174, 45, 0.36);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .wikipedia-discovery-callout::after {
    background: rgba(15, 30, 47, 0.96);
    border-color: rgba(224, 174, 45, 0.36);
}

@keyframes wikipedia-discovery-loading { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
    .wikipedia-discovery-callout { width: 190px; }

    .wikipedia-discovery-callout[data-has-image="true"] {
        grid-template-columns: 64px minmax(0, 1fr);
        width: 224px;
        min-height: 80px;
    }

    .wikipedia-discovery-callout[data-has-image="true"] .wikipedia-discovery-callout-mark {
        width: 64px;
        min-height: 64px;
    }

    .wikipedia-discovery-callout[data-has-image="true"] .wikipedia-discovery-callout-copy { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .wikipedia-discovery-callout { transition: none; }
    .wikipedia-discovery-radial-button[data-load-state="loading"] .map-radial-item-core::after { animation: none; }
}


/* Geolocated images stay compact so the placement runtime can expose the
   maximum number of licensed photos without covering the underlying map. */
.geolocated-images-cards {
    position: absolute;
    z-index: 47;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.geolocated-image-card {
    --geolocated-image-pointer-x: 50%;
    position: absolute;
    width: 98px;
    min-height: 104px;
    padding: 3px;
    overflow: visible;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel-compositor-base) 92%, white 8%);
    border: 1px solid rgba(167, 121, 24, 0.42);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(31, 23, 10, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px) scale(0.97);
    transition: opacity 120ms ease, transform 140ms ease;
}

.geolocated-image-card[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.geolocated-image-card::after {
    content: "";
    position: absolute;
    left: var(--geolocated-image-pointer-x);
    bottom: -5px;
    width: 8px;
    height: 8px;
    background: color-mix(in srgb, var(--panel-compositor-base) 92%, white 8%);
    border-right: 1px solid rgba(167, 121, 24, 0.42);
    border-bottom: 1px solid rgba(167, 121, 24, 0.42);
    transform: translateX(-50%) rotate(45deg);
}

.geolocated-image-preview {
    position: relative;
    display: block;
    width: 100%;
    height: 72px;
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: rgba(21, 27, 34, 0.92);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.geolocated-image-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.geolocated-image-source {
    position: absolute;
    top: 3px;
    left: 3px;
    max-width: calc(100% - 6px);
    padding: 2px 4px;
    overflow: hidden;
    color: white;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.58);
    border-radius: 4px;
}

.geolocated-image-attribution {
    display: block;
    min-height: 25px;
    padding: 3px 2px 1px;
    font-size: 6.8px;
    line-height: 1.08;
}

.geolocated-image-author {
    overflow: hidden;
    color: color-mix(in srgb, var(--ink) 72%, transparent);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geolocated-image-preview:hover,
.geolocated-image-preview:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--gold) 76%, white);
    outline-offset: 1px;
}

.geolocated-images-radial-button[data-load-state="loading"] .map-radial-item-core::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid transparent;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: geolocated-images-loading 900ms linear infinite;
}

.geolocated-images-radial-icon {
    font-size: 15px;
    line-height: 1;
}

body[data-theme="dark"] .geolocated-image-card,
body[data-theme="dark"] .geolocated-image-card::after {
    background: rgba(12, 27, 42, 0.95);
    border-color: rgba(224, 174, 45, 0.38);
}

@keyframes geolocated-images-loading { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
    .geolocated-image-card {
        width: 86px;
        min-height: 94px;
    }

    .geolocated-image-preview { height: 64px; }
    .geolocated-image-attribution { min-height: 23px; font-size: 6.2px; }
}

@media (prefers-reduced-motion: reduce) {
    .geolocated-image-card { transition: none; }
    .geolocated-images-radial-button[data-load-state="loading"] .map-radial-item-core::after { animation: none; }
}


/* Riddle validation, celebration, satellite and beacon challenge surfaces, plus the gallery panel.
   Generic shell, auth and overlay styles remain in their dedicated layers. */

.riddle-launch-transition {
    position: fixed;
    inset: 0;
    z-index: 12000;
    overflow: hidden;
    contain: strict;
    isolation: isolate;
    pointer-events: auto;
    background: transparent;
}

.riddle-launch-transition[hidden] {
    display: none;
}

.riddle-launch-transition-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100vw, 177.7778vh);
    height: max(100vh, 56.25vw);
    overflow: hidden;
    contain: paint;
    background:
        radial-gradient(circle at 48% 46%, rgba(78, 53, 28, 0.24), transparent 48%),
        #14251f;
    transform: translate(-50%, -50%);
    -webkit-mask-image: url("/assets/vendor/codyhouse-ink-transition/ink.png");
    mask-image: url("/assets/vendor/codyhouse-ink-transition/ink.png");
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 2500% 100%;
    mask-size: 2500% 100%;
    will-change: mask-position;
}

.riddle-launch-transition-layer::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 48%, transparent 24%, rgba(7, 15, 18, 0.14) 100%),
        linear-gradient(115deg, rgba(18, 35, 27, 0.05), rgba(47, 27, 15, 0.15));
}

.riddle-launch-transition-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.riddle-launch-transition-image[hidden] {
    display: none;
}

body.riddle-launch-transition-active {
    cursor: progress;
}

.riddle-gallery-panel {
    --riddle-ink: #3e2b1a;
    --riddle-ink-soft: #684f34;
    --riddle-gold: #e7c874;
    --riddle-gold-soft: #c7a86b;
    --riddle-ivory: #f3e4c1;
    --riddle-parchment: #e8d2a7;
    --riddle-parchment-soft: #f1e2bf;
    --riddle-panel-dark: #1a130f;
    --riddle-panel-dark-soft: #2a1f18;
    --riddle-illustration-green: #6af44b;
    width: min(1536px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    height: min(1000px, calc(100vh - 36px));
    max-height: calc(100vh - 36px);
    padding: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(54, 37, 25, 0.96), rgba(26, 19, 15, 0.98)),
        radial-gradient(circle at top left, rgba(179, 126, 61, 0.18), rgba(0, 0, 0, 0) 52%);
    border-color: rgba(192, 144, 79, 0.26);
    box-shadow:
        0 44px 110px rgba(7, 6, 5, 0.58),
        0 18px 38px rgba(16, 10, 6, 0.42),
        inset 0 1px 0 rgba(255, 228, 181, 0.08);
    color: var(--riddle-ivory);
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    touch-action: pan-y;
}

@media (max-width: 640px) {
    .beacon-gallery-toolbar-actions {
        width: 100%;
        justify-content: stretch;
    }

    .beacon-gallery-toolbar-actions > button,
    .beacon-gallery-card {
        width: 100%;
    }

    .beacon-hunt-panel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }

    .beacon-hunt-panel-facts,
    .beacon-hunt-facts-grid {
        grid-template-columns: 1fr;
    }
}

@supports (height: 100dvh) {
    .riddle-gallery-panel {
        height: min(1000px, calc(100dvh - 36px));
        max-height: calc(100dvh - 36px);
    }
}

.riddle-gallery-panel button,
.riddle-gallery-panel select,
.riddle-gallery-panel input,
.riddle-gallery-panel textarea {
    font-family: inherit;
}

.riddle-pile-poil-confirm {
    position: fixed;
    z-index: 5300;
    pointer-events: none;
}

.riddle-pile-poil-confirm.hidden,
.riddle-pile-poil-miss.hidden,
.riddle-pile-poil-celebration.hidden {
    display: none;
}

.reward-confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 5288;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

@supports (height: 100dvh) {
    .reward-confetti-canvas {
        height: 100dvh;
    }
}

.riddle-pile-poil-outside-cross {
    width: 30px;
    height: 30px;
    margin: 0;
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(70, 22, 16, 0.34));
}

.riddle-pile-poil-outside-cross-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: #d84f3a;
    box-shadow:
        0 0 0 1px rgba(255, 246, 230, 0.9),
        0 0 14px rgba(216, 79, 58, 0.34);
    transform-origin: center;
}

.riddle-pile-poil-outside-cross-line:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.riddle-pile-poil-outside-cross-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.riddle-pile-poil-confirm-card,
.riddle-pile-poil-miss-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(58, 44, 35, 0.96), rgba(45, 34, 28, 0.96)),
        rgba(42, 31, 26, 0.96);
    border: 1px solid rgba(211, 173, 117, 0.2);
    box-shadow:
        0 22px 44px rgba(12, 8, 6, 0.34),
        inset 0 1px 0 rgba(255, 248, 231, 0.06);
    backdrop-filter: blur(18px);
    pointer-events: auto;
}

.riddle-pile-poil-confirm-card {
    width: min(320px, calc(100vw - 36px));
}

.riddle-pile-poil-miss {
    position: fixed;
    inset: 0;
    z-index: 5295;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
}

.riddle-pile-poil-miss-card {
    width: min(520px, calc(100vw - 48px));
    padding: 24px 26px;
    text-align: center;
    justify-items: center;
    animation: riddle-pile-poil-celebration-in 180ms ease-out;
}

.riddle-pile-poil-confirm[data-align="right"] .riddle-pile-poil-confirm-card {
    transform: translate(18px, -50%);
}

.riddle-pile-poil-confirm[data-align="left"] .riddle-pile-poil-confirm-card {
    transform: translate(calc(-100% - 18px), -50%);
}

.riddle-pile-poil-confirm-title {
    color: #f8eb9b;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
}

.riddle-pile-poil-confirm-body {
    color: rgba(245, 237, 224, 0.9);
    font-size: 0.95rem;
    line-height: 1.45;
}

.riddle-pile-poil-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.riddle-pile-poil-confirm-actions .secondary-button,
.riddle-pile-poil-confirm-actions button {
    min-height: 40px;
    justify-content: center;
    font-weight: 700;
    border-radius: 12px;
}

#riddle-pile-poil-confirm-cancel {
    background: rgba(255, 248, 235, 0.1);
    color: rgba(245, 237, 224, 0.92);
    border: 1px solid rgba(255, 240, 214, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.04);
}

#riddle-pile-poil-confirm-cancel:hover,
#riddle-pile-poil-confirm-cancel:focus-visible {
    background: rgba(255, 248, 235, 0.16);
    color: #fff8ea;
}

#riddle-pile-poil-confirm-accept {
    background: linear-gradient(180deg, rgba(72, 155, 95, 0.98), rgba(36, 101, 58, 1));
    color: #fcfff8;
    border: 1px solid rgba(151, 223, 131, 0.26);
    box-shadow:
        0 14px 24px rgba(19, 63, 36, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#riddle-pile-poil-confirm-accept:hover,
#riddle-pile-poil-confirm-accept:focus-visible {
    background: linear-gradient(180deg, rgba(84, 171, 108, 0.98), rgba(42, 112, 66, 1));
    color: #ffffff;
}

.riddle-pile-poil-celebration {
    position: fixed;
    inset: 0;
    z-index: 8900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: auto;
}

.riddle-pile-poil-celebration-card {
    display: grid;
    gap: 12px;
    min-width: min(460px, calc(100vw - 48px));
    max-width: min(560px, calc(100vw - 48px));
    padding: 28px 30px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(237, 201, 132, 0.18), transparent 58%),
        linear-gradient(180deg, rgba(62, 48, 38, 0.96), rgba(45, 34, 28, 0.96));
    border: 1px solid rgba(231, 198, 144, 0.22);
    box-shadow:
        0 28px 60px rgba(12, 8, 6, 0.3),
        inset 0 1px 0 rgba(255, 248, 231, 0.1);
    text-align: center;
    justify-items: center;
    backdrop-filter: blur(20px);
    pointer-events: auto;
    animation: riddle-pile-poil-celebration-in 220ms ease-out;
}

.riddle-pile-poil-celebration-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(70, 113, 82, 0.24);
    border: 1px solid rgba(133, 193, 148, 0.26);
    color: #dff3e4;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.riddle-pile-poil-celebration-title {
    color: #f8eb9b;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.05;
}

.riddle-pile-poil-celebration-body {
    color: rgba(245, 237, 224, 0.92);
    font-size: 1.04rem;
    line-height: 1.5;
}

.riddle-pile-poil-celebration-rating {
    display: grid;
    gap: 10px;
    width: 100%;
    margin-top: 2px;
}

.riddle-celebration-rating-title {
    color: rgba(255, 248, 235, 0.82);
    font-size: 0.9rem;
    font-weight: 800;
}

.riddle-celebration-rating-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(390px, 100%);
    justify-self: center;
}

.riddle-celebration-rating-button {
    display: grid;
    grid-template-rows: 34px auto;
    align-items: center;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 86px;
    padding: 11px 9px 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 248, 235, 0.14);
    background: rgba(8, 8, 10, 0.34);
    color: rgba(255, 252, 244, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    cursor: pointer;
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.riddle-celebration-rating-button:hover,
.riddle-celebration-rating-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 248, 235, 0.34);
    background: rgba(255, 248, 235, 0.12);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.riddle-celebration-rating-button.is-active {
    color: #f8eb9b;
    border-color: rgba(248, 235, 155, 0.56);
    background: rgba(248, 235, 155, 0.12);
    box-shadow:
        0 0 0 1px rgba(248, 235, 155, 0.08),
        0 12px 30px rgba(248, 209, 86, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.riddle-celebration-rating-button span {
    max-width: 100%;
    color: currentColor;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
}

.riddle-celebration-rating-icon {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
}

.riddle-celebration-rating-icon-flip,
.riddle-celebration-rating-icon-stack {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 34px;
}

.riddle-celebration-rating-icon-flip .riddle-celebration-rating-icon {
    transform: rotate(180deg);
}

.riddle-celebration-rating-icon-stack .riddle-celebration-rating-icon:first-child {
    transform: translateX(-5px);
}

.riddle-celebration-rating-icon-stack .riddle-celebration-rating-icon:last-child {
    position: absolute;
    transform: translateX(7px) scale(0.92);
}

.riddle-pile-poil-celebration-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.riddle-pile-poil-celebration-actions.hidden {
    display: none;
}

#riddle-pile-poil-celebration-keep-tab-open {
    flex: 0 0 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 30px !important;
    padding: 3px 8px !important;
    border: 0;
    background: transparent;
    color: rgba(245, 237, 224, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
}

.riddle-pile-poil-celebration-keep-tab-open-switch {
    position: relative;
    width: 30px;
    height: 17px;
    flex: 0 0 auto;
    border: 1px solid rgba(245, 237, 224, 0.38);
    border-radius: 999px;
    background: rgba(4, 17, 29, 0.62);
    transition: background 160ms ease, border-color 160ms ease;
}

.riddle-pile-poil-celebration-keep-tab-open-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
    transition: transform 160ms ease;
}

#riddle-pile-poil-celebration-keep-tab-open.is-active {
    color: #f3c85e;
}

#riddle-pile-poil-celebration-keep-tab-open.is-active .riddle-pile-poil-celebration-keep-tab-open-switch {
    border-color: rgba(243, 200, 94, 0.74);
    background: rgba(189, 127, 24, 0.3);
}

#riddle-pile-poil-celebration-keep-tab-open.is-active .riddle-pile-poil-celebration-keep-tab-open-switch::after {
    transform: translateX(13px);
}

.riddle-pile-poil-celebration-actions .secondary-button,
.riddle-pile-poil-celebration-actions button {
    min-height: 40px;
    padding: 9px 16px;
    justify-content: center;
    border-radius: 12px;
    font-weight: 800;
}

#riddle-pile-poil-celebration-dismiss {
    background: rgba(255, 248, 235, 0.1);
    color: rgba(245, 237, 224, 0.92);
    border: 1px solid rgba(255, 240, 214, 0.14);
}

#riddle-pile-poil-celebration-wikipedia {
    background: linear-gradient(180deg, rgba(72, 155, 95, 0.98), rgba(36, 101, 58, 1));
    color: #fcfff8;
    border: 1px solid rgba(151, 223, 131, 0.26);
    box-shadow:
        0 14px 24px rgba(19, 63, 36, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

@keyframes riddle-pile-poil-celebration-in {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.riddle-satellite-challenge-panel {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 5285;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.riddle-satellite-challenge-panel.hidden {
    display: none;
}

@property --satellite-hold-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.riddle-satellite-hold-reticle {
    --satellite-hold-size: 92px;
    --satellite-hold-duration: 900ms;
    --satellite-hold-angle: 0deg;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5550;
    width: var(--satellite-hold-size);
    height: var(--satellite-hold-size);
    pointer-events: none;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 239, 185, 0.26));
}

body.riddle-pile-poil-mode.riddle-preset-pile-poil-cursor-suppressed .riddle-satellite-hold-reticle {
    display: none !important;
}

.riddle-satellite-hold-ring,
.riddle-satellite-hold-crosshair,
.riddle-satellite-hold-core {
    position: absolute;
    inset: 0;
    display: block;
}

.riddle-satellite-hold-ring {
    inset: 9px;
    border-radius: 999px;
    border: 2px solid rgba(233, 231, 216, 0.86);
    background: conic-gradient(#f8eb9b 0deg var(--satellite-hold-angle), rgba(233, 231, 216, 0.18) var(--satellite-hold-angle) 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49%, #000 57%, transparent 58%);
    mask: radial-gradient(circle, transparent 0 48%, #000 49%, #000 57%, transparent 58%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 1px rgba(255, 250, 237, 0.42),
        0 0 12px rgba(255, 238, 180, 0.24);
}

.riddle-satellite-hold-crosshair::before,
.riddle-satellite-hold-crosshair::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: transparent;
    filter:
        drop-shadow(0 0 1px rgba(255, 250, 237, 0.82))
        drop-shadow(0 0 5px rgba(248, 235, 155, 0.34));
    transform: translate(-50%, -50%);
}

.riddle-satellite-hold-crosshair::before {
    width: 92px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0 6px,
        rgba(255, 245, 204, 0.96) 6px 23px,
        transparent 23px 69px,
        rgba(255, 245, 204, 0.96) 69px 86px,
        transparent 86px 100%
    );
}

.riddle-satellite-hold-crosshair::after {
    width: 3px;
    height: 92px;
    background: linear-gradient(
        180deg,
        transparent 0 6px,
        rgba(255, 245, 204, 0.96) 6px 23px,
        transparent 23px 69px,
        rgba(255, 245, 204, 0.96) 69px 86px,
        transparent 86px 100%
    );
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] .riddle-satellite-hold-crosshair {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 68px;
    background: var(--pile-poil-brand-blue);
    filter: none;
    transform: translate(-50%, -50%);
    -webkit-mask: url("/assets/riddle-gallery/riddle-pile-poil-crosshair.svg") center / contain no-repeat;
    mask: url("/assets/riddle-gallery/riddle-pile-poil-crosshair.svg") center / contain no-repeat;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] .riddle-satellite-hold-crosshair::before,
.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] .riddle-satellite-hold-crosshair::after {
    content: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] .riddle-satellite-hold-core {
    display: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] {
    --pile-poil-brand-blue: #0b2342;
    --satellite-hold-size: 112px;
    filter: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"]::before,
.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"]::after {
    content: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"] .riddle-satellite-hold-ring {
    inset: 4px;
    border: 0;
    background: conic-gradient(
        var(--pile-poil-brand-blue) 0deg var(--satellite-hold-angle),
        rgba(255, 255, 255, 0.82) var(--satellite-hold-angle) 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 0 39%, #000 40% 62%, transparent 63%);
    mask: radial-gradient(circle, transparent 0 39%, #000 40% 62%, transparent 63%);
    box-shadow: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"].is-hover .riddle-satellite-hold-ring {
    opacity: 0;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"].is-charging .riddle-satellite-hold-ring,
.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"].is-complete .riddle-satellite-hold-ring {
    opacity: 1;
}

.riddle-satellite-hold-core {
    inset: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fff1b9;
    box-shadow:
        0 0 0 1px rgba(255, 250, 237, 0.86),
        0 0 9px rgba(255, 236, 162, 0.58);
    transform: translate(-50%, -50%);
}

.riddle-satellite-hold-reticle::before,
.riddle-satellite-hold-reticle::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    border: 1px solid rgba(248, 222, 148, 0.14);
}

.riddle-satellite-hold-reticle::before {
    box-shadow: 0 0 26px rgba(216, 165, 68, 0.36);
}

.riddle-satellite-hold-reticle::after {
    inset: -7px;
    border-color: rgba(248, 222, 148, 0.08);
    box-shadow: 0 0 40px rgba(216, 165, 68, 0.22);
}

.riddle-satellite-hold-reticle.is-charging .riddle-satellite-hold-ring {
    animation: riddle-satellite-hold-charge var(--satellite-hold-duration) linear forwards;
}

.riddle-satellite-hold-reticle.is-charging::before,
.riddle-satellite-hold-reticle.is-charging::after {
    animation: riddle-satellite-hold-pulse 700ms ease-out infinite;
}

.riddle-satellite-hold-reticle.is-charging::after {
    animation-delay: 160ms;
}

.riddle-satellite-hold-reticle.is-complete {
    animation: riddle-satellite-hold-complete 260ms ease-out forwards;
}

.riddle-satellite-hold-reticle.is-complete .riddle-satellite-hold-ring {
    --satellite-hold-angle: 360deg;
    background: conic-gradient(#fff7c9 0deg 360deg);
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"].is-complete .riddle-satellite-hold-ring {
    background: conic-gradient(var(--pile-poil-brand-blue) 0deg 360deg);
}

.riddle-satellite-hold-touch-connector,
.riddle-satellite-hold-touch-anchor {
    display: none;
    position: absolute;
    pointer-events: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"] .riddle-satellite-hold-crosshair {
    width: 54px;
    height: 54px;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"] .riddle-satellite-hold-ring {
    transform: translate(var(--touch-hold-offset-x), var(--touch-hold-offset-y));
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"].is-charging .riddle-satellite-hold-touch-connector,
.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"].is-complete .riddle-satellite-hold-touch-connector {
    display: block;
    z-index: 1;
    left: calc(50% + var(--touch-hold-connector-start-x));
    top: calc(50% + var(--touch-hold-connector-start-y));
    width: var(--touch-hold-connector-length);
    height: 3px;
    border-radius: 999px;
    background: var(--pile-poil-brand-blue);
    transform: translateY(-50%) rotate(var(--touch-hold-connector-angle));
    transform-origin: 0 50%;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"].is-charging .riddle-satellite-hold-touch-anchor,
.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"].is-complete .riddle-satellite-hold-touch-anchor {
    display: block;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--pile-poil-brand-blue);
    transform: translate(-50%, -50%);
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"][data-touch-layout="phone"] .riddle-satellite-hold-ring {
    inset: auto;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 152px;
    height: 48px;
    overflow: hidden;
    border: 3px solid var(--pile-poil-brand-blue);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-mask: none;
    mask: none;
    transform: translate(
        calc(-50% + var(--touch-hold-offset-x)),
        calc(-50% + var(--touch-hold-offset-y))
    );
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"][data-touch-layout="phone"] .riddle-satellite-hold-ring::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: inherit;
    background: var(--pile-poil-brand-blue);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"][data-touch-layout="phone"].is-charging .riddle-satellite-hold-ring {
    animation: none;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"][data-touch-layout="phone"].is-charging .riddle-satellite-hold-ring::after {
    animation: riddle-pile-poil-touch-phone-charge var(--satellite-hold-duration) linear forwards;
}

.riddle-satellite-hold-reticle[data-hold-mode="pile-poil"][data-pointer-type="touch"][data-touch-layout="phone"].is-complete .riddle-satellite-hold-ring::after {
    transform: scaleX(1);
}

@keyframes riddle-pile-poil-touch-phone-charge {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes riddle-satellite-hold-charge {
    0% {
        --satellite-hold-angle: 0deg;
    }

    100% {
        --satellite-hold-angle: 360deg;
    }
}

@keyframes riddle-satellite-hold-pulse {
    0% {
        opacity: 0.72;
        transform: scale(0.82);
    }

    100% {
        opacity: 0;
        transform: scale(1.25);
    }
}

@keyframes riddle-satellite-hold-complete {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.32);
    }
}

.beacon-hunt-panel {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 5288;
    width: min(380px, calc(100vw - 40px));
    pointer-events: none;
}

.beacon-hunt-panel.hidden {
    display: none;
}

.beacon-hunt-panel-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px 16px 16px;
    border-radius: 16px;
    border: 1px solid rgba(68, 128, 120, 0.36);
    background:
        linear-gradient(180deg, rgba(248, 251, 247, 0.96), rgba(225, 235, 223, 0.95)),
        rgba(245, 248, 240, 0.95);
    color: #1d332f;
    box-shadow:
        0 26px 58px rgba(32, 55, 50, 0.34),
        0 8px 18px rgba(28, 44, 40, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    backdrop-filter: blur(18px);
    animation: riddle-pile-poil-celebration-in 180ms ease-out;
}

.beacon-hunt-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(37, 86, 78, 0.16);
    background: rgba(255, 255, 255, 0.72);
    color: #28443f;
    cursor: pointer;
}

.beacon-hunt-panel-section {
    display: grid;
    gap: 9px;
}

.beacon-hunt-panel-title,
.beacon-hunt-panel-target {
    font-weight: 800;
}

.beacon-hunt-panel-title {
    padding-right: 32px;
    font-size: 0.96rem;
    letter-spacing: 0;
}

.beacon-hunt-panel-target {
    font-size: 1.05rem;
}

.beacon-hunt-panel-body,
.beacon-hunt-panel-status,
.beacon-hunt-panel-feedback,
.beacon-hunt-panel-error {
    font-size: 0.86rem;
    line-height: 1.35;
}

.beacon-hunt-panel-error,
.beacon-hunt-panel-feedback {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(37, 86, 78, 0.14);
}

.beacon-hunt-panel-error {
    color: #80352d;
}

.beacon-hunt-panel-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(37, 86, 78, 0.16);
}

.beacon-hunt-panel-facts,
.beacon-hunt-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.beacon-hunt-fact {
    min-width: 0;
    min-height: 56px;
    padding: 9px 11px;
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(255, 248, 235, 0.96), rgba(241, 222, 184, 0.92)),
        rgba(255, 248, 235, 0.94);
    border: 1px solid rgba(142, 101, 58, 0.2);
    box-shadow:
        0 8px 16px rgba(78, 53, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.beacon-hunt-fact-label,
.beacon-hunt-fact-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.beacon-hunt-fact-label {
    color: rgba(92, 68, 39, 0.78);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.beacon-hunt-fact-value {
    margin-top: 4px;
    color: rgba(58, 39, 22, 0.96);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.15;
}

.riddle-satellite-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(185, 169, 120, 0.42);
    background:
        linear-gradient(180deg, rgba(255, 249, 231, 0.96), rgba(238, 224, 181, 0.95)),
        rgba(247, 235, 202, 0.95);
    color: #30291d;
    box-shadow:
        0 28px 62px rgba(69, 57, 32, 0.42),
        0 8px 18px rgba(42, 33, 18, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    pointer-events: auto;
    backdrop-filter: blur(18px);
    animation: riddle-pile-poil-celebration-in 180ms ease-out;
}

.riddle-satellite-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(154, 135, 76, 0.18);
    background: rgba(255, 250, 235, 0.54);
    color: rgba(47, 42, 32, 0.66);
    box-shadow: none;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
}

.riddle-satellite-close:hover,
.riddle-satellite-close:focus-visible {
    background: rgba(255, 250, 235, 0.84);
    color: #2f2a20;
    transform: none;
}

.riddle-satellite-card[data-satellite-result-tone="success"] {
    border-color: rgba(49, 129, 76, 0.34);
}

.riddle-satellite-card[data-satellite-result-tone="error"] {
    border-color: rgba(151, 91, 42, 0.36);
}

.riddle-satellite-title {
    padding-right: 28px;
    color: #2f2a20;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.riddle-satellite-hint,
.riddle-satellite-status {
    color: rgba(47, 42, 32, 0.78);
    font-size: 0.92rem;
    line-height: 1.42;
}

.riddle-satellite-card[data-satellite-result-tone="success"] .riddle-satellite-status {
    color: #23633f;
    font-weight: 800;
}

.riddle-satellite-card[data-satellite-result-tone="error"] .riddle-satellite-status {
    color: #7b3f23;
    font-weight: 700;
}

.riddle-satellite-preview {
    position: relative;
    width: min(100%, 228px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(161, 144, 93, 0.34);
    background: rgba(225, 211, 170, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.riddle-satellite-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.riddle-satellite-preview::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 246, 207, 0.98);
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(15, 25, 30, 0.8),
        0 0 14px rgba(255, 246, 207, 0.34);
    transform: translate(-50%, -50%);
}

.riddle-satellite-preview-box {
    position: absolute;
    border: 2px solid #f8eb9b;
    box-shadow:
        0 0 0 1px rgba(18, 24, 28, 0.8),
        0 0 14px rgba(248, 235, 155, 0.3);
    pointer-events: none;
}

.riddle-satellite-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.riddle-satellite-confidence,
.riddle-satellite-detected {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 250, 235, 0.68);
    border: 1px solid rgba(154, 135, 76, 0.22);
    color: #3c3425;
    font-size: 0.76rem;
    font-weight: 800;
}
.pursuit-hud {
    position: absolute;
    z-index: 850;
    top: 18px;
    left: 50%;
    width: min(620px, calc(100% - 32px));
    max-height: calc(100% - 36px);
    padding: 14px 16px;
    transform: translateX(-50%);
    border: 1px solid rgb(255 190 69 / 55%);
    border-radius: 16px;
    background: rgb(9 18 31 / 92%);
    box-shadow: 0 16px 40px rgb(0 0 0 / 35%);
    color: #fff;
    backdrop-filter: blur(12px);
    overflow-y: auto;
}

.pursuit-hud-drag-handle {
    width: 28px;
    height: 28px;
    margin: -3px -3px 5px auto;
    border-color: rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 6%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.pursuit-hud-drag-handle::before {
    background:
        linear-gradient(rgb(239 198 111 / 62%), rgb(239 198 111 / 62%)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgb(239 198 111 / 62%), rgb(239 198 111 / 62%)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgb(239 198 111 / 62%), rgb(239 198 111 / 62%)) center 10px / 12px 1.5px no-repeat;
}

.pursuit-hud-drag-handle:hover {
    border-color: rgb(255 190 69 / 42%);
    background: rgb(255 190 69 / 12%);
}

.pursuit-hud.is-dragging .pursuit-hud-drag-handle {
    cursor: grabbing;
}

.pursuit-hud-kicker {
    color: #ffca63;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pursuit-hud-title,
.pursuit-hud-status {
    display: block;
    margin-top: 4px;
}

.pursuit-hud-status {
    color: rgb(255 255 255 / 72%);
    font-size: 0.86rem;
}

.pursuit-target-identification {
    margin-top: 7px;
    color: #ffda91;
    font-size: 0.75rem;
}

.pursuit-hud-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.pursuit-hud-actions button {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.pursuit-capture-button {
    flex: 1;
    background: #ffb629;
    color: #171007;
}

.pursuit-stop-button {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.pursuit-tools {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.pursuit-tools-title {
    color: #ffca63;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pursuit-fleet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 7px;
}

.pursuit-unit-button {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-left: 3px solid var(--pursuit-vehicle-color, rgb(255 255 255 / 30%));
    border-radius: 9px;
    background: rgb(255 255 255 / 6%);
    color: rgb(255 255 255 / 75%);
    font: inherit;
    font-size: 0.73rem;
    text-align: left;
    cursor: pointer;
}

.pursuit-unit-button strong {
    color: #fff;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.pursuit-unit-button.is-selected {
    border-color: #ffbf47;
    border-left-color: var(--pursuit-vehicle-color, #ffbf47);
    background: rgb(255 182 41 / 22%);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pursuit-vehicle-color, #ffbf47) 65%, transparent);
}

.pursuit-unit-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.pursuit-order-button {
    display: grid;
    gap: 3px;
    min-height: 48px;
    padding: 7px 10px;
    border: 1px solid rgb(255 190 69 / 45%);
    border-radius: 10px;
    background: rgb(255 182 41 / 13%);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pursuit-order-button span {
    color: rgb(255 255 255 / 62%);
    font-size: 0.68rem;
}

.pursuit-order-button:not(:disabled):hover {
    background: rgb(255 182 41 / 24%);
}

.pursuit-order-button:disabled {
    border-color: rgb(255 255 255 / 10%);
    background: rgb(255 255 255 / 4%);
    color: rgb(255 255 255 / 48%);
    cursor: not-allowed;
}

.pursuit-vehicle-order-menu-host {
    z-index: 860;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pursuit-vehicle-order-menu {
    position: absolute;
    z-index: 860;
    display: grid;
    width: min(220px, calc(100vw - 16px));
    gap: 7px;
    padding: 9px;
    border: 1px solid rgb(255 190 69 / 58%);
    border-radius: 12px;
    background: rgb(10 24 38 / 96%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 38%);
    color: #fff;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.pursuit-vehicle-order-menu.hidden {
    display: none;
}

.pursuit-vehicle-order-title {
    color: #ffca63;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pursuit-vehicle-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.pursuit-vehicle-order-close {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    background: rgb(255 255 255 / 7%);
    color: rgb(255 255 255 / 78%);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.pursuit-vehicle-order-close:is(:hover, :focus-visible) {
    border-color: rgb(255 190 69 / 58%);
    background: rgb(255 190 69 / 15%);
    color: #ffd77f;
}

.pursuit-driving-mode-title {
    color: rgb(255 255 255 / 66%);
    font-size: 0.66rem;
}

.pursuit-driving-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.pursuit-driving-mode-button {
    min-width: 0;
    padding: 6px 4px;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 8px;
    background: rgb(255 255 255 / 6%);
    color: rgb(255 255 255 / 72%);
    font: inherit;
    font-size: 0.65rem;
    cursor: pointer;
}

.pursuit-driving-mode-button.is-selected {
    border-color: rgb(255 190 69 / 72%);
    background: rgb(255 182 41 / 22%);
    color: #ffd77f;
    box-shadow: 0 0 12px rgb(255 182 41 / 12%);
}

.pursuit-driving-mode-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.pursuit-driving-mode-button.is-selected:disabled {
    opacity: 1;
}

.pursuit-vehicle-order-list {
    display: grid;
    gap: 6px;
}

.pursuit-vehicle-order-menu .pursuit-order-button {
    min-height: 44px;
}

.pursuit-vehicle-order-menu button[data-tooltip],
.pursuit-hud button[data-tooltip] {
    position: relative;
}

.pursuit-vehicle-order-menu button[data-tooltip]::after,
.pursuit-hud button[data-tooltip]::after {
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: calc(100% + 6px);
    width: max-content;
    max-width: min(240px, calc(100vw - 32px));
    padding: 6px 8px;
    border: 1px solid rgb(255 190 69 / 45%);
    border-radius: 7px;
    background: rgb(7 18 29 / 98%);
    box-shadow: 0 8px 20px rgb(0 0 0 / 35%);
    color: rgb(255 255 255 / 92%);
    content: attr(data-tooltip);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateY(3px);
    transition: opacity 120ms ease, transform 120ms ease;
    white-space: normal;
}

.pursuit-vehicle-order-menu button[data-tooltip]:is(:hover, :focus-visible)::after,
.pursuit-hud button[data-tooltip]:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translateY(0);
}

.pursuit-hud.is-error {
    border-color: rgb(239 63 79 / 65%);
}

.pursuit-hud.is-error .pursuit-hud-kicker {
    color: #ff8f9a;
}


/* Riddle gallery shell, navigation and panel controls. */
#map {
    transition:
        filter 220ms ease,
        transform 220ms ease,
        opacity 220ms ease;
    will-change: filter, transform;
}

body.riddle-gallery-open #map,
body.riddle-gallery-open .map-footer-credits,
body.riddle-gallery-open .map-scale-feedback {
    filter: blur(8px) saturate(0.9) brightness(0.82);
}

body.riddle-gallery-open #map {
    transform: scale(1.015);
    pointer-events: none;
}

body.riddle-gallery-open #map .maplibregl-control-container,
body.riddle-gallery-open #map .maplibregl-control-container * {
    pointer-events: none;
}

body.riddle-gallery-open .maplibre-dom-desk-tool-surface,
body.riddle-gallery-open .immersive-air-css-overlay,
body.riddle-gallery-open .immersive-air-canvas,
body.riddle-gallery-open #map-engine-indicator {
    filter: blur(8px) saturate(0.9) brightness(0.82);
}

.riddle-gallery-interaction-scrim {
    position: fixed;
    inset: 0;
    z-index: 58;
    display: block;
    opacity: 1;
    pointer-events: auto;
    cursor: default;
    touch-action: none;
    overscroll-behavior: contain;
    background: rgba(8, 6, 4, 0.22);
    transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.riddle-gallery-interaction-scrim.hidden {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition-duration: 320ms;
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.riddle-gallery-interaction-scrim::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-radius: 50%;
    border: 2px solid rgba(245, 222, 167, 0.2);
    border-top-color: rgba(248, 207, 111, 0.92);
    opacity: 0;
    scale: 0.82;
    transition:
        opacity 160ms ease,
        scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.riddle-gallery-interaction-scrim.is-preparing::after {
    opacity: 1;
    scale: 1;
    animation: riddle-gallery-preparing-spin 760ms linear infinite;
}

@keyframes riddle-gallery-preparing-spin {
    to {
        rotate: 1turn;
    }
}

.riddle-gallery-panel {
    opacity: 1;
    transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.riddle-gallery-panel.hidden {
    transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1) 70ms;
}

.riddle-gallery-panel[data-riddle-gallery-phase="preparing"] {
    opacity: 0 !important;
    pointer-events: none !important;
}

.riddle-gallery-content {
    translate: 0 0;
    scale: 1;
    transform-origin: center;
    transition:
        translate 430ms cubic-bezier(0.22, 1, 0.36, 1),
        scale 430ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: translate, scale;
}

.riddle-gallery-panel.hidden .riddle-gallery-content {
    translate: 0 24px;
    scale: 0.975;
    transition:
        translate 360ms cubic-bezier(0.4, 0, 1, 1),
        scale 360ms cubic-bezier(0.4, 0, 1, 1);
}

body.riddle-gallery-open .riddle-gallery-panel {
    z-index: 59;
}

#riddle-gallery-panel.riddle-gallery-panel.is-fullscreen {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    transform: none !important;
}

#riddle-gallery-panel.riddle-gallery-panel.is-fullscreen .panel-drag-handle {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .riddle-gallery-panel,
    .riddle-gallery-panel.hidden,
    .riddle-gallery-panel[data-riddle-gallery-phase="preparing"] {
        transition: opacity 100ms linear;
    }

    .riddle-gallery-content,
    .riddle-gallery-panel.hidden .riddle-gallery-content {
        translate: 0 0;
        scale: 1;
        transition: none;
    }

    .riddle-gallery-interaction-scrim,
    .riddle-gallery-interaction-scrim.hidden {
        transition: opacity 100ms linear;
    }

    .riddle-gallery-interaction-scrim.is-preparing::after {
        animation: none;
    }
}

@media (max-width: 860px), (pointer: coarse) {
    #map {
        will-change: auto;
    }

    body.riddle-gallery-open #map,
    body.riddle-gallery-open .map-footer-credits,
    body.riddle-gallery-open .map-scale-feedback {
        filter: saturate(0.9) brightness(0.82);
    }

    body.riddle-gallery-open #map {
        transform: none;
    }

    body.riddle-gallery-open .maplibre-dom-desk-tool-surface,
    body.riddle-gallery-open .immersive-air-css-overlay,
    body.riddle-gallery-open .immersive-air-canvas,
    body.riddle-gallery-open #map-engine-indicator {
        filter: saturate(0.9) brightness(0.82);
    }
}

body.riddle-gallery-open [data-panel-id="inspector"],
body.riddle-gallery-open [data-panel-id="top-bar"],
body.riddle-gallery-open [data-panel-id="active-riddle-bar"],
body.riddle-gallery-open #preset-player-modal,
body.riddle-gallery-open #map .maplibregl-control-container,
body.riddle-gallery-open .map-layer-control,
body.riddle-gallery-open .map-search-bar,
body.riddle-gallery-open .map-view-switches {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
}

.riddle-gallery-panel .panel-header-row {
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 28px;
}

.riddle-gallery-title-block {
    display: grid;
    gap: 4px;
}

.panel-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.panel-close-button {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    border-radius: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 250, 237, 0.78);
    border: 1px solid rgba(88, 69, 37, 0.12);
    color: rgba(88, 69, 37, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.panel-close-button svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}

.panel-close-button:hover,
.panel-close-button:focus-visible {
    background: rgba(255, 250, 237, 0.92);
    color: rgba(67, 49, 22, 0.94);
    transform: none;
}

body[data-theme="dark"] .panel-close-button {
    background: rgba(255, 250, 237, 0.08);
    border-color: rgba(237, 228, 210, 0.16);
    color: rgba(237, 228, 210, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .panel-close-button:hover,
body[data-theme="dark"] .panel-close-button:focus-visible {
    background: rgba(255, 250, 237, 0.14);
    color: rgba(255, 248, 235, 0.96);
}

.riddle-gallery-panel .panel-title {
    display: none;
}

.riddle-gallery-panel .panel-subtitle {
    display: none;
}

.riddle-gallery-panel .panel-drag-handle {
    background: rgba(255, 245, 231, 0.08);
    border-color: rgba(233, 198, 146, 0.14);
}

.riddle-gallery-close-button {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    border-radius: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 245, 231, 0.08);
    border: 1px solid rgba(233, 198, 146, 0.14);
    color: rgba(255, 245, 231, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.riddle-gallery-window-button {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 245, 231, 0.08);
    border: 1px solid rgba(233, 198, 146, 0.14);
    color: rgba(255, 245, 231, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.riddle-gallery-close-button svg,
.riddle-gallery-window-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.riddle-gallery-close-button:hover,
.riddle-gallery-close-button:focus-visible,
.riddle-gallery-window-button:hover,
.riddle-gallery-window-button:focus-visible {
    background: rgba(255, 245, 231, 0.14);
    color: #fff7ea;
    transform: none;
}

/* The gallery transfers focus here when it opens. Preserve that keyboard cue
   in the gallery palette instead of the generic blue focus outline. */
.riddle-gallery-close-button:focus-visible {
    outline: 2px solid var(--riddle-gold);
    outline-offset: 3px;
}

.riddle-gallery-window-button:focus-visible {
    outline: 2px solid var(--riddle-gold);
    outline-offset: 3px;
}

.riddle-gallery-window-button .riddle-gallery-window-icon-collapse,
.riddle-gallery-window-button[aria-pressed="true"] .riddle-gallery-window-icon-expand {
    display: none;
}

.riddle-gallery-window-button[aria-pressed="true"] .riddle-gallery-window-icon-collapse {
    display: block;
}

.riddle-gallery-panel .panel-drag-handle::before {
    background:
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 10px / 12px 1.5px no-repeat;
}

.riddle-gallery-content {
    margin-top: 16px;
    min-height: 0;
    height: calc(100% - 72px);
}

.riddle-gallery-catalog-shell {
    display: grid;
    grid-template-columns: minmax(236px, 260px) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.riddle-gallery-catalog-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
}

.riddle-gallery-catalog-main:has(> .riddle-investigation-editor) { grid-template-rows: minmax(0, 1fr); }
.riddle-gallery-catalog-main:has(> .riddle-investigation-editor) > .riddle-gallery-toolbar { display: none; }

.riddle-gallery-nav {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(195, 145, 84, 0.22);
    background:
        linear-gradient(180deg, rgba(61, 40, 27, 0.94), rgba(29, 21, 16, 0.98)),
        rgba(19, 16, 15, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 230, 184, 0.06),
        0 14px 30px rgba(6, 5, 4, 0.16);
    overflow-x: hidden;
    overflow-y: auto;
}

.riddle-gallery-nav-list {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.riddle-gallery-nav-toggle {
    display: none;
}

.riddle-gallery-nav-group {
    min-width: 0;
    padding: 10px 8px 8px;
    border: 1px solid rgba(220, 232, 244, 0.16);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 8px 18px rgba(2, 8, 15, 0.12);
}

.riddle-gallery-nav-group-title {
    margin: 0 8px 8px;
    color: rgba(226, 235, 245, 0.66);
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.riddle-gallery-nav-group-items {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.riddle-gallery-nav-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 9px 12px 9px 10px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    background: rgba(255, 248, 235, 0.02);
    border: 1px solid rgba(196, 151, 90, 0.12);
    color: rgba(244, 226, 191, 0.92);
    box-shadow: none;
    text-align: left;
    scroll-snap-align: start;
}

.riddle-gallery-nav-button:hover,
.riddle-gallery-nav-button:focus-visible {
    background: rgba(255, 236, 200, 0.08);
    border-color: rgba(212, 166, 102, 0.24);
    color: #fff1cf;
    transform: none;
}

.riddle-gallery-nav-button.is-selected {
    background: linear-gradient(180deg, rgba(106, 71, 42, 0.94), rgba(62, 42, 29, 0.98));
    border-color: rgba(231, 200, 116, 0.34);
    color: #fff0bc;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 239, 208, 0.12);
}

.riddle-gallery-nav-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.riddle-gallery-nav-icon-shell {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-grid;
    place-items: center;
    color: rgba(255, 231, 184, 0.86);
}

.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="home"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="virtual"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="satellite"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="beacon-hunt"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="community-plans"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="location-requests"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="physical"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="photo"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="achievements"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="immersive-skins"],
.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="my-challenges"] {
    margin: -4px 0;
}

.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="favorites"] {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: #ffd98a;
}

.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="in-progress"] {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: #58d7ff;
}

.riddle-gallery-nav-icon-shell[data-riddle-nav-icon="completed"] {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    color: var(--riddle-illustration-green);
}

.riddle-gallery-nav-icon {
    width: 100%;
    height: 100%;
}

.riddle-gallery-nav-icon-image {
    display: block;
    object-fit: contain;
    transform: scale(1.2);
}

.riddle-gallery-nav-label-text {
    min-width: 0;
}

.riddle-gallery-nav-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.riddle-gallery-nav-count,
.riddle-gallery-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.riddle-gallery-nav-count {
    background: rgba(255, 234, 203, 0.08);
    border: 1px solid rgba(208, 164, 101, 0.18);
    color: rgba(255, 237, 205, 0.84);
}

.riddle-gallery-nav-badge {
    background: rgba(248, 235, 155, 0.14);
    border: 1px solid rgba(248, 235, 155, 0.24);
    color: #fff0b3;
    text-transform: uppercase;
}

.riddle-gallery-toolbar {
    display: grid;
    gap: 16px;
    padding: 14px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.riddle-gallery-toolbar-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.riddle-gallery-toolbar-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.riddle-gallery-toolbar-title {
    color: var(--riddle-gold);
    font-size: 1.84rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.riddle-gallery-toolbar-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: rgba(239, 220, 188, 0.88);
    font-size: 1rem;
    line-height: 1.45;
    max-width: 52ch;
}

.riddle-gallery-toolbar-objective-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.riddle-gallery-toolbar-objective-text {
    min-width: 0;
}

.riddle-gallery-toolbar-filters {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid rgba(229, 197, 122, 0.22);
    border-radius: 12px;
    background: rgba(18, 16, 14, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 248, 235, 0.05);
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.riddle-gallery-toolbar-filters::-webkit-scrollbar {
    display: none;
}

.riddle-gallery-author-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    max-width: min(320px, 70vw);
    flex: 0 0 auto;
    padding: 7px 10px 7px 12px;
    border: 1px solid rgba(229, 197, 122, 0.38);
    border-radius: 999px;
    background: rgba(201, 146, 45, 0.16);
    color: #f7e6c1;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.riddle-gallery-author-filter > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riddle-gallery-author-filter-close {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-size: 1rem;
    line-height: 1;
}

.riddle-gallery-author-filter:hover,
.riddle-gallery-author-filter:focus-visible {
    border-color: rgba(244, 205, 113, 0.68);
    background: rgba(201, 146, 45, 0.26);
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 197, 122, 0.12);
}

.riddle-gallery-toolbar-field {
    display: block;
    min-width: 152px;
}

.riddle-gallery-toolbar-select {
    position: relative;
    min-height: 38px;
    padding: 8px 36px 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(229, 197, 122, 0.22);
    background:
        linear-gradient(180deg, rgba(35, 29, 24, 0.94), rgba(19, 16, 14, 0.94)),
        rgba(18, 16, 14, 0.82);
    color: #f7e6c1;
    font: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, 0.05),
        0 10px 18px rgba(0, 0, 0, 0.16);
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #ebcd85 50%),
        linear-gradient(135deg, #ebcd85 50%, transparent 50%),
        linear-gradient(180deg, rgba(35, 29, 24, 0.94), rgba(19, 16, 14, 0.94));
    background-position:
        calc(100% - 19px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px),
        center center;
    background-size:
        8px 8px,
        8px 8px,
        100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    touch-action: manipulation;
}

.riddle-gallery-toolbar-select:disabled {
    opacity: 0.58;
    cursor: default;
}

.riddle-gallery-toolbar-select:focus-visible {
    border-color: rgba(248, 235, 155, 0.4);
    box-shadow:
        0 0 0 2px rgba(248, 235, 155, 0.14),
        inset 0 1px 0 rgba(255, 248, 235, 0.06);
}

.riddle-gallery-missing-filter {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(229, 197, 122, 0.18);
    background:
        linear-gradient(180deg, rgba(35, 29, 24, 0.82), rgba(19, 16, 14, 0.82)),
        rgba(18, 16, 14, 0.68);
    color: #f7e6c1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}

.riddle-gallery-missing-filter input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #2f8b4f;
}

.riddle-gallery-view-toggle {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}

.riddle-gallery-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(35, 29, 24, 0.94), rgba(19, 16, 14, 0.94)),
        rgba(18, 16, 14, 0.82);
    border: 1px solid rgba(229, 197, 122, 0.18);
    color: rgba(241, 220, 182, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, 0.05),
        0 10px 18px rgba(0, 0, 0, 0.16);
}

.riddle-gallery-view-button:hover,
.riddle-gallery-view-button:focus-visible {
    color: #fff8ea;
    background:
        linear-gradient(180deg, rgba(49, 40, 32, 0.96), rgba(24, 20, 18, 0.96)),
        rgba(255, 248, 235, 0.06);
    transform: none;
}

.riddle-gallery-view-button.is-selected {
    background: linear-gradient(180deg, rgba(101, 71, 45, 0.96), rgba(60, 44, 35, 0.98));
    border-color: rgba(231, 200, 116, 0.28);
    color: #fff0bc;
}

.riddle-gallery-view-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.panel-resize-handle {
    position: absolute;
    z-index: 3;
    touch-action: none;
}

.panel-resize-handle.north,
.panel-resize-handle.south {
    left: 12px;
    right: 12px;
    height: 12px;
}

.panel-resize-handle.north {
    top: -6px;
    cursor: ns-resize;
}

.panel-resize-handle.south {
    bottom: -6px;
    cursor: ns-resize;
}

.panel-resize-handle.east,
.panel-resize-handle.west {
    top: 12px;
    bottom: 12px;
    width: 12px;
}

.panel-resize-handle.east {
    right: -6px;
    cursor: ew-resize;
}

.panel-resize-handle.west {
    left: -6px;
    cursor: ew-resize;
}

.panel-resize-handle.north-east,
.panel-resize-handle.south-east,
.panel-resize-handle.south-west,
.panel-resize-handle.north-west {
    width: 18px;
    height: 18px;
}

.panel-resize-handle.north-east {
    top: -6px;
    right: -6px;
    cursor: nesw-resize;
}

.panel-resize-handle.south-east {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

.panel-resize-handle.south-west {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

.panel-resize-handle.north-west {
    top: -6px;
    left: -6px;
    cursor: nwse-resize;
}


/* Riddle gallery shelves, cards, state badges and carousel progress. */
.riddle-gallery-grid {
    --riddle-gallery-viewport-border: rgba(159, 113, 62, 0.58);
    --riddle-gallery-viewport-surface: rgba(255, 253, 248, 0.78);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.riddle-gallery-sections {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    border: 1px solid var(--riddle-gallery-viewport-border);
    border-radius: 15px;
    background: var(--riddle-gallery-viewport-surface);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(111, 73, 18, 0.12);
    display: grid;
    gap: 16px;
    padding-right: 6px;
}

.riddle-gallery-sections::-webkit-scrollbar {
    display: none;
}

.riddle-gallery-detail-slot {
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.riddle-gallery-section,
.riddle-detail-card {
    border-radius: 18px;
    border: 1px solid rgba(159, 113, 62, 0.28);
    background:
        linear-gradient(180deg, rgba(243, 226, 190, 0.97), rgba(224, 198, 149, 0.97)),
        rgba(232, 210, 167, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 228, 0.78),
        0 18px 30px rgba(17, 10, 6, 0.12);
    backdrop-filter: none;
}

.riddle-gallery-section {
    position: relative;
    z-index: 0;
    min-width: 0;
    padding: 18px 20px;
    display: grid;
    gap: 14px;
}

.riddle-gallery-section:has(.maphora-gallery-card:hover),
.riddle-gallery-section:has(.maphora-gallery-card:focus-visible) {
    z-index: 12;
}

.riddle-gallery-carousel-shell {
    position: relative;
    min-width: 0;
    width: 100%;
    overflow: visible;
}

.riddle-gallery-carousel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
    gap: 16px;
    overflow: visible;
    padding: 8px 34px 62px;
}

.riddle-gallery-carousel.has-new-row {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 18px;
}

.riddle-gallery-carousel-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    min-width: 100%;
    width: 100%;
}

.riddle-gallery-carousel-row.is-new {
    position: relative;
    padding-bottom: 22px;
}

@media (min-width: 1850px) {
    #riddle-gallery-panel.is-fullscreen .riddle-gallery-carousel:not(.has-new-row),
    #riddle-gallery-panel.is-fullscreen .riddle-gallery-carousel-row {
        grid-template-columns: repeat(4, minmax(0, 280px));
        justify-content: center;
    }
}

@media (min-width: 2300px) {
    #riddle-gallery-panel.is-fullscreen .riddle-gallery-carousel:not(.has-new-row),
    #riddle-gallery-panel.is-fullscreen .riddle-gallery-carousel-row {
        grid-template-columns: repeat(5, minmax(0, 280px));
    }
}

.riddle-gallery-carousel-row.is-new::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 4px;
    left: 18px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(126, 78, 31, 0.52), rgba(211, 159, 77, 0.78), rgba(126, 78, 31, 0.52), transparent);
    box-shadow:
        0 1px 0 rgba(255, 248, 226, 0.58),
        0 0 10px rgba(126, 78, 31, 0.16);
}

.riddle-card {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(142, 101, 58, 0.32);
    background: rgba(36, 26, 19, 0.18);
    box-shadow: none;
    transform: none;
}

.maphora-gallery-card {
    --maphora-glow-x: 64%;
    --maphora-glow-y: 28%;
    --maphora-glow-x-alt: 28%;
    --maphora-glow-y-alt: 72%;
    isolation: isolate;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    box-shadow:
        0 14px 26px rgba(28, 18, 11, 0.14),
        inset 0 1px 0 rgba(255, 247, 226, 0.12),
        inset 0 -18px 32px rgba(10, 7, 5, 0.18);
    transition:
        box-shadow 220ms ease,
        filter 220ms ease;
}

.maphora-gallery-card-glow {
    position: absolute;
    inset: -28%;
    z-index: 1;
    display: block;
    border-radius: inherit;
    opacity: 0.18;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(26px) saturate(1.16);
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 240ms ease,
        filter 240ms ease;
}

.maphora-gallery-card-glow-primary {
    background:
        radial-gradient(
            circle at var(--maphora-glow-x) var(--maphora-glow-y),
            rgba(72, 214, 255, 0.52) 0%,
            rgba(72, 214, 255, 0.26) 18%,
            rgba(72, 214, 255, 0) 48%
        );
    animation: maphora-card-glow-drift-primary 8s ease-in-out infinite alternate;
}

.maphora-gallery-card-glow-secondary {
    background:
        radial-gradient(
            circle at var(--maphora-glow-x-alt) var(--maphora-glow-y-alt),
            rgba(238, 174, 79, 0.34) 0%,
            rgba(167, 73, 188, 0.22) 24%,
            rgba(167, 73, 188, 0) 52%
        );
    opacity: 0.14;
    animation: maphora-card-glow-drift-secondary 9.5s ease-in-out infinite alternate;
}

.riddle-card:hover,
.riddle-card:focus-visible {
    background: rgba(36, 26, 19, 0.18);
    transform: none;
    box-shadow: 0 16px 30px rgba(28, 18, 11, 0.2);
}

.maphora-gallery-card:hover,
.maphora-gallery-card:focus-visible {
    z-index: 10;
    filter: brightness(1.03);
    box-shadow:
        0 24px 42px rgba(20, 12, 7, 0.28),
        0 8px 20px rgba(147, 105, 51, 0.13),
        inset 0 1px 0 rgba(255, 249, 229, 0.18),
        inset 0 -18px 34px rgba(9, 6, 4, 0.2);
}

.maphora-gallery-card:hover .maphora-gallery-card-glow-primary,
.maphora-gallery-card:focus-visible .maphora-gallery-card-glow-primary {
    opacity: 0.4;
    filter: blur(24px) saturate(1.28);
}

.maphora-gallery-card:hover .maphora-gallery-card-glow-secondary,
.maphora-gallery-card:focus-visible .maphora-gallery-card-glow-secondary {
    opacity: 0.28;
    filter: blur(28px) saturate(1.22);
}

.maphora-gallery-card .js-tilt-glare {
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
}

.maphora-gallery-card .js-tilt-glare-inner {
    background-image: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 246, 215, 0.12) 38%,
        rgba(255, 255, 255, 0.7) 100%
    ) !important;
}

@keyframes maphora-card-glow-drift-primary {
    0% {
        transform: translate3d(-4%, 3%, 0) scale(0.98);
    }

    100% {
        transform: translate3d(4%, -3%, 0) scale(1.04);
    }
}

@keyframes maphora-card-glow-drift-secondary {
    0% {
        transform: translate3d(5%, -4%, 0) scale(1.04);
    }

    100% {
        transform: translate3d(-5%, 4%, 0) scale(0.98);
    }
}

.riddle-card-random {
    border-color: rgba(231, 200, 116, 0.76);
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 219, 103, 0.24), transparent 58%),
        linear-gradient(180deg, rgba(54, 35, 17, 0.96), rgba(23, 16, 12, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 235, 152, 0.14),
        0 18px 34px rgba(58, 36, 14, 0.24);
}

.riddle-card-random:hover,
.riddle-card-random:focus-visible {
    border-color: rgba(231, 200, 116, 0.76);
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 219, 103, 0.24), transparent 58%),
        linear-gradient(180deg, rgba(54, 35, 17, 0.96), rgba(23, 16, 12, 0.98));
}

.riddle-card-random .riddle-card-image {
    filter: saturate(1.08) contrast(1.02);
}

.riddle-card-random-sheen {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 231, 126, 0.28), transparent 46%),
        linear-gradient(180deg, rgba(255, 244, 194, 0.06), rgba(0, 0, 0, 0.22));
    pointer-events: none;
}

.riddle-card-random-overlay {
    justify-items: center;
    padding: 18px 14px;
    text-align: center;
}

.riddle-card-random-overlay .riddle-card-title {
    color: #fff2a9;
    font-size: 1.18rem;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
}

.riddle-card-random-overlay .riddle-card-author {
    max-width: 16ch;
    color: rgba(255, 248, 226, 0.92);
    font-size: 0.92rem;
    line-height: 1.25;
    text-align: center;
}

.riddle-card-collection {
    border-color: rgba(83, 144, 132, 0.42);
    background:
        linear-gradient(180deg, rgba(18, 43, 45, 0.18), rgba(39, 25, 18, 0.2)),
        rgba(36, 26, 19, 0.18);
}

.riddle-card-collection::before,
.riddle-card-collection::after,
.riddle-card-collection-stack {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 14px;
    border: 1px solid rgba(238, 220, 181, 0.18);
    pointer-events: none;
}

.riddle-card-collection::before {
    z-index: 2;
    transform: translate(-7px, -7px);
    opacity: 0.46;
}

.riddle-card-collection::after {
    z-index: 2;
    transform: translate(-3px, -3px);
    opacity: 0.62;
}

.riddle-card-collection-stack {
    z-index: 2;
    inset: 0;
    border: 0;
    background:
        linear-gradient(180deg, rgba(9, 17, 18, 0.08), rgba(9, 17, 18, 0.24));
}

.riddle-card-collection-badge {
    background:
        linear-gradient(180deg, rgba(219, 247, 234, 0.92), rgba(162, 216, 205, 0.88)),
        rgba(205, 237, 229, 0.9);
    color: rgba(24, 72, 68, 0.96);
}

.riddle-card-collection-logo {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 244, 216, 0.5);
    box-shadow: 0 10px 20px rgba(8, 6, 4, 0.24);
}

.riddle-card-collection-count {
    justify-self: start;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(219, 247, 234, 0.14);
    border: 1px solid rgba(219, 247, 234, 0.24);
    color: #dffaf2;
    font-size: 0.72rem;
    font-weight: 800;
}

.riddle-card-collection-overlay .riddle-card-author {
    display: -webkit-box;
    max-height: 3.8em;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.28;
}

.riddle-card.selected:not(.is-completed):not(.is-active),
.beacon-gallery-card.selected:not(.is-completed) {
    --riddle-card-state-border: rgba(231, 200, 116, 0.98);
    --riddle-card-state-ring: rgba(255, 220, 112, 0.98);
    --riddle-card-state-shadow: rgba(94, 58, 24, 0.78);
    --riddle-card-state-inner-border: rgba(255, 238, 163, 0.94);
    --riddle-card-state-inner-highlight: rgba(127, 81, 31, 0.55);
    --riddle-card-state-inner-fill: rgba(255, 214, 103, 0.2);
    --riddle-card-state-premium-border: rgba(212, 160, 23, 0.88);
    --riddle-card-state-premium-ring: rgba(212, 160, 23, 0.82);
    --riddle-card-state-premium-shadow: rgba(126, 78, 31, 0.24);
    --riddle-card-state-premium-inner-border: rgba(244, 215, 125, 0.78);
    --riddle-card-state-premium-inner-highlight: rgba(255, 247, 205, 0.32);
    --riddle-card-state-premium-inner-fill: rgba(212, 160, 23, 0.12);
}

.riddle-card.selected,
.beacon-gallery-card.selected {
    border-color: var(--riddle-card-state-border);
    box-shadow:
        0 0 0 3px var(--riddle-card-state-ring),
        0 0 0 6px var(--riddle-card-state-shadow),
        0 20px 34px var(--riddle-card-state-shadow);
}

.riddle-card.selected::after,
.beacon-gallery-card.selected::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 12px;
    border: 1px solid var(--riddle-card-state-inner-border);
    box-shadow:
        inset 0 0 0 1px var(--riddle-card-state-inner-highlight),
        inset 0 0 18px var(--riddle-card-state-inner-fill);
    pointer-events: none;
    z-index: 3;
}

.maphora-gallery-card.selected::after {
    z-index: 6;
}

.beacon-gallery-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.beacon-gallery-carousel {
    align-items: stretch;
}

.beacon-gallery-card {
    position: relative;
    display: block;
    width: var(--riddle-card-width);
    min-height: 340px;
    overflow: hidden;
    border: 1px solid rgba(142, 101, 58, 0.32);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(18, 43, 45, 0.18), rgba(39, 25, 18, 0.2)),
        #172f35;
    color: #fff;
    box-shadow:
        0 18px 36px rgba(29, 43, 34, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.beacon-gallery-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.beacon-gallery-card-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: grid;
    gap: 8px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(11, 25, 29, 0), rgba(11, 25, 29, 0.78) 24%, rgba(11, 25, 29, 0.96));
}

.beacon-gallery-card-title {
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.beacon-gallery-card-meta,
.beacon-gallery-card-altitude {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    line-height: 1.3;
}

.beacon-gallery-card-action {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
}

.beacon-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 228, 189, 0.88);
    border: 1px solid rgba(88, 58, 28, 0.16);
    color: rgba(66, 42, 20, 0.92);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    box-shadow:
        0 10px 18px rgba(10, 8, 7, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.beacon-status-pill[data-beacon-status="found"] {
    color: #255539;
}

.beacon-status-pill[data-beacon-status="own"] {
    color: #6f4f18;
}

.beacon-hunt-placement-visual {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 24%, rgba(47, 143, 122, 0.18) 25% 52%, rgba(241, 215, 141, 0.34) 53% 100%);
    box-shadow:
        inset 0 0 0 1px rgba(47, 143, 122, 0.2),
        0 12px 24px rgba(31, 57, 53, 0.16);
}

.beacon-hunt-placement-visual-pin {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.98);
    border-radius: 50% 50% 50% 0;
    background: #2f8f7a;
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.32),
        0 8px 18px rgba(31, 57, 53, 0.28);
    transform: rotate(-45deg);
    animation: beacon-hunt-placement-pulse 1.3s ease-in-out infinite;
}

.beacon-map-marker-shell {
    width: 0;
    height: 0;
}

.beacon-map-marker {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
}

.beacon-map-marker-anchor {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -100%);
}

.maplibre-native-beacon-marker {
    width: 46px;
    height: 46px;
}

.maplibre-native-beacon-marker .beacon-map-marker-anchor {
    position: static;
    transform: none;
}

.beacon-map-marker-core {
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow:
        0 8px 18px rgba(24, 42, 38, 0.3),
        inset 0 0 0 5px rgba(255, 255, 255, 0.34);
}

.beacon-map-marker-image {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(24, 42, 38, 0.3));
}

.beacon-map-owner-label-shell {
    width: 0;
    height: 0;
}

.beacon-map-owner-label {
    max-width: 180px;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(47, 143, 122, 0.24);
    border-radius: 10px;
    background: rgba(255, 252, 239, 0.94);
    box-shadow: 0 7px 18px rgba(31, 57, 53, 0.2);
    color: #1f3935;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beacon-map-marker-image[src=""],
.beacon-map-marker-image:not([src]) {
    display: none;
}

.beacon-map-marker-image[src=""] + .beacon-map-marker-core,
.beacon-map-marker-image:not([src]) + .beacon-map-marker-core {
    display: block;
}

.beacon-map-marker-target .beacon-map-marker-core {
    background: #2f8f7a;
}

.beacon-map-marker-own .beacon-map-marker-core {
    background: #d0a84d;
}

.beacon-map-marker-placement {
    pointer-events: none;
}

.beacon-map-marker-placement .beacon-map-marker-core {
    background: #f1d78d;
    box-shadow:
        0 8px 18px rgba(24, 42, 38, 0.26),
        0 0 0 8px rgba(47, 143, 122, 0.16),
        inset 0 0 0 5px rgba(255, 255, 255, 0.46);
    animation: beacon-hunt-placement-pulse 1.3s ease-in-out infinite;
}

.beacon-map-marker-placement .beacon-map-marker-image {
    animation: beacon-hunt-placement-image-pulse 1.3s ease-in-out infinite;
}

.beacon-map-marker:hover .beacon-map-marker-image,
.beacon-map-marker:focus-visible .beacon-map-marker-image {
    transform: scale(1.08);
}

.beacon-map-marker:hover .beacon-map-marker-core,
.beacon-map-marker:focus-visible .beacon-map-marker-core {
    transform: rotate(-45deg) scale(1.14);
}

@keyframes beacon-hunt-placement-pulse {
    0%,
    100% {
        transform: rotate(-45deg) scale(1);
    }

    50% {
        transform: rotate(-45deg) scale(1.12);
    }
}

@keyframes beacon-hunt-placement-image-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.beacon-map-tooltip .maplibre-dom-tool-popup-card {
    border-color: rgba(47, 143, 122, 0.28);
    color: #1f3935;
}

.riddle-card.is-completed,
.beacon-gallery-card.is-completed {
    --riddle-card-state-border: rgba(148, 237, 117, 0.82);
    --riddle-card-state-ring: rgba(109, 210, 87, 0.42);
    --riddle-card-state-glow: rgba(104, 244, 80, 0.26);
    --riddle-card-state-shadow: rgba(16, 36, 16, 0.26);
    --riddle-card-state-inner-border: rgba(151, 255, 118, 0.86);
    --riddle-card-state-inner-highlight: rgba(229, 255, 171, 0.22);
    --riddle-card-state-inner-fill: rgba(83, 232, 65, 0.18);
    --riddle-card-state-inner-glow: rgba(108, 255, 83, 0.26);
    --riddle-card-state-premium-border: rgba(91, 183, 116, 0.88);
    --riddle-card-state-premium-ring: rgba(91, 183, 116, 0.82);
    --riddle-card-state-premium-shadow: rgba(25, 92, 48, 0.24);
    --riddle-card-state-premium-inner-border: rgba(120, 204, 143, 0.78);
    --riddle-card-state-premium-inner-highlight: rgba(219, 247, 226, 0.32);
    --riddle-card-state-premium-inner-fill: rgba(91, 183, 116, 0.12);
    --riddle-card-state-premium-before-border: rgba(91, 183, 116, 0.72);
}

.riddle-card.is-active {
    --riddle-card-state-border: rgba(78, 204, 246, 0.82);
    --riddle-card-state-ring: rgba(78, 204, 246, 0.42);
    --riddle-card-state-glow: rgba(78, 204, 246, 0.26);
    --riddle-card-state-shadow: rgba(8, 29, 45, 0.26);
    --riddle-card-state-inner-border: rgba(92, 214, 255, 0.9);
    --riddle-card-state-inner-highlight: rgba(167, 237, 255, 0.24);
    --riddle-card-state-inner-fill: rgba(78, 204, 246, 0.18);
    --riddle-card-state-inner-glow: rgba(78, 204, 246, 0.26);
    --riddle-card-state-premium-border: rgba(76, 170, 205, 0.88);
    --riddle-card-state-premium-ring: rgba(76, 170, 205, 0.82);
    --riddle-card-state-premium-shadow: rgba(8, 72, 105, 0.24);
    --riddle-card-state-premium-inner-border: rgba(92, 214, 255, 0.78);
    --riddle-card-state-premium-inner-highlight: rgba(213, 245, 255, 0.32);
    --riddle-card-state-premium-inner-fill: rgba(76, 170, 205, 0.12);
    --riddle-card-state-premium-before-border: rgba(76, 170, 205, 0.72);
}

.riddle-card.selected:is(.is-completed, .is-active),
.beacon-gallery-card.selected.is-completed {
    border-color: var(--riddle-card-state-border);
    box-shadow:
        0 0 0 3px var(--riddle-card-state-ring),
        0 0 0 6px var(--riddle-card-state-shadow),
        0 20px 34px var(--riddle-card-state-shadow);
}

.riddle-card.selected:is(.is-completed, .is-active)::after,
.beacon-gallery-card.selected.is-completed::after {
    border-color: var(--riddle-card-state-inner-border);
    box-shadow:
        inset 0 0 0 1px var(--riddle-card-state-inner-highlight),
        inset 0 0 20px var(--riddle-card-state-inner-fill),
        0 0 14px var(--riddle-card-state-inner-glow);
}

.riddle-card:is(.is-completed, .is-active):not(.selected),
.beacon-gallery-card.is-completed:not(.selected) {
    border-color: var(--riddle-card-state-border);
    box-shadow:
        0 0 0 1px var(--riddle-card-state-ring),
        0 0 22px var(--riddle-card-state-glow),
        0 18px 34px var(--riddle-card-state-shadow);
}

.riddle-card:is(.is-completed, .is-active)::before,
.beacon-gallery-card.is-completed::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 12px;
    border: 1px solid var(--riddle-card-state-inner-border);
    box-shadow:
        inset 0 0 0 1px var(--riddle-card-state-inner-highlight),
        inset 0 0 24px var(--riddle-card-state-inner-fill),
        0 0 17px var(--riddle-card-state-inner-glow);
    pointer-events: none;
    z-index: 2;
}

.riddle-card-image,
.riddle-detail-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.riddle-card-chrome {
    position: absolute;
    inset: 12px 12px auto;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    pointer-events: none;
}

.maphora-gallery-card .riddle-card-chrome {
    z-index: 4;
}

.riddle-card-player-flags {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.maphora-gallery-card .riddle-card-player-flags,
.maphora-gallery-card .riddle-card-status-badge {
    z-index: 5;
}

.riddle-card-category-indicator {
    --riddle-card-category-accent: #65c83f;
    --riddle-card-category-accent-deep: #2c8426;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: end;
    padding: 0 7px 7px 0;
    color: #ffffff;
    background: linear-gradient(135deg, transparent 0 48%, var(--riddle-card-category-accent) 49% 70%, var(--riddle-card-category-accent-deep) 100%);
    filter: drop-shadow(-3px -3px 7px rgba(6, 4, 2, 0.22));
    pointer-events: none;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="satellite"] {
    --riddle-card-category-accent: #20b9e8;
    --riddle-card-category-accent-deep: #0878b7;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="virtual"] {
    --riddle-card-category-accent: #65c83f;
    --riddle-card-category-accent-deep: #2c8426;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="beacon"] {
    --riddle-card-category-accent: #ff861c;
    --riddle-card-category-accent-deep: #c4490b;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="physical"] {
    --riddle-card-category-accent: #ff861c;
    --riddle-card-category-accent-deep: #c4490b;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="photo"] {
    --riddle-card-category-accent: #ed3a9a;
    --riddle-card-category-accent-deep: #a81768;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="cinema"] {
    --riddle-card-category-accent: #9a62d6;
    --riddle-card-category-accent-deep: #63339c;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="sound"] {
    --riddle-card-category-accent: #ffd82f;
    --riddle-card-category-accent-deep: #e5a914;
    color: #111820;
}

.riddle-card-category-indicator[data-riddle-card-category-tone="pursuit"] {
    --riddle-card-category-accent: #c84335;
    --riddle-card-category-accent-deep: #75251f;
}

.riddle-card-category-indicator .riddle-gallery-nav-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.riddle-card-category-indicator .riddle-gallery-nav-icon-image {
    filter: brightness(0) invert(1);
}

.riddle-card-category-indicator[data-riddle-card-category-tone="sound"] .riddle-gallery-nav-icon-image {
    filter: brightness(0);
}

.riddle-card.has-category-indicator .riddle-card-overlay {
    padding-right: 48px;
}

.riddle-card-player-flag {
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(24, 18, 13, 0.72);
    border: 1px solid rgba(255, 238, 202, 0.22);
    color: rgba(255, 237, 205, 0.92);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.riddle-card-player-flag[data-riddle-card-action] {
    pointer-events: auto;
    cursor: pointer;
}

.riddle-card-player-flag[data-riddle-card-action]:hover,
.riddle-card-player-flag[data-riddle-card-action]:focus-visible {
    color: #ff6961;
    border-color: rgba(255, 105, 97, 0.5);
    background: rgba(44, 20, 18, 0.86);
}

.riddle-card-player-flag-feedback {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2;
    min-width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 228, 181, 0.34);
    background: rgba(32, 24, 17, 0.92);
    color: #fff1ce;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 140ms ease, transform 140ms ease;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.riddle-card-player-flag[data-riddle-card-action]:hover .riddle-card-player-flag-feedback,
.riddle-card-player-flag[data-riddle-card-action]:focus-visible .riddle-card-player-flag-feedback {
    opacity: 1;
    transform: translateY(0);
}

.riddle-card-player-flag.is-favorite {
    color: #ffd98a;
}

.riddle-card-favorite-icon {
    display: inline-grid;
    place-items: center;
}

.riddle-card-favorite-icon-remove {
    display: none;
}

.riddle-card-player-flag[data-riddle-card-action]:hover .riddle-card-favorite-icon-normal,
.riddle-card-player-flag[data-riddle-card-action]:focus-visible .riddle-card-favorite-icon-normal {
    display: none;
}

.riddle-card-player-flag[data-riddle-card-action]:hover .riddle-card-favorite-icon-remove,
.riddle-card-player-flag[data-riddle-card-action]:focus-visible .riddle-card-favorite-icon-remove {
    display: inline-grid;
    color: #ff6961;
}

.riddle-card-player-flag.is-bookmarked {
    color: #d7edff;
}

.riddle-card-player-flag .riddle-player-action-icon {
    width: 16px;
    height: 16px;
}

.riddle-card-overlay {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: grid;
    gap: 6px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(17, 12, 9, 0), rgba(13, 9, 7, 0.9));
}

.riddle-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 228, 189, 0.88);
    border: 1px solid rgba(88, 58, 28, 0.16);
    color: rgba(66, 42, 20, 0.92);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow:
        0 10px 18px rgba(10, 8, 7, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.riddle-card-badge.is-placeholder {
    background: rgba(34, 47, 40, 0.92);
    border-color: rgba(160, 208, 150, 0.24);
    color: #d8f0d5;
}

.riddle-card-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 4px 10px 5px;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(207, 74, 48, 0.98), rgba(133, 31, 22, 0.98)),
        #9a2a20;
    border: 1px solid rgba(255, 203, 150, 0.34);
    color: #fff6e8;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px rgba(37, 9, 4, 0.42);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(27, 7, 3, 0.7);
    text-transform: uppercase;
}

.riddle-card-finds-badge,
.riddle-card-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(168, 104, 34, 0.94), rgba(95, 52, 20, 0.96)),
        rgba(110, 65, 26, 0.94);
    border: 1px solid rgba(255, 221, 142, 0.36);
    color: #fff5d9;
    box-shadow:
        0 10px 18px rgba(44, 22, 7, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(28, 12, 3, 0.62);
}

.riddle-card-status-badge {
    text-transform: uppercase;
}

.riddle-card-status-badge[data-riddle-card-status="active"] {
    background:
        linear-gradient(180deg, rgba(14, 43, 61, 0.96), rgba(8, 29, 45, 0.96)),
        rgba(8, 29, 45, 0.96);
    border-color: rgba(78, 204, 246, 0.58);
    color: #83e5ff;
    box-shadow:
        inset 0 1px 0 rgba(167, 237, 255, 0.12),
        0 4px 10px rgba(8, 29, 45, 0.42);
}

.riddle-card-status-badge[data-riddle-card-status="completed"] {
    background:
        linear-gradient(180deg, rgba(52, 142, 78, 0.94), rgba(28, 95, 49, 0.96)),
        rgba(35, 104, 54, 0.94);
    border-color: rgba(136, 224, 161, 0.4);
    color: #eaffea;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 4px 10px rgba(24, 72, 37, 0.34);
}

.riddle-card-status-badge .riddle-state-pill-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.riddle-card-finds-icon {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.riddle-card-finds-icon .riddle-detail-action-icon {
    width: 14px;
    height: 14px;
}

.riddle-state-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.riddle-state-pill-row.compact {
    gap: 5px;
}

.riddle-state-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 248, 235, 0.08);
    border: 1px solid rgba(255, 248, 235, 0.14);
    color: #fff2cf;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.riddle-state-pill-row.compact .riddle-state-pill {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.7rem;
}

.riddle-state-pill-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: currentColor;
}

.riddle-state-pill-row.compact .riddle-state-pill-icon {
    width: 12px;
    height: 12px;
}

.riddle-state-pill-icon-active {
    fill: none;
}

.riddle-state-pill[data-riddle-state-tone="free"] {
    background: rgba(73, 136, 96, 0.16);
    border-color: rgba(124, 202, 145, 0.26);
    color: #ddf5df;
}

.riddle-state-pill[data-riddle-state-tone="owned"] {
    background: rgba(189, 144, 46, 0.18);
    border-color: rgba(248, 235, 155, 0.26);
    color: #fff1b4;
}

.riddle-state-pill[data-riddle-state-tone="locked"] {
    background: rgba(117, 89, 61, 0.22);
    border-color: rgba(201, 166, 107, 0.22);
    color: rgba(255, 235, 212, 0.92);
}

.riddle-state-pill[data-riddle-state-tone="active"] {
    background:
        linear-gradient(180deg, rgba(14, 43, 61, 0.96), rgba(8, 29, 45, 0.96)),
        rgba(8, 29, 45, 0.96);
    border-color: rgba(78, 204, 246, 0.58);
    color: #83e5ff;
    text-transform: uppercase;
    box-shadow:
        inset 0 1px 0 rgba(167, 237, 255, 0.12),
        0 0 0 1px rgba(78, 204, 246, 0.12),
        0 7px 15px rgba(8, 29, 45, 0.2);
}

.riddle-state-pill[data-riddle-state-tone="paused"] {
    background: rgba(167, 121, 24, 0.2);
    border-color: rgba(255, 225, 152, 0.24);
    color: #fff0ba;
}

.riddle-state-pill[data-riddle-state-tone="completed"] {
    background: rgba(52, 142, 78, 0.34);
    border-color: rgba(136, 224, 161, 0.34);
    color: #eaffea;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 14px rgba(24, 72, 37, 0.12);
}

.riddle-state-pill[data-riddle-state-tone="favorite"] {
    background: rgba(167, 88, 44, 0.2);
    border-color: rgba(241, 190, 110, 0.26);
    color: #ffe4af;
}

.riddle-state-pill[data-riddle-state-tone="bookmark"] {
    background: rgba(58, 102, 132, 0.2);
    border-color: rgba(133, 192, 226, 0.24);
    color: #d9f1ff;
}

.riddle-state-pill[data-riddle-state-tone="downloaded"] {
    background: rgba(58, 102, 132, 0.2);
    border-color: rgba(133, 192, 226, 0.24);
    color: #d9f1ff;
}

.riddle-card-title {
    color: #fff1cf;
    font-size: 1.02rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.2;
}

.riddle-card-author {
    color: rgba(243, 225, 189, 0.82);
    font-size: 0.82rem;
    text-align: left;
}

.riddle-card-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.riddle-card-footer-row .riddle-card-author {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riddle-card-quick-facts {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    max-width: 58%;
    margin-left: auto;
}

.riddle-card-quick-fact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(18, 13, 9, 0.68);
    border: 1px solid rgba(255, 240, 214, 0.18);
    color: rgba(255, 243, 205, 0.94);
    box-shadow:
        0 6px 12px rgba(8, 5, 3, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riddle-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.riddle-card-meta-text {
    color: rgba(245, 237, 224, 0.72);
    font-size: 0.76rem;
}

.riddle-card-meta-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 248, 235, 0.08);
    border: 1px solid rgba(255, 240, 214, 0.14);
    color: rgba(255, 243, 205, 0.92);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.riddle-gallery-placeholder-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(50, 97, 58, 0.22);
    border: 1px solid rgba(152, 213, 160, 0.24);
    color: #d8f1dc;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.riddle-gallery-placeholder-pill.compact {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.68rem;
}

.riddle-gallery-carousel-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 8;
    width: 42px;
    height: 88px;
    padding: 0;
    border-radius: 18px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #f3e4bd, #d8bb80);
    border: 1px solid rgba(108, 79, 38, 0.42);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.riddle-gallery-carousel-arrow[data-riddle-scroll-direction="previous"] {
    left: 0;
    right: auto;
}

.riddle-gallery-carousel-arrow:hover:not(:disabled),
.riddle-gallery-carousel-arrow:focus-visible:not(:disabled) {
    background: linear-gradient(180deg, #f8ebc6, #e0c98f);
    transform: translateY(-50%);
}

.riddle-gallery-carousel-arrow.hidden,
.riddle-gallery-progress.hidden {
    display: none;
}

.riddle-gallery-carousel-arrow:disabled {
    opacity: 0.38;
    cursor: default;
    transform: translateY(-50%);
}

.riddle-gallery-carousel-arrow span {
    width: 18px;
    height: 18px;
    border-top: 3px solid rgba(61, 44, 19, 0.92);
    border-right: 3px solid rgba(61, 44, 19, 0.92);
    transform: rotate(45deg);
}

.riddle-gallery-carousel-arrow[data-riddle-scroll-direction="previous"] span {
    transform: rotate(-135deg);
}

.riddle-gallery-progress {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 18px;
}

.riddle-gallery-progress-slider {
    --riddle-progress-value: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.riddle-gallery-progress-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(248, 235, 155, 0.98) 0%,
            rgba(228, 170, 108, 0.92) var(--riddle-progress-value),
            rgba(255, 255, 255, 0.08) var(--riddle-progress-value),
            rgba(255, 255, 255, 0.08) 100%
        );
}

.riddle-gallery-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -5px;
    border-radius: 999px;
    border: 1px solid rgba(99, 74, 35, 0.64);
    background: linear-gradient(180deg, #fff3c9, #eacb7f);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.riddle-gallery-progress-slider:hover::-webkit-slider-thumb,
.riddle-gallery-progress-slider:focus-visible::-webkit-slider-thumb {
    background: linear-gradient(180deg, #fff7d8, #f1d590);
}

.riddle-gallery-progress-slider:focus-visible::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 2px rgba(248, 235, 155, 0.28);
}

.riddle-gallery-progress-slider:disabled {
    cursor: default;
}

.riddle-gallery-progress-slider:disabled::-webkit-slider-thumb {
    box-shadow: none;
}


/* Player riddle creator toolbar, submission cards and form surfaces. */
.player-riddle-reminder {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1180;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.85rem 0.9rem;
    width: min(29rem, calc(100vw - 2rem));
    padding: 1rem 1rem 0.95rem;
    overflow: hidden;
    border: 1px solid rgba(239, 198, 111, 0.46);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(76, 117, 154, 0.28), transparent 38%),
        linear-gradient(165deg, var(--maphora-navy-raised, #142a44), var(--maphora-navy, #0c1b2e) 76%);
    color: var(--maphora-ivory, #f7f4ee);
    box-shadow:
        0 1.4rem 3.4rem rgba(2, 10, 20, 0.42),
        0 0 0 1px rgba(212, 160, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px) saturate(1.08);
    animation: player-riddle-reminder-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.player-riddle-reminder.hidden { display: none; }
.player-riddle-reminder::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, #efc66f 36%, #fff0b8 50%, #d4a017 68%, transparent 95%);
    opacity: 0.88;
}
.player-riddle-reminder-emblem {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(239, 198, 111, 0.42);
    border-radius: 50%;
    color: #efc66f;
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0.45rem 1rem rgba(2, 10, 20, 0.22);
}
.player-riddle-reminder-emblem svg { width: 1.8rem; height: 1.8rem; }
.player-riddle-reminder-emblem circle,
.player-riddle-reminder-emblem path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.player-riddle-reminder-emblem circle:last-child { fill: currentColor; stroke: none; }
.player-riddle-reminder-copy { display: grid; align-content: center; gap: 0.25rem; min-width: 0; }
.player-riddle-reminder-copy strong {
    color: #fff8e8;
    font-family: var(--maphora-title-font, Cambria, Georgia, "Times New Roman", serif);
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.player-riddle-reminder-copy p { margin: 0; color: rgba(247, 244, 238, 0.72); font-size: 0.92rem; line-height: 1.45; }
.player-riddle-reminder-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.05rem;
}
.player-riddle-reminder-actions button {
    min-height: 2.4rem;
    padding: 0.5rem 0.82rem;
    border: 1px solid rgba(247, 244, 238, 0.16);
    border-radius: 0.68rem;
    background: rgba(247, 244, 238, 0.075);
    color: rgba(247, 244, 238, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}
.player-riddle-reminder-actions button:hover,
.player-riddle-reminder-actions button:focus-visible {
    border-color: rgba(239, 198, 111, 0.46);
    background: rgba(247, 244, 238, 0.13);
    color: #fff8e8;
}
.player-riddle-reminder-actions button.is-primary {
    border-color: rgba(255, 220, 132, 0.78);
    background: linear-gradient(135deg, #e6b63d, var(--maphora-gold-deep, #a9780e));
    color: var(--maphora-navy, #0c1b2e);
    box-shadow: inset 0 1px 0 rgba(255, 246, 204, 0.55), 0 0.45rem 1rem rgba(2, 10, 20, 0.2);
}
.player-riddle-reminder-actions button.is-primary:hover,
.player-riddle-reminder-actions button.is-primary:focus-visible {
    border-color: #ffe6a2;
    background: linear-gradient(135deg, #f0c753, #bd8712);
    color: var(--maphora-navy, #0c1b2e);
}
.player-riddle-reminder-actions button.is-danger {
    margin-inline-start: auto;
    border-color: rgba(227, 141, 126, 0.24);
    color: #efb0a5;
    background: rgba(140, 67, 56, 0.12);
}
.player-riddle-reminder-actions button.is-danger:hover,
.player-riddle-reminder-actions button.is-danger:focus-visible {
    border-color: rgba(239, 176, 165, 0.55);
    color: #ffd7cf;
    background: rgba(140, 67, 56, 0.25);
}

@keyframes player-riddle-reminder-enter {
    from { opacity: 0; transform: translateY(0.65rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 720px) {
    .player-riddle-reminder {
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        width: calc(100vw - 1.5rem);
    }
    .player-riddle-reminder-actions button.is-primary { flex: 1 1 100%; }
    .player-riddle-reminder-actions button.is-danger { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .player-riddle-reminder { animation: none; }
}

.riddle-creator-toolbar-actions,
.riddle-creator-surface-actions,
.riddle-creator-form-actions,
.riddle-creator-card-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.riddle-creator-toolbar-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
    margin-inline-start: auto;
}

.riddle-gallery-toolbar.has-creator-promo {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
    grid-template-rows: auto auto;
    column-gap: clamp(2.5rem, 6vw, 7rem);
    padding-inline-end: clamp(0.5rem, 2vw, 2.25rem);
}

.riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-main {
    display: contents;
}

.riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-copy {
    grid-column: 1;
    grid-row: 1;
}

.riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-filters {
    grid-column: 1;
    grid-row: 2;
}

.riddle-gallery-toolbar.has-creator-promo .riddle-creator-toolbar-actions {
    position: static;
    display: grid;
    grid-template-columns: clamp(7rem, 9vw, 9rem) minmax(13rem, 1fr);
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: 0.65rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: 100%;
    margin-inline-start: 0;
    transform: none;
}

.riddle-creator-nav-action .riddle-gallery-nav-icon-shell svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.riddle-creator-promo {
    display: contents;
    min-width: 0;
}

.riddle-creator-promo-art {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
    height: 8.5rem;
    overflow: visible;
    pointer-events: none;
    isolation: isolate;
    --creator-portrait-width: clamp(11.5rem, 14vw, 13.5rem);
}

.riddle-creator-promo-art::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--creator-portrait-width);
    aspect-ratio: 1;
    transform: translateY(-50%) scale(0.92);
    z-index: -1;
    border: 1px solid rgba(212, 160, 23, 0.42);
    border-radius: 50%;
}

.riddle-creator-promo-portrait {
    position: absolute;
    right: 0;
    top: 50%;
    width: var(--creator-portrait-width);
    max-width: none;
    height: auto;
    transform: translateY(-42%);
    /* Trace the original poster's silhouette, keeping its hat and shoulders
       outside the decorative ring. The lower fade removes the poster lettering.
       Absolute sizing preserves the shared toolbar's text and button geometry. */
    clip-path: polygon(
        26% 7%, 28% 4%, 35% 2%, 46% 1.8%, 53% 2.8%, 55.5% 5%,
        54% 10%, 53% 18.5%, 57% 21%, 62% 19%, 63% 21%,
        61% 24%, 65% 25%, 65% 28%, 62% 29%, 61% 33%,
        65% 37%, 72% 39%, 81% 40%, 85% 44%, 85.5% 50%,
        89% 53%, 91% 59%, 90% 63%, 92% 61%, 91% 68%,
        87% 72%, 83% 74%, 81% 79%, 72% 82%, 23% 82%,
        14% 79%, 11% 75%, 10% 68%, 12% 61%, 13% 56%,
        12.5% 52%, 14% 46%, 18% 42%, 28% 40%, 28% 37%,
        25% 36%, 23% 33%, 24% 29%, 22% 27%, 20% 24%,
        23% 22.5%, 29% 23%, 28% 17%, 28% 11%
    );
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 82%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 82%);
}

.riddle-creator-promo-spark {
    position: absolute;
    z-index: 4;
    color: #d99a1f;
    line-height: 1;
    text-shadow: 0 0 0.65rem rgba(234, 169, 36, 0.5);
}

.riddle-creator-promo-spark.is-left { right: calc(var(--creator-portrait-width) - 0.2rem); top: 0.5rem; font-size: 0.9rem; }
.riddle-creator-promo-spark.is-right { right: 0; top: 1.5rem; font-size: 1.05rem; }

.riddle-creator-promo-copy {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    gap: 0.12rem;
    min-width: 0;
    color: #38516d;
    font-size: 0.87rem;
    line-height: 1.35;
}

.riddle-creator-promo-copy strong {
    color: #172b43;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.18;
}

.riddle-creator-primary-action,
.riddle-creator-secondary-action,
.riddle-creator-surface button,
.riddle-creator-form button {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(190, 132, 25, 0.72);
    border-radius: 0.75rem;
    background: rgba(255, 252, 245, 0.92);
    color: #253245;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.riddle-creator-primary-action,
.riddle-creator-form button.is-primary {
    background: linear-gradient(135deg, #f0bc49, #d99a1f);
    color: #17263a;
    box-shadow: 0 0.35rem 0.9rem rgba(117, 75, 7, 0.2);
}

.riddle-creator-toolbar-actions > .riddle-creator-primary-action {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.6rem;
    padding: 0.75rem 1.25rem;
    border-color: rgba(197, 128, 13, 0.72);
    border-radius: 1rem;
    background: linear-gradient(135deg, #fff8e4 0%, #f7dfaa 52%, #f1c96d 100%);
    color: #9a5c0c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    width: 100%;
    white-space: nowrap;
    box-shadow:
        0 0.5rem 1.2rem rgba(137, 83, 7, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.riddle-creator-primary-action-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}

.riddle-creator-surface button:disabled,
.riddle-creator-form button:disabled { cursor: not-allowed; opacity: 0.48; }

.riddle-creator-disabled-action {
    display: inline-flex;
    cursor: help;
}

.riddle-creator-disabled-action > button:disabled {
    filter: grayscale(1);
    pointer-events: none;
}

.riddle-creator-surface {
    height: 100%;
    overflow: auto;
    padding: clamp(1rem, 2vw, 1.6rem);
    border: 1px solid rgba(159, 113, 62, 0.58);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 253, 248, 0.98), rgba(246, 242, 233, 0.97));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -1px 0 rgba(111, 73, 18, 0.12);
}

.riddle-creator-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(128, 97, 43, 0.24);
}

.riddle-creator-surface-header h2,
.riddle-creator-card h3 {
    margin: 0.25rem 0;
    color: #1d2d43;
    font-family: Georgia, "Times New Roman", serif;
}

.riddle-creator-surface-header p,
.riddle-creator-card p { margin: 0.2rem 0; color: #657084; }

.riddle-creator-kicker {
    color: #9a6a13;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-creator-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.85rem;
    padding: 1rem;
    border: 1px solid rgba(128, 97, 43, 0.22);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.78);
}

.riddle-creator-review-message { max-width: 55rem; }

.riddle-creator-alert,
.riddle-creator-empty,
.riddle-creator-loading {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.8rem;
    background: #fff1e9;
    color: #7b3b23;
}

.riddle-creator-alert.is-review { display: grid; gap: 0.3rem; background: #fff3ce; color: #72500b; }

.riddle-creator-form {
    max-width: 62rem;
    margin: 1rem auto 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(128, 97, 43, 0.22);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
}

@media (min-width: 1261px) {
    #riddle-gallery-panel.is-fullscreen .riddle-creator-form {
        width: 100%;
        max-width: none;
    }

    #riddle-gallery-panel.is-fullscreen .riddle-creator-form-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    #riddle-gallery-panel.is-fullscreen .riddle-creator-form-grid > label {
        grid-column: span 6;
    }

    #riddle-gallery-panel.is-fullscreen .riddle-creator-form-grid > .is-wide {
        grid-column: 1 / -1;
    }

    #riddle-gallery-panel.is-fullscreen .riddle-creator-form-grid > .riddle-creator-description-field {
        grid-column: span 8;
    }

    #riddle-gallery-panel.is-fullscreen .riddle-creator-form-grid > .riddle-creator-difficulty-field {
        grid-column: span 4;
    }

    #riddle-gallery-panel.is-fullscreen .riddle-document-preset-grid,
    #riddle-gallery-panel.is-fullscreen .riddle-creator-image-choices {
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    }
}

.riddle-creator-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.riddle-creator-form label { display: grid; gap: 0.4rem; color: #334258; font-weight: 700; }
.riddle-creator-form label.is-wide,
.riddle-creator-form-grid > .is-wide,
.riddle-creator-map-center { grid-column: 1 / -1; }
.riddle-creator-name-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
}
.riddle-creator-name-title { min-width: 0; }
.riddle-creator-name-generator {
    display: grid;
    grid-template-columns: minmax(13rem, 18rem) auto;
    gap: .65rem;
    align-items: end;
    justify-self: end;
}
.riddle-creator-name-generator > button { white-space: nowrap; }
.riddle-creator-name-style { grid-template-columns: minmax(0, 1fr); align-items: end; }
.riddle-creator-name-style > select { padding-block: .5rem; }
.riddle-creator-gallery-description-hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .15rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(190, 132, 25, .28);
    border-radius: .65rem;
    background: rgba(255, 249, 235, .72);
    color: #6e582f;
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.4;
}
.riddle-creator-gallery-description-hint > [aria-hidden="true"] {
    color: #a66f0f;
    font-size: 1rem;
    font-weight: 800;
}
.riddle-creator-coordinate-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 1rem; align-items: end; }
.riddle-creator-paste-coordinates { white-space: nowrap; }
.riddle-creator-add-photo { grid-column: 1 / -1; justify-self: start; }
.riddle-creator-photo-limit { margin: 0; color: #8a5a12; font-weight: 700; }
.riddle-creator-image-choices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: .8rem; border: 1px solid rgba(190,132,25,.32); border-radius: .75rem; }
.riddle-creator-image-choices legend { padding: 0 .4rem; font-weight: 700; }
.riddle-creator-image-choice { display: grid; grid-template-columns: auto 1fr; gap: .35rem .5rem; align-items: center; min-width: 0; padding: .65rem; border: 1px solid rgba(23,43,67,.18); border-radius: .65rem; background: rgba(255,255,255,.68); cursor: pointer; }
.riddle-creator-image-choice.is-cover { border-color: #d99a1f; box-shadow: 0 0 0 2px rgba(217,154,31,.18); }
.riddle-creator-image-choice small { grid-column: 2; color: #9a5c0c; }
.riddle-creator-image-preview-frame { position: relative; grid-column: 1 / -1; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: .5rem; background: #101827; color: rgba(255,255,255,.72); font-size: .75rem; text-align: center; }
.riddle-creator-image-preview-frame img { width: 100%; height: 100%; object-fit: contain; }
.riddle-creator-image-choice-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riddle-creator-video-field { margin-top: .25rem; padding-top: 1rem; border-top: 1px solid rgba(190,132,25,.24); }
.riddle-creator-video-preview { display: grid; gap: .55rem; padding: .8rem; border: 1px solid rgba(190,132,25,.32); border-radius: .75rem; background: rgba(255,255,255,.68); color: #334258; }
.riddle-creator-video-preview-frame { position: relative; display: grid; place-items: center; width: min(100%, 42rem); aspect-ratio: 16 / 9; overflow: hidden; border-radius: .5rem; background: #101827; color: rgba(255,255,255,.72); font-size: .8rem; text-align: center; }
.riddle-creator-video-preview-frame video { width: 100%; height: 100%; object-fit: contain; background: #101827; }

.riddle-investigation-location-copy,
.riddle-investigation-document-builder {
    grid-column: 1 / -1;
}

.riddle-investigation-location-copy {
    margin-top: 0;
}

.riddle-investigation-document-builder {
    --document-gold: #c88819;
    --document-navy: #102a45;
    display: grid;
    gap: 1rem;
    margin-top: 0.35rem;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    overflow: hidden;
    border: 1px solid rgba(164, 112, 24, 0.3);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 92% 0%, rgba(244, 190, 80, 0.2), transparent 30%),
        linear-gradient(145deg, rgba(255, 253, 247, 0.97), rgba(247, 242, 230, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 42px rgba(35, 30, 20, 0.08);
}

.riddle-investigation-document-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.riddle-investigation-document-heading h3,
.riddle-investigation-document-heading p { margin: 0; }
.riddle-investigation-document-heading h3 { color: var(--document-navy); font-size: clamp(1.15rem, 2vw, 1.45rem); }
.riddle-investigation-document-heading p { max-width: 44rem; margin-top: 0.25rem; color: #65738a; line-height: 1.5; }

.riddle-document-total-count {
    flex: none;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(190, 132, 25, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #83540a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.riddle-document-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.riddle-document-preset-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon copy count" "icon copy action";
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(25, 52, 80, 0.13);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.83);
    box-shadow: 0 7px 18px rgba(22, 38, 58, 0.06);
    transition: border-color 160ms ease, box-shadow 160ms ease, translate 160ms ease;
}

.riddle-document-preset-card:hover {
    translate: 0 -1px;
    border-color: rgba(190, 132, 25, 0.55);
    box-shadow: 0 11px 24px rgba(22, 38, 58, 0.1);
}

.riddle-document-preset-card.is-limit-reached { opacity: 0.68; }
.riddle-document-preset-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(213, 155, 49, 0.55);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, #193754, #081b2f);
    color: #f6c85e;
    box-shadow: inset 0 0 15px rgba(244, 187, 66, 0.13), 0 5px 12px rgba(9, 27, 46, 0.18);
    font-size: 1.2rem;
}

.riddle-document-preset-copy { grid-area: copy; display: grid; gap: 0.12rem; min-width: 0; }
.riddle-document-preset-copy strong { color: var(--document-navy); }
.riddle-document-preset-copy small { overflow: hidden; color: #6a7788; line-height: 1.35; }
.riddle-document-preset-count { grid-area: count; justify-self: end; color: #8d651d; font-size: 0.72rem; font-weight: 800; }
.riddle-document-preset-card > button { grid-area: action; justify-self: end; min-width: 5.7rem; padding: 0.42rem 0.68rem; }

.riddle-document-author-list { display: grid; gap: 0.85rem; }
.riddle-document-author-card {
    overflow: hidden;
    border: 1px solid rgba(19, 46, 73, 0.16);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 28px rgba(23, 38, 57, 0.07);
}

.riddle-document-author-card-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid rgba(19, 46, 73, 0.1);
    background: linear-gradient(100deg, rgba(16, 42, 69, 0.06), rgba(220, 162, 52, 0.08));
}

.riddle-document-author-card-header > span:nth-child(2) { display: grid; gap: 0.05rem; }
.riddle-document-author-card-header small { color: #8b682b; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.riddle-document-author-card-header strong { color: var(--document-navy); }
.riddle-document-author-card-header .riddle-document-preset-icon { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.riddle-document-author-remove {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    min-width: 0 !important;
    height: 2.15rem;
    padding: 0 !important;
    border-color: #e7aaa4 !important;
    border-radius: 0.55rem;
    background: #fff4f2;
    color: #b42318 !important;
    font-size: 1.35rem !important;
    font-weight: 800;
    line-height: 1;
}
.riddle-document-author-remove:hover,
.riddle-document-author-remove:focus-visible {
    border-color: #b42318 !important;
    background: #b42318;
    color: #fff !important;
}

.riddle-document-author-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    padding: 1rem;
}

.riddle-document-author-field.is-wide,
.riddle-document-author-field.is-asset { grid-column: 1 / -1; }
.riddle-document-author-field > small { color: #6a7687; font-weight: 500; line-height: 1.4; }
.riddle-document-author-field.is-boolean { grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; }
.riddle-document-author-field.is-boolean > small { grid-column: 2; }

.riddle-document-author-file-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    min-height: 2.55rem;
    padding: 0.55rem 0.9rem;
    overflow: hidden;
    border: 1px dashed rgba(190, 132, 25, 0.7);
    border-radius: 0.65rem;
    background: rgba(252, 244, 224, 0.75);
    color: #704a0e;
    cursor: pointer;
}

.riddle-document-author-file-control input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.riddle-document-author-assets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.riddle-document-author-assets li { display: inline-flex; gap: 0.35rem; align-items: center; min-width: 0; padding: 0.35rem 0.55rem; border-radius: 999px; background: #eef6ee; color: #315a34; font-size: 0.76rem; font-weight: 700; }
.riddle-document-author-assets-empty { margin: 0; color: #8a94a2; font-size: 0.78rem; font-weight: 500; }

.riddle-document-author-empty {
    display: grid;
    place-items: center;
    gap: 0.25rem;
    min-height: 9rem;
    padding: 1.25rem;
    border: 1px dashed rgba(152, 109, 35, 0.35);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.52);
    color: #6a7687;
    text-align: center;
}

.riddle-document-author-empty > span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #17344f; color: #f4c45d; font-size: 1.35rem; }
.riddle-document-author-empty strong { color: var(--document-navy); }
.riddle-document-author-empty p { max-width: 34rem; margin: 0; }
.riddle-document-author-empty.is-unavailable { border-color: rgba(155, 65, 43, 0.35); background: rgba(255, 241, 235, 0.68); }
.riddle-document-author-policy { display: flex; gap: 0.55rem; align-items: center; margin: 0; color: #6b7788; font-size: 0.78rem; }
.riddle-document-author-policy > span { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border: 1px solid rgba(190, 132, 25, 0.45); border-radius: 999px; color: #8c5d0e; font-family: Georgia, serif; font-weight: 800; }

@media (max-width: 760px) {
    .riddle-creator-image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riddle-investigation-document-heading { align-items: stretch; flex-direction: column; }
    .riddle-document-total-count { width: fit-content; }
    .riddle-document-preset-grid,
    .riddle-document-author-fields { grid-template-columns: 1fr; }
    .riddle-document-author-field.is-wide,
    .riddle-document-author-field.is-asset { grid-column: auto; }
    .riddle-document-preset-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" "count action"; }
    .riddle-document-preset-count { justify-self: start; }
    .riddle-document-preset-card > button { justify-self: end; }
}

body.riddle-gallery-open.player-riddle-location-mode #map,
body.riddle-gallery-open.player-riddle-location-mode .map-footer-credits,
body.riddle-gallery-open.player-riddle-location-mode .map-scale-feedback,
body.riddle-gallery-open.player-riddle-location-mode .maplibre-dom-desk-tool-surface,
body.riddle-gallery-open.player-riddle-location-mode .immersive-air-css-overlay,
body.riddle-gallery-open.player-riddle-location-mode .immersive-air-canvas,
body.riddle-gallery-open.player-riddle-location-mode #map-engine-indicator {
    filter: none;
}

body.riddle-gallery-open.player-riddle-location-mode #map {
    transform: none;
    pointer-events: auto;
}

body.riddle-gallery-open.player-riddle-location-mode .riddle-gallery-interaction-scrim {
    opacity: 0;
    pointer-events: none;
}

body.player-riddle-location-mode #map,
body.player-riddle-location-mode #map .maplibregl-canvas,
body.player-riddle-location-mode #map .maplibregl-canvas-container {
    cursor: url("/assets/riddle-gallery/riddle-pile-poil-crosshair.svg") 24 24, crosshair !important;
}

.riddle-map-location-pointer {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 2400;
    pointer-events: none;
    will-change: transform;
}

.riddle-map-location-pointer[hidden] { display: none; }

.riddle-map-location-target {
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid #f4c95d;
    border-radius: 50%;
    background:
        linear-gradient(#f4c95d, #f4c95d) center / 2px 100% no-repeat,
        linear-gradient(90deg, #f4c95d, #f4c95d) center / 100% 2px no-repeat;
    box-shadow: 0 0 0 2px rgba(10, 31, 52, .78), 0 4px 14px rgba(5, 18, 31, .38);
}

.riddle-map-location-pointer output {
    position: absolute;
    left: 23px;
    top: -18px;
    width: max-content;
    max-width: min(28rem, calc(100vw - 3rem));
    padding: .48rem .65rem;
    border: 1px solid rgba(238, 194, 92, .68);
    border-radius: .55rem;
    background: rgba(10, 31, 52, .94);
    color: #fff8df;
    box-shadow: 0 8px 24px rgba(4, 15, 27, .34);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}

.riddle-creator-form input:not([type="checkbox"]),
.riddle-creator-form textarea,
.riddle-creator-form select {
    width: 100%;
    border: 1px solid rgba(80, 85, 94, 0.3);
    border-radius: 0.65rem;
    background: #fff;
    color: #223147;
    padding: 0.7rem 0.8rem;
    font: inherit;
}

.riddle-creator-form textarea { resize: vertical; }
.riddle-creator-terms { grid-template-columns: auto 1fr; align-items: start; font-weight: 500 !important; }
.riddle-creator-terms input { margin-top: 0.2rem; }
.riddle-creator-form-actions { justify-content: flex-end; margin-top: 1.2rem; }

.riddle-location-request-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.riddle-location-community-column {
    display: grid;
    gap: 1.15rem;
}

.riddle-location-request-detail h3 {
    margin: 0;
    color: #1d2d43;
    font-family: Georgia, "Times New Roman", serif;
}

.riddle-location-solution-form > p,
.riddle-location-chat-section > p {
    margin: 0.45rem 0 0;
    color: #526177;
    line-height: 1.5;
}

.riddle-location-chat-section {
    display: grid;
    padding-top: 1rem;
    border-top: 1px solid rgba(128, 97, 43, 0.2);
}

.riddle-location-chat-host {
    width: 100%;
    margin-top: 0.8rem;
}

.riddle-location-solution-card {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(128, 97, 43, 0.22);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.78);
}

.riddle-location-solution-card p,
.riddle-location-solution-card small { margin: 0; }
.riddle-location-solution-form { margin-top: 0; }

.riddle-location-solution-proof {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid rgba(128, 97, 43, 0.18);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.62);
    color: #6d7785;
    font-size: 0.75rem;
    text-align: center;
}

.riddle-location-solution-proof img {
    width: 100%;
    max-height: 16rem;
    border-radius: 0.55rem;
    object-fit: contain;
}

.riddle-location-solution-proof.is-preview { grid-column: 1 / -1; }
.riddle-location-solution-proof figcaption { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .riddle-creator-toolbar-actions,
    .riddle-creator-surface-header,
    .riddle-creator-card { align-items: stretch; flex-direction: column; }
    .riddle-creator-form-grid { grid-template-columns: 1fr; }
    .riddle-location-request-detail { grid-template-columns: 1fr; }
    .riddle-creator-form label.is-wide,
    .riddle-creator-form-grid > .is-wide,
    .riddle-creator-map-center { grid-column: auto; }
    .riddle-creator-name-field { grid-template-columns: minmax(0, 1fr); }
    .riddle-creator-name-generator { grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
    .riddle-creator-coordinate-fields { grid-column: auto; grid-template-columns: 1fr; }
    .riddle-creator-image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riddle-gallery-toolbar.has-creator-promo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-main { display: flex; }
    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-copy,
    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-filters,
    .riddle-gallery-toolbar.has-creator-promo .riddle-creator-toolbar-actions { grid-column: auto; grid-row: auto; }
    .riddle-creator-promo { display: none; }
    .riddle-creator-toolbar-actions { margin-inline-start: 0; }
    .riddle-gallery-toolbar.has-creator-promo .riddle-creator-toolbar-actions { grid-template-columns: 1fr; }
    .riddle-creator-toolbar-actions > .riddle-creator-primary-action { grid-column: 1; min-height: 2.8rem; width: 100%; }
}

@media (min-width: 761px) and (max-width: 1260px) {
    .riddle-gallery-toolbar.has-creator-promo {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-creator-toolbar-actions {
        grid-row: 1;
        width: 100%;
        max-width: 18rem;
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-filters {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-wrap: nowrap;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-toolbar-select,
    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-missing-filter {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-missing-filter {
        line-height: 1.25;
        white-space: normal;
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-missing-filter input {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .riddle-gallery-toolbar.has-creator-promo .riddle-gallery-missing-filter span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .riddle-creator-promo-art { display: none; }
    .riddle-creator-promo,
    .riddle-creator-promo-copy { display: grid; grid-column: 1 / -1; width: 100%; min-width: 0; max-width: 15rem; }
    .riddle-gallery-toolbar.has-creator-promo .riddle-creator-toolbar-actions { grid-template-columns: 1fr; }
    .riddle-creator-toolbar-actions > .riddle-creator-primary-action { grid-column: 1; }
    .riddle-creator-toolbar-actions > .riddle-creator-primary-action { width: 100%; white-space: normal; }
}
.riddle-fixed-layout-host { grid-column: 1 / -1; min-width: 0; width: 100%; }

/* The investigation wizard owns only the main editor, inside the existing gallery shell. */
.riddle-investigation-editor {
    container: investigation / inline-size;
    --investigation-ink: #123354;
    --investigation-muted: #526d8b;
    --investigation-border: #ead6b3;
    padding: clamp(16px, 2vw, 32px);
    color: var(--investigation-ink);
    background: radial-gradient(ellipse at 85% 0, #f7edda66, transparent 55%), #fffcf6;
    font-family: Georgia, "Times New Roman", serif;
}
.riddle-investigation-editor *, .riddle-investigation-editor *::before, .riddle-investigation-editor *::after { box-sizing: border-box; }
.riddle-investigation-editor [hidden] { display: none !important; }
.riddle-investigation-editor .riddle-creator-form {
    width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: none;
}
.riddle-investigation-editor button { border-color: var(--investigation-border); border-radius: 8px; background: #fffefd; color: var(--investigation-ink); font-family: inherit; font-size: 14px; }
.riddle-investigation-editor button:hover { background: #fff5df; border-color: #c99436; }
.riddle-investigation-editor :focus-visible { outline: 3px solid #bb831f; outline-offset: 3px; }
.riddle-investigation-editor button.is-primary { background: linear-gradient(145deg, #17364e, #0b2133); color: #ffda7e; border-color: #c99737; box-shadow: 0 4px 9px #132a4226; }
.riddle-investigation-editor button.investigation-back { min-height: 28px; padding: 0; margin-bottom: 5px; border: 0; background: none; color: var(--investigation-muted); font-size: 13px; font-weight: 400; }
.riddle-investigation-editor .riddle-creator-surface-header { align-items: center; gap: 24px; padding: 0 0 12px; border: 0; }
.riddle-investigation-editor .riddle-creator-surface-header h2 { margin: 0 0 4px; color: var(--investigation-ink); font-size: clamp(25px, 2.1vw, 32px); }
.riddle-investigation-editor .riddle-creator-surface-header p { max-width: 720px; color: var(--investigation-muted); font-size: 14px; line-height: 1.35; }
.investigation-header-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; flex: 0 0 auto; gap: 10px; }
.investigation-header-actions button { min-height: 42px; padding: 10px 16px; }
.investigation-header-actions .is-primary { padding-inline: 22px; }
.investigation-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding: 13px;
    border: 1px solid var(--investigation-border);
    border-radius: 12px;
    background: #ffffff78;
}
.riddle-investigation-editor .investigation-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 16px; min-width: 0; padding: 12px; border: 1px solid transparent; background: transparent; text-align: left; font-weight: 400; }
.investigation-step:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: calc(100% - 2px); top: 35px; width: 20px; height: 2px; background: #aab5c0; }
.investigation-step.is-complete::after { background: #4b9a51; }
.riddle-investigation-editor .investigation-step[aria-current=step] { border-color: #efd3a1; background: #fcf6e9; }
.investigation-step-number { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid white; border-radius: 50%; background: linear-gradient(140deg, #b5b6b6, #787d83); box-shadow: 0 1px 6px #162d3d33; color: white; font-size: 26px; font-weight: 700; }
.investigation-step[aria-current=step] .investigation-step-number { border: 1px solid #dba83b; background: linear-gradient(135deg, #1c3d58, #081f32); }
.investigation-step.is-complete .investigation-step-number { background: linear-gradient(130deg, #71b56a, #2f7d39); }
.investigation-step-copy { display: grid; gap: 3px; line-height: 1.2; }
.investigation-step-copy small { color: var(--investigation-muted); font-size: 13px; }
.investigation-step-copy strong { font-size: 15px; }
.investigation-step-copy > span { margin-top: 5px; color: var(--investigation-muted); font-size: 13px; line-height: 1.3; }
.investigation-save-status { margin: 0; color: #29733b; font-size: 13px; }
.investigation-save-status:not(:empty) { padding-top: 10px; }
.investigation-phase { min-width: 0; margin-top: 18px; padding: 16px; border: 1px solid var(--investigation-border); border-radius: 12px; background: #ffffff70; }
.investigation-phase-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.investigation-phase-heading > div { flex: 1; }
.investigation-phase-heading h3 { margin: 2px 0 4px; color: var(--investigation-ink); font-size: 24px; }
.investigation-phase-heading p { margin: 0; color: var(--investigation-muted); font-size: 14px; line-height: 1.45; }
.investigation-phase-heading .riddle-creator-kicker { letter-spacing: .02em; font-size: 13px; color: #95600d; }
.investigation-emblem, .riddle-investigation-editor .riddle-document-preset-icon { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid #b49a57; border-radius: 11px; color: #ffcf60; background: linear-gradient(135deg, #20435a, #091f30); box-shadow: 0 4px 9px #132a4226; font-size: 23px; }
.riddle-investigation-editor .riddle-investigation-document-builder { display: block; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
.investigation-section-title { margin: 14px 0 8px; font-size: 15px; }
.riddle-investigation-editor .riddle-document-total-count { align-self: flex-start; padding: 11px 14px; border-radius: 8px; color: var(--investigation-ink); font-size: 13px; }
#riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.riddle-investigation-editor .riddle-document-preset-card { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "icon copy action"; gap: 12px; padding: 4px 12px 4px 4px; border: 1px solid #e6e9ed; border-radius: 10px; background: #fff; box-shadow: 0 5px 12px #172b4308; }
.riddle-document-preset-icon.is-illustrated,
.riddle-investigation-editor .riddle-document-preset-icon.is-illustrated { border: 0; border-radius: 0; background: none; box-shadow: none; }
.riddle-document-preset-icon.is-illustrated img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px #132a4226); }
.riddle-investigation-editor .riddle-document-preset-card .riddle-document-preset-icon.is-illustrated { width: 88px; height: 88px; }
.riddle-investigation-editor .riddle-document-preset-copy strong { color: var(--investigation-ink); font-size: 14px; }
.riddle-investigation-editor .riddle-document-preset-copy small { color: var(--investigation-muted); font-size: 13px; line-height: 1.2; }
.riddle-investigation-editor .riddle-document-preset-count { display: none; }
.riddle-investigation-editor .riddle-document-preset-card button { min-height: 40px; padding: 8px 14px; font-size: 13px; }
.investigation-document-workspace { display: grid; grid-template-columns: minmax(190px, 25%) minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 4px; }
.investigation-document-workspace.is-empty { grid-template-columns: 1fr; }
.investigation-document-workspace.is-empty .investigation-document-nav { display: none; }
.investigation-document-nav { display: grid; gap: 2px; min-width: 0; }
.investigation-document-nav-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; min-width: 0; }
.riddle-investigation-editor .investigation-document-item { display: flex; align-items: center; gap: 12px; min-width: 0; width: 100%; padding: 9px 12px; border-color: #e5e8ec; text-align: left; font-weight: 400; }
.investigation-document-item > span:last-child { display: grid; gap: 3px; min-width: 0; }
.investigation-document-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.investigation-document-item small { color: var(--investigation-muted); font-size: 12px; }
.riddle-investigation-editor .investigation-document-item .riddle-document-preset-icon { width: 35px; height: 35px; font-size: 18px; border-radius: 8px; }
.riddle-investigation-editor .investigation-document-item .riddle-document-preset-icon.is-illustrated { width: 48px; height: 48px; border-radius: 0; }
.riddle-investigation-editor .investigation-document-item[aria-pressed=true] { background: #fcf4e3; border-color: #daa74b; box-shadow: inset 2px 0 #d89b22; }
.riddle-investigation-editor .investigation-document-remove { width: 32px; height: 32px; border-radius: 8px; font-size: 20px !important; }
.riddle-investigation-editor .riddle-document-author-list { display: block; min-width: 0; }
.riddle-investigation-editor .riddle-document-author-card { margin: 0; padding: 14px 18px; border-color: #e4e7eb; border-radius: 10px; background: #fff; box-shadow: 0 5px 14px #172b4308; }
.riddle-investigation-editor .riddle-document-author-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0 0 14px;
    margin: 0;
    background: none;
}
.riddle-investigation-editor .riddle-document-author-card-header > .riddle-document-preset-icon { display: none; }
.riddle-investigation-editor .riddle-document-author-heading { min-width: 0; gap: 4px; overflow-wrap: anywhere; }
.riddle-investigation-editor .riddle-document-author-heading strong { font-size: 18px; }
.riddle-investigation-editor .riddle-document-author-card-header > .riddle-document-author-remove { flex: 0 0 auto; }
.riddle-investigation-editor .riddle-document-author-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px 24px;
    padding: 18px 0;
    border-bottom: 1px solid #edf0f3;
}
.riddle-investigation-editor .riddle-document-author-settings > :first-child { flex: 1 1 240px; max-width: 420px; }
.riddle-investigation-editor .riddle-document-author-fields { padding: 20px 0 4px; gap: 18px; align-items: start; }
.riddle-investigation-editor .riddle-document-author-field { min-width: 0; align-content: start; }
.riddle-investigation-editor .riddle-document-author-field.is-boolean { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 42px; }
.riddle-investigation-editor .riddle-document-author-field.is-boolean input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; }
.riddle-investigation-editor .riddle-document-author-field textarea { min-height: 144px; }
.riddle-investigation-editor .riddle-document-author-file-control:focus-within { outline: 3px solid #bb831f; outline-offset: 3px; }
.riddle-investigation-editor .riddle-creator-form label { color: var(--investigation-ink); font-size: 14px; }
.riddle-investigation-editor .riddle-creator-form input:not([type=checkbox]):not([type=radio]), .riddle-investigation-editor .riddle-creator-form textarea, .riddle-investigation-editor .riddle-creator-form select { border-color: #d5dee7; border-radius: 7px; background: #fff; color: var(--investigation-ink); font: 14px/1.4 Georgia, "Times New Roman", serif; }
.riddle-investigation-editor .riddle-creator-form input[type=checkbox] { accent-color: #c58c1b; }
.riddle-investigation-editor .riddle-document-author-policy { margin-bottom: 0; box-shadow: none; font-size: 12px; }
.investigation-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.investigation-review-card { min-width: 0; padding: 16px; border: 1px solid #e9e7e1; border-radius: 12px; background: #fff; box-shadow: 0 4px 10px #172b4305; }
.investigation-review-card:first-child { grid-row: span 2; }
.investigation-review-card h4 { margin: 0 0 12px; font-size: 20px; }
.investigation-check-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #edf0f3; }
.investigation-check-row .investigation-emblem { width: 40px; height: 40px; font-size: 21px; border-radius: 8px; }
.investigation-check-row strong, .investigation-check-row small { display: block; }
.investigation-check-row strong { font-size: 15px; }
.investigation-check-row small { margin-top: 4px; color: var(--investigation-muted); font-size: 13px; overflow-wrap: anywhere; }
.investigation-check-status { color: #95600d; font-size: 13px; white-space: nowrap; }
.investigation-check-status.is-complete { color: #287c36; }
.investigation-check-row button { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.investigation-preview-content { display: grid; grid-template-columns: minmax(100px, 32%) minmax(0, 1fr); gap: 20px; align-items: center; }
.investigation-preview-art { display: grid; place-items: center; min-height: 165px; border-radius: 9px; border: 1px solid #d7b567; background: radial-gradient(circle at 20% 20%, #3b6274, #102c40 75%); color: #edc56f; font-size: 74px; }
.investigation-preview-content h3 { margin: 0 0 10px; font-size: 27px; overflow-wrap: anywhere; }
.investigation-preview-content p { color: var(--investigation-muted); line-height: 1.45; overflow-wrap: anywhere; }
.investigation-preview-content small { color: var(--investigation-muted); }
.investigation-difficulty { display: inline-block; padding: 5px 14px; border-radius: 20px; background: #edf3f8; color: var(--investigation-ink); font-size: 13px; }
.investigation-preview-action { margin-top: 18px; width: 100%; }
.investigation-publication { grid-column: 2; }
.investigation-note { padding: 14px; border: 1px solid #f0dbb2; border-radius: 8px; background: #fff8e9; color: #6e582f; line-height: 1.5; font-size: 14px; }
.investigation-language { padding-block: 5px; color: var(--investigation-muted); }
.riddle-investigation-editor .riddle-creator-terms { padding: 12px; margin: 0; border-radius: 8px; background: #faf8f3; font-size: 13px; }
@media (max-width: 1400px) {
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .investigation-header-actions { max-width: 48%; }
    .investigation-check-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .investigation-check-status { grid-column: 2; grid-row: 2; }
    .investigation-check-row button { grid-column: 3; grid-row: 1 / span 2; }
}
@container investigation (max-width: 1400px) {
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .investigation-check-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .investigation-check-status { grid-column: 2; grid-row: 2; }
    .investigation-check-row button { grid-column: 3; grid-row: 1 / span 2; }
}
@container investigation (max-width: 1050px) {
    .riddle-investigation-editor .riddle-creator-surface-header { flex-direction: column; align-items: start; gap: 12px; }
    .investigation-header-actions { max-width: none; justify-content: flex-start; }
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .investigation-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .investigation-step::after { display: none; }
    .investigation-step-copy > span { display: none; }
    .investigation-review-grid { grid-template-columns: 1fr; }
    .investigation-publication { grid-column: 1; }
    .investigation-review-card:first-child { grid-row: auto; }
}
@container investigation (max-width: 520px) {
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: 1fr; }
    .investigation-document-workspace { grid-template-columns: 1fr; }
    .investigation-document-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
    .riddle-investigation-editor .riddle-creator-surface-header { align-items: start; flex-direction: column; gap: 12px; }
    .investigation-header-actions { max-width: none; justify-content: flex-start; }
    .investigation-steps { gap: 4px; padding: 8px; }
    .riddle-investigation-editor .investigation-step { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 8px; }
    .investigation-step-number { width: 36px; height: 36px; font-size: 21px; }
    .investigation-step::after { display: none; }
    .investigation-step-copy > span { display: none; }
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .investigation-review-grid { grid-template-columns: 1fr; }
    .investigation-publication { grid-column: 1; }
    .investigation-review-card:first-child { grid-row: auto; }
}
@media (max-width: 640px) {
    .riddle-investigation-editor { padding: 12px; }
    .investigation-header-actions { width: 100%; gap: 8px; }
    .investigation-header-actions button { flex: 1 1 auto; padding: 10px; }
    .investigation-header-actions .is-primary { flex-basis: 100%; }
    .investigation-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .investigation-step-copy strong { font-size: 13px; }
    .investigation-phase { padding: 12px; }
    .investigation-phase-heading { flex-wrap: wrap; gap: 10px; }
    .investigation-phase-heading h3 { font-size: 21px; }
    .investigation-phase-heading p { font-size: 13px; }
    .riddle-investigation-editor .riddle-document-total-count { margin-left: 56px; }
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: 1fr; }
    .investigation-document-workspace { grid-template-columns: 1fr; gap: 12px; }
    .investigation-document-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riddle-investigation-editor .investigation-document-item { padding: 8px; gap: 8px; }
    .investigation-check-row { gap: 8px; }
    .investigation-check-row button { padding: 8px; }
    .investigation-review-card { padding: 12px; }
    .investigation-preview-content { grid-template-columns: 1fr; }
    .investigation-preview-art { min-height: 120px; }
}
@container investigation (max-width: 680px) {
    #riddle-gallery-panel .riddle-investigation-editor .riddle-document-preset-grid { grid-template-columns: 1fr; }
}
@container investigation (max-width: 400px) {
    .riddle-investigation-editor .riddle-document-preset-card { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "icon copy" "icon action"; gap: 6px 12px; padding-block: 10px; }
    .riddle-investigation-editor .riddle-document-preset-card > button { justify-self: start; }
}
.riddle-dialogue-bubbles,
.riddle-dialogue-portraits {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(159, 113, 62, 0.3);
    border-radius: 12px;
}
.riddle-dialogue-hint { margin: 6px 0 12px; font-size: 0.9em; }
.riddle-dialogue-bubble-list { display: grid; gap: 12px; margin-bottom: 12px; }
.riddle-dialogue-bubble { display: flex; align-items: start; gap: 10px; }
.riddle-dialogue-bubble label { display: grid; gap: 6px; flex: 1; min-width: 0; }
.riddle-dialogue-bubble textarea { width: 100%; min-height: 80px; resize: vertical; box-sizing: border-box; }
.riddle-dialogue-portrait-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.riddle-dialogue-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
}
.riddle-dialogue-portrait:has(:checked) { border-color: #996a2c; background: rgba(159, 113, 62, 0.1); }
.riddle-dialogue-portrait:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
.riddle-dialogue-portrait img { width: 64px; height: 80px; object-fit: contain; }
.riddle-creator-form .riddle-dialogue-portrait input[type="radio"] { width: 16px; height: 16px; padding: 0; margin: 0; box-shadow: none; }
@media (max-width: 520px) {
    .riddle-dialogue-bubble { flex-direction: column; }
    .riddle-dialogue-bubble label { width: 100%; }
}


/* Compact chat panel and shared-plan chat action. */

.tab-chat:hover,
.tab-chat:focus-visible {
    color: #176b59;
}

.tab-chat-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.maphora-chat-panel {
    position: fixed;
    top: max(78px, var(--hud-panel-top));
    right: var(--hud-gap);
    z-index: 5550;
    display: grid;
    grid-template-rows: auto minmax(140px, 1fr) auto;
    width: min(390px, calc(100vw - (var(--hud-gap) * 2)));
    height: min(570px, calc(100dvh - 112px));
    min-height: 320px;
    overflow: hidden;
    border: 1px solid rgba(76, 58, 31, 0.2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.7), transparent 38%),
        linear-gradient(155deg, rgba(255, 252, 245, 0.99), rgba(244, 237, 224, 0.99));
    box-shadow:
        0 24px 58px rgba(20, 25, 20, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    color: var(--ink);
    pointer-events: auto;
}

.maphora-chat-panel.hidden {
    display: none;
}

.maphora-chat-panel.is-inline {
    position: relative;
    inset: auto;
    z-index: auto;
    width: 100%;
    height: min(520px, 58dvh);
    min-height: 360px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(20, 25, 20, 0.12);
}

.maphora-chat-panel.is-inline .maphora-chat-header-actions {
    display: none;
}

.maphora-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px 16px;
    border-bottom: 1px solid rgba(78, 59, 31, 0.11);
}

.maphora-chat-header > div:first-child {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.maphora-chat-header span:first-child {
    color: #247461;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.maphora-chat-header strong {
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maphora-chat-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.maphora-chat-history {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px 6px;
    scrollbar-color: rgba(64, 91, 76, 0.34) transparent;
    scrollbar-width: thin;
}

.maphora-chat-messages {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.maphora-chat-message {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 8px;
    border-radius: 13px;
}

.maphora-chat-message:hover,
.maphora-chat-message:focus-within {
    background: rgba(255, 255, 255, 0.52);
}

.maphora-chat-message.is-own {
    background: rgba(43, 119, 97, 0.065);
}

.maphora-chat-avatar {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(71, 58, 37, 0.13);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    object-fit: cover;
}

.maphora-chat-message-main {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.maphora-chat-message-meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.maphora-chat-message-meta strong {
    overflow: hidden;
    color: rgba(40, 34, 24, 0.92);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maphora-chat-message-meta time {
    color: rgba(68, 57, 40, 0.48);
    font-size: 0.64rem;
}

.maphora-chat-message-content {
    overflow-wrap: anywhere;
    color: rgba(45, 39, 29, 0.86);
    font-size: 0.8rem;
    line-height: 1.38;
}

.maphora-chat-message-image-wrap {
    width: min(100%, 260px);
    margin: 2px 0;
}

.maphora-chat-message-image,
.maphora-chat-image-placeholder {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.maphora-chat-message-image {
    max-height: 240px;
    border: 1px solid rgba(71, 58, 37, 0.13);
    background: rgba(255, 255, 255, 0.7);
    object-fit: contain;
}

.maphora-chat-message-image[hidden] {
    display: none;
}

.maphora-chat-image-placeholder {
    min-height: 72px;
    padding: 24px 12px;
    background: rgba(36, 116, 97, 0.06);
    color: rgba(62, 52, 37, 0.58);
    font-size: 0.7rem;
    text-align: center;
}

.maphora-chat-coordinate-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 5px;
    border: 1px solid rgba(31, 108, 87, 0.25);
    border-radius: 999px;
    background: rgba(39, 126, 101, 0.09);
    color: #176b59;
    font-weight: 750;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.maphora-chat-coordinate-link::before {
    width: 6px;
    height: 6px;
    border: 1.5px solid currentColor;
    border-radius: 50% 50% 50% 0;
    content: "";
    transform: rotate(-45deg);
}

.maphora-chat-coordinate-link:hover,
.maphora-chat-coordinate-link:focus-visible {
    border-color: rgba(23, 107, 89, 0.55);
    background: rgba(39, 126, 101, 0.17);
    outline: none;
    transform: translateY(-1px);
}

.maphora-chat-coordinate-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(39, 126, 101, 0.16);
}

.maphora-chat-challenge-link {
    color: #176b59;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.maphora-chat-challenge-preview {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 9px;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid rgba(31, 108, 87, 0.22);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.62);
    color: inherit;
    text-decoration: none;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.maphora-chat-challenge-preview:hover,
.maphora-chat-challenge-preview:focus-visible {
    border-color: rgba(23, 107, 89, 0.5);
    background: rgba(255, 255, 255, 0.88);
    outline: none;
    transform: translateY(-1px);
}

.maphora-chat-challenge-preview > img,
.maphora-chat-challenge-preview-placeholder {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    background: rgba(39, 126, 101, 0.1);
    color: #176b59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 800;
    object-fit: cover;
}

.maphora-chat-challenge-preview > span:last-child {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 7px 9px 7px 0;
}

.maphora-chat-challenge-preview small,
.maphora-chat-challenge-preview em {
    color: rgba(31, 102, 84, 0.78);
    font-size: 0.61rem;
    font-style: normal;
    font-weight: 750;
}

.maphora-chat-challenge-preview strong {
    overflow: hidden;
    color: rgba(40, 34, 24, 0.94);
    font-size: 0.74rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maphora-chat-message.is-deleted .maphora-chat-message-content {
    color: rgba(68, 57, 40, 0.48);
    font-size: 0.72rem;
}

.maphora-chat-reply-preview {
    display: grid;
    gap: 1px;
    overflow: hidden;
    padding: 5px 7px;
    border-left: 2px solid rgba(36, 116, 97, 0.5);
    border-radius: 0 7px 7px 0;
    background: rgba(36, 116, 97, 0.055);
    font-size: 0.66rem;
}

.maphora-chat-reply-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maphora-chat-message-actions {
    display: flex;
    gap: 8px;
    min-height: 15px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.maphora-chat-message:hover .maphora-chat-message-actions,
.maphora-chat-message:focus-within .maphora-chat-message-actions {
    opacity: 1;
}

.maphora-chat-message-actions button,
.maphora-chat-older {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(31, 102, 84, 0.8);
    cursor: pointer;
    font: inherit;
    font-size: 0.64rem;
    font-weight: 700;
}

.maphora-chat-older {
    display: block;
    margin: 2px auto 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(40, 114, 94, 0.08);
}

.maphora-chat-status,
.maphora-chat-empty {
    padding: 24px 18px;
    color: rgba(62, 52, 37, 0.6);
    font-size: 0.76rem;
    line-height: 1.4;
    text-align: center;
}

.maphora-chat-composer {
    display: grid;
    gap: 7px;
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(78, 59, 31, 0.11);
    background: rgba(255, 253, 248, 0.66);
}

.maphora-chat-composer-input {
    position: relative;
}

.maphora-chat-composer textarea {
    width: 100%;
    min-height: 54px;
    max-height: 118px;
    resize: vertical;
    padding: 9px 10px 38px;
    border: 1px solid rgba(73, 60, 39, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--ink);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.35;
}

.maphora-chat-composer-tools {
    position: absolute;
    bottom: 7px;
    left: 7px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.maphora-chat-composer-tools button {
    display: inline-grid;
    width: 27px;
    height: 27px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(39, 82, 68, 0.72);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
}

.maphora-chat-composer-tools button:hover,
.maphora-chat-composer-tools button:focus-visible,
.maphora-chat-composer-tools button[aria-pressed="true"] {
    background: rgba(35, 119, 96, 0.11);
    color: #176b59;
    outline: none;
}

.maphora-chat-composer-tools button:focus-visible {
    box-shadow: 0 0 0 2px rgba(35, 119, 96, 0.18);
}

.maphora-chat-composer-tools button:disabled {
    cursor: default;
    opacity: 0.35;
}

.maphora-chat-composer-tools svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.maphora-chat-emoji-picker {
    position: absolute;
    bottom: 40px;
    left: 6px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 30px);
    gap: 3px;
    padding: 7px;
    border: 1px solid rgba(73, 60, 39, 0.16);
    border-radius: 12px;
    background: rgba(255, 253, 248, 0.98);
    box-shadow: 0 12px 28px rgba(28, 35, 29, 0.2);
}

.maphora-chat-emoji-picker button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
}

.maphora-chat-emoji-picker button:hover,
.maphora-chat-emoji-picker button:focus-visible {
    background: rgba(35, 119, 96, 0.1);
    outline: none;
}

body.maphora-chat-coordinate-pick-active .map,
body.maphora-chat-coordinate-pick-active #map,
body.maphora-chat-coordinate-pick-active .map canvas,
body.maphora-chat-coordinate-pick-active #map canvas,
body.maphora-chat-coordinate-pick-active .maplibregl-canvas {
    cursor: crosshair !important;
}

.maphora-chat-composer textarea:focus {
    border-color: rgba(35, 119, 96, 0.48);
    box-shadow: 0 0 0 3px rgba(35, 119, 96, 0.1);
    outline: none;
}

.maphora-chat-replying,
.maphora-chat-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.maphora-chat-replying {
    padding: 5px 8px;
    border-radius: 9px;
    background: rgba(35, 119, 96, 0.08);
    color: rgba(40, 73, 60, 0.8);
    font-size: 0.67rem;
}

.maphora-chat-replying button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.maphora-chat-composer-foot small {
    color: rgba(68, 57, 40, 0.48);
    font-size: 0.62rem;
}

.maphora-chat-composer-foot > button {
    min-height: 30px;
    padding: 6px 13px;
    border: 1px solid rgba(26, 95, 77, 0.28);
    border-radius: 10px;
    background: linear-gradient(180deg, #368f76, #23715d);
    box-shadow: 0 5px 12px rgba(27, 91, 73, 0.18);
    color: #fffdf8;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
}

.maphora-chat-composer-foot > button:disabled,
.maphora-chat-composer textarea:disabled {
    cursor: default;
    opacity: 0.5;
}

@media (max-width: 640px) {
    .maphora-chat-panel:not(.is-inline) {
        inset: auto 8px 8px;
        width: auto;
        height: min(72dvh, 570px);
        border-radius: 18px;
    }

    .maphora-chat-panel.is-inline {
        height: min(520px, 68dvh);
        min-height: 340px;
    }

    .maphora-chat-message-actions {
        opacity: 1;
    }
}


.fl-editor{--fl-ink:#192c3c;--fl-line:#a6b3bb;--fl-accent:#075fa8;display:flex;flex-direction:column;min-width:0;color:var(--fl-ink);background:#edf0f2;font:14px/1.4 system-ui,sans-serif;border:1px solid var(--fl-line);border-radius:8px;isolation:isolate}
.fl-editor *{box-sizing:border-box}.fl-toolbar,.fl-properties,.fl-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;background:#fff;border-bottom:1px solid var(--fl-line)}
.fl-editor button,.fl-editor input,.fl-editor select{font:inherit;color:inherit;min-height:40px;border:1px solid var(--fl-line);border-radius:5px;background:#fff;padding:7px 10px;max-width:100%}
.fl-editor button{cursor:pointer}.fl-editor button:disabled{opacity:.45;cursor:default}.fl-editor button[aria-pressed=true],.fl-pages button[aria-current=page]{background:#dcefff;border-color:var(--fl-accent)}
.fl-editor :focus-visible{outline:3px solid #096ebc;outline-offset:2px}.fl-editor label{display:flex;align-items:center;gap:5px}.fl-editor label input[type=number]{width:85px}.fl-editor label input[type=checkbox]{min-height:24px;width:24px}
.fl-workspace{position:relative;overflow:auto;padding:28px;min-height:360px;max-height:80vh;overscroll-behavior-x:contain}.fl-page-slot{position:relative;margin:auto}.fl-page{position:relative;transform-origin:top left;box-shadow:0 5px 18px #253c4930}
.fl-artwork{position:absolute;inset:0;pointer-events:none}.fl-artwork>svg{display:block;width:100%;height:100%}.fl-block{position:absolute;transform-origin:center;border:1px solid transparent;outline:none}
.fl-block[data-selected=true]{border-color:#0876cf}.fl-block[data-overflow=true]{outline:2px dashed #b62720}.fl-block:focus-visible{outline:2px solid #0876cf}
.fl-text-editor{position:absolute;inset:0;color:transparent;-webkit-text-fill-color:transparent;caret-color:#0876cf;outline:none;white-space:pre;cursor:text;overflow:visible}
.fl-text-editor::selection,.fl-text-editor *::selection{background:#3b9feb55;color:transparent}.fl-text-editor[data-empty=true]::before{content:attr(data-placeholder);color:#54606d;-webkit-text-fill-color:#54606d;font:14px/1.5 system-ui,sans-serif;opacity:.85}
.fl-handle{position:absolute!important;min-height:26px!important;min-width:26px;padding:1px!important;touch-action:none;z-index:3;background:#fff!important;border:2px solid #0876cf!important;color:#075fa8!important}
.fl-move{left:-14px;top:-28px;cursor:move!important}.fl-resize{right:-14px;bottom:-14px;cursor:nwse-resize!important}.fl-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#1976b820 1px,transparent 1px),linear-gradient(90deg,#1976b820 1px,transparent 1px);background-size:1% 1%}
.fl-status{display:flex;gap:10px;align-items:center;padding:10px;min-height:42px;background:#fff}.fl-errors{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#9c211c;background:#fff2ea}.fl-errors>span{flex:1}.fl-errors .fl-cut-overflow{min-height:32px;padding:4px 9px;margin-left:auto;border-color:#c76a5c;color:#861d18;white-space:nowrap}.fl-errors:empty{display:none}.fl-properties:empty{display:none}
.fl-pages{overflow-x:hidden;flex-wrap:wrap}.fl-pages button{flex:0 0 auto}.fl-page-tab{position:relative;flex:0 0 auto}.fl-page-selector[draggable=true]{cursor:grab}.fl-page-selector[draggable=true]:active{cursor:grabbing}.fl-page-tab[data-dragging=true]{opacity:.55}.fl-page-tab[data-drop-position]::after{content:"";position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:var(--fl-accent);z-index:3}.fl-page-tab[data-drop-position=before]::after{left:-5px}.fl-page-tab[data-drop-position=after]::after{right:-5px}.fl-page-delete{position:absolute;top:3px;right:3px;z-index:2;display:grid;place-items:center;min-width:28px!important;min-height:28px!important;width:28px;height:28px;padding:0!important;border-radius:50%!important;background:#fff!important;color:#8f1f1a!important;font-size:20px!important;line-height:1!important;opacity:0;pointer-events:none;transition:opacity .12s ease,background-color .12s ease}.fl-page-tab:hover>.fl-page-delete,.fl-page-tab:focus-within>.fl-page-delete{opacity:1;pointer-events:auto}.fl-page-delete:hover{background:#fff0ee!important}.fl-pages svg{height:62px;width:auto;display:block;margin:0 auto 4px;pointer-events:none}.fl-layers{display:flex;gap:6px;flex-wrap:wrap;padding:8px}.fl-layers:empty{display:none}
.fl-layers[hidden],.fl-status[hidden]{display:none}
.fl-dialog{padding:18px;border:1px solid var(--fl-line);border-radius:8px;max-width:min(92vw,500px);color:var(--fl-ink);background:#fff}.fl-dialog form{display:grid;gap:12px}.fl-dialog label{display:grid;gap:6px}.fl-dialog input,.fl-dialog textarea{width:100%;font:inherit;padding:8px}.fl-dialog::backdrop{background:#172c3c66}
@media(max-width:640px){.fl-toolbar,.fl-properties{gap:6px;padding:8px}.fl-editor button{min-height:44px}.fl-workspace{padding:25px 18px;max-height:65vh}.fl-properties label{font-size:12px}.fl-properties label input[type=number]{width:72px}.fl-pages svg{height:44px}.fl-handle{min-height:38px!important;min-width:38px}.fl-move{top:-38px;left:-18px}.fl-resize{right:-18px;bottom:-18px}}
.fl-accessible-master{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.fl-runtime-preview{width:96vw;height:94vh;max-width:none;max-height:none;padding:12px;border:1px solid #b8c5d0;border-radius:10px;background:#e8edf0;color:#152a3d;overflow:hidden}
.fl-runtime-preview::backdrop{background:#152a3daa}.fl-runtime-preview>button{min-height:44px;position:relative;z-index:2}.fl-runtime-host{height:calc(100% - 48px);width:100%;position:relative;isolation:isolate}
.fl-guide{position:absolute;pointer-events:none;z-index:9000;border-color:#0876cf99;border-style:dashed;border-width:0}.fl-guide-x{top:0;bottom:0;border-left-width:1px}.fl-guide-y{left:0;right:0;border-top-width:1px}
.fl-spread{display:flex;width:max-content;margin:auto;align-items:flex-start}.fl-spread>.fl-page-slot{flex:none;margin:0}.fl-page{isolation:isolate}.fl-page[data-active=true]{outline:2px solid var(--fl-accent);outline-offset:3px}.fl-page-blank{background:#faf6eb}
.fl-selection-frame{position:absolute;pointer-events:none;transform-origin:center;z-index:10000;border:1px solid #0876cf}.fl-selection-frame>.fl-handle{pointer-events:auto}.fl-layers button{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.event-graph-editor{--eg-bg:#111e30;--eg-card:#203149;--eg-text:#f3f5f7;--eg-line:#e4bd58;--eg-input:#62d99a;--eg-output:#72aef8;--eg-shell-text:#172b43;color:var(--eg-shell-text);background:radial-gradient(circle at 8% 0,#f8dc9c52,transparent 34rem),linear-gradient(145deg,#fffefb,#f8f0df);border:1px solid #d9b765;border-radius:16px;padding:clamp(16px,2vw,24px);min-width:0;max-width:100%;margin-block:16px;overflow-wrap:anywhere;box-shadow:inset 0 1px #fff,0 14px 34px #172b4312;font:14px/1.5 system-ui,sans-serif}
.event-graph-editor,.event-graph-editor *{box-sizing:border-box}.event-graph-editor h3{margin:0 0 12px}.event-graph-editor label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.event-graph-editor select,.event-graph-editor input{color:var(--eg-text);background:var(--eg-bg);border:1px solid #67768d;border-radius:5px;padding:6px;max-width:100%}.event-graph-editor button{cursor:pointer;color:var(--eg-text);background:var(--eg-card);border:1px solid #67768d;border-radius:6px;padding:6px 10px}.event-graph-editor button:disabled{opacity:.45;cursor:default}.event-graph-editor :focus-visible{outline:2px solid #b67a0b;outline-offset:3px}.event-graph-help{color:#536278}.event-graph-status[data-valid=false]{color:#8b5411}.event-graph-status[data-valid=true]{color:#19633d}
.event-graph-activation{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,340px);grid-template-areas:"icon copy toggle" "icon benefits toggle";gap:14px 18px;align-items:center;padding:clamp(16px,2vw,22px);border:1px solid #e6cf9d;border-radius:14px;background:#fffdf9d9;box-shadow:0 8px 22px #172b430d}.event-graph-activation-icon{grid-area:icon;display:grid;place-items:center;align-self:start;width:46px;height:46px;border:1px solid #ddb556;border-radius:14px;color:#f5c84b;background:linear-gradient(145deg,#1c3855,#0d2238);box-shadow:0 7px 16px #132b4433;font-size:22px}.event-graph-activation-copy{grid-area:copy;min-width:0}.event-graph-activation-eyebrow{display:block;margin-bottom:3px;color:#966313;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.event-graph-activation .event-graph-activation-copy h3{margin:0;color:#172b43;font-size:20px;line-height:1.2}.event-graph-activation-description{max-width:64ch;margin:6px 0 0;color:#536278;font-size:14px}.event-graph-activation-benefits{grid-area:benefits;display:flex;gap:9px 18px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.event-graph-activation-benefits li{display:flex;align-items:flex-start;gap:8px;flex:1 1 220px;min-width:0}.event-graph-benefit-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:50%;color:#9a6712;background:#f8e8bf;font-size:13px;font-weight:800}.event-graph-activation-benefits li>span:last-child,.event-graph-activation-benefits strong,.event-graph-activation-benefits small{display:block}.event-graph-activation-benefits strong{color:#223a54;font-size:12px}.event-graph-activation-benefits small{margin-top:1px;color:#667487;font-size:11px;line-height:1.35}.event-graph-toggle{grid-area:toggle;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:12px!important;align-self:stretch;align-content:center;min-width:0;padding:14px 15px;border:1px solid #2d4a68;border-radius:12px;color:#fff;background:linear-gradient(145deg,#173552,#0c2137);box-shadow:0 8px 18px #132b4426;cursor:pointer}.event-graph-toggle:hover{border-color:#d9ac40;box-shadow:0 10px 22px #132b4438}.event-graph-toggle-copy,.event-graph-toggle-copy strong,.event-graph-toggle-copy small{display:block;min-width:0}.event-graph-toggle-copy strong{font-size:13px;line-height:1.3}.event-graph-toggle-copy small{margin-top:4px;color:#c5d1de;font-size:11px;line-height:1.35}.event-graph-toggle-input{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}.event-graph-toggle-track{position:relative;display:block;flex:0 0 auto;width:54px;height:30px;border:1px solid #8292a4;border-radius:999px;background:#354b62;box-shadow:inset 0 2px 5px #08172880;transition:background .18s,border-color .18s}.event-graph-toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #07152280;transition:transform .18s}.event-graph-toggle-input:checked+.event-graph-toggle-track{border-color:#f2c85c;background:linear-gradient(90deg,#c8870d,#efb72f)}.event-graph-toggle-input:checked+.event-graph-toggle-track::after{transform:translateX(24px)}.event-graph-toggle-input:focus-visible+.event-graph-toggle-track{outline:3px solid #f2c85c;outline-offset:3px}
.event-graph-toggle{position:relative}.event-graph-toggle-input{position:absolute!important;z-index:2;inset:0;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:inherit!important;overflow:visible!important;clip:auto!important;clip-path:none!important;opacity:0;white-space:normal!important;cursor:pointer}
.event-graph-workbench{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;border:1px solid #43546a;border-radius:8px;overflow:hidden;color:var(--eg-text);background:#101c2c}.event-graph-palette{display:flex;align-items:center;gap:14px;min-width:0;padding:9px 11px;border-bottom:1px solid #43546a;background:#17253a}.event-graph-palette-heading{flex:0 0 auto}.event-graph-palette-heading h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.event-graph-palette-heading p{margin:2px 0 0;color:#aebed0;font-size:11px}.event-graph-palette-list{display:flex;align-items:stretch;gap:7px;min-width:0;overflow-x:auto;scrollbar-width:thin}.event-graph-palette-item{display:grid;grid-template-columns:auto;align-content:center;flex:0 0 auto;min-width:138px;max-width:220px;min-height:44px;padding:5px 9px!important;text-align:left;cursor:grab!important}.event-graph-palette-item:active{cursor:grabbing!important}.event-graph-palette-item strong,.event-graph-palette-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-graph-palette-item strong{font-size:12px}.event-graph-palette-item small{color:#aebed0;font-size:10px}.event-graph-palette-item[data-kind=zone]{border-color:#8e70d1}.event-graph-palette-empty{align-self:center;margin:0;color:#aebed0;font-size:11px}.event-graph-palette[data-dragging=true]{border-bottom-color:var(--eg-output)}
.event-graph-viewport{position:relative;overflow:hidden;width:100%;max-height:620px;border:0;overscroll-behavior:contain;scrollbar-width:none;touch-action:none;cursor:grab}.event-graph-viewport::-webkit-scrollbar{width:0;height:0;display:none}.event-graph-viewport[data-panning=true]{cursor:grabbing}.event-graph-viewport[data-drop-target=true]{box-shadow:inset 0 0 0 2px var(--eg-output)}.event-graph-canvas{position:relative;min-width:100%;background-color:#101c2c;background-image:radial-gradient(#44536a 1px,transparent 1px);background-position:var(--event-graph-grid-x,0) var(--event-graph-grid-y,0);background-size:var(--event-graph-grid-size,20px) var(--event-graph-grid-size,20px)}.event-graph-plane{position:absolute;inset:0 auto auto 0;transform-origin:0 0}.event-graph-plane>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}.event-graph-wire{stroke:var(--eg-line);stroke-width:3;fill:none;filter:drop-shadow(0 1px 2px #0008);pointer-events:none}.event-graph-wire[data-selected=true]{stroke:#fff0a6;stroke-width:5}.event-graph-wire--pending{stroke:#f2cf74;stroke-dasharray:9 7;animation:event-graph-flow 1s linear infinite}.event-graph-wire--preview{stroke:var(--eg-output);stroke-dasharray:7 6}.event-graph-wire-hit{stroke:transparent;stroke-width:18;fill:none;pointer-events:stroke;cursor:pointer}.event-graph-wire-hit:focus-visible{stroke:#fff4b044;outline:none}@keyframes event-graph-flow{to{stroke-dashoffset:-16}}
.event-graph-node{position:absolute;z-index:3;box-sizing:border-box;width:250px;background:var(--eg-card);border:1px solid #667a96;border-radius:9px;padding:7px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:5px 12px;box-shadow:0 7px 22px #0005;cursor:default}.event-graph-node[data-port-sides=both]{width:420px}.event-graph-node[data-selected=true]{border-color:#fff0a6;box-shadow:0 0 0 2px #fff0a633,0 7px 22px #0005}.event-graph-node[data-kind=start],.event-graph-node[data-kind=player],.event-graph-node[data-kind=end]{border-color:var(--eg-line)}.event-graph-node[data-kind=zone]{border-color:#a887f6}.event-graph-node[data-selected=true][data-kind=start],.event-graph-node[data-selected=true][data-kind=player],.event-graph-node[data-selected=true][data-kind=end]{box-shadow:0 0 0 2px #e4bd5844,0 7px 22px #0005}.event-graph-node[data-selected=true][data-kind=zone]{box-shadow:0 0 0 2px #a887f644,0 7px 22px #0005}.event-graph-node .event-graph-node-heading{grid-column:1/-1;font-weight:700;cursor:grab;touch-action:none;border:0;text-align:center;padding:4px 6px;background:#182a42}.event-graph-node .event-graph-node-heading:active{cursor:grabbing}.event-graph-zone-fields{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px;border:1px solid #52657e;border-radius:6px;background:#17263b}.event-graph-zone-fields label{display:grid;font-size:10px;color:#c8d5e4}.event-graph-zone-fields input{width:100%;padding:4px}.event-graph-ports{display:grid;align-content:start;gap:2px;min-width:0}.event-graph-ports--inputs{grid-column:1}.event-graph-ports--outputs{grid-column:2}.event-graph-node[data-port-sides=inputs] .event-graph-ports--inputs,.event-graph-node[data-port-sides=outputs] .event-graph-ports--outputs{grid-column:1/-1}.event-graph-ports h4{margin:1px 3px;color:#c8d5e4;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.event-graph-port{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:26px;gap:4px}.event-graph-port-content{display:grid;min-width:0;flex:1;gap:0}.event-graph-port-label{font-size:11px;line-height:1.2;overflow-wrap:anywhere}.event-graph-port-item{color:#aebed0;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-graph-port select{width:100%;padding:2px 4px;font-size:10px}
.event-graph-socket{position:relative;z-index:4;flex:0 0 15px;width:15px;height:15px;padding:0!important;border:2px solid currentColor!important;border-radius:50%!important;background:#111e30!important;touch-action:none}.event-graph-socket[data-direction=inputs]{color:var(--eg-input);margin-left:-15px}.event-graph-socket[data-direction=outputs]{color:var(--eg-output);margin-right:-15px}.event-graph-socket:hover,.event-graph-socket[data-selected=true],.event-graph-socket[data-drop-target=true]{background:currentColor!important;box-shadow:0 0 0 3px #ffffff26}.event-graph-socket[data-compatible=true]:not([data-selected=true]){box-shadow:0 0 0 2px #62d99a2e}.event-graph-node[data-kind=start] .event-graph-socket,.event-graph-node[data-kind=player] .event-graph-socket,.event-graph-node[data-kind=end] .event-graph-socket{color:var(--eg-line)}.event-graph-node[data-kind=zone] .event-graph-socket{color:#a887f6}
.event-graph-edge-editor{position:absolute;z-index:6;inset:10px 10px auto auto;display:grid;gap:7px;width:min(280px,calc(100% - 20px));padding:10px;border:1px solid var(--eg-line);border-radius:8px;background:#17253af2;box-shadow:0 8px 24px #0007;cursor:default}.event-graph-edge-editor h4,.event-graph-edge-editor p{margin:0}.event-graph-edge-editor p{color:#c8d5e4;font-size:11px;overflow-wrap:anywhere}.event-graph-edge-editor label{display:grid}.event-graph-edge-editor input[type=number],.event-graph-edge-editor select{width:100%}
@media (max-width:840px){.event-graph-activation{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon copy" "benefits benefits" "toggle toggle"}.event-graph-toggle{min-height:76px}}
@media (max-width:640px){.event-graph-editor{padding:10px}.event-graph-activation{grid-template-columns:1fr;grid-template-areas:"icon" "copy" "benefits" "toggle";gap:12px}.event-graph-activation-icon{width:40px;height:40px}.event-graph-activation-benefits{display:grid}.event-graph-toggle{grid-template-columns:minmax(0,1fr) auto;padding:13px}.event-graph-palette{align-items:flex-start;flex-direction:column;gap:6px}.event-graph-palette-heading p{margin:0}.event-graph-palette-list{width:100%}.event-graph-viewport{max-height:520px}.event-graph-edge-editor{inset:auto 8px 8px}.event-graph-node{width:220px}.event-graph-node[data-port-sides=both]{width:360px}.event-graph-zone-fields{grid-template-columns:1fr}.event-graph-socket[data-direction=inputs]{margin-left:-13px}.event-graph-socket[data-direction=outputs]{margin-right:-13px}}
@media (prefers-reduced-motion:reduce){.event-graph-wire--pending{animation:none}}
.event-graph-palette-item[data-kind=do-once],.event-graph-node[data-kind=do-once]{border-color:var(--eg-line)}.event-graph-node[data-selected=true][data-kind=do-once]{box-shadow:0 0 0 2px #e4bd5844,0 7px 22px #0005}.event-graph-node[data-kind=do-once] .event-graph-socket{color:var(--eg-line)}


/* Investigation phase: ivory authoring controls around the navy graph. */
.riddle-investigation-editor .event-graph-editor { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 520px; min-height: 420px; resize: vertical; overflow: hidden; margin: 0; padding: 0 0 14px; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: Georgia, "Times New Roman", serif; }
.riddle-investigation-editor .event-graph-editor::-webkit-resizer { background: linear-gradient(135deg, transparent 45%, #b49a57 46% 53%, transparent 54% 65%, #b49a57 66% 73%, transparent 74%); }
.riddle-investigation-editor [data-investigation-phase="3"] { position: relative; }
.riddle-investigation-editor [data-investigation-phase="3"] > .investigation-phase-heading { min-height: 0; padding-right: 0; }
.riddle-investigation-editor .event-graph-activation { display: none; }
.riddle-investigation-editor .event-graph-help { margin: 8px 0; font-size: 12px; }
.riddle-investigation-editor .event-graph-status { margin: 8px 0; font-size: 12px; }
.riddle-investigation-editor .event-graph-viewport { flex: 1; min-height: 0; max-height: none; }
.riddle-investigation-editor .event-graph-workbench { display: flex; flex-direction: column; flex: 1; min-height: 0; border-color: #dfd6c6; border-radius: 10px; }
.riddle-investigation-editor .event-graph-palette { flex-shrink: 0; }
.riddle-investigation-editor .event-graph-palette { display: grid; gap: 10px; padding: 12px; color: #123354; background: #fffdf8; border-bottom-color: #dfd6c6; }
.riddle-investigation-editor .event-graph-palette-heading { display: flex; align-items: baseline; gap: 20px; }
.riddle-investigation-editor .event-graph-palette-heading h4 { font-size: 14px; text-transform: none; letter-spacing: 0; }
.riddle-investigation-editor .event-graph-palette-heading p { color: #526d8b; font-size: 12px; }
.riddle-investigation-editor .event-graph-palette-list { padding-bottom: 4px; }
.riddle-investigation-editor .event-graph-palette-item { position: relative; min-width: 170px; min-height: 58px; padding: 10px 12px 10px 56px !important; border-color: #e4e7ec; background: #fff; color: #123354; box-shadow: 0 4px 9px #132a420a; }
.riddle-investigation-editor .event-graph-palette-item::before { content: "◇"; position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #b49a57; border-radius: 8px; background: linear-gradient(135deg, #20435a, #091f30); color: #ffcf60; font-size: 20px; }
.riddle-investigation-editor .event-graph-palette-item[data-kind=document]::before { content: "▤"; }
.riddle-investigation-editor .event-graph-palette-item[data-kind=zone]::before { content: "⌖"; }
.riddle-investigation-editor .event-graph-palette-item[data-kind=do-once]::before { content: "⑴"; }
.riddle-investigation-editor .event-graph-palette-item small { color: #526d8b; }
.riddle-investigation-editor .event-graph-palette-item[data-kind=document] small { display: none; }
.riddle-investigation-editor .event-graph-canvas { min-height: 100%; background-color: #0d2235; background-image: radial-gradient(#426078 1px, transparent 1px); }
.riddle-investigation-editor .event-graph-node { --eg-card: #1b3348; --eg-line: #e4bd58; border-width: 2px; border-color: #49b4f5; border-radius: 10px; color: #edf5ff; }
.riddle-investigation-editor .event-graph-node[data-kind=start], .riddle-investigation-editor .event-graph-node[data-kind=player], .riddle-investigation-editor .event-graph-node[data-kind=end] { border-color: #60b36c; }
.riddle-investigation-editor .event-graph-node[data-kind=zone], .riddle-investigation-editor .event-graph-node[data-kind=do-once] { border-color: #e4bd58; }
.riddle-investigation-editor .event-graph-node .event-graph-node-heading { color: #edf5ff; background: #162e43; font-size: 13px; }
.riddle-investigation-editor .event-graph-node button { min-height: 0; }
.riddle-investigation-editor .event-graph-socket { min-width: 15px; min-height: 15px; box-shadow: none; }
.riddle-investigation-editor .event-graph-editor .event-graph-node select, .riddle-investigation-editor .event-graph-editor .event-graph-node input, .riddle-investigation-editor .event-graph-edge-editor select, .riddle-investigation-editor .event-graph-edge-editor input { color: #f3f5f7; background: #111e30; border-color: #67768d; font-family: inherit; }
@media (max-width: 700px) {
    .riddle-investigation-editor .event-graph-palette-heading { display: block; }
}
@container investigation (max-width: 850px) {
    .riddle-investigation-editor [data-investigation-phase="3"] > .investigation-phase-heading { min-height: 0; padding-right: 0; }
}


/* Riddle detail pane and gallery responsive adaptations. */
.riddle-detail-card {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-rows: 240px minmax(0, 1fr);
}

.riddle-detail-card-photo-challenge {
    grid-template-rows: 320px minmax(0, 1fr);
}

.riddle-detail-image-shell {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(231, 200, 116, 0.18), rgba(231, 200, 116, 0) 42%),
        linear-gradient(180deg, rgba(49, 34, 23, 0.92), rgba(28, 20, 14, 0.96));
}

.riddle-detail-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.riddle-detail-valid-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    color: var(--riddle-illustration-green);
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 10px rgba(106, 244, 75, 0.42));
    pointer-events: none;
}

.riddle-detail-valid-icon-svg {
    width: 100%;
    height: 100%;
}

.riddle-detail-in-progress-icon {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    color: #58d7ff;
    filter:
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 10px rgba(78, 204, 246, 0.44));
    pointer-events: none;
}

.riddle-detail-in-progress-icon-svg {
    width: 100%;
    height: 100%;
}

.riddle-detail-card-photo-challenge .riddle-detail-image {
    object-fit: cover;
    object-position: center;
}

.riddle-detail-body {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    overflow: auto;
    background:
        linear-gradient(180deg, rgba(243, 228, 196, 0.98), rgba(230, 206, 161, 0.98)),
        rgba(241, 226, 193, 0.98);
}

.riddle-detail-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.riddle-detail-section-kicker {
    color: rgba(104, 79, 52, 0.82);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.riddle-detail-header-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(124, 89, 53, 0.06);
    border: 1px solid rgba(94, 64, 34, 0.13);
    color: rgba(71, 46, 23, 0.76);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.riddle-detail-title {
    position: relative;
    margin-bottom: 3px;
    padding-bottom: 14px;
    color: var(--riddle-ink);
    font-size: 1.78rem;
    font-weight: 700;
    line-height: 1.15;
}

.riddle-detail-title::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: min(168px, 76%);
    height: 1px;
    background: linear-gradient(90deg, #b87916, #e2b84f 50%, #b87916);
}

.riddle-detail-title::before {
    content: "◆";
    position: absolute;
    z-index: 1;
    bottom: -1px;
    left: min(80px, 37%);
    color: #c58a22;
    font-size: 8px;
    line-height: 1;
    text-shadow: -5px 0 0 #ead183, 5px 0 0 #ead183;
}

.riddle-detail-meta,
.riddle-detail-description,
.riddle-detail-link {
    color: rgba(72, 51, 31, 0.94);
    text-align: left;
}

.riddle-detail-meta,
.riddle-detail-description {
    font-size: 0.98rem;
    line-height: 1.45;
}

.riddle-gallery-carousel-arrow,
.riddle-gallery-progress {
    display: none;
}

.riddle-detail-card-collection {
    grid-template-rows: 230px minmax(0, 1fr);
}

.riddle-detail-collection-logo {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255, 244, 216, 0.58);
    box-shadow: 0 14px 26px rgba(8, 6, 4, 0.28);
}

.riddle-collection-content-list {
    display: grid;
    gap: 10px;
}

.riddle-collection-content-list-title {
    color: rgba(88, 62, 36, 0.92);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-collection-content-row {
    display: grid;
    grid-template-columns: 30px 68px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(126, 91, 55, 0.07);
    border: 1px solid rgba(142, 101, 58, 0.14);
}

.riddle-collection-content-index {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(71, 124, 116, 0.14);
    color: rgba(33, 84, 78, 0.96);
    font-size: 0.8rem;
    font-weight: 800;
}

.riddle-collection-content-image {
    width: 68px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(142, 101, 58, 0.16);
}

.riddle-collection-content-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.riddle-collection-content-title {
    color: var(--riddle-ink);
    font-weight: 800;
    line-height: 1.2;
}

.riddle-collection-content-category,
.riddle-collection-content-description {
    color: rgba(72, 51, 31, 0.78);
    font-size: 0.82rem;
    line-height: 1.3;
}

.riddle-collection-content-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.riddle-collection-content-action {
    white-space: nowrap;
}

.riddle-collection-content-empty {
    padding: 12px;
    border-radius: 12px;
    background: rgba(126, 91, 55, 0.07);
    color: rgba(72, 51, 31, 0.78);
}

.riddle-detail-satellite-challenge {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(46, 112, 132, 0.14);
    background: rgba(47, 111, 124, 0.055);
}

.riddle-detail-satellite-label,
.riddle-detail-satellite-challenge-label {
    color: rgba(46, 77, 87, 0.72);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-detail-satellite-target,
.riddle-detail-satellite-challenge-target {
    color: var(--riddle-ink);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.riddle-detail-satellite-hint,
.riddle-detail-satellite-challenge-hint {
    color: rgba(72, 51, 31, 0.72);
    font-size: 0.8rem;
    line-height: 1.34;
}

.riddle-detail-author-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    padding: 5px 0 3px;
}

.riddle-detail-author-row.is-filterable {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.riddle-detail-author-row.is-filterable:hover,
.riddle-detail-author-row.is-filterable:focus-visible {
    background: rgba(199, 146, 45, 0.09);
    outline: none;
    box-shadow: 0 0 0 2px rgba(199, 146, 45, 0.24);
}

.riddle-detail-media-attribution {
    min-width: 0;
    color: rgba(72, 51, 31, 0.62);
    font-family: var(--maphora-ui-font);
    font-size: 0.68rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.riddle-detail-media-attribution a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.riddle-detail-media-owner-control {
    position: relative;
    display: inline-block;
}

.riddle-detail-media-owner-disclosure {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.riddle-detail-media-owner-tooltip {
    position: absolute;
    z-index: 12;
    bottom: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: min(280px, calc(100vw - 40px));
    padding: 7px 9px;
    border: 1px solid rgba(126, 91, 43, 0.28);
    border-radius: 7px;
    background: #fff8ea;
    box-shadow: 0 5px 15px rgba(56, 38, 20, 0.2);
    color: #493923;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}

.riddle-detail-media-owner-tooltip::after {
    position: absolute;
    top: 100%;
    left: 14px;
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(126, 91, 43, 0.28);
    border-bottom: 1px solid rgba(126, 91, 43, 0.28);
    background: #fff8ea;
    content: "";
    transform: translateY(-4px) rotate(45deg);
}

.riddle-detail-media-owner-tooltip[hidden] {
    display: none;
}

.riddle-detail-media-attribution a:hover,
.riddle-detail-media-attribution a:focus-visible,
.riddle-detail-media-owner-disclosure:hover,
.riddle-detail-media-owner-disclosure:focus-visible {
    color: #17344f;
}

.riddle-detail-author-row.has-update-only {
    grid-template-columns: minmax(0, 1fr);
}

.riddle-detail-author-avatar {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #c7922d;
    border-radius: 50%;
    background: linear-gradient(145deg, #17344f, #0b2034);
    box-shadow: 0 3px 9px rgba(88, 55, 13, 0.2), inset 0 0 0 2px rgba(255, 239, 187, 0.2);
}

.riddle-detail-author-avatar-fallback {
    color: #f5d783;
    font-family: Georgia, serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.riddle-detail-author-avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.riddle-detail-author-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.riddle-detail-author-label {
    color: rgba(112, 78, 38, 0.76);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-detail-author-name {
    color: var(--riddle-ink);
    font-size: 1.02rem;
    font-weight: 700;
}

.riddle-detail-author-meta-line {
    grid-column: 1 / -1;
    margin-top: 3px;
    color: rgba(95, 71, 45, 0.84);
    font-size: 0.88rem;
}

.riddle-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.riddle-detail-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    align-items: start;
}

.riddle-detail-finds {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(155, 104, 42, 0.13);
    background: rgba(130, 90, 45, 0.045);
}

.riddle-detail-finds-label {
    color: rgba(105, 70, 31, 0.74);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-detail-fact {
    display: grid;
    grid-template-columns: minmax(82px, max-content) minmax(0, 1fr);
    gap: 4px 10px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(142, 101, 58, 0.13);
    background: rgba(97, 72, 48, 0.035);
}

.riddle-detail-fact.is-placeholder {
    background: rgba(47, 111, 124, 0.055);
    border-color: rgba(46, 112, 132, 0.14);
}

.riddle-detail-fact-label {
    color: #6b5946;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-detail-fact-value {
    color: var(--riddle-ink);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.riddle-detail-fact.is-placeholder .riddle-detail-fact-value {
    color: rgba(46, 77, 87, 0.82);
    font-size: 0.82rem;
    font-weight: 600;
}

.riddle-detail-image-zoom-backdrop {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(8, 7, 6, 0.78);
    backdrop-filter: blur(4px);
}

.riddle-detail-image-zoom-dialog {
    width: min(100%, 760px);
    max-height: 100%;
    display: grid;
    gap: 12px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 240, 214, 0.18);
    background: linear-gradient(180deg, rgba(20, 17, 16, 0.98), rgba(11, 9, 8, 0.98));
    box-shadow:
        0 38px 86px rgba(4, 4, 4, 0.52),
        0 12px 28px rgba(4, 4, 4, 0.34);
}

.riddle-detail-image-zoom {
    width: 100%;
    max-height: min(70vh, 620px);
    object-fit: contain;
    border-radius: 16px;
    background: rgba(6, 5, 4, 0.88);
}

.riddle-detail-image-zoom-close {
    justify-self: end;
    background: rgba(255, 248, 235, 0.08);
    border: 1px solid rgba(255, 240, 214, 0.18);
    color: rgba(245, 237, 224, 0.92);
}

.riddle-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(124, 89, 53, 0.08);
    border: 1px solid rgba(142, 101, 58, 0.18);
    color: rgba(92, 65, 37, 0.92);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.riddle-detail-body .riddle-state-pill-row {
    gap: 4px;
}

.riddle-detail-body .riddle-state-pill {
    gap: 4px;
    min-height: 21px;
    padding: 3px 7px;
    border-color: rgba(94, 64, 34, 0.13);
    background: rgba(124, 89, 53, 0.06);
    color: rgba(71, 46, 23, 0.74);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.riddle-detail-body .riddle-state-pill-icon {
    width: 12px;
    height: 12px;
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="active"] {
    border-color: rgba(46, 112, 132, 0.18);
    background: rgba(47, 111, 124, 0.07);
    color: rgba(37, 86, 101, 0.86);
    box-shadow: none;
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="completed"],
.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="free"] {
    border-color: rgba(73, 136, 96, 0.16);
    background: rgba(73, 136, 96, 0.06);
    color: #476b54;
    box-shadow: none;
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="paused"],
.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="owned"] {
    border-color: rgba(167, 121, 24, 0.16);
    background: rgba(167, 121, 24, 0.06);
    color: rgba(116, 84, 25, 0.82);
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="locked"] {
    border-color: rgba(117, 89, 61, 0.16);
    background: rgba(117, 89, 61, 0.06);
    color: rgba(91, 66, 42, 0.78);
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="favorite"] {
    border-color: rgba(167, 88, 44, 0.16);
    background: rgba(167, 88, 44, 0.06);
    color: rgba(127, 63, 34, 0.8);
}

.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="bookmark"],
.riddle-detail-body .riddle-state-pill[data-riddle-state-tone="downloaded"] {
    border-color: rgba(58, 102, 132, 0.16);
    background: rgba(58, 102, 132, 0.06);
    color: rgba(46, 82, 106, 0.82);
}

.riddle-detail-body .riddle-tag {
    padding: 3px 7px;
    border-color: rgba(142, 101, 58, 0.13);
    background: rgba(124, 89, 53, 0.045);
    color: rgba(92, 65, 37, 0.72);
    font-size: 0.67rem;
    letter-spacing: 0.05em;
}

.riddle-detail-link {
    justify-self: start;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(245, 237, 224, 0.72);
    text-underline-offset: 0.18em;
}

.riddle-detail-link:hover,
.riddle-detail-link:focus-visible {
    color: #fff7df;
}

.riddle-detail-cta {
    margin-top: 4px;
    background: linear-gradient(180deg, rgba(243, 229, 198, 0.98), rgba(225, 202, 158, 0.98));
    color: var(--riddle-ink);
    border: 1px solid rgba(142, 101, 58, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease,
        transform 180ms ease;
}

.riddle-detail-cta:hover,
.riddle-detail-cta:focus-visible {
    background: linear-gradient(180deg, rgba(247, 235, 208, 0.98), rgba(231, 210, 169, 0.98));
    border-color: rgba(142, 101, 58, 0.32);
    color: #2f1f12;
    box-shadow:
        0 12px 22px rgba(16, 12, 10, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.riddle-detail-cta-primary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(58, 136, 82, 0.96), rgba(31, 89, 51, 0.98));
    border-color: rgba(224, 255, 214, 0.56);
    color: #f7fff1;
    box-shadow:
        0 16px 30px rgba(19, 63, 36, 0.28),
        0 0 0 1px rgba(151, 223, 131, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.riddle-detail-cta-primary > span {
    min-width: 0;
    text-align: center;
}

.riddle-detail-primary-action-icon {
    width: 34px;
    height: 34px;
    color: inherit;
    filter: drop-shadow(0 2px 4px rgba(10, 24, 13, 0.34));
}

.riddle-detail-cta-primary:hover,
.riddle-detail-cta-primary:focus-visible {
    background: linear-gradient(180deg, rgba(58, 136, 82, 0.96), rgba(31, 89, 51, 0.98));
    border-color: rgba(224, 255, 214, 0.56);
    color: #f7fff1;
    box-shadow:
        0 16px 30px rgba(19, 63, 36, 0.28),
        0 0 0 1px rgba(151, 223, 131, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.riddle-detail-actions {
    display: grid;
    gap: 10px;
}

.riddle-detail-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.riddle-detail-cta-secondary.is-placeholder {
    border-color: rgba(152, 213, 160, 0.22);
    color: #e5f3e4;
}

.riddle-detail-secondary-action {
    background: rgba(128, 93, 57, 0.06);
    border: 1px solid rgba(142, 101, 58, 0.18);
    color: rgba(72, 51, 31, 0.94);
    box-shadow: none;
}

.riddle-detail-secondary-action:hover,
.riddle-detail-secondary-action:focus-visible {
    background: rgba(128, 93, 57, 0.12);
    border-color: rgba(142, 101, 58, 0.26);
    color: #2f1f12;
    transform: none;
}

.riddle-detail-secondary-action.is-active {
    background: rgba(54, 112, 82, 0.18);
    border-color: rgba(133, 208, 155, 0.3);
    color: #315735;
}

.riddle-detail-secondary-action.is-active:hover,
.riddle-detail-secondary-action.is-active:focus-visible {
    background: rgba(54, 112, 82, 0.24);
    border-color: rgba(133, 208, 155, 0.4);
    color: #24482a;
}

.riddle-detail-secondary-action-danger {
    border-color: rgba(151, 69, 56, 0.34);
    color: #733324;
}

.riddle-detail-secondary-action-danger:hover,
.riddle-detail-secondary-action-danger:focus-visible {
    border-color: rgba(151, 69, 56, 0.46);
    color: #4d2018;
}

.riddle-detail-player-action.is-active {
    background:
        linear-gradient(180deg, rgba(246, 223, 174, 0.82), rgba(221, 184, 116, 0.82));
    border-color: rgba(146, 98, 43, 0.38);
    color: #4b2f18;
}

.riddle-detail-player-action.is-active:hover,
.riddle-detail-player-action.is-active:focus-visible {
    background:
        linear-gradient(180deg, rgba(251, 231, 188, 0.92), rgba(229, 192, 121, 0.92));
    border-color: rgba(146, 98, 43, 0.48);
    color: #35200f;
}

.riddle-detail-player-action {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    gap: 12px;
    justify-content: flex-start;
    padding: 0 16px;
    background:
        linear-gradient(180deg, rgba(255, 243, 215, 0.72), rgba(232, 203, 146, 0.72));
    border-color: rgba(151, 104, 51, 0.32);
    color: #51351d;
    font-weight: 700;
    box-shadow:
        0 10px 20px rgba(92, 58, 24, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.riddle-detail-player-action:hover,
.riddle-detail-player-action:focus-visible {
    background:
        linear-gradient(180deg, rgba(255, 247, 226, 0.86), rgba(239, 211, 156, 0.86));
    border-color: rgba(151, 104, 51, 0.44);
    color: #35200f;
    transform: translateY(-1px);
}

.riddle-player-action-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.riddle-detail-player-action.is-active .riddle-player-action-icon {
    fill: currentColor;
}

.riddle-detail-secondary-action:disabled {
    background: rgba(255, 248, 235, 0.03);
    border-color: rgba(255, 240, 214, 0.12);
    color: rgba(245, 237, 224, 0.44);
    cursor: not-allowed;
    opacity: 1;
}

.riddle-detail-secondary-action:disabled:hover,
.riddle-detail-secondary-action:disabled:focus-visible {
    background: rgba(255, 248, 235, 0.03);
    border-color: rgba(255, 240, 214, 0.12);
    color: rgba(245, 237, 224, 0.44);
    transform: none;
}

.riddle-detail-secondary-action-primary {
    background: linear-gradient(180deg, rgba(51, 116, 77, 0.92), rgba(31, 85, 53, 0.96));
    border-color: rgba(223, 255, 217, 0.38);
    color: #f6fff2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 10px 22px rgba(19, 63, 36, 0.2);
}

.riddle-detail-secondary-action-primary:hover,
.riddle-detail-secondary-action-primary:focus-visible {
    background: linear-gradient(180deg, rgba(64, 136, 90, 0.96), rgba(36, 101, 61, 0.98));
    border-color: rgba(229, 255, 222, 0.52);
    color: #fbfff8;
}

.riddle-detail-secondary-action-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.riddle-detail-secondary-action-primary.riddle-detail-secondary-action-with-icon {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: initial;
    padding-left: 22px;
    padding-right: 16px;
}

.riddle-detail-secondary-action-primary.riddle-detail-secondary-action-with-icon > span {
    min-width: 0;
    text-align: center;
}

.riddle-detail-action-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    fill: currentColor;
    display: block;
}

.riddle-detail-action-icon-crosshair {
    transform: translateY(1px);
    transform-origin: center;
}

.riddle-detail-placeholder-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(152, 213, 160, 0.16);
    background: rgba(43, 57, 46, 0.28);
    color: rgba(222, 240, 223, 0.88);
    font-size: 0.84rem;
    line-height: 1.45;
}

.riddle-detail-empty {
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 18px;
    border: 1px dashed rgba(142, 101, 58, 0.28);
    color: rgba(72, 51, 31, 0.72);
    background: rgba(239, 223, 190, 0.9);
    text-align: center;
}

.riddle-gallery-grid-empty {
    display: block;
}

.riddle-gallery-empty {
    gap: 12px;
    align-content: center;
}

.riddle-gallery-filter-empty {
    display: grid;
    gap: 12px;
    min-height: 220px;
    align-content: center;
    justify-items: start;
    padding: 24px;
    border-radius: 18px;
    border: 1px dashed rgba(142, 101, 58, 0.24);
    background: rgba(239, 223, 190, 0.9);
    text-align: left;
}

.riddle-gallery-empty-placeholder {
    display: inline-flex;
    align-items: center;
}

.riddle-gallery-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--riddle-ink);
    text-transform: uppercase;
}

.riddle-gallery-empty-body {
    max-width: 560px;
    line-height: 1.6;
    color: rgba(72, 51, 31, 0.84);
}

.riddle-gallery-empty-action {
    justify-self: center;
}

body[data-theme="dark"] .riddle-gallery-panel {
    background:
        linear-gradient(180deg, rgba(54, 37, 25, 0.96), rgba(26, 19, 15, 0.98)),
        radial-gradient(circle at top left, rgba(179, 126, 61, 0.18), rgba(0, 0, 0, 0) 52%);
    border-color: rgba(192, 144, 79, 0.26);
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
    .maphora-gallery-card {
        will-change: auto;
        transform-style: flat;
    }

    .maphora-gallery-card-glow {
        display: none;
        animation: none;
    }

    .maphora-gallery-card:hover,
    .maphora-gallery-card:focus-visible {
        filter: brightness(1.02);
    }
}

@media (max-width: 1260px) {
    .riddle-gallery-panel {
        width: calc(100vw - 36px);
        height: calc(100dvh - 36px);
    }

    .riddle-gallery-catalog-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .riddle-gallery-nav {
        padding: 8px;
        overflow: hidden;
    }

    .riddle-gallery-nav-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(216px, 248px);
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .riddle-gallery-nav-list::-webkit-scrollbar {
        display: none;
    }

    .riddle-gallery-nav-separator {
        width: 1px;
        height: auto;
        min-height: 42px;
        margin: 4px 2px;
        background: linear-gradient(180deg, transparent, rgba(231, 200, 116, 0.32), transparent);
    }

    .riddle-gallery-grid {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 33vw, 340px);
        gap: 14px;
    }

    .riddle-detail-card {
        grid-template-rows: 220px minmax(0, 1fr);
    }

    .riddle-detail-card-photo-challenge {
        grid-template-rows: 280px minmax(0, 1fr);
    }
}

@media (min-width: 641px) and (max-width: 1260px) {
    .riddle-gallery-content {
        height: calc(100% - 60px);
    }

    .riddle-gallery-nav-button {
        min-height: 54px;
        padding: 9px 10px;
        gap: 10px;
    }

    .riddle-gallery-nav-label {
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .riddle-gallery-nav-label-text {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .riddle-gallery-toolbar {
        gap: 12px;
        padding: 12px 14px;
    }

    .riddle-gallery-toolbar-title {
        font-size: 1.58rem;
    }

    .riddle-gallery-toolbar-subtitle {
        font-size: 0.94rem;
        line-height: 1.35;
    }

    .riddle-gallery-toolbar-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .riddle-gallery-toolbar-field,
    .riddle-gallery-missing-filter {
        min-width: 0;
        width: 100%;
    }

    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        min-height: 44px;
    }

    .riddle-gallery-view-toggle {
        min-width: 144px;
    }

    .riddle-gallery-section {
        padding: 14px;
    }

    .riddle-gallery-carousel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 8px 30px 56px 18px;
    }

    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .riddle-card {
        width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 760px) {
    .riddle-gallery-grid {
        grid-template-columns: minmax(0, 1fr) 292px;
        gap: 12px;
    }

    .riddle-gallery-toolbar-main {
        gap: 10px;
    }

    .riddle-gallery-toolbar-filters {
        grid-template-columns: 1fr;
    }

    .riddle-card {
        width: 100%;
    }

    .riddle-detail-title {
        font-size: 1.42rem;
    }
}

@media (max-width: 860px) {
    .riddle-gallery-toolbar-main {
        flex-direction: column;
    }

    .riddle-gallery-toolbar-copy {
        width: 100%;
    }

    .riddle-gallery-toolbar-filters {
        width: 100%;
        justify-content: stretch;
    }

    .riddle-gallery-toolbar-field {
        flex: 1 1 220px;
        min-width: min(100%, 220px);
    }

    .riddle-gallery-view-toggle {
        width: 100%;
    }

    .riddle-gallery-missing-filter {
        flex: 1 1 220px;
        justify-content: flex-start;
    }

    .riddle-gallery-view-button {
        flex: 1 1 0;
    }

    .riddle-detail-facts-grid {
        grid-template-columns: 1fr;
    }

    .riddle-card {
        width: 100%;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    .riddle-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        height: 100%;
        gap: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: start;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-sections {
        height: auto;
        overflow: visible;
        gap: 14px;
        padding-right: 0;
    }

    .riddle-gallery-carousel {
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        gap: 12px;
        padding: 8px 18px 46px;
    }

    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
        gap: 12px;
    }

    .riddle-gallery-detail-slot,
    .riddle-detail-card {
        height: auto;
        max-height: none;
    }

    .riddle-detail-card {
        grid-template-rows: min(34dvh, 240px) minmax(0, 1fr);
    }

    .riddle-detail-card-photo-challenge {
        grid-template-rows: min(38dvh, 280px) minmax(0, 1fr);
    }

    .riddle-detail-body {
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .riddle-gallery-panel {
        position: fixed !important;
        inset: 0 !important;
        box-sizing: border-box;
        width: 100vw !important;
        max-width: none;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none;
        padding:
            calc(8px + env(safe-area-inset-top))
            calc(8px + env(safe-area-inset-right))
            calc(8px + env(safe-area-inset-bottom))
            calc(8px + env(safe-area-inset-left));
        overflow: hidden;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        touch-action: pan-y;
    }

    .riddle-gallery-panel .panel-header-row {
        position: absolute;
        z-index: 24;
        top: 12px;
        right: 12px;
        left: 12px;
        min-height: 32px;
        pointer-events: none;
    }

    .riddle-gallery-panel .panel-header-actions {
        margin-left: auto;
        pointer-events: auto;
    }

    .riddle-gallery-panel .panel-drag-handle,
    .riddle-gallery-panel .panel-resize-handle {
        display: none;
    }

    .riddle-gallery-close-button {
        position: fixed;
        z-index: 5400;
        top: calc(8px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 999px;
        display: inline-flex !important;
        background: rgba(26, 19, 15, 0.78);
        border-color: rgba(255, 241, 217, 0.22);
        color: rgba(255, 248, 235, 0.96);
        box-shadow: 0 10px 22px rgba(7, 6, 5, 0.26);
        backdrop-filter: blur(10px);
    }

    .riddle-gallery-close-button svg {
        width: 16px;
        height: 16px;
    }

    .riddle-gallery-window-button {
        position: fixed;
        z-index: 5400;
        top: calc(18px + env(safe-area-inset-top));
        right: calc(26px + env(safe-area-inset-right) + var(--ui-compact-control-size));
        display: inline-flex !important;
        background: rgba(26, 19, 15, 0.78);
        border-color: rgba(255, 241, 217, 0.22);
        color: rgba(255, 248, 235, 0.96);
        box-shadow: 0 10px 22px rgba(7, 6, 5, 0.26);
        backdrop-filter: blur(10px);
    }

    .riddle-gallery-content {
        box-sizing: border-box;
        height: 100%;
        margin-top: 0;
        padding-top: 56px;
    }

    .riddle-gallery-grid-empty {
        height: 100%;
    }

    .riddle-pile-poil-celebration-card {
        padding: 22px 18px;
    }

    .riddle-celebration-rating-row {
        gap: 8px;
    }

    .riddle-celebration-rating-button {
        grid-template-rows: 30px auto;
        min-height: 78px;
        padding: 9px 6px;
        border-radius: 15px;
    }

    .riddle-celebration-rating-icon {
        width: 29px;
        height: 29px;
    }

    .riddle-celebration-rating-button span {
        font-size: 0.7rem;
    }

    .riddle-gallery-nav-list {
        grid-auto-columns: calc(100% - 20px);
        scroll-padding-inline: 6px;
    }

    .riddle-gallery-nav {
        padding: 6px;
        border-radius: 14px;
    }

    .riddle-gallery-nav-button {
        min-height: 50px;
        padding: 8px 9px 8px 8px;
        border-radius: 12px;
        gap: 8px;
    }

    .riddle-gallery-nav-label {
        gap: 8px;
        font-size: 0.78rem;
        line-height: 1.12;
    }

    .riddle-gallery-nav-icon-shell {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .riddle-gallery-nav-icon-shell[data-riddle-nav-icon="favorites"],
    .riddle-gallery-nav-icon-shell[data-riddle-nav-icon="achievements"],
    .riddle-gallery-nav-icon-shell[data-riddle-nav-icon="in-progress"],
    .riddle-gallery-nav-icon-shell[data-riddle-nav-icon="completed"] {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .riddle-gallery-nav-count,
    .riddle-gallery-nav-badge {
        min-width: 22px;
        min-height: 20px;
        padding: 2px 6px;
        font-size: 0.64rem;
    }

    .riddle-gallery-catalog-shell {
        gap: 10px;
    }

    .riddle-gallery-main,
    .riddle-gallery-catalog-main {
        gap: 10px;
    }

    .riddle-gallery-toolbar {
        gap: 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .riddle-gallery-toolbar-main {
        gap: 10px;
    }

    .riddle-gallery-toolbar-title {
        font-size: clamp(1.15rem, 8vw, 1.55rem);
        line-height: 1.1;
        letter-spacing: 0;
    }

    .riddle-gallery-toolbar-subtitle {
        max-width: none;
        font-size: 0.86rem;
        line-height: 1.35;
    }

    .riddle-gallery-toolbar-filters {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .riddle-gallery-toolbar-field,
    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter,
    .riddle-gallery-view-toggle {
        width: 100%;
        min-width: 0;
    }

    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        min-height: 48px;
    }

    .riddle-gallery-missing-filter {
        align-items: center;
        line-height: 1.25;
        white-space: normal;
    }

    .riddle-gallery-missing-filter input {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .riddle-gallery-view-button {
        height: 44px;
    }

    .riddle-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        height: 100%;
        gap: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: start;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-sections {
        height: auto;
        overflow: visible;
        gap: 12px;
        padding-right: 0;
    }

    .riddle-gallery-section {
        padding: 12px;
        border-radius: 14px;
    }

    .riddle-gallery-carousel {
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
        gap: 10px;
        padding: 16px 12px 40px;
    }

    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
        gap: 10px;
    }

    .riddle-gallery-carousel-row.is-new {
        padding-bottom: 14px;
    }

    .riddle-card {
        width: 100%;
    }

    .riddle-gallery-detail-slot,
    .riddle-detail-card {
        height: auto;
        max-height: none;
    }

    .riddle-detail-card {
        grid-template-rows: min(32dvh, 190px) minmax(0, 1fr);
        border-radius: 14px;
    }

    .riddle-detail-card-photo-challenge {
        grid-template-rows: min(34dvh, 210px) minmax(0, 1fr);
    }

    .riddle-detail-body {
        padding: 14px;
        overflow: visible;
    }

    .riddle-collection-content-row {
        grid-template-columns: 26px 56px minmax(0, 1fr);
    }

    .riddle-collection-content-image {
        width: 56px;
        height: 44px;
    }

    .riddle-collection-content-action {
        grid-column: 2 / -1;
        justify-content: center;
        white-space: normal;
    }

    .riddle-detail-title {
        font-size: 1.34rem;
    }
}

@media (pointer: coarse) and (min-width: 641px) and (max-width: 1180px),
    (min-width: 641px) and (max-width: 900px),
    (min-width: 901px) and (max-width: 1180px) and (max-height: 900px) {
    .riddle-gallery-panel {
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: calc(10px + env(safe-area-inset-right)) !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        left: calc(10px + env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none;
        height: auto !important;
        max-height: none;
        padding: 12px;
        border-radius: 16px;
        touch-action: pan-y;
    }

    .riddle-gallery-panel .panel-header-row {
        position: absolute;
        z-index: 24;
        top: 14px;
        right: 14px;
        left: 14px;
        min-height: 40px;
        pointer-events: none;
    }

    .riddle-gallery-panel .panel-header-actions {
        margin-left: auto;
        pointer-events: auto;
    }

    .riddle-gallery-panel .panel-drag-handle,
    .riddle-gallery-panel .panel-resize-handle {
        display: none;
    }

    .riddle-gallery-close-button {
        position: fixed;
        z-index: 5400;
        top: calc(18px + env(safe-area-inset-top));
        right: calc(18px + env(safe-area-inset-right));
        width: var(--ui-compact-control-size);
        height: var(--ui-compact-control-size);
        border-radius: 999px;
        display: inline-flex !important;
        background: rgba(26, 19, 15, 0.78);
        border-color: rgba(255, 241, 217, 0.22);
        color: rgba(255, 248, 235, 0.96);
        box-shadow: 0 10px 22px rgba(7, 6, 5, 0.26);
        backdrop-filter: blur(10px);
    }

    .riddle-gallery-close-button svg {
        width: 16px;
        height: 16px;
    }

    .riddle-gallery-window-button {
        position: fixed;
        z-index: 5400;
        top: calc(18px + env(safe-area-inset-top));
        right: calc(26px + env(safe-area-inset-right) + var(--ui-compact-control-size));
        display: inline-flex !important;
        background: rgba(26, 19, 15, 0.78);
        border-color: rgba(255, 241, 217, 0.22);
        color: rgba(255, 248, 235, 0.96);
        box-shadow: 0 10px 22px rgba(7, 6, 5, 0.26);
        backdrop-filter: blur(10px);
    }

    .riddle-gallery-content {
        box-sizing: border-box;
        height: 100%;
        margin-top: 0;
        padding-top: 48px;
    }

    .riddle-gallery-catalog-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    .riddle-gallery-nav {
        padding: 6px;
        border-radius: 14px;
        overflow: hidden;
    }

    .riddle-gallery-nav-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(168px, 24vw);
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-nav-list::-webkit-scrollbar {
        display: none;
    }

    .riddle-gallery-nav-separator {
        width: 1px;
        height: auto;
        min-height: 42px;
        margin: 4px 2px;
        background: linear-gradient(180deg, transparent, rgba(231, 200, 116, 0.32), transparent);
    }

    .riddle-gallery-nav-button {
        min-height: 48px;
        padding: 8px 9px;
        border-radius: 12px;
        gap: 8px;
    }

    .riddle-gallery-nav-label {
        gap: 8px;
        font-size: 0.82rem;
        line-height: 1.1;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .riddle-gallery-nav-label-text {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .riddle-gallery-nav-icon-shell {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .riddle-gallery-nav-count,
    .riddle-gallery-nav-badge {
        min-width: 22px;
        min-height: 20px;
        padding: 2px 6px;
        font-size: 0.64rem;
    }

    .riddle-gallery-main,
    .riddle-gallery-catalog-main {
        min-height: 0;
        gap: 10px;
    }

    .riddle-gallery-toolbar {
        position: sticky;
        top: 0;
        z-index: 12;
        gap: 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .riddle-gallery-toolbar-main {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .riddle-gallery-toolbar-copy {
        width: auto;
        min-width: 0;
    }

    .riddle-gallery-toolbar-title {
        font-size: clamp(1.12rem, 3.2vw, 1.42rem);
        line-height: 1.08;
        letter-spacing: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .riddle-gallery-toolbar-subtitle {
        display: none;
    }

    .riddle-gallery-toolbar-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 8px;
        width: 100%;
    }

    .riddle-gallery-toolbar-field,
    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        flex: initial;
        width: 100%;
        min-width: 0;
    }

    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        min-height: 42px;
    }

    .riddle-gallery-view-toggle {
        flex: 0 0 auto;
        width: auto;
        min-width: 112px;
        gap: 8px;
    }

    .riddle-gallery-view-button {
        flex: 0 0 48px;
        width: 48px;
        height: 42px;
    }

    .riddle-gallery-grid {
        grid-template-columns: 1fr;
        height: 100%;
        gap: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: start;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-sections {
        height: auto;
        overflow: visible;
        gap: 12px;
        padding-right: 0;
    }

    .riddle-gallery-section {
        padding: 12px;
        border-radius: 14px;
    }

    .riddle-gallery-carousel,
    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
        gap: 12px;
    }

    .riddle-gallery-carousel {
        padding: 14px 12px 28px;
    }

    .riddle-card {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .riddle-card-chrome {
        inset: 10px 10px auto;
    }

    .riddle-card-badge,
    .riddle-card-finds-badge,
    .riddle-card-status-badge,
    .riddle-state-pill {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .riddle-card-overlay {
        padding: 12px;
        gap: 4px;
    }

    .riddle-card-title {
        font-size: 1rem;
        line-height: 1.1;
    }

    .riddle-card-author,
    .riddle-card-meta-row {
        font-size: 0.78rem;
    }

    .riddle-card-footer-row {
        gap: 8px;
    }

    .riddle-card-quick-facts {
        gap: 4px;
        max-width: 62%;
    }

    .riddle-card-quick-fact {
        min-height: 20px;
        padding: 3px 6px;
        font-size: 0.64rem;
    }

    .riddle-gallery-detail-slot,
    .riddle-detail-card {
        height: auto;
        max-height: none;
    }

    .riddle-detail-card {
        grid-template-rows: min(32dvh, 220px) minmax(0, 1fr);
        border-radius: 14px;
    }

    .riddle-detail-card-photo-challenge {
        grid-template-rows: min(36dvh, 260px) minmax(0, 1fr);
    }

    .riddle-detail-body {
        padding: 14px;
        overflow: visible;
    }

    .riddle-detail-title {
        font-size: 1.34rem;
    }
}

@media (pointer: coarse) and (min-width: 641px) and (max-width: 1180px) and (max-height: 760px),
    (min-width: 641px) and (max-width: 1180px) and (max-height: 760px) {
    .riddle-gallery-content {
        padding-top: 40px;
    }

    .riddle-gallery-nav-list {
        grid-auto-columns: minmax(150px, 22vw);
    }

    .riddle-gallery-nav-button {
        min-height: 44px;
        padding: 7px 8px;
    }

    .riddle-gallery-nav-icon-shell {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    .riddle-gallery-toolbar {
        padding: 9px;
    }

    .riddle-gallery-toolbar-main {
        gap: 10px;
    }

    .riddle-gallery-toolbar-title {
        font-size: clamp(1.02rem, 2.8vw, 1.26rem);
    }

    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter,
    .riddle-gallery-view-button {
        min-height: 38px;
        height: 38px;
    }

    .riddle-gallery-carousel,
    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
        gap: 10px;
    }

    .riddle-gallery-carousel {
        padding: 12px 10px 24px;
    }

    .riddle-card {
        aspect-ratio: 16 / 10;
    }

}

@media (max-width: 900px) {
    .riddle-gallery-grid {
        border: 1px solid var(--riddle-gallery-viewport-border);
        background: var(--riddle-gallery-viewport-surface);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.88),
            inset 0 -1px 0 rgba(111, 73, 18, 0.12);
    }

    .riddle-gallery-sections {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
}

@media (max-width: 640px),
    (any-pointer: coarse) and (min-width: 641px) and (max-width: 1366px) {
    .riddle-gallery-window-button {
        display: none !important;
    }
}


.riddle-player-favorite-icon {
    display: inline-grid;
    place-items: center;
}

.riddle-player-favorite-icon-state {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
}

.riddle-player-favorite-icon-state .riddle-player-action-icon {
    width: 100%;
    height: 100%;
}

.riddle-player-favorite-icon-state-active {
    display: none;
}

.riddle-detail-player-action.is-active .riddle-player-favorite-icon-state-active,
.riddle-card-player-flag.is-favorite .riddle-player-favorite-icon-state-active {
    display: block;
}

.riddle-detail-player-action.is-active .riddle-player-favorite-icon-state-inactive,
.riddle-card-player-flag.is-favorite .riddle-player-favorite-icon-state-inactive {
    display: none;
}


.game-area-boundary {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 1px rgba(255, 246, 210, 0.96))
        drop-shadow(0 0 5px rgba(255, 184, 63, 0.82))
        drop-shadow(0 0 14px rgba(233, 149, 38, 0.54))
        drop-shadow(0 0 26px rgba(8, 32, 51, 0.34));
}

.game-area-dim-outside {
    filter: none;
}

.game-area-boundary-outside-feedback,
.game-area-outside-feedback {
    filter:
        drop-shadow(0 0 3px rgba(255, 199, 114, 0.82))
        drop-shadow(0 2px 10px rgba(179, 73, 31, 0.48));
}

.game-area-tooltip {
    border: 1px solid rgba(185, 129, 45, 0.42);
    border-radius: 6px;
    background: rgba(255, 252, 244, 0.94);
    color: #4b3417;
    box-shadow: 0 8px 24px rgba(42, 29, 12, 0.14);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.game-area-outside-tooltip {
    border: 1px solid rgba(180, 90, 60, 0.46);
    border-radius: 6px;
    background: rgba(255, 248, 230, 0.96);
    color: #573019;
    box-shadow: 0 8px 24px rgba(70, 32, 18, 0.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.maplibre-native-game-area-tooltip {
    z-index: 6;
    padding: 6px 9px;
    white-space: nowrap;
    pointer-events: none;
}

.maplibre-native-game-area-outside-tooltip {
    transform: translateY(-46px);
}

body[data-theme="dark"] .game-area-tooltip {
    background: rgba(43, 35, 24, 0.94);
    color: #f8e4bd;
    border-color: rgba(224, 172, 83, 0.5);
}

body[data-theme="dark"] .game-area-outside-tooltip {
    background: rgba(52, 35, 27, 0.96);
    color: #ffe1c8;
    border-color: rgba(214, 112, 78, 0.54);
}


/* Decryption surface, shell, method navigation and shared card chrome. */

.decryption-panel {
    --decryption-bg: #03090d;
    --decryption-panel: #07131a;
    --decryption-panel-soft: #0b1c24;
    --decryption-copper: #c1782e;
    --decryption-gold: #ffb743;
    --decryption-gold-soft: #e2a04f;
    --decryption-line: rgba(193, 120, 46, 0.34);
    --decryption-text: #f6eee4;
    --decryption-muted: rgba(246, 238, 228, 0.72);
    --decryption-green: #74f079;
    --decryption-green-soft: #9cff85;
    --decryption-danger: #ff8f72;
    --decryption-score-low: #ff806f;
    --decryption-score-medium: #ffd45f;
    --decryption-score-high: #74f079;
    --decryption-bottom-buffer: 34px;
    width: min(1540px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    height: min(980px, calc(100vh - 36px));
    max-height: calc(100vh - 36px);
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    border-color: rgba(193, 120, 46, 0.45);
    background:
        linear-gradient(180deg, rgba(4, 12, 17, 0.98), rgba(2, 8, 12, 0.99)),
        radial-gradient(circle at 70% 0%, rgba(40, 112, 95, 0.14), transparent 42%);
    box-shadow:
        0 42px 110px rgba(0, 0, 0, 0.64),
        inset 0 1px 0 rgba(255, 193, 103, 0.1);
    color: var(--decryption-text);
    font-family: "Palatino Linotype", "Book Antiqua", serif;
}

.decryption-panel:has(.decryption-field-tooltip-rich:hover),
.decryption-panel:has(.decryption-field-tooltip-rich:focus-visible),
.decryption-panel:has(.decryption-field-tooltip-rich:focus-within) {
    overflow: visible;
}

@supports (height: 100dvh) {
    .decryption-panel {
        height: min(980px, calc(100dvh - 36px));
        max-height: calc(100dvh - 36px);
    }
}

.decryption-panel .panel-header-row {
    min-height: 78px;
    padding: 16px 24px 12px 28px;
    border-bottom: 1px solid var(--decryption-line);
    background:
        linear-gradient(90deg, rgba(5, 12, 17, 0.96), rgba(5, 17, 23, 0.92)),
        radial-gradient(circle at 28px 16px, rgba(255, 183, 67, 0.18), transparent 34%);
}

.decryption-panel .panel-title {
    color: #fff8ed;
    font-size: clamp(1.62rem, 2.2vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.decryption-panel .panel-subtitle {
    margin-top: 6px;
    color: var(--decryption-muted);
    font-size: 1rem;
    letter-spacing: 0;
}

.decryption-panel .panel-drag-handle {
    background: rgba(255, 245, 231, 0.08);
    border-color: rgba(233, 198, 146, 0.14);
}

.decryption-panel .panel-drag-handle::before {
    background:
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.44), rgba(255, 241, 217, 0.44)) center 10px / 12px 1.5px no-repeat;
}

.decryption-panel .decryption-close-button {
    position: static;
    z-index: auto;
    inset: auto;
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    padding: 0;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255, 245, 231, 0.08);
    border-color: rgba(233, 198, 146, 0.14);
    color: rgba(255, 245, 231, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
}

.decryption-panel .decryption-close-button svg {
    width: 12px;
    height: 12px;
}

.decryption-content {
    height: calc(100% - 78px);
    min-height: 0;
}

.decryption-shell {
    display: grid;
    grid-template-columns: 300px minmax(420px, 1fr) minmax(320px, 400px);
    height: 100%;
    min-height: 0;
}

.decryption-sidebar,
.decryption-help-panel {
    min-width: 0;
    background:
        linear-gradient(180deg, rgba(6, 18, 24, 0.94), rgba(2, 9, 13, 0.96)),
        radial-gradient(circle at top, rgba(48, 151, 105, 0.13), transparent 54%);
}

.decryption-sidebar {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 22px 18px var(--decryption-bottom-buffer);
    border-right: 1px solid var(--decryption-line);
}

.decryption-method-list {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
}

.decryption-method-button {
    position: relative;
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 116px;
    padding: 14px;
    border-radius: 6px;
    border: 1px solid rgba(193, 120, 46, 0.22);
    background: linear-gradient(145deg, rgba(11, 29, 38, 0.94), rgba(7, 18, 24, 0.96));
    color: var(--decryption-text);
    text-align: left;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 183, 67, 0.06);
}

.decryption-method-button:hover,
.decryption-method-button:focus-visible {
    border-color: rgba(255, 183, 67, 0.54);
    background: linear-gradient(145deg, rgba(13, 40, 40, 0.98), rgba(8, 22, 27, 0.98));
}

.decryption-method-button.is-active {
    border-color: rgba(116, 240, 121, 0.72);
    background:
        linear-gradient(145deg, rgba(12, 53, 39, 0.95), rgba(8, 25, 23, 0.98)),
        radial-gradient(circle at right, rgba(116, 240, 121, 0.18), transparent 56%);
    box-shadow:
        0 0 0 1px rgba(116, 240, 121, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.decryption-method-button.is-active::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    width: 12px;
    height: 12px;
    background: var(--decryption-green);
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 18px rgba(116, 240, 121, 0.54);
}

.decryption-method-icon {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-left: -6px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 183, 67, 0.16), rgba(3, 12, 17, 0.56) 58%, transparent 72%);
    filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.36))
        drop-shadow(0 0 10px rgba(255, 183, 67, 0.1));
}

.decryption-method-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.decryption-method-icon[data-method-icon="substitution"] img,
.decryption-method-icon[data-method-icon="transposition"] img {
    width: 104%;
    height: 104%;
}

.decryption-method-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.decryption-method-copy span {
    color: #fff8ed;
    font-size: 1.08rem;
    line-height: 1.12;
}

.decryption-method-copy small {
    color: rgba(246, 238, 228, 0.72);
    font-size: 0.86rem;
    line-height: 1.28;
}

.decryption-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    margin-top: 18px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 16px var(--decryption-bottom-buffer);
    scrollbar-gutter: stable;
    background:
        radial-gradient(circle at 20% 0%, rgba(27, 89, 84, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(5, 16, 22, 0.96), rgba(4, 12, 17, 0.98));
}

.decryption-main:has(.decryption-field-tooltip:hover),
.decryption-main:has(.decryption-field-tooltip:focus-visible),
.decryption-card:has(.decryption-field-tooltip:hover),
.decryption-card:has(.decryption-field-tooltip:focus-visible) {
    z-index: 20;
}

.decryption-main,
.decryption-method-list,
.decryption-help-panel,
.decryption-result-output {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 183, 67, 0.42) rgba(3, 12, 17, 0.42);
}

.decryption-main::-webkit-scrollbar,
.decryption-method-list::-webkit-scrollbar,
.decryption-help-panel::-webkit-scrollbar,
.decryption-result-output::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.decryption-main::-webkit-scrollbar-track,
.decryption-method-list::-webkit-scrollbar-track,
.decryption-help-panel::-webkit-scrollbar-track,
.decryption-result-output::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(3, 12, 17, 0.42);
}

.decryption-main::-webkit-scrollbar-thumb,
.decryption-method-list::-webkit-scrollbar-thumb,
.decryption-help-panel::-webkit-scrollbar-thumb,
.decryption-result-output::-webkit-scrollbar-thumb {
    border: 2px solid rgba(3, 12, 17, 0.72);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 183, 67, 0.72), rgba(120, 76, 30, 0.78));
}

.decryption-main::-webkit-scrollbar-thumb:hover,
.decryption-method-list::-webkit-scrollbar-thumb:hover,
.decryption-help-panel::-webkit-scrollbar-thumb:hover,
.decryption-result-output::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 209, 128, 0.9), rgba(166, 100, 38, 0.88));
}

.decryption-card,
.decryption-help-panel {
    border-radius: 6px;
    border: 1px solid rgba(193, 120, 46, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 183, 67, 0.07),
        0 16px 36px rgba(0, 0, 0, 0.22);
}


/* Decryption input cards, form controls, tooltips and parameter actions. */

.decryption-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(8, 25, 32, 0.9), rgba(5, 15, 20, 0.94)),
        radial-gradient(circle at top right, rgba(193, 120, 46, 0.1), transparent 50%);
}

.decryption-input-card {
    grid-template-rows: auto 136px auto;
}

.decryption-card-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.decryption-section-title,
.decryption-mini-title {
    color: var(--decryption-gold);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0;
}

.decryption-mini-title {
    font-size: 0.88rem;
}

.decryption-card-heading p,
.decryption-help-panel p,
.decryption-field-hint {
    margin: 0;
    color: var(--decryption-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.decryption-count {
    flex: 0 0 auto;
    color: rgba(246, 238, 228, 0.82);
    font-size: 0.92rem;
}

.decryption-count[data-limit-reached="true"] {
    color: var(--decryption-danger);
}

.decryption-input-card textarea {
    width: 100%;
    min-height: 0;
    height: 136px;
    resize: vertical;
    padding: 17px 18px;
    border-radius: 5px;
    border: 1px solid rgba(111, 151, 138, 0.24);
    background: rgba(0, 8, 12, 0.74);
    color: #f7f0e7;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.5;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
}

.decryption-input-card textarea:focus {
    border-color: rgba(255, 183, 67, 0.58);
    box-shadow:
        0 0 0 2px rgba(255, 183, 67, 0.12),
        inset 0 0 22px rgba(0, 0, 0, 0.28);
}

.decryption-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.decryption-primary-action,
.decryption-secondary-action,
.decryption-icon-button,
.decryption-candidate {
    border-radius: 6px;
    font-family: inherit;
    cursor: pointer;
}

.decryption-primary-action,
.decryption-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 17px;
    border: 1px solid rgba(255, 183, 67, 0.36);
    font-size: 1rem;
    font-weight: 800;
}

.decryption-primary-action {
    background: linear-gradient(180deg, rgba(191, 130, 56, 0.98), rgba(113, 69, 28, 0.98));
    color: #fff6df;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 180, 0.28),
        0 12px 24px rgba(0, 0, 0, 0.24);
}

.decryption-secondary-action {
    background: rgba(9, 21, 27, 0.86);
    color: rgba(246, 238, 228, 0.92);
}

.decryption-primary-action:hover,
.decryption-primary-action:focus-visible,
.decryption-secondary-action:hover,
.decryption-secondary-action:focus-visible,
.decryption-candidate:hover,
.decryption-candidate:focus-visible {
    border-color: rgba(255, 205, 125, 0.72);
    transform: translateY(-1px);
}

.decryption-parameter-grid {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(204px, 214px) minmax(170px, 1fr);
    gap: 18px;
    align-items: center;
}

.decryption-shift-control,
.decryption-field,
.decryption-before-after {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.decryption-field-label,
.decryption-field span {
    color: var(--decryption-gold);
    font-size: 0.85rem;
    font-weight: 800;
}

.decryption-field-label-with-tooltip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
}

.decryption-field-label-with-tooltip:has(.decryption-field-tooltip:hover),
.decryption-field-label-with-tooltip:has(.decryption-field-tooltip:focus-visible) {
    z-index: 200;
}

.decryption-field-tooltip,
.decryption-field .decryption-field-tooltip {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 183, 67, 0.62);
    border-radius: 50%;
    background: rgba(5, 18, 24, 0.92);
    color: #fff2c0;
    cursor: help;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.decryption-field-tooltip::before,
.decryption-field-tooltip::after {
    position: absolute;
    left: 0;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.decryption-field-tooltip::before {
    content: "";
    top: calc(100% + 3px);
    width: 10px;
    height: 10px;
    background: rgba(8, 22, 28, 0.98);
    border-left: 1px solid rgba(255, 183, 67, 0.34);
    border-top: 1px solid rgba(255, 183, 67, 0.34);
    transform: translate(3px, 2px) rotate(45deg);
}

.decryption-field-tooltip::after {
    content: attr(data-tooltip);
    top: calc(100% + 8px);
    box-sizing: border-box;
    width: min(280px, calc(100vw - 32px));
    padding: 9px 11px;
    border: 1px solid rgba(255, 183, 67, 0.34);
    border-radius: 5px;
    background: rgba(8, 22, 28, 0.98);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    color: #fff8ed;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.36;
    white-space: normal;
    transform: translateY(2px);
}

.decryption-field-tooltip:hover::before,
.decryption-field-tooltip:hover::after,
.decryption-field-tooltip:focus-visible::before,
.decryption-field-tooltip:focus-visible::after {
    opacity: 1;
}

.decryption-field-tooltip:hover::after,
.decryption-field-tooltip:focus-visible::after {
    transform: translateY(0);
}

.decryption-field-tooltip-rich::before,
.decryption-field-tooltip-rich::after {
    content: none;
}

.decryption-field-tooltip-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    box-sizing: border-box;
    display: grid;
    gap: 9px;
    width: min(540px, calc(100vw - 32px));
    max-width: 540px;
    padding: 11px;
    border: 1px solid rgba(255, 183, 67, 0.34);
    border-radius: 5px;
    background: rgba(1, 6, 8, 0.98);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
    color: #fff8ed;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.36;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateY(2px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.decryption-field-tooltip-panel.is-floating {
    position: fixed;
    top: var(--decryption-tooltip-top, calc(100% + 8px));
    left: var(--decryption-tooltip-left, 0);
    z-index: 5605;
    max-height: var(--decryption-tooltip-max-height, calc(100vh - 24px));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 183, 67, 0.42) rgba(3, 12, 17, 0.72);
}

.decryption-field-tooltip-rich:hover .decryption-field-tooltip-panel,
.decryption-field-tooltip-rich:focus-visible .decryption-field-tooltip-panel,
.decryption-field-tooltip-rich:focus-within .decryption-field-tooltip-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.decryption-transposition-cost-tooltip,
.decryption-transposition-cost-tooltip span {
    display: grid;
    gap: 8px;
    color: #fff8ed;
    font: inherit;
}

.decryption-transposition-cost-tooltip strong {
    color: #fff8ed;
    font-size: 0.9rem;
}

.decryption-transposition-cost-tooltip table {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff;
    font-size: 0.78rem;
}

.decryption-transposition-cost-tooltip th,
.decryption-transposition-cost-tooltip td {
    padding: 7px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    white-space: nowrap;
}

.decryption-transposition-cost-tooltip th {
    color: #ffffff;
    font-weight: 800;
}

.decryption-transposition-cost-tooltip td:first-child,
.decryption-transposition-cost-tooltip td:nth-child(2) {
    text-align: right;
}

.decryption-transposition-cost-tooltip tr.is-selected td {
    color: #ffcf7a;
    background: rgba(255, 183, 67, 0.08);
}

.decryption-field:last-child .decryption-field-tooltip::before,
.decryption-transposition-fill-field .decryption-field-tooltip::before {
    right: 0;
    left: auto;
    transform: translate(-3px, 2px) rotate(45deg);
}

.decryption-field:last-child .decryption-field-tooltip::after,
.decryption-transposition-fill-field .decryption-field-tooltip::after {
    right: 0;
    left: auto;
}

.decryption-stepper {
    display: grid;
    grid-template-columns: 42px minmax(68px, 96px) 42px;
    gap: 8px;
    align-items: center;
}

.decryption-transposition-controls {
    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(220px, 1fr) minmax(150px, 190px);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.decryption-transposition-panel {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.decryption-stepper input,
.decryption-field input,
.decryption-field select {
    min-height: 42px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid rgba(111, 151, 138, 0.24);
    background: rgba(2, 10, 14, 0.78);
    color: #fff8ed;
    font: inherit;
}

.decryption-field select {
    appearance: none;
    padding-right: 34px;
    background:
        linear-gradient(45deg, transparent 50%, rgba(255, 183, 67, 0.88) 50%) right 17px center / 7px 7px no-repeat,
        linear-gradient(135deg, rgba(255, 183, 67, 0.88) 50%, transparent 50%) right 12px center / 7px 7px no-repeat,
        rgba(2, 10, 14, 0.78);
}

.decryption-stepper input {
    text-align: center;
    font-size: 1.18rem;
}

.decryption-stepper input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.decryption-stepper input[type="number"]::-webkit-outer-spin-button,
.decryption-stepper input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.decryption-transposition-fill-field input {
    max-width: 96px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.18rem;
}


/* Decryption transposition, Caesar and substitution visualizations. */

.decryption-transposition-preview {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.decryption-transposition-preview-heading {
    min-width: 0;
}

.decryption-transposition-table-wrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 6px;
    border: 1px solid rgba(193, 120, 46, 0.32);
    background: rgba(1, 8, 10, 0.78);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 183, 67, 0.42) rgba(3, 12, 17, 0.42);
}

.decryption-transposition-table {
    display: grid;
    grid-template-columns: minmax(66px, 74px) repeat(var(--transposition-columns), minmax(42px, 1fr));
    min-width: var(--transposition-min-width);
}

.decryption-transposition-table-heading,
.decryption-transposition-row-label,
.decryption-transposition-rank-cell,
.decryption-transposition-table-cell {
    display: grid;
    place-items: center;
    min-height: 36px;
    min-width: 0;
    padding: 6px 8px;
    border-right: 1px solid rgba(111, 151, 138, 0.18);
    border-bottom: 1px solid rgba(111, 151, 138, 0.18);
    color: rgba(246, 238, 228, 0.84);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92rem;
    line-height: 1;
}

.decryption-transposition-table-heading,
.decryption-transposition-row-label {
    color: var(--decryption-gold);
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    font-weight: 800;
}

.decryption-transposition-table-heading {
    position: sticky;
    top: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(11, 28, 32, 0.98), rgba(5, 17, 21, 0.98));
}

.decryption-transposition-corner {
    left: 0;
    z-index: 3;
}

.decryption-transposition-row-label {
    position: sticky;
    left: 0;
    z-index: 1;
    justify-items: start;
    background: rgba(6, 18, 22, 0.98);
    font-size: 0.82rem;
}

.decryption-transposition-read-label {
    color: var(--decryption-green-soft);
}

.decryption-transposition-rank-cell {
    color: rgba(246, 238, 228, 0.78);
    background: rgba(9, 25, 27, 0.92);
    font-weight: 800;
}

.decryption-transposition-table-heading[data-read-rank="1"],
.decryption-transposition-rank-cell[data-read-rank="1"],
.decryption-transposition-table-cell[data-read-rank="1"] {
    border-color: rgba(116, 240, 121, 0.38);
    background:
        linear-gradient(180deg, rgba(19, 79, 55, 0.58), rgba(5, 28, 22, 0.72)),
        rgba(5, 24, 18, 0.72);
    color: #eaffdf;
    box-shadow: inset 0 0 0 1px rgba(116, 240, 121, 0.12);
}

.decryption-transposition-table-cell[data-cell-state="space"],
.decryption-transposition-table-cell[data-cell-state="empty"] {
    color: rgba(246, 238, 228, 0.42);
}

.decryption-transposition-table-cell[data-cell-state="empty"] {
    background: rgba(2, 10, 14, 0.34);
}

.decryption-transposition-table-cell span,
.decryption-transposition-rank-cell span,
.decryption-transposition-table-heading span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decryption-transposition-ellipsis {
    color: rgba(255, 183, 67, 0.6);
    background: rgba(5, 17, 21, 0.9);
}

.decryption-transposition-empty {
    grid-column: 1 / -1;
    padding: 14px;
    color: rgba(246, 238, 228, 0.62);
    text-align: center;
}

.decryption-icon-button {
    min-width: 42px;
    min-height: 42px;
    border: 1px solid rgba(111, 151, 138, 0.24);
    background: rgba(8, 23, 30, 0.9);
    color: #fff0bd;
    font-size: 1.25rem;
    font-weight: 800;
}

.decryption-icon-button:hover,
.decryption-icon-button:focus-visible {
    border-color: rgba(255, 183, 67, 0.6);
    color: #ffffff;
}

.decryption-range {
    width: 100%;
    accent-color: var(--decryption-gold);
}

.decryption-caesar-wheel {
    --caesar-sector-width: 13.846deg;
    --letter-radius: 84px;
    --marker-radius: 58px;
    position: relative;
    isolation: isolate;
    width: 214px;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 213, 128, 0.72);
    background:
        radial-gradient(circle at 48% 46%, rgba(19, 26, 27, 0.98) 0 50%, transparent 50.4%),
        radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(13, 20, 21, 0.98) 52.4% 100%),
        linear-gradient(145deg, rgba(15, 20, 21, 0.98), rgba(3, 8, 10, 0.99));
    box-shadow:
        inset 0 0 0 3px rgba(255, 213, 128, 0.16),
        inset 0 0 24px rgba(0, 0, 0, 0.88),
        0 16px 34px rgba(0, 0, 0, 0.3);
}

.decryption-caesar-wheel::before,
.decryption-caesar-wheel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.decryption-caesar-wheel::before {
    inset: 0;
    z-index: 1;
    background:
        repeating-conic-gradient(from -6.923deg, rgba(239, 184, 91, 0.62) 0deg 0.7deg, transparent 0.7deg var(--caesar-sector-width));
    box-shadow: inset 0 0 0 1px rgba(255, 213, 128, 0.28);
}

.decryption-caesar-wheel::after {
    inset: 23%;
    z-index: 4;
    border: 1px solid rgba(255, 217, 136, 0.7);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.34),
        0 0 12px rgba(255, 213, 128, 0.16);
}

.decryption-caesar-shift-sector {
    position: absolute;
    inset: -1px;
    z-index: 2;
    border-radius: 50%;
    background:
        conic-gradient(from calc(var(--shift-angle) - 6.923deg), rgba(155, 255, 129, 0.4) 0deg var(--caesar-sector-width), transparent var(--caesar-sector-width) 360deg);
    box-shadow: 0 0 24px rgba(116, 240, 121, 0.22);
    pointer-events: none;
    -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 52.5% 100%);
    mask: radial-gradient(circle, transparent 0 52%, #000 52.5% 100%);
}

.decryption-caesar-center-disc {
    position: absolute;
    inset: 24%;
    z-index: 3;
    border-radius: 50%;
    background:
        radial-gradient(circle at 46% 44%, rgba(18, 25, 26, 0.98), rgba(5, 10, 12, 0.99) 72%),
        linear-gradient(145deg, rgba(16, 23, 24, 0.98), rgba(3, 8, 10, 0.99));
    box-shadow:
        inset 0 10px 22px rgba(0, 0, 0, 0.36),
        inset 0 -10px 22px rgba(255, 217, 136, 0.07);
    pointer-events: none;
}

.decryption-caesar-shift-arc {
    position: absolute;
    inset: 21.8%;
    z-index: 5;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, rgba(166, 255, 139, 0.78) 0deg var(--shift-sweep), transparent var(--shift-sweep) 360deg);
    filter: drop-shadow(0 0 8px rgba(116, 240, 121, 0.24));
    pointer-events: none;
    -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 49% 52%, transparent 53%);
    mask: radial-gradient(circle, transparent 0 48%, #000 49% 52%, transparent 53%);
}

.decryption-caesar-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 24px;
    height: 28px;
    z-index: 7;
    color: #e4b96a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(255, 199, 94, 0.14);
    transform:
        translate(-50%, -50%)
        rotate(var(--letter-angle))
        translateY(calc(-1 * var(--letter-radius)))
        rotate(var(--letter-angle-inverse));
}

.decryption-caesar-letter.is-highlighted {
    width: 31px;
    height: 33px;
    z-index: 8;
    color: #e1ffd5;
    font-size: 1.48rem;
    font-weight: 800;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.82),
        0 0 10px rgba(192, 255, 169, 0.62),
        0 0 18px rgba(116, 240, 121, 0.46);
}

.decryption-caesar-origin-dot,
.decryption-caesar-shift-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform:
        translate(-50%, -50%)
        rotate(var(--marker-angle))
        translateY(calc(-1 * var(--marker-radius)));
    pointer-events: none;
}

.decryption-caesar-origin-dot {
    --marker-angle: 0deg;
    background: radial-gradient(circle, #fff1b7 0 32%, #ffd66d 58%, #a66b29 100%);
    box-shadow:
        0 0 0 1px rgba(58, 34, 7, 0.34),
        0 0 13px rgba(255, 214, 109, 0.52);
}

.decryption-caesar-shift-dot {
    --marker-angle: var(--shift-angle);
    background: radial-gradient(circle, #d8ffc9 0 30%, #91f879 62%, #3e9140 100%);
    box-shadow:
        0 0 0 1px rgba(15, 49, 18, 0.34),
        0 0 15px rgba(116, 240, 121, 0.48);
}

.decryption-caesar-shift-value {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    display: grid;
    place-items: center;
    min-width: 46px;
    min-height: 30px;
    color: #bcffad;
    font-size: 1.24rem;
    font-weight: 900;
    line-height: 1;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(156, 255, 133, 0.34);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.decryption-caesar-map {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
}

.decryption-before-after {
    grid-column: 1 / -1;
}

.decryption-caesar-row,
.decryption-caesar-arrows {
    display: grid;
    grid-template-columns: repeat(26, minmax(0, 1fr));
    gap: 3px;
}

.decryption-caesar-row span {
    display: grid;
    place-items: center;
    min-height: 34px;
    border-radius: 2px;
    border: 1px solid rgba(193, 120, 46, 0.36);
    background:
        linear-gradient(180deg, rgba(7, 18, 24, 0.92), rgba(2, 9, 13, 0.95));
    color: #ffc36a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1;
    box-shadow:
        inset 0 1px 0 rgba(255, 205, 125, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.18);
}

.decryption-caesar-arrows span {
    display: grid;
    place-items: center;
    min-height: 26px;
    color: #ffc36a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.98rem;
    line-height: 1;
    text-shadow: 0 0 12px rgba(255, 183, 67, 0.2);
}

.decryption-caesar-row span.is-highlighted {
    border-color: rgba(116, 240, 121, 0.62);
    background:
        linear-gradient(180deg, rgba(15, 70, 36, 0.86), rgba(7, 35, 23, 0.94));
    color: var(--decryption-green-soft);
    box-shadow:
        inset 0 1px 0 rgba(187, 255, 160, 0.16),
        0 0 18px rgba(116, 240, 121, 0.12);
}

.decryption-substitution-panel {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.decryption-substitution-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid rgba(193, 120, 46, 0.38);
    overflow: hidden;
    background: rgba(3, 12, 17, 0.64);
}

.decryption-substitution-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 18px;
    border: 0;
    border-right: 1px solid rgba(193, 120, 46, 0.38);
    background: rgba(8, 23, 30, 0.86);
    color: rgba(246, 238, 228, 0.9);
    font: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    cursor: pointer;
}

.decryption-substitution-tab:last-child {
    border-right: 0;
}

.decryption-substitution-tab:hover,
.decryption-substitution-tab:focus-visible {
    color: #ffffff;
    background: rgba(18, 45, 45, 0.96);
}

.decryption-substitution-tab.is-active {
    color: #fff7e4;
    background: linear-gradient(180deg, rgba(191, 130, 56, 0.98), rgba(113, 69, 28, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.24);
}

.decryption-substitution-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
    min-width: 0;
}

.decryption-substitution-auto-controls {
    grid-template-columns: minmax(130px, 0.65fr) minmax(128px, 0.58fr) minmax(190px, 1.1fr) minmax(120px, 0.48fr) auto;
}

.decryption-vigenere-bruteforce-controls {
    grid-template-columns: minmax(150px, 0.75fr) minmax(120px, 0.48fr) auto;
}

.decryption-transposition-bruteforce-controls {
    grid-template-columns: minmax(196px, max-content) minmax(190px, 0.72fr) minmax(166px, 0.48fr) auto;
    align-items: start;
}

.decryption-transposition-bruteforce-controls > .decryption-primary-action,
.decryption-transposition-bruteforce-controls > .decryption-secondary-action {
    align-self: start;
    justify-self: start;
    min-width: 126px;
    min-height: 42px;
    margin-top: 27px;
}

.decryption-substitution-table-wrap {
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 183, 67, 0.42) rgba(3, 12, 17, 0.42);
}

.decryption-substitution-table {
    display: grid;
    grid-template-columns: minmax(108px, 112px) repeat(26, minmax(34px, 1fr));
    min-width: 1040px;
    border-radius: 5px;
    border: 1px solid rgba(193, 120, 46, 0.42);
    overflow: hidden;
    background: rgba(3, 12, 17, 0.74);
}

.decryption-substitution-table-heading,
.decryption-substitution-table-cell {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-right: 1px solid rgba(193, 120, 46, 0.32);
    border-bottom: 1px solid rgba(193, 120, 46, 0.32);
}

.decryption-substitution-table-heading {
    justify-content: start;
    padding: 0 10px;
    color: #fff5e7;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.decryption-substitution-table-cell {
    color: #ffc36a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.94rem;
    line-height: 1;
    background: linear-gradient(180deg, rgba(7, 18, 24, 0.92), rgba(2, 9, 13, 0.95));
}

.decryption-substitution-source {
    color: #fff8ed;
}

.decryption-substitution-table-cell[data-source-type="word"] {
    border-color: rgba(116, 240, 121, 0.42);
    color: var(--decryption-green-soft);
    background: linear-gradient(180deg, rgba(15, 70, 36, 0.72), rgba(7, 35, 23, 0.9));
}

.decryption-substitution-table-cell[data-source-type="frequency"] {
    color: #ffc36a;
    background: linear-gradient(180deg, rgba(46, 34, 15, 0.86), rgba(10, 18, 20, 0.94));
}

.decryption-substitution-cell-input {
    width: 30px;
    min-height: 32px;
    padding: 4px 2px;
    border-radius: 4px;
    border: 1px solid rgba(111, 151, 138, 0.28);
    background: rgba(1, 10, 14, 0.86);
    color: #ffb743;
    font: inherit;
    text-align: center;
    text-transform: uppercase;
}

.decryption-substitution-cell-input:focus {
    border-color: rgba(255, 183, 67, 0.72);
    box-shadow: 0 0 0 2px rgba(255, 183, 67, 0.14);
}

.decryption-substitution-lower-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.decryption-substitution-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.decryption-substitution-search-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 220px);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid rgba(111, 151, 138, 0.24);
    background: rgba(1, 10, 14, 0.68);
    color: rgba(246, 238, 228, 0.84);
    font-size: 0.86rem;
    line-height: 1.35;
}

.decryption-substitution-search-status > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.decryption-search-progress {
    height: 9px;
    border-radius: 999px;
    background: rgba(54, 44, 35, 0.78);
    overflow: hidden;
}

.decryption-search-progress span {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(116, 240, 121, 0.72), rgba(255, 213, 128, 0.92));
    box-shadow: 0 0 12px rgba(116, 240, 121, 0.2);
}

.decryption-substitution-search-results {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.decryption-substitution-search-heading {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.decryption-substitution-search-heading strong {
    color: var(--decryption-gold);
    font-size: 0.92rem;
}

.decryption-substitution-search-heading span {
    color: var(--decryption-muted);
    font-size: 0.82rem;
}

.decryption-substitution-search-results ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.decryption-substitution-search-candidate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(193, 120, 46, 0.28);
    background: rgba(4, 13, 18, 0.66);
}

.decryption-substitution-search-candidate > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.decryption-substitution-search-candidate strong {
    color: var(--decryption-green-soft);
    font-size: 0.94rem;
}

.decryption-substitution-search-candidate[data-score-tone="low"] {
    border-color: rgba(255, 128, 111, 0.42);
    background:
        linear-gradient(90deg, rgba(103, 24, 20, 0.24), rgba(4, 13, 18, 0.66));
}

.decryption-substitution-search-candidate[data-score-tone="medium"] {
    border-color: rgba(255, 212, 95, 0.46);
    background:
        linear-gradient(90deg, rgba(111, 78, 18, 0.22), rgba(4, 13, 18, 0.66));
}

.decryption-substitution-search-candidate[data-score-tone="high"] {
    border-color: rgba(116, 240, 121, 0.5);
    background:
        linear-gradient(90deg, rgba(22, 88, 42, 0.22), rgba(4, 13, 18, 0.66));
}

.decryption-substitution-search-candidate[data-score-tone="low"] strong {
    color: var(--decryption-score-low);
}

.decryption-substitution-search-candidate[data-score-tone="medium"] strong {
    color: var(--decryption-score-medium);
}

.decryption-substitution-search-candidate[data-score-tone="high"] strong {
    color: var(--decryption-score-high);
}

.decryption-substitution-search-candidate span,
.decryption-substitution-search-candidate small {
    color: var(--decryption-muted);
    font-size: 0.8rem;
    line-height: 1.3;
}

.decryption-substitution-search-candidate code {
    display: block;
    min-width: 0;
    color: #f6eee4;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.32;
    white-space: normal;
    overflow-wrap: anywhere;
}

.decryption-substitution-use-candidate {
    min-width: 136px;
    white-space: normal;
}

.decryption-substitution-auto-info {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 5px;
    border: 1px solid rgba(193, 120, 46, 0.34);
    background: rgba(4, 13, 18, 0.74);
}

.decryption-substitution-confidence {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 260px) 52px;
    gap: 10px;
    align-items: center;
    color: rgba(246, 238, 228, 0.88);
}

.decryption-substitution-confidence > span {
    color: #fff5e7;
    font-weight: 800;
}

.decryption-substitution-confidence strong {
    color: rgba(246, 238, 228, 0.88);
    text-align: right;
}

.decryption-confidence-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(54, 44, 35, 0.78);
    overflow: hidden;
}

.decryption-confidence-track span {
    display: block;
    width: var(--confidence);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 188, 73, 0.95), rgba(255, 213, 128, 0.95));
    box-shadow: 0 0 12px rgba(255, 183, 67, 0.32);
}

.decryption-substitution-evidence {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: 12px;
    min-width: 0;
}

.decryption-substitution-evidence > div {
    min-width: 0;
}

.decryption-substitution-evidence strong {
    color: var(--decryption-gold);
    font-size: 0.88rem;
}

.decryption-substitution-evidence p {
    margin: 5px 0 0;
    color: var(--decryption-muted);
    font-size: 0.84rem;
    line-height: 1.35;
}

.decryption-substitution-evidence ul {
    display: grid;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.decryption-substitution-evidence li {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: rgba(246, 238, 228, 0.78);
    font-size: 0.82rem;
}

.decryption-substitution-evidence li strong {
    overflow: hidden;
    color: var(--decryption-green-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decryption-substitution-evidence li small,
.decryption-substitution-evidence li span {
    min-width: 0;
    overflow: hidden;
    color: rgba(246, 238, 228, 0.62);
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Decryption results, score states, messages, help and open-surface composition. */

.decryption-result-card {
    align-content: start;
}

.decryption-result-heading {
    align-items: center;
}

.decryption-copy-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(116, 240, 121, 0.34);
    border-radius: 5px;
    background: rgba(5, 24, 18, 0.74);
    color: var(--decryption-green-soft);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.decryption-copy-action:hover,
.decryption-copy-action:focus-visible {
    border-color: rgba(156, 255, 133, 0.72);
    background: rgba(9, 42, 27, 0.86);
    color: #efffe8;
}

.decryption-copy-action[data-copied="true"] {
    border-color: rgba(255, 183, 67, 0.62);
    color: #ffe2a9;
}

.decryption-copy-action:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.decryption-result-output {
    min-height: 64px;
    max-height: 150px;
    overflow: auto;
    padding: 15px 17px;
    border-radius: 5px;
    border: 1px solid rgba(116, 240, 121, 0.32);
    background:
        linear-gradient(180deg, rgba(3, 42, 21, 0.48), rgba(2, 22, 13, 0.56)),
        rgba(1, 9, 9, 0.7);
    color: var(--decryption-green-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.02rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
}

.decryption-result-output[data-state="stale"] {
    border-color: rgba(193, 120, 46, 0.28);
    background: rgba(4, 13, 18, 0.72);
    color: rgba(246, 238, 228, 0.68);
}

.decryption-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: rgba(246, 238, 228, 0.75);
    font-size: 0.9rem;
}

.decryption-result-meta::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--decryption-score-low);
    box-shadow: 0 0 12px rgba(255, 128, 111, 0.46);
}

.decryption-result-meta[data-score-tone="medium"]::before {
    background: var(--decryption-score-medium);
    box-shadow: 0 0 12px rgba(255, 212, 95, 0.48);
}

.decryption-result-meta[data-score-tone="high"]::before {
    background: var(--decryption-score-high);
    box-shadow: 0 0 12px rgba(116, 240, 121, 0.52);
}

.decryption-score-badge {
    font-weight: 800;
}

.decryption-result-meta[data-score-tone="low"] .decryption-score-badge {
    color: var(--decryption-score-low);
}

.decryption-result-meta[data-score-tone="medium"] .decryption-score-badge {
    color: var(--decryption-score-medium);
}

.decryption-result-meta[data-score-tone="high"] .decryption-score-badge {
    color: var(--decryption-score-high);
}

.decryption-warning,
.decryption-error-box {
    padding: 10px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.decryption-warning {
    border: 1px solid rgba(255, 183, 67, 0.32);
    background: rgba(112, 69, 22, 0.24);
    color: #ffdca3;
}

.decryption-error-box {
    border: 1px solid rgba(255, 143, 114, 0.4);
    background: rgba(92, 25, 18, 0.32);
    color: #ffd4c8;
}

.decryption-candidates {
    display: grid;
    gap: 8px;
    margin-top: 4px;
}

.decryption-candidate {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 54px;
    gap: 10px;
    align-items: center;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(193, 120, 46, 0.24);
    background: rgba(4, 14, 19, 0.7);
    color: rgba(246, 238, 228, 0.82);
    text-align: left;
}

.decryption-candidate strong {
    min-width: 0;
    overflow: hidden;
    color: var(--decryption-green-soft);
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.86rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.decryption-candidate small {
    color: rgba(246, 238, 228, 0.64);
    text-align: right;
}

.decryption-candidate[data-score-tone="low"] {
    border-color: rgba(255, 128, 111, 0.42);
    background:
        linear-gradient(90deg, rgba(103, 24, 20, 0.24), rgba(4, 14, 19, 0.7));
}

.decryption-candidate[data-score-tone="medium"] {
    border-color: rgba(255, 212, 95, 0.46);
    background:
        linear-gradient(90deg, rgba(111, 78, 18, 0.22), rgba(4, 14, 19, 0.7));
}

.decryption-candidate[data-score-tone="high"] {
    border-color: rgba(116, 240, 121, 0.5);
    background:
        linear-gradient(90deg, rgba(22, 88, 42, 0.22), rgba(4, 14, 19, 0.7));
}

.decryption-candidate[data-score-tone="low"] small {
    color: var(--decryption-score-low);
}

.decryption-candidate[data-score-tone="medium"] small {
    color: var(--decryption-score-medium);
}

.decryption-candidate[data-score-tone="high"] small {
    color: var(--decryption-score-high);
}

.decryption-help-panel {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 0;
    overflow: auto;
    margin: 18px 18px var(--decryption-bottom-buffer) 0;
    padding: 16px;
}

.decryption-wikipedia-link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    min-height: 32px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 183, 67, 0.28);
    border-radius: 5px;
    background: rgba(9, 21, 27, 0.72);
    color: #ffe6ad;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.08);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.decryption-wikipedia-link:hover,
.decryption-wikipedia-link:focus-visible {
    border-color: rgba(255, 205, 125, 0.68);
    background: rgba(32, 55, 45, 0.84);
    color: #fff6df;
    transform: translateY(-1px);
}

.decryption-help-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(193, 120, 46, 0.58), transparent);
}

.decryption-help-example {
    display: grid;
    gap: 12px;
    color: rgba(246, 238, 228, 0.88);
    font-size: 0.92rem;
}

.decryption-help-example div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.decryption-help-example span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    border: 1px solid var(--decryption-gold);
    color: var(--decryption-gold);
    font-size: 0.8rem;
    font-weight: 800;
}

.decryption-help-example strong {
    color: var(--decryption-green);
}

.decryption-tip {
    display: grid;
    gap: 7px;
    padding: 12px 14px;
    border-radius: 5px;
    border: 1px solid rgba(193, 120, 46, 0.32);
    background: rgba(4, 13, 18, 0.76);
}

.decryption-tip strong {
    color: var(--decryption-gold);
}

.decryption-tip span {
    color: var(--decryption-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

body.decryption-open .map-radial-launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
}

body.decryption-open [data-panel-id="inspector"],
body.decryption-open [data-panel-id="top-bar"],
body.decryption-open [data-panel-id="active-riddle-bar"],
body.decryption-open #preset-player-modal,
body.decryption-open .map-layer-control,
body.decryption-open .map-view-switches {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.decryption-open .decryption-panel {
    z-index: 59;
}

body.decryption-open #map,
body.decryption-open .map-footer-credits,
body.decryption-open .map-scale-feedback {
    filter: blur(10px) saturate(0.9) brightness(0.82);
}

body.decryption-open #map {
    transform: scale(1.015);
}

body.decryption-open .maplibre-dom-desk-tool-surface,
body.decryption-open .immersive-air-css-overlay,
body.decryption-open .immersive-air-canvas,
body.decryption-open #map-engine-indicator {
    filter: blur(10px) saturate(0.9) brightness(0.82);
}


/* Decryption responsive layouts and coarse-pointer adaptations. */

@media (max-width: 860px), (pointer: coarse) {
    body.decryption-open #map,
    body.decryption-open .map-footer-credits,
    body.decryption-open .map-scale-feedback {
        filter: saturate(0.9) brightness(0.82);
    }

    body.decryption-open #map {
        transform: none;
    }

    body.decryption-open .maplibre-dom-desk-tool-surface,
    body.decryption-open .immersive-air-css-overlay,
    body.decryption-open .immersive-air-canvas,
    body.decryption-open #map-engine-indicator {
        filter: saturate(0.9) brightness(0.82);
    }
}

@media (min-width: 1181px) and (max-width: 1360px) {
    .decryption-shell {
        grid-template-columns: 270px minmax(0, 1fr) minmax(300px, 340px);
    }

    .decryption-sidebar {
        padding: 18px 14px var(--decryption-bottom-buffer);
    }

    .decryption-help-panel {
        margin: 18px 18px var(--decryption-bottom-buffer) 0;
    }

    .decryption-method-button {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        min-height: 98px;
        padding: 12px;
    }

    .decryption-method-icon {
        width: 84px;
        height: 84px;
        margin-left: -5px;
    }

    .decryption-parameter-grid {
        grid-template-columns: minmax(160px, 1fr) minmax(186px, 194px) minmax(160px, 1fr);
        gap: 16px;
    }

    .decryption-caesar-wheel {
        --letter-radius: 76px;
        --marker-radius: 52px;
        width: 194px;
    }
}

@media (min-width: 641px) and (max-width: 1180px) {
    .decryption-content {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .decryption-shell {
        grid-template-columns: 270px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: start;
        height: auto;
        min-height: 100%;
    }

    .decryption-sidebar {
        padding: 18px 14px var(--decryption-bottom-buffer);
    }

    .decryption-method-list {
        align-content: start;
        grid-auto-rows: max-content;
    }

    .decryption-main {
        overflow: visible;
    }

    .decryption-method-button {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        min-height: 98px;
        padding: 12px;
    }

    .decryption-method-icon {
        width: 84px;
        height: 84px;
        margin-left: -5px;
    }

    .decryption-method-copy span {
        font-size: 1rem;
    }

    .decryption-method-copy small {
        font-size: 0.8rem;
    }

    .decryption-help-panel {
        grid-column: 1 / -1;
        margin: 0 18px var(--decryption-bottom-buffer);
        max-height: none;
        overflow: visible;
    }

    .decryption-parameter-grid {
        grid-template-columns: minmax(160px, 1fr) minmax(190px, 200px) minmax(160px, 1fr);
    }

    .decryption-substitution-auto-controls,
    .decryption-transposition-controls,
    .decryption-vigenere-bruteforce-controls,
    .decryption-transposition-bruteforce-controls,
    .decryption-substitution-lower-grid,
    .decryption-substitution-evidence {
        grid-template-columns: 1fr 1fr;
    }

    .decryption-substitution-evidence > div:first-child {
        grid-column: 1 / -1;
    }

    .decryption-transposition-bruteforce-controls > .decryption-primary-action,
    .decryption-transposition-bruteforce-controls > .decryption-secondary-action {
        align-self: end;
        margin-top: 0;
    }

    .decryption-caesar-wheel {
        --letter-radius: 78px;
        --marker-radius: 54px;
        width: 200px;
    }
}

@media (max-width: 760px) {
    .decryption-panel {
        --decryption-bottom-buffer: 28px;
        top: calc(8px + env(safe-area-inset-top)) !important;
        right: calc(8px + env(safe-area-inset-right)) !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: calc(8px + env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none;
        height: auto !important;
        max-height: none;
        border-radius: 8px;
    }

    .decryption-panel .panel-header-row {
        min-height: 74px;
        padding: 14px 14px 12px 16px;
    }

    .decryption-panel .panel-title {
        font-size: 1.45rem;
    }

    .decryption-panel .panel-subtitle {
        font-size: 0.86rem;
    }

    .decryption-panel .panel-drag-handle,
    .decryption-panel .panel-resize-handle {
        display: none;
    }

    .decryption-content {
        height: calc(100% - 74px);
        overflow: auto;
    }

    .decryption-shell {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100%;
    }

    .decryption-sidebar {
        padding: 12px 12px var(--decryption-bottom-buffer);
        border-right: 0;
        border-bottom: 1px solid var(--decryption-line);
    }

    .decryption-method-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(248px, 84vw);
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .decryption-method-list::-webkit-scrollbar {
        display: none;
    }

    .decryption-method-button {
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 106px;
        padding: 9px 10px;
        scroll-snap-align: start;
    }

    .decryption-method-button.is-active::after {
        content: none;
    }

    .decryption-method-icon {
        width: 78px;
        height: 78px;
        margin-left: -4px;
    }

    .decryption-method-copy span {
        font-size: 0.96rem;
    }

    .decryption-method-copy small {
        font-size: 0.76rem;
    }

    .decryption-main {
        grid-template-rows: auto;
        margin-top: 0;
        padding: 12px 12px var(--decryption-bottom-buffer);
    }

    .decryption-card {
        padding: 13px;
    }

    .decryption-card-heading {
        display: grid;
    }

    .decryption-result-heading {
        grid-template-columns: 1fr auto;
    }

    .decryption-input-card textarea {
        min-height: 180px;
        font-size: 0.94rem;
    }

    .decryption-parameter-grid,
    .decryption-candidate,
    .decryption-substitution-controls,
    .decryption-substitution-auto-controls,
    .decryption-transposition-controls,
    .decryption-vigenere-bruteforce-controls,
    .decryption-transposition-bruteforce-controls,
    .decryption-substitution-lower-grid,
    .decryption-substitution-search-status,
    .decryption-substitution-search-candidate,
    .decryption-substitution-evidence,
    .decryption-substitution-confidence {
        grid-template-columns: 1fr;
    }

    .decryption-substitution-tabs {
        display: grid;
        width: 100%;
    }

    .decryption-substitution-tab {
        border-right: 0;
        border-bottom: 1px solid rgba(193, 120, 46, 0.38);
    }

    .decryption-substitution-tab:last-child {
        border-bottom: 0;
    }

    .decryption-substitution-table {
        min-width: 980px;
    }

    .decryption-substitution-action-row {
        display: grid;
    }

    .decryption-substitution-use-candidate {
        width: 100%;
    }

    .decryption-transposition-bruteforce-controls > .decryption-primary-action,
    .decryption-transposition-bruteforce-controls > .decryption-secondary-action {
        justify-self: stretch;
        width: 100%;
        margin-top: 0;
    }

    .decryption-substitution-confidence strong {
        text-align: left;
    }

    .decryption-caesar-wheel {
        width: min(214px, 68vw);
    }

    .decryption-candidate small {
        text-align: left;
    }

    .decryption-help-panel {
        margin: 0 12px var(--decryption-bottom-buffer);
    }
}


/* Carnet de Détection: a map-first, removable feature surface. */

.detection-panel {
    --detection-header-height: 72px;
    --detection-gold: #f0b94b;
    --detection-gold-strong: #ffd27a;
    --detection-ink: #10273c;
    --detection-ink-soft: #19384e;
    --detection-paper: #f8f3e8;
    --detection-paper-muted: #d8d2c5;
    --detection-line: rgba(240, 185, 75, 0.22);
    --detection-available-height: calc(100dvh - 32px);
    --detection-panel-max-height: min(85dvh, var(--detection-available-height));
    position: fixed;
    z-index: 430;
    top: 50%;
    bottom: auto;
    left: 50%;
    width: min(500px, calc(100vw - 158px));
    height: min(calc(100dvh - 148px), var(--detection-panel-max-height));
    max-height: var(--detection-panel-max-height);
    min-height: 410px;
    overflow: hidden;
    color: var(--detection-paper);
    background:
        radial-gradient(circle at 16% -8%, rgba(52, 101, 129, 0.45), transparent 38%),
        linear-gradient(150deg, rgba(14, 43, 65, 0.985), rgba(8, 29, 47, 0.985));
    border: 1px solid rgba(255, 205, 102, 0.42);
    border-radius: 24px;
    box-shadow: 0 28px 72px rgba(0, 16, 28, 0.42), 0 0 0 1px rgba(6, 27, 42, 0.4) inset;
    isolation: isolate;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    animation: detection-panel-enter 180ms ease-out both;
}

.detection-panel.hidden {
    display: none !important;
}

.detection-panel[data-detection-view="list"] {
    --detection-list-max-height: min(calc(100dvh - 148px), var(--detection-panel-max-height));
    --detection-list-header-height: var(--detection-header-height);
    height: auto;
    min-height: 0;
    max-height: var(--detection-list-max-height);
}

.detection-panel[data-detection-view="list"] .detection-content {
    grid-template-rows: auto minmax(0, auto);
    height: auto;
    max-height: var(--detection-list-max-height);
}

.detection-panel[data-detection-view="list"] .detection-content-scroll {
    max-height: calc(var(--detection-list-max-height) - var(--detection-list-header-height));
}

.detection-panel[data-detection-view="create"] {
    --detection-create-max-height: min(calc(100dvh - 148px), var(--detection-panel-max-height));
    --detection-create-header-height: var(--detection-header-height);
    height: auto;
    min-height: 0;
    max-height: var(--detection-create-max-height);
}

.detection-panel[data-detection-view="create"] .detection-content {
    grid-template-rows: auto minmax(0, auto);
    height: auto;
    max-height: var(--detection-create-max-height);
}

.detection-panel[data-detection-view="create"] .detection-content-scroll {
    max-height: calc(var(--detection-create-max-height) - var(--detection-create-header-height));
}

.detection-panel[data-detection-view="session"],
.detection-panel[data-detection-view="summary"] {
    --detection-detail-max-height: min(calc(100dvh - 148px), var(--detection-panel-max-height));
    height: auto;
    min-height: 0;
    max-height: var(--detection-detail-max-height);
}

.detection-panel[data-detection-view="session"] .detection-content,
.detection-panel[data-detection-view="summary"] .detection-content {
    grid-template-rows: auto minmax(0, auto);
    height: auto;
    max-height: var(--detection-detail-max-height);
}

.detection-panel[data-detection-view="session"] .detection-content-scroll,
.detection-panel[data-detection-view="summary"] .detection-content-scroll {
    max-height: calc(var(--detection-detail-max-height) - var(--detection-header-height));
}

.detection-terrain-hud {
    display: none;
}

.detection-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px);
    background-size: 100% 5px;
    opacity: 0.7;
}

.detection-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.detection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--detection-header-height);
    padding: 12px 16px 11px;
    border-bottom: 1px solid var(--detection-line);
    background: linear-gradient(90deg, rgba(5, 25, 41, 0.64), rgba(18, 55, 77, 0.38));
}

.detection-header-leading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.detection-header-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}

.detection-header .panel-drag-handle,
.detection-finding-window-drag-handle {
    background: rgba(255, 245, 231, 0.08);
    border-color: rgba(240, 185, 75, 0.24);
}

.detection-header .panel-drag-handle::before,
.detection-finding-window-drag-handle::before {
    background:
        linear-gradient(rgba(255, 241, 217, 0.56), rgba(255, 241, 217, 0.56)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.56), rgba(255, 241, 217, 0.56)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(255, 241, 217, 0.56), rgba(255, 241, 217, 0.56)) center 10px / 12px 1.5px no-repeat;
}

.detection-header h2,
.detection-view h3,
.detection-section-heading h4,
.detection-dialog h3 {
    margin: 0;
    color: #fff8e9;
    font-family: Cambria, Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.detection-header h2 {
    font-size: 18px;
    line-height: 1.1;
}

.detection-header p {
    max-width: 280px;
    margin: 4px 0 0;
    overflow: hidden;
    color: rgba(233, 233, 223, 0.66);
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-header-mark {
    position: relative;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255, 204, 105, 0.48);
    border-radius: 13px;
    background: rgba(240, 185, 75, 0.08);
}

.detection-header-mark:not(.has-asset)::before,
.detection-header-mark:not(.has-asset)::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.detection-header-mark:not(.has-asset)::before {
    inset: 8px;
    border: 1.5px solid var(--detection-gold);
}

.detection-header-mark:not(.has-asset)::after {
    inset: 13px;
    border: 1px dashed var(--detection-gold-strong);
}

.detection-header-mark:not(.has-asset) span {
    position: absolute;
    z-index: 1;
    left: 17px;
    top: 5px;
    width: 2px;
    height: 26px;
    background: var(--detection-gold);
    transform: rotate(38deg);
}

.detection-header-mark.has-asset {
    overflow: hidden;
}

.detection-header-mark.has-asset img {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 132%;
    height: 132%;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 12, 22, 0.28));
    transform: translate(-50%, -50%);
}

.detection-icon-button {
    display: inline-grid;
    flex: 0 0 var(--ui-compact-control-size);
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    padding: 0;
    place-items: center;
    color: rgba(255, 248, 235, 0.88);
    border: 1px solid rgba(240, 185, 75, 0.24);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
        rgba(5, 25, 41, 0.5);
    box-shadow:
        0 6px 16px rgba(0, 12, 22, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(6, 27, 42, 0.16);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.detection-icon-button:hover:not(:disabled),
.detection-icon-button:focus-visible:not(:disabled) {
    color: var(--detection-gold-strong);
    border-color: rgba(255, 205, 102, 0.58);
    background:
        linear-gradient(145deg, rgba(240, 185, 75, 0.2), rgba(240, 185, 75, 0.07)),
        rgba(5, 25, 41, 0.72);
    box-shadow:
        0 8px 20px rgba(0, 12, 22, 0.28),
        0 0 0 3px rgba(240, 185, 75, 0.08),
        inset 0 1px 0 rgba(255, 248, 226, 0.14);
    transform: translateY(-1px);
}

.detection-icon-button:focus-visible {
    outline: 2px solid rgba(255, 210, 122, 0.86);
    outline-offset: 2px;
}

.detection-icon-button:active:not(:disabled) {
    transform: translateY(0);
}

.detection-icon-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detection-header-back svg {
    width: 16px;
    height: 16px;
}

.detection-content-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(240, 185, 75, 0.45) transparent;
}

.detection-content-scroll::-webkit-scrollbar {
    width: 7px;
}

.detection-content-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(240, 185, 75, 0.42);
}

.detection-view {
    display: grid;
    gap: 15px;
    padding: 18px;
}

.detection-view-intro {
    padding: 4px 2px 1px;
}

.detection-view-intro h3 {
    margin-top: 5px;
    font-size: 25px;
}

.detection-view-intro p {
    margin: 5px 0 0;
    color: var(--detection-paper-muted);
    font-size: 12px;
    line-height: 1.5;
}

.detection-kicker {
    color: var(--detection-gold-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.detection-outing-card,
.detection-card-section,
.detection-session-hero,
.detection-live-metrics,
.detection-summary-score,
.detection-summary-counts {
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.025));
    box-shadow: 0 12px 28px rgba(2, 19, 31, 0.16);
}

.detection-card-meta,
.detection-date,
.detection-coverage-note,
.detection-empty-entries {
    color: rgba(232, 232, 222, 0.65);
    font-size: 10px;
    line-height: 1.45;
}

.detection-primary-button,
.detection-secondary-button,
.detection-quick-button,
.detection-text-button,
.detection-card-link,
.detection-danger-button {
    min-height: 42px;
    padding: 9px 14px;
    font: 750 11px/1.2 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.02em;
    border-radius: 12px;
    cursor: pointer;
}

.detection-primary-button {
    color: #12293b;
    border: 1px solid #f3c566;
    background: linear-gradient(135deg, #ffe19a, #eaaa38);
    box-shadow: 0 7px 20px rgba(231, 166, 44, 0.18);
}

.detection-primary-button:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.detection-secondary-button {
    color: #f6eddb;
    border: 1px solid rgba(240, 185, 75, 0.35);
    background: rgba(240, 185, 75, 0.08);
}

.detection-text-button {
    min-height: 34px;
    padding-inline: 8px;
    color: var(--detection-gold-strong);
    border: 0;
    background: transparent;
}

.detection-primary-button:disabled,
.detection-secondary-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.detection-list-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(3, 22, 36, 0.42);
}

.detection-list-tabs button {
    min-height: 43px;
    padding: 5px 4px;
    color: rgba(232, 232, 222, 0.62);
    font: 800 9px/1.15 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}

.detection-list-tabs button[aria-selected="true"] {
    color: #fff0c9;
    border-color: rgba(240, 185, 75, 0.38);
    background: linear-gradient(145deg, rgba(240, 185, 75, 0.19), rgba(240, 185, 75, 0.07));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.detection-list-tabs button:focus-visible {
    outline: 2px solid var(--detection-gold);
    outline-offset: 2px;
}

.detection-list-action-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}

.detection-immediate-button {
    position: relative;
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    gap: 11px;
    align-items: center;
    justify-content: flex-start;
    color: #e8eef1;
    text-align: left;
    border-color: rgba(115, 170, 198, 0.42);
    background: linear-gradient(145deg, rgba(31, 75, 99, 0.68), rgba(9, 38, 57, 0.82));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.045);
}

.detection-immediate-button:hover {
    border-color: rgba(145, 202, 228, 0.68);
    background: linear-gradient(145deg, rgba(38, 90, 117, 0.78), rgba(10, 45, 66, 0.92));
    transform: translateY(-1px);
}

.detection-action-icon {
    display: grid;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    place-items: center;
    font-size: 17px;
    border: 1px solid currentColor;
    border-radius: 10px;
    opacity: 0.9;
}

.detection-action-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.detection-action-copy strong {
    font-size: 12px;
    line-height: 1.2;
}

.detection-action-copy small {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.72;
}

.detection-alternative-action {
    display: grid;
    gap: 8px;
}

.detection-action-separator {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 9px;
    align-items: center;
    color: rgba(224, 228, 226, 0.48);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.detection-action-separator::before,
.detection-action-separator::after {
    content: "";
    height: 1px;
    background: rgba(255, 255, 255, 0.09);
}

.detection-immediate-button::before,
.detection-immediate-button::after {
    position: absolute;
    left: 50%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
}

.detection-immediate-button::before {
    content: "";
    bottom: calc(100% + 4px);
    border: 5px solid transparent;
    border-top-color: #f3c566;
    transform: translate(-50%, 3px);
}

.detection-immediate-button::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 14px);
    width: max-content;
    max-width: min(230px, calc(100vw - 56px));
    padding: 8px 10px;
    color: #10293c;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    border: 1px solid #f3c566;
    border-radius: 9px;
    background: #f8dfaa;
    box-shadow: 0 8px 20px rgba(2, 17, 28, 0.32);
    transform: translate(-50%, 5px);
}

.detection-immediate-button:is(:hover, :focus-visible)::before,
.detection-immediate-button:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.detection-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 25px 17px 20px;
    text-align: center;
    border: 1px dashed rgba(240, 185, 75, 0.24);
    border-radius: 18px;
    background: rgba(5, 25, 41, 0.24);
}

.detection-empty-state h3 {
    font-size: 18px;
}

.detection-empty-state p {
    max-width: 290px;
    margin: 0;
    color: var(--detection-paper-muted);
    font-size: 11px;
    line-height: 1.55;
}

.detection-empty-radar {
    position: relative;
    width: 62px;
    height: 62px;
    margin-bottom: 4px;
    border: 1px solid rgba(240, 185, 75, 0.45);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 185, 75, 0.11) 0 5%, transparent 6% 32%, rgba(240, 185, 75, 0.16) 33% 34%, transparent 35% 63%, rgba(240, 185, 75, 0.13) 64% 65%, transparent 66%);
}

.detection-empty-radar::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 1px;
    height: 27px;
    background: var(--detection-gold);
    transform: rotate(42deg);
    transform-origin: 50% 100%;
}

.detection-outing-list {
    display: grid;
    gap: 10px;
}

.detection-zone-group-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: -2px;
}

.detection-zone-group-create {
    display: inline-flex;
    min-height: 30px;
    padding: 0 14px;
    gap: 6px;
    align-items: center;
    color: var(--detection-paper);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(181, 203, 214, 0.5);
    border-radius: 999px;
    background: rgba(20, 54, 74, 0.72);
    cursor: pointer;
}

.detection-zone-group-create:hover,
.detection-zone-group-create:focus-visible {
    color: #10293c;
    border-color: var(--detection-gold);
    background: var(--detection-gold);
}

.detection-zone-group,
.detection-zone-ungrouped {
    display: grid;
    min-height: 42px;
    gap: 10px;
    padding: 9px;
    border: 1px solid rgba(112, 160, 184, 0.24);
    border-radius: 16px;
    background: rgba(5, 27, 43, 0.3);
    transition: border-color 120ms ease, background 120ms ease;
}

.detection-zone-group.drop-target,
.detection-zone-group-body.drop-target,
.detection-zone-ungrouped.drop-target {
    border-color: var(--detection-gold);
    background: rgba(245, 196, 81, 0.1);
    box-shadow: inset 0 0 0 1px rgba(245, 196, 81, 0.18);
}

.detection-zone-group-header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px 30px;
    gap: 5px;
    align-items: center;
}

.detection-zone-group-toggle,
.detection-zone-group-name,
.detection-zone-group-icon {
    padding: 0;
    color: var(--detection-paper);
    font: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.detection-zone-group-toggle,
.detection-zone-group-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
}

.detection-zone-group-toggle {
    width: 30px;
}

.detection-zone-group-name {
    overflow: hidden;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-zone-group-name-input {
    min-width: 0;
    height: 31px;
    padding: 0 8px;
    color: var(--detection-paper);
    font: 700 15px Georgia, "Times New Roman", serif;
    border: 1px solid var(--detection-gold);
    border-radius: 8px;
    outline: none;
    background: rgba(3, 23, 38, 0.88);
}

.detection-zone-ungrouped-title span {
    color: var(--detection-paper-muted);
    font-size: 10px;
    font-weight: 700;
}

.detection-zone-group-icon:hover,
.detection-zone-group-icon:focus-visible,
.detection-zone-group-toggle:hover,
.detection-zone-group-toggle:focus-visible {
    color: var(--detection-gold);
    background: rgba(245, 196, 81, 0.1);
}

.detection-zone-group-icon svg,
.detection-zone-group-toggle svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detection-zone-group-icon.is-danger {
    color: #e5aaa6;
}

.detection-zone-group-body {
    display: grid;
    min-height: 32px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.detection-zone-group.is-collapsed .detection-zone-group-body {
    display: none;
}

.detection-zone-group.is-hidden-on-map {
    opacity: 0.72;
}

.detection-zone-group-empty,
.detection-zone-ungrouped-title {
    margin: 0;
    padding: 8px 6px;
    color: var(--detection-paper-muted);
    font-size: 10px;
}

.detection-zone-ungrouped-title {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detection-outing-card {
    position: relative;
    padding: 14px;
}

.detection-outing-card.drop-before::before,
.detection-outing-card.drop-after::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--detection-gold);
    box-shadow: 0 0 8px rgba(245, 196, 81, 0.5);
}

.detection-outing-card.drop-before::before {
    top: 4px;
}

.detection-outing-card.drop-after::after {
    bottom: 4px;
}

.detection-outing-card .detection-card-grip {
    margin-top: 4px;
    opacity: 0.68;
    cursor: grab;
    background-image:
        radial-gradient(circle, rgba(232, 232, 222, 0.68) 1.2px, transparent 1.3px),
        radial-gradient(circle, rgba(232, 232, 222, 0.68) 1.2px, transparent 1.3px);
}

.detection-outing-card .detection-card-grip:hover {
    opacity: 1;
}

.detection-outing-card .detection-card-grip.is-dragging {
    cursor: grabbing;
}

.detection-card-heading > div {
    min-width: 0;
    flex: 1 1 auto;
}

.detection-card-heading,
.detection-section-heading,
.detection-session-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.detection-card-heading h3,
.detection-session-hero h3 {
    margin-top: 6px;
    font-size: 17px;
}

.detection-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 19px;
    padding: 3px 7px;
    color: #cfe3d8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid rgba(126, 208, 165, 0.32);
    border-radius: 999px;
    background: rgba(66, 151, 108, 0.12);
}

[data-status="completed"] .detection-status-pill {
    color: #d9e0e4;
    border-color: rgba(190, 208, 218, 0.2);
    background: rgba(190, 208, 218, 0.08);
}

[data-status="draft"] .detection-status-pill {
    color: #f5dca4;
    border-color: rgba(240, 185, 75, 0.3);
    background: rgba(240, 185, 75, 0.1);
}

.detection-card-meta {
    margin-top: 9px;
}

.detection-card-meta > span + span::before {
    content: "–";
    margin: 0 0.45em;
    color: rgba(232, 232, 222, 0.38);
}

.detection-card-progress {
    height: 3px;
    margin: 11px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.detection-card-progress span {
    display: block;
    width: var(--detection-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #53a894, #f0bd55);
}

.detection-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ui-compact-control-size);
    gap: 7px;
}

.detection-card-link {
    display: flex;
    width: 100%;
    min-height: 40px;
    padding: 7px 8px 7px 13px;
    align-items: center;
    justify-content: space-between;
    color: #f8e8c5;
    border: 1px solid rgba(240, 185, 75, 0.28);
    background: linear-gradient(135deg, rgba(240, 185, 75, 0.11), rgba(13, 47, 68, 0.68));
    box-shadow: 0 8px 18px rgba(3, 21, 34, 0.18), inset 0 1px rgba(255, 255, 255, 0.04);
}

.detection-card-link:hover {
    color: #fff4da;
    border-color: rgba(255, 211, 116, 0.55);
    background: linear-gradient(135deg, rgba(240, 185, 75, 0.18), rgba(16, 55, 78, 0.82));
    transform: translateY(-1px);
}

.detection-card-link-icon {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: #10293c;
    font-size: 14px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ffe39e, #eab046);
    box-shadow: 0 4px 10px rgba(231, 166, 44, 0.2);
}

.detection-card-link-icon svg {
    width: 14px;
    height: 14px;
}

.detection-delete-outing-button {
    display: grid;
    width: var(--ui-compact-control-size);
    height: auto;
    min-width: var(--ui-compact-control-size);
    min-height: 40px;
    padding: 0;
    place-items: center;
    color: rgba(238, 190, 181, 0.78);
    border: 1px solid rgba(218, 119, 101, 0.2);
    border-radius: 12px;
    background: rgba(159, 61, 49, 0.055);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.detection-delete-outing-button:hover:not(:disabled),
.detection-delete-outing-button:focus-visible:not(:disabled) {
    color: #fff8eb;
    border-color: rgba(255, 174, 157, 0.54);
    background: #d84a3a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
    transform: translateY(-1px);
}

.detection-header-close:hover:not(:disabled),
.detection-header-close:focus-visible:not(:disabled) {
    transform: none;
}

.detection-delete-outing-button:focus-visible {
    outline: 2px solid #f0a18f;
    outline-offset: 2px;
}

.detection-delete-outing-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.detection-form,
.detection-profile-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.detection-profile-fields,
.detection-field-wide {
    grid-column: 1 / -1;
}

.detection-profile-fields {
    padding: 13px;
    border: 1px solid rgba(240, 185, 75, 0.16);
    border-radius: 15px;
    background: rgba(4, 24, 40, 0.26);
}

.detection-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    color: rgba(247, 239, 222, 0.82);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detection-field input,
.detection-field select,
.detection-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    box-sizing: border-box;
    padding: 9px 10px;
    color: #f9f4e9;
    font: 500 12px/1.35 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    outline: none;
    background: rgba(4, 24, 39, 0.62);
}

.detection-field select option {
    color: #f9f4e9;
    background: #102b42;
}

.detection-field textarea {
    min-height: 78px;
    resize: vertical;
}

.detection-field input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.detection-field input[type="number"]::-webkit-inner-spin-button,
.detection-field input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.detection-field input:focus,
.detection-field select:focus,
.detection-field textarea:focus {
    border-color: rgba(132, 190, 218, 0.62);
    box-shadow: 0 0 0 2px rgba(105, 176, 210, 0.1);
}

.detection-owner-assigned-zone-count input[readonly] {
    color: rgba(249, 244, 233, 0.68);
    border-color: rgba(240, 185, 75, 0.16);
    background: rgba(255, 255, 255, 0.045);
    cursor: default;
}

.detection-zone-field {
    display: grid;
    gap: 9px;
    padding: 13px;
    border: 1px dashed rgba(240, 185, 75, 0.32);
    border-radius: 15px;
    background: rgba(240, 185, 75, 0.045);
}

.detection-zone-field[data-zone-state="required"] {
    border-color: rgba(240, 185, 75, 0.54);
    background: linear-gradient(145deg, rgba(240, 185, 75, 0.09), rgba(240, 185, 75, 0.035));
    box-shadow: inset 0 1px rgba(255, 231, 178, 0.035);
}

.detection-zone-field[data-zone-state="ready"] {
    border-style: solid;
    border-color: rgba(94, 190, 158, 0.48);
    background: linear-gradient(145deg, rgba(69, 158, 129, 0.1), rgba(31, 92, 82, 0.045));
}

.detection-zone-field > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
}

.detection-zone-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.detection-zone-status {
    padding: 3px 7px;
    color: #ffe0a0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid rgba(240, 185, 75, 0.35);
    border-radius: 999px;
    background: rgba(240, 185, 75, 0.1);
}

.detection-zone-field[data-zone-state="ready"] .detection-zone-status {
    color: #bcebdc;
    border-color: rgba(94, 190, 158, 0.42);
    background: rgba(69, 158, 129, 0.12);
}

.detection-zone-field > div:first-child > small {
    grid-column: 1 / -1;
}

.detection-field-label {
    color: #f7edda;
    font-size: 11px;
    font-weight: 750;
}

.detection-owner-field {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(240, 185, 75, 0.2);
    border-radius: 15px;
    background: rgba(4, 24, 40, 0.3);
}

.detection-owner-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.detection-owner-field-heading small {
    color: var(--detection-paper-muted);
    font-size: 9px;
}

.detection-selected-owners {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detection-selected-owners > span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px 4px 4px;
    border: 1px solid rgba(240, 185, 75, 0.22);
    border-radius: 999px;
    background: rgba(240, 185, 75, 0.07);
}

.detection-selected-owners strong {
    overflow: hidden;
    color: #f7edda;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-open-owner-book {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.detection-owner-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    box-sizing: border-box;
    border: 1px solid rgba(240, 185, 75, 0.34);
    border-radius: 50%;
    object-fit: cover;
}

.detection-owner-avatar-fallback {
    display: grid;
    place-items: center;
    color: #ffe1a3;
    font: 800 10px/1 "Segoe UI", system-ui, sans-serif;
    background: linear-gradient(145deg, rgba(240, 185, 75, 0.18), rgba(64, 123, 132, 0.18));
}

.detection-selected-owners .detection-owner-avatar {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
}

.detection-zone-field small {
    color: var(--detection-paper-muted);
    font-size: 10px;
}

.detection-zone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.detection-zone-draw-button,
.detection-create-outing-button {
    display: inline-flex;
    width: 100%;
    min-height: 58px;
    gap: 11px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.detection-zone-draw-button.detection-primary-button {
    box-shadow: 0 9px 24px rgba(231, 166, 44, 0.24), inset 0 1px rgba(255, 255, 255, 0.42);
}

.detection-zone-draw-button.detection-primary-button .detection-action-copy small {
    color: #243b4d;
    opacity: 1;
}

.detection-create-outing-button[data-ready="true"] {
    min-height: 62px;
    box-shadow: 0 11px 28px rgba(231, 166, 44, 0.3), inset 0 1px rgba(255, 255, 255, 0.48);
}

.detection-create-outing-button:disabled {
    color: rgba(224, 231, 233, 0.58);
    border-color: rgba(155, 174, 185, 0.2);
    background: linear-gradient(145deg, rgba(91, 116, 131, 0.26), rgba(47, 69, 84, 0.3));
    box-shadow: none;
    opacity: 1;
    filter: none;
}

.detection-session-zone-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px dashed rgba(240, 185, 75, 0.36);
    border-radius: 15px;
    background: rgba(240, 185, 75, 0.055);
}

.detection-session-zone-editor > div:first-child {
    display: grid;
    gap: 3px;
}

.detection-session-zone-editor span,
.detection-session-zone-editor small {
    color: var(--detection-paper-muted);
    font-size: 9px;
    line-height: 1.35;
}

.detection-session-zone-editor strong {
    color: #fff0c9;
    font-size: 12px;
}

.detection-session-zone-editor[data-drawing="true"] {
    grid-template-columns: minmax(0, 1fr);
    border-style: solid;
    border-color: rgba(255, 210, 115, 0.62);
    background: rgba(240, 185, 75, 0.1);
}

.detection-zone-appearance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-column: 1 / -1;
    gap: 10px 14px;
    min-width: 0;
    margin: 2px 0 0;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid rgba(240, 185, 75, 0.2);
}

.detection-zone-appearance legend {
    float: left;
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 1px;
    color: #fff0c9;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.detection-zone-color-control,
.detection-zone-opacity-control,
.detection-zone-portrait-control {
    color: var(--detection-paper-muted);
    font-size: 9px;
}

.detection-zone-color-control {
    display: grid;
    gap: 5px;
}

.detection-zone-color-control input {
    width: 42px;
    height: 30px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(4, 24, 39, 0.55);
    cursor: pointer;
}

.detection-zone-opacity-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 9px;
    align-items: center;
}

.detection-zone-opacity-control span {
    grid-column: 1 / -1;
}

.detection-zone-opacity-control input {
    width: 100%;
    accent-color: var(--detection-gold);
}

.detection-zone-opacity-control output {
    min-width: 34px;
    color: #fff0c9;
    font-weight: 750;
    text-align: right;
}

.detection-zone-portrait-control {
    display: inline-flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center;
}

.detection-zone-portrait-control input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: var(--detection-gold);
}

.detection-authorization {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    padding: 12px;
    color: #e9e2d3;
    font-size: 10px;
    line-height: 1.45;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
}

.detection-authorization input {
    width: 17px;
    height: 17px;
    accent-color: var(--detection-gold);
}

.detection-session-hero,
.detection-card-section {
    padding: 14px;
}

.detection-session-hero p {
    margin: 5px 0 0;
    color: var(--detection-paper-muted);
    font-size: 10px;
}

.detection-session-owners {
    display: grid;
    gap: 2px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid rgba(240, 185, 75, 0.14);
}

.detection-session-owner-label {
    color: rgba(237, 232, 220, 0.52);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detection-session-owner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.detection-session-owner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.detection-session-owner .detection-owner-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.detection-session-owner strong {
    color: #f7edda;
    font-size: 10px;
    line-height: 1.4;
}

.detection-gps-state {
    color: #bcd8cf;
    font-size: 9px;
    white-space: nowrap;
}

.detection-gps-control {
    display: grid;
    justify-items: end;
    gap: 2px;
}

.detection-gps-detail {
    max-width: 190px;
    color: var(--detection-paper-muted);
    font-size: 8px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: right;
}

.detection-gps-detail[hidden] {
    display: none;
}

.detection-gps-retry {
    min-height: 28px;
    padding: 4px 0;
    font-size: 9px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detection-gps-retry[hidden] {
    display: none;
}

.detection-gps-state::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #68c29c;
    box-shadow: 0 0 0 3px rgba(104, 194, 156, 0.12);
}

.detection-gps-state[data-detection-gps-status="unavailable"]::before,
.detection-gps-state[data-detection-gps-status="denied"]::before {
    background: #b9a98b;
    box-shadow: none;
}

.detection-live-metrics,
.detection-summary-counts {
    display: grid;
    overflow: hidden;
}

.detection-live-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detection-summary-counts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detection-live-metrics > div,
.detection-summary-counts > div,
.detection-summary-primary-stats > div {
    display: grid;
    gap: 5px;
    padding: 13px 9px;
    text-align: center;
}

.detection-live-metrics > div + div,
.detection-summary-counts > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.detection-live-metrics span,
.detection-summary-counts span,
.detection-summary-primary-stats span {
    color: rgba(231, 232, 225, 0.6);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.detection-live-metrics strong,
.detection-summary-counts strong,
.detection-summary-primary-stats strong {
    color: #fff4df;
    font: 600 17px/1 Cambria, Georgia, serif;
}

.detection-session-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    padding: 5px;
    border: 1px solid rgba(240, 185, 75, 0.18);
    border-radius: 16px;
    background: rgba(4, 24, 39, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.detection-session-main {
    display: inline-flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    color: #10283a;
    border-color: #f4c86e;
    background: linear-gradient(135deg, #ffe3a0, #edb449);
    box-shadow: 0 7px 18px rgba(231, 166, 44, 0.2), inset 0 1px rgba(255, 255, 255, 0.48);
}

.detection-session-main:hover:not(:disabled) {
    border-color: #ffe0a0;
    background: linear-gradient(135deg, #ffeab8, #f1bb53);
    transform: translateY(-1px);
}

.detection-record-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #b7352d;
    box-shadow: 0 0 0 4px rgba(183, 53, 45, 0.13);
}

.detection-finish-button {
    display: inline-flex;
    min-width: 91px;
    min-height: 50px;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    color: #efc9c1;
    border: 1px solid rgba(218, 119, 101, 0.25);
    border-radius: 12px;
    background: rgba(159, 61, 49, 0.08);
}

.detection-finish-button::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    border-radius: 2px;
    opacity: 0.78;
}

.detection-finish-button:hover {
    color: #ffe9e3;
    border-color: rgba(232, 139, 121, 0.48);
    background: rgba(159, 61, 49, 0.16);
}

.detection-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detection-session-lock {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    color: #f3dfb2;
    border: 1px solid rgba(240, 185, 75, 0.32);
    border-radius: 14px;
    background: rgba(240, 185, 75, 0.08);
}

.detection-session-lock strong {
    font: 600 14px/1.2 Cambria, Georgia, serif;
}

.detection-session-lock span {
    color: rgba(237, 234, 224, 0.7);
    font-size: 9px;
    line-height: 1.45;
}

.detection-finalization-status .detection-secondary-button {
    justify-self: start;
    margin-top: 4px;
}

.detection-quick-actions[data-has-zone-edit="true"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.detection-quick-actions[data-has-zone-edit="true"] .detection-quick-button {
    gap: 6px;
    padding-inline: 7px;
}

.detection-quick-actions[data-has-zone-edit="true"] .detection-quick-button > span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

.detection-zone-button > span svg {
    width: 17px;
    height: 17px;
}

.detection-quick-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 10px 11px;
    color: #f9f0df;
    line-height: 1.25;
    text-align: left;
    border: 1px solid rgba(112, 176, 208, 0.35);
    background: linear-gradient(145deg, rgba(40, 94, 121, 0.72), rgba(12, 45, 65, 0.88));
    box-shadow: 0 8px 20px rgba(2, 18, 30, 0.18), inset 0 1px rgba(255, 255, 255, 0.05);
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.detection-quick-button > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--detection-gold-strong);
    font-size: 20px;
    border: 1px solid rgba(255, 211, 122, 0.42);
    border-radius: 11px;
    background: rgba(240, 185, 75, 0.12);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.detection-quick-button::after {
    content: "›";
    color: rgba(247, 239, 222, 0.5);
    font: 400 20px/1 "Segoe UI", system-ui, sans-serif;
}

.detection-quick-button:hover {
    border-color: rgba(143, 202, 229, 0.62);
    background: linear-gradient(145deg, rgba(47, 108, 138, 0.8), rgba(14, 51, 73, 0.94));
    box-shadow: 0 10px 24px rgba(2, 18, 30, 0.25), inset 0 1px rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.detection-quick-button:hover::after {
    color: #fff2d4;
}

.detection-finding-button {
    border-color: rgba(103, 194, 163, 0.4);
    background: linear-gradient(145deg, rgba(40, 105, 96, 0.74), rgba(12, 53, 57, 0.9));
}

.detection-finding-button > span {
    color: #ffe09a;
    border-color: rgba(117, 205, 174, 0.46);
    background: rgba(78, 167, 137, 0.16);
}

.detection-finding-button:hover {
    border-color: rgba(126, 218, 187, 0.66);
    background: linear-gradient(145deg, rgba(48, 119, 108, 0.82), rgba(14, 61, 64, 0.96));
}

.detection-session-controls button:focus-visible,
.detection-quick-button:focus-visible {
    outline: 2px solid var(--detection-gold-strong);
    outline-offset: 2px;
}

.detection-section-heading {
    align-items: center;
    margin-bottom: 10px;
}

.detection-section-heading h4 {
    font-size: 14px;
}

.detection-section-heading > span {
    color: var(--detection-gold-strong);
    font-size: 10px;
}

.detection-entry-list {
    display: grid;
    gap: 6px;
    max-height: 219px;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(240, 185, 75, 0.48) rgba(7, 29, 45, 0.35);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.detection-entry-list::-webkit-scrollbar {
    width: 6px;
}

.detection-entry-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(7, 29, 45, 0.35);
}

.detection-entry-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(240, 185, 75, 0.48);
}

.detection-entry-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 39px;
}

button.detection-entry-row {
    width: 100%;
    padding: 0;
    color: inherit;
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
}

button.detection-entry-row:hover,
button.detection-entry-row:focus-visible {
    border-radius: 10px;
    background: rgba(240, 185, 75, 0.08);
    outline: 1px solid rgba(240, 185, 75, 0.38);
    outline-offset: 2px;
}

.detection-entry-row img,
.detection-entry-symbol {
    display: grid;
    width: 32px;
    height: 32px;
    object-fit: cover;
    place-items: center;
    color: var(--detection-gold-strong);
    border: 1px solid rgba(240, 185, 75, 0.2);
    border-radius: 10px;
    background: rgba(240, 185, 75, 0.06);
}

.detection-entry-row div {
    display: grid;
    min-width: 0;
}

.detection-entry-row strong,
.detection-entry-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-entry-row strong {
    color: #f5eddf;
    font-size: 10px;
}

.detection-entry-row div span,
.detection-entry-row time {
    color: rgba(229, 229, 218, 0.55);
    font-size: 8px;
}

.detection-empty-entries {
    margin: 3px 0;
}

.detection-coverage-note {
    margin: 0;
    padding-left: 12px;
    border-left: 2px solid rgba(240, 185, 75, 0.35);
}

.detection-summary-score {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 14px;
}

.detection-coverage-ring {
    display: grid;
    width: 112px;
    height: 112px;
    box-sizing: border-box;
    place-content: center;
    justify-items: center;
    text-align: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, #102e46 0 59%, transparent 60%), conic-gradient(#60a994 var(--detection-score, 0deg), rgba(255, 255, 255, 0.08) 0);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}

.detection-coverage-ring strong {
    color: #fff2d5;
    font: 600 27px/1 Cambria, Georgia, serif;
}

.detection-coverage-ring span {
    max-width: 70px;
    margin-top: 5px;
    color: rgba(231, 232, 224, 0.58);
    font-size: 7px;
    line-height: 1.2;
    text-transform: uppercase;
}

.detection-summary-primary-stats {
    display: grid;
    gap: 1px;
}

.detection-summary-primary-stats > div {
    grid-template-columns: 1fr auto;
    padding: 8px 3px;
    align-items: center;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.detection-summary-primary-stats strong {
    font-size: 14px;
}

.detection-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.detection-map-legend span {
    color: rgba(232, 232, 222, 0.7);
    font-size: 8px;
}

.detection-map-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 3px;
    border: 1px solid #e1b75b;
    background: rgba(225, 183, 91, 0.08);
}

.detection-map-legend [data-kind="covered"]::before {
    border-color: #4ea58f;
    background: rgba(78, 165, 143, 0.45);
}

.detection-map-legend [data-kind="repeat"]::before {
    border-color: #db9666;
    background: rgba(219, 150, 102, 0.55);
}

.detection-notes-field {
    padding: 1px;
}

.detection-summary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.detection-finding-window-layer {
    display: contents;
    pointer-events: none;
}

.detection-finding-window {
    position: fixed;
    display: flex;
    width: min(500px, calc(100vw - 24px));
    height: auto;
    max-height: calc(100dvh - 24px);
    min-width: 360px;
    min-height: 360px;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    color: #f5efe1;
    border: 1px solid rgba(255, 204, 102, 0.4);
    border-radius: 22px;
    background: linear-gradient(150deg, #153a52, #0c283e);
    box-shadow: 0 28px 70px rgba(0, 12, 22, 0.62);
    pointer-events: auto;
    contain: layout paint style;
    backface-visibility: hidden;
    animation: detection-finding-window-enter 160ms ease-out both;
}

.detection-finding-window.is-dragging {
    box-shadow: 0 12px 28px rgba(0, 12, 22, 0.42);
}

.detection-finding-window-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 15px 12px;
    border-bottom: 1px solid rgba(255, 204, 102, 0.15);
    user-select: none;
}

.detection-finding-window-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detection-finding-window-drag-handle {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
}

.detection-finding-window-header h3 {
    margin: 3px 0 0;
    color: #fff4df;
    font: 700 20px/1.15 Cambria, Georgia, serif;
}

.detection-finding-window-header span {
    color: rgba(237, 232, 220, 0.58);
    font-size: 8px;
    text-transform: uppercase;
}

.detection-finding-window-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 15px;
}

.detection-finding-window-resize-handle {
    position: absolute;
    z-index: 4;
    display: block;
    touch-action: none;
}

.detection-finding-window-resize-handle.n,
.detection-finding-window-resize-handle.s {
    right: 16px;
    left: 16px;
    height: 14px;
}

.detection-finding-window-resize-handle.n { top: -7px; cursor: ns-resize; }
.detection-finding-window-resize-handle.s { bottom: -7px; cursor: ns-resize; }

.detection-finding-window-resize-handle.e,
.detection-finding-window-resize-handle.w {
    top: 16px;
    bottom: 16px;
    width: 14px;
}

.detection-finding-window-resize-handle.e { right: -7px; cursor: ew-resize; }
.detection-finding-window-resize-handle.w { left: -7px; cursor: ew-resize; }

.detection-finding-window-resize-handle.ne,
.detection-finding-window-resize-handle.se,
.detection-finding-window-resize-handle.sw,
.detection-finding-window-resize-handle.nw {
    width: 24px;
    height: 24px;
}

.detection-finding-window-resize-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.detection-finding-window-resize-handle.se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.detection-finding-window-resize-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.detection-finding-window-resize-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }

.detection-dialog-backdrop {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(3, 16, 27, 0.67);
    backdrop-filter: blur(5px);
}

.detection-panel[data-detection-dialog="finding"] {
    height: var(--detection-panel-max-height);
    min-height: 0;
}

.detection-panel[data-detection-dialog="owner-editor"] {
    height: var(--detection-panel-max-height);
    min-height: 0;
}

.detection-panel[data-detection-dialog="finding"] .detection-content {
    height: 100%;
    max-height: none;
}

.detection-panel[data-detection-dialog="finding"] .detection-dialog-backdrop {
    place-items: start center;
}

.detection-dialog {
    width: 100%;
    max-height: calc(100% - 12px);
    box-sizing: border-box;
    overflow: auto;
    overflow-x: hidden;
    padding: 15px;
    border: 1px solid rgba(255, 204, 102, 0.33);
    border-radius: 20px;
    background: linear-gradient(150deg, #153a52, #0c283e);
    box-shadow: 0 24px 58px rgba(0, 12, 22, 0.52);
    animation: detection-dialog-enter 160ms ease-out both;
}

.detection-dialog > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.detection-dialog h3 {
    margin-top: 3px;
    font-size: 20px;
}

.detection-dialog header span {
    color: rgba(237, 232, 220, 0.58);
    font-size: 8px;
    text-transform: uppercase;
}

.detection-confirm-dialog {
    border-color: rgba(232, 139, 121, 0.36);
}

.detection-delete-summary {
    display: grid;
    gap: 7px;
    padding: 13px;
    border: 1px solid rgba(218, 119, 101, 0.18);
    border-radius: 13px;
    background: rgba(159, 61, 49, 0.07);
}

.detection-delete-summary strong {
    color: #fff4df;
    font: 600 16px/1.2 Cambria, Georgia, serif;
}

.detection-delete-summary p {
    margin: 0;
    color: rgba(242, 225, 216, 0.72);
    font-size: 10px;
    line-height: 1.5;
}

.detection-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.detection-workspace-intro {
    margin: 0 0 12px;
    color: rgba(237, 232, 220, 0.76);
    font-size: 11px;
    line-height: 1.5;
}

.detection-owner-list {
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
    padding-right: 2px;
}

.detection-owner-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(240, 185, 75, 0.18);
    border-radius: 13px;
    background: rgba(4, 24, 40, 0.3);
}

.detection-owner-row[data-selected="true"] {
    border-color: rgba(255, 205, 102, 0.54);
    background: rgba(240, 185, 75, 0.09);
}

.detection-owner-select {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.detection-owner-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.detection-owner-select input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.detection-owner-check {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    box-sizing: border-box;
    color: transparent;
    font-size: 11px;
    border: 1px solid rgba(240, 185, 75, 0.4);
    border-radius: 6px;
    background: rgba(4, 24, 40, 0.52);
}

.detection-owner-select input:checked + .detection-owner-check {
    color: #173047;
    border-color: #f3c566;
    background: #f3c566;
}

.detection-owner-select:focus-within .detection-owner-check {
    outline: 2px solid rgba(255, 214, 128, 0.72);
    outline-offset: 2px;
}

.detection-owner-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.detection-owner-copy strong,
.detection-owner-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-owner-copy strong {
    color: #fff5e2;
    font: 600 13px/1.25 Cambria, Georgia, serif;
}

.detection-owner-copy small {
    color: rgba(237, 232, 220, 0.62);
    font-size: 9px;
}

.detection-owner-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.detection-owner-delete:hover,
.detection-owner-delete:focus-visible {
    color: #ffd2c8;
    border-color: rgba(232, 139, 121, 0.55);
}

.detection-owner-empty {
    margin: 0;
    padding: 18px 12px;
    color: rgba(237, 232, 220, 0.62);
    font-size: 10px;
    text-align: center;
    border: 1px dashed rgba(240, 185, 75, 0.22);
    border-radius: 13px;
}

.detection-add-owner-button {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 11px;
}

.detection-address-book-add {
    margin-top: 0;
}

.detection-manual-finding-add {
    margin-top: 0;
}

.detection-zone-add {
    margin-top: 0;
}

.detection-address-book-list {
    max-height: none;
    overflow: visible;
}

.detection-finding-list {
    display: grid;
    gap: 8px;
}

.detection-finding-list-row {
    display: grid;
    width: 100%;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 9px;
    color: inherit;
    text-align: left;
    border: 1px solid rgba(240, 185, 75, 0.18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022));
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.detection-finding-list-row:hover,
.detection-finding-list-row:focus-visible {
    border-color: rgba(255, 205, 102, 0.5);
    background: linear-gradient(145deg, rgba(240, 185, 75, 0.13), rgba(255, 255, 255, 0.03));
    transform: translateY(-1px);
}

.detection-finding-list-row > img,
.detection-finding-list-placeholder {
    width: 54px;
    height: 54px;
    box-sizing: border-box;
    border: 1px solid rgba(240, 185, 75, 0.26);
    border-radius: 11px;
}

.detection-finding-list-row > img {
    object-fit: cover;
}

.detection-finding-list-placeholder {
    display: grid;
    place-items: center;
    color: var(--detection-gold-strong);
    background: rgba(240, 185, 75, 0.08);
}

.detection-finding-list-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.detection-finding-list-copy strong,
.detection-finding-list-copy small,
.detection-finding-list-copy > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detection-finding-list-copy strong {
    color: #fff5e2;
    font: 600 14px/1.2 Cambria, Georgia, serif;
}

.detection-finding-list-copy small {
    color: rgba(237, 232, 220, 0.74);
    font-size: 10px;
}

.detection-finding-list-copy > span,
.detection-finding-list-meta small {
    color: rgba(237, 232, 220, 0.5);
    font-size: 8px;
}

.detection-finding-list-meta {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.detection-finding-list-meta > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--detection-gold-strong);
}

.detection-finding-list-meta svg {
    width: 15px;
    height: 15px;
}

.detection-coordinate-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(240, 185, 75, 0.18);
    border-radius: 12px;
}

.detection-coordinate-fields legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 5px;
    color: rgba(237, 232, 220, 0.68);
    font-size: 9px;
    font-weight: 750;
}

.detection-coordinate-paste {
    width: 26px;
    height: 26px;
    margin: 0;
    align-self: center;
    color: rgba(255, 248, 235, 0.82);
    font-size: 13px;
    border: 1px solid rgba(237, 228, 210, 0.12);
    border-radius: 8px;
    background: rgba(255, 250, 237, 0.06);
}

.detection-owner-form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.detection-workspace-options {
    display: grid;
    gap: 8px;
}

.detection-workspace-option {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(240, 185, 75, 0.28);
    border-radius: 13px;
    color: #fff8e9;
    text-align: left;
    background: rgba(240, 185, 75, 0.07);
    cursor: pointer;
}

.detection-workspace-option:hover:not(:disabled),
.detection-workspace-option:focus-visible:not(:disabled) {
    border-color: rgba(255, 210, 122, 0.72);
    background: rgba(240, 185, 75, 0.14);
}

.detection-workspace-option:focus-visible {
    outline: 2px solid var(--detection-gold-strong);
    outline-offset: 2px;
}

.detection-workspace-option strong {
    font: 600 14px/1.25 Cambria, Georgia, serif;
}

.detection-workspace-option small {
    color: rgba(237, 232, 220, 0.66);
    font-size: 10px;
    line-height: 1.4;
}

.detection-workspace-option:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.detection-workspace-warning {
    margin: 10px 0 0;
    padding: 10px 11px;
    border: 1px solid rgba(240, 185, 75, 0.28);
    border-radius: 11px;
    color: #ffdca0;
    font-size: 10px;
    line-height: 1.45;
    background: rgba(240, 185, 75, 0.08);
}

.detection-free-outing-form {
    display: grid;
    gap: 9px;
    margin-bottom: 15px;
}

.detection-free-outing-button {
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    gap: 11px;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}

.detection-zone-choice-heading {
    display: grid;
    gap: 3px;
    padding-top: 13px;
    border-top: 1px solid rgba(240, 185, 75, 0.2);
}

.detection-zone-choice-heading > strong {
    color: #fff8e9;
    font: 600 14px/1.25 Cambria, Georgia, serif;
}

.detection-zone-choice-heading > small,
.detection-zone-choice-empty {
    color: rgba(237, 232, 220, 0.66);
    font-size: 10px;
    line-height: 1.45;
}

.detection-zone-choice-list {
    max-height: 190px;
    margin-top: 9px;
    padding: 2px;
    overflow-y: auto;
}

.detection-zone-choice-option small {
    text-transform: capitalize;
}

.detection-zone-choice-empty {
    margin: 9px 0 0;
    padding: 11px 12px;
    border: 1px dashed rgba(240, 185, 75, 0.22);
    border-radius: 11px;
    background: rgba(4, 24, 39, 0.24);
}

.detection-danger-button {
    color: #fff4f0;
    border: 1px solid rgba(232, 139, 121, 0.55);
    background: linear-gradient(135deg, #a84336, #7f2e2a);
    box-shadow: 0 7px 18px rgba(103, 29, 24, 0.2);
}

.detection-danger-button:hover {
    border-color: rgba(255, 184, 169, 0.78);
    background: linear-gradient(135deg, #bd5142, #91362f);
    transform: translateY(-1px);
}

.detection-danger-button:focus-visible {
    outline: 2px solid #ffbfaf;
    outline-offset: 2px;
}

.detection-choice-field {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.detection-choice-field legend {
    margin-bottom: 6px;
    color: rgba(247, 239, 222, 0.82);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detection-choice-field label {
    cursor: pointer;
}

.detection-choice-field input {
    position: absolute;
    opacity: 0;
}

.detection-choice-field label span {
    display: grid;
    min-height: 36px;
    padding: 6px;
    place-items: center;
    color: rgba(237, 234, 224, 0.65);
    font-size: 9px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(4, 23, 38, 0.35);
}

.detection-choice-field input:checked + span {
    color: #ffe5ad;
    border-color: rgba(240, 185, 75, 0.5);
    background: rgba(240, 185, 75, 0.11);
}

.detection-photo-field {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: center;
    min-height: 62px;
    padding: 10px 12px;
    color: #f4ead7;
    border: 1px dashed rgba(240, 185, 75, 0.38);
    border-radius: 13px;
    background: rgba(240, 185, 75, 0.045);
    cursor: pointer;
}

.detection-photo-field input {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}

.detection-photo-field:has(.detection-photo-preview:not([hidden])) {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 82px;
}

.detection-photo-preview {
    grid-row: 1 / span 2;
    width: 84px;
    height: 62px;
    object-fit: cover;
    border: 1px solid rgba(240, 185, 75, 0.34);
    border-radius: 10px;
    background: rgba(4, 23, 38, 0.5);
}

.detection-photo-previews {
    display: grid;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    width: 84px;
    height: 62px;
}

.detection-photo-previews:empty {
    display: none;
}

.detection-photo-previews .detection-photo-preview {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 6px;
}

.detection-photo-field[data-photo-count="1"] .detection-photo-previews {
    grid-template-columns: 1fr;
}

.detection-photo-field[data-photo-count="2"] .detection-photo-previews {
    grid-template-rows: 1fr;
}

.detection-photo-field:has([data-detection-photo-kind="finding"]):has(.detection-photo-preview:not([hidden])) {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 90px;
}

.detection-photo-field:has([data-detection-photo-kind="finding"]) .detection-photo-previews {
    width: 120px;
    height: 90px;
}

.detection-photo-field:has(.detection-photo-preview:not([hidden])) .detection-photo-icon {
    display: none;
}

.detection-photo-icon {
    grid-row: 1 / span 2;
    font-size: 27px;
    color: var(--detection-gold-strong);
}

.detection-photo-field strong {
    font-size: 10px;
}

.detection-photo-field small {
    color: rgba(235, 231, 219, 0.52);
    font-size: 8px;
}

.detection-photo-add-feedback {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
    padding: 4px 8px;
    color: #ffe2a2;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    border: 1px solid rgba(240, 185, 75, 0.42);
    border-radius: 999px;
    background: rgba(240, 185, 75, 0.12);
}

.detection-photo-add-feedback[data-limit-reached="true"] {
    color: rgba(235, 231, 219, 0.62);
    border-color: rgba(235, 231, 219, 0.18);
    background: rgba(235, 231, 219, 0.06);
}

.detection-photo-field:has(input:disabled) {
    cursor: default;
}

.detection-runtime-error {
    margin: 18px;
    padding: 16px;
    color: #f6ded9;
    border: 1px solid rgba(209, 96, 78, 0.35);
    border-radius: 15px;
    background: rgba(140, 48, 38, 0.14);
}

.detection-panel button:focus-visible,
.detection-panel input:focus-visible + span,
.detection-photo-field:has(input:focus-visible) {
    outline: 2px solid #ffd477;
    outline-offset: 2px;
}

.maplibregl-canvas.is-detection-zone-drawing {
    cursor: crosshair;
}

.maplibregl-canvas.is-detection-zone-vertex-hover {
    cursor: grab;
}

.maplibregl-canvas.is-detection-zone-vertex-dragging {
    cursor: grabbing;
}

.maplibregl-canvas.is-detection-finding-hover {
    cursor: pointer;
}

@keyframes detection-panel-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes detection-dialog-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes detection-finding-window-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .detection-panel,
    .detection-finding-window,
    .detection-dialog {
        animation: none;
    }
}


/* Immersive 2.5D skin surface.
   The scene is decorative; MapLibre remains the active map renderer. */

.immersive-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    opacity: 0;
    pointer-events: auto;
    transform-origin: 50% 50%;
    will-change: opacity, transform;
    transition: opacity 260ms ease, filter 220ms ease, transform 220ms ease;
}

.immersive-scene-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.immersive-air-canvas {
    position: fixed;
    inset: 0;
    z-index: 5320;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 220ms ease;
}

.immersive-air-css-overlay {
    position: fixed;
    inset: 0;
    z-index: 5310;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(
            ellipse at 46% -8%,
            rgba(255, 236, 190, 0.62) 0%,
            rgba(255, 224, 168, 0.28) 18%,
            rgba(255, 232, 190, 0.08) 34%,
            rgba(255, 244, 214, 0) 58%
        ),
        conic-gradient(
            from 168deg at 42% -12%,
            rgba(255, 244, 214, 0) 0deg,
            rgba(255, 239, 199, 0.34) 10deg,
            rgba(255, 246, 218, 0.05) 18deg,
            rgba(255, 244, 214, 0) 27deg,
            rgba(255, 231, 181, 0.24) 39deg,
            rgba(255, 244, 214, 0) 54deg
        ),
        conic-gradient(
            from 176deg at 68% -14%,
            rgba(255, 244, 214, 0) 0deg,
            rgba(255, 239, 199, 0.28) 8deg,
            rgba(255, 246, 218, 0.04) 15deg,
            rgba(255, 244, 214, 0) 25deg,
            rgba(255, 231, 181, 0.2) 35deg,
            rgba(255, 244, 214, 0) 48deg
        ),
        linear-gradient(
            var(--immersive-air-css-angle, 78deg),
            rgba(255, 232, 184, 0.18) 0%,
            rgba(255, 222, 165, 0.1) 30%,
            rgba(255, 235, 190, 0.04) 52%,
            rgba(255, 244, 214, 0) 78%
        );
    filter: blur(3px);
    transform: scale(1.018);
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 22%,
        rgba(0, 0, 0, 0.66) 31%,
        rgba(0, 0, 0, 0.12) 42%,
        transparent 50%
    );
    mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 22%,
        rgba(0, 0, 0, 0.66) 31%,
        rgba(0, 0, 0, 0.12) 42%,
        transparent 50%
    );
    animation: maphora-immersive-air-breathe var(--immersive-air-css-duration, 12s) ease-in-out infinite alternate;
    transition: opacity 220ms ease;
}

.immersive-air-css-overlay::before,
.immersive-air-css-overlay::after {
    content: "";
    position: absolute;
    top: -8vh;
    height: 46vh;
    pointer-events: none;
    mix-blend-mode: screen;
    transform-origin: 50% 0;
}

.immersive-air-css-overlay::before {
    left: 30vw;
    width: 34vw;
    opacity: 0.382;
    transform: rotate(-11deg);
    clip-path: polygon(42% 0, 60% 0, 86% 82%, 18% 82%);
    background:
        linear-gradient(
            180deg,
            rgba(255, 245, 213, 0.86) 0%,
            rgba(255, 231, 178, 0.34) 20%,
            rgba(255, 238, 200, 0.1) 42%,
            rgba(255, 244, 214, 0) 68%
        );
    filter: blur(24px);
}

.immersive-air-css-overlay::after {
    left: 58vw;
    width: 25vw;
    opacity: 0.255;
    transform: rotate(-9deg);
    clip-path: polygon(44% 0, 61% 0, 88% 78%, 22% 78%);
    background:
        linear-gradient(
            180deg,
            rgba(255, 245, 213, 0.74) 0%,
            rgba(255, 231, 178, 0.24) 20%,
            rgba(255, 238, 200, 0.07) 40%,
            rgba(255, 244, 214, 0) 66%
        );
    filter: blur(22px);
}

body[data-immersive-view="immersive"] .immersive-air-canvas {
    opacity: 1 !important;
    visibility: visible !important;
}

body[data-immersive-view="immersive"] .immersive-air-css-overlay {
    opacity: var(--immersive-air-css-opacity, 0.36);
    visibility: visible;
}

body[data-immersive-view="focus"] .immersive-air-canvas,
body[data-immersive-map-projection="flat"] .immersive-air-canvas,
body[data-player-auth-overlay]:not([data-player-auth-overlay="hidden"]) .immersive-air-canvas,
body[data-immersive-view="focus"] .immersive-air-css-overlay,
body[data-immersive-map-projection="flat"] .immersive-air-css-overlay,
body[data-player-auth-overlay]:not([data-player-auth-overlay="hidden"]) .immersive-air-css-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
}

body[data-immersive-view="immersive"] .immersive-scene {
    opacity: 1;
}

.immersive-map-surface {
    display: contents;
}

body[data-immersive-tablet-map-surface="true"] .immersive-map-surface,
body[data-immersive-map-surface-host="true"] .immersive-map-surface {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    background: var(--map-canvas-fallback-background);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

body[data-immersive-tablet-map-surface="true"][data-immersive-view="immersive"] .immersive-map-surface,
body[data-immersive-map-surface-host="true"][data-immersive-view="immersive"] .immersive-map-surface {
    inset: auto;
    top: var(--immersive-map-top);
    left: var(--immersive-map-left);
    width: var(--immersive-map-width);
    height: var(--immersive-map-height);
    clip-path: var(--immersive-map-clip);
    -webkit-clip-path: var(--immersive-map-clip);
    transform: var(--immersive-map-transform);
    -webkit-transform: var(--immersive-map-transform);
}

body[data-immersive-tablet-map-surface="true"] #map,
body[data-immersive-map-surface-host="true"] #map {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body[data-immersive-view="immersive"] #map {
    --immersive-map-edge-feather: 2px;
    z-index: 1;
    transition: none;
    top: var(--immersive-map-top);
    left: var(--immersive-map-left);
    right: auto;
    bottom: auto;
    width: var(--immersive-map-width);
    height: var(--immersive-map-height);
    clip-path: var(--immersive-map-clip);
    -webkit-clip-path: var(--immersive-map-clip);
    transform: var(--immersive-map-transform);
    -webkit-transform: var(--immersive-map-transform);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    overflow: hidden;
    background: var(--map-canvas-fallback-background);
    box-shadow: none;
    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 var(--immersive-map-edge-feather),
            #000 calc(100% - var(--immersive-map-edge-feather)),
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--immersive-map-edge-feather),
            #000 calc(100% - var(--immersive-map-edge-feather)),
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(
            to right,
            transparent 0,
            #000 var(--immersive-map-edge-feather),
            #000 calc(100% - var(--immersive-map-edge-feather)),
            transparent 100%
        ),
        linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--immersive-map-edge-feather),
            #000 calc(100% - var(--immersive-map-edge-feather)),
            transparent 100%
        );
    mask-composite: intersect;
}

@keyframes maphora-immersive-air-breathe {
    from {
        opacity: calc(var(--immersive-air-css-opacity, 0.36) * 0.82);
    }

    to {
        opacity: var(--immersive-air-css-opacity, 0.36);
    }
}

body.immersive-view-transitioning .immersive-scene,
body.immersive-view-transitioning .immersive-map-surface,
body.immersive-view-transitioning #map {
    transition: none !important;
}

body.immersive-view-transitioning .immersive-map-surface,
body.immersive-view-transitioning #map {
    pointer-events: none;
    will-change: top, left, width, height, transform, opacity;
}

body.immersive-view-transitioning .immersive-scene {
    pointer-events: none;
    will-change: opacity, transform;
}

body[data-immersive-view="immersive"] #map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 6px rgba(56, 40, 24, 0.18),
        inset 0 0 14px rgba(22, 16, 11, 0.12);
}

body[data-immersive-view="immersive"] #map .maplibregl-canvas-container,
body[data-immersive-view="immersive"] #map .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
}

body[data-immersive-view="immersive"] #map .maplibregl-canvas {
    display: block;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

body[data-immersive-view="immersive"].riddle-gallery-open .immersive-scene,
body[data-immersive-view="immersive"].decryption-open .immersive-scene {
    filter: blur(10px) saturate(0.9) brightness(0.82);
    transform: scale(1.015);
}

body[data-immersive-view="immersive"].riddle-gallery-open #map,
body[data-immersive-view="immersive"].decryption-open #map {
    filter: blur(10px) saturate(0.9) brightness(0.82);
}

body[data-immersive-map-projection="flat"] #map {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 3 !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -webkit-mask-image: none;
    mask-image: none;
    transform-style: flat;
    -webkit-transform-style: flat;
    contain: none;
    isolation: isolate;
    opacity: 1 !important;
    visibility: visible !important;
    background: #0f1717;
}

body[data-immersive-map-projection="flat"] .immersive-scene {
    z-index: 0;
    pointer-events: none;
    visibility: hidden !important;
    opacity: 0 !important;
    background-image: none !important;
    transform: none !important;
    -webkit-transform: none !important;
}

body[data-immersive-map-projection="flat"] .immersive-scene-canvas {
    display: none !important;
}

body:not([data-player-auth-overlay="hidden"]) .immersive-scene {
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
    pointer-events: none !important;
}

@supports (height: 100dvh) {
    body[data-immersive-map-projection="flat"] #map {
        height: 100dvh !important;
    }
}

body[data-immersive-map-projection="flat"] #map::after {
    display: none;
}

body[data-immersive-map-projection="flat"] #map .maplibregl-canvas-container,
body[data-immersive-map-projection="flat"] #map .maplibregl-canvas {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    will-change: auto;
    opacity: 1 !important;
    visibility: visible !important;
}

body[data-immersive-view="immersive"] #map {
    border-radius: 0;
}

body[data-immersive-view="immersive"] .hud {
    z-index: 5400;
    isolation: isolate;
}

body[data-immersive-view="immersive"] .hud {
    position: fixed;
    z-index: 5400;
}

body[data-immersive-view="immersive"] .toolbar,
body[data-immersive-view="immersive"] .map-radial-launcher,
body[data-immersive-view="immersive"] .top-bar,
body[data-immersive-view="immersive"] .inspector,
body[data-immersive-view="immersive"] .status-bar,
body[data-immersive-view="immersive"] .search-panel,
body[data-immersive-view="immersive"] .riddle-gallery-panel,
body[data-immersive-view="immersive"] .basemap-provider-hint,
body[data-immersive-view="immersive"] .map-layer-control {
    pointer-events: auto;
    z-index: 5400;
    isolation: isolate;
}

body[data-immersive-view="immersive"] .modal-shell,
body[data-immersive-view="immersive"] .player-welcome-overlay,
body[data-immersive-view="immersive"] .monetization-modal {
    z-index: 5600 !important;
}

body[data-immersive-view="immersive"] .app-notice {
    z-index: var(--app-notice-layer) !important;
}

body[data-immersive-view="immersive"] .player-account-menu.player-account-menu-portal {
    z-index: 5600 !important;
}

.immersive-view-toggle.hidden {
    display: none;
}

.immersive-view-toggle {
    min-width: 64px;
}

.immersive-orientation-warning {
    position: fixed;
    inset: 0;
    z-index: 5400;
    display: none;
    place-items: center;
    padding: 28px;
    text-align: center;
    color: #fff8e6;
    background: rgba(16, 13, 9, 0.82);
    backdrop-filter: blur(12px);
}

.immersive-orientation-warning.visible {
    display: grid;
}

.immersive-orientation-warning strong,
.immersive-orientation-warning span {
    display: block;
}

.immersive-orientation-warning strong {
    max-width: 24rem;
    font-size: 1.25rem;
    line-height: 1.2;
}

.immersive-orientation-warning span {
    max-width: 28rem;
    margin-top: 10px;
    color: rgba(255, 248, 230, 0.78);
    line-height: 1.45;
}

.riddle-card-immersive-skin {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
    min-height: 210px;
}

.riddle-card-immersive-skin .riddle-card-image {
    object-position: center;
}

.riddle-card-immersive-skin .riddle-card-title {
    max-width: 22ch;
}

.riddle-card-immersive-skin.is-active {
    box-shadow:
        0 22px 42px rgba(10, 8, 5, 0.48),
        0 0 0 1px rgba(242, 212, 138, 0.52),
        inset 0 1px 0 rgba(255, 248, 230, 0.14);
}

.immersive-skin-active-badge {
    background: rgba(76, 126, 91, 0.92);
    color: #fffdf3;
}

.riddle-detail-card-immersive-skin .riddle-detail-image {
    object-position: center;
}

.immersive-skin-detail-hint {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(20, 42, 68, 0.055);
    border: 1px solid rgba(20, 42, 68, 0.14);
    color: #4f5f70;
    font-size: 0.9rem;
    line-height: 1.4;
}

.riddle-detail-card-immersive-skin .riddle-detail-secondary-action.is-active {
    background: rgba(242, 212, 138, 0.18);
    border-color: rgba(242, 212, 138, 0.34);
    color: #f8eec4;
}

@media (max-width: 860px) {
    .riddle-card-immersive-skin {
        grid-column: span 1;
        min-height: 190px;
    }
}

body[data-player-auth-overlay]:not([data-player-auth-overlay="hidden"]) .immersive-scene,
body[data-immersive-view="immersive"][data-player-auth-overlay]:not([data-player-auth-overlay="hidden"]) .immersive-scene {
    opacity: 0 !important;
    visibility: hidden !important;
    background-image: none !important;
    pointer-events: none !important;
}


@media (max-width: 760px), (max-height: 610px) {
    .detection-panel {
        --detection-header-height: 62px;
    }

    .detection-header {
        padding-block: 9px;
    }

    .detection-header h2 {
        font-size: 16px;
    }

    .detection-header p {
        max-width: 225px;
    }

    .detection-view {
        gap: 13px;
        padding: 15px;
    }

    .detection-panel.is-drawing-zone .detection-header p,
    .detection-panel.is-drawing-zone .detection-view-intro,
    .detection-panel.is-drawing-zone .detection-form > :not(.detection-zone-field) {
        display: none;
    }

    .detection-panel.is-drawing-zone .detection-content-scroll {
        overflow: hidden;
    }

    .detection-panel.is-drawing-zone .detection-zone-field {
        margin: 0;
    }

    .detection-panel.is-drawing-zone[data-detection-view="session"] .detection-session-view > :not(.detection-session-zone-editor) {
        display: none;
    }

    .detection-panel.is-drawing-zone[data-detection-view="session"] .detection-session-zone-editor {
        margin: 0;
    }

    .detection-quick-button {
        min-height: 62px;
        font-size: 11px;
    }

    .detection-dialog-backdrop {
        padding: 7px;
    }

    .detection-dialog {
        max-height: calc(100% - 5px);
        border-radius: 18px;
    }
}

@media (max-height: 610px) and (min-width: 761px) {
    .detection-panel {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(500px, calc(100vw - 24px));
        height: calc(100dvh - 210px);
        min-height: 0;
        transform: translate(-50%, -50%);
        border-radius: 21px;
    }

    .detection-panel[data-detection-view="list"] {
        --detection-list-max-height: calc(100dvh - 210px);
        --detection-list-header-height: var(--detection-header-height);
    }

    .detection-panel[data-detection-view="create"] {
        --detection-create-max-height: calc(100dvh - 210px);
        --detection-create-header-height: var(--detection-header-height);
    }

    .detection-panel[data-detection-view="session"] {
        --detection-detail-max-height: calc(100dvh - 210px);
        top: 50%;
        height: auto;
        max-height: var(--detection-detail-max-height);
        border-radius: 21px;
    }

    .detection-panel.has-detection-dialog {
        top: 50%;
    }

    .detection-panel[data-detection-dialog="finding"] {
        height: calc(100dvh - 210px);
    }

    .detection-panel.is-drawing-zone {
        top: 50%;
        height: min(264px, 38dvh);
    }
}

@media (max-width: 760px) {
    .detection-finding-window-layer {
        display: none;
    }

    /* Keep both corner launchers mounted, but composite them below the notebook. */
    body.detection-notebook-open .map-radial-launcher.map-radial-rail-launcher {
        z-index: 420;
    }

    body.detection-terrain-mode .map-radial-launcher.map-radial-rail-launcher {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.96);
    }

    .detection-terrain-hud:not(.hidden) {
        position: fixed;
        z-index: 5460;
        inset: 0;
        display: block;
        pointer-events: none;
    }

    .detection-terrain-hud button {
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
    }

    .detection-terrain-close {
        position: absolute;
        top: calc(76px + env(safe-area-inset-top));
        right: calc(16px + env(safe-area-inset-right));
        display: grid;
        width: 48px;
        height: 48px;
        padding: 0;
        place-items: center;
        color: #fff3d2;
        border: 1px solid rgba(255, 210, 115, 0.62);
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(17, 51, 73, 0.96), rgba(7, 28, 45, 0.96));
        box-shadow: 0 10px 28px rgba(0, 12, 22, 0.4), inset 0 1px rgba(255, 255, 255, 0.12);
    }

    .detection-terrain-close svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-width: 2;
    }

    .detection-terrain-action {
        position: absolute;
        bottom: calc(var(--radial-launcher-bottom) + env(safe-area-inset-bottom));
        display: grid;
        width: min(154px, calc(50vw - 24px));
        min-height: 68px;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
        padding: 9px 13px 9px 10px;
        color: #fff3d2;
        text-align: left;
        border: 1px solid rgba(255, 210, 115, 0.68);
        border-radius: 22px;
        background: linear-gradient(145deg, rgba(20, 58, 81, 0.97), rgba(7, 29, 46, 0.97));
        box-shadow: 0 13px 30px rgba(0, 12, 22, 0.42), inset 0 1px rgba(255, 255, 255, 0.12);
    }

    .detection-terrain-action > span {
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        color: #ffd477;
        font-size: 19px;
        border: 1px solid rgba(255, 210, 115, 0.48);
        border-radius: 12px;
        background: rgba(240, 185, 75, 0.12);
    }

    .detection-terrain-action strong {
        font: 700 12px/1.15 "Segoe UI", system-ui, sans-serif;
    }

    .detection-terrain-pause {
        left: calc(var(--radial-launcher-left) + env(safe-area-inset-left));
    }

    .detection-terrain-finding {
        right: calc(var(--radial-launcher-right) + env(safe-area-inset-right));
        border-color: rgba(111, 211, 173, 0.68);
        background: linear-gradient(145deg, rgba(25, 79, 74, 0.97), rgba(7, 41, 48, 0.97));
    }

    .detection-terrain-action:focus-visible,
    .detection-terrain-close:focus-visible {
        outline: 3px solid #ffe09a;
        outline-offset: 3px;
    }

    .detection-panel,
    .detection-panel[data-detection-view="session"],
    .detection-panel.has-detection-dialog {
        top: calc(8px + env(safe-area-inset-top)) !important;
        right: calc(8px + env(safe-area-inset-right)) !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: calc(8px + env(safe-area-inset-left)) !important;
        width: auto !important;
        max-width: none;
        height: auto !important;
        max-height: none;
        min-height: 0;
        transform: none;
        border-radius: 8px;
    }

    .detection-panel[data-detection-view="list"] {
        --detection-list-max-height: min(calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), var(--detection-available-height));
        --detection-list-header-height: 62px;
        bottom: auto !important;
        max-height: var(--detection-list-max-height);
    }

    .detection-panel[data-detection-view="create"] {
        --detection-create-max-height: min(calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), var(--detection-available-height));
        --detection-create-header-height: 62px;
        bottom: auto !important;
        max-height: var(--detection-create-max-height);
    }

    .detection-content-scroll {
        -webkit-overflow-scrolling: touch;
    }

    .detection-session-zone-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .detection-panel.is-drawing-zone {
        top: auto !important;
        height: min(264px, 38dvh) !important;
        border-radius: 21px;
    }
}

@media (max-width: 420px) {
    .detection-form,
    .detection-profile-fields,
    .detection-coordinate-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .detection-field,
    .detection-field-wide,
    .detection-profile-fields {
        grid-column: 1;
    }

    .detection-summary-score {
        grid-template-columns: 110px minmax(0, 1fr);
        padding: 11px;
    }

    .detection-coverage-ring {
        width: 96px;
        height: 96px;
    }

    .detection-summary-actions {
        grid-template-columns: 1fr;
    }

    .detection-choice-field {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


.magic-selection-panel {
    position: absolute;
    top: var(--hud-panel-top);
    right: var(--hud-gap);
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - var(--hud-panel-top) - var(--hud-gap));
    padding: 0;
    overflow: hidden;
}

#magic-selection-panel.inspector.hidden {
    display: none;
}

.magic-selection-panel .panel-header-row {
    padding: 18px 18px 0;
}

.magic-selection-panel-body {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
    overflow-y: auto;
}

.magic-selection-help,
.magic-selection-status {
    margin: 0;
    color: var(--muted-text-color);
    font-size: 0.84rem;
    line-height: 1.45;
}

.magic-selection-range-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}

.magic-selection-range-field input[type="range"] {
    grid-column: 1 / -1;
    width: 100%;
    padding: 0;
}

.magic-selection-range-field output {
    min-width: 50px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(71, 93, 79, 0.12);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.magic-selection-color-grid {
    display: grid;
}

.magic-selection-color-grid label {
    display: grid;
    gap: 8px;
}

.magic-selection-color-grid input[type="color"] {
    display: block;
    width: 100%;
    height: 38px;
    padding: 3px;
    border: 1px solid rgba(88, 69, 37, 0.2);
    border-radius: 8px;
    background: transparent;
}

.magic-selection-area-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}

.magic-selection-area-card output {
    color: var(--accent-strong, #8a5417);
    font-size: 1.05rem;
    font-weight: 850;
}

.magic-selection-area-card select {
    grid-column: 1 / -1;
    width: 100%;
}

.magic-selection-status {
    min-height: 2.4em;
}

.magic-selection-status[data-tone="success"] {
    color: #3f7f56;
}

.magic-selection-status[data-tone="warning"] {
    color: #996315;
}

.magic-selection-status[data-tone="error"] {
    color: #a04435;
}

.magic-selection-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.magic-selection-actions button {
    min-height: 38px;
}

@media (max-width: 640px) {
    .magic-selection-panel {
        top: auto;
        right: 8px;
        bottom: 86px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 104px);
    }
}


.solar-system-surface {
    position: fixed;
    inset: 0;
    z-index: 5300;
    overflow: hidden;
    color: #f7f4ee;
    background: transparent;
    pointer-events: none;
    isolation: isolate;
}

.solar-system-surface::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 52%, rgba(37, 58, 93, 0.26), transparent 36%),
        radial-gradient(circle at 12% 18%, rgba(62, 83, 128, 0.18), transparent 28%),
        #02050b;
    opacity: 0;
    content: "";
    pointer-events: none;
    transition: opacity 1450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solar-system-surface.hidden {
    display: none !important;
}

body[data-solar-system-view="handoff"] .solar-system-surface,
body[data-solar-system-view="blending"] .solar-system-surface,
body[data-solar-system-view="active"] .solar-system-surface,
body[data-solar-system-view="returning"] .solar-system-surface {
    pointer-events: auto;
}

body[data-solar-system-view="blending"] .solar-system-surface::before,
body[data-solar-system-view="active"] .solar-system-surface::before,
body[data-solar-system-view="returning"] .solar-system-surface::before {
    opacity: 1;
}

body[data-solar-system-view="leaving"] .solar-system-surface::before {
    opacity: 0;
    transition-duration: 460ms;
}

.solar-system-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
    cursor: grab;
    opacity: 0;
    pointer-events: none;
    transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-solar-system-view="blending"] .solar-system-canvas,
body[data-solar-system-view="active"] .solar-system-canvas,
body[data-solar-system-view="returning"] .solar-system-canvas {
    opacity: 1;
}

body[data-solar-system-view="active"] .solar-system-canvas {
    pointer-events: auto;
}

body[data-solar-system-view="blending"] .solar-system-canvas {
    pointer-events: auto;
}

body[data-solar-system-view="leaving"] .solar-system-canvas {
    opacity: 0;
    transition-duration: 460ms;
}

.solar-system-canvas:active {
    cursor: grabbing;
}

.solar-system-body-tooltip {
    position: absolute;
    z-index: 3;
    max-width: min(220px, calc(100vw - 16px));
    padding: 6px 9px;
    border: 1px solid rgba(223, 181, 92, 0.28);
    border-radius: 8px;
    color: #f7f4ee;
    background: rgba(4, 8, 14, 0.9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 1;
}

.solar-system-body-tooltip.hidden {
    display: none;
}

.solar-system-view-switches-host {
    display: contents;
}

body[data-solar-system-view] .map-view-switches.is-in-solar-system {
    top: max(10px, calc(env(safe-area-inset-top) + 10px));
    right: max(10px, calc(env(safe-area-inset-right) + 10px));
    z-index: 5500;
}

body[data-solar-system-view] .map-view-switches.is-in-solar-system :is(.map-globe-toggle, .solar-system-entry-toggle) {
    display: none;
}

body[data-solar-system-view] .map-view-switches.is-in-solar-system .solar-system-scale-toggle {
    display: inline-flex;
}

.solar-system-hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:
        max(82px, calc(env(safe-area-inset-top) + 72px))
        max(24px, calc(env(safe-area-inset-right) + 18px))
        max(22px, calc(env(safe-area-inset-bottom) + 16px))
        max(24px, calc(env(safe-area-inset-left) + 18px));
    pointer-events: none;
}

.solar-system-heading {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.76);
    opacity: 0;
    transform: translateY(-8px);
    transition:
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-solar-system-view="active"] .solar-system-heading {
    opacity: 1;
    transform: translateY(0);
}

.solar-system-exit,
.solar-system-body-button {
    border: 1px solid rgba(223, 181, 92, 0.3);
    color: #f7f4ee;
    background: rgba(8, 14, 23, 0.78);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    pointer-events: auto;
}

.solar-system-exit {
    min-height: 40px;
    padding: 8px 15px;
    border-radius: 999px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.solar-system-exit:hover,
.solar-system-exit:focus-visible,
.solar-system-body-button:hover,
.solar-system-body-button:focus-visible {
    border-color: rgba(244, 202, 111, 0.72);
    background: rgba(21, 30, 43, 0.92);
}

.solar-system-exit:focus-visible,
.solar-system-body-button:focus-visible {
    outline: 2px solid rgba(244, 202, 111, 0.94);
    outline-offset: 3px;
}

.solar-system-status {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 9px 14px;
    border: 1px solid rgba(223, 181, 92, 0.24);
    border-radius: 999px;
    color: rgba(247, 244, 238, 0.84);
    background: rgba(4, 8, 14, 0.78);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
    transform: translate(-50%, -50%);
    font-size: 0.78rem;
}

.solar-system-status.hidden {
    display: none;
}

.solar-system-navigation-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 6px;
    width: min(100%, 980px);
    min-width: 0;
}

.solar-system-body-nav,
.solar-system-satellite-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 7px;
    overflow-x: auto;
    border: 1px solid rgba(223, 181, 92, 0.16);
    border-radius: 999px;
    background: rgba(4, 8, 14, 0.66);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    scrollbar-width: none;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.solar-system-satellite-nav {
    padding: 5px;
    border-color: rgba(126, 177, 218, 0.2);
    background: rgba(8, 15, 25, 0.78);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    transform: translateY(14px);
}

.solar-system-satellite-nav.hidden {
    display: none;
}

body[data-solar-system-view="active"] :is(.solar-system-body-nav, .solar-system-satellite-nav) {
    opacity: 1;
    transform: translateY(0);
}

.solar-system-body-nav::-webkit-scrollbar,
.solar-system-satellite-nav::-webkit-scrollbar {
    display: none;
}

.solar-system-satellite-button {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 0.68rem;
}

.solar-system-satellite-button .solar-system-body-dot {
    width: 9px;
    height: 9px;
}

.solar-system-body-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 10px;
    border-color: transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.solar-system-body-button.active {
    border-color: color-mix(in srgb, var(--solar-body-color) 72%, #f1c979);
    color: #f7f4ee;
    background: rgba(28, 38, 53, 0.96);
}

.solar-system-body-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--solar-body-color);
    box-shadow: 0 0 12px color-mix(in srgb, var(--solar-body-color) 70%, transparent);
}

body[data-solar-system-view="blending"] .map-radial-launcher,
body[data-solar-system-view="blending"] .map-footer-credits,
body[data-solar-system-view="blending"] .map-scale-feedback,
body[data-solar-system-view="blending"] .map-cursor-ground-shadow,
body[data-solar-system-view="active"] .map-radial-launcher,
body[data-solar-system-view="active"] .map-footer-credits,
body[data-solar-system-view="active"] .map-scale-feedback,
body[data-solar-system-view="active"] .map-cursor-ground-shadow,
body[data-solar-system-view="returning"] .map-radial-launcher,
body[data-solar-system-view="returning"] .map-footer-credits,
body[data-solar-system-view="returning"] .map-scale-feedback,
body[data-solar-system-view="returning"] .map-cursor-ground-shadow {
    opacity: 0 !important;
    pointer-events: none !important;
}

body[data-solar-system-view="active"] #toggle-solar-system-view {
    border-color: rgba(244, 202, 111, 0.78);
    color: #fff7e5;
    box-shadow:
        0 14px 38px rgba(5, 10, 15, 0.36),
        0 0 0 3px rgba(218, 172, 76, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 720px) {
    .solar-system-hud {
        padding-top: max(72px, calc(env(safe-area-inset-top) + 64px));
        padding-right: 14px;
        padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
        padding-left: 14px;
    }

    .solar-system-heading {
        gap: 12px;
    }

    .solar-system-exit {
        padding-inline: 11px;
    }

    .solar-system-navigation-stack {
        align-self: stretch;
        width: 100%;
    }

    .solar-system-body-nav,
    .solar-system-satellite-nav {
        max-width: 100%;
        border-radius: 18px;
    }

    .solar-system-body-nav .solar-system-body-label {
        display: none;
    }

    .solar-system-body-button {
        min-width: 36px;
        justify-content: center;
        padding-inline: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solar-system-surface::before,
    .solar-system-canvas,
    .solar-system-heading,
    .solar-system-body-nav,
    .solar-system-navigation-stack,
    .solar-system-satellite-nav {
        transition: none;
    }
}


.sketch-annotation-surface {
    position: absolute;
    inset: 0;
    z-index: 19;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    contain: layout paint;
}

.sketch-annotation-surface[data-sketch-active="true"] {
    pointer-events: auto;
    cursor: none;
}

.sketch-annotation-surface[data-sketch-eraser="true"] {
    cursor: none;
}

.sketch-cursor-preview {
    --sketch-cursor-width: 8px;
    --sketch-cursor-height: 8px;
    --sketch-cursor-color: #f28c00;
    --sketch-cursor-fill: rgba(242, 140, 0, 0.34);
    --sketch-cursor-border: rgba(242, 140, 0, 0.95);
    --sketch-cursor-shadow: rgba(242, 140, 0, 0.18);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 7000;
    width: var(--sketch-cursor-width);
    height: var(--sketch-cursor-height);
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 90ms ease;
    will-change: left, top, width, height, opacity;
}

.sketch-cursor-preview[data-sketch-visible="true"] {
    opacity: 1;
}

.sketch-cursor-preview-core {
    width: 100%;
    height: 100%;
    border: 2px solid var(--sketch-cursor-border);
    border-radius: 999px;
    background: var(--sketch-cursor-fill);
    box-shadow:
        0 0 0 1px rgba(255, 250, 232, 0.78),
        0 3px 10px var(--sketch-cursor-shadow);
}

.sketch-cursor-preview[data-sketch-cursor-tool="highlighter"] .sketch-cursor-preview-core {
    border-width: 1px;
    border-radius: 5px;
    transform: rotate(-12deg);
    box-shadow:
        0 0 0 1px rgba(255, 250, 232, 0.54),
        0 3px 12px var(--sketch-cursor-shadow);
}

.sketch-cursor-preview[data-sketch-cursor-tool="pencil"] .sketch-cursor-preview-core {
    border-style: dashed;
    background: transparent;
}

.sketch-cursor-preview[data-sketch-cursor-tool="eraser"] .sketch-cursor-preview-core {
    border-color: rgba(43, 36, 24, 0.72);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(233, 218, 184, 0.74)),
        var(--sketch-cursor-fill);
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 232, 0.68),
        0 3px 10px rgba(43, 36, 24, 0.18);
}

.sketch-panel {
    position: absolute;
    top: var(--hud-panel-top);
    right: var(--hud-gap);
    width: var(--hud-panel-width);
    max-height: calc(100vh - var(--hud-panel-top) - var(--hud-gap));
    color: inherit;
}

#sketch-panel.inspector {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 0;
    scrollbar-width: none;
}

#sketch-panel.inspector.hidden {
    display: none;
}

.sketch-panel .panel-header-row {
    align-items: center;
    padding: 18px 18px 0;
}

.sketch-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 14px 18px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 91, 45, 0.46) transparent;
}

#sketch-panel.inspector::-webkit-scrollbar {
    display: none;
}

#sketch-panel.inspector > .selection-list::-webkit-scrollbar {
    width: 10px;
    height: 0;
}

#sketch-panel.inspector > .selection-list::-webkit-scrollbar:horizontal,
#sketch-panel.inspector > .selection-list::-webkit-scrollbar-button {
    display: none;
}

#sketch-panel.inspector > .selection-list::-webkit-scrollbar-track {
    margin: 2px 0 20px;
    border-radius: 999px;
    background: transparent;
}

#sketch-panel.inspector > .selection-list::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 3px solid rgba(0, 0, 0, 0);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(150, 116, 59, 0.64), rgba(104, 76, 35, 0.58));
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 237, 0.42),
        0 2px 6px rgba(24, 19, 10, 0.06);
}

#sketch-panel.inspector > .selection-list::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(130, 97, 45, 0.78), rgba(86, 61, 28, 0.72));
    background-clip: padding-box;
}

.sketch-control-group {
    display: grid;
    gap: 10px;
}

.sketch-control-label {
    margin-top: 2px;
    color: var(--subsection-heading-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sketch-color-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}

.sketch-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(78, 57, 26, 0.22);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.08)),
        var(--sketch-swatch);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 5px 12px rgba(39, 27, 12, 0.14);
}

.sketch-color-swatch:hover,
.sketch-color-swatch:focus-visible,
.sketch-color-swatch.active,
.sketch-color-swatch[aria-current="true"] {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.08)),
        var(--sketch-swatch);
    color: inherit;
}

.sketch-color-swatch-light {
    box-shadow:
        inset 0 0 0 1px rgba(73, 54, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        0 5px 12px rgba(39, 27, 12, 0.12);
}

.sketch-color-swatch.active,
.sketch-color-swatch[aria-current="true"] {
    border-color: rgba(255, 250, 232, 0.92);
    box-shadow:
        inset 0 0 0 3px rgba(255, 250, 232, 0.92),
        inset 0 0 0 5px rgba(52, 79, 68, 0.92),
        0 0 0 2px rgba(52, 79, 68, 0.92),
        0 6px 14px rgba(39, 27, 12, 0.18);
}

.sketch-color-swatch-light.active,
.sketch-color-swatch-light[aria-current="true"] {
    box-shadow:
        inset 0 0 0 3px rgba(73, 54, 28, 0.18),
        inset 0 0 0 5px rgba(52, 79, 68, 0.92),
        0 0 0 2px rgba(52, 79, 68, 0.92),
        0 6px 14px rgba(39, 27, 12, 0.16);
}

.sketch-segmented {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 250, 237, 0.52);
}

.sketch-segmented button,
.sketch-action-grid button {
    min-width: 0;
    min-height: 36px;
    padding: 8px 9px;
    border-radius: 7px;
    font-size: 0.82rem;
    line-height: 1.1;
}

.sketch-segmented button.active,
.sketch-segmented button[aria-current="true"] {
    border-color: rgba(114, 75, 25, 0.3);
    background: linear-gradient(180deg, rgba(223, 181, 92, 0.88), rgba(166, 104, 38, 0.82));
    color: #1d1710;
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 232, 0.28),
        0 8px 16px rgba(70, 44, 13, 0.16);
}

.sketch-size-field {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}

.sketch-size-field input[type="range"] {
    grid-column: 1 / -1;
    padding: 0;
}

.sketch-size-value {
    min-width: 34px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(71, 93, 79, 0.12);
    color: rgba(43, 36, 24, 0.74);
    font-size: 0.78rem;
    font-weight: 800;
    text-align: center;
}

.sketch-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sketch-action-grid .sketch-danger-action {
    grid-column: 1 / -1;
}

.sketch-danger-action {
    border-color: rgba(123, 63, 45, 0.22);
    color: rgba(123, 63, 45, 0.92);
}

.sketch-danger-action:hover,
.sketch-danger-action:focus-visible {
    background: rgba(123, 63, 45, 0.12);
    border-color: rgba(123, 63, 45, 0.32);
    color: rgba(101, 43, 31, 0.98);
}

body.sketch-mode #map,
body.sketch-mode #map .maplibregl-canvas,
body.sketch-mode #map .maplibregl-canvas-container {
    cursor: none;
}

body.sketch-mode.sketch-eraser-mode #map,
body.sketch-mode.sketch-eraser-mode #map .maplibregl-canvas,
body.sketch-mode.sketch-eraser-mode #map .maplibregl-canvas-container {
    cursor: none;
}

body[data-theme="dark"] .sketch-panel {
    color: inherit;
}

body[data-theme="dark"] .sketch-control-label {
    color: var(--subsection-heading-color);
}

body[data-theme="dark"] .sketch-size-value {
    color: rgba(237, 228, 210, 0.72);
}

body[data-theme="dark"] #sketch-panel.inspector > .selection-list {
    scrollbar-color: rgba(219, 190, 119, 0.38) transparent;
}

body[data-theme="dark"] #sketch-panel.inspector > .selection-list::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(219, 190, 119, 0.52), rgba(159, 125, 67, 0.42));
    background-clip: padding-box;
}

body[data-theme="dark"] .sketch-segmented {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(16, 23, 27, 0.52);
}

body[data-theme="dark"] .sketch-size-value {
    background: rgba(237, 228, 210, 0.12);
}

@media (max-width: 640px) {
    .sketch-panel {
        width: calc(100vw - 16px);
    }

    .sketch-panel-body {
        gap: 11px;
    }
}



.map-search-bar {
    position: absolute;
    top: var(--hud-top-edge-gap);
    left: var(--hud-top-side-gap);
    z-index: 5200;
    width: clamp(250px, 27vw, 385px);
    min-width: 220px;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(225, 183, 92, 0.3);
    border-radius: 999px;
    color: var(--maphora-ivory, #f7f4ee);
    background: var(--maphora-chrome-gradient, linear-gradient(165deg, #142a44, #0c1b2e 74%));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 32px rgba(5, 10, 15, 0.26);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    pointer-events: auto;
}

.map-search-bar.has-search-results {
    height: auto;
    max-height: min(72dvh, 620px);
    border-radius: 18px;
}

.map-search-controls {
    width: 100%;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px 0 5px;
}

.map-search-bar:focus-within {
    border-color: rgba(239, 198, 111, 0.68);
    background: var(--maphora-chrome-gradient, linear-gradient(165deg, #142a44, #0c1b2e 74%));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 0 0 2px rgba(225, 183, 92, 0.12),
        0 14px 34px rgba(5, 10, 15, 0.3);
}

.map-search-bar input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    outline: 0;
    color: rgba(247, 244, 238, 0.94);
    background: transparent;
    box-shadow: none;
    font-size: 0.82rem;
    cursor: text;
}

#search-query-input:focus,
#search-query-input:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
}

.map-search-drag-handle {
    width: 26px;
    height: 26px;
    margin-left: 2px;
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(247, 244, 238, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.map-search-drag-handle::before {
    background:
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 10px / 12px 1.5px no-repeat;
}

.map-search-drag-handle:hover {
    border-color: rgba(225, 183, 92, 0.42);
    background: rgba(226, 181, 84, 0.12);
}

.map-search-bar input[type="search"]::placeholder {
    color: rgba(247, 244, 238, 0.46);
    opacity: 1;
}

.map-search-bar input[type="search"]::-webkit-search-cancel-button {
    filter: invert(1);
    opacity: 0.58;
}

.map-search-submit {
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    color: rgba(247, 244, 238, 0.7);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.map-search-submit {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.map-search-submit svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.map-search-submit:hover:not(:disabled),
.map-search-submit:focus-visible:not(:disabled) {
    color: #f2ca72;
    background: rgba(226, 181, 84, 0.12);
    box-shadow: none;
    transform: none;
}

.map-search-dismiss {
    display: none;
}

.map-search-shortcut {
    height: 26px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    pointer-events: none;
    user-select: none;
}

.map-search-shortcut kbd {
    display: block;
    padding: 4px 8px;
    border: 1px solid rgba(247, 244, 238, 0.12);
    border-radius: 999px;
    color: rgba(247, 244, 238, 0.68);
    background: rgba(247, 244, 238, 0.055);
    font: 600 0.66rem/1 system-ui, sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

#search-panel.search-panel {
    position: static;
    inset: auto;
    width: 100%;
    max-width: none;
    max-height: min(62dvh, 520px);
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px 9px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid rgba(247, 244, 238, 0.1);
    border-radius: 0;
    color: var(--maphora-ivory, #f7f4ee);
    background: linear-gradient(180deg, rgba(20, 42, 68, 0.985), rgba(12, 27, 46, 0.99));
    box-shadow: none;
    transform: none;
    scrollbar-color: rgba(212, 160, 23, 0.52) rgba(255, 255, 255, 0.05);
}

#search-panel.search-panel::-webkit-scrollbar {
    width: 8px;
}

#search-panel.search-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

#search-panel.search-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(212, 160, 23, 0.52);
    background-clip: padding-box;
}

.search-panel-body {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-top: 8px;
}

.search-results-heading-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.search-results-heading-row .browser-subsection-label {
    margin: 0;
}

#search-panel .search-results-heading-row .browser-subsection-label {
    color: rgba(242, 202, 114, 0.82);
}

.search-results-heading-row #close-search-panel {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    flex: 0 0 30px;
}

#search-panel #close-search-panel {
    color: rgba(247, 244, 238, 0.76);
    border-color: rgba(225, 183, 92, 0.2);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}

#search-panel #close-search-panel:hover:not(:disabled),
#search-panel #close-search-panel:focus-visible:not(:disabled) {
    color: #f2ca72;
    border-color: rgba(225, 183, 92, 0.44);
    background: rgba(225, 183, 92, 0.12);
    box-shadow: none;
    transform: none;
}

.search-list {
    display: grid;
    gap: 10px;
}

.search-browser-header {
    width: 100%;
}

.search-result-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.search-result-item {
    position: relative;
}

.search-result-button {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 10px 48px 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg-strong);
    color: var(--ink);
    text-align: left;
    box-shadow: none;
    transform: none;
}

#search-panel .search-browser-card {
    color: var(--maphora-ivory, #f7f4ee);
    border-color: rgba(247, 244, 238, 0.11);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 46%),
        rgba(20, 42, 68, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#search-panel .search-browser-header,
#search-panel .search-browser-card.expanded .search-browser-header {
    color: var(--maphora-ivory, #f7f4ee);
    background: rgba(247, 244, 238, 0.035);
}

#search-panel .search-browser-header:hover:not(:disabled),
#search-panel .search-browser-header:focus-visible:not(:disabled),
#search-panel .search-browser-card.expanded .search-browser-header:hover:not(:disabled) {
    color: #f2ca72;
    border-color: transparent;
    background: rgba(225, 183, 92, 0.1);
    box-shadow: none;
    transform: none;
}

#search-panel .search-browser-header strong,
#search-panel .search-result-label {
    color: rgba(247, 244, 238, 0.96);
}

#search-panel .search-browser-header .coordinates {
    color: rgba(237, 228, 210, 0.68);
}

#search-panel .search-browser-header:hover strong,
#search-panel .search-browser-header:focus-visible strong {
    color: #f2ca72;
}

#search-panel .marker-browser-grip {
    opacity: 0.58;
    background-image:
        radial-gradient(circle, rgba(247, 244, 238, 0.62) 1.2px, transparent 1.3px),
        radial-gradient(circle, rgba(247, 244, 238, 0.62) 1.2px, transparent 1.3px);
}

#search-panel .marker-browser-chevron {
    border-right-color: rgba(247, 244, 238, 0.68);
    border-bottom-color: rgba(247, 244, 238, 0.68);
}

#search-panel .marker-browser-body {
    color: rgba(237, 228, 210, 0.84);
}

#search-panel .search-result-button {
    color: rgba(247, 244, 238, 0.94);
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(20, 42, 68, 0.64);
}

.search-result-button:hover:not(:disabled) {
    background: rgba(71, 93, 79, 0.12);
    box-shadow: none;
    transform: none;
}

#search-panel .search-result-button:hover:not(:disabled),
#search-panel .search-result-button:focus-visible:not(:disabled) {
    color: var(--maphora-ivory, #f7f4ee);
    border-color: rgba(225, 183, 92, 0.38);
    background: rgba(225, 183, 92, 0.1);
    box-shadow: none;
    transform: none;
}

.search-result-button:disabled {
    opacity: 0.65;
    cursor: default;
}

.search-result-delete {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.search-result-label {
    font-weight: 600;
}

.search-result-subtitle,
.search-result-meta,
.search-status-note {
    color: rgba(43, 36, 24, 0.76);
    line-height: 1.45;
}

.search-result-meta {
    font-size: 0.82rem;
}

#search-panel .search-result-subtitle,
#search-panel .search-result-meta,
#search-panel .search-status-note {
    color: rgba(237, 228, 210, 0.72);
}

#search-panel .delete-badge {
    color: rgba(232, 170, 148, 0.76);
    border-color: rgba(179, 106, 88, 0.24);
    background: rgba(179, 106, 88, 0.08);
    box-shadow: none;
}

#search-panel .delete-badge:hover,
#search-panel .delete-badge:focus-visible {
    color: #fffaf2;
    border-color: #c9473b;
    background: #c9473b;
    box-shadow: 0 8px 16px rgba(164, 45, 35, 0.24);
    transform: none;
}

body[data-theme="dark"] #search-panel .delete-badge:hover,
body[data-theme="dark"] #search-panel .delete-badge:focus-visible {
    color: #fffaf2;
    border-color: #dc5b4d;
    background: #dc5b4d;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.search-status-note {
    padding: 10px 12px 2px;
    font-size: 0.92rem;
}

.search-status-error {
    color: rgba(123, 63, 45, 0.92);
}

body[data-theme="dark"] .search-result-button:hover:not(:disabled) {
    background: rgba(255, 250, 237, 0.05);
}

body[data-theme="dark"] .search-result-subtitle,
body[data-theme="dark"] .search-result-meta,
body[data-theme="dark"] .search-status-note {
    color: rgba(237, 228, 210, 0.84);
}

body[data-theme="dark"] .search-status-error {
    color: rgba(230, 146, 126, 0.96);
}

body[data-theme="dark"] #search-panel.search-panel {
    border-top-color: rgba(247, 244, 238, 0.1);
    background: linear-gradient(180deg, rgba(20, 42, 68, 0.985), rgba(12, 27, 46, 0.99));
}

body[data-theme="dark"] .marker-browser-header:hover,
body[data-theme="dark"] .marker-browser-card.expanded .marker-browser-header {
    background: rgba(255, 250, 237, 0.05);
}

.selection-list {
    display: grid;
    gap: 8px;
    min-width: 0;
    overflow-x: hidden;
}

.inspector-multi-selection {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(225, 183, 92, 0.34);
    border-radius: 14px;
    color: rgba(247, 244, 238, 0.9);
    background:
        linear-gradient(145deg, rgba(225, 183, 92, 0.12), rgba(255, 255, 255, 0.035)),
        rgba(12, 27, 46, 0.46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(3, 10, 18, 0.12);
}

.inspector-multi-selection-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.inspector-multi-selection-heading strong {
    color: var(--maphora-ivory, #f7f4ee);
    font-size: 0.92rem;
}

.inspector-multi-selection-count {
    min-width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    border: 1px solid rgba(225, 183, 92, 0.34);
    border-radius: 999px;
    color: #f5ca70;
    background: rgba(225, 183, 92, 0.12);
    font-size: 0.76rem;
    font-weight: 750;
}

.inspector-multi-selection p {
    margin: 0;
    color: rgba(247, 244, 238, 0.68);
    font-size: 0.78rem;
    line-height: 1.4;
}

.inspector-multi-selection-editor {
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(247, 244, 238, 0.1);
}

.browser-section {
    display: grid;
    gap: 10px;
}

.browser-collapsible-section {
    gap: 8px;
}

.browser-section-header {
    position: relative;
}

.browser-section-header .browser-section-toggle {
    /* Keep the disclosure chevron clear of the overlaid "select all" control. */
    padding-right: 76px;
}

#inspector-panel .browser-section-select-all {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 22px;
    min-height: 0;
    padding: 2px 7px;
    border: 1px solid rgba(148, 125, 74, 0.34);
    border-radius: 999px;
    color: rgba(247, 244, 238, 0.9);
    background: rgba(8, 27, 47, 0.28);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transform: translateY(-50%);
}

#inspector-panel .browser-section-select-all:hover,
#inspector-panel .browser-section-select-all:focus-visible,
#inspector-panel .browser-section-select-all.is-active {
    border-color: rgba(239, 198, 111, 0.72);
    color: #efc66f;
    background: rgba(239, 198, 111, 0.12);
    box-shadow: 0 0 0 2px rgba(239, 198, 111, 0.08);
    transform: translateY(-50%);
}

.browser-section + .browser-section {
    margin-top: 6px;
}

.browser-section-body {
    display: grid;
    gap: 10px;
}

.browser-section-body.hidden {
    display: none;
}

.browser-section-heading {
    margin: 0;
}

.browser-subsection-divider {
    height: 1px;
    margin: 2px 0 0;
    background: linear-gradient(90deg, rgba(148, 125, 74, 0), rgba(148, 125, 74, 0.9), rgba(148, 125, 74, 0));
    opacity: 0.9;
}

.browser-subsection-label {
    margin-top: 2px;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--subsection-heading-color);
}

.inspector-group-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.inspector-group-create {
    min-height: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(88, 69, 37, 0.08);
    border: 1px solid rgba(88, 69, 37, 0.12);
    color: rgba(60, 47, 26, 0.9);
}

.inspector-group-create:hover {
    background: rgba(71, 93, 79, 0.12);
}

.inspector-group-global-shell {
    position: relative;
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.inspector-group-global-toolbar {
    display: flex;
    justify-content: flex-end;
}

.inspector-group-create-global {
    min-width: 118px;
}

.inspector-group-global-menu {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: 4;
    display: grid;
    gap: 4px;
    min-width: 156px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 248, 235, 0.96);
    box-shadow: 0 10px 22px rgba(54, 37, 19, 0.12);
}

.inspector-group-global-option {
    min-height: 0;
    justify-content: flex-start;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transform: none;
    text-align: left;
    color: rgba(60, 47, 26, 0.92);
}

.inspector-group-global-option:hover,
.inspector-group-global-option:focus-visible {
    background: rgba(71, 93, 79, 0.08);
    border-color: rgba(71, 93, 79, 0.1);
    box-shadow: none;
    transform: none;
}

.inspector-ungrouped-block {
    display: grid;
    gap: 8px;
    border-radius: 14px;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.inspector-ungrouped-block.empty {
    padding: 10px 12px 12px;
}

.inspector-ungrouped-label {
    margin-bottom: 2px;
}

.inspector-group-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(88, 69, 37, 0.16);
    background:
        linear-gradient(180deg, rgba(228, 214, 182, 0.72), rgba(220, 204, 170, 0.62));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 8px 18px rgba(88, 69, 37, 0.06);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.inspector-group-card.drop-target,
.inspector-ungrouped-block.drop-target {
    border-color: rgba(71, 93, 79, 0.28);
    background: rgba(71, 93, 79, 0.1);
    box-shadow: inset 0 0 0 1px rgba(71, 93, 79, 0.12);
}

.inspector-group-header-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding-right: 8px;
}

.inspector-group-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    transform: none;
}

.inspector-group-toggle:hover {
    background: rgba(71, 93, 79, 0.08);
    box-shadow: none;
    transform: none;
}

.inspector-group-card:not(.collapsed) .inspector-group-toggle {
    background: rgba(71, 93, 79, 0.1);
}

.inspector-group-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inspector-group-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(43, 36, 24, 0.9);
}

.inspector-group-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(88, 69, 37, 0.08);
    color: rgba(88, 69, 37, 0.84);
    font-size: 0.74rem;
    text-align: center;
}

.inspector-group-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    margin-right: 4px;
    border-right: 2px solid rgba(43, 36, 24, 0.48);
    border-bottom: 2px solid rgba(43, 36, 24, 0.48);
    transform: rotate(45deg);
    transition: transform 140ms ease, border-color 140ms ease;
}

.inspector-group-card:not(.collapsed) .inspector-group-chevron {
    transform: rotate(225deg);
}

.inspector-group-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 0;
}

.inspector-group-action {
    min-height: 0;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(88, 69, 37, 0.1);
    background: rgba(255, 248, 235, 0.52);
    color: rgba(88, 69, 37, 0.84);
    box-shadow: none;
    transform: none;
}

.inspector-group-action:hover {
    background: rgba(71, 93, 79, 0.12);
    box-shadow: none;
    transform: none;
}

.inspector-group-action svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inspector-group-visibility.is-hidden {
    background: rgba(88, 69, 37, 0.1);
    color: rgba(88, 69, 37, 0.58);
}

.inspector-group-delete svg {
    width: 16px;
    height: 16px;
}

#inspector-panel .inspector-group-delete:hover:not(:disabled),
#inspector-panel .inspector-group-delete:focus-visible:not(:disabled),
#inspector-panel .delete-badge:hover:not(:disabled),
#inspector-panel .delete-badge:focus-visible:not(:disabled) {
    color: #fffaf2;
    border-color: #c9473b;
    background: #c9473b;
    box-shadow: 0 8px 16px rgba(164, 45, 35, 0.24);
}

body[data-theme="dark"] #inspector-panel .inspector-group-delete:hover:not(:disabled),
body[data-theme="dark"] #inspector-panel .inspector-group-delete:focus-visible:not(:disabled),
body[data-theme="dark"] #inspector-panel .delete-badge:hover:not(:disabled),
body[data-theme="dark"] #inspector-panel .delete-badge:focus-visible:not(:disabled) {
    color: #fffaf2;
    border-color: #dc5b4d;
    background: #dc5b4d;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.inspector-group-body {
    display: grid;
    gap: 8px;
    padding: 8px 12px 12px;
}

.inspector-group-body.hidden {
    display: none;
}

.inspector-group-empty {
    padding: 2px 2px 0;
    font-size: 0.86rem;
    color: rgba(88, 69, 37, 0.7);
}

.inspector-group-title-input {
    width: 100%;
    min-width: 0;
}

.marker-browser-card {
    border-radius: 14px;
    padding: 10px 12px;
    background: var(--surface-card-bg);
    border: 1px solid var(--surface-card-border);
}

.marker-browser-header strong {
    display: block;
    margin-bottom: 4px;
}

.marker-browser-card {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.marker-browser-heading-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding-right: 8px;
}

.marker-browser-card.drop-before::before,
.marker-browser-card.drop-after::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 999px;
    background: rgba(50, 79, 69, 0.8);
}

.marker-browser-card.drop-before::before {
    top: 4px;
}

.marker-browser-card.drop-after::after {
    bottom: 4px;
}

.marker-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: auto;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    padding: 12px;
    background: transparent;
    text-align: left;
    box-shadow: none;
    transform: none;
    cursor: grab;
}

.marker-browser-header:hover {
    background: rgba(71, 93, 79, 0.12);
    box-shadow: none;
    transform: none;
}

.marker-browser-card.expanded .marker-browser-header {
    background: rgba(71, 93, 79, 0.12);
}

.marker-browser-header-main,
.line-browser-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.marker-browser-label-row,
.line-browser-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.marker-browser-grip {
    width: 10px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.45;
    background-image:
        radial-gradient(circle, rgba(43, 36, 24, 0.72) 1.2px, transparent 1.3px),
        radial-gradient(circle, rgba(43, 36, 24, 0.72) 1.2px, transparent 1.3px);
    background-position: 0 0, 5px 0;
    background-size: 5px 6px;
    background-repeat: repeat-y;
}

body[data-theme="dark"] .marker-browser-grip {
    opacity: 0.58;
    background-image:
        radial-gradient(circle, rgba(237, 228, 210, 0.62) 1.2px, transparent 1.3px),
        radial-gradient(circle, rgba(237, 228, 210, 0.62) 1.2px, transparent 1.3px);
}

.line-color-chip {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(43, 36, 24, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.marker-browser-chevron {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border-right: 2px solid rgba(43, 36, 24, 0.55);
    border-bottom: 2px solid rgba(43, 36, 24, 0.55);
    transform: rotate(45deg);
    transition: transform 140ms ease, border-color 140ms ease;
    margin-right: 4px;
}

.marker-browser-card.expanded .marker-browser-chevron {
    transform: rotate(225deg);
}

body[data-theme="dark"] .marker-browser-chevron {
    border-right-color: rgba(237, 228, 210, 0.68);
    border-bottom-color: rgba(237, 228, 210, 0.68);
}

.marker-browser-body {
    padding: 0 12px 12px;
    font-size: 0.95rem;
    color: rgba(43, 36, 24, 0.82);
}

.marker-browser-body.hidden {
    display: none;
}

.marker-browser-editor {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.marker-browser-editor label {
    display: block;
    font-size: 0.9rem;
    color: rgba(43, 36, 24, 0.82);
}

.line-style-field {
    display: grid;
    gap: 4px;
}

.line-style-field-label {
    font-size: 0.9rem;
    color: rgba(43, 36, 24, 0.82);
}

.line-style-picker {
    position: relative;
    width: 100%;
    color: var(--line-style-color, currentColor);
}

.line-style-toggle,
.line-style-option {
    width: 100%;
    border: 1px solid rgba(43, 36, 24, 0.16);
    background: rgba(255, 253, 248, 0.76);
    color: var(--line-style-color, currentColor);
    box-shadow: none;
    transform: none;
}

.line-style-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 11px;
    text-align: left;
}

.line-style-toggle-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: rgba(43, 36, 24, 0.62);
    transform: rotate(45deg) translateY(-2px);
}

.line-style-toggle[aria-expanded="true"] .line-style-toggle-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.line-style-sample {
    display: block;
    width: 100%;
    min-width: 0;
    height: 24px;
    color: var(--line-style-color, currentColor);
}

.line-style-sample svg {
    display: block;
    width: 100%;
    height: 24px;
    overflow: visible;
}

.line-style-sample line {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.line-style-sample .line-style-sample-thick {
    stroke-width: 4;
}

.line-style-sample .line-style-sample-thin {
    stroke-width: 1.5;
}

.line-style-menu {
    position: static;
    width: 100%;
    max-height: min(330px, 52vh);
    margin-top: 5px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(43, 36, 24, 0.18);
    border-radius: 10px;
    background: rgba(247, 244, 238, 0.98);
    box-shadow: 0 14px 30px rgba(12, 27, 46, 0.22);
}

.line-style-menu.hidden {
    display: none;
}

.line-style-option {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 5px 10px;
    border-color: transparent;
    border-radius: 7px;
}

.line-style-option:hover,
.line-style-option:focus-visible {
    border-color: rgba(212, 160, 23, 0.38);
    background: rgba(212, 160, 23, 0.1);
}

.line-style-option[aria-selected="true"] {
    border-color: rgba(212, 160, 23, 0.56);
    background: rgba(212, 160, 23, 0.16);
}

body[data-theme="dark"] .line-style-field-label {
    color: rgba(237, 228, 210, 0.88);
}

body[data-theme="dark"] .line-style-toggle,
body[data-theme="dark"] .line-style-option {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(5, 14, 25, 0.72);
}

body[data-theme="dark"] .line-style-menu {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(12, 27, 46, 0.98);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
}

body[data-theme="dark"] .line-style-toggle-chevron {
    color: rgba(237, 228, 210, 0.68);
}

.inspector-group-field select {
    width: 100%;
}

body[data-theme="dark"] .marker-browser-editor label {
    color: rgba(237, 228, 210, 0.88);
}

body[data-theme="dark"] .inspector-group-create {
    background: rgba(255, 250, 237, 0.05);
    border-color: rgba(237, 228, 210, 0.12);
    color: rgba(237, 228, 210, 0.9);
}

body[data-theme="dark"] .inspector-group-global-menu {
    border-color: rgba(237, 228, 210, 0.1);
    background: rgba(20, 27, 31, 0.96);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .inspector-group-global-option {
    color: rgba(237, 228, 210, 0.88);
}

body[data-theme="dark"] .inspector-group-global-option:hover,
body[data-theme="dark"] .inspector-group-global-option:focus-visible {
    background: rgba(255, 250, 237, 0.08);
    border-color: rgba(237, 228, 210, 0.08);
}

body[data-theme="dark"] .inspector-group-card {
    background:
        linear-gradient(180deg, rgba(44, 55, 60, 0.78), rgba(31, 39, 43, 0.72));
    border-color: rgba(237, 228, 210, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 22px rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .inspector-group-card.drop-target,
body[data-theme="dark"] .inspector-ungrouped-block.drop-target {
    border-color: rgba(118, 173, 146, 0.24);
    background: rgba(76, 109, 95, 0.14);
    box-shadow: inset 0 0 0 1px rgba(118, 173, 146, 0.12);
}

body[data-theme="dark"] .inspector-group-toggle:hover,
body[data-theme="dark"] .inspector-group-card:not(.collapsed) .inspector-group-toggle {
    background: rgba(255, 250, 237, 0.08);
}

body[data-theme="dark"] .inspector-group-title {
    color: rgba(237, 228, 210, 0.92);
}

body[data-theme="dark"] .inspector-group-count {
    background: rgba(255, 250, 237, 0.06);
    color: rgba(237, 228, 210, 0.82);
}

body[data-theme="dark"] .inspector-group-chevron {
    border-right-color: rgba(237, 228, 210, 0.62);
    border-bottom-color: rgba(237, 228, 210, 0.62);
}

body[data-theme="dark"] .inspector-group-action {
    background: rgba(255, 250, 237, 0.04);
    border-color: rgba(237, 228, 210, 0.08);
    color: rgba(237, 228, 210, 0.82);
}

body[data-theme="dark"] .inspector-group-visibility.is-hidden {
    background: rgba(255, 250, 237, 0.06);
    color: rgba(237, 228, 210, 0.52);
}

body[data-theme="dark"] .inspector-group-empty {
    color: rgba(237, 228, 210, 0.68);
}



.riddle-event-graph-error {
    position: absolute;
    inset: auto 16px 24px;
    z-index: 2147483000;
    max-width: 560px;
    margin-inline: auto;
    padding: 16px;
    border: 1px solid #bda569;
    border-radius: 12px;
    background: #172132;
    color: #fff;
    pointer-events: auto;
    box-shadow: 0 8px 30px #0006;
}
.riddle-event-graph-error[hidden] { display: none; }
.riddle-event-graph-error p { margin: 0 0 12px; }
.riddle-event-graph-error button {
    padding: 8px 16px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.riddle-event-graph-error button:focus-visible { outline: 3px solid #e3c27d; outline-offset: 3px; }
.riddle-event-graph-actions {
    position: absolute;
    inset: 16px 16px auto auto;
    z-index: 2147482999;
    max-width: min(420px, calc(100% - 32px));
    padding: 12px;
    border: 1px solid #bda569;
    border-radius: 12px;
    background: #172132ee;
    color: #fff;
    pointer-events: auto;
    box-shadow: 0 8px 30px #0006;
}
.riddle-event-graph-actions[hidden] { display: none; }
.riddle-event-graph-actions h3 { margin: 0 0 8px; font-size: 14px; }
.riddle-event-graph-actions-list { display: flex; gap: 8px; flex-wrap: wrap; }
.riddle-event-graph-actions button {
    padding: 8px 12px;
    border: 1px solid #e3c27d;
    border-radius: 7px;
    background: #263a55;
    color: inherit;
    cursor: pointer;
}
.riddle-event-graph-actions button:disabled { opacity: .45; cursor: default; }
.riddle-event-graph-actions button:focus-visible { outline: 3px solid #e3c27d; outline-offset: 3px; }


.modal-shell {
    position: absolute;
    inset: 0;
    z-index: 90;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 18, 11, 0.18);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}

.modal-card {
    position: absolute;
    top: 96px;
    left: 50%;
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 32px));
    padding: 16px;
    border-radius: 20px;
    background: rgba(245, 232, 198, 0.97);
    border: 1px solid rgba(88, 69, 37, 0.12);
    box-shadow:
        0 32px 72px rgba(24, 19, 10, 0.34),
        0 10px 24px rgba(24, 19, 10, 0.2);
    pointer-events: auto;
}

.modal-card-settings {
    max-height: min(780px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
}

body[data-theme="dark"] .modal-backdrop {
    background: rgba(5, 8, 10, 0.42);
}

body[data-theme="dark"] .modal-card {
    background: linear-gradient(180deg, rgba(29, 37, 42, 0.97), rgba(18, 25, 29, 0.96));
    border-color: rgba(237, 228, 210, 0.12);
    box-shadow:
        0 34px 78px rgba(0, 0, 0, 0.58),
        0 10px 24px rgba(0, 0, 0, 0.38);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-title-stack {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.settings-version-row {
    justify-content: flex-start;
}

.modal-close-button {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    font-size: 1.2rem;
}

.modal-body {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.settings-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 14px;
}

.modal-card-update {
    width: min(420px, calc(100vw - 32px));
}

.plan-close-confirm-modal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Keep the destructive confirmation above every interactive workspace
       surface (HUD, radial launcher and sketch tools), while global notices
       retain their dedicated 10000 layer. */
    z-index: 9000;
}

.plan-close-confirm-modal.hidden {
    display: none;
}

.plan-close-confirm-modal .modal-backdrop {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 225, 154, 0.16), rgba(21, 18, 11, 0) 34%),
        rgba(18, 15, 9, 0.42);
    backdrop-filter: blur(4px);
}

.modal-card-plan-close-confirm {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(420px, calc(100vw - 32px));
    padding: 18px;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 248, 226, 0.98), rgba(237, 217, 170, 0.98));
    border: 1px solid rgba(109, 79, 31, 0.28);
    box-shadow:
        0 34px 76px rgba(24, 18, 8, 0.42),
        0 0 0 1px rgba(255, 244, 202, 0.42) inset;
}

.modal-card-plan-close-confirm::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #143d2e, #d1a449 48%, #7b3f2d);
}

.plan-close-confirm-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 2px auto 0;
    border: 1px solid rgba(166, 62, 53, 0.32);
    border-radius: 50%;
    color: #fffaf2;
    background: #c9473b;
    box-shadow:
        0 12px 26px rgba(164, 45, 35, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.plan-close-confirm-modal[data-confirm-tone="destructive"] .plan-close-confirm-icon {
    display: flex;
}

.plan-close-confirm-icon svg {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    fill: currentColor;
}

.plan-close-confirm-copy {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.plan-close-confirm-copy h2 {
    margin: 0;
    color: #26392f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    line-height: 1.2;
}

.plan-close-confirm-copy p {
    margin: 0;
    color: rgba(43, 36, 24, 0.76);
    line-height: 1.45;
}

.plan-close-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.plan-close-confirm-actions button {
    min-width: 112px;
    border-radius: 8px;
}

.plan-close-confirm-primary {
    color: #fff4dc;
    background: linear-gradient(180deg, #8e4a34, #6f3528);
    border: 1px solid rgba(255, 218, 154, 0.48);
    box-shadow:
        0 10px 20px rgba(111, 53, 40, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.plan-close-confirm-primary:hover,
.plan-close-confirm-primary:focus-visible {
    background: linear-gradient(180deg, #9c563e, #783a2c);
}

body[data-theme="dark"] .modal-card-plan-close-confirm {
    background:
        linear-gradient(180deg, rgba(31, 41, 37, 0.98), rgba(20, 28, 25, 0.98));
    border-color: rgba(255, 222, 154, 0.18);
}

body[data-theme="dark"] .plan-close-confirm-icon {
    border-color: rgba(255, 153, 143, 0.42);
    background: #d65347;
}

body[data-theme="dark"] .plan-close-confirm-copy h2 {
    color: #f7ebcf;
}

body[data-theme="dark"] .plan-close-confirm-copy p {
    color: rgba(237, 228, 210, 0.78);
}

.youtube-import-modal {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 121;
}

.youtube-import-modal.hidden {
    display: none;
}

.youtube-import-modal .modal-backdrop {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 225, 154, 0.14), rgba(21, 18, 11, 0) 36%),
        rgba(18, 15, 9, 0.36);
    backdrop-filter: blur(4px);
}

.modal-card-youtube-import {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(460px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 248, 226, 0.98), rgba(239, 224, 187, 0.98));
    border: 1px solid rgba(109, 79, 31, 0.24);
    box-shadow:
        0 34px 76px rgba(24, 18, 8, 0.4),
        0 0 0 1px rgba(255, 244, 202, 0.4) inset;
}

.modal-card-youtube-import::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #143d2e, #d1a449 48%, #7b3f2d);
}

.youtube-import-header {
    align-items: flex-start;
}

.youtube-import-body {
    gap: 14px;
}

.youtube-import-field {
    display: grid;
    gap: 7px;
    color: rgba(43, 36, 24, 0.74);
    font-size: 0.86rem;
    font-weight: 680;
}

.youtube-import-field input {
    width: 100%;
    height: 42px;
    border-radius: 10px;
}

.youtube-import-error {
    margin-top: -4px;
    color: #8e3f2f;
    font-size: 0.82rem;
    font-weight: 650;
}

.youtube-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
}

.youtube-import-actions button {
    min-width: 104px;
    border-radius: 8px;
}

body[data-theme="dark"] .modal-card-youtube-import {
    background:
        linear-gradient(180deg, rgba(31, 41, 37, 0.98), rgba(20, 28, 25, 0.98));
    border-color: rgba(255, 222, 154, 0.18);
}

body[data-theme="dark"] .youtube-import-field {
    color: rgba(237, 228, 210, 0.76);
}

body[data-theme="dark"] .youtube-import-error {
    color: #f0a18d;
}

.modal-card-preset-player {
    width: min(1180px, calc(100vw - 36px));
    height: min(860px, calc(100vh - 36px));
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    contain: layout paint;
}

#preset-player-modal {
    z-index: 60;
    pointer-events: none;
}

.preset-player-scene-layer {
    position: fixed;
    inset: 0;
    z-index: 800;
    pointer-events: none;
    overflow: visible;
    isolation: isolate;
}

body[data-immersive-view="immersive"] .preset-player-scene-layer,
body[data-immersive-view="immersive"] #preset-player-modal[data-preset-player-surface="map-overlay"],
body[data-immersive-view="immersive"] #preset-player-modal[data-preset-player-surface="native-surface"] {
    z-index: 800 !important;
}

#preset-player-modal .modal-backdrop {
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

/* Challenge documents remain integrated with the map instead of obscuring it. */
body.preset-player-open #map,
body.preset-player-open .maplibre-dom-desk-tool-surface,
body.preset-player-open .immersive-air-css-overlay,
body.preset-player-open .immersive-air-canvas,
body.preset-player-open #map-engine-indicator,
body.preset-player-open #map .maplibregl-canvas-container,
body.preset-player-open #map .maplibregl-canvas,
body.preset-player-open #map .map-engine-pane,
body.preset-player-open #map .map-engine-layer,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) .maplibre-dom-desk-tool-surface,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) .immersive-air-css-overlay,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) .immersive-air-canvas,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map-engine-indicator,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map .maplibregl-canvas-container,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map .maplibregl-canvas,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map .map-engine-pane,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map .map-engine-layer {
    -webkit-filter: none !important;
    filter: none !important;
}

body.preset-player-open #map,
body:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) #map {
    transform: none !important;
}

body[data-immersive-view="immersive"].preset-player-open .immersive-scene,
body[data-immersive-view="immersive"]:has(#preset-player-modal:not(.hidden)[aria-hidden="false"]) .immersive-scene {
    -webkit-filter: none !important;
    filter: none !important;
    transform: none !important;
}

#preset-player-dialog {
    pointer-events: auto;
}

/* The fullscreen preset dialog sits above the map. The premium modal skin adds
 * a backdrop blur to every .modal-card, so neutralize it on both integrated
 * document surfaces instead of trying to unblur the map underneath. */
#preset-player-modal[data-preset-player-surface="map-overlay"] #preset-player-dialog,
#preset-player-modal[data-preset-player-surface="native-surface"] #preset-player-dialog {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] {
    position: absolute;
    inset: 0;
    z-index: 800;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    isolation: isolate;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .modal-backdrop {
    display: none;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] #preset-player-dialog {
    position: absolute;
    inset: 0;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-body {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-frame {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    pointer-events: auto;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-header {
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 4;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-header-actions {
    pointer-events: none;
}

#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-close-button,
#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-window-button,
#preset-player-modal[data-preset-player-surface="map-overlay"] .preset-player-header .panel-drag-handle {
    display: none;
}

#preset-player-modal[data-preset-player-surface="native-surface"] {
    position: fixed;
    inset: 0;
    z-index: 800;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    isolation: isolate;
}

#preset-player-modal[data-preset-player-surface="native-surface"] .modal-backdrop {
    display: none;
}

#preset-player-modal[data-preset-player-surface="native-surface"] #preset-player-dialog {
    position: absolute;
    inset: 0;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-body {
    position: absolute;
    inset: 0;
    margin: 0;
    pointer-events: none;
}

#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-frame,
#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-window-button,
#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-header .panel-drag-handle {
    display: none;
}

.preset-native-layer {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

.preset-native-widget {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    contain: layout paint;
}

.preset-native-widget[data-dock="left"],
.preset-native-widget[data-dock="right"] {
    max-width: none;
}

.preset-native-widget[data-dock="bottom"] {
    max-height: none;
}

.preset-native-widget[data-dragging="true"] {
    cursor: auto;
}

.preset-native-widget-grip {
    display: none;
}

.preset-native-content-host {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
    pointer-events: none;
}

.preset-native-content-host * {
    pointer-events: none;
}

.preset-native-content-host :is(
    button,
    button *,
    a[href],
    a[href] *,
    input,
    select,
    textarea,
    [role="button"],
    [role="button"] *,
    [data-no-pile-poil-map-click],
    [data-no-pile-poil-map-click] *,
    [data-maphora-wheel-capture],
    [data-maphora-wheel-capture] *,
    [data-native-wheel-capture],
    [data-native-wheel-capture] *,
    [data-maphora-preset-object],
    [data-maphora-preset-object] *,
    [data-maphora-preset-interactive],
    [data-maphora-preset-interactive] *,
    [data-maphora-preset-document] button,
    [data-maphora-preset-document] button *,
    [data-maphora-preset-document] a[href],
    [data-maphora-preset-document] a[href] *,
    [data-maphora-preset-document] input,
    [data-maphora-preset-document] select,
    [data-maphora-preset-document] textarea,
    [data-maphora-preset-document] [role="button"],
    [data-maphora-preset-document] [role="button"] *,
    [data-maphora-preset-document] [data-maphora-preset-object],
    [data-maphora-preset-document] [data-maphora-preset-object] *,
    [data-maphora-preset-document] [data-maphora-preset-interactive],
    [data-maphora-preset-document] [data-maphora-preset-interactive] *,
    [data-maphora-preset-document] img,
    [data-maphora-preset-document] picture,
    [data-maphora-preset-document] figure,
    [data-maphora-preset-document] video,
    [data-maphora-preset-document] audio,
    [data-maphora-preset-document] canvas,
    [data-maphora-preset-document] [role="img"],
    [data-maphora-preset-element],
    [data-maphora-preset-element] *,
    [data-preset-element],
    [data-preset-element] *,
    [data-preset-media],
    [data-preset-media] *,
    [data-maphora-media],
    [data-maphora-media] *,
    .pictures-native-card,
    .pictures-native-card *,
    .audio-player,
    .audio-player *,
    .native-audio-player,
    .native-audio-player *,
    .preset-audio-player,
    .preset-audio-player *,
    .media-player,
    .media-player *,
    .cassette-player,
    .cassette-player *,
    .polaroid-card,
    .polaroid-card *,
    .photo-card,
    .photo-card *,
    .picture-card,
    .picture-card *,
    .digital-photo-card,
    .digital-photo-card *,
    .DigitalPhotoCard,
    .DigitalPhotoCard *,
    .DigitalPictureCard,
    .DigitalPictureCard *
) {
    pointer-events: auto;
}

.preset-native-widget.preset-native-pile-poil-cursor,
.preset-native-widget.preset-native-pile-poil-cursor *,
.preset-native-content-host.preset-native-pile-poil-cursor,
.preset-native-content-host.preset-native-pile-poil-cursor * {
    cursor: var(--pile-poil-cursor, crosshair) !important;
}

body.riddle-preset-pile-poil-cursor-suppressed .preset-native-widget.preset-native-pile-poil-cursor,
body.riddle-preset-pile-poil-cursor-suppressed .preset-native-widget.preset-native-pile-poil-cursor *,
body.riddle-preset-pile-poil-cursor-suppressed .preset-native-content-host.preset-native-pile-poil-cursor,
body.riddle-preset-pile-poil-cursor-suppressed .preset-native-content-host.preset-native-pile-poil-cursor * {
    cursor: auto !important;
}

.preset-native-widget.preset-native-pile-poil-cursor :is(button, a[href], input, select, textarea, [role="button"], [data-no-pile-poil-map-click], [data-maphora-wheel-capture], [data-native-wheel-capture], [data-maphora-preset-object], [data-maphora-preset-object] *, [data-maphora-preset-interactive], [data-maphora-preset-interactive] *, [data-maphora-preset-document] button, [data-maphora-preset-document] a[href], [data-maphora-preset-document] input, [data-maphora-preset-document] select, [data-maphora-preset-document] textarea, [data-maphora-preset-document] [role="button"], [data-maphora-preset-document] [data-maphora-preset-object], [data-maphora-preset-document] [data-maphora-preset-interactive], [data-maphora-preset-document] img, [data-maphora-preset-document] picture, [data-maphora-preset-document] figure, [data-maphora-preset-document] video, [data-maphora-preset-document] audio, [data-maphora-preset-document] canvas, [data-maphora-preset-document] [role="img"], [data-maphora-preset-element], [data-maphora-preset-element] *, [data-no-pile-poil-cursor], [data-preset-element], [data-preset-element] *, [data-preset-media], [data-preset-media] *, [data-maphora-media], [data-maphora-media] *, .pictures-native-card, .pictures-native-card *, .audio-player, .audio-player *, .native-audio-player, .native-audio-player *, .preset-audio-player, .preset-audio-player *, .media-player, .media-player *, .cassette-player, .cassette-player *, .polaroid-card, .polaroid-card *, .photo-card, .photo-card *, .picture-card, .picture-card *, .digital-photo-card, .digital-photo-card *, .DigitalPhotoCard, .DigitalPhotoCard *, .DigitalPictureCard, .DigitalPictureCard *),
.preset-native-content-host.preset-native-pile-poil-cursor :is(button, a[href], input, select, textarea, [role="button"], [data-no-pile-poil-map-click], [data-maphora-wheel-capture], [data-native-wheel-capture], [data-maphora-preset-object], [data-maphora-preset-object] *, [data-maphora-preset-interactive], [data-maphora-preset-interactive] *, [data-maphora-preset-document] button, [data-maphora-preset-document] a[href], [data-maphora-preset-document] input, [data-maphora-preset-document] select, [data-maphora-preset-document] textarea, [data-maphora-preset-document] [role="button"], [data-maphora-preset-document] [data-maphora-preset-object], [data-maphora-preset-document] [data-maphora-preset-interactive], [data-maphora-preset-document] img, [data-maphora-preset-document] picture, [data-maphora-preset-document] figure, [data-maphora-preset-document] video, [data-maphora-preset-document] audio, [data-maphora-preset-document] canvas, [data-maphora-preset-document] [role="img"], [data-maphora-preset-element], [data-maphora-preset-element] *, [data-no-pile-poil-cursor], [data-preset-element], [data-preset-element] *, [data-preset-media], [data-preset-media] *, [data-maphora-media], [data-maphora-media] *, .pictures-native-card, .pictures-native-card *, .audio-player, .audio-player *, .native-audio-player, .native-audio-player *, .preset-audio-player, .preset-audio-player *, .media-player, .media-player *, .cassette-player, .cassette-player *, .polaroid-card, .polaroid-card *, .photo-card, .photo-card *, .picture-card, .picture-card *, .digital-photo-card, .digital-photo-card *, .DigitalPhotoCard, .DigitalPhotoCard *, .DigitalPictureCard, .DigitalPictureCard *) {
    cursor: auto !important;
}

.preset-player-header {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 3;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.preset-player-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.preset-player-header .panel-drag-handle,
.preset-player-window-button,
.preset-player-close-button {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    border-radius: 12px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 250, 237, 0.78);
    border: 1px solid rgba(88, 69, 37, 0.12);
    color: rgba(88, 69, 37, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.preset-player-close-button {
    display: none;
}

#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-header {
    z-index: 6;
}

#preset-player-modal[data-preset-player-surface="native-surface"] .preset-player-close-button {
    display: inline-flex;
    pointer-events: auto;
}

.preset-player-window-button svg,
.preset-player-close-button svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}

.preset-player-window-button:hover,
.preset-player-window-button:focus-visible,
.preset-player-close-button:hover,
.preset-player-close-button:focus-visible {
    background: rgba(255, 250, 237, 0.92);
    color: rgba(67, 49, 22, 0.94);
    transform: none;
}

.preset-player-header .panel-drag-handle::before {
    background:
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(43, 36, 24, 0.34), rgba(43, 36, 24, 0.34)) center 10px / 12px 1.5px no-repeat;
}

.preset-player-title-block {
    display: none;
}

.preset-player-subtitle {
    max-width: 82ch;
    color: rgba(88, 69, 37, 0.74);
}

.preset-player-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0;
    overflow: hidden;
    margin-top: 0;
}

.preset-player-status {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 112px;
    z-index: 2;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(88, 69, 37, 0.08);
    border: 1px solid rgba(88, 69, 37, 0.12);
    color: rgba(43, 36, 24, 0.84);
    font-size: 0.94rem;
}

.preset-player-status[data-tone="error"] {
    background: rgba(123, 63, 45, 0.12);
    border-color: rgba(123, 63, 45, 0.18);
    color: rgba(101, 44, 29, 0.94);
}

.preset-player-status[data-tone="info"] {
    background: rgba(50, 79, 69, 0.1);
    border-color: rgba(50, 79, 69, 0.16);
    color: rgba(35, 61, 52, 0.94);
}

.preset-player-frame {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.modal-card-preset-player.is-dragging .preset-player-frame {
    pointer-events: none;
}

.modal-card-preset-player.is-expanded {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.modal-card-preset-player.is-expanded .preset-player-header {
    top: 12px;
    right: 12px;
}

.modal-card-preset-player.is-expanded .preset-player-frame {
    border-radius: 0;
}

.modal-card-preset-player.is-expanded .preset-player-header .panel-drag-handle {
    display: none;
}

body[data-theme="dark"] .preset-player-subtitle {
    color: rgba(237, 228, 210, 0.68);
}

body[data-theme="dark"] #preset-player-modal .modal-backdrop {
    background: transparent;
}

body[data-theme="dark"] .modal-card-preset-player {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

body[data-theme="dark"] .modal-card-preset-player.is-expanded {
    box-shadow: none;
}

body[data-theme="dark"] .preset-player-status {
    background: rgba(255, 250, 237, 0.06);
    border-color: rgba(237, 228, 210, 0.12);
    color: rgba(237, 228, 210, 0.86);
}

body[data-theme="dark"] .preset-player-status[data-tone="error"] {
    background: rgba(179, 106, 88, 0.14);
    border-color: rgba(179, 106, 88, 0.22);
    color: rgba(255, 214, 203, 0.92);
}

body[data-theme="dark"] .preset-player-status[data-tone="info"] {
    background: rgba(76, 109, 95, 0.16);
    border-color: rgba(76, 109, 95, 0.2);
    color: rgba(214, 240, 230, 0.9);
}

body[data-theme="dark"] .preset-player-frame {
    background: transparent;
    border-color: rgba(237, 228, 210, 0.12);
}

body[data-theme="dark"] .preset-player-header .panel-drag-handle,
body[data-theme="dark"] .preset-player-window-button,
body[data-theme="dark"] .preset-player-close-button {
    background: rgba(255, 250, 237, 0.08);
    border-color: rgba(237, 228, 210, 0.16);
    color: rgba(237, 228, 210, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .preset-player-window-button:hover,
body[data-theme="dark"] .preset-player-window-button:focus-visible,
body[data-theme="dark"] .preset-player-close-button:hover,
body[data-theme="dark"] .preset-player-close-button:focus-visible {
    background: rgba(255, 250, 237, 0.14);
    color: rgba(255, 248, 235, 0.96);
}

.update-modal-body {
    gap: 10px;
}

.update-version-label {
    margin-top: 2px;
}

.update-meta {
    font-size: 0.8rem;
    color: rgba(43, 36, 24, 0.62);
}

body[data-theme="dark"] .update-meta {
    color: rgba(237, 228, 210, 0.68);
}

.update-notes-card {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg-strong);
    color: rgba(43, 36, 24, 0.82);
    white-space: pre-wrap;
}

body[data-theme="dark"] .update-notes-card {
    color: rgba(237, 228, 210, 0.88);
}

.update-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.secondary-button {
    background: rgba(255, 250, 237, 0.72);
    color: rgba(43, 36, 24, 0.86);
    border: 1px solid rgba(88, 69, 37, 0.14);
}

body[data-theme="dark"] .secondary-button {
    background: rgba(255, 250, 237, 0.08);
    color: rgba(237, 228, 210, 0.9);
    border-color: rgba(237, 228, 210, 0.14);
}

.settings-radio-group {
    display: grid;
    gap: 10px;
}

.settings-subsection-heading {
    display: grid;
    gap: 4px;
    margin-top: 2px;
}

.settings-subsection-heading strong {
    color: rgba(43, 36, 24, 0.86);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.settings-subsection-heading small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.78rem;
    line-height: 1.4;
}

.settings-section {
    display: grid;
    gap: 10px;
}

.settings-section + .settings-section {
    margin-top: 4px;
}

.settings-section-toggle {
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    text-align: left;
}

.settings-section-toggle:hover,
.settings-section-toggle:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.settings-section-label {
    margin: 0;
}

.settings-section-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid rgba(88, 69, 37, 0.62);
    border-bottom: 2px solid rgba(88, 69, 37, 0.62);
    transform: rotate(45deg);
    transition: transform 140ms ease, opacity 140ms ease;
    opacity: 0.86;
}

.settings-section-toggle.collapsed .settings-section-chevron {
    transform: rotate(-45deg);
}

.settings-section-body {
    display: grid;
    gap: 10px;
}

.settings-section-body.hidden {
    display: none;
}

.settings-profile-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(123, 63, 45, 0.18);
    background:
        linear-gradient(180deg, rgba(255, 250, 237, 0.42), rgba(255, 250, 237, 0.14)),
        rgba(123, 63, 45, 0.055);
}

.settings-profile-card button {
    justify-self: stretch;
}

.player-profile-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-color: rgba(50, 79, 69, 0.16);
    background: rgba(50, 79, 69, 0.08);
}

.player-profile-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.player-profile-copy strong,
.player-profile-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-profile-copy strong {
    color: rgba(43, 36, 24, 0.92);
    font-size: 0.98rem;
}

.player-profile-copy small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.78rem;
}

.player-profile-copy small.muted {
    font-style: italic;
}

.settings-profile-helper {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.78rem;
    line-height: 1.45;
}

.settings-profile-card button[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.settings-profile-card button[disabled]:hover {
    transform: none;
}

.settings-profile-card button.danger {
    background: rgba(123, 63, 45, 0.16);
    border: 1px solid rgba(123, 63, 45, 0.14);
}

.player-account-logout-card.hidden {
    display: none;
}

.player-account-logout-card,
.settings-profile-reset-card {
    gap: 10px;
}

.player-privacy-card {
    gap: 12px;
}

.player-privacy-card.hidden {
    display: none;
}

.player-privacy-toggle-list {
    display: grid;
    gap: 8px;
}

.player-privacy-toggle {
    align-items: start;
    padding: 9px 10px;
}

.player-privacy-services {
    display: grid;
    gap: 8px;
    min-height: 0;
}

.player-privacy-services-heading {
    color: rgba(43, 36, 24, 0.76);
    font-size: 0.78rem;
    font-weight: 700;
}

.player-privacy-service-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(123, 63, 45, 0.12);
}

.player-privacy-service-row {
    display: grid;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(123, 63, 45, 0.12);
}

.player-privacy-service-row strong {
    color: rgba(43, 36, 24, 0.84);
    font-size: 0.82rem;
}

.player-privacy-service-row small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.75rem;
    line-height: 1.35;
}

.player-privacy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.player-privacy-actions button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 13px;
    line-height: 1.2;
    white-space: normal;
}

.player-privacy-actions .player-primary-button {
    grid-column: 1 / -1;
    min-height: 50px;
    font-size: 1rem;
}

.player-privacy-actions #player-export-data {
    grid-column: auto;
    min-height: 42px;
}

#player-privacy-status {
    color: rgba(50, 79, 69, 0.8);
}

#player-privacy-status[data-kind="error"] {
    color: #8f352d;
}

.settings-profile-card button.danger:hover {
    background: rgba(123, 63, 45, 0.26);
}

@media (max-width: 520px) {
    .player-privacy-actions {
        grid-template-columns: 1fr;
    }
}

.settings-measurement-stack {
    display: grid;
    gap: 10px;
}

.settings-measurement-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg-strong);
}

.settings-radio-group-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.settings-radio-group-compact-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-radio-card {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--surface-card-border);
    background: var(--surface-card-bg-strong);
    cursor: pointer;
    text-align: left;
}

.settings-radio-card-measurement {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.settings-radio-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.settings-radio-header .settings-radio-card-measurement {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-radio-card-compact {
    padding: 10px 10px;
    gap: 8px;
}

.settings-radio-copy {
    display: grid;
    gap: 2px;
    justify-self: start;
    text-align: left;
}

.settings-radio-card .settings-radio-title-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    justify-self: start;
    text-align: left;
}

.settings-radio-card input[type="radio"] {
    margin: 0;
    accent-color: rgba(50, 79, 69, 0.92);
    justify-self: start;
}

.settings-radio-card input[type="checkbox"] {
    margin: 0;
    accent-color: rgba(50, 79, 69, 0.92);
    justify-self: start;
}

.settings-radio-card span {
    display: grid;
    gap: 2px;
    justify-self: start;
    text-align: left;
}

.settings-radio-card small {
    color: rgba(43, 36, 24, 0.62);
    font-size: 0.78rem;
}

body[data-theme="dark"] .settings-radio-card small {
    color: rgba(237, 228, 210, 0.56);
}

body[data-theme="dark"] .settings-section-chevron {
    border-color: rgba(237, 228, 210, 0.7);
}

body[data-theme="dark"] .settings-profile-card {
    border-color: rgba(242, 212, 138, 0.18);
    background: rgba(242, 212, 138, 0.06);
}

body[data-theme="dark"] .settings-profile-helper {
    color: rgba(237, 228, 210, 0.58);
}

body[data-theme="dark"] .settings-subsection-heading strong {
    color: rgba(237, 228, 210, 0.82);
}

body[data-theme="dark"] .settings-subsection-heading small {
    color: rgba(237, 228, 210, 0.66);
}

body[data-theme="dark"] .player-profile-card {
    border-color: rgba(122, 190, 147, 0.2);
    background: rgba(122, 190, 147, 0.08);
}

body[data-theme="dark"] .player-profile-copy strong {
    color: rgba(255, 248, 235, 0.94);
}

body[data-theme="dark"] .player-profile-copy small {
    color: rgba(237, 228, 210, 0.58);
}

body[data-theme="dark"] .player-privacy-service-row strong,
body[data-theme="dark"] .player-privacy-services-heading {
    color: rgba(255, 248, 235, 0.88);
}

body[data-theme="dark"] .player-privacy-service-list,
body[data-theme="dark"] .player-privacy-service-row {
    border-color: rgba(242, 212, 138, 0.14);
}

body[data-theme="dark"] .player-privacy-service-row small {
    color: rgba(237, 228, 210, 0.58);
}

body[data-theme="dark"] #player-privacy-status {
    color: rgba(122, 190, 147, 0.86);
}

body[data-theme="dark"] #player-privacy-status[data-kind="error"] {
    color: #ffb4a8;
}

#account-dialog.account-card {
    --account-paper: #fff6e7;
    --account-paper-soft: #fffaf0;
    --account-paper-warm: #f7ecd4;
    --account-ink: #203f31;
    --account-text: #3e3528;
    --account-muted: rgba(69, 57, 43, 0.62);
    --account-border: rgba(186, 143, 58, 0.42);
    --account-border-soft: rgba(190, 152, 79, 0.24);
    --account-gold: #bd8f38;
    --account-gold-soft: #e0bd69;
    --account-primary: #123f2d;
    --account-primary-deep: #092c20;
    --account-primary-glow: rgba(17, 71, 49, 0.26);
    --account-danger: #9b302a;
    --account-danger-soft: #fff0e8;
    --account-row-shadow: rgba(93, 65, 28, 0.12);
    --account-icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.2L11 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
    --account-icon-broom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 3-7 7'/%3E%3Cpath d='m13 8 3 3'/%3E%3Cpath d='m11 10-5 5 3 3 5-5'/%3E%3Cpath d='M5 16c-1.4 1.4-2 3-2 5h6c2 0 3.6-.6 5-2'/%3E%3C/svg%3E");
    --account-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
    --account-icon-database: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
    --account-icon-log: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
    --account-icon-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='m19 6-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
    --account-icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
    --account-icon-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v6h6'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");
    --account-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    --account-icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4 10-10'/%3E%3C/svg%3E");
    top: 26px;
    width: min(560px, calc(100vw - 44px));
    max-height: min(1010px, calc(100vh - 52px));
    padding: 26px 26px 18px;
    overflow: hidden;
    border: 1px solid rgba(201, 163, 86, 0.72);
    border-radius: 32px;
    color: var(--account-text);
    background-color: var(--account-paper);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 38%),
        radial-gradient(ellipse at 72% 70%, rgba(224, 189, 105, 0.18), rgba(224, 189, 105, 0) 52%),
        linear-gradient(180deg, rgba(255, 253, 246, 0.94), rgba(251, 240, 213, 0.96));
    box-shadow:
        0 28px 64px rgba(40, 30, 16, 0.28),
        0 6px 18px rgba(107, 80, 34, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 2px rgba(255, 251, 239, 0.48);
}

body[data-theme="dark"] #account-dialog.account-card {
    --account-paper: #151d20;
    --account-paper-soft: #202a2d;
    --account-paper-warm: #29332f;
    --account-ink: #f6e8bd;
    --account-text: rgba(237, 228, 210, 0.88);
    --account-muted: rgba(237, 228, 210, 0.62);
    --account-border: rgba(224, 189, 105, 0.5);
    --account-border-soft: rgba(224, 189, 105, 0.2);
    --account-gold: #e2bf67;
    --account-gold-soft: #f0d894;
    --account-primary: #1d5c41;
    --account-primary-deep: #0b2f24;
    --account-primary-glow: rgba(73, 145, 106, 0.22);
    --account-danger: #ffb4a8;
    --account-danger-soft: rgba(134, 54, 45, 0.16);
    --account-row-shadow: rgba(0, 0, 0, 0.3);
    border-color: rgba(224, 189, 105, 0.36);
    background-color: var(--account-paper);
    background-image:
        radial-gradient(ellipse at 18% 0%, rgba(240, 216, 148, 0.1), rgba(240, 216, 148, 0) 38%),
        radial-gradient(ellipse at 76% 76%, rgba(80, 142, 108, 0.16), rgba(80, 142, 108, 0) 54%),
        linear-gradient(180deg, rgba(32, 42, 45, 0.98), rgba(16, 24, 27, 0.98));
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.58),
        0 8px 22px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 244, 207, 0.11),
        inset 0 0 0 2px rgba(224, 189, 105, 0.08);
}

#account-dialog.account-card::before,
#account-dialog.account-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

#account-dialog.account-card::before {
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 16%, rgba(122, 84, 30, 0.045) 0 1px, rgba(0, 0, 0, 0) 1.5px),
        radial-gradient(circle at 78% 34%, rgba(122, 84, 30, 0.035) 0 1px, rgba(0, 0, 0, 0) 1.5px);
    background-size: 18px 18px, 24px 24px;
    opacity: 0.58;
}

body[data-theme="dark"] #account-dialog.account-card::before {
    background-image:
        radial-gradient(circle at 18% 16%, rgba(240, 216, 148, 0.05) 0 1px, rgba(0, 0, 0, 0) 1.5px),
        radial-gradient(circle at 78% 34%, rgba(122, 190, 147, 0.04) 0 1px, rgba(0, 0, 0, 0) 1.5px);
    opacity: 0.72;
}

#account-dialog.account-card::after {
    inset: 3px;
    border: 1px solid rgba(255, 244, 207, 0.92);
    border-radius: 29px;
    box-shadow: inset 0 0 0 1px rgba(184, 139, 55, 0.2);
}

body[data-theme="dark"] #account-dialog.account-card::after {
    border-color: rgba(240, 216, 148, 0.22);
    box-shadow: inset 0 0 0 1px rgba(224, 189, 105, 0.08);
}

#account-dialog.account-card > * {
    position: relative;
    z-index: 1;
}

#account-dialog .account-modal-header {
    align-items: flex-start;
    margin: 0 6px 10px 12px;
}

#account-dialog .account-title-block {
    display: grid;
    gap: 9px;
}

#account-dialog #account-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.72rem, 6vw, 3.35rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    color: var(--account-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

body[data-theme="dark"] #account-dialog #account-title {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.62);
}

#account-dialog .account-title-ornament {
    position: relative;
    display: block;
    width: 120px;
    height: 10px;
    background: linear-gradient(90deg, rgba(189, 143, 56, 0.05), rgba(189, 143, 56, 0.76), rgba(189, 143, 56, 0.05)) center / 100% 1px no-repeat;
}

#account-dialog .account-title-ornament::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--account-gold-soft);
    box-shadow: 0 0 0 2px rgba(255, 248, 227, 0.86);
    transform: translate(-50%, -50%) rotate(45deg);
}

body[data-theme="dark"] #account-dialog .account-title-ornament::before {
    box-shadow: 0 0 0 2px rgba(20, 29, 31, 0.86);
}

#account-dialog .account-modal-body {
    align-content: start;
    gap: 12px;
    grid-auto-rows: max-content;
    margin-top: 10px;
    padding: 0 16px 0 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(189, 143, 56, 0.76) rgba(218, 181, 101, 0.12);
}

body[data-theme="dark"] #account-dialog .account-modal-body {
    scrollbar-color: rgba(224, 189, 105, 0.7) rgba(224, 189, 105, 0.1);
}

#account-dialog .account-modal-body::-webkit-scrollbar {
    width: 14px;
}

#account-dialog .account-modal-body::-webkit-scrollbar-track {
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(218, 181, 101, 0.18) 5px 9px, rgba(0, 0, 0, 0) 9px);
}

body[data-theme="dark"] #account-dialog .account-modal-body::-webkit-scrollbar-track {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 0 5px, rgba(224, 189, 105, 0.12) 5px 9px, rgba(0, 0, 0, 0) 9px);
}

#account-dialog .account-modal-body::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    border-radius: 999px;
    background: rgba(189, 143, 56, 0.76);
    background-clip: padding-box;
}

body[data-theme="dark"] #account-dialog .account-modal-body::-webkit-scrollbar-thumb {
    background: rgba(224, 189, 105, 0.64);
    background-clip: padding-box;
}

#account-dialog .settings-profile-card {
    border: 1px solid var(--account-border-soft);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.7), rgba(247, 236, 212, 0.46)),
        rgba(255, 247, 228, 0.58);
    box-shadow:
        0 10px 22px var(--account-row-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

body[data-theme="dark"] #account-dialog .settings-profile-card {
    background:
        linear-gradient(180deg, rgba(255, 244, 207, 0.06), rgba(255, 244, 207, 0.025)),
        rgba(8, 14, 16, 0.3);
    box-shadow:
        0 10px 22px var(--account-row-shadow),
        inset 0 1px 0 rgba(255, 244, 207, 0.08);
}

#account-dialog .player-profile-card,
#account-dialog .player-upgrade-pro-card,
#account-dialog .player-pro-subscription-card {
    padding: 13px 16px;
}

#account-dialog .player-profile-card {
    border-color: rgba(33, 76, 55, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.76), rgba(247, 236, 212, 0.42)),
        rgba(33, 76, 55, 0.045);
}

body[data-theme="dark"] #account-dialog .player-profile-card {
    border-color: rgba(122, 190, 147, 0.2);
    background:
        linear-gradient(180deg, rgba(122, 190, 147, 0.08), rgba(122, 190, 147, 0.035)),
        rgba(8, 14, 16, 0.28);
}

#account-dialog .player-profile-copy strong,
#account-dialog .player-privacy-service-row strong,
#account-dialog .player-privacy-services-heading,
#account-dialog .settings-subtle-toggle-copy strong {
    color: var(--account-ink);
}

#account-dialog .player-profile-copy strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
}

#account-dialog .player-profile-copy small,
#account-dialog .settings-profile-helper,
#account-dialog .player-privacy-service-row small,
#account-dialog .settings-subtle-toggle-copy small {
    color: var(--account-muted);
}

#account-dialog .player-privacy-card {
    gap: 0;
    padding: 0;
    overflow: visible;
    border-color: var(--account-border-soft);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.82), rgba(250, 239, 216, 0.58)),
        rgba(255, 248, 232, 0.66);
}

body[data-theme="dark"] #account-dialog .player-privacy-card {
    background:
        linear-gradient(180deg, rgba(255, 244, 207, 0.055), rgba(255, 244, 207, 0.025)),
        rgba(8, 14, 16, 0.32);
}

#account-dialog .settings-subtle-toggle input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border: 1px solid rgba(33, 76, 55, 0.4);
    border-radius: 5px;
    background: rgba(255, 253, 246, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 4px 10px rgba(88, 61, 23, 0.08);
}

body[data-theme="dark"] #account-dialog .settings-subtle-toggle input[type="checkbox"] {
    border-color: rgba(224, 189, 105, 0.34);
    background: rgba(10, 17, 20, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 207, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.22);
}

#account-dialog .settings-subtle-toggle input[type="checkbox"]:checked {
    border-color: rgba(12, 52, 36, 0.84);
    background-color: var(--account-primary);
    background-image:
        var(--account-icon-check-white),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.08));
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px, auto;
    box-shadow:
        0 8px 14px rgba(16, 61, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

#account-dialog .settings-subtle-toggle input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(189, 143, 56, 0.28);
    outline-offset: 3px;
}

body[data-theme="dark"] #account-dialog .settings-subtle-toggle input[type="checkbox"]:focus-visible {
    outline-color: rgba(224, 189, 105, 0.34);
}

#account-dialog .player-privacy-toggle-list {
    order: 5;
    gap: 8px;
    padding: 15px 26px;
    border-top: 1px solid var(--account-border-soft);
    background: rgba(255, 250, 239, 0.38);
}

body[data-theme="dark"] #account-dialog .player-privacy-toggle-list {
    background: rgba(255, 244, 207, 0.035);
}

#account-dialog .player-privacy-toggle-list .player-privacy-toggle {
    padding: 6px 2px;
}

#account-dialog .player-privacy-services {
    order: 6;
    gap: 10px;
    padding: 0 26px 18px;
}

#account-dialog .player-privacy-services:empty {
    display: none;
}

#account-dialog .player-privacy-service-list,
#account-dialog .player-privacy-service-row {
    border-color: rgba(186, 143, 58, 0.2);
}

body[data-theme="dark"] #account-dialog .player-privacy-service-list,
body[data-theme="dark"] #account-dialog .player-privacy-service-row {
    border-color: rgba(224, 189, 105, 0.16);
}

#account-dialog .player-privacy-actions {
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 24px 20px;
}

#account-dialog .player-privacy-actions button,
#account-dialog #player-account-logout,
#account-dialog #reset-profile-button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: visible;
    border-radius: 8px;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0;
    white-space: normal;
}

#account-dialog .player-privacy-actions button::before,
#account-dialog #player-account-logout::before,
#account-dialog #reset-profile-button::before,
#account-dialog #player-account-logout::after,
#account-dialog #reset-profile-button::after {
    content: "";
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#account-dialog .player-privacy-actions button::before,
#account-dialog #player-account-logout::before,
#account-dialog #reset-profile-button::before {
    width: 22px;
    height: 22px;
}

#account-dialog .player-privacy-actions .player-primary-button {
    min-height: 68px;
    color: #f8dc83;
    border: 1px solid rgba(224, 189, 105, 0.92);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, #174c35, var(--account-primary-deep));
    box-shadow:
        0 0 0 2px rgba(121, 72, 21, 0.24),
        0 12px 22px var(--account-primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -16px 30px rgba(0, 0, 0, 0.18);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38);
}

#account-dialog .player-privacy-actions #player-export-data {
    min-height: 64px;
}

#account-dialog .player-privacy-actions .player-primary-button::before {
    width: 26px;
    height: 26px;
    -webkit-mask-image: var(--account-icon-download);
    mask-image: var(--account-icon-download);
}

#account-dialog .player-privacy-actions .secondary-button {
    min-height: 64px;
    padding: 8px 14px;
    color: rgba(69, 48, 18, 0.86);
    border: 1px solid rgba(190, 152, 79, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.8), rgba(247, 236, 212, 0.54)),
        rgba(255, 247, 229, 0.74);
    box-shadow:
        0 8px 18px rgba(96, 69, 26, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    font-size: 1rem;
}

body[data-theme="dark"] #account-dialog .player-privacy-actions .secondary-button {
    color: rgba(237, 228, 210, 0.88);
    border-color: rgba(224, 189, 105, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 244, 207, 0.07), rgba(255, 244, 207, 0.025)),
        rgba(8, 14, 16, 0.34);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 244, 207, 0.08);
}

#account-dialog #player-clear-local-data::before {
    -webkit-mask-image: var(--account-icon-database);
    mask-image: var(--account-icon-database);
}

#account-dialog #player-clear-logs::before {
    -webkit-mask-image: var(--account-icon-log);
    mask-image: var(--account-icon-log);
}

#account-dialog #player-delete-account {
    grid-column: 1 / -1;
    min-height: 56px;
    color: var(--account-danger);
    border: 1px solid rgba(155, 48, 42, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 248, 242, 0.82), rgba(255, 231, 219, 0.64)),
        var(--account-danger-soft);
    box-shadow:
        0 8px 18px rgba(155, 48, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 1rem;
}

body[data-theme="dark"] #account-dialog #player-delete-account {
    border-color: rgba(255, 180, 168, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 180, 168, 0.08), rgba(255, 180, 168, 0.035)),
        var(--account-danger-soft);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 244, 207, 0.08);
}

#account-dialog #player-delete-account::before {
    -webkit-mask-image: var(--account-icon-trash);
    mask-image: var(--account-icon-trash);
}

#account-dialog #player-delete-account:hover:not(:disabled),
#account-dialog #player-delete-account:focus-visible:not(:disabled) {
    color: #fffaf2;
    border-color: #c9473b;
    background: #c9473b;
    box-shadow: 0 10px 22px rgba(164, 45, 35, 0.22);
}

body[data-theme="dark"] #account-dialog #player-delete-account:hover:not(:disabled),
body[data-theme="dark"] #account-dialog #player-delete-account:focus-visible:not(:disabled) {
    color: #fffaf2;
    border-color: #dc5b4d;
    background: #dc5b4d;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

#account-dialog #player-privacy-status {
    order: 4;
    margin: 0 24px 16px;
    color: rgba(32, 63, 49, 0.82);
}

body[data-theme="dark"] #account-dialog #player-privacy-status {
    color: rgba(122, 190, 147, 0.86);
}

#account-dialog .player-account-logout-card,
#account-dialog .settings-profile-reset-card {
    gap: 8px;
    padding: 0 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#account-dialog .player-account-logout-card {
    padding-top: 22px;
    border-top: 1px solid var(--account-border-soft);
}

#account-dialog .settings-profile-reset-card {
    padding-bottom: 4px;
}

#account-dialog #player-account-logout,
#account-dialog #reset-profile-button {
    min-height: 54px;
    width: 100%;
    padding: 0 18px 0 22px;
    justify-content: flex-start;
    color: rgba(70, 52, 27, 0.9);
    border: 1px solid rgba(190, 152, 79, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 253, 246, 0.82), rgba(248, 238, 216, 0.62)),
        rgba(255, 249, 235, 0.7);
    box-shadow:
        0 8px 18px rgba(96, 69, 26, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.74);
    font-size: 1.04rem;
    text-align: left;
}

body[data-theme="dark"] #account-dialog #player-account-logout,
body[data-theme="dark"] #account-dialog #reset-profile-button {
    color: rgba(237, 228, 210, 0.9);
    border-color: rgba(224, 189, 105, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 244, 207, 0.07), rgba(255, 244, 207, 0.025)),
        rgba(8, 14, 16, 0.34);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 244, 207, 0.08);
}

#account-dialog #player-account-logout::before {
    color: var(--account-gold);
    -webkit-mask-image: var(--account-icon-logout);
    mask-image: var(--account-icon-logout);
}

#account-dialog #reset-profile-button::before {
    color: var(--account-gold);
    -webkit-mask-image: var(--account-icon-reset);
    mask-image: var(--account-icon-reset);
}

#account-dialog #player-account-logout::after,
#account-dialog #reset-profile-button::after {
    width: 17px;
    height: 17px;
    margin-left: auto;
    color: rgba(111, 78, 28, 0.72);
    -webkit-mask-image: var(--account-icon-chevron);
    mask-image: var(--account-icon-chevron);
}

#account-dialog .player-privacy-actions button::before,
#account-dialog #player-account-logout::before,
#account-dialog #reset-profile-button::before,
#account-dialog #player-account-logout::after,
#account-dialog #reset-profile-button::after {
    content: none;
    display: none;
}

#account-dialog .account-action-icon,
#account-dialog .account-action-chevron {
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#account-dialog .account-action-icon {
    width: 22px;
    height: 22px;
}

#account-dialog .account-action-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

#account-dialog .player-privacy-actions .player-primary-button .account-action-icon {
    width: 26px;
    height: 26px;
    -webkit-mask-image: var(--account-icon-download);
    mask-image: var(--account-icon-download);
}

#account-dialog #player-clear-local-data .account-action-icon {
    -webkit-mask-image: var(--account-icon-database);
    mask-image: var(--account-icon-database);
}

#account-dialog #player-clear-logs .account-action-icon {
    -webkit-mask-image: var(--account-icon-log);
    mask-image: var(--account-icon-log);
}

#account-dialog #player-delete-account .account-action-icon {
    -webkit-mask-image: var(--account-icon-trash);
    mask-image: var(--account-icon-trash);
}

#account-dialog #player-account-logout .account-action-icon {
    color: var(--account-gold);
    -webkit-mask-image: var(--account-icon-logout);
    mask-image: var(--account-icon-logout);
}

#account-dialog #reset-profile-button .account-action-icon {
    color: var(--account-gold);
    -webkit-mask-image: var(--account-icon-reset);
    mask-image: var(--account-icon-reset);
}

#account-dialog .account-action-chevron {
    width: 17px;
    height: 17px;
    margin-left: auto;
    color: rgba(111, 78, 28, 0.72);
    -webkit-mask-image: var(--account-icon-chevron);
    mask-image: var(--account-icon-chevron);
}

body[data-theme="dark"] #account-dialog .account-action-chevron {
    color: rgba(224, 189, 105, 0.72);
}

#account-dialog .account-button-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 40;
    width: max-content;
    max-width: min(250px, calc(100vw - 48px));
    padding: 8px 10px;
    border: 1px solid rgba(82, 58, 26, 0.22);
    border-radius: 8px;
    background: rgba(38, 31, 22, 0.94);
    color: #fff6df;
    box-shadow: 0 10px 24px rgba(41, 31, 18, 0.28);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -4px);
    transition: opacity 140ms ease, transform 140ms ease;
}

#account-dialog .account-button-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-right: 1px solid rgba(82, 58, 26, 0.22);
    border-bottom: 1px solid rgba(82, 58, 26, 0.22);
    background: rgba(38, 31, 22, 0.94);
    transform: translateX(-50%) rotate(45deg);
}

#account-dialog .account-tooltip-button:hover .account-button-tooltip,
#account-dialog .account-tooltip-button:focus-visible .account-button-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

#account-dialog .settings-profile-reset-card .settings-profile-helper {
    padding: 3px 30px 0;
    font-size: 0.82rem;
}

#account-dialog .player-consent-card {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

#account-dialog .player-consent-card .player-privacy-toggle-list {
    order: 0;
    border-top: 0;
}

#account-dialog .player-consent-card .player-privacy-services {
    order: 0;
    padding-top: 15px;
}

#account-dialog .settings-profile-card button[disabled] {
    opacity: 0.52;
}

#account-dialog .player-privacy-actions button:hover:not(:disabled),
#account-dialog .player-privacy-actions button:focus-visible:not(:disabled),
#account-dialog #player-account-logout:hover:not(:disabled),
#account-dialog #player-account-logout:focus-visible:not(:disabled),
#account-dialog #reset-profile-button:hover:not(:disabled),
#account-dialog #reset-profile-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

#account-dialog .player-privacy-actions .player-primary-button:hover:not(:disabled),
#account-dialog .player-privacy-actions .player-primary-button:focus-visible:not(:disabled) {
    box-shadow:
        0 0 0 2px rgba(121, 72, 21, 0.3),
        0 16px 28px var(--account-primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -16px 30px rgba(0, 0, 0, 0.16);
}

@media (max-width: 640px) {
    #account-dialog.account-card {
        top: 14px;
        width: min(calc(100vw - 20px), 560px);
        max-height: min(940px, calc(100dvh - 28px));
        padding: 20px 14px 14px;
        border-radius: 24px;
    }

    #account-dialog.account-card::after {
        border-radius: 21px;
    }

    #account-dialog .account-modal-header {
        margin-right: 4px;
        margin-left: 8px;
    }

    #account-dialog #account-title {
        font-size: 2.45rem;
    }

    #account-dialog .account-modal-body {
        padding-right: 8px;
    }

    #account-dialog .player-privacy-toggle-list,
    #account-dialog .player-privacy-services {
        padding-right: 16px;
        padding-left: 16px;
    }

    #account-dialog .player-privacy-actions,
    #account-dialog .player-account-logout-card,
    #account-dialog .settings-profile-reset-card {
        padding-right: 14px;
        padding-left: 14px;
    }
}

@media (max-width: 460px) {
    #account-dialog .player-privacy-actions {
        grid-template-columns: 1fr;
    }

    #account-dialog #player-delete-account,
    #account-dialog .player-privacy-actions .player-primary-button {
        grid-column: auto;
    }

    #account-dialog .settings-profile-reset-card .settings-profile-helper {
        padding-right: 8px;
        padding-left: 8px;
    }
}

.settings-measurement-card.active .settings-radio-card-measurement {
    border-color: transparent;
    box-shadow: none;
}

.settings-granularity-block {
    display: grid;
    gap: 10px;
    padding: 0 0 0 26px;
}

.settings-custom-name-field {
    display: grid;
    gap: 6px;
    color: rgba(43, 36, 24, 0.78);
    font-size: 0.84rem;
}

.settings-custom-name-field input,
.settings-custom-name-field select {
    width: 100%;
}

.settings-volume-field {
    padding: 2px 2px 0 25px;
}

.settings-volume-field input[type="range"] {
    accent-color: rgba(50, 79, 69, 0.92);
}

body[data-theme="dark"] .settings-custom-name-field {
    color: rgba(237, 228, 210, 0.76);
}

.settings-radio-card-pill {
    min-height: 0;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
}

.settings-radio-card-pill span {
    gap: 0;
}

.settings-radio-card-pill strong {
    font-size: 0.92rem;
    line-height: 1.1;
}

.settings-radio-card-pill small {
    display: none;
}

.settings-subtle-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 2px 2px 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
}

.settings-subtle-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 2px 0 0;
    accent-color: rgba(50, 79, 69, 0.92);
}

.settings-subtle-toggle-copy {
    display: grid;
    gap: 2px;
}

.settings-subtle-toggle-copy strong {
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(43, 36, 24, 0.82);
}

.settings-subtle-toggle-copy small {
    font-size: 0.74rem;
    line-height: 1.35;
    color: rgba(43, 36, 24, 0.58);
}

.settings-subtle-toggle:hover .settings-subtle-toggle-copy strong,
.settings-subtle-toggle:focus-within .settings-subtle-toggle-copy strong {
    color: rgba(50, 79, 69, 0.92);
}

body[data-theme="dark"] .settings-subtle-toggle-copy strong {
    color: rgba(237, 228, 210, 0.82);
}

body[data-theme="dark"] .settings-subtle-toggle-copy small {
    color: rgba(237, 228, 210, 0.54);
}

body[data-theme="dark"] .settings-subtle-toggle:hover .settings-subtle-toggle-copy strong,
body[data-theme="dark"] .settings-subtle-toggle:focus-within .settings-subtle-toggle-copy strong {
    color: rgba(122, 190, 147, 0.92);
}


.player-progression-card {
    gap: 12px;
}

.player-progression-summary {
    display: grid;
    grid-template-columns: minmax(208px, 0.92fr) minmax(184px, 1fr);
    align-items: center;
    gap: 16px;
}

.player-progression-medallion {
    position: relative;
    width: min(100%, 242px);
    aspect-ratio: 1;
    justify-self: center;
    isolation: isolate;
    container-type: inline-size;
}

.player-progression-medallion::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 12%;
    border-radius: 50%;
    background: rgba(31, 71, 116, 0.2);
    box-shadow: 0 12px 30px rgba(6, 18, 34, 0.22), 0 0 28px rgba(205, 156, 55, 0.12);
}

.player-progression-medallion-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 8px 12px rgba(6, 18, 34, 0.28));
}

.player-progression-medallion-copy {
    position: absolute;
    inset: 22% 24% 19%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 0;
    color: #e6b957;
    font-family: Georgia, "Times New Roman", serif;
    text-align: center;
    text-shadow:
        0 1px 0 #fff1a5,
        0 2px 1px rgba(74, 37, 3, 0.92),
        0 0 8px rgba(231, 183, 76, 0.2);
}

.player-progression-level,
.player-progression-level-label,
.player-progression-rank {
    max-width: 100%;
    color: #e6b957;
    background: linear-gradient(180deg, #fff2a8 0%, #e9bd5f 38%, #a86712 72%, #f2cc70 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.player-progression-level {
    display: block;
    font-size: clamp(3.15rem, 27cqw, 4.1rem);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: -0.065em;
    transform: translateX(-0.035em);
    -webkit-text-stroke: 0.35px rgba(255, 229, 143, 0.82);
}

.player-progression-level-label {
    display: block;
    margin-top: 9%;
    font-size: clamp(0.62rem, 5.1cqw, 0.8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    white-space: nowrap;
}

.player-progression-medallion-divider {
    position: relative;
    display: block;
    width: 100%;
    height: 10px;
    margin: 6% 0 3%;
    background: linear-gradient(90deg, rgba(192, 133, 30, 0), #d8a945 18% 43%, rgba(192, 133, 30, 0) 43% 57%, #d8a945 57% 82%, rgba(192, 133, 30, 0)) center / 100% 1px no-repeat;
}

.player-progression-medallion-divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid #f1c966;
    background: #b87a18;
    box-shadow: 0 0 5px rgba(238, 196, 94, 0.45);
    transform: translate(-50%, -50%) rotate(45deg);
}

.player-progression-rank {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(0.78rem, 6.3cqw, 1.04rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    -webkit-text-stroke: 0.2px rgba(255, 224, 128, 0.72);
}

.player-progression-details,
.player-progression-history-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.player-progression-title {
    color: var(--maphora-navy, #142a44);
    font-family: var(--maphora-title-font, Georgia, "Times New Roman", serif);
    font-size: 1.12rem;
}

.player-progression-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.player-progression-history-item small,
.player-progression-next {
    color: rgba(20, 42, 68, 0.62);
    font-size: 0.76rem;
    line-height: 1.35;
}

.player-progression-history-points {
    flex: 0 0 auto;
    color: #8c6723;
    font-size: 0.88rem;
}

.player-progression-points {
    color: #9c6b17;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.player-progression-bar {
    position: relative;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(20, 42, 68, 0.12);
    border-radius: 999px;
    background: rgba(20, 42, 68, 0.08);
    box-shadow: inset 0 1px 2px rgba(6, 18, 34, 0.1);
}

.player-progression-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9d6718, #dfbd68 72%, #fff0a1);
    box-shadow: 0 0 10px rgba(213, 168, 67, 0.34);
    transition: width 320ms ease;
}

.player-progression-history {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(20, 42, 68, 0.1);
}

.player-progression-history-toggle {
    width: 100%;
}

.player-progression-history-content {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.player-progression-history-list {
    display: grid;
    gap: 6px;
}

.player-progression-history-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(20, 42, 68, 0.08);
}

.player-progression-history-item:last-child {
    border-bottom: 0;
}

.player-progression-history-copy strong,
.player-progression-history-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-progression-history-content.hidden,
.player-progression-history-more.hidden,
.player-progression-card.hidden {
    display: none;
}

body[data-theme="dark"] .player-progression-title {
    color: var(--maphora-ivory, #f7f4ee);
}

body[data-theme="dark"] .player-progression-history-item small,
body[data-theme="dark"] .player-progression-next {
    color: rgba(247, 244, 238, 0.62);
}

body[data-theme="dark"] .player-progression-points {
    color: #e2bd68;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

body[data-theme="dark"] .player-progression-bar {
    border-color: rgba(247, 244, 238, 0.12);
    background: rgba(247, 244, 238, 0.08);
}

body[data-theme="dark"] .player-progression-history {
    border-top-color: rgba(247, 244, 238, 0.1);
}

body[data-theme="dark"] .player-progression-history-item {
    border-bottom-color: rgba(247, 244, 238, 0.08);
}

@media (max-width: 520px) {
    .player-progression-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .player-progression-medallion {
        width: min(100%, 252px);
    }

    .player-progression-details {
        width: 100%;
    }
}

@media (forced-colors: active) {
    .player-progression-level,
    .player-progression-level-label,
    .player-progression-rank {
        color: CanvasText;
        background: none;
        -webkit-text-fill-color: CanvasText;
        -webkit-text-stroke: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-progression-bar-fill {
        transition: none;
    }
}


.maphora-feedback-modal {
    z-index: 1280;
}

.maphora-feedback-modal .modal-backdrop {
    background:
        radial-gradient(circle at 50% 36%, rgba(212, 160, 23, 0.12), transparent 31%),
        rgba(3, 11, 21, 0.46);
    backdrop-filter: blur(5px) saturate(0.86);
}

.modal-card.maphora-feedback-dialog {
    width: min(520px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    overflow: hidden;
    padding: 20px;
    border: 1px solid rgba(239, 198, 111, 0.72);
    color: var(--maphora-ivory, #f7f4ee);
    background:
        radial-gradient(circle at 16% -8%, rgba(70, 111, 153, 0.34), transparent 43%),
        linear-gradient(165deg, #142a44, #0c1b2e 74%);
    box-shadow:
        0 30px 74px rgba(2, 10, 20, 0.48),
        0 0 0 1px rgba(212, 160, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    scrollbar-color: rgba(239, 198, 111, 0.5) rgba(247, 244, 238, 0.06);
}

.maphora-feedback-dialog h2 {
    margin: 3px 0 0;
    color: var(--maphora-ivory, #f7f4ee);
    font-family: var(--maphora-title-font, Cambria, Georgia, "Times New Roman", serif);
    font-size: clamp(1.5rem, 4vw, 1.95rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.maphora-feedback-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.maphora-feedback-dialog .maphora-feedback-close {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(247, 244, 238, 0.84);
    border-color: rgba(247, 244, 238, 0.15);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.maphora-feedback-close svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

#maphora-feedback-close:hover:not(:disabled) {
    color: #f4cf70;
    border-color: rgba(239, 198, 111, 0.56);
    background: rgba(212, 160, 23, 0.14);
    box-shadow:
        0 8px 18px rgba(2, 10, 20, 0.26),
        0 0 0 3px rgba(212, 160, 23, 0.1);
    transform: translateY(-1px);
}

.maphora-feedback-dialog .maphora-feedback-drag-handle {
    border-color: rgba(247, 244, 238, 0.15);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.maphora-feedback-dialog .maphora-feedback-drag-handle::before {
    background:
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 10px / 12px 1.5px no-repeat;
}

.maphora-feedback-dialog .maphora-feedback-drag-handle:hover {
    border-color: rgba(239, 198, 111, 0.52);
    background: rgba(212, 160, 23, 0.13);
    box-shadow:
        0 8px 18px rgba(2, 10, 20, 0.24),
        0 0 0 3px rgba(212, 160, 23, 0.09);
    transform: translateY(-1px);
}

.maphora-feedback-eyebrow {
    color: #f4cf70;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.maphora-feedback-form {
    display: grid;
    gap: 15px;
    overflow-y: auto;
    padding: 6px;
    margin: -6px;
}

.maphora-feedback-intro {
    margin: 0;
    color: rgba(247, 244, 238, 0.68);
    line-height: 1.45;
}

.maphora-feedback-field {
    display: grid;
    gap: 7px;
    color: rgba(247, 244, 238, 0.94);
    font-size: 0.82rem;
    font-weight: 800;
}

.maphora-feedback-field > span small,
.maphora-feedback-helper {
    color: rgba(247, 244, 238, 0.58);
    font-weight: 600;
}

.maphora-feedback-field input,
.maphora-feedback-field textarea {
    width: 100%;
    border: 1px solid rgba(239, 198, 111, 0.3);
    border-radius: 12px;
    background: rgba(255, 253, 248, 0.96);
    color: var(--maphora-navy, #0c1b2e);
    font: inherit;
    font-weight: 600;
    outline: none;
    box-shadow:
        inset 0 1px 2px rgba(12, 27, 46, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.025);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.maphora-feedback-field input {
    min-height: 44px;
    padding: 10px 12px;
}

.maphora-feedback-field textarea {
    min-height: 132px;
    padding: 12px;
    line-height: 1.45;
    resize: vertical;
}

.maphora-feedback-dialog .maphora-feedback-field input:hover:not(:disabled),
.maphora-feedback-dialog .maphora-feedback-field textarea:hover:not(:disabled) {
    border-color: rgba(239, 198, 111, 0.62);
    background: #fffdf8;
}

.maphora-feedback-field input:focus,
.maphora-feedback-field textarea:focus {
    border-color: #f4cf70;
    background: #fffdf8;
    box-shadow:
        0 0 0 3px rgba(212, 160, 23, 0.22),
        0 8px 20px rgba(2, 10, 20, 0.16);
}

#maphora-feedback-dialog :is(button, input, textarea, [tabindex]):focus-visible {
    outline: 2px solid #f4cf70 !important;
    outline-offset: 2px !important;
}

.maphora-feedback-field [aria-invalid="true"] {
    border-color: var(--wine);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wine) 18%, transparent);
}

.maphora-feedback-honeypot {
    position: fixed;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.maphora-feedback-status {
    min-height: 20px;
    margin: 0;
    color: rgba(247, 244, 238, 0.7);
    font-size: 0.82rem;
    font-weight: 700;
}

.maphora-feedback-status[data-tone="error"] {
    color: #ffb4a7;
}

.maphora-feedback-status[data-tone="success"] {
    color: #9fdec9;
}

.maphora-feedback-actions {
    display: flex;
    justify-content: flex-end;
}

.maphora-feedback-submit {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid rgba(255, 220, 126, 0.82);
    border-radius: 12px;
    background: linear-gradient(145deg, #f0c657, var(--maphora-gold, #d4a017) 56%, var(--maphora-gold-deep, #a9780e));
    color: var(--maphora-navy, #0c1b2e);
    font-weight: 900;
    cursor: pointer;
    box-shadow:
        0 10px 24px rgba(2, 10, 20, 0.3),
        inset 0 1px 0 rgba(255, 246, 204, 0.62);
    transition: filter 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

#maphora-feedback-submit:hover:not(:disabled),
#maphora-feedback-submit:focus-visible:not(:disabled) {
    border-color: #ffe29a;
    background: linear-gradient(145deg, #f5d477, #dcae2c 58%, #b78312);
    box-shadow:
        0 13px 28px rgba(2, 10, 20, 0.36),
        0 0 0 3px rgba(212, 160, 23, 0.13),
        inset 0 1px 0 rgba(255, 250, 220, 0.74);
    filter: none;
    transform: translateY(-2px);
}

.maphora-feedback-submit:disabled {
    cursor: wait;
    opacity: 0.66;
}

.maphora-feedback-form::-webkit-scrollbar {
    width: 10px;
}

.maphora-feedback-form::-webkit-scrollbar-track {
    background: rgba(247, 244, 238, 0.055);
}

.maphora-feedback-form::-webkit-scrollbar-thumb {
    border: 2px solid rgba(12, 27, 46, 0.82);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(239, 198, 111, 0.66), rgba(169, 120, 14, 0.62));
}

body[data-theme="dark"] .maphora-feedback-dialog .maphora-feedback-field input,
body[data-theme="dark"] .maphora-feedback-dialog .maphora-feedback-field textarea {
    color: var(--maphora-navy, #0c1b2e);
    background: rgba(255, 253, 248, 0.96);
    border-color: rgba(239, 198, 111, 0.3);
}

@media (max-width: 560px) {
    .maphora-feedback-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .maphora-feedback-actions,
    .maphora-feedback-submit {
        width: 100%;
    }
}


#preset-player-modal[data-preset-player-surface="multi-document"] {
    position: fixed;
    inset: 0;
    z-index: 800;
    overflow: visible;
    background: transparent !important;
    pointer-events: none;
    isolation: isolate;
}

#preset-player-modal[data-preset-player-surface="multi-document"] .modal-backdrop,
#preset-player-modal[data-preset-player-surface="multi-document"] .preset-player-header,
#preset-player-modal[data-preset-player-surface="multi-document"] #preset-player-status,
#preset-player-modal[data-preset-player-surface="multi-document"] #preset-player-frame {
    display: none !important;
}

#preset-player-modal[data-preset-player-surface="multi-document"] #preset-player-dialog {
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    pointer-events: none;
    contain: none;
}

#preset-player-modal[data-preset-player-surface="multi-document"] .preset-player-body {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.riddle-document-workspace {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.riddle-document-workspace[data-document-transition] .riddle-document-window {
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    pointer-events: none;
}

.riddle-document-workspace[data-document-transition="preparing"] .riddle-document-window {
    opacity: 0;
}

.riddle-document-window {
    position: absolute;
    left: calc(var(--document-x) * 100%);
    top: calc(var(--document-y) * 100%);
    width: max(var(--document-preferred-width, 240px), calc(var(--document-width) * 100%));
    height: max(var(--document-preferred-height, 180px), calc(var(--document-height) * 100%));
    min-width: var(--document-min-width, 180px);
    min-height: var(--document-min-height, 140px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(18, 22, 30, 0.96);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.38);
    pointer-events: auto;
}

.riddle-document-window[data-document-surface="integrated"] {
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.riddle-document-window-header {
    min-height: 34px;
    padding: 8px 12px;
    color: #f5f7fb;
    background: rgba(255, 255, 255, 0.08);
    cursor: grab;
    font-size: 0.82rem;
    font-weight: 650;
    touch-action: none;
    user-select: none;
}

.riddle-document-window-header:active {
    cursor: grabbing;
}

.riddle-document-window[data-document-surface="integrated"] .riddle-document-window-header,
.riddle-document-window[data-document-surface="integrated"] .riddle-document-window-resize-handle {
    display: none;
}

.riddle-document-window-content {
    height: calc(100% - 34px);
    overflow: auto;
    pointer-events: auto;
}

.riddle-document-window[data-document-surface="integrated"] .riddle-document-window-content {
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.riddle-document-window-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 22px;
    height: 22px;
    cursor: nwse-resize;
    touch-action: none;
}

.riddle-document-window-resize-handle::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.58);
    border-bottom: 2px solid rgba(255, 255, 255, 0.58);
}

.riddle-document-window[data-document-surface="panel"][data-dock="left"] {
    left: 18px;
    top: 72px;
    height: calc(100% - 90px);
}

.riddle-document-window[data-document-surface="panel"][data-dock="right"] {
    right: 18px;
    left: auto;
    top: 72px;
    height: calc(100% - 90px);
}

.riddle-document-window[data-document-surface="panel"][data-dock="bottom"] {
    right: 18px;
    bottom: 18px;
    left: 18px;
    top: auto;
    width: auto;
}

/* A laid-out, isolated initial scene for immutable dock thumbnails. Never use
   display:none here: canvas and DOM runtimes need real dimensions at mount. */
.riddle-document-preview-studio {
    position: fixed;
    left: -20000px;
    top: 0;
    width: 1280px;
    height: 720px;
    pointer-events: none;
    overflow: hidden;
}

.riddle-document-preview-studio .riddle-document-window {
    opacity: 1 !important;
}

/* The active challenge owns only this dock projection. Document runtimes stay
   mounted in the scene layer above and keep their existing interactions. */
.active-riddle-document-dock {
    display: none;
}

@media (min-width: 721px) {
    .active-riddle-document-dock {
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 13px 16px 16px;
        overflow: hidden;
        border: 0;
        border-top: 1px solid rgba(225, 183, 92, 0.23);
        border-radius: 0 0 var(--active-riddle-bar-radius, 18px) var(--active-riddle-bar-radius, 18px);
        background: rgba(3, 13, 23, 0.3);
        box-shadow: inset 0 1px 0 rgba(255, 244, 200, 0.025);
        isolation: isolate;
    }

    .active-riddle-document-dock-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 0.68rem;
        line-height: 1.4;
    }

    .active-riddle-document-dock-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #f2ca72;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .active-riddle-document-dock-label svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
    }

    .active-riddle-document-dock-count {
        flex: 0 0 auto;
        color: rgba(255, 250, 241, 0.88);
        font-variant-numeric: tabular-nums;
    }

    .active-riddle-document-dock-track {
        display: flex;
        align-items: stretch;
        gap: 8px;
        padding: 3px 2px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(225, 183, 92, 0.42) transparent;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }

    .active-riddle-document-dock.has-overflow .active-riddle-document-dock-track {
        padding-inline: 28px;
        scrollbar-width: none;
    }

    .active-riddle-document-dock.has-overflow .active-riddle-document-dock-track::-webkit-scrollbar {
        display: none;
    }

    .active-riddle-document-dock-scroll {
        position: absolute;
        top: calc(50% + 15px);
        z-index: 3;
        width: 32px;
        height: 46px;
        padding: 0;
        border: 1px solid rgba(225, 183, 92, 0.6);
        border-radius: 16px;
        color: #f2ca72;
        background: rgba(7, 19, 32, 0.96);
        box-shadow: 0 8px 18px rgba(2, 8, 14, 0.4);
        transform: translateY(-50%);
        cursor: pointer;
    }

    .active-riddle-document-dock-scroll:is(:hover, :focus-visible, :active, :disabled) {
        border-color: rgba(225, 183, 92, 0.6);
        color: #f2ca72;
        background: rgba(7, 19, 32, 0.96);
        box-shadow: 0 8px 18px rgba(2, 8, 14, 0.4);
        transform: translateY(-50%);
        opacity: 1;
    }

    .active-riddle-document-dock-scroll[hidden] {
        display: none;
    }

    .active-riddle-document-dock-scroll:disabled {
        cursor: default;
    }

    .active-riddle-document-dock-scroll-previous {
        left: 8px;
    }

    .active-riddle-document-dock-scroll-next {
        right: 8px;
    }

    .active-riddle-document-dock-scroll span {
        display: block;
        width: 10px;
        height: 10px;
        margin: auto;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
    }

    .active-riddle-document-dock-scroll-previous span {
        transform: rotate(-135deg) translate(-1px, 1px);
    }

    .active-riddle-document-dock-scroll-next span {
        transform: rotate(45deg) translate(-1px, 1px);
    }

    .active-riddle-document-dock-item {
        width: 66px;
        min-width: 66px;
        color: rgba(255, 250, 241, 0.92);
        transition: opacity 180ms ease, transform 220ms ease;
    }

    .active-riddle-document-dock-item-button {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        display: grid;
        grid-template-rows: 66px;
        gap: 0;
        color: inherit;
        font: inherit;
        background: transparent;
        cursor: grab;
        touch-action: pan-x;
        user-select: none;
        -webkit-user-drag: none;
    }

    .active-riddle-document-dock-item-button:active,
    .active-riddle-document-dock-item.is-dragging .active-riddle-document-dock-item-button {
        cursor: grabbing;
    }

    .active-riddle-document-dock-item-button:focus-visible {
        outline: none;
    }

    .active-riddle-document-dock-item-button:focus-visible .active-riddle-document-dock-preview {
        outline: 2px solid #f2ca72;
        outline-offset: 2px;
    }

    .active-riddle-document-dock-preview {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        border: 1px solid rgba(225, 183, 92, 0.58);
        border-radius: 9px;
        background:
            radial-gradient(circle at 30% 15%, rgba(225, 183, 92, 0.13), transparent 48%),
            rgba(6, 16, 28, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 245, 214, 0.18), 0 3px 7px rgba(0, 0, 0, 0.24);
    }

    .active-riddle-document-dock-item-button:hover .active-riddle-document-dock-preview {
        border-color: #f2ca72;
        background-color: rgba(225, 183, 92, 0.12);
    }

    .active-riddle-document-dock-icon {
        position: relative;
        width: 34px;
        height: 34px;
        color: #f2ca72;
        opacity: 1;
        transition: opacity 120ms ease;
    }

    .active-riddle-document-dock-image {
        position: absolute;
        inset: 0;
        z-index: 1;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 3px;
        object-fit: contain;
        object-position: center;
        background: transparent;
        opacity: 0;
        visibility: visible;
        transition: opacity 120ms ease;
    }

    .active-riddle-document-dock-item[data-document-kind="photo"][data-document-preview-fit="cover"] .active-riddle-document-dock-image {
        object-fit: cover;
    }

    .active-riddle-document-dock-preview[data-riddle-dock-preview-state="ready"] .active-riddle-document-dock-icon {
        opacity: 0;
    }

    .active-riddle-document-dock-preview[data-riddle-dock-preview-state="loading"] .active-riddle-document-dock-image {
        opacity: 0;
    }

    .active-riddle-document-dock-preview[data-riddle-dock-preview-state="ready"] .active-riddle-document-dock-image {
        opacity: 1;
    }

    .active-riddle-document-dock-icon::before,
    .active-riddle-document-dock-icon::after {
        content: "";
        position: absolute;
    }

    [data-document-kind="document"] .active-riddle-document-dock-icon,
    [data-document-kind="note"] .active-riddle-document-dock-icon {
        border: 2px solid currentColor;
        border-radius: 5px;
    }

    [data-document-kind="document"] .active-riddle-document-dock-icon::before,
    [data-document-kind="note"] .active-riddle-document-dock-icon::before {
        inset: 9px 6px auto;
        height: 2px;
        background: currentColor;
        box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
    }

    [data-document-kind="photo"] .active-riddle-document-dock-icon {
        border: 2px solid currentColor;
        border-radius: 6px;
    }

    [data-document-kind="photo"] .active-riddle-document-dock-icon::before {
        right: 6px;
        top: 6px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    [data-document-kind="photo"] .active-riddle-document-dock-icon::after {
        left: 6px;
        bottom: 7px;
        width: 21px;
        height: 13px;
        border-left: 3px solid currentColor;
        border-top: 3px solid currentColor;
        transform: rotate(45deg) skew(-8deg, -8deg);
    }

    [data-document-kind="audio"] .active-riddle-document-dock-icon::before {
        inset: 5px 0;
        background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px);
        clip-path: polygon(0 42%, 8% 28%, 16% 45%, 24% 12%, 32% 34%, 40% 0, 48% 28%, 56% 14%, 64% 42%, 72% 22%, 80% 48%, 88% 30%, 100% 43%, 100% 58%, 88% 70%, 80% 52%, 72% 78%, 64% 58%, 56% 86%, 48% 72%, 40% 100%, 32% 66%, 24% 88%, 16% 55%, 8% 72%, 0 58%);
    }

    [data-document-kind="video"] .active-riddle-document-dock-icon {
        border: 2px solid currentColor;
        border-radius: 50%;
    }

    [data-document-kind="video"] .active-riddle-document-dock-icon::before {
        left: 12px;
        top: 9px;
        width: 13px;
        height: 16px;
        background: currentColor;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    [data-document-kind="book"] .active-riddle-document-dock-icon::before {
        inset: 4px 17px 3px 0;
        border: 2px solid currentColor;
        border-radius: 5px 1px 1px 5px;
        box-shadow: 17px 0 0 -2px rgba(7, 19, 32, 1), 17px 0 0 0 currentColor;
    }

    [data-document-kind="book"] .active-riddle-document-dock-icon::after {
        left: 16px;
        top: 5px;
        bottom: 4px;
        width: 2px;
        background: currentColor;
    }

    .active-riddle-document-dock-title {
        display: none;
    }

    .active-riddle-document-dock-item[data-document-state="floating"] {
        transform: translateY(-3px) scale(0.96);
    }

    .active-riddle-document-dock-item[data-document-state="floating"] .active-riddle-document-dock-preview {
        opacity: 0.58;
        border-style: dashed;
        background: rgba(6, 16, 28, 0.34);
        box-shadow: none;
    }

    .active-riddle-document-dock-item[data-document-state="floating"] .active-riddle-document-dock-image {
        filter: grayscale(0.9) brightness(0.68);
    }

    .active-riddle-document-dock-item[data-document-state="floating"] .active-riddle-document-dock-title {
        color: rgba(184, 192, 202, 0.76);
    }

    .active-riddle-document-dock-item[data-document-state="floating"] .active-riddle-document-dock-item-button:focus-visible .active-riddle-document-dock-preview {
        outline-color: rgba(184, 192, 202, 0.72);
    }

    @media (prefers-reduced-motion: reduce) {
        .active-riddle-document-dock-item,
        .active-riddle-document-dock-icon,
        .active-riddle-document-dock-image {
            transition: none;
        }
    }
}


    color: rgba(242, 212, 138, 0.9);
}

.settings-checkbox-card {
    grid-template-columns: auto 1fr;
}

.settings-measurement-card.active {
    border-color: rgba(50, 79, 69, 0.28);
    box-shadow: inset 0 0 0 1px rgba(50, 79, 69, 0.08);
}

.settings-radio-header .tooltip-shell,
.settings-measurement-card .tooltip-shell {
    flex: 0 0 auto;
}

.checkbox-row {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: rgba(50, 79, 69, 0.92);
}

.checkbox-row span {
    font-size: 0.92rem;
}

.field-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tooltip-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.help-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    background: rgba(50, 79, 69, 0.14);
    color: var(--forest);
    box-shadow: none;
    transform: none;
}

body[data-theme="dark"] .help-badge {
    background: rgba(255, 250, 237, 0.08);
    color: rgba(237, 228, 210, 0.84);
}

.help-badge:hover,
.help-badge:focus-visible {
    background: rgba(50, 79, 69, 0.2);
    box-shadow: none;
    transform: none;
}

body[data-theme="dark"] .help-badge:hover,
body[data-theme="dark"] .help-badge:focus-visible {
    background: rgba(76, 109, 95, 0.18);
    color: rgba(255, 248, 235, 0.94);
}

.tooltip-bubble {
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    width: 200px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(43, 36, 24, 0.94);
    color: #fff8eb;
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.98);
    transition: opacity 120ms ease, transform 120ms ease;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    z-index: 5;
}

.tooltip-shell:hover .tooltip-bubble,
.tooltip-shell:focus-within .tooltip-bubble {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.marker-browser-editor textarea,
.marker-browser-editor input,
.marker-browser-editor select {
    margin-top: 4px;
}

.altitude-provider-section {
    display: grid;
    gap: 5px;
}

.altitude-provider-section-title {
    color: rgba(43, 36, 24, 0.68);
    font-size: 0.84rem;
    font-weight: 560;
}

.altitude-provider-list {
    display: grid;
    gap: 4px;
    margin: 2px 0 4px;
}

.altitude-provider-row {
    min-width: 0;
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 4px 7px;
    border-radius: 8px;
    background: rgba(50, 79, 69, 0.07);
    color: rgba(43, 36, 24, 0.82);
}

.altitude-provider-row.primary {
    background: rgba(50, 79, 69, 0.12);
    color: rgba(43, 36, 24, 0.94);
}

.altitude-provider-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 650;
}

.altitude-provider-row:not(.primary) .altitude-provider-name {
    font-weight: 560;
}

.altitude-provider-value {
    color: rgba(43, 36, 24, 0.9);
    font-size: 0.84rem;
    font-weight: 760;
    white-space: nowrap;
}

.altitude-provider-empty {
    margin: 2px 0 4px;
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(50, 79, 69, 0.06);
    color: rgba(43, 36, 24, 0.66);
    font-size: 0.84rem;
}

.altitude-properties-separator {
    height: 1px;
    margin: 7px 0 2px;
    background: rgba(88, 69, 37, 0.14);
}

body[data-theme="dark"] .altitude-provider-section-title {
    color: rgba(237, 228, 210, 0.66);
}

body[data-theme="dark"] .altitude-provider-row {
    background: rgba(255, 250, 237, 0.06);
    color: rgba(237, 228, 210, 0.78);
}

body[data-theme="dark"] .altitude-provider-row.primary {
    background: rgba(76, 109, 95, 0.18);
    color: rgba(255, 248, 235, 0.92);
}

body[data-theme="dark"] .altitude-provider-value {
    color: rgba(255, 248, 235, 0.9);
}

body[data-theme="dark"] .altitude-provider-empty {
    background: rgba(255, 250, 237, 0.05);
    color: rgba(237, 228, 210, 0.62);
}

body[data-theme="dark"] .altitude-properties-separator {
    background: rgba(237, 228, 210, 0.12);
}

.marker-icon-field > span,
.color-field > span {
    display: block;
}

.marker-icon-picker {
    position: relative;
    margin-top: 4px;
}

.marker-icon-preview,
.marker-icon-option-preview,
.marker-browser-icon-chip {
    color: var(--marker-color, #f28c00);
}

.marker-icon-picker-button {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 8px;
    align-items: center;
    padding: 0 12px 0 0;
    border-radius: 12px;
    border: 1px solid rgba(88, 69, 37, 0.16);
    background: rgba(255, 250, 237, 0.82);
    color: var(--ink);
    text-align: left;
    box-shadow: none;
    transform: none;
}

.marker-icon-picker-button:hover,
.marker-icon-picker-button:focus-visible {
    background: rgba(255, 250, 237, 0.94);
    border-color: rgba(88, 69, 37, 0.24);
    box-shadow: none;
    transform: none;
}

.marker-icon-preview {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(88, 69, 37, 0.14);
    background: rgba(255, 250, 237, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.marker-icon-picker-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.marker-icon-picker-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(43, 36, 24, 0.52);
    border-bottom: 2px solid rgba(43, 36, 24, 0.52);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 120ms ease;
}

.marker-icon-picker-button[aria-expanded="true"] .marker-icon-picker-chevron {
    transform: rotate(225deg) translateY(-2px);
}

.marker-icon-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 8;
    display: grid;
    gap: 4px;
    max-height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(88, 69, 37, 0.16);
    background: rgba(255, 248, 235, 0.98);
    box-shadow: 0 14px 28px rgba(54, 37, 19, 0.16);
}

.marker-icon-menu.hidden {
    display: none;
}

.marker-icon-option {
    min-height: 34px;
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    justify-items: start;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(43, 36, 24, 0.88);
    text-align: left;
    box-shadow: none;
    transform: none;
}

.marker-icon-option:hover,
.marker-icon-option:focus-visible {
    background: rgba(71, 93, 79, 0.1);
    box-shadow: none;
    transform: none;
}

.marker-icon-option.active {
    background: rgba(88, 69, 37, 0.14);
    border-color: rgba(88, 69, 37, 0.16);
}

.marker-icon-option-preview {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
}

.marker-icon-preview svg,
.marker-icon-option-preview svg,
.marker-browser-icon-chip svg {
    width: 24px;
    height: 24px;
    display: block;
    overflow: visible;
}

.marker-browser-icon-chip {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.marker-icon-preview .maphora-marker-svg-stack,
.marker-icon-option-preview .maphora-marker-svg-stack {
    width: 24px;
    height: 24px;
}

.marker-browser-icon-chip .maphora-marker-svg-stack {
    width: 17px;
    height: 17px;
}

.marker-browser-icon-chip svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.25;
    filter: none;
}

.maphora-marker-svg-stack {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    color: var(--marker-color, #f28c00);
}

.maphora-marker-svg-stack .maphora-marker-svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.maphora-marker-svg-stack .maphora-marker-svg,
.maphora-marker-svg-stack .maphora-marker-svg * {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.maphora-marker-svg-stack .maphora-marker-svg-underlay,
.maphora-marker-svg-stack .maphora-marker-svg-underlay * {
    color: #fff;
    fill: #fff !important;
    stroke: #fff !important;
    stroke-width: 4.25px;
    fill-rule: nonzero;
    clip-rule: nonzero;
}

.maphora-marker-svg-stack .maphora-marker-svg-foreground {
    color: var(--marker-color, #f28c00);
}

.maphora-marker-svg-stack .maphora-marker-svg-foreground :where(path, circle, ellipse, rect, polygon) {
    color: inherit;
    fill: currentColor;
    stroke: currentColor;
    paint-order: stroke fill markers;
}

.maphora-marker-svg-stack .maphora-marker-svg-foreground :where(line, polyline),
.maphora-marker-svg-stack .maphora-marker-svg-foreground :where([fill="none" i]),
.maphora-marker-svg-stack .maphora-marker-svg-foreground[fill="none" i] :where(path:not([fill]), circle:not([fill]), ellipse:not([fill]), rect:not([fill]), polygon:not([fill])) {
    fill: none;
}

.maphora-marker-svg-stack .maphora-marker-svg-foreground :where(line, polyline) {
    stroke: currentColor;
}

body[data-theme="dark"] .marker-icon-preview {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(255, 250, 237, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .marker-icon-picker-button {
    border-color: rgba(237, 228, 210, 0.14);
    background: rgba(11, 18, 21, 0.72);
}

body[data-theme="dark"] .marker-icon-picker-button:hover,
body[data-theme="dark"] .marker-icon-picker-button:focus-visible {
    background: rgba(20, 27, 31, 0.9);
    border-color: rgba(237, 228, 210, 0.22);
}

body[data-theme="dark"] .marker-icon-picker-chevron {
    border-right-color: rgba(237, 228, 210, 0.64);
    border-bottom-color: rgba(237, 228, 210, 0.64);
}

body[data-theme="dark"] .marker-icon-menu {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(20, 27, 31, 0.98);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .marker-icon-option {
    color: rgba(237, 228, 210, 0.88);
}

body[data-theme="dark"] .marker-icon-option:hover,
body[data-theme="dark"] .marker-icon-option:focus-visible {
    background: rgba(255, 250, 237, 0.08);
}

body[data-theme="dark"] .marker-icon-option.active {
    background: rgba(255, 250, 237, 0.1);
    border-color: rgba(237, 228, 210, 0.12);
}

body[data-theme="dark"] .marker-browser-icon-chip svg {
    filter: none;
}

.color-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.color-input-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.marker-browser-editor input[type="color"] {
    height: 42px;
    margin-top: 0;
    padding: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.marker-browser-editor input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.marker-browser-editor input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

.color-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    justify-content: center;
}

.color-action-badge {
    width: 36px;
    height: 36px;
    min-height: 36px;
    color: rgba(60, 47, 26, 0.88);
}

.color-action-badge svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.9;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.color-action-badge:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.color-action-badge:disabled:hover,
.color-action-badge:disabled:focus-visible {
    transform: none;
    box-shadow: none;
}

.color-swatch-button {
    width: 24px;
    height: 24px;
    min-height: 24px;
    border-radius: 999px;
    padding: 0;
    border: 2px solid rgba(88, 69, 37, 0.14);
    background: var(--swatch-color);
    box-shadow: inset 0 0 0 1px rgba(255, 250, 237, 0.55);
}

.color-swatch-button.active {
    border-color: rgba(50, 79, 69, 0.9);
    box-shadow:
        0 0 0 2px rgba(255, 250, 237, 0.92),
        0 0 0 4px rgba(50, 79, 69, 0.28);
}

.color-swatch-button:hover,
.color-swatch-button:focus-visible {
    transform: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 250, 237, 0.55),
        0 4px 10px rgba(43, 36, 24, 0.16);
}

body[data-theme="dark"] .color-swatch-button {
    border-color: rgba(237, 228, 210, 0.16);
    box-shadow: inset 0 0 0 1px rgba(12, 18, 22, 0.4);
}

body[data-theme="dark"] .color-swatch-button.active {
    border-color: rgba(237, 228, 210, 0.72);
    box-shadow:
        0 0 0 2px rgba(16, 23, 27, 0.94),
        0 0 0 4px rgba(237, 228, 210, 0.18);
}

body[data-theme="dark"] .color-action-badge {
    color: rgba(237, 228, 210, 0.82);
}

.shape-radiance-controls {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(88, 69, 37, 0.12);
    background: rgba(255, 250, 237, 0.48);
}

.shape-radiance-heading {
    color: var(--subsection-heading-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.shape-radiance-thickness-label.is-disabled {
    opacity: 0.48;
}

.shape-radiance-thickness-label input:disabled {
    cursor: not-allowed;
}

body[data-theme="dark"] .shape-radiance-controls {
    border-color: rgba(237, 228, 210, 0.12);
    background: rgba(16, 23, 27, 0.48);
}

.coordinate-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.coordinate-grid-with-copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
}

.coordinate-copy-badge {
    margin: 0;
}

.coordinate-input-actions {
    display: inline-flex;
    align-items: center;
    align-self: end;
    gap: 6px;
    margin-bottom: 1px;
}

.copy-badge,
.delete-badge,
.pin-badge {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    display: inline-grid;
    place-items: center;
    font-size: 15px;
    background: rgba(50, 79, 69, 0.12);
    box-shadow: none;
    transform: none;
}

body[data-theme="dark"] .copy-badge {
    color: rgba(237, 228, 210, 0.76);
    background: rgba(255, 250, 237, 0.06);
    border: 1px solid rgba(237, 228, 210, 0.08);
}

.copy-badge:hover,
.copy-badge:focus-visible {
    background: rgba(50, 79, 69, 0.2);
    box-shadow: none;
    transform: none;
}

body[data-theme="dark"] .copy-badge:hover,
body[data-theme="dark"] .copy-badge:focus-visible {
    color: rgba(255, 248, 235, 0.9);
    background: rgba(76, 109, 95, 0.18);
    border-color: rgba(76, 109, 95, 0.22);
}

/* Clipboard actions need a persistent surface so they remain distinguishable
   before hover, beside both saturated swatches and dark coordinate inputs. */
:is(.color-input-actions, .coordinate-input-actions) .color-action-badge {
    width: 36px;
    height: 36px;
    min-height: 36px;
    color: #263b45;
    background: #f7f0e3;
    border: 1px solid rgba(237, 228, 210, 0.9);
    box-shadow: 0 2px 7px rgba(8, 18, 28, 0.22);
}

:is(.color-input-actions, .coordinate-input-actions) .color-action-badge:hover,
:is(.color-input-actions, .coordinate-input-actions) .color-action-badge:focus-visible {
    color: #10232d;
    background: #fffaf0;
    border-color: #fffaf0;
    box-shadow: 0 3px 10px rgba(8, 18, 28, 0.3);
}

:is(.color-input-actions, .coordinate-input-actions) .color-action-badge:focus-visible {
    outline: 2px solid #e1b75c;
    outline-offset: 2px;
}

:is(.color-input-actions, .coordinate-input-actions) .color-action-badge:disabled {
    opacity: 1;
    color: rgba(237, 228, 210, 0.58);
    background: rgba(237, 228, 210, 0.12);
    border-color: rgba(237, 228, 210, 0.28);
    box-shadow: none;
}

body[data-theme="dark"] :is(.color-input-actions, .coordinate-input-actions) .color-action-badge {
    color: #263b45;
    background: #f7f0e3;
    border-color: rgba(255, 250, 237, 0.92);
}

body[data-theme="dark"] :is(.color-input-actions, .coordinate-input-actions) .color-action-badge:disabled {
    color: rgba(237, 228, 210, 0.6);
    background: rgba(237, 228, 210, 0.13);
    border-color: rgba(237, 228, 210, 0.3);
}

.delete-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(123, 63, 45, 0.14);
    color: rgba(123, 63, 45, 0.72);
    background: rgba(255, 250, 237, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body[data-theme="dark"] .delete-badge {
    color: rgba(237, 228, 210, 0.62);
    background: rgba(255, 250, 237, 0.06);
    border-color: rgba(237, 228, 210, 0.08);
    box-shadow: none;
}

.delete-badge:hover,
.delete-badge:focus-visible {
    background: #c9473b;
    border-color: #c9473b;
    color: #fffaf2;
    box-shadow: 0 8px 16px rgba(164, 45, 35, 0.24);
    transform: none;
}

.color-field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.color-field-value-state {
    color: rgba(225, 183, 92, 0.9);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

body[data-theme="dark"] .delete-badge:hover,
body[data-theme="dark"] .delete-badge:focus-visible {
    color: #fffaf2;
    background: #dc5b4d;
    border-color: #dc5b4d;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.marker-delete-badge {
    align-self: center;
    margin: 8px 2px 8px 0;
}

.marker-pin-badge {
    color: rgba(50, 79, 69, 0.72);
    border-color: rgba(50, 79, 69, 0.14);
}

.marker-pin-badge.is-active {
    color: rgba(255, 248, 235, 0.94);
    background: rgba(50, 79, 69, 0.82);
    border-color: rgba(50, 79, 69, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.marker-pin-badge:hover,
.marker-pin-badge:focus-visible {
    color: rgba(35, 66, 55, 0.96);
    background: rgba(50, 79, 69, 0.14);
    border-color: rgba(50, 79, 69, 0.26);
    box-shadow: 0 8px 16px rgba(50, 79, 69, 0.12);
}

.marker-pin-badge.is-active:hover,
.marker-pin-badge.is-active:focus-visible {
    color: rgba(255, 248, 235, 0.96);
    background: rgba(35, 66, 55, 0.9);
    border-color: rgba(35, 66, 55, 0.34);
}

body[data-theme="dark"] .marker-pin-badge {
    color: rgba(237, 228, 210, 0.62);
    border-color: rgba(237, 228, 210, 0.08);
}

body[data-theme="dark"] .marker-pin-badge.is-active {
    color: rgba(20, 27, 31, 0.95);
    background: rgba(237, 228, 210, 0.82);
    border-color: rgba(237, 228, 210, 0.16);
}

.icon-trash,
.icon-pin {
    width: 15px;
    height: 15px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-save {
    width: 15px;
    height: 15px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.point-chip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff9ea;
    background: linear-gradient(180deg, var(--wine), #5c281d);
    border: 2px solid rgba(255, 244, 220, 0.9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transition:
        opacity 180ms ease,
        filter 180ms ease,
        transform 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease;
}

.search-place-chip {
    position: relative;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    isolation: isolate;
    --map-marker-selection-color: var(--place-color, #8a4d23);
}

.altitude-chip {
    position: relative;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    isolation: isolate;
    --map-marker-selection-color: var(--altitude-color, #4e7a8c);
}

.search-place-chip,
.altitude-chip,
.named-point-chip,
.computed-area-shell {
    --map-marker-selection-halo: color-mix(in srgb, var(--map-marker-selection-color) 34%, transparent);
    --map-marker-selection-halo-hot: color-mix(in srgb, var(--map-marker-selection-color) 58%, transparent);
    --map-marker-selection-ring: color-mix(in srgb, var(--map-marker-selection-color) 82%, white 18%);
    --map-marker-selection-label-bg: color-mix(in srgb, #fffaf0 88%, var(--map-marker-selection-color) 12%);
    --map-marker-selection-label-ink: color-mix(in srgb, var(--map-marker-selection-color) 86%, #1d1710 14%);
    --map-marker-selection-shadow: color-mix(in srgb, var(--map-marker-selection-color) 42%, rgba(24, 19, 10, 0.36) 58%);
}

.search-place-chip.selected::before,
.altitude-chip.selected::before,
.computed-area-shell.selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        radial-gradient(circle, var(--map-marker-selection-halo-hot) 0 16%, var(--map-marker-selection-halo) 34%, transparent 72%);
    filter: blur(1px);
    opacity: 0.96;
}

.search-place-pin {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
    transform: translate(-17px, -17px);
    transition:
        transform 120ms ease,
        filter 120ms ease;
}

.altitude-pin {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.22));
    transform: translate(-17px, -17px);
    transition:
        transform 120ms ease,
        filter 120ms ease;
}

.search-place-pin,
.altitude-pin,
.named-point-badge,
.map-name-pill,
.area-label {
    position: relative;
    z-index: 1;
}

.search-place-pin-svg {
    width: 34px;
    height: 34px;
    display: block;
    color: var(--place-color, #8a4d23);
}

.altitude-pin-svg {
    width: 34px;
    height: 34px;
    display: block;
    color: var(--altitude-color, #4e7a8c);
}

.search-place-pin-svg path {
    fill: currentColor;
    stroke: rgba(255, 248, 235, 0.92);
    stroke-width: 1.2;
}

.altitude-pin-svg path:first-child {
    fill: currentColor;
    stroke: rgba(255, 248, 235, 0.92);
    stroke-width: 1.2;
}

.altitude-pin-mountain {
    fill: none;
    stroke: rgba(255, 248, 235, 0.96);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.search-place-pin-svg circle {
    fill: rgba(255, 248, 235, 0.96);
}

.map-name-pill {
    max-width: 128px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 250, 237, 0.94);
    border: 1px solid rgba(88, 69, 37, 0.12);
    color: rgba(43, 36, 24, 0.88);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
}

.search-place-name,
.named-point-name,
.altitude-name {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
}

.search-place-chip.selected .search-place-pin {
    filter:
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0.85rem var(--map-marker-selection-halo-hot))
        drop-shadow(0 0 0.4rem var(--map-marker-selection-ring))
        drop-shadow(0 14px 22px var(--map-marker-selection-shadow));
    transform: translate(-17px, -17px) scale(1.16);
}

.altitude-chip.selected .altitude-pin {
    filter:
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 0.85rem var(--map-marker-selection-halo-hot))
        drop-shadow(0 0 0.4rem var(--map-marker-selection-ring))
        drop-shadow(0 14px 22px var(--map-marker-selection-shadow));
    transform: translate(-17px, -17px) scale(1.16);
}

.search-place-chip.selected .search-place-name {
    background: var(--map-marker-selection-label-bg);
    border-color: var(--map-marker-selection-ring);
    color: var(--map-marker-selection-label-ink);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.58),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
    transform: translateX(-50%) scale(1.05);
}

.altitude-chip.selected .altitude-name {
    background: var(--map-marker-selection-label-bg);
    border-color: var(--map-marker-selection-ring);
    color: var(--map-marker-selection-label-ink);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.58),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
    transform: translateX(-50%) scale(1.05);
}

body[data-theme="dark"] .map-name-pill {
    background: rgba(19, 27, 31, 0.94);
    border-color: rgba(237, 228, 210, 0.12);
    color: rgba(255, 248, 235, 0.92);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.26);
}

body[data-theme="dark"] .search-place-chip.selected .search-place-name {
    background: color-mix(in srgb, rgba(19, 27, 31, 0.96) 78%, var(--map-marker-selection-color) 22%);
    border-color: var(--map-marker-selection-ring);
    color: color-mix(in srgb, var(--map-marker-selection-color) 58%, #fff8eb 42%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.12),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
}

body[data-theme="dark"] .altitude-chip.selected .altitude-name {
    background: color-mix(in srgb, rgba(19, 27, 31, 0.96) 78%, var(--map-marker-selection-color) 22%);
    border-color: var(--map-marker-selection-ring);
    color: color-mix(in srgb, var(--map-marker-selection-color) 58%, #fff8eb 42%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.12),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
}

.named-point-chip {
    position: relative;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    isolation: isolate;
    --map-marker-selection-color: var(--marker-color, #f28c00);
}

.named-point-badge {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    filter: none;
    transform: translate(-17px, -17px);
    transition:
        transform 120ms ease,
        filter 120ms ease;
}

.named-point-badge .maphora-marker-svg-stack,
.named-point-badge svg {
    width: 34px;
    height: 34px;
    display: block;
    overflow: visible;
    color: var(--marker-color, #f28c00);
    filter: none;
}

.named-point-chip.selected .named-point-badge {
    filter: none;
    transform: translate(-17px, -17px) scale(1.12);
}

.named-point-chip.selected .named-point-name {
    background: var(--map-marker-selection-label-bg);
    border-color: var(--map-marker-selection-ring);
    color: var(--map-marker-selection-label-ink);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.58),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
    transform: translateX(-50%) scale(1.05);
}

body[data-theme="dark"] .named-point-chip.selected .named-point-name {
    background: color-mix(in srgb, rgba(19, 27, 31, 0.96) 78%, var(--map-marker-selection-color) 22%);
    border-color: var(--map-marker-selection-ring);
    color: color-mix(in srgb, var(--map-marker-selection-color) 58%, #fff8eb 42%);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.12),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
}

body[data-theme="dark"] .named-point-badge svg {
    filter: none;
}

.point-chip.selected {
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
        0 0 0 3px var(--map-selection-core),
        0 0 0 8px var(--map-selection-ring-soft),
        0 14px 26px var(--map-selection-shadow);
    transform: scale(1.18);
}

.point-chip.barycenter {
    background: linear-gradient(180deg, var(--gold), #7b5a10);
    color: #2b2418;
}

.point-chip.weighted {
    background: linear-gradient(180deg, #3683a5, #1c5975);
}

.postit-chip {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: var(--postit-color, #fbee9d);
    box-shadow:
        -1px 10px 5px -4px rgba(0, 0, 0, 0.2),
        inset 0 24px 30px -12px rgba(0, 0, 0, 0.3);
    color: #373c49;
    cursor: grab;
    transform: translate(-50%, -50%) rotateX(5deg) scale(var(--postit-scale, 1));
    transform-origin: center;
    transform-style: preserve-3d;
    transition:
        box-shadow 180ms ease,
        transform 180ms ease;
    isolation: isolate;
}

.postit-chip.is-dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) rotateX(30deg) scale(calc(var(--postit-scale, 1) * 1.1));
    box-shadow:
        -1px 14px 40px -4px rgba(0, 0, 0, 0.12),
        inset 0 14px 20px -12px rgba(0, 0, 0, 0.3);
    transition:
        box-shadow 160ms ease,
        transform 220ms cubic-bezier(0.2, 1.35, 0.45, 1);
}

.maplibre-native-postit-marker {
    touch-action: auto;
}

.postit-close-button {
    position: absolute;
    top: -24px;
    left: -24px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(123, 63, 45, 0.16);
    border-radius: 10px;
    color: rgba(123, 63, 45, 0.94) !important;
    background: rgba(255, 250, 237, 0.98);
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.14);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    appearance: none;
    transform: none;
    pointer-events: none;
    touch-action: manipulation;
    transition: opacity 120ms ease;
}

.postit-chip .postit-close-button,
.postit-chip .postit-close-button:hover,
.postit-chip .postit-close-button:active,
.postit-chip .postit-close-button:focus,
.postit-chip .postit-close-button:focus-visible {
    padding: 0;
    border: 1px solid rgba(123, 63, 45, 0.16);
    border-radius: 10px;
    background: rgba(255, 250, 237, 0.98) !important;
    box-shadow: 0 8px 18px rgba(24, 19, 10, 0.14) !important;
    transform: none !important;
}

.postit-chip:hover .postit-close-button,
.postit-chip.is-close-visible .postit-close-button,
.postit-chip[data-postit-close-visible="true"] .postit-close-button,
.postit-close-button:focus-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.postit-close-button:hover,
.postit-close-button:focus-visible {
    color: rgba(123, 63, 45, 0.8) !important;
    opacity: 1;
}

.postit-close-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    display: block;
    flex: 0 0 auto;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.postit-chip-note {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    padding: 6px;
    font-family: "Comic Sans MS", "Segoe Print", "Trebuchet MS", cursive;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
    resize: none;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    appearance: none;
    user-select: text !important;
    -webkit-user-select: text !important;
    pointer-events: auto;
    touch-action: auto;
    caret-color: #373c49;
}

.postit-chip-note[data-postit-editor="true"] {
    cursor: text;
}

.postit-chip-note:focus {
    border-color: rgba(50, 79, 69, 0.72);
}

body[data-theme="dark"] .postit-chip {
    color: #28303a;
    box-shadow:
        -1px 10px 5px -4px rgba(0, 0, 0, 0.32),
        inset 0 24px 30px -12px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .postit-chip .postit-chip-note {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 6px;
    caret-color: #28303a;
}

.compass-chip {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    color: #d9b361;
    filter:
        drop-shadow(0 2px 2px rgba(2, 8, 15, 0.52))
        drop-shadow(0 10px 16px rgba(2, 8, 15, 0.34));
    overflow: visible;
    /* The transform owns the compass position and scale. Animating it makes
       hover hit-testing unstable when the manipulation handles appear. */
    transition: filter 140ms ease;
    isolation: isolate;
    --map-marker-selection-color: var(--compass-accent, #d5b66a);
    --map-marker-selection-halo: color-mix(in srgb, var(--map-marker-selection-color) 34%, transparent);
    --map-marker-selection-halo-hot: color-mix(in srgb, var(--map-marker-selection-color) 58%, transparent);
    --map-marker-selection-ring: color-mix(in srgb, var(--map-marker-selection-color) 82%, white 18%);
    --map-marker-selection-shadow: color-mix(in srgb, var(--map-marker-selection-color) 36%, rgba(24, 19, 10, 0.36) 64%);
}

.compass-chip.selected::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 146px;
    height: 146px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background:
        radial-gradient(circle, var(--map-marker-selection-halo-hot) 0 28%, var(--map-marker-selection-halo) 47%, transparent 72%);
    filter: blur(3px);
    opacity: 0.96;
}

.compass-chip.selected {
    filter:
        drop-shadow(0 0 2px color-mix(in srgb, var(--compass-accent) 82%, #ffdfa0 18%))
        drop-shadow(0 0 8px var(--map-marker-selection-halo-hot))
        drop-shadow(0 0 16px var(--map-marker-selection-halo))
        drop-shadow(0 16px 26px var(--map-marker-selection-shadow));
}

.compass-svg {
    width: 132px;
    height: 132px;
    overflow: visible;
}

.compass-dial-image {
    pointer-events: none;
    filter:
        drop-shadow(0 0.6px 0.4px rgba(255, 226, 158, 0.2))
        drop-shadow(0 2.2px 1.8px rgba(0, 4, 10, 0.58));
}

.compass-metal-stop-highlight {
    stop-color: color-mix(in srgb, #fff1bd 78%, var(--compass-accent) 22%);
}

.compass-metal-stop-light {
    stop-color: color-mix(in srgb, #dfb45e 62%, var(--compass-accent) 38%);
}

.compass-metal-stop-mid {
    stop-color: color-mix(in srgb, #a87329 58%, var(--compass-accent) 42%);
}

.compass-metal-stop-shadow {
    stop-color: color-mix(in srgb, #4d2d12 72%, var(--compass-accent) 28%);
}

.compass-dial-stop-light {
    stop-color: #102a45;
}

.compass-dial-stop-mid {
    stop-color: #081d32;
}

.compass-dial-stop-shadow {
    stop-color: #03101e;
}

.compass-needle-stop-highlight {
    stop-color: #fff0b1;
}

.compass-needle-stop-light {
    stop-color: color-mix(in srgb, #e6b756 70%, var(--compass-accent) 30%);
}

.compass-needle-stop-shadow {
    stop-color: color-mix(in srgb, #8b551e 72%, var(--compass-accent) 28%);
}

.compass-tail-stop-light {
    stop-color: color-mix(in srgb, #b2782f 68%, var(--compass-accent) 32%);
}

.compass-tail-stop-shadow {
    stop-color: #422713;
}

.compass-cast-shadow {
    fill: rgba(0, 5, 12, 0.68);
}

.compass-ring {
    stroke: #4a2d12;
    stroke-width: 0.9;
}

.compass-bezel-groove {
    fill: #5c3717;
    stroke: #24160c;
    stroke-width: 0.7;
}

.compass-dial {
    stroke: rgba(246, 213, 138, 0.72);
    stroke-width: 0.7;
}

.compass-frame-points {
    stroke: #4b2b10;
    stroke-width: 0.65;
    stroke-linejoin: round;
}

.compass-frame-points {
    filter: drop-shadow(0 0.8px 0.7px rgba(0, 0, 0, 0.68));
}

.compass-rose-cardinal {
    fill: rgba(28, 51, 73, 0.88);
    stroke: rgba(101, 132, 157, 0.28);
    stroke-width: 0.45;
}

.compass-cardinal {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 7.2px;
    font-weight: 600;
    fill: #f8e4b7;
    paint-order: stroke fill;
    stroke: rgba(2, 12, 23, 0.94);
    stroke-width: 1.25px;
    stroke-linejoin: round;
    letter-spacing: 0.04em;
    filter: drop-shadow(0 0.5px 0.5px rgba(0, 0, 0, 0.88));
}

.compass-cardinal.is-north {
    font-size: 8.2px;
}

.compass-needle {
    filter: drop-shadow(0 1.2px 1.15px rgba(0, 0, 0, 0.72));
}

.compass-needle-outline {
    fill: #2b190c;
    stroke: rgba(247, 210, 127, 0.72);
    stroke-width: 0.75;
    stroke-linejoin: round;
}

.compass-needle-main {
    stroke: #fff0b4;
    stroke-width: 0.52;
    stroke-linejoin: round;
}

.compass-needle-tail {
    stroke: #6f431c;
    stroke-width: 0.52;
    stroke-linejoin: round;
}

.compass-needle-cut {
    fill: rgba(255, 245, 207, 0.7);
    stroke: none;
}

.compass-tail-cut {
    fill: rgba(224, 171, 78, 0.32);
    stroke: none;
}

.compass-center-rim {
    stroke: #3f260f;
    stroke-width: 0.8;
    filter: drop-shadow(0 1px 0.75px rgba(0, 0, 0, 0.72));
}

.compass-center-core {
    fill: #061829;
    stroke: rgba(255, 229, 169, 0.72);
    stroke-width: 0.48;
}

.compass-center-line {
    fill: none;
    stroke: rgba(188, 137, 52, 0.5);
    stroke-width: 0.42;
}

.compass-heading-text {
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: 3.15px;
    font-weight: 800;
    fill: #f7dfaa;
    paint-order: stroke fill;
    stroke: rgba(2, 11, 20, 0.96);
    stroke-width: 0.55px;
    stroke-linejoin: round;
    letter-spacing: -0.04em;
}

.compass-rotate-handle,
.compass-resize-handle {
    position: absolute;
    border-radius: 999px;
    background: #071a2b;
    border: 1.5px solid color-mix(in srgb, var(--compass-accent) 78%, #ffe0a0 22%);
    box-shadow:
        0 0 0 1px rgba(5, 13, 21, 0.82),
        0 3px 8px rgba(2, 8, 15, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease;
    z-index: 2;
}

.compass-chip.selected .compass-rotate-handle,
.compass-chip.selected .compass-resize-handle,
.compass-chip.is-manipulating .compass-rotate-handle,
.compass-chip.is-manipulating .compass-resize-handle {
    opacity: 1;
    visibility: visible;
}

.compass-rotate-handle {
    width: 16px;
    height: 16px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    color: #f4cf7e;
}

.compass-rotate-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1px;
    height: 10px;
    transform: translateX(-50%);
    background: color-mix(in srgb, var(--compass-accent) 70%, #f4cf7e 30%);
}

.plan-shape-manipulator.rotate::before,
.plan-image-manipulator.rotate::before,
.compass-rotate-handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    background: currentColor;
    -webkit-mask-image: var(--rotation-handle-icon);
    mask-image: var(--rotation-handle-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
}

.compass-resize-handle {
    width: 13px;
    height: 13px;
}

.compass-resize-nw,
.compass-resize-se {
    cursor: nwse-resize;
}

.compass-resize-ne,
.compass-resize-sw {
    cursor: nesw-resize;
}

.compass-resize-nw {
    left: -6px;
    top: -6px;
}

.compass-resize-ne {
    right: -6px;
    top: -6px;
}

.compass-resize-se {
    right: -6px;
    bottom: -6px;
}

.compass-resize-sw {
    left: -6px;
    bottom: -6px;
}

.distance-shell {
    display: inline-flex;
    width: max-content;
    overflow: visible;
}

.distance-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #fff8eb;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(32, 39, 37, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        border-color 120ms ease,
        background 120ms ease;
}

.distance-label.selected {
    background: color-mix(in srgb, var(--map-selection-ring) 82%, #18231f 18%);
    border-color: var(--map-selection-core);
    box-shadow:
        0 0 0 6px var(--map-selection-ring-soft),
        0 12px 22px var(--map-selection-shadow);
    transform: scale(1.08);
}

.line-drag-measure-shell {
    position: relative;
    align-items: center;
    justify-content: center;
}

.line-drag-angle-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    max-width: min(68vw, 260px);
    color: #fff8eb;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(32, 39, 37, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    transform: translateX(-50%);
    white-space: nowrap;
}

.line-drag-angle-label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-drag-angle-divider {
    opacity: 0.62;
}

.line-drag-compass-icon {
    width: max-content !important;
    height: max-content !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
}

.maplibre-native-line-drag-compass {
    pointer-events: none !important;
}

#map .maplibregl-marker.maplibre-native-line-drag-compass {
    z-index: 19;
}

.line-drag-compass-shell {
    width: 188px;
    height: 188px;
    transform-origin: center;
    color: rgba(255, 248, 235, 0.92);
    filter:
        drop-shadow(0 10px 22px rgba(12, 18, 14, 0.16))
        drop-shadow(0 0 12px rgba(255, 145, 0, 0.16));
    opacity: 0.96;
}

.line-drag-compass-svg {
    display: block;
    width: 188px;
    height: 188px;
    overflow: visible;
}

.line-drag-compass-disc {
    fill: rgba(238, 245, 226, 0.2);
    stroke: rgba(255, 248, 235, 0.2);
    stroke-width: 1;
}

.line-drag-compass-ring {
    fill: rgba(23, 37, 30, 0.08);
    stroke: rgba(255, 248, 235, 0.44);
    stroke-width: 1.4;
}

.line-drag-compass-axis {
    stroke: rgba(255, 145, 0, 0.56);
    stroke-width: 1;
    stroke-dasharray: 5 6;
}

.line-drag-compass-tick {
    stroke: rgba(255, 248, 235, 0.48);
    stroke-width: 1;
    stroke-linecap: round;
}

.line-drag-compass-tick.is-major {
    stroke: rgba(255, 248, 235, 0.72);
    stroke-width: 1.4;
}

.line-drag-compass-tick.is-cardinal {
    stroke: rgba(255, 145, 0, 0.84);
    stroke-width: 1.8;
}

.line-drag-compass-degree {
    fill: rgba(255, 248, 235, 0.82);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(28, 39, 31, 0.42);
    stroke-width: 2px;
}

.line-drag-compass-cardinal {
    fill: rgba(255, 248, 235, 0.95);
    font-size: 20px;
    font-weight: 900;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(255, 145, 0, 0.86);
    stroke-width: 3px;
}

.line-drag-compass-cardinal.is-north {
    fill: #fff8eb;
}

.line-drag-compass-arc {
    fill: none;
    stroke: rgba(255, 145, 0, 0.92);
    stroke-width: 3;
    stroke-linecap: round;
}

.line-drag-compass-bearing-line {
    stroke: rgba(255, 145, 0, 0.9);
    stroke-width: 2.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(255, 145, 0, 0.36));
}

.line-drag-compass-bearing-dot {
    fill: #fff8eb;
    stroke: rgba(255, 145, 0, 0.95);
    stroke-width: 2;
}

.area-shell {
    display: inline-flex;
    width: max-content;
    overflow: visible;
    position: relative;
    isolation: isolate;
    --map-marker-selection-color: var(--area-color, #2f765b);
}

.area-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    color: #173831;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(229, 246, 234, 0.96);
    border: 1px solid rgba(47, 118, 91, 0.42);
    box-shadow: 0 9px 18px rgba(26, 55, 42, 0.16);
    white-space: nowrap;
    transition: opacity 180ms ease, filter 180ms ease;
}

.computed-area-shell.selected .area-label {
    background: var(--map-marker-selection-label-bg);
    border-color: var(--map-marker-selection-ring);
    color: var(--map-marker-selection-label-ink);
    box-shadow:
        0 0 0 6px var(--map-marker-selection-halo),
        0 12px 22px var(--map-marker-selection-shadow);
}

.computed-area-shell.selected::before {
    left: 50%;
    top: 50%;
    min-width: 78px;
    width: calc(100% + 42px);
    height: 52px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse, var(--map-marker-selection-halo-hot) 0 18%, var(--map-marker-selection-halo) 44%, transparent 76%);
}

.draft-distance-label {
    background: rgba(32, 39, 37, 0.74);
    border-style: dashed;
}

.multi-distance-shell {
    display: inline-flex;
    width: max-content;
    overflow: visible;
}

.multi-distance-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    color: #3b3426;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 246, 219, 0.96);
    border: 1px dashed rgba(168, 129, 38, 0.95);
    box-shadow: 0 8px 15px rgba(74, 58, 24, 0.14);
    white-space: nowrap;
    transition: opacity 180ms ease, filter 180ms ease;
}

#map.maphora-marker-clusters-active .distance-label:not(.selected):not(.draft-distance-label),
#map.maphora-marker-clusters-active .computed-area-shell:not(.selected) .area-label,
#map.maphora-marker-clusters-active .multi-distance-label,
#map.maphora-marker-clusters-active .freeform-area-label {
    opacity: 0;
    filter: blur(2px);
    pointer-events: none;
}

.multi-distance-label::before {
    content: "Σ";
    font-size: 11px;
    color: rgba(168, 129, 38, 0.98);
}

.distance-icon {
    width: max-content !important;
    height: max-content !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

.area-icon {
    width: max-content !important;
    height: max-content !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
}

.line-arrow-icon {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: none !important;
}

.line-arrow-shell {
    width: var(--line-arrow-width, 24px);
    height: var(--line-arrow-height, 29px);
    display: block;
    transform-origin: var(--line-arrow-anchor-x, 1.2px) var(--line-arrow-anchor-y, 14.5px);
    transition: transform 140ms ease;
}

.line-arrow-shell.selected {
    filter: none;
}

.line-arrow-shell svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.line-arrow-fill {
    fill: var(--line-arrow-color);
}

 .inspector-virtual-more {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
}


.free-tab-audio-panel {
    position: fixed;
    z-index: 1300;
    width: min(284px, calc(100vw - 16px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgba(226, 195, 131, 0.3);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(22, 43, 61, 0.98), rgba(9, 23, 36, 0.98));
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
    color: #eee9df;
    font: 12px/1.5 var(--maphora-ui-font, system-ui, sans-serif);
    color-scheme: dark;
}

.free-tab-audio-panel[hidden],
.free-tab-audio-panel [hidden] { display: none; }

.free-tab-audio-panel button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.free-tab-audio-panel button:hover,
.free-tab-audio-panel button[aria-pressed="true"],
.free-tab-audio-panel button[aria-current="true"] {
    background: rgba(237, 194, 112, 0.12);
    color: #efc66f;
}

.free-tab-audio-panel button:disabled {
    background: transparent;
    color: inherit;
    border-color: transparent;
    opacity: 0.4;
    cursor: default;
}
.free-tab-audio-panel :focus-visible { outline: 2px solid #efc66f; outline-offset: 2px; }
.free-tab-audio-panel svg { flex: 0 0 18px; width: 18px; height: 18px; }
.free-tab-audio-transport { display: flex; align-items: center; gap: 6px; }
.free-tab-audio-transport button[data-action="loop"] { margin-left: auto; }
.free-tab-audio-panel .free-tab-audio-play { background: rgba(237, 194, 112, 0.15); color: #efc66f; }
.free-tab-audio-volume { display: flex; align-items: center; gap: 12px; margin: 12px 6px; color: #c0cbd3; }
.free-tab-audio-volume input { width: 100%; min-width: 0; height: 20px; margin: 0; padding: 0; accent-color: #efc66f; }
.free-tab-audio-playlists {
    width: 100%;
    min-height: 36px;
    margin: 2px 0 8px;
    padding: 6px 10px;
    border: 1px solid rgba(226, 195, 131, 0.24);
    border-radius: 9px;
    background: #152b3b;
    color: inherit;
    font: inherit;
}
.free-tab-audio-tracks { max-height: 216px; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; }
.free-tab-audio-tracks li + li { margin-top: 2px; }
.free-tab-audio-tracks button { width: 100%; justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
.free-tab-audio-status { margin: 8px 4px 0; color: #c0cbd3; }


.sun-shadow-panel {
    --sun-shadow-gold: var(--maphora-gold-deep, #a9780e);
    --sun-shadow-ink: rgba(20, 42, 68, 0.88);
    --sun-shadow-muted: rgba(20, 42, 68, 0.62);
    --sun-shadow-card-strong: rgba(255, 250, 237, 0.9);
    --sun-shadow-border: rgba(20, 42, 68, 0.13);
    position: absolute;
    right: calc(108px + env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
    width: min(var(--hud-panel-width), calc(100vw - 32px));
    max-height: min(680px, calc(100vh - 112px));
    overflow: hidden;
    z-index: 5350;
}

.sun-shadow-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sun-shadow-title-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid color-mix(in srgb, var(--sun-shadow-gold) 30%, transparent);
    border-radius: 11px;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sun-shadow-gold) 18%, transparent), transparent 68%),
        rgba(255, 253, 248, 0.56);
    color: var(--sun-shadow-gold);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.sun-shadow-title-icon svg {
    width: 22px;
    height: 22px;
    overflow: visible;
    fill: color-mix(in srgb, var(--sun-shadow-gold) 22%, transparent);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.sun-shadow-panel-body {
    display: grid;
    gap: 12px;
    max-height: calc(min(680px, 100vh - 112px) - 58px);
    overflow: auto;
    padding-right: 4px;
}

.sun-shadow-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.sun-shadow-field,
.sun-shadow-toggle-row {
    display: grid;
    gap: 6px;
    color: var(--sun-shadow-ink);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.sun-shadow-field-full {
    grid-column: 1 / -1;
}

.sun-shadow-time-field {
    gap: 2px;
}

.sun-shadow-field input[type="text"],
.sun-shadow-field input[type="time"],
.sun-shadow-field input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    border: 1px solid rgba(53, 67, 80, 0.2);
    border-radius: 8px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.92);
    color: #24303a;
    font: inherit;
}

.sun-shadow-field input[type="range"] {
    width: 100%;
    accent-color: var(--sun-shadow-gold);
}

.sun-shadow-time-ruler {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    min-height: 18px;
    padding-top: 6px;
    color: var(--sun-shadow-muted);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1;
}

.sun-shadow-time-ruler::before,
.sun-shadow-time-ruler::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    pointer-events: none;
}

.sun-shadow-time-ruler::before {
    background-image: repeating-linear-gradient(
        to right,
        rgba(34, 43, 51, 0.2) 0 1px,
        transparent 1px calc(100% / 48)
    );
}

.sun-shadow-time-ruler::after {
    background-image: repeating-linear-gradient(
        to right,
        rgba(34, 43, 51, 0.42) 0 1px,
        transparent 1px calc(100% / 24)
    );
    height: 8px;
}

.sun-shadow-status {
    min-height: 30px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--sun-shadow-gold) 22%, transparent);
    border-radius: 10px;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--sun-shadow-gold) 11%, transparent), transparent 64%),
        var(--sun-shadow-card-strong);
    color: var(--sun-shadow-muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.25;
}

.sun-shadow-status.is-night {
    border-color: rgba(50, 62, 72, 0.18);
    background: rgba(48, 59, 69, 0.08);
    color: rgba(33, 41, 49, 0.82);
}

.sun-shadow-toggle-row {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    min-height: 30px;
}

.sun-shadow-toggle-row input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--sun-shadow-muted) 42%, transparent);
    border-radius: 5px;
    background: rgba(255, 253, 248, 0.84);
    box-shadow: inset 0 1px 2px rgba(12, 27, 46, 0.08);
    cursor: pointer;
}

.sun-shadow-toggle-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #fffaf0;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(0.72);
    transition: opacity 140ms ease, transform 140ms ease;
}

.sun-shadow-toggle-row input[type="checkbox"]:checked {
    border-color: var(--sun-shadow-gold);
    background: linear-gradient(145deg, var(--maphora-gold, #d4a017), var(--sun-shadow-gold));
    box-shadow: 0 3px 8px color-mix(in srgb, var(--sun-shadow-gold) 26%, transparent);
}

.sun-shadow-toggle-row input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.sun-shadow-toggle-row input[type="checkbox"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--sun-shadow-gold) 62%, white);
    outline-offset: 2px;
}

.sun-shadow-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    width: 100%;
    border: 1px solid rgba(70, 79, 58, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(45, 63, 53, 0.96), rgba(29, 49, 42, 0.96));
    color: #fff7da;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(35, 43, 38, 0.16);
}

.sun-shadow-action-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sun-shadow-action-button:hover,
.sun-shadow-action-button.active,
.sun-shadow-action-button[aria-pressed="true"] {
    background: linear-gradient(180deg, rgba(173, 119, 28, 0.98), rgba(124, 84, 23, 0.98));
    box-shadow: 0 12px 24px rgba(122, 82, 25, 0.22);
}

.sun-totem-chip {
    position: relative;
    display: block;
    min-width: 18px;
    min-height: 18px;
    transform: translate(-50%, -50%);
    color: var(--totem-color, #c78d2b);
    pointer-events: auto;
}

.sun-totem-name {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.sun-totem-chip.selected .sun-totem-name {
    background: var(--map-marker-selection-label-bg);
    border-color: var(--map-marker-selection-ring);
    color: var(--map-marker-selection-label-ink);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.58),
        0 0 0 8px var(--map-marker-selection-halo),
        0 10px 18px var(--map-marker-selection-shadow);
    transform: translate(-50%, -50%) scale(1.05);
}

.sun-totem-browser-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

body[data-theme="dark"] .sun-shadow-panel {
    --sun-shadow-gold: #e2b33c;
    --sun-shadow-ink: rgba(247, 244, 238, 0.9);
    --sun-shadow-muted: rgba(247, 244, 238, 0.66);
    --sun-shadow-card-strong: rgba(20, 42, 68, 0.68);
    --sun-shadow-border: rgba(247, 244, 238, 0.11);
}

body[data-theme="dark"] .sun-shadow-title-icon,
body[data-theme="dark"] .sun-shadow-toggle-row input[type="checkbox"] {
    background-color: rgba(8, 20, 34, 0.74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .sun-shadow-field input[type="text"],
body[data-theme="dark"] .sun-shadow-field input[type="time"],
body[data-theme="dark"] .sun-shadow-field input[type="number"] {
    border-color: var(--sun-shadow-border);
    background: rgba(8, 20, 34, 0.64);
    color: var(--sun-shadow-ink);
}

body[data-theme="dark"] .sun-shadow-status.is-night {
    border-color: var(--sun-shadow-border);
    background: rgba(8, 20, 34, 0.62);
    color: var(--sun-shadow-muted);
}

@media (max-width: 720px) {
    .sun-shadow-panel {
        right: calc(16px + env(safe-area-inset-right));
        left: calc(16px + env(safe-area-inset-left));
        bottom: calc(104px + env(safe-area-inset-bottom));
        width: auto;
        max-height: calc(100vh - 132px);
    }

    .sun-shadow-panel-body {
        max-height: calc(100vh - 190px);
    }

    .sun-shadow-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


.sea-level-panel {
    position: absolute;
    right: calc(108px + env(safe-area-inset-right));
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: min(var(--hud-panel-width), calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 112px));
    overflow: hidden;
    z-index: 5355;
}

.sea-level-panel-body {
    display: grid;
    gap: 12px;
    max-height: calc(min(520px, 100vh - 112px) - 58px);
    overflow: auto;
    padding-right: 4px;
}

.sea-level-field,
.sea-level-toggle-row {
    display: grid;
    gap: 6px;
    color: rgba(35, 39, 44, 0.86);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.sea-level-field-full {
    grid-column: 1 / -1;
}

.sea-level-level-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 10px;
    align-items: center;
}

.sea-level-field input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    border: 1px solid rgba(53, 67, 80, 0.2);
    border-radius: 8px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.92);
    color: #24303a;
    font: inherit;
}

.sea-level-field input[type="range"] {
    width: 100%;
    accent-color: #2f7fa3;
}

.sea-level-toggle-row {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    min-height: 30px;
}

.sea-level-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2f7fa3;
}

.sea-level-option-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid rgba(53, 67, 80, 0.14);
    border-radius: 8px;
    background: rgba(247, 249, 249, 0.74);
}

body[data-theme="dark"] .sea-level-field,
body[data-theme="dark"] .sea-level-toggle-row {
    color: rgba(232, 238, 240, 0.88);
}

body[data-theme="dark"] .sea-level-field input[type="number"] {
    border-color: rgba(223, 236, 240, 0.16);
    background: rgba(20, 29, 34, 0.9);
    color: #eff7f8;
}

body[data-theme="dark"] .sea-level-option-stack {
    border-color: rgba(223, 236, 240, 0.12);
    background: rgba(18, 29, 35, 0.72);
}

@media (max-width: 720px) {
    .sea-level-panel {
        right: calc(16px + env(safe-area-inset-right));
        left: calc(16px + env(safe-area-inset-left));
        bottom: calc(104px + env(safe-area-inset-bottom));
        width: auto;
        max-height: calc(100vh - 132px);
    }

    .sea-level-panel-body {
        max-height: calc(100vh - 190px);
    }

    .sea-level-level-controls {
        grid-template-columns: minmax(0, 1fr) 74px;
    }
}


.terrain-slice-panel {
    position: absolute;
    right: calc(108px + env(safe-area-inset-right));
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: min(var(--hud-panel-width), calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 112px));
    overflow: hidden;
    z-index: 5356;
}

.terrain-slice-panel-body {
    display: grid;
    gap: 12px;
    max-height: calc(min(560px, 100vh - 112px) - 58px);
    overflow: auto;
    padding-right: 4px;
}

.terrain-slice-field,
.terrain-slice-toggle-row {
    display: grid;
    gap: 6px;
    color: rgba(35, 39, 44, 0.86);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.terrain-slice-level-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 10px;
    align-items: center;
}

.terrain-slice-field input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    border: 1px solid rgba(53, 67, 80, 0.2);
    border-radius: 8px;
    padding: 6px 9px;
    background: rgba(255, 255, 255, 0.92);
    color: #24303a;
    font: inherit;
}

.terrain-slice-field input[type="range"] {
    width: 100%;
    accent-color: #2f9c88;
}

.terrain-slice-toggle-row {
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    min-height: 30px;
}

.terrain-slice-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #2f9c88;
}

.terrain-slice-status {
    margin: 0;
    min-height: 20px;
    color: rgba(35, 67, 70, 0.82);
    font-size: 0.82rem;
    font-weight: 700;
}

body[data-theme="dark"] .terrain-slice-field,
body[data-theme="dark"] .terrain-slice-toggle-row,
body[data-theme="dark"] .terrain-slice-status {
    color: rgba(232, 238, 240, 0.88);
}

body[data-theme="dark"] .terrain-slice-field input[type="number"] {
    border-color: rgba(223, 236, 240, 0.16);
    background: rgba(20, 29, 34, 0.9);
    color: #eff7f8;
}

@media (max-width: 720px) {
    .terrain-slice-panel {
        right: calc(16px + env(safe-area-inset-right));
        left: calc(16px + env(safe-area-inset-left));
        bottom: calc(104px + env(safe-area-inset-bottom));
        width: auto;
        max-height: calc(100vh - 132px);
    }

    .terrain-slice-panel-body {
        max-height: calc(100vh - 190px);
    }

    .terrain-slice-level-controls {
        grid-template-columns: minmax(0, 1fr) 74px;
    }
}


.top-bar-tab-actions {
    position: relative;
}

.tab-share,
.tab-chat {
    position: relative;
}

.tab-share.is-open {
    background: rgba(50, 79, 69, 0.18);
}

.tab-share.is-shared::after,
.tab-chat.has-unread-messages::after {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border: 1.5px solid rgba(24, 38, 34, 0.92);
    border-radius: 50%;
    background: #58d39a;
    box-shadow: 0 0 0 1px rgba(88, 211, 154, 0.2);
    content: "";
    pointer-events: none;
}

.icon-share,
.icon-copy {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-share-panel {
    --plan-share-primary-action-width: 13rem;
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    z-index: 5600;
    width: min(680px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 22px;
    border: 1px solid rgba(91, 69, 36, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.7), transparent 42%),
        linear-gradient(145deg, rgba(255, 252, 246, 0.99), rgba(248, 242, 231, 0.99));
    box-shadow:
        0 0 0 100vmax rgba(5, 12, 9, 0.52),
        0 28px 64px rgba(15, 18, 13, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    color: var(--ink);
    display: grid;
    gap: 18px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.plan-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 0 2px;
}

.plan-share-title {
    color: #182536;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.plan-share-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.plan-share-drag-handle,
.plan-share-close {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    min-width: var(--ui-compact-control-size);
    min-height: var(--ui-compact-control-size);
    flex: 0 0 var(--ui-compact-control-size);
    border: 1px solid rgba(89, 69, 38, 0.13);
    border-radius: 12px;
    background: rgba(255, 253, 249, 0.64);
    box-shadow: 0 5px 14px rgba(63, 47, 24, 0.05);
}

.plan-share-drag-handle {
    order: -1;
}

.plan-share-close {
    width: var(--ui-compact-control-size);
    height: var(--ui-compact-control-size);
    padding: 0 0 3px;
    color: #1d2937;
    cursor: pointer;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
    transform: none;
}

.plan-share-close:hover {
    border-color: rgba(171, 117, 28, 0.34);
    background: rgba(255, 255, 255, 0.94);
    transform: none;
}

.plan-share-panel.is-dragging,
.plan-share-panel.is-dragging .plan-share-drag-handle {
    cursor: grabbing;
}

.plan-share-control-icon,
.plan-share-section-icon,
.plan-share-row-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.plan-share-control-icon,
.plan-share-control-icon svg {
    width: 18px;
    height: 18px;
}

.plan-share-section-icon,
.plan-share-section-icon svg,
.plan-share-row-icon,
.plan-share-row-icon svg {
    width: 22px;
    height: 22px;
}

.plan-share-control-icon svg,
.plan-share-section-icon svg,
.plan-share-row-icon svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-share-link-access,
.plan-share-community-access {
    display: grid;
    gap: 7px;
}

.plan-share-link-access > strong,
.plan-share-community-access > strong {
    color: rgba(37, 48, 61, 0.84);
    font-size: 0.73rem;
}

.plan-share-community-access {
    padding: 12px;
    border: 1px solid rgba(113, 88, 47, 0.12);
    border-radius: 12px;
    background: rgba(251, 248, 241, 0.68);
}

.plan-share-community-access > small {
    color: rgba(54, 52, 48, 0.67);
    font-size: 0.69rem;
    line-height: 1.4;
}

.plan-share-role-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(96, 78, 49, 0.075);
}

.plan-share-role-picker button {
    min-height: 46px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: rgba(36, 42, 45, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.88rem;
    font-weight: 650;
    transform: none;
}

.plan-share-role-picker button.active {
    border-color: #c88924;
    background: rgba(255, 254, 251, 0.96);
    box-shadow: 0 4px 12px rgba(177, 116, 22, 0.13);
    color: #202a38;
}

.plan-share-role-picker button.active .plan-share-control-icon {
    color: #b77914;
}

.plan-share-community-role-picker button {
    min-height: 40px;
}

.plan-share-invitation {
    display: grid;
    min-width: 0;
    gap: inherit;
    border-radius: 16px;
    background: linear-gradient(145deg, #f2f7f3, #e6eee8);
    box-shadow:
        inset 0 0 0 1px rgba(66, 112, 84, 0.48),
        inset 4px 0 0 #62836d;
}

.plan-share-social,
.plan-share-links {
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
}

.plan-share-community {
    border: 1px solid rgba(176, 126, 43, 0.55);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff9ed, #f5e9cb);
    box-shadow: inset 3px 0 0 #b88938;
}

.plan-share-social > .plan-share-section-icon,
.plan-share-social-heading strong {
    color: #345b45;
}

.plan-share-community-heading > .plan-share-section-icon,
.plan-share-community-copy strong {
    color: #825b20;
}

.plan-share-links .guided-empty-state {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

.plan-share-social {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 12px;
    padding: 16px;
}

.plan-share-section-icon {
    color: #1b3449;
}

.plan-share-social-heading {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.plan-share-social-heading strong,
.plan-share-community-copy strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.03rem;
}

.plan-share-social-heading span,
.plan-share-community-copy > span {
    color: rgba(52, 51, 47, 0.66);
    font-size: 0.76rem;
    line-height: 1.35;
}

.plan-share-social-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 11px;
}

.plan-share-social-button {
    min-width: 0;
    min-height: 98px;
    padding: 11px 5px 9px;
    border: 1px solid rgba(113, 88, 47, 0.16);
    border-radius: 13px;
    background: rgba(255, 253, 249, 0.82);
    box-shadow: 0 5px 13px rgba(53, 40, 19, 0.045);
    color: rgba(43, 36, 24, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    transform: none;
}

.plan-share-social-button:not(:disabled):hover {
    border-color: rgba(176, 119, 29, 0.42);
    background: #fffefb;
    box-shadow: 0 8px 18px rgba(53, 40, 19, 0.08);
    transform: translateY(-1px);
}

.plan-share-social-button:disabled {
    filter: grayscale(0.45);
    opacity: 0.48;
}

.plan-share-social-icon,
.plan-share-social-icon svg {
    width: 38px;
    height: 38px;
}

.plan-share-social-icon svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-share-social-button.is-whatsapp .plan-share-social-icon { color: #21a83e; }
.plan-share-social-button.is-discord .plan-share-social-icon { color: #5865f2; }
.plan-share-social-button.is-discord svg,
.plan-share-social-button.is-facebook svg { fill: currentColor; stroke: none; }
.plan-share-social-button.is-x .plan-share-social-icon { color: #0f1115; }
.plan-share-social-button.is-x svg { fill: currentColor; stroke: none; }
.plan-share-social-button.is-facebook .plan-share-social-icon { color: #287be0; }
.plan-share-social-button.is-message .plan-share-social-icon { color: #a77d32; }

.plan-share-links {
    padding: 0;
    overflow: hidden;
}

.plan-share-list {
    display: grid;
}

.plan-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    padding: 15px 16px;
    background: rgba(255, 253, 249, 0.38);
}

.plan-share-row + .plan-share-row {
    border-top: 1px solid rgba(113, 88, 47, 0.12);
}

.plan-share-row-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.plan-share-row-icon {
    color: #21394b;
}

.plan-share-row-summary {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.plan-share-row-title-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.plan-share-row-title-line strong {
    color: #1e2b3a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
}

.plan-share-row-state,
.plan-share-community-state {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(90, 147, 83, 0.16);
    color: #47763f;
    font-size: 0.65rem;
    font-weight: 750;
    line-height: 1.2;
}

.plan-share-community-state[data-state="unpublished"] {
    background: rgba(195, 137, 39, 0.13);
    color: #986a1e;
}

.plan-share-row-meta {
    color: rgba(53, 51, 47, 0.62);
    font-size: 0.7rem;
}

.plan-share-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.plan-share-row-role {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border-radius: 9px;
    background: rgba(71, 93, 79, 0.08);
}

.plan-share-row-role button,
.plan-share-revoke,
.plan-share-conflict-action {
    min-height: 32px;
    border-radius: 8px;
    box-shadow: none;
    transform: none;
}

.plan-share-row-role button {
    padding: 3px 9px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(43, 36, 24, 0.64);
    font-size: 0.69rem;
}

.plan-share-row-role button.active {
    border-color: rgba(191, 132, 35, 0.34);
    background: rgba(255, 252, 244, 0.97);
    color: #8a5d12;
    font-weight: 750;
}

.plan-share-revoke {
    padding: 0 9px;
    border-color: rgba(183, 68, 55, 0.2);
    background: rgba(255, 248, 244, 0.78);
    color: #b23e35;
    font-size: 0.69rem;
}

.plan-share-row-link {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(52, 93, 74, 0.1);
    border-radius: 9px;
    background: rgba(248, 246, 238, 0.68);
    box-shadow: none;
    color: rgba(32, 86, 66, 0.96);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    line-height: 1.25;
    text-align: left;
    transform: none;
}

.plan-share-row-link:hover {
    border-color: rgba(52, 118, 88, 0.22);
    background: rgba(250, 250, 245, 0.96);
    color: #176844;
    transform: none;
}

.plan-share-row-link-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(32, 86, 66, 0.22);
    text-underline-offset: 2px;
}

.plan-share-row-link-action {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 750;
}

.plan-share-row.is-revoked {
    opacity: 0.62;
}

.plan-share-row.is-revoked .plan-share-row-state {
    background: rgba(130, 117, 94, 0.14);
    color: #756b5b;
}

.plan-share-status,
.plan-share-empty {
    margin: 0;
    padding: 10px 16px;
    color: rgba(66, 55, 36, 0.76);
    font-size: 0.75rem;
    line-height: 1.35;
}

.plan-share-create {
    width: calc(100% - 32px);
    min-height: 40px;
    margin: 4px 16px 14px;
    border: 1px solid rgba(190, 125, 28, 0.34);
    border-radius: 10px;
    background: rgba(255, 252, 244, 0.92);
    color: #8a5917;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 750;
}

.plan-share-create:hover:not(:disabled),
.plan-share-create:focus-visible:not(:disabled) {
    border-color: rgba(190, 125, 28, 0.58);
    background: #fffaf0;
    color: #6f430d;
}

.plan-share-create svg {
    width: 16px;
    height: 16px;
}

.plan-share-row + .plan-share-status,
.plan-share-status + .plan-share-conflict-action,
.plan-share-list + .plan-share-status {
    border-top: 1px solid rgba(113, 88, 47, 0.1);
}

.plan-share-status[data-status="conflict"],
.plan-share-status[data-status="error"] {
    color: #a73a2f;
}

.plan-share-status[data-status="created"] {
    color: #287248;
}

.plan-share-conflict-action {
    width: calc(100% - 32px);
    margin: 0 16px 14px;
}

.plan-share-community {
    display: grid;
    gap: 13px;
    padding: 16px;
}

.plan-share-community-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px 12px;
}

.plan-share-community-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.plan-share-community-feedback,
.plan-share-community-copy .is-feedback {
    color: #7b4d1f;
    font-size: 0.73rem;
    font-weight: 650;
}

.plan-share-community-cover {
    display: grid;
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(113, 88, 47, 0.12);
    border-radius: 12px;
    background: rgba(251, 248, 241, 0.68);
}

.plan-share-community-cover-heading strong {
    color: #25303d;
    font-size: 0.76rem;
}

.plan-share-community-cover-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 185px;
    align-items: center;
    gap: 12px;
}

.plan-share-community-cover-copy {
    min-width: 0;
}

.plan-share-community-cover-copy small,
.plan-share-community-cover-status {
    color: rgba(54, 52, 48, 0.67);
    font-size: 0.69rem;
    line-height: 1.4;
}

.plan-share-community-cover-preview {
    width: 100%;
    aspect-ratio: 16 / 8.8;
    border: 1px solid rgba(35, 79, 61, 0.2);
    border-radius: 9px;
    background: #0c1e31;
    object-fit: cover;
    box-shadow: 0 5px 12px rgba(26, 49, 39, 0.12);
}

.plan-share-community-cover-preview.is-placeholder {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(58, 81, 52, 0.74), rgba(14, 41, 52, 0.95)),
        #0c1e31;
    color: rgba(236, 211, 150, 0.75);
}

.plan-share-community-cover-preview.is-placeholder svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-share-community-cover-actions {
    display: grid;
    gap: 7px;
}

.plan-share-community-cover-actions button {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid rgba(54, 75, 69, 0.14);
    border-radius: 9px;
    background: rgba(255, 254, 251, 0.82);
    box-shadow: 0 4px 10px rgba(45, 38, 26, 0.04);
    color: rgba(35, 52, 62, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 0.68rem;
    font-weight: 650;
    text-align: left;
    transform: none;
}

.plan-share-community-cover-actions button.active {
    border-color: rgba(191, 132, 35, 0.45);
    background: #fffaf0;
    color: #8a5d12;
}

.plan-share-community-action {
    width: 100%;
    min-height: 54px;
    padding: 9px 16px;
    border: 1px solid rgba(204, 146, 48, 0.32);
    border-radius: 11px;
    background: linear-gradient(135deg, #10263b, #0b1b2c);
    box-shadow: 0 8px 18px rgba(8, 24, 38, 0.16);
    color: #edb64d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.86rem;
    font-weight: 750;
    transform: none;
}

.plan-share-links .guided-empty-state-actions {
    width: 100%;
}

.plan-share-links .guided-empty-state-primary,
.plan-share-community > .plan-share-community-action {
    width: min(100%, var(--plan-share-primary-action-width));
    justify-self: center;
    font: inherit;
    font-weight: 700;
    color: #fffaf0;
}

.plan-share-community-action svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.plan-share-community-action:not(:disabled):hover {
    border-color: rgba(230, 170, 69, 0.55);
    background: linear-gradient(135deg, #17334d, #0e2337);
    box-shadow: 0 10px 22px rgba(8, 24, 38, 0.22);
    transform: translateY(-1px);
}

.plan-share-community-action:disabled {
    opacity: 0.56;
}

.plan-share-community-action.is-withdraw {
    border-color: rgba(156, 70, 57, 0.2);
    background: rgba(255, 247, 242, 0.92);
    box-shadow: none;
    color: #9d4438;
}

.plan-share-community-publication-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.plan-share-community-publication-actions > :only-child {
    grid-column: 1 / -1;
}

.plan-share-community-hint {
    margin-top: -6px;
    color: rgba(126, 85, 25, 0.76);
    font-size: 0.68rem;
    text-align: center;
}

body[data-plan-share-role="viewer"] .tab-save:not(.tab-share),
body[data-plan-share-role="viewer"] .tab-add,
body[data-plan-share-role="viewer"] .tab-close,
body[data-plan-share-role="viewer"] .tab-selector-trigger,
body[data-plan-share-role="viewer"] [data-radial-action],
body[data-plan-share-role="viewer"] [data-toolbar-tool],
body[data-plan-share-role="viewer"] [data-delete-marker-id],
body[data-plan-share-role="viewer"] [data-delete-line-id],
body[data-plan-share-role="viewer"] [data-delete-shape-id],
body[data-plan-share-role="viewer"] [data-delete-image-id],
body[data-plan-share-role="viewer"] [data-delete-gallery-id],
body[data-plan-share-role="viewer"] [data-delete-search-id] {
    pointer-events: none;
    opacity: 0.45;
}

body[data-theme="dark"] .plan-share-panel {
    border-color: rgba(232, 207, 139, 0.2);
    background:
        radial-gradient(circle at 80% 0%, rgba(115, 108, 85, 0.15), transparent 42%),
        linear-gradient(145deg, rgba(36, 41, 37, 0.99), rgba(28, 34, 31, 0.99));
    color: rgba(249, 241, 220, 0.94);
}

body[data-theme="dark"] .plan-share-title,
body[data-theme="dark"] .plan-share-social-heading strong,
body[data-theme="dark"] .plan-share-community-copy strong,
body[data-theme="dark"] .plan-share-link-access > strong,
body[data-theme="dark"] .plan-share-community-access > strong,
body[data-theme="dark"] .plan-share-row-title-line strong {
    color: rgba(249, 241, 220, 0.96);
}

body[data-theme="dark"] .plan-share-invitation {
    background: linear-gradient(145deg, #263b32, #22332b);
    box-shadow:
        inset 0 0 0 1px rgba(143, 184, 154, 0.5),
        inset 4px 0 0 #8ab397;
}

body[data-theme="dark"] .plan-share-community {
    border-color: rgba(220, 177, 96, 0.52);
    background: linear-gradient(145deg, #3b3425, #332e23);
    box-shadow: inset 3px 0 0 #d3aa61;
}

body[data-theme="dark"] .plan-share-social > .plan-share-section-icon,
body[data-theme="dark"] .plan-share-social-heading strong {
    color: #b9dcc3;
}

body[data-theme="dark"] .plan-share-community-heading > .plan-share-section-icon,
body[data-theme="dark"] .plan-share-community-copy strong {
    color: #edca8b;
}

body[data-theme="dark"] .plan-share-links .guided-empty-state {
    border-color: transparent;
    background: rgba(8, 24, 17, 0.18);
    box-shadow: none;
}

body[data-theme="dark"] .plan-share-community-cover,
body[data-theme="dark"] .plan-share-community-access {
    border-color: rgba(232, 207, 139, 0.14);
    background: rgba(232, 207, 139, 0.055);
}

body[data-theme="dark"] .plan-share-social-heading span,
body[data-theme="dark"] .plan-share-community-copy > span,
body[data-theme="dark"] .plan-share-community-cover-copy small,
body[data-theme="dark"] .plan-share-community-cover-status,
body[data-theme="dark"] .plan-share-community-access > small,
body[data-theme="dark"] .plan-share-row-meta {
    color: rgba(249, 241, 220, 0.64);
}

body[data-theme="dark"] .plan-share-role-picker,
body[data-theme="dark"] .plan-share-row-role {
    background: rgba(232, 207, 139, 0.08);
}

body[data-theme="dark"] .plan-share-role-picker button,
body[data-theme="dark"] .plan-share-row-role button {
    color: rgba(249, 241, 220, 0.72);
}

body[data-theme="dark"] .plan-share-role-picker button.active,
body[data-theme="dark"] .plan-share-row-role button.active {
    border-color: rgba(224, 166, 68, 0.52);
    background: rgba(72, 65, 49, 0.96);
    color: #f0bd5e;
}

body[data-theme="dark"] .plan-share-social-button {
    border-color: rgba(232, 207, 139, 0.14);
    background: rgba(58, 55, 45, 0.7);
    color: rgba(249, 241, 220, 0.88);
}

body[data-theme="dark"] .plan-share-social-button.is-x .plan-share-social-icon {
    color: #f4f1e9;
}

body[data-theme="dark"] .plan-share-row {
    background: rgba(232, 207, 139, 0.025);
}

body[data-theme="dark"] .plan-share-row-link {
    border-color: rgba(160, 221, 194, 0.08);
    background: rgba(9, 30, 25, 0.25);
    color: rgba(160, 221, 194, 0.9);
}

body[data-theme="dark"] .plan-share-row-link:hover {
    background: rgba(232, 207, 139, 0.08);
}

body[data-theme="dark"] .plan-share-community-cover-actions button {
    border-color: rgba(232, 207, 139, 0.12);
    background: rgba(58, 55, 45, 0.7);
    color: rgba(249, 241, 220, 0.8);
}

body[data-theme="dark"] .plan-share-community-cover-actions button.active {
    border-color: rgba(224, 166, 68, 0.48);
    background: rgba(82, 67, 38, 0.86);
    color: #f0bd5e;
}

body[data-theme="dark"] .plan-share-drag-handle,
body[data-theme="dark"] .plan-share-close {
    border-color: rgba(232, 207, 139, 0.14);
    background: rgba(58, 55, 45, 0.58);
    color: rgba(249, 241, 220, 0.9);
}

@media (any-pointer: coarse) {
    .plan-share-close,
    .plan-share-drag-handle,
    .plan-share-role-picker button,
    .plan-share-row-role button,
    .plan-share-row-link,
    .plan-share-revoke,
    .plan-share-conflict-action {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 700px) {
    .plan-share-panel {
        width: min(620px, calc(100vw - 20px));
        max-height: calc(100dvh - 20px);
        padding: 17px;
        gap: 14px;
        border-radius: 18px;
    }

    .plan-share-community-cover-layout {
        grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1fr);
    }

    .plan-share-community-cover-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .plan-share-title {
        font-size: 1.3rem;
    }

    .plan-share-social-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plan-share-social-button {
        min-height: 88px;
    }

    .plan-share-community-heading {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .plan-share-community-heading > :last-child {
        grid-column: 2;
    }

    .plan-share-community-cover-layout {
        grid-template-columns: 1fr;
    }

    .plan-share-community-cover-preview {
        width: min(100%, 320px);
    }

    .plan-share-community-cover-actions {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .plan-share-panel {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        padding: 14px;
        gap: 12px;
        border-radius: 16px;
    }

    .plan-share-drag-handle,
    .plan-share-close {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        flex-basis: 36px;
    }

    .plan-share-social,
    .plan-share-community {
        padding: 13px;
    }

    .plan-share-row {
        grid-template-columns: 1fr;
        padding: 13px;
    }

    .plan-share-row-actions,
    .plan-share-row-link {
        grid-column: 1;
    }

    .plan-share-row-actions {
        justify-content: space-between;
    }

    .plan-share-row-role {
        flex: 1 1 auto;
    }

    .plan-share-row-role button {
        padding-inline: 6px;
    }

    .plan-share-community-publication-actions,
    .plan-share-community-cover-actions {
        grid-template-columns: 1fr;
    }
}


.guided-empty-state {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 22px;
    border: 1px solid rgba(123, 96, 52, 0.24);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 251, 240, 0.97), rgba(239, 226, 195, 0.96));
    box-shadow: 0 14px 34px rgba(35, 25, 12, 0.2);
    color: #302719;
    text-align: center;
}

.guided-empty-state[hidden] {
    display: none !important;
}

.guided-empty-state-dismissed > .guided-empty-state {
    display: none !important;
}

.guided-empty-state-close,
.contextual-onboarding-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: currentColor;
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.64;
}

.guided-empty-state-close::before,
.contextual-onboarding-close::before {
    content: "×";
}

.guided-empty-state-close:hover,
.guided-empty-state-close:focus-visible,
.contextual-onboarding-close:hover,
.contextual-onboarding-close:focus-visible {
    background: rgba(82, 109, 91, 0.12);
    opacity: 1;
}

.guided-empty-state-illustration {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(89, 112, 80, 0.12);
    color: #4c6757;
    font-size: 1.3rem;
}

.guided-empty-state-title {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.25;
}

.guided-empty-state-description {
    margin: 5px 0 0;
    color: rgba(48, 39, 25, 0.74);
    font-size: 0.82rem;
    line-height: 1.45;
}

.guided-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.guided-empty-state-primary {
    border: 1px solid #526d5b;
    border-radius: 9px;
    background: #526d5b;
    color: #fffaf0;
    font-weight: 700;
}

.guided-empty-state-secondary {
    border: 1px solid rgba(82, 109, 91, 0.4);
    border-radius: 9px;
    background: transparent;
    color: #405849;
}

.contextual-onboarding {
    --contextual-onboarding-navy: #102b45;
    --contextual-onboarding-gold: #bd8d32;
    position: fixed;
    z-index: 5600;
    top: var(--onboarding-top, 24px);
    left: var(--onboarding-left, 24px);
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    width: min(390px, calc(100vw - 24px));
    padding: 18px 42px 17px 16px;
    border: 1px solid rgba(189, 141, 50, 0.56);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 252, 244, 0.99), rgba(246, 235, 207, 0.99));
    box-shadow: 0 12px 28px rgba(38, 27, 12, 0.2), inset 0 1px rgba(255, 255, 255, 0.7);
    color: #2d2519;
    pointer-events: auto;
    backdrop-filter: blur(12px);
}

.contextual-onboarding.hidden {
    display: none !important;
}

.contextual-onboarding-compass {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(189, 141, 50, 0.72);
    border-radius: 50%;
    background: var(--contextual-onboarding-navy);
    box-shadow: 0 3px 8px rgba(16, 43, 69, 0.22);
    color: var(--contextual-onboarding-gold);
}

.contextual-onboarding-compass svg {
    width: 24px;
    height: 24px;
    overflow: visible;
}

.contextual-onboarding-compass circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
}

.contextual-onboarding-compass-point {
    fill: rgba(255, 248, 232, 0.18);
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1;
}

.contextual-onboarding-compass-needle {
    fill: #fff8e8;
    stroke: none;
}

.contextual-onboarding-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.contextual-onboarding-progress {
    display: block;
    margin-bottom: 5px;
    color: #8a6729;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contextual-onboarding-title {
    display: block;
    width: 100%;
    padding-right: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.25;
}

.contextual-onboarding-description {
    width: 100%;
    margin: 6px 0 0;
    color: rgba(48, 39, 25, 0.76);
    font-size: 0.82rem;
    line-height: 1.45;
}

.contextual-onboarding-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    align-self: flex-end;
    margin-top: 14px;
    padding: 7px 17px;
    border: 1px solid var(--contextual-onboarding-gold);
    border-radius: 9px;
    background: #102b45;
    box-shadow: 0 4px 10px rgba(16, 43, 69, 0.2);
    color: #fff8e8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.contextual-onboarding-next:hover,
.contextual-onboarding-next:focus-visible {
    background: #183d5f;
    box-shadow: 0 5px 13px rgba(16, 43, 69, 0.28);
    transform: translateY(-1px);
}

.contextual-onboarding-close {
    color: var(--contextual-onboarding-navy);
}

.contextual-onboarding-close:hover,
.contextual-onboarding-close:focus-visible {
    background: rgba(189, 141, 50, 0.14);
}

.contextual-onboarding:not([data-placement="overlay"])::after {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #f6ebcf;
    content: "";
}

.contextual-onboarding[data-placement="above"]::after {
    top: 100%;
    left: var(--onboarding-pointer-left);
    border-right: 1px solid rgba(189, 141, 50, 0.56);
    border-bottom: 1px solid rgba(189, 141, 50, 0.56);
    transform: translate(-50%, -9px) rotate(45deg);
}

.contextual-onboarding[data-placement="below"]::after {
    bottom: 100%;
    left: var(--onboarding-pointer-left);
    border-top: 1px solid rgba(189, 141, 50, 0.56);
    border-left: 1px solid rgba(189, 141, 50, 0.56);
    transform: translate(-50%, 9px) rotate(45deg);
}

.contextual-onboarding[data-placement="right"]::after {
    top: var(--onboarding-pointer-top);
    right: 100%;
    border-bottom: 1px solid rgba(189, 141, 50, 0.56);
    border-left: 1px solid rgba(189, 141, 50, 0.56);
    transform: translate(9px, -50%) rotate(45deg);
}

.contextual-onboarding[data-placement="left"]::after {
    top: var(--onboarding-pointer-top);
    left: 100%;
    border-top: 1px solid rgba(189, 141, 50, 0.56);
    border-right: 1px solid rgba(189, 141, 50, 0.56);
    transform: translate(-9px, -50%) rotate(45deg);
}

.settings-section-static-heading {
    font-weight: 700;
}

.settings-help-row {
    display: grid;
    gap: 10px;
    padding: 12px 0 4px;
    color: rgba(48, 39, 25, 0.7);
    font-size: 0.82rem;
}

body[data-theme="dark"] .guided-empty-state,
body[data-theme="dark"] .contextual-onboarding {
    border-color: rgba(224, 198, 139, 0.24);
    background: linear-gradient(145deg, rgba(42, 39, 31, 0.97), rgba(55, 48, 35, 0.98));
    color: #f2e7cf;
}

body[data-theme="dark"] .guided-empty-state-description,
body[data-theme="dark"] .contextual-onboarding-description,
body[data-theme="dark"] .contextual-onboarding-progress {
    color: rgba(242, 231, 207, 0.72);
}

body[data-theme="dark"] .contextual-onboarding::after {
    background: #373023;
}

body[data-theme="dark"] .contextual-onboarding-close {
    color: #f1d493;
}

@media (max-width: 1024px), (any-pointer: coarse) {
    .guided-empty-state button,
    .contextual-onboarding button {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}

@media (max-width: 700px) {
    .contextual-onboarding {
        grid-template-columns: 30px minmax(0, 1fr);
        width: min(360px, calc(100vw - 24px));
        max-height: min(46vh, 320px);
        padding: 14px 38px 14px 14px;
        overflow: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contextual-onboarding * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


@media (max-width: 1180px) {
    :root {
        --hud-sidebar-width: 248px;
        --hud-panel-width: 320px;
        --hud-panel-top: 82px;
    }

    .toolbar {
        padding: 13px;
    }

    .tab-list {
        max-width: min(520px, 68vw);
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tab-list::-webkit-scrollbar {
        display: none;
    }

    .tab-selector-shell {
        flex: 0 0 auto;
    }
}

@media (any-pointer: coarse) {
    .draggable-panel {
        touch-action: pan-y;
    }

    .panel-drag-handle,
    .panel-resize-handle {
        display: none;
        touch-action: none;
    }

    select,
    input,
    textarea,
    button {
        touch-action: manipulation;
    }

    :where(
        button,
        [role="button"],
        [role="menuitem"],
        summary,
        select,
        textarea,
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])
    ) {
        min-height: 44px !important;
    }

    :where(
        button,
        [role="button"],
        [role="menuitem"],
        summary,
        .icon-button,
        .panel-close-button,
        .maplibregl-ctrl-group button,
        .maplibregl-ctrl-attrib-button
    ) {
        min-width: 44px !important;
    }

    /* Match the adjacent 22px MapLibre credit visually while preserving a
       44px-high touch target around the compact Feedback control. */
    .maphora-feedback-trigger {
        min-height: 22px !important;
    }

    .maphora-feedback-trigger::before {
        content: "";
        position: absolute;
        inset: -11px 0;
    }

    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px !important;
    }

    .active-riddle-badge-toggle {
        width: 20px;
        min-width: 20px !important;
        height: 42px;
        min-height: 42px !important;
        bottom: auto;
    }

    .active-riddle-badge-toggle::before {
        content: "";
        position: absolute;
        inset: 0 -8px;
    }

    /* On touch devices the workspace bar is dense. Keep the account entry as
     * a single, stable avatar target instead of allowing its label and chevron
     * to push it beyond the toolbar edge. */
    .top-bar .player-session-button {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 999px;
    }

    .top-bar .player-session-button::after {
        display: none;
    }

    .top-bar #player-session-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

}

@media (max-width: 1024px) {
    html {
        background-color: var(--maphora-navy, #0c1b2e);
    }

    html,
    body {
        height: 100dvh;
        min-height: 100svh;
    }

    /* Safari 26 derives its status-bar fill from the document background and
       clips fixed fullscreen surfaces above its floating toolbar. Use the
       large viewport for the map surface itself so imagery continues below
       the toolbar while controls remain protected by the safe-area rules. */
    @supports (height: 100lvh) {
        html,
        body {
            height: 100lvh;
        }

        body[data-immersive-view="focus"] #map {
            position: absolute;
            top: 0;
            right: 0;
            bottom: auto;
            left: 0;
            height: 100lvh;
            border-top: env(safe-area-inset-top) solid var(--maphora-navy, #0c1b2e);
        }
    }

    .hud {
        inset:
            env(safe-area-inset-top)
            env(safe-area-inset-right)
            env(safe-area-inset-bottom)
            env(safe-area-inset-left);
    }

    .panel {
        border-radius: 14px;
    }

    .panel-drag-handle,
    .panel-resize-handle {
        display: none;
    }

    .top-bar {
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: 50% !important;
        width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        min-width: 0;
        box-sizing: border-box;
        min-height: 0;
        padding: 6px;
        gap: 6px;
        flex-wrap: wrap;
        transform: translateX(-50%) !important;
        overflow: visible;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .top-bar::-webkit-scrollbar {
        display: none;
    }

    .top-bar.has-open-tab-menu,
    .top-bar.has-open-riddle-menu,
    .top-bar.has-open-plan-actions-menu {
        overflow: visible;
        z-index: 5600;
    }

    .top-bar-riddle-divider,
    .top-bar-divider {
        display: none;
    }

    .tab-list {
        order: 5;
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tab-selector-shell {
        flex: 0 0 auto;
    }

    .tab-list::-webkit-scrollbar {
        display: none;
    }

    .top-bar.has-open-tab-menu .tab-list,
    .top-bar.has-open-riddle-menu .tab-list,
    .top-bar.has-open-plan-actions-menu .tab-list {
        overflow: visible;
    }

    .tab-switcher-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 0;
        width: min(300px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: min(52dvh, 360px);
        overflow-y: auto;
        z-index: 5600;
    }

    .top-bar-actions,
    .top-bar-tab-actions {
        gap: 5px;
    }

    .top-bar-actions {
        margin-left: auto;
    }

    .map-search-bar {
        display: none;
    }

    .map-search-bar.is-search-mode {
        /* Floating-panel adaptation writes inline coordinates during viewport
           changes. Keep the tablet search surface centered after rotation. */
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(385px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        min-width: 0;
        display: block;
        transform: translate(-50%, -50%);
    }

    .map-search-dismiss {
        display: grid;
    }

    .map-search-shortcut {
        display: none;
    }

    .top-bar-icon-button,
    .top-bar .icon-button,
    .tab-save,
    .tab-close,
    .tab-add {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    #toggle-window-mode {
        display: none;
    }

    .immersive-view-toggle {
        min-width: 58px;
        min-height: 32px;
        padding-inline: 9px;
        border-radius: 999px;
    }

    .tab-selector {
        max-width: min(420px, calc(100vw - 24px));
    }

    .tab-selector-trigger,
    .tab-title-input,
    .tab-selector-input {
        max-width: min(44vw, 260px);
    }

    .active-riddle-badge {
        flex-basis: 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        margin: 0;
    }

    .active-riddle-badge-entry,
    .active-riddle-badge-card {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    .active-riddle-badge-actions {
        left: 0;
        transform: none;
        gap: 6px;
    }

    .active-riddle-badge-action {
        min-width: 142px;
        padding: 8px 12px;
    }

    .toolbar {
        top: auto !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        left: 10px !important;
        width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        max-height: min(22dvh, 180px);
        padding: 6px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .toolbar .panel-header-row {
        display: none;
    }

    .toolbar-primary-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin-top: 0;
    }

    .toolbar-primary-action-button {
        min-height: 38px;
        padding: 6px 6px 6px 28px;
        border-radius: 11px;
        font-size: 0.74rem;
        line-height: 1.15;
    }

    .toolbar-primary-action-icon {
        left: 8px;
        width: 16px;
        height: 16px;
    }

    .toolbar-primary-action-icon-map {
        width: 18px;
        height: 18px;
    }

    .toolbar-section {
        gap: 5px;
        margin-top: 6px;
        padding-top: 0;
        border-top: 0;
    }

    .toolbar-section-toggle {
        min-height: 30px;
        padding: 0 10px;
        border-radius: 10px;
        background: rgba(255, 250, 237, 0.28);
        border: 1px solid rgba(88, 69, 37, 0.08);
    }

    .toolbar-section-toggle:hover,
    .toolbar-section-toggle:focus-visible {
        background: rgba(255, 250, 237, 0.38);
    }

    .toolbar-section-body {
        gap: 6px;
    }

    .toolbar-section-body > .button-stack {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 5px;
    }

    .toolbar .tool-button,
    .toolbar button:not(.app-version-button):not(.toolbar-section-toggle):not(.shape-palette-item) {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 0.73rem;
        line-height: 1.15;
    }

    .shape-palette {
        gap: 6px;
        padding: 8px;
    }

    .shape-palette-item {
        min-height: 62px;
        padding: 6px 4px;
    }

    .shape-palette-icon {
        width: 30px;
        height: 30px;
    }

    .gallery-list {
        max-height: 116px;
    }

    .inspector:not(.riddle-gallery-panel):not(.decryption-panel) {
        --inspector-panel-compact-height: min(46dvh, 340px);
        top: auto !important;
        right: 12px !important;
        bottom: calc(var(--compact-toolbar-clearance, calc(min(22dvh, 180px) + 16px)) + 10px + env(safe-area-inset-bottom)) !important;
        left: auto !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-height: var(--inspector-panel-compact-height);
        padding: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #inspector-panel.inspector .panel-header-row {
        padding: 12px 12px 0;
    }

    #inspector-panel.inspector > .selection-list {
        max-height: calc(var(--inspector-panel-compact-height) - 56px);
        padding: 0 8px 12px 12px;
    }

    #inspector-panel.inspector.has-expanded-properties {
        height: var(--inspector-panel-compact-height);
    }

    .search-panel-body input,
    .search-panel-body select,
    .search-panel-body button {
        min-height: 44px;
    }

    .status-bar {
        display: none;
    }

    .map-layer-control {
        right: 12px;
        bottom: calc(var(--compact-toolbar-clearance, calc(min(22dvh, 180px) + 8px)) + 12px);
    }

    .map-layer-menu {
        width: min(280px, calc(100vw - 32px));
        max-height: calc(100dvh - var(--compact-toolbar-clearance, calc(min(22dvh, 180px) + 8px)) - 96px);
        overflow-y: auto;
    }

    .riddle-gallery-panel {
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 104px);
    }
}

@media (max-width: 1024px) and (any-pointer: coarse) {
    .top-bar-icon-button,
    .top-bar .icon-button,
    .tab-save,
    .tab-close,
    .tab-add,
    .player-session-button,
    .active-riddle-badge {
        width: 44px;
        min-width: 44px;
        max-width: none;
        height: 44px;
        min-height: 44px;
    }

    .immersive-view-toggle {
        min-height: 44px;
    }
}

@media (any-pointer: coarse) {
    .map-search-bar {
        display: none;
    }

    .map-search-bar.is-search-mode {
        /* Rotation can leave adaptive floating-panel coordinates inline. */
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(385px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        min-width: 0;
        display: block;
        transform: translate(-50%, -50%);
    }

    .map-search-dismiss {
        display: grid;
    }

    .map-search-shortcut {
        display: none;
    }

    #search-panel .map-search-bar {
        position: static;
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
        display: flex;
    }
}

/* Product chrome is intentionally desktop-only. Compact phones and tablets
   keep the map edge clear for their dedicated navigation surfaces. */
@media (max-width: 720px),
       (any-pointer: coarse) and (min-width: 700px) and (max-width: 1366px) {
    .map-footer-credits,
    .map-scale-feedback {
        display: none !important;
    }
}

@media (any-pointer: coarse) and (orientation: landscape) and (min-width: 1025px) and (max-width: 1366px) and (max-height: 1024px) {
    .top-bar {
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: 50% !important;
        width: max-content !important;
        max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        transform: translateX(-50%) !important;
    }

    #inspector-panel.inspector {
        --inspector-panel-compact-height: calc(100dvh - 112px);
        max-height: var(--inspector-panel-compact-height);
    }

    #inspector-panel.inspector.has-expanded-properties {
        height: var(--inspector-panel-compact-height);
    }

    #inspector-panel.inspector > .selection-list {
        max-height: none;
        overflow-y: auto;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .toolbar-primary-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #inspector-panel.inspector:not(.riddle-gallery-panel):not(.decryption-panel) {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (max-width: 720px) {
    .tab-switcher-option {
        min-height: 44px;
        padding-right: 52px;
    }

    .tab-switcher-close,
    .tab-switcher-row:hover .tab-switcher-close,
    .tab-switcher-row:focus-within .tab-switcher-close {
        right: 2px;
        width: 44px;
        height: 44px;
        opacity: 1;
        pointer-events: auto;
    }

    .top-bar .plan-actions-menu-toggle.tab-save {
        display: inline-grid;
        place-items: center;
    }

    .top-bar-tab-actions,
    .plan-actions-menu {
        position: static;
    }

    .plan-actions-menu-dots {
        letter-spacing: 2px;
        transform: translateX(1px);
    }

    .plan-actions-menu-content {
        position: absolute;
        top: calc(100% + 8px);
        right: 8px;
        z-index: 5700;
        display: none;
        width: min(300px, calc(100vw - 24px));
        padding: 7px;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        border: 1px solid rgba(225, 183, 92, 0.34);
        border-radius: 14px;
        color: rgba(247, 244, 238, 0.9);
        background: linear-gradient(165deg, rgba(19, 38, 60, 0.985), rgba(8, 20, 34, 0.985) 74%);
        box-shadow: 0 16px 36px rgba(3, 10, 19, 0.38);
        backdrop-filter: blur(14px);
    }

    .plan-actions-menu.is-open .plan-actions-menu-content {
        display: flex;
    }

    .top-bar .plan-actions-menu-content :is(.tab-add, .tab-close, .tab-save) {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 44px;
        flex: 1 1 auto;
        padding: 9px 11px;
        display: flex;
        place-items: normal;
        align-items: center;
        justify-content: flex-start;
        gap: 11px;
        border-color: rgba(247, 244, 238, 0.11);
        color: rgba(247, 244, 238, 0.88);
        background: rgba(247, 244, 238, 0.065);
        text-align: left;
        font-size: 0.95rem;
    }

    .top-bar .plan-actions-menu-content :is(.tab-add, .tab-save):is(:hover, :focus-visible):not(:disabled) {
        border-color: rgba(225, 183, 92, 0.44);
        color: #f2ca72;
        background: linear-gradient(180deg, rgba(226, 181, 84, 0.15), rgba(191, 142, 47, 0.08));
    }

    .top-bar .plan-actions-menu-content :is(.tab-add, .tab-close, .tab-save) svg,
    .plan-action-symbol {
        flex: 0 0 auto;
    }

    .plan-action-symbol {
        width: 20px;
        font-size: 25px;
        line-height: 20px;
        text-align: center;
    }

    .plan-actions-menu-content .top-bar-plan-divider {
        display: none;
    }

    .plan-actions-menu-content .map-view-switches {
        position: static;
        z-index: auto;
        order: -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin: 0 0 4px;
        gap: 5px;
        align-items: stretch;
        justify-content: stretch;
        justify-items: stretch;
        color: rgba(247, 244, 238, 0.72);
        pointer-events: auto;
    }

    .plan-actions-menu-content .map-view-switch-module-workspace {
        display: none;
    }

    .plan-actions-menu-content .map-view-switch-module {
        width: 100%;
        box-sizing: border-box;
        border-radius: 11px;
        background: rgba(247, 244, 238, 0.055);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    }

    .plan-actions-menu-content :is(.map-view-switch-module-appearance, .map-view-switch-module-gallery, .map-view-switch-module-tools) {
        position: static;
        height: auto;
    }

    .plan-actions-menu-content .map-view-switch {
        flex: 1 1 auto;
    }

    .plan-actions-menu-content .map-view-switch-module-map .map-dimension-toggle {
        flex: 2 1 0;
    }

    .plan-actions-menu-content .map-view-switch-module-map :is(.map-globe-toggle, .solar-system-entry-toggle) {
        flex: 1 1 0;
    }

    .plan-actions-menu-content .map-view-switch-option {
        flex: 1 1 auto;
        min-height: 38px;
    }

    .plan-actions-menu-content .map-view-switch[data-tooltip]::after {
        display: none;
    }

    .plan-action-label {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body[data-theme="dark"] .plan-actions-menu-content {
        border-color: rgba(237, 228, 210, 0.14);
        background: rgba(21, 28, 32, 0.96);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
    }

    .top-bar {
        align-items: center;
        border-radius: 18px;
    }

    .tab-list {
        padding-top: 1px;
    }

    #player-session-chip {
        display: none !important;
    }

    .toolbar {
        max-height: min(34dvh, 248px);
    }

    .inspector:not(.riddle-gallery-panel):not(.decryption-panel),
    .search-panel {
        --inspector-panel-compact-height: min(42dvh, 330px);
        right: 8px !important;
        bottom: calc(var(--compact-toolbar-clearance, calc(min(34dvh, 248px) + 10px)) + 8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        width: auto !important;
        max-height: var(--inspector-panel-compact-height);
        border-radius: 18px;
    }

    #inspector-panel.inspector {
        padding: 0;
        overflow: visible;
        pointer-events: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    #inspector-panel.inspector .panel-header-row {
        display: none;
    }

    #inspector-panel.inspector > .selection-list {
        max-height: var(--inspector-panel-compact-height);
        padding: 0;
        overflow-y: auto;
        pointer-events: auto;
    }

    #inspector-panel.inspector .marker-browser-card {
        background: linear-gradient(180deg, #fffdf6, #efe2c2);
        border-color: rgba(88, 69, 37, 0.18);
        box-shadow:
            0 14px 30px rgba(24, 19, 10, 0.18),
            inset 0 1px 0 rgba(255, 250, 237, 0.62);
    }

    body[data-theme="dark"] #inspector-panel.inspector .marker-browser-card {
        background: linear-gradient(180deg, #1e262b, #141b1f);
        border-color: rgba(237, 228, 210, 0.16);
        box-shadow:
            0 14px 30px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 248, 235, 0.08);
    }

    .map-layer-control {
        right: 10px;
        bottom: calc(var(--compact-toolbar-clearance, calc(min(34dvh, 248px) + 8px)) + 10px);
    }

}

@media (max-width: 640px) {
    .map-search-bar.is-search-mode {
        right: auto;
        left: 50%;
        width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-width: none;
        transform: translate(-50%, -50%);
    }

    .top-bar {
        top: calc(8px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: 50% !important;
        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        transform: translateX(-50%) !important;
        padding: 7px;
        gap: 8px;
        flex-wrap: nowrap;
        /* Safari can paint translucent children outside a rounded backdrop-filter surface. */
        overflow: hidden;
    }

    .top-bar.panel {
        padding: 7px;
        gap: 8px;
    }

    .top-bar .tab-list {
        order: initial;
        display: flex;
        flex: 1 1 0%;
        max-width: none;
        min-width: 0;
        overflow-x: visible;
    }

    .top-bar .tab-selector-shell {
        flex: 1 1 0%;
        max-width: 100%;
        min-width: 0;
    }

    .top-bar .tab-selector {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .top-bar :is(.tab-selector-trigger, .tab-title-input, .tab-selector-input) {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
    }

    .top-bar .tab-selector-toggle {
        width: 44px;
        min-width: 44px;
        flex: 0 0 44px;
    }

    .top-bar-actions {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .top-bar-tab-actions {
        flex: 0 0 44px;
        gap: 4px;
    }

    .top-bar .plan-actions-menu-toggle.tab-save {
        width: 44px;
        min-width: 44px;
        flex: 0 0 44px;
    }

    #toggle-window-mode,
    #quit-app {
        display: none;
    }

    .immersive-view-toggle {
        min-width: 48px;
        max-width: 58px;
        padding-inline: 7px;
        font-size: 0.72rem;
    }

    .player-session-button {
        min-height: 34px;
        width: 38px;
        max-width: 38px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 999px;
    }

    .player-avatar-session {
        width: 26px;
        height: 26px;
    }

    .player-session-button::after {
        display: none;
    }

    #player-session-label {
        display: none;
    }

    .player-account-menu {
        max-width: calc(100vw - 24px);
    }

    .tab-add,
    .tab-save,
    .tab-close {
        width: 29px;
        height: 29px;
    }

    .toolbar {
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        left: 8px !important;
        width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        padding: 6px;
    }

    .toolbar-primary-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .toolbar-primary-action-button {
        min-height: 36px;
        padding: 5px 5px 5px 25px;
        font-size: 0.69rem;
    }

    .toolbar-primary-action-icon {
        left: 6px;
        width: 15px;
        height: 15px;
    }

    .toolbar-section-body > .button-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #riddle-gallery-panel.riddle-gallery-panel {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none;
        border-radius: 0;
    }
}

@media (min-width: 700px) and (min-height: 600px) and (max-width: 1024px) and (orientation: landscape) {
    #toggle-window-mode {
        display: inline-flex;
    }
}

@media (max-width: 420px) {
    .immersive-view-toggle {
        display: none;
    }
}

@media (max-width: 380px) {
    .toolbar-primary-action-button {
        padding-right: 4px;
        padding-left: 22px;
        font-size: 0.66rem;
    }

    .toolbar-primary-action-icon {
        left: 5px;
    }
}

@media (max-width: 1024px) and (max-height: 520px) {
    .top-bar {
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }

    .toolbar {
        max-height: min(46vh, 210px);
    }

    .inspector:not(.riddle-gallery-panel):not(.decryption-panel),
    .search-panel {
        --inspector-panel-compact-height: calc(100dvh - 96px);
        max-height: var(--inspector-panel-compact-height);
    }

    #inspector-panel.inspector > .selection-list {
        max-height: var(--inspector-panel-compact-height);
    }
}
@media (max-width: 720px) {
    .plan-appearance-panel {
        z-index: 5460;
        top: max(68px, env(safe-area-inset-top));
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100dvh - 82px - env(safe-area-inset-bottom));
    }

    .plan-appearance-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .plan-appearance-choice-grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 430px) {
    .plan-appearance-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-appearance-choice-grid-three {
        grid-template-columns: 1fr;
    }
}


/* Premium radial launchers for map tools and map options. */

:root {
    --radial-launcher-bottom: 18px;
    --radial-launcher-left: 18px;
    --radial-launcher-right: 18px;
    --radial-main-size: 72px;
    --map-options-main-width: 126px;
    --radial-item-size: 56px;
    --radial-label-gap: 16px;
    --radial-label-width: 104px;
    --radial-main-column-x: 0px;
    --radial-stack-direction: -1;
    --radial-main-stack-gap: clamp(20px, 2.2vh, 28px);
    --radial-main-stack-first-y: calc((var(--radial-main-size) + var(--radial-item-size)) / 2 + var(--radial-main-stack-gap));
    --radial-main-stack-step: calc(var(--radial-item-size) + var(--radial-main-stack-gap));
    --radial-sub-anchor-offset-x: calc(var(--radial-label-width) * 0.78 + var(--radial-label-gap));
    --radial-radius-x: clamp(112px, 10vw, 156px);
    --radial-radius-y: clamp(70px, 12vh, 112px);
    --radial-subitem-size: 50px;
    --radial-sub-label-gap: 14px;
    --radial-sub-label-width: 132px;
    --radial-sub-radius-x: clamp(104px, 8vw, 136px);
    --radial-sub-column-x-scale: 1;
    --radial-sub-step-y: 54px;
    --radial-submenu-viewport-shift-y: 0px;
    --radial-duration: 260ms;
    --radial-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
    --radial-z-index: 5450;
    --radial-label-bg:
        radial-gradient(ellipse at 18% 0%, rgba(255, 231, 154, 0.18), rgba(255, 231, 154, 0) 46%),
        linear-gradient(180deg, rgba(45, 38, 28, 0.9), rgba(24, 27, 25, 0.86) 48%, rgba(12, 15, 16, 0.82));
    --radial-label-bg-hover:
        radial-gradient(ellipse at 20% 0%, rgba(255, 232, 160, 0.25), rgba(255, 232, 160, 0) 48%),
        linear-gradient(180deg, rgba(56, 46, 32, 0.94), rgba(28, 31, 28, 0.9) 48%, rgba(13, 17, 17, 0.86));
    --radial-label-border: rgba(214, 158, 74, 0.42);
    --radial-label-border-hover: rgba(250, 218, 150, 0.58);
    --radial-label-shadow:
        0 13px 24px rgba(2, 5, 6, 0.3),
        0 0 0 1px rgba(92, 59, 24, 0.22),
        inset 0 1px 0 rgba(255, 244, 204, 0.18),
        inset 0 -10px 20px rgba(0, 0, 0, 0.18);
}

.map-radial-launcher {
    position: absolute;
    bottom: calc(var(--radial-launcher-bottom) + env(safe-area-inset-bottom));
    left: calc(var(--radial-launcher-left) + env(safe-area-inset-left));
    z-index: var(--radial-z-index);
    width: calc(var(--radial-main-size) + var(--radial-radius-x) + (var(--radial-sub-radius-x) * 2) + (var(--radial-sub-label-width) * 2) + 92px);
    height: calc(var(--radial-main-size) + (var(--radial-radius-y) * 3.16) + var(--radial-main-stack-step) + (var(--radial-sub-step-y) * 1.3) + 18px);
    pointer-events: none;
    color: #f4d99c;
    isolation: isolate;
}

/* The current Tools control adopts this launcher's submenu tree at startup.
   Keep the legacy compass facade out of the rendered UI at every viewport. */
#map-radial-launcher {
    display: none;
}

.map-radial-launcher.is-surface-switching *,
.map-radial-launcher.is-surface-switching *::before,
.map-radial-launcher.is-surface-switching *::after {
    transition: none !important;
    animation: none !important;
}

/* Chromium/WebView2 can corrupt intermediate textures when filtered launcher
   descendants are transformed over the WebGL map. Shadows stay on stable
   boxes; moving descendants do not create filtered compositor surfaces. */
.map-radial-launcher *,
.map-radial-launcher *::before,
.map-radial-launcher *::after {
    filter: none !important;
}

body[data-immersive-view="immersive"] .map-radial-launcher {
    width: var(--radial-main-size);
    height: var(--radial-main-size);
    pointer-events: auto;
    overflow: visible;
}

.map-radial-options-launcher {
    left: auto;
    right: calc(var(--radial-launcher-right) + env(safe-area-inset-right));
}

.map-radial-options-launcher .map-radial-main {
    inset: auto 0 0 auto;
}

.map-radial-main,
.map-radial-item,
.map-radial-pin {
    -webkit-tap-highlight-color: transparent;
}

.map-radial-main {
    position: absolute;
    inset: auto auto 0 0;
    width: var(--radial-main-size);
    height: var(--radial-main-size);
    min-width: var(--radial-main-size);
    min-height: var(--radial-main-size);
    padding: 0;
    display: grid;
    place-items: center;
    pointer-events: auto;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: #f6d890;
    box-shadow: none;
    cursor: pointer;
    transition:
        transform 150ms var(--radial-ease),
        filter 150ms ease,
        color 150ms ease;
}

.map-radial-main:hover,
.map-radial-main:focus-visible,
.map-radial-main[aria-expanded="true"] {
    background: transparent;
    color: #ffe9af;
    box-shadow: none;
}

.map-radial-main:hover {
    transform: translateY(-1px);
}

.map-radial-main:active {
    transform: translateY(1px) scale(0.985);
}

.map-radial-main:focus-visible {
    outline: 2px solid rgba(246, 211, 139, 0.7);
    outline-offset: 4px;
}

.map-radial-main-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--radial-main-size) * 1.1);
    height: calc(var(--radial-main-size) * 1.1);
    display: block;
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 19px 30px rgba(3, 7, 9, 0.34))
        drop-shadow(0 5px 10px rgba(3, 7, 9, 0.28));
    transition:
        transform var(--radial-duration) var(--radial-ease),
        filter 150ms ease;
}

.map-radial-main:hover .map-radial-main-icon,
.map-radial-main:focus-visible .map-radial-main-icon,
.map-radial-main[aria-expanded="true"] .map-radial-main-icon {
    filter:
        brightness(1.06)
        saturate(1.08)
        drop-shadow(0 23px 36px rgba(3, 7, 9, 0.38))
        drop-shadow(0 0 15px rgba(245, 198, 103, 0.22));
}

.map-radial-launcher[data-radial-open="true"] .map-radial-main-icon {
    transform: translate(-50%, -50%) rotate(22deg) scale(0.98);
}

.map-radial-pin {
    position: absolute;
    bottom: 10px;
    left: calc(var(--radial-main-size) + 13px);
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    border-radius: 999px;
    border: 1px solid rgba(232, 210, 159, 0.22);
    background:
        linear-gradient(145deg, rgba(35, 37, 34, 0.94), rgba(12, 18, 20, 0.94)),
        linear-gradient(180deg, rgba(255, 245, 218, 0.1), rgba(255, 245, 218, 0));
    color: #f1d493;
    box-shadow:
        0 12px 22px rgba(2, 5, 6, 0.3),
        inset 0 1px 0 rgba(255, 250, 232, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-8px, 0, 0) scale(0.86) rotate(-12deg);
    transition:
        opacity 180ms ease,
        visibility 0s linear 180ms,
        transform 180ms var(--radial-ease),
        border-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.map-radial-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-launcher[data-radial-pinned="true"] .map-radial-pin {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1) rotate(-12deg);
    transition-delay: 120ms, 0s, 120ms, 0s, 0s, 0s;
}

.map-radial-pin:hover,
.map-radial-pin:focus-visible {
    border-color: rgba(250, 218, 150, 0.52);
    color: #ffe8aa;
    box-shadow:
        0 15px 26px rgba(2, 5, 6, 0.34),
        0 0 12px rgba(245, 198, 103, 0.16),
        inset 0 1px 0 rgba(255, 250, 232, 0.22);
}

.map-radial-pin:focus-visible {
    outline: 2px solid rgba(246, 211, 139, 0.72);
    outline-offset: 4px;
}

.map-radial-pin.active,
.map-radial-pin[aria-pressed="true"] {
    border-color: rgba(255, 245, 205, 0.72);
    color: #fff0b9;
    box-shadow:
        0 0 0 5px rgba(255, 186, 72, 0.08),
        0 0 16px rgba(255, 235, 170, 0.56),
        0 14px 24px rgba(2, 5, 6, 0.32),
        inset 0 0 14px rgba(246, 186, 72, 0.18);
}

.map-radial-pin-icon {
    width: 13.125px;
    height: 13.125px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.36));
}

.map-radial-menu {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-radial-item {
    --radial-x: 0px;
    --radial-y: 0px;
    position: absolute;
    top: calc(100% - ((var(--radial-main-size) + var(--radial-item-size)) / 2));
    left: calc((var(--radial-main-size) - var(--radial-item-size)) / 2);
    min-width: calc(var(--radial-item-size) + var(--radial-label-gap) + var(--radial-label-width));
    height: var(--radial-item-size);
    min-height: var(--radial-item-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--radial-label-gap);
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #f1d493;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:
        translate3d(calc(var(--radial-x) * 0.16), calc(var(--radial-y) * var(--radial-stack-direction) * 0.16), 0)
        scale(0.68);
    transform-origin: calc(var(--radial-item-size) / 2) calc(var(--radial-item-size) / 2);
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease);
}

.map-radial-item:hover,
.map-radial-item:focus-visible,
.map-radial-item:active {
    background: transparent;
    box-shadow: none;
}

.map-radial-launcher[data-radial-open="true"] .map-radial-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(var(--radial-x), calc(var(--radial-y) * var(--radial-stack-direction)), 0) scale(1);
    transition-delay: calc((var(--radial-order, 1) - 1) * 34ms), calc((var(--radial-order, 1) - 1) * 34ms), calc((var(--radial-order, 1) - 1) * 34ms);
}

.map-radial-launcher[data-radial-open="true"] .map-radial-item:hover,
.map-radial-launcher[data-radial-open="true"] .map-radial-item:focus-visible {
    transform: translate3d(var(--radial-x), calc(var(--radial-y) * var(--radial-stack-direction)), 0) scale(1);
}

.map-radial-options-launcher .map-radial-item {
    left: auto;
    right: calc((var(--radial-main-size) - var(--radial-item-size)) / 2);
    flex-direction: row-reverse;
    transform:
        translate3d(calc(var(--radial-x) * -0.16), calc(var(--radial-y) * var(--radial-stack-direction) * 0.16), 0)
        scale(0.68);
    transform-origin: calc(100% - (var(--radial-item-size) / 2)) calc(var(--radial-item-size) / 2);
}

.map-radial-options-launcher[data-radial-open="true"] .map-radial-item,
.map-radial-options-launcher[data-radial-open="true"] .map-radial-item:hover,
.map-radial-options-launcher[data-radial-open="true"] .map-radial-item:focus-visible {
    transform: translate3d(calc(var(--radial-x) * -1), calc(var(--radial-y) * var(--radial-stack-direction)), 0) scale(1);
}

.map-radial-options-launcher .map-radial-label {
    justify-content: flex-end;
    text-align: right;
}

.map-radial-item[data-radial-action="tools"] {
    --radial-x: var(--radial-main-column-x);
}

.map-radial-item[data-radial-action="search"] {
    --radial-x: var(--radial-main-column-x);
    display: none;
}

.map-radial-item[data-radial-action="layers"] {
    --radial-x: var(--radial-main-column-x);
}

.map-radial-options-launcher .map-radial-item[data-radial-action="appearance"] {
    --radial-x: var(--radial-main-column-x);
}

.map-radial-options-launcher .map-radial-item[data-radial-action="sun-shadows"] {
    --radial-label-width: 142px;
    --radial-x: var(--radial-main-column-x);
}

.map-radial-options-launcher .map-radial-item[data-radial-action="sea-level"] {
    --radial-x: var(--radial-main-column-x);
}

.map-radial-options-launcher .map-radial-item[data-radial-action="terrain-slice"] {
    --radial-label-width: 112px;
    --radial-x: var(--radial-main-column-x);
}

.map-radial-item-core {
    position: relative;
    width: var(--radial-item-size);
    height: var(--radial-item-size);
    flex: 0 0 var(--radial-item-size);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    transition:
        transform 150ms var(--radial-ease),
        filter 150ms ease,
        color 150ms ease;
}

.map-radial-item-core::before,
.map-radial-subitem-core::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(255, 237, 174, 0.34) 0%, rgba(246, 186, 72, 0.26) 35%, rgba(255, 142, 34, 0.15) 56%, rgba(255, 142, 34, 0) 76%);
    filter: blur(7px);
    opacity: 0;
    transform: scale(0.94);
    transition:
        opacity 180ms ease,
        transform 180ms var(--radial-ease);
}

.map-radial-item-icon {
    width: calc(var(--radial-item-size) * 1.12);
    height: calc(var(--radial-item-size) * 1.12);
    display: block;
    object-fit: contain;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 13px 22px rgba(2, 5, 6, 0.3))
        drop-shadow(0 3px 8px rgba(2, 5, 6, 0.24));
    transition: filter 150ms ease;
}

.map-radial-label {
    position: relative;
    width: var(--radial-label-width);
    box-sizing: border-box;
    min-height: 34px;
    padding: 8px 13px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 999px;
    border: 1px solid var(--radial-label-border);
    background: var(--radial-label-bg);
    color: rgba(255, 239, 198, 0.96);
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.48),
        0 0 12px rgba(255, 199, 90, 0.12);
    box-shadow: var(--radial-label-shadow);
    background-color: #181b19;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms var(--radial-ease);
}

.map-radial-item[aria-haspopup="menu"] .map-radial-label {
    padding-right: 30px;
}

.map-radial-item[aria-haspopup="menu"] .map-radial-label::after,
.map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.78;
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.42));
    transition:
        opacity 150ms ease,
        transform 150ms var(--radial-ease);
}

.map-radial-item:hover .map-radial-item-core,
.map-radial-item:focus-visible .map-radial-item-core {
    color: #ffe8aa;
    filter: brightness(1.05) saturate(1.08);
}

.map-radial-item:hover .map-radial-item-icon,
.map-radial-item:focus-visible .map-radial-item-icon {
    filter:
        brightness(1.06)
        saturate(1.1)
        drop-shadow(0 15px 24px rgba(2, 5, 6, 0.34))
        drop-shadow(0 0 12px rgba(245, 198, 103, 0.2));
}

.map-radial-item:hover .map-radial-label,
.map-radial-item:focus-visible .map-radial-label {
    border-color: var(--radial-label-border-hover);
    background: var(--radial-label-bg-hover);
    color: #fff2c7;
    box-shadow:
        0 16px 28px rgba(2, 5, 6, 0.34),
        0 0 16px rgba(245, 198, 103, 0.15),
        0 0 0 1px rgba(126, 81, 28, 0.28),
        inset 0 1px 0 rgba(255, 244, 204, 0.24),
        inset 0 -10px 20px rgba(0, 0, 0, 0.16);
}

.map-radial-item[aria-haspopup="menu"]:hover .map-radial-label::after,
.map-radial-item[aria-haspopup="menu"]:focus-visible .map-radial-label::after,
.map-radial-subitem[aria-haspopup="menu"]:hover .map-radial-subitem-label::after,
.map-radial-subitem[aria-haspopup="menu"]:focus-visible .map-radial-subitem-label::after {
    opacity: 1;
    transform: translate(2px, -50%) rotate(45deg);
}

.map-radial-item:active .map-radial-item-core {
    transform: scale(0.965);
}

.map-radial-item:focus-visible {
    outline: none;
}

.map-radial-item:focus-visible .map-radial-item-core {
    outline: 2px solid rgba(246, 211, 139, 0.72);
    outline-offset: 4px;
}

.map-radial-item.active .map-radial-item-core,
.map-radial-item[aria-current="true"] .map-radial-item-core {
    color: #1c1710;
    filter: brightness(1.09) saturate(1.12);
}

.map-radial-item.active .map-radial-item-core::before,
.map-radial-item[aria-current="true"] .map-radial-item-core::before,
.map-radial-subitem.active .map-radial-subitem-core::before,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core::before {
    opacity: 0.92;
    transform: scale(1);
}

.map-radial-item.active .map-radial-item-core::before,
.map-radial-item[aria-current="true"] .map-radial-item-core::before {
    clip-path: inset(-24%);
}

.map-radial-subitem.active .map-radial-subitem-core::before,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core::before {
    clip-path: inset(-24%);
}

.map-radial-item.active .map-radial-item-icon,
.map-radial-item[aria-current="true"] .map-radial-item-icon {
    filter:
        brightness(1.1)
        saturate(1.14)
        drop-shadow(0 16px 26px rgba(80, 47, 13, 0.26))
        drop-shadow(0 0 16px rgba(255, 214, 124, 0.26));
}

.map-radial-item.active .map-radial-label,
.map-radial-item[aria-current="true"] .map-radial-label {
    border-color: rgba(255, 226, 160, 0.62);
    background: var(--radial-label-bg-hover);
    color: rgba(255, 246, 222, 0.96);
    box-shadow:
        0 15px 28px rgba(2, 5, 6, 0.3),
        0 0 18px rgba(255, 214, 124, 0.14),
        inset 0 1px 0 rgba(255, 244, 204, 0.24);
    background-color: #181b19;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.map-radial-item:disabled,
.map-radial-item[aria-disabled="true"] {
    opacity: 0.46;
    cursor: default;
    filter: saturate(0.72);
}

.map-radial-submenus {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.map-radial-submenu {
    --radial-sub-anchor-x: 0px;
    --radial-sub-anchor-y: 0px;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration);
}

.map-radial-submenu[data-radial-submenu="tools"] {
    --radial-sub-anchor-x: calc(var(--radial-main-column-x) + var(--radial-sub-anchor-offset-x));
    --radial-sub-anchor-y: calc(var(--radial-main-stack-first-y) + var(--radial-main-stack-step));
}

.map-radial-submenu[data-radial-submenu="measure"] {
    --radial-sub-anchor-x: calc(var(--radial-main-column-x) + var(--radial-sub-anchor-offset-x) + var(--radial-sub-radius-x) + var(--radial-sub-label-width) + var(--radial-sub-label-gap));
    --radial-sub-anchor-y: calc(var(--radial-main-stack-first-y) + var(--radial-main-stack-step) + (var(--radial-sub-step-y) * 6.66));
}

.map-radial-submenu[data-radial-submenu="layers"] {
    --radial-sub-anchor-x: calc(var(--radial-main-column-x) + var(--radial-sub-anchor-offset-x));
    --radial-sub-anchor-y: calc(var(--radial-main-stack-first-y) + var(--radial-main-stack-step) + var(--radial-main-stack-step) + var(--radial-main-stack-step));
}

.map-radial-options-launcher .map-radial-submenu[data-radial-submenu="layers"] {
    --radial-sub-anchor-y: var(--radial-main-stack-first-y);
    z-index: 10;
}

.map-radial-submenu[data-radial-submenu="shape"] {
    --radial-sub-anchor-x: calc(var(--radial-main-column-x) + var(--radial-sub-anchor-offset-x) + var(--radial-sub-radius-x) + var(--radial-sub-label-width) + var(--radial-sub-label-gap));
    --radial-sub-anchor-y: calc(var(--radial-main-stack-first-y) + var(--radial-main-stack-step) + (var(--radial-sub-step-y) * 3.1));
}

.map-radial-submenu[data-radial-submenu="import"] {
    --radial-sub-anchor-x: calc(var(--radial-main-column-x) + var(--radial-sub-anchor-offset-x) + var(--radial-sub-radius-x) + var(--radial-sub-label-width) + var(--radial-sub-label-gap));
    --radial-sub-anchor-y: calc(var(--radial-main-stack-first-y) + var(--radial-main-stack-step) + (var(--radial-sub-step-y) * 3.99));
}

.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="tools"] .map-radial-submenu[data-radial-submenu="tools"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="tools"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="measure"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="layers"] .map-radial-submenu[data-radial-submenu="layers"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="tools"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="shape"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="tools"],
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="import"] {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transition-delay: 0s;
}

.map-radial-subitem {
    --radial-sub-x-scale: 1;
    --radial-sub-y-scale: 0;
    --radial-sub-extra-x: 0px;
    position: absolute;
    top: calc(100% - ((var(--radial-main-size) + var(--radial-subitem-size)) / 2) + (var(--radial-sub-anchor-y) * var(--radial-stack-direction)) + var(--radial-submenu-viewport-shift-y, 0px));
    left: calc((var(--radial-main-size) - var(--radial-subitem-size)) / 2 + var(--radial-sub-anchor-x));
    min-width: calc(var(--radial-subitem-size) + var(--radial-sub-label-gap) + var(--radial-sub-label-width));
    height: var(--radial-subitem-size);
    min-height: var(--radial-subitem-size);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--radial-sub-label-gap);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #f1d493;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform:
        translate3d(
            calc((var(--radial-sub-extra-x) + (var(--radial-sub-radius-x) * var(--radial-sub-x-scale))) * 0.14),
            calc(var(--radial-sub-step-y) * var(--radial-sub-y-scale) * var(--radial-stack-direction) * 0.14),
            0
        )
        scale(0.68);
    transform-origin: calc(var(--radial-subitem-size) / 2) calc(var(--radial-subitem-size) / 2);
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease);
}

.map-radial-subitem:hover,
.map-radial-subitem:focus-visible,
.map-radial-subitem:active {
    background: transparent;
    box-shadow: none;
}

.map-radial-subitem.tool-button-draggable {
    cursor: grab;
}

.map-radial-subitem.tool-button-draggable:active,
.map-radial-subitem.tool-button-draggable.is-tool-dragging {
    cursor: grabbing;
}

.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="tools"] .map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="layers"] .map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem,
.map-radial-launcher[data-radial-open="true"][data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="import"] .map-radial-subitem {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform:
        translate3d(
            calc(var(--radial-sub-extra-x) + (var(--radial-sub-radius-x) * var(--radial-sub-x-scale))),
            calc(var(--radial-sub-step-y) * var(--radial-sub-y-scale) * var(--radial-stack-direction)),
            0
        )
        scale(1);
    transition-delay: calc((var(--radial-sub-order, 1) - 1) * 28ms), calc((var(--radial-sub-order, 1) - 1) * 28ms), calc((var(--radial-sub-order, 1) - 1) * 28ms);
}

.map-radial-launcher[data-radial-open="true"] .map-radial-subitem:hover,
.map-radial-launcher[data-radial-open="true"] .map-radial-subitem:focus-visible {
    transform:
        translate3d(
            calc(var(--radial-sub-extra-x) + (var(--radial-sub-radius-x) * var(--radial-sub-x-scale))),
            calc(var(--radial-sub-step-y) * var(--radial-sub-y-scale) * var(--radial-stack-direction)),
            0
        )
        scale(1);
}

.map-radial-options-launcher .map-radial-subitem {
    left: auto;
    right: calc((var(--radial-main-size) - var(--radial-subitem-size)) / 2 + var(--radial-sub-anchor-x));
    flex-direction: row-reverse;
    transform:
        translate3d(
            calc((var(--radial-sub-extra-x) + (var(--radial-sub-radius-x) * var(--radial-sub-x-scale))) * -0.14),
            calc(var(--radial-sub-step-y) * var(--radial-sub-y-scale) * var(--radial-stack-direction) * 0.14),
            0
        )
        scale(0.68);
    transform-origin: calc(100% - (var(--radial-subitem-size) / 2)) calc(var(--radial-subitem-size) / 2);
}

.map-radial-options-launcher[data-radial-open="true"][data-radial-active-submenu="layers"] .map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem,
.map-radial-options-launcher[data-radial-open="true"] .map-radial-subitem:hover,
.map-radial-options-launcher[data-radial-open="true"] .map-radial-subitem:focus-visible {
    transform:
        translate3d(
            calc((var(--radial-sub-extra-x) + (var(--radial-sub-radius-x) * var(--radial-sub-x-scale))) * -1),
            calc(var(--radial-sub-step-y) * var(--radial-sub-y-scale) * var(--radial-stack-direction)),
            0
        )
        scale(1);
}

.map-radial-options-launcher .map-radial-subitem-label {
    justify-content: flex-end;
    text-align: right;
}

.map-radial-display-mode-subitem {
    --radial-sub-extra-x: calc(var(--radial-sub-label-width) + var(--radial-sub-label-gap));
}

/* The display-mode column may need a viewport correction when a provider
   exposes many maps. Keep the provider column anchored to the Cartes action
   instead of letting that nested-column correction pull both levels upward. */
.map-radial-options-launcher .map-radial-submenu[data-radial-submenu="layers"] .map-radial-provider-subitem {
    top: calc(
        100% -
        ((var(--radial-main-size) + var(--radial-subitem-size)) / 2) +
        (var(--radial-sub-anchor-y) * var(--radial-stack-direction))
    );
    z-index: 1;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(1) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -1.35;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(2) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.46;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(3) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 0.43;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(4) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 1.32;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(5) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 2.21;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(6) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 3.1;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(7) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 3.99;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(8) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 4.88;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(9) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 5.77;
}

.map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem:nth-child(10) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 6.66;
}

.map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem:nth-child(1) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -3.42;
}

.map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem:nth-child(2) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -2.54;
}

.map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem:nth-child(3) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -1.66;
}

.map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem:nth-child(4) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.78;
}

.map-radial-item[data-radial-action="account"] {
    --radial-x: var(--radial-main-column-x);
    display: none;
}

@media (max-width: 1024px), (any-pointer: coarse) {
    .map-radial-item[data-radial-action="search"] {
        display: inline-flex;
    }
}

.map-radial-settings-icon {
    width: 30px !important;
    height: 30px !important;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem:nth-child(5) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 0.1;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(1) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.9;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(2) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.02;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(3) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 0.86;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(4) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 1.74;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(5) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 2.62;
}

.map-radial-submenu[data-radial-submenu="layers"] .map-radial-subitem:nth-child(6) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 3.5;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(1) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -1.35;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(2) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.46;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(3) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 0.43;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(4) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 1.32;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(5) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 2.21;
}

.map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem:nth-child(6) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 3.1;
}

.map-radial-submenu[data-radial-submenu="import"] .map-radial-subitem:nth-child(1) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: -0.46;
}

.map-radial-submenu[data-radial-submenu="import"] .map-radial-subitem:nth-child(2) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 0.43;
}

.map-radial-submenu[data-radial-submenu="import"] .map-radial-subitem:nth-child(3) {
    --radial-sub-x-scale: var(--radial-sub-column-x-scale);
    --radial-sub-y-scale: 1.32;
}

.map-radial-subitem-core {
    position: relative;
    width: var(--radial-subitem-size);
    height: var(--radial-subitem-size);
    flex: 0 0 var(--radial-subitem-size);
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(232, 210, 159, 0.22);
    background:
        linear-gradient(145deg, rgba(35, 37, 34, 0.96), rgba(12, 18, 20, 0.96)),
        linear-gradient(180deg, rgba(255, 245, 218, 0.1), rgba(255, 245, 218, 0));
    box-shadow:
        0 13px 24px rgba(2, 5, 6, 0.3),
        0 3px 8px rgba(2, 5, 6, 0.22),
        inset 0 0 0 3px rgba(255, 245, 218, 0.045),
        inset 0 1px 0 rgba(255, 250, 232, 0.15);
    isolation: isolate;
    transition:
        transform 150ms var(--radial-ease),
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease,
        color 150ms ease;
}

.map-radial-subitem-icon {
    width: calc(var(--radial-subitem-size) * 0.48);
    height: calc(var(--radial-subitem-size) * 0.48);
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.36));
}

.map-radial-provider-subitem[data-radial-recommended-provider="true"]:not(.active) .map-radial-subitem-core {
    border-color: rgba(255, 230, 166, 0.5);
    box-shadow:
        0 13px 24px rgba(2, 5, 6, 0.3),
        0 0 14px rgba(245, 198, 103, 0.18),
        inset 0 0 0 3px rgba(255, 245, 218, 0.07),
        inset 0 1px 0 rgba(255, 250, 232, 0.17);
}

.map-radial-subitem-core-image {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-subitem-image {
    width: calc(var(--radial-subitem-size) * 1.18);
    height: calc(var(--radial-subitem-size) * 1.18);
    display: block;
    object-fit: contain;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    filter:
        drop-shadow(0 12px 20px rgba(2, 5, 6, 0.3))
        drop-shadow(0 3px 7px rgba(2, 5, 6, 0.24));
    transition:
        filter 150ms ease,
        transform 150ms var(--radial-ease);
}

.map-radial-subitem-label {
    position: relative;
    box-sizing: border-box;
    width: var(--radial-sub-label-width);
    min-height: 32px;
    padding: 7px 12px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 999px;
    border: 1px solid var(--radial-label-border);
    background: var(--radial-label-bg);
    color: rgba(255, 239, 198, 0.96);
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.48),
        0 0 12px rgba(255, 199, 90, 0.1);
    box-shadow: var(--radial-label-shadow);
    background-color: #181b19;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition:
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms var(--radial-ease);
}

.map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label {
    padding-right: 28px;
}

.map-radial-subitem:hover .map-radial-subitem-core,
.map-radial-subitem:focus-visible .map-radial-subitem-core {
    border-color: rgba(250, 218, 150, 0.52);
    color: #ffe8aa;
    box-shadow:
        0 16px 28px rgba(2, 5, 6, 0.34),
        0 0 12px rgba(245, 198, 103, 0.16),
        inset 0 0 0 3px rgba(255, 245, 218, 0.06),
        inset 0 1px 0 rgba(255, 250, 232, 0.22);
}

.map-radial-subitem:hover .map-radial-subitem-core-image,
.map-radial-subitem:focus-visible .map-radial-subitem-core-image {
    border-color: transparent;
    box-shadow: none;
}

.map-radial-subitem:hover .map-radial-subitem-image,
.map-radial-subitem:focus-visible .map-radial-subitem-image {
    filter:
        brightness(1.06)
        saturate(1.08)
        drop-shadow(0 15px 24px rgba(2, 5, 6, 0.36))
        drop-shadow(0 0 12px rgba(245, 198, 103, 0.18));
}

.map-radial-subitem:hover .map-radial-subitem-label,
.map-radial-subitem:focus-visible .map-radial-subitem-label {
    border-color: var(--radial-label-border-hover);
    background: var(--radial-label-bg-hover);
    color: #fff2c7;
    box-shadow:
        0 14px 24px rgba(2, 5, 6, 0.32),
        0 0 14px rgba(245, 198, 103, 0.14),
        0 0 0 1px rgba(126, 81, 28, 0.26),
        inset 0 1px 0 rgba(255, 244, 204, 0.23),
        inset 0 -8px 18px rgba(0, 0, 0, 0.15);
}

.map-radial-subitem:active .map-radial-subitem-core {
    transform: scale(0.965);
}

.map-radial-subitem:focus-visible {
    outline: none;
}

.map-radial-subitem:focus-visible .map-radial-subitem-core {
    outline: 2px solid rgba(246, 211, 139, 0.72);
    outline-offset: 4px;
}

.map-radial-subitem.active .map-radial-subitem-core,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core {
    border-color: rgba(255, 245, 205, 0.86);
    color: #fff0b9;
    box-shadow:
        0 0 0 5px rgba(255, 186, 72, 0.08),
        0 0 0 9px rgba(255, 186, 72, 0.04),
        0 0 12px 3px rgba(255, 235, 170, 0.68),
        0 0 30px 10px rgba(246, 186, 72, 0.42),
        0 14px 26px rgba(2, 5, 6, 0.32),
        inset 0 0 0 2px rgba(255, 239, 187, 0.18),
        inset 0 0 18px rgba(246, 186, 72, 0.2);
}

.map-radial-subitem[data-radial-layer-action].active .map-radial-subitem-core,
.map-radial-subitem[data-radial-layer-action][aria-current="true"] .map-radial-subitem-core {
    border-color: rgba(255, 245, 205, 0.62);
    color: #f1d493;
    box-shadow:
        0 13px 24px rgba(2, 5, 6, 0.3),
        0 0 8px rgba(255, 235, 170, 0.16),
        0 3px 8px rgba(2, 5, 6, 0.22),
        inset 0 0 0 3px rgba(255, 245, 218, 0.045),
        inset 0 1px 0 rgba(255, 250, 232, 0.15);
}

.map-radial-subitem[data-radial-layer-action].active .map-radial-subitem-core::before,
.map-radial-subitem[data-radial-layer-action][aria-current="true"] .map-radial-subitem-core::before {
    inset: -2%;
    filter: blur(3px);
    opacity: 0.48;
}

.map-radial-subitem.active .map-radial-subitem-core-image::before,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core-image::before {
    inset: -4%;
    filter: blur(3px);
    opacity: 0.58;
}

.map-radial-subitem.active .map-radial-subitem-core-image,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core-image {
    border-color: transparent;
    box-shadow: none;
}

.map-radial-subitem.active .map-radial-subitem-image,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-image {
    filter:
        brightness(1.1)
        saturate(1.14)
        drop-shadow(0 14px 23px rgba(2, 5, 6, 0.34))
        drop-shadow(0 0 14px rgba(255, 214, 124, 0.28));
}

.map-radial-subitem.active .map-radial-subitem-label,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-label {
    border-color: rgba(255, 226, 160, 0.58);
    background: var(--radial-label-bg-hover);
    color: rgba(255, 246, 222, 0.96);
    box-shadow:
        0 14px 24px rgba(2, 5, 6, 0.28),
        0 0 16px rgba(255, 214, 124, 0.13),
        inset 0 1px 0 rgba(255, 244, 204, 0.22);
    background-color: #181b19;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.radial-command-surfaces.hidden {
    display: none;
}

.map-layer-control.map-layer-control-radial-hosted {
    display: none !important;
}

.radial-speed-time-range-panel {
    position: absolute;
    left: calc(var(--radial-launcher-left) + var(--radial-main-size) + 18px + env(safe-area-inset-left));
    bottom: calc(var(--radial-launcher-bottom) + 6px + env(safe-area-inset-bottom));
    z-index: calc(var(--radial-z-index) + 1);
    width: min(292px, calc(100vw - var(--radial-launcher-left) - var(--radial-main-size) - 38px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    box-shadow:
        0 18px 36px rgba(24, 19, 10, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.capture-mode .map-radial-launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.riddle-gallery-open .map-radial-launcher {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
}

body[data-immersive-view="immersive"] .map-radial-launcher {
    z-index: 5450;
    isolation: isolate;
}

body.radial-selected-tool-cursor #map,
body.radial-selected-tool-cursor #map .maplibregl-canvas,
body.radial-selected-tool-cursor #map .maplibregl-canvas-container,
body.radial-selected-tool-cursor #map .map-engine-pane,
body.radial-selected-tool-cursor #map .map-engine-layer,
body.radial-selected-tool-cursor #map .map-engine-interactive,
body.radial-selected-tool-cursor #map .map-engine-marker-icon,
body.radial-selected-tool-cursor #map .map-engine-image-layer,
body.radial-selected-tool-cursor #map .plan-image-overlay,
body.radial-selected-tool-cursor #map .plan-shape-overlay,
body.radial-selected-tool-cursor #map .postit-chip,
body.radial-selected-tool-cursor #map .compass-chip,
body.radial-selected-tool-cursor #map .search-place-chip,
body.radial-selected-tool-cursor #map .altitude-chip,
body[data-immersive-view="immersive"].radial-selected-tool-cursor #immersive-scene {
    cursor: var(--radial-selected-tool-cursor, crosshair) !important;
}

body.radial-selected-tool-cursor #map .maplibregl-control-container,
body.radial-selected-tool-cursor #map .maplibregl-control-container *,
body.radial-selected-tool-cursor .map-radial-launcher,
body.radial-selected-tool-cursor .map-radial-launcher *,
body[data-immersive-view="immersive"].radial-selected-tool-cursor #immersive-scene .hud,
body[data-immersive-view="immersive"].radial-selected-tool-cursor #immersive-scene .hud * {
    cursor: auto;
}

@media (max-width: 1180px) {
    :root {
        --radial-radius-x: clamp(106px, 12vw, 142px);
        --radial-sub-radius-x: clamp(100px, 9vw, 128px);
    }
}

@media (max-width: 1024px) {
    :root {
        --radial-launcher-bottom: 14px;
        --radial-launcher-left: 10px;
        --radial-launcher-right: 10px;
        --radial-main-size: 66px;
        --radial-item-size: 54px;
        --radial-label-width: 100px;
        --radial-radius-x: clamp(94px, 19vw, 132px);
        --radial-radius-y: clamp(62px, 12vh, 96px);
        --radial-subitem-size: 48px;
        --radial-sub-label-width: 122px;
        --radial-sub-radius-x: clamp(94px, 14vw, 120px);
        --radial-sub-step-y: 50px;
    }

    .top-bar {
        right: auto !important;
        left: 50% !important;
        width: max-content !important;
        max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        transform: translateX(-50%) !important;
    }

    .inspector:not(.riddle-gallery-panel):not(.decryption-panel),
    .search-panel {
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .map-layer-control {
        bottom: calc(12px + env(safe-area-inset-bottom));
    }

}

@media (min-width: 721px) and (max-width: 1024px) {
    .top-bar {
        align-items: center;
        flex-wrap: nowrap;
    }

    .tab-list {
        order: initial;
        flex: 1 1 auto;
        max-width: none;
    }

    .tab-selector {
        max-width: min(320px, 32vw);
    }

    .tab-selector-trigger,
    .tab-title-input,
    .tab-selector-input {
        max-width: min(240px, 26vw);
    }
}

@media (max-width: 720px) {
    :root {
        --radial-launcher-bottom: 12px;
        --radial-label-width: 92px;
        --radial-label-gap: 14px;
        --radial-radius-x: clamp(84px, 21vw, 112px);
        --radial-radius-y: clamp(58px, 11vh, 84px);
        --radial-sub-label-width: 110px;
        --radial-sub-label-gap: 12px;
        --radial-sub-radius-x: clamp(84px, 16vw, 104px);
        --radial-sub-step-y: 46px;
    }

    .map-radial-label {
        min-height: 32px;
        padding: 7px 11px 8px;
        font-size: 0.88rem;
    }

    .map-radial-pin {
        display: none !important;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] {
        --radial-sub-label-width: 86px;
        --radial-sub-radius-x: 58px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-menu,
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-item {
        pointer-events: none;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-item {
        opacity: 0;
        visibility: hidden;
        transform:
            translate3d(calc(var(--radial-x) * 0.06), calc(var(--radial-y) * var(--radial-stack-direction) * 0.06), 0)
            scale(0.82);
        transition-delay: 0ms;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-subitem-label {
        box-sizing: border-box;
        min-height: 30px;
        padding: 6px 8px 7px;
        justify-content: center;
        overflow-wrap: anywhere;
        text-align: center;
        font-size: 0.72rem;
        line-height: 1.05;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label {
        padding-right: 22px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label::after {
        right: 8px;
        width: 6px;
        height: 6px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="layers"],
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="tools"] {
        --radial-sub-anchor-x: 0px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="shape"],
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="import"],
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="measure"] {
        --radial-sub-anchor-x: 0px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"][data-radial-active-submenu="layers"] .map-radial-provider-subitem,
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="tools"] .map-radial-subitem {
        --radial-sub-extra-x: 0px !important;
        --radial-sub-x-scale: 0 !important;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"][data-radial-active-submenu="layers"] .map-radial-display-mode-subitem {
        --radial-sub-extra-x: calc(var(--radial-sub-label-width) + var(--radial-sub-label-gap) + 4px) !important;
        --radial-sub-x-scale: 1 !important;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="shape"] .map-radial-subitem,
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="import"] .map-radial-subitem,
    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="measure"] .map-radial-subitem {
        --radial-sub-extra-x: calc(var(--radial-sub-label-width) + var(--radial-sub-label-gap) + 4px) !important;
        --radial-sub-x-scale: 1 !important;
    }

    .inspector:not(.riddle-gallery-panel):not(.decryption-panel),
    .search-panel {
        --inspector-panel-compact-height: min(52dvh, 360px);
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        max-height: var(--inspector-panel-compact-height);
    }

    /* Keep the mobile properties card in the clear space between the two
       radial launcher buttons instead of letting those buttons cover it. */
    #inspector-panel.inspector {
        --mobile-inspector-radial-gap: 8px;
        right: calc(
            var(--radial-launcher-right) +
            var(--radial-main-size) +
            var(--mobile-inspector-radial-gap) +
            env(safe-area-inset-right)
        ) !important;
        left: calc(
            var(--radial-launcher-left) +
            var(--radial-main-size) +
            var(--mobile-inspector-radial-gap) +
            env(safe-area-inset-left)
        ) !important;
        width: auto !important;
    }
}

@media (max-width: 640px) {
    :root {
        --radial-launcher-bottom: 8px;
        --radial-launcher-left: 8px;
        --radial-launcher-right: 8px;
        --radial-main-size: 62px;
        --radial-item-size: 52px;
    }

    .top-bar {
        top: calc(8px + env(safe-area-inset-top)) !important;
        right: auto !important;
        left: 50% !important;
        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        transform: translateX(-50%) !important;
    }

}

@media (max-width: 420px) {
    :root {
        --radial-label-width: 82px;
        --radial-radius-x: clamp(78px, 20vw, 92px);
        --radial-radius-y: clamp(54px, 10vh, 76px);
        --radial-subitem-size: 46px;
        --radial-sub-label-width: 96px;
        --radial-sub-radius-x: clamp(70px, 18vw, 84px);
        --radial-sub-step-y: 42px;
    }

    .map-radial-label {
        font-size: 0.8rem;
        padding-inline: 9px;
    }

    .map-radial-item[aria-haspopup="menu"] .map-radial-label {
        padding-right: 24px;
    }

    .map-radial-subitem-label {
        font-size: 0.76rem;
        padding-inline: 9px;
    }

    .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label {
        padding-right: 23px;
    }

    .map-radial-item[aria-haspopup="menu"] .map-radial-label::after,
    .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label::after {
        right: 10px;
        width: 6px;
        height: 6px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] {
        --radial-sub-label-width: 80px;
        --radial-sub-radius-x: 54px;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-subitem-label {
        padding-inline: 7px;
        font-size: 0.68rem;
    }

    .map-radial-launcher[data-radial-primary-menu="hidden"] .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label {
        padding-right: 21px;
    }
}

@media (max-width: 380px) {
    :root {
        --radial-label-width: 76px;
        --radial-label-gap: 12px;
        --radial-main-size: 58px;
        --radial-item-size: 50px;
        --radial-radius-x: 76px;
        --radial-radius-y: 52px;
        --radial-subitem-size: 44px;
        --radial-sub-label-width: 88px;
        --radial-sub-label-gap: 10px;
        --radial-sub-radius-x: 66px;
        --radial-sub-step-y: 39px;
    }

}

@media (max-height: 460px) {
    :root {
        --radial-radius-y: 48px;
    }

    .map-radial-launcher {
        height: calc(var(--radial-main-size) + (var(--radial-radius-y) * 3.12) + 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-radial-main,
    .map-radial-main-icon,
    .map-radial-pin,
    .map-radial-menu,
    .map-radial-item,
    .map-radial-item-core,
    .map-radial-item-icon,
    .map-radial-submenu,
    .map-radial-subitem,
    .map-radial-subitem-core,
    .map-radial-subitem-core::before,
    .map-radial-subitem-label,
    .map-radial-label,
    .map-radial-item-core::before {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* Premium gallery-blue rail shared by both launchers. Primary actions dissolve
   into the band; only interaction states receive a flat tint, while tool and
   measurement submenus still unfold on opaque surfaces over the map. */
.map-radial-rail-launcher {
    --premium-rail-item-height: clamp(54px, 7.4vh, 64px);
    --premium-rail-item-width: calc(var(--radial-main-size) + 10px);
    --premium-rail-width: calc(var(--radial-main-size) + 18px);
    --premium-pin-reserve: 58px;
    --premium-rail-top-space: clamp(24px, 3.8vh, 32px);
    /* The compass artwork sits slightly high inside its transparent square. */
    --premium-compass-optical-offset-y: 1.5px;
    --radial-item-count: 6;
    --premium-rail-height: calc(
        var(--premium-pin-reserve) +
        var(--radial-main-size) +
        ((var(--premium-rail-item-height) + var(--radial-main-stack-gap)) * var(--radial-item-count)) +
        var(--premium-rail-top-space)
    );
    --radial-item-size: var(--premium-rail-item-height);
    --radial-main-stack-gap: 6px;
    --radial-main-stack-first-y: calc(
        (var(--radial-main-size) + var(--premium-rail-item-height)) / 2 +
        var(--radial-main-stack-gap)
    );
    --radial-main-stack-step: calc(var(--premium-rail-item-height) + var(--radial-main-stack-gap));
    transition:
        transform 360ms var(--radial-ease),
        opacity 160ms ease,
        visibility 0s linear 0s;
}

.map-radial-rail-launcher::before {
    content: "";
    position: absolute;
    left: calc((var(--radial-main-size) - var(--premium-rail-width)) / 2);
    bottom: calc(0px - var(--premium-pin-reserve));
    z-index: -2;
    width: var(--premium-rail-width);
    height: var(--premium-rail-height);
    box-sizing: border-box;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 90%, rgba(244, 215, 125, 0.11), transparent 29%) padding-box,
        linear-gradient(165deg, #142a44, #0c1b2e 74%) padding-box,
        linear-gradient(
            145deg,
            rgba(255, 240, 176, 0.9),
            rgba(111, 73, 18, 0.78) 34%,
            rgba(200, 141, 36, 0.66) 68%,
            rgba(58, 38, 16, 0.9)
        ) border-box;
    box-shadow:
        0 0 0 1px rgba(48, 31, 13, 0.38),
        0 18px 44px rgba(3, 10, 18, 0.42),
        0 0 24px rgba(9, 24, 40, 0.24),
        inset 0 1px 0 rgba(255, 244, 200, 0.12),
        inset 0 0 0 3px rgba(4, 12, 22, 0.2);
    opacity: 0;
    transform: scaleY(0.1);
    transform-origin: 50% 100%;
    transition:
        opacity 170ms ease,
        transform 420ms cubic-bezier(0.18, 0.82, 0.18, 1);
}

.map-radial-rail-launcher::after {
    content: "";
    position: absolute;
    left: calc((var(--radial-main-size) - var(--premium-rail-width)) / 2 + 1px);
    bottom: calc(10px - var(--premium-pin-reserve));
    z-index: -1;
    width: 2px;
    height: calc(var(--premium-rail-height) - 20px);
    pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 230, 153, 0.22) 16%,
        rgba(255, 218, 111, 0.82) 48%,
        rgba(255, 241, 188, 0.92) 70%,
        transparent 100%
    );
    box-shadow: 0 0 9px rgba(237, 177, 50, 0.36);
    opacity: 0;
    transform: scaleY(0.08);
    transform-origin: 50% 100%;
    transition:
        opacity 180ms ease 90ms,
        transform 460ms cubic-bezier(0.18, 0.82, 0.18, 1);
}

.map-radial-rail-launcher[data-radial-open="true"],
.map-radial-rail-launcher[data-radial-pinned="true"] {
    transform: translate3d(0, calc(0px - var(--premium-pin-reserve)), 0);
}

.map-radial-rail-launcher[data-radial-open="true"]::before,
.map-radial-rail-launcher[data-radial-pinned="true"]::before,
.map-radial-rail-launcher[data-radial-open="true"]::after,
.map-radial-rail-launcher[data-radial-pinned="true"]::after {
    opacity: 1;
    transform: scaleY(1);
}

.map-radial-rail-launcher .map-radial-main {
    border: 1px solid rgba(232, 191, 91, 0.18);
    background:
        radial-gradient(circle, rgba(244, 205, 111, 0.1), transparent 66%),
        rgba(5, 14, 24, 0.16);
    box-shadow:
        0 10px 24px rgba(1, 7, 13, 0.28),
        inset 0 0 0 1px rgba(255, 240, 176, 0.04);
}

.map-radial-rail-launcher .map-radial-main:hover,
.map-radial-rail-launcher .map-radial-main:focus-visible,
.map-radial-rail-launcher .map-radial-main[aria-expanded="true"] {
    border-color: rgba(244, 215, 125, 0.5);
    background:
        radial-gradient(circle, rgba(244, 205, 111, 0.2), transparent 68%),
        rgba(7, 18, 31, 0.36);
    box-shadow:
        0 0 0 4px rgba(232, 171, 52, 0.08),
        0 0 24px rgba(238, 181, 57, 0.26),
        0 12px 26px rgba(1, 7, 13, 0.34),
        inset 0 0 0 1px rgba(255, 240, 176, 0.1);
}

.map-radial-rail-launcher .map-radial-main-icon {
    top: calc(50% + var(--premium-compass-optical-offset-y));
    width: calc(var(--radial-main-size) * 1.12);
    height: calc(var(--radial-main-size) * 1.12);
}

.map-radial-rail-launcher[data-radial-open="true"] .map-radial-main-icon {
    transform: translate(-50%, -50%) rotate(10deg) scale(0.985);
}

.map-radial-rail-launcher .map-radial-pin {
    bottom: calc(16px - var(--premium-pin-reserve));
    left: calc(var(--radial-main-size) / 2);
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-color: rgba(244, 215, 125, 0.16);
    background:
        linear-gradient(145deg, rgba(31, 45, 58, 0.96), rgba(10, 22, 35, 0.98)),
        linear-gradient(180deg, rgba(255, 245, 218, 0.08), transparent);
    color: rgba(222, 225, 226, 0.88);
    box-shadow:
        0 10px 20px rgba(1, 7, 13, 0.34),
        inset 0 1px 0 rgba(255, 250, 232, 0.09);
    transform: translate3d(-50%, 8px, 0) scale(0.84);
}

.map-radial-rail-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-rail-launcher[data-radial-pinned="true"] .map-radial-pin {
    transform: translate3d(-50%, 0, 0) scale(1);
    transition-delay: 180ms, 0s, 180ms, 0s, 0s, 0s;
}

.map-radial-rail-launcher .map-radial-pin:hover,
.map-radial-rail-launcher .map-radial-pin:focus-visible,
.map-radial-rail-launcher .map-radial-pin.active,
.map-radial-rail-launcher .map-radial-pin[aria-pressed="true"] {
    border-color: rgba(244, 215, 125, 0.62);
    color: #ffe8aa;
    background:
        linear-gradient(145deg, rgba(47, 57, 61, 0.98), rgba(15, 26, 36, 0.98)),
        linear-gradient(180deg, rgba(255, 245, 218, 0.12), transparent);
    box-shadow:
        0 0 0 4px rgba(255, 186, 72, 0.07),
        0 0 16px rgba(255, 221, 142, 0.28),
        0 12px 22px rgba(1, 7, 13, 0.38),
        inset 0 0 12px rgba(246, 186, 72, 0.12);
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item {
    left: calc((var(--radial-main-size) - var(--premium-rail-item-width)) / 2);
    width: var(--premium-rail-item-width);
    min-width: var(--premium-rail-item-width);
    height: var(--premium-rail-item-height);
    min-height: var(--premium-rail-item-height);
    box-sizing: border-box;
    padding: 5px 3px 4px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #e4bd64;
    box-shadow: none;
    /* Fixed slots keep hidden and delayed items from gathering around the
       compass while the vertical rail unfolds. */
    transform: translate3d(
        var(--radial-x),
        calc(var(--radial-y) * var(--radial-stack-direction)),
        0
    ) scale(1);
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease),
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.map-radial-rail-launcher[data-radial-open="true"] > .map-radial-menu .map-radial-item {
    transition-delay:
        calc(46ms + (var(--radial-order, 1) - 1) * 38ms),
        0s,
        calc(46ms + (var(--radial-order, 1) - 1) * 38ms),
        0s,
        0s,
        0s;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item:hover,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:focus-visible {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    box-shadow: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item.active,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-current="true"],
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] {
    border-color: transparent;
    color: #ffe59a;
    background: rgba(3, 12, 21, 0.42);
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::before,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::after {
    display: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon {
    width: 54px;
    height: 54px;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-label {
    width: 100%;
    min-height: 15px;
    max-height: 17px;
    box-sizing: border-box;
    padding: 0 2px;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.69rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.7),
        0 0 10px rgba(255, 199, 90, 0.12);
    box-shadow: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item:hover .map-radial-label,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:focus-visible .map-radial-label,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item.active .map-radial-label,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-current="true"] .map-radial-label,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] .map-radial-label {
    border: 0;
    background: transparent;
    color: currentColor;
    box-shadow: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-haspopup="menu"] .map-radial-label {
    padding-right: 2px;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-haspopup="menu"] .map-radial-label::after {
    display: none;
}

body.riddle-gallery-open .map-radial-rail-launcher {
    transform: scale(0.98);
}

@media (max-width: 1024px) {
    .map-radial-rail-launcher {
        --premium-rail-item-height: clamp(52px, 7.2vh, 60px);
        --premium-pin-reserve: 56px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 720px) {
    .map-radial-rail-launcher {
        --premium-rail-item-height: clamp(50px, 7vh, 56px);
        --premium-rail-item-width: calc(var(--radial-main-size) + 8px);
        --premium-rail-width: calc(var(--radial-main-size) + 16px);
        --premium-pin-reserve: 0px;
    }

    .map-radial-item[data-radial-action="account"] {
        display: flex;
    }

    #toggle-window-mode {
        display: none !important;
    }

    .map-radial-rail-launcher::before {
        border-radius: 14px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item {
        padding-block: 3px;
        border-radius: 10px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item-core {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon {
        width: 48px;
        height: 48px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-label {
        font-size: 0.64rem;
    }
}

@media (max-width: 420px), (max-height: 460px) {
    .map-radial-rail-launcher {
        --premium-rail-item-height: 50px;
        --radial-main-stack-gap: 1px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item-core {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon {
        width: 45px;
        height: 45px;
    }
}

/* These sources use different transparent margins. Size their canvases so the
   visible gold artwork has the same optical weight as the neighboring icons. */
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[data-radial-action="terrain-slice"] .map-radial-item-icon {
    width: 132.25%;
    height: 132.25%;
}

@media (prefers-reduced-motion: reduce) {
    .map-radial-rail-launcher,
    .map-radial-rail-launcher::before,
    .map-radial-rail-launcher::after {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* The rail is one component with two anchors. The right launcher only mirrors
   geometry; cards, states, motion and submenu visuals remain shared above. */
.map-radial-rail-launcher.map-radial-options-launcher::before {
    right: calc((var(--radial-main-size) - var(--premium-rail-width)) / 2);
    left: auto;
}

.map-radial-rail-launcher.map-radial-options-launcher::after {
    right: calc((var(--radial-main-size) - var(--premium-rail-width)) / 2 + 1px);
    left: auto;
}

.map-radial-rail-launcher.map-radial-options-launcher .map-radial-pin {
    right: calc(var(--radial-main-size) / 2);
    left: auto;
    transform: translate3d(50%, 8px, 0) scale(0.84);
}

.map-radial-rail-launcher.map-radial-options-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-rail-launcher.map-radial-options-launcher[data-radial-pinned="true"] .map-radial-pin {
    transform: translate3d(50%, 0, 0) scale(1);
}

.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item {
    right: calc((var(--radial-main-size) - var(--premium-rail-item-width)) / 2);
    left: auto;
}

.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-label {
    max-height: 2.15em;
    font-size: 0.61rem;
    line-height: 1;
    white-space: normal;
    text-overflow: clip;
}

.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item.active,
.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item[aria-current="true"],
.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] {
    box-shadow:
        inset -3px 0 0 #f4d77d,
        inset -7px 0 16px rgba(238, 177, 48, 0.07);
}

@media (min-width: 721px) {
    .map-radial-rail-launcher.map-radial-options-launcher .map-radial-submenu::before {
        right: var(--premium-panel-left);
        left: auto;
        transform: translate3d(18px, 0, 0) scale(0.94, 0.9);
        transform-origin: 100% 50%;
    }

    .map-radial-rail-launcher.map-radial-options-launcher .map-radial-submenu::after {
        right: var(--premium-link-left);
        left: auto;
        transform-origin: 100% 50%;
        clip-path: inset(0 0 0 100%);
    }

    .map-radial-rail-launcher.map-radial-options-launcher .map-radial-submenu[aria-hidden="false"]::after {
        clip-path: inset(-14px);
    }
}

@media (max-width: 720px) {
    .map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"]::after,
    .map-radial-rail-launcher.map-radial-options-launcher .map-radial-subitem[aria-expanded="true"]::after {
        right: calc(100% - 2px);
        left: auto;
        transform-origin: 100% 50%;
    }
}

/* Premium submenu bands. Expanded categories share the primary rail's quiet,
   borderless rows while keeping the existing staggered movement and hierarchy. */
.map-radial-rail-launcher .map-radial-submenu {
    isolation: isolate;
}

.map-radial-rail-launcher .map-radial-subitem {
    box-sizing: border-box;
    padding: 4px 8px;
    gap: 8px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: #e6bd60;
    box-shadow: none;
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease),
        border-color 150ms ease,
        background 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.map-radial-rail-launcher .map-radial-subitem:hover,
.map-radial-rail-launcher .map-radial-subitem:focus-visible {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    color: #ffe6a2;
    box-shadow: none;
}

.map-radial-rail-launcher .map-radial-subitem.active,
.map-radial-rail-launcher .map-radial-subitem[aria-current="true"],
.map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] {
    border-color: transparent;
    background: rgba(3, 12, 21, 0.42);
    color: #ffe59a;
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

.map-radial-rail-launcher .map-radial-subitem-core {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-rail-launcher .map-radial-subitem-core::before,
.map-radial-rail-launcher .map-radial-subitem-core::after {
    display: none;
}

.map-radial-rail-launcher .map-radial-subitem-image {
    width: 52px;
    height: 52px;
}

.map-radial-rail-launcher .map-radial-subitem-icon {
    width: 27px;
    height: 27px;
    stroke-width: 1.65;
    color: #f1c760;
}

.map-radial-rail-launcher .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem:hover .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem:focus-visible .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem.active .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem[aria-current="true"] .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] .map-radial-subitem-label {
    width: auto;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    padding: 0 7px 0 2px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.84rem;
    font-weight: 570;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.66),
        0 0 10px rgba(255, 199, 90, 0.09);
    box-shadow: none;
}

.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label {
    padding-right: 28px;
}

.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"] .map-radial-subitem-label::after {
    right: 10px;
    border-color: currentColor;
}

@media (min-width: 721px) {
    .map-radial-rail-launcher {
        --premium-submenu-width: 244px;
        --premium-panel-gap: calc(
            var(--radial-sub-radius-x) -
            (var(--radial-subitem-size) / 2) -
            7px -
            (var(--premium-rail-width) / 2)
        );
        --radial-sub-anchor-offset-x: 0px;
        --radial-sub-label-gap: 10px;
        --radial-sub-label-width: 184px;
        --radial-sub-radius-x: 100px;
    }

    .map-radial-rail-launcher .map-radial-subitem {
        width: var(--premium-submenu-width);
        min-width: var(--premium-submenu-width);
        height: var(--radial-subitem-size);
        min-height: var(--radial-subitem-size);
    }

    .map-radial-rail-launcher .map-radial-submenu {
        --premium-panel-min-y: 0;
        --premium-panel-span-y: 0;
        --premium-panel-left: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-anchor-x) +
            var(--radial-sub-radius-x) -
            7px
        );
        --premium-panel-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-sub-anchor-y) +
            (var(--radial-sub-step-y) * var(--premium-panel-min-y)) -
            var(--radial-submenu-viewport-shift-y, 0px) -
            (var(--radial-subitem-size) / 2) -
            7px
        );
        --premium-panel-height: calc(
            var(--radial-subitem-size) +
            (var(--radial-sub-step-y) * var(--premium-panel-span-y)) +
            14px
        );
        --premium-link-left: calc((var(--radial-main-size) + var(--premium-rail-item-width)) / 2 - 2px);
        --premium-link-bottom: calc((var(--radial-main-size) / 2) + var(--radial-sub-anchor-y));
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="tools"] {
        --premium-panel-min-y: -1.35;
        --premium-panel-span-y: 8.01;
        --premium-link-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-main-stack-first-y) +
            var(--radial-main-stack-step)
        );
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="measure"] {
        --radial-sub-anchor-x: calc(var(--premium-submenu-width) + 14px + var(--premium-panel-gap));
        --premium-panel-min-y: -3.42;
        --premium-panel-span-y: 3.52;
        --premium-link-left: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-radius-x) +
            var(--premium-submenu-width) -
            1px
        );
        --premium-link-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-main-stack-first-y) +
            var(--radial-main-stack-step) +
            (var(--radial-sub-step-y) * 6.66) -
            var(--radial-submenu-viewport-shift-y, 0px)
        );
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="layers"] {
        --premium-panel-min-y: var(--radial-provider-panel-min-y, 0.1);
        --premium-panel-span-y: var(--radial-provider-panel-span-y, 0);
        --premium-panel-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-sub-anchor-y) +
            (var(--radial-sub-step-y) * var(--premium-panel-min-y)) -
            (var(--radial-subitem-size) / 2) -
            7px
        );
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="shape"] {
        --radial-sub-anchor-x: calc(var(--premium-submenu-width) + 14px + var(--premium-panel-gap));
        --premium-panel-min-y: -1.35;
        --premium-panel-span-y: 4.45;
        --premium-link-left: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-radius-x) +
            var(--premium-submenu-width) -
            1px
        );
        --premium-link-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-main-stack-first-y) +
            var(--radial-main-stack-step) +
            (var(--radial-sub-step-y) * 3.1) -
            var(--radial-submenu-viewport-shift-y, 0px)
        );
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="import"] {
        --radial-sub-anchor-x: calc(var(--premium-submenu-width) + 14px + var(--premium-panel-gap));
        --premium-panel-min-y: -0.46;
        --premium-panel-span-y: 1.78;
        --premium-link-left: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-radius-x) +
            var(--premium-submenu-width) -
            1px
        );
        --premium-link-bottom: calc(
            (var(--radial-main-size) / 2) +
            var(--radial-main-stack-first-y) +
            var(--radial-main-stack-step) +
            (var(--radial-sub-step-y) * 3.99) -
            var(--radial-submenu-viewport-shift-y, 0px)
        );
    }

    .map-radial-rail-launcher .map-radial-submenu::before {
        content: "";
        position: absolute;
        left: var(--premium-panel-left);
        bottom: var(--premium-panel-bottom);
        z-index: 0;
        width: calc(var(--premium-submenu-width) + 14px);
        height: var(--premium-panel-height);
        box-sizing: border-box;
        pointer-events: none;
        border: 1px solid transparent;
        border-radius: 15px;
        background:
            radial-gradient(circle at 15% 0%, rgba(255, 235, 174, 0.075), transparent 38%) padding-box,
            linear-gradient(165deg, rgba(20, 42, 68, 0.985), rgba(9, 25, 43, 0.99) 76%) padding-box,
            linear-gradient(
                145deg,
                rgba(255, 240, 176, 0.86),
                rgba(111, 73, 18, 0.72) 34%,
                rgba(200, 141, 36, 0.62) 68%,
                rgba(58, 38, 16, 0.86)
            ) border-box;
        box-shadow:
            0 0 0 1px rgba(48, 31, 13, 0.34),
            0 18px 38px rgba(2, 9, 17, 0.38),
            inset 0 1px 0 rgba(255, 244, 200, 0.1),
            inset 0 0 0 3px rgba(4, 12, 22, 0.2);
        opacity: 0;
        transform: translate3d(-18px, 0, 0) scale(0.94, 0.9);
        transform-origin: 0 50%;
        transition:
            opacity 180ms ease,
            transform 340ms cubic-bezier(0.18, 0.82, 0.18, 1);
    }

    .map-radial-options-launcher .map-radial-submenu[data-radial-submenu="layers"] .map-radial-display-mode-panel {
        position: absolute;
        top: calc(
            100% -
            ((var(--radial-main-size) + var(--radial-subitem-size)) / 2) +
            (var(--radial-sub-anchor-y) * var(--radial-stack-direction)) +
            var(--radial-submenu-viewport-shift-y, 0px) -
            7px
        );
        right: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-anchor-x) -
            7px
        );
        z-index: 0;
        width: calc(var(--premium-submenu-width) + 14px);
        height: calc(
            var(--radial-subitem-size) +
            (var(--radial-sub-step-y) * var(--radial-display-panel-span-y, 0)) +
            14px
        );
        box-sizing: border-box;
        pointer-events: none;
        border: 1px solid transparent;
        border-radius: 15px;
        background:
            radial-gradient(circle at 15% 0%, rgba(255, 235, 174, 0.075), transparent 38%) padding-box,
            linear-gradient(165deg, rgba(20, 42, 68, 0.985), rgba(9, 25, 43, 0.99) 76%) padding-box,
            linear-gradient(
                145deg,
                rgba(255, 240, 176, 0.86),
                rgba(111, 73, 18, 0.72) 34%,
                rgba(200, 141, 36, 0.62) 68%,
                rgba(58, 38, 16, 0.86)
            ) border-box;
        box-shadow:
            0 0 0 1px rgba(48, 31, 13, 0.34),
            0 18px 38px rgba(2, 9, 17, 0.38),
            inset 0 1px 0 rgba(255, 244, 200, 0.1),
            inset 0 0 0 3px rgba(4, 12, 22, 0.2);
        opacity: 0;
        transform:
            translate3d(
                calc((var(--radial-sub-label-width) + var(--radial-sub-label-gap) + (var(--radial-sub-radius-x) * 2)) * -1),
                calc(var(--radial-sub-step-y) * var(--radial-display-panel-top-y, 0) * var(--radial-stack-direction)),
                0
            )
            scale(0.94, 0.9);
        transform-origin: 100% 50%;
        transition:
            opacity 180ms ease,
            transform 340ms cubic-bezier(0.18, 0.82, 0.18, 1);
    }

    .map-radial-options-launcher .map-radial-submenu[data-radial-submenu="layers"][aria-hidden="false"] .map-radial-display-mode-panel {
        opacity: 1;
        transform: translate3d(
            calc((var(--radial-sub-label-width) + var(--radial-sub-label-gap) + (var(--radial-sub-radius-x) * 2)) * -1),
            calc(var(--radial-sub-step-y) * var(--radial-display-panel-top-y, 0) * var(--radial-stack-direction)),
            0
        );
    }

    .map-radial-rail-launcher .map-radial-submenu::after {
        content: "";
        position: absolute;
        left: var(--premium-link-left);
        bottom: calc(var(--premium-link-bottom) - 1px);
        z-index: 1;
        width: calc(var(--premium-panel-left) - var(--premium-link-left) + 8px);
        height: 3px;
        pointer-events: none;
        border-radius: 999px;
        background:
            radial-gradient(circle at calc(100% - 2px) 50%, #fff2bd 0 2px, transparent 3px),
            linear-gradient(90deg, rgba(184, 117, 22, 0.18), #dba536 34%, #ffe79b 76%, rgba(255, 235, 174, 0.82));
        box-shadow:
            0 0 8px rgba(244, 189, 68, 0.48),
            0 1px 0 rgba(56, 33, 9, 0.54);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition:
            opacity 150ms ease 55ms,
            transform 300ms cubic-bezier(0.18, 0.82, 0.18, 1) 45ms;
    }

    .map-radial-rail-launcher .map-radial-submenu[aria-hidden="false"]::before,
    .map-radial-rail-launcher .map-radial-submenu[aria-hidden="false"]::after {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    .map-radial-rail-launcher .map-radial-submenu[aria-hidden="false"]::after {
        transform: scaleX(1);
    }

    .map-radial-rail-launcher .map-radial-subitem {
        z-index: 2;
    }
}

@media (max-width: 720px) {
    .map-radial-rail-launcher {
        --radial-sub-anchor-offset-x: 0px;
        --radial-sub-label-gap: 8px;
        --radial-sub-label-width: 164px;
        --radial-sub-radius-x: 82px;
    }

    .map-radial-rail-launcher .map-radial-subitem {
        padding: 3px 6px;
        gap: 6px;
        border-radius: 9px;
    }

    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="tools"] > .map-radial-subitem,
    .map-radial-rail-launcher .map-radial-submenu[data-radial-submenu="measure"] > .map-radial-subitem {
        width: 218px;
        min-width: 218px;
    }

    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] {
        --radial-sub-label-width: 86px;
        --radial-sub-radius-x: 58px;
    }

    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="tools"] > .map-radial-subitem {
        width: 174px;
        min-width: 174px;
    }

    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="shape"] > .map-radial-subitem,
    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="import"] > .map-radial-subitem,
    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="measure"] > .map-radial-subitem {
        --radial-sub-extra-x: calc(var(--radial-sub-label-width) + var(--radial-sub-label-gap) + 42px) !important;
        width: 156px;
        min-width: 156px;
    }

    .map-radial-rail-launcher .map-radial-subitem-core {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .map-radial-rail-launcher .map-radial-subitem-image {
        width: 46px;
        height: 46px;
    }

    .map-radial-rail-launcher .map-radial-subitem-icon {
        width: 24px;
        height: 24px;
    }

    .map-radial-rail-launcher .map-radial-subitem-label,
    .map-radial-rail-launcher .map-radial-subitem:hover .map-radial-subitem-label,
    .map-radial-rail-launcher .map-radial-subitem:focus-visible .map-radial-subitem-label,
    .map-radial-rail-launcher .map-radial-subitem.active .map-radial-subitem-label,
    .map-radial-rail-launcher .map-radial-subitem[aria-current="true"] .map-radial-subitem-label,
    .map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] .map-radial-subitem-label {
        padding-left: 1px;
        font-size: 0.72rem;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"],
    .map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] {
        overflow: visible;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"]::after,
    .map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"]::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        left: calc(100% - 2px);
        z-index: -1;
        height: 3px;
        pointer-events: none;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(188, 123, 26, 0.28), #e6b346 54%, #ffe79b);
        box-shadow: 0 0 7px rgba(244, 189, 68, 0.42);
        transform: scaleX(1);
        transform-origin: 0 50%;
    }

    .map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"]::after {
        width: calc(
            ((var(--radial-main-size) - var(--radial-subitem-size)) / 2) +
            var(--radial-sub-anchor-offset-x) +
            var(--radial-sub-radius-x) -
            ((var(--radial-main-size) + var(--premium-rail-item-width)) / 2) +
            8px
        );
    }

    .map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"]::after {
        width: calc(var(--radial-sub-label-gap) + 14px);
    }
}

@media (max-width: 380px) {
    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] {
        --radial-sub-label-width: 80px;
        --radial-sub-radius-x: 54px;
    }

    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="tools"] > .map-radial-subitem {
        width: 146px;
        min-width: 146px;
    }

    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="shape"] > .map-radial-subitem,
    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="import"] > .map-radial-subitem,
    .map-radial-rail-launcher[data-radial-primary-menu="hidden"] .map-radial-submenu[data-radial-submenu="measure"] > .map-radial-subitem {
        --radial-sub-extra-x: calc(var(--radial-sub-label-width) + var(--radial-sub-label-gap) + 18px) !important;
        width: 132px;
        min-width: 132px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-radial-rail-launcher .map-radial-subitem,
    .map-radial-rail-launcher .map-radial-submenu::before,
    .map-radial-rail-launcher .map-radial-submenu::after,
    .map-radial-rail-launcher > .map-radial-menu .map-radial-item::after,
    .map-radial-rail-launcher .map-radial-subitem::after {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* Organic gilded links: a soft bridge for aligned panels, and an S-curve
   when the first rail has to reach a selected nested category. */
@media (min-width: 721px) {
    .map-radial-rail-launcher .map-radial-submenu::after {
        bottom: calc(var(--premium-link-bottom) - 3px);
        height: 7px;
        border-radius: 999px;
        background:
            radial-gradient(circle at 3px 50%, rgba(255, 244, 201, 0.98) 0 1px, rgba(242, 190, 70, 0.72) 2px, transparent 4px),
            radial-gradient(circle at calc(100% - 3px) 50%, rgba(255, 244, 201, 0.98) 0 1px, rgba(242, 190, 70, 0.72) 2px, transparent 4px),
            linear-gradient(
                180deg,
                transparent 0 25%,
                rgba(164, 99, 20, 0.24) 26%,
                #d99f32 41%,
                #ffe9a2 50%,
                #c98923 61%,
                rgba(112, 66, 16, 0.2) 74%,
                transparent 75%
            );
        box-shadow:
            0 0 5px rgba(255, 231, 154, 0.52),
            0 0 13px rgba(220, 155, 42, 0.26);
        clip-path: inset(0 100% 0 0);
        transform: none;
        transition:
            opacity 150ms ease 45ms,
            clip-path 360ms cubic-bezier(0.18, 0.82, 0.18, 1) 35ms;
    }

    .map-radial-rail-launcher .map-radial-submenu[aria-hidden="false"]::after {
        clip-path: inset(-14px);
        transform: none;
    }

    .map-radial-rail-launcher[data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="tools"]::after,
    .map-radial-rail-launcher[data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="tools"]::after,
    .map-radial-rail-launcher[data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="tools"]::after {
        bottom: calc(var(--premium-link-bottom) - 2px);
        border-radius: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23845a1d' stop-opacity='.62'/%3E%3Cstop offset='.42' stop-color='%23dca53a'/%3E%3Cstop offset='.72' stop-color='%23fff0af'/%3E%3Cstop offset='1' stop-color='%23bd7b20' stop-opacity='.72'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 97 H 18 C 55 97 34 3 76 3 H 100' fill='none' stroke='%23d69b2b' stroke-opacity='.24' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M 0 97 H 18 C 55 97 34 3 76 3 H 100' fill='none' stroke='url(%23g)' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M 3 97 H 18' fill='none' stroke='%23fff4c8' stroke-opacity='.72' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        box-shadow: none;
    }

    .map-radial-rail-launcher[data-radial-active-submenu="shape"] .map-radial-submenu[data-radial-submenu="tools"]::after {
        height: calc((var(--radial-sub-step-y) * 3.1) + 4px);
    }

    .map-radial-rail-launcher[data-radial-active-submenu="import"] .map-radial-submenu[data-radial-submenu="tools"]::after {
        height: calc((var(--radial-sub-step-y) * 3.99) + 4px);
    }

    .map-radial-rail-launcher[data-radial-active-submenu="measure"] .map-radial-submenu[data-radial-submenu="tools"]::after {
        height: calc((var(--radial-sub-step-y) * 6.66) + 4px);
    }

    .map-radial-options-launcher[data-radial-provider-link-direction] .map-radial-provider-subitem[aria-checked="true"]::after {
        border-radius: 0;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 100%;
        box-shadow: none;
    }

    .map-radial-options-launcher[data-radial-provider-link-direction] .map-radial-provider-subitem[aria-checked="true"]::after {
        content: "";
        position: absolute;
        right: calc(100% - 2px);
        left: auto;
        z-index: -1;
        width: calc(var(--premium-panel-gap) + 4px);
        height: calc(var(--radial-provider-link-distance-y) + 7px);
        pointer-events: none;
    }

    .map-radial-options-launcher[data-radial-provider-link-direction="up"] .map-radial-provider-subitem[aria-checked="true"]::after {
        bottom: calc(50% - 3px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23bd7b20' stop-opacity='.72'/%3E%3Cstop offset='.28' stop-color='%23fff0af'/%3E%3Cstop offset='.58' stop-color='%23dca53a'/%3E%3Cstop offset='1' stop-color='%23845a1d' stop-opacity='.62'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 3 H 18 C 55 3 34 97 76 97 H 100' fill='none' stroke='%23d69b2b' stroke-opacity='.24' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M 0 3 H 18 C 55 3 34 97 76 97 H 100' fill='none' stroke='url(%23g)' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .map-radial-options-launcher[data-radial-provider-link-direction="down"] .map-radial-provider-subitem[aria-checked="true"]::after {
        top: calc(50% - 3px);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23845a1d' stop-opacity='.62'/%3E%3Cstop offset='.42' stop-color='%23dca53a'/%3E%3Cstop offset='.72' stop-color='%23fff0af'/%3E%3Cstop offset='1' stop-color='%23bd7b20' stop-opacity='.72'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 0 97 H 18 C 55 97 34 3 76 3 H 100' fill='none' stroke='%23d69b2b' stroke-opacity='.24' stroke-width='14' stroke-linecap='round'/%3E%3Cpath d='M 0 97 H 18 C 55 97 34 3 76 3 H 100' fill='none' stroke='url(%23g)' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }
}

@media (max-width: 720px) {
    .map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"]::after,
    .map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"]::after {
        top: calc(50% - 2px);
        height: 5px;
        background:
            radial-gradient(circle at calc(100% - 2px) 50%, #fff1b5 0 1px, transparent 3px),
            linear-gradient(
                180deg,
                transparent 0 24%,
                rgba(179, 115, 24, 0.34) 25%,
                #f2c35c 48%,
                rgba(184, 119, 25, 0.3) 72%,
                transparent 73%
            );
        box-shadow:
            0 0 5px rgba(255, 231, 154, 0.46),
        0 0 10px rgba(220, 155, 42, 0.2);
    }
}

/* Size the halo to the compass's visible ring, not its transparent square. */
.map-radial-rail-launcher {
    --premium-compass-visible-diameter: calc(var(--radial-main-size) * 0.854);
}

.map-radial-rail-launcher .map-radial-main,
.map-radial-rail-launcher .map-radial-main:hover,
.map-radial-rail-launcher .map-radial-main:focus-visible,
.map-radial-rail-launcher .map-radial-main[aria-expanded="true"] {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
}

.map-radial-rail-launcher .map-radial-main::before {
    content: "";
    position: absolute;
    top: calc(50% + var(--premium-compass-optical-offset-y));
    left: 50%;
    z-index: 0;
    width: var(--premium-compass-visible-diameter);
    height: var(--premium-compass-visible-diameter);
    box-sizing: border-box;
    pointer-events: none;
    border: 1px solid rgba(244, 215, 125, 0.32);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 205, 111, 0.08), transparent 66%);
    box-shadow:
        0 0 0 2px rgba(232, 171, 52, 0.07),
        0 0 12px rgba(238, 181, 57, 0.24),
        0 0 24px rgba(238, 181, 57, 0.12);
    transform: translate(-50%, -50%);
    transition:
        border-color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.map-radial-rail-launcher .map-radial-main:hover::before,
.map-radial-rail-launcher .map-radial-main:focus-visible::before,
.map-radial-rail-launcher .map-radial-main[aria-expanded="true"]::before {
    border-color: rgba(255, 235, 170, 0.68);
    background: radial-gradient(circle, rgba(244, 205, 111, 0.16), transparent 68%);
    box-shadow:
        0 0 0 2px rgba(232, 171, 52, 0.11),
        0 0 13px rgba(255, 221, 142, 0.42),
        0 0 25px rgba(238, 181, 57, 0.2);
}

.map-radial-rail-launcher .map-radial-main-icon {
    z-index: 1;
}

/* Scale only the map artwork to match the compass without changing its hit area. */
.map-radial-options-launcher {
    --premium-compass-optical-offset-y: 0px;
}

.map-radial-options-launcher .map-radial-main-icon {
    top: 50%;
    width: calc(var(--radial-main-size) * 1.663);
    height: calc(var(--radial-main-size) * 1.663);
}

/* The map-options entry uses the same compact capsule language as Couches.
   Its wider anchor remains the origin of the mirrored rail geometry. */
.map-radial-options-launcher .map-radial-main {
    width: var(--map-options-main-width);
    min-width: var(--map-options-main-width);
}

.map-radial-options-launcher .map-radial-item,
.map-radial-rail-launcher.map-radial-options-launcher > .map-radial-menu .map-radial-item {
    right: calc((var(--map-options-main-width) - var(--premium-rail-item-width)) / 2);
}

.map-radial-rail-launcher.map-radial-options-launcher::before {
    right: calc((var(--map-options-main-width) - var(--premium-rail-width)) / 2);
}

.map-radial-rail-launcher.map-radial-options-launcher::after {
    right: calc((var(--map-options-main-width) - var(--premium-rail-width)) / 2 + 1px);
}

.map-radial-rail-launcher.map-radial-options-launcher .map-radial-pin {
    right: calc(var(--map-options-main-width) / 2);
}

/* Category icons stay crisp: selection is carried by a flat tint and the
   edge accent, never by a separate card border or an icon halo. */
.map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:hover .map-radial-item-icon,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:focus-visible .map-radial-item-icon,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item.active .map-radial-item-icon,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-current="true"] .map-radial-item-icon,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] .map-radial-item-icon {
    filter: none !important;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::before,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::after {
    content: none !important;
    display: none !important;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item.active,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-current="true"],
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] {
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

/* Resting actions remain visually absent from the common rail surface. Hover,
   focus and selection use flat translucent tints without gradients or edges. */
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:hover,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item:focus-visible {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    box-shadow: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item.active,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-current="true"],
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"] {
    border-color: transparent;
    background: rgba(3, 12, 21, 0.42);
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

.map-radial-rail-launcher .map-radial-subitem:hover,
.map-radial-rail-launcher .map-radial-subitem:focus-visible {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    box-shadow: none;
}

.map-radial-rail-launcher .map-radial-subitem.active,
.map-radial-rail-launcher .map-radial-subitem[aria-current="true"],
.map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] {
    border-color: transparent;
    background: rgba(3, 12, 21, 0.42);
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

/* Submenu placement is already clear from proximity and state. Decorative
   bridges add noise without carrying interaction or hierarchy information. */
.map-radial-rail-launcher .map-radial-submenu::after,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item[aria-expanded="true"]::after,
.map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"]::after,
.map-radial-options-launcher[data-radial-provider-link-direction] .map-radial-provider-subitem[aria-checked="true"]::after {
    content: none;
    display: none;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-label,
.map-radial-rail-launcher .map-radial-subitem-label {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
}

/* The top Layers control is the same premium rail, anchored below the top
   switch. Only its direction and viewport-fitting dimensions differ. */
.map-view-switches .map-radial-launcher.map-radial-layers-launcher {
    --radial-main-size: 44px;
    --premium-rail-item-height: clamp(48px, 6vh, 52px);
    --premium-rail-item-width: 118px;
    --premium-rail-width: 126px;
    --premium-pin-reserve: 44px;
    --premium-rail-top-space: 6px;
    --radial-main-stack-gap: 2px;
    --radial-stack-direction: 1;
    --premium-rail-height: calc(
        var(--premium-pin-reserve) +
        ((var(--premium-rail-item-height) + var(--radial-main-stack-gap)) * var(--radial-item-count)) +
        var(--premium-rail-top-space)
    );
    position: relative;
    inset: auto;
    z-index: auto;
    width: auto;
    height: auto;
    overflow: visible;
    color: rgba(247, 244, 238, 0.68);
    pointer-events: auto;
}

.map-view-switches .map-radial-layers-launcher[data-radial-open="true"] {
    z-index: 10;
}

.map-radial-layers-launcher[data-radial-open="true"] .map-layers-toggle[data-tooltip]::after {
    display: none;
}

.map-view-switches .map-radial-layers-launcher[data-active-layer-count]:not([data-active-layer-count="0"]) .map-layers-toggle {
    gap: 3px;
}

.map-layers-active-count {
    display: inline-grid;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    place-items: center;
    align-self: center;
    flex: 0 0 28px;
    border: 1px solid rgba(231, 202, 131, 0.72);
    border-radius: 999px;
    color: #f2d37f;
    background: #061322;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    font: 700 0.88rem/1 "Palatino Linotype", "Book Antiqua", serif;
}

.map-layers-active-count[hidden],
.map-layers-active-summary[hidden] {
    display: none;
}

.map-layers-active-summary {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 2;
    padding: 7px;
    border: 1px solid rgba(214, 169, 75, 0.48);
    border-radius: 15px;
    color: #e7ca83;
    background: linear-gradient(180deg, rgba(13, 34, 57, 0.97), rgba(7, 23, 40, 0.98));
    box-shadow:
        0 14px 30px rgba(2, 9, 16, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}

.map-radial-layers-launcher[data-radial-open="true"] .map-layers-active-summary {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition-delay: 0s, 0s, 140ms;
}

.map-layers-active-icons {
    display: flex;
    gap: 6px;
}

.map-layers-active-entry {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 40px;
    overflow: visible;
    padding: 0;
    border: 1px solid rgba(231, 202, 131, 0.68);
    border-radius: 11px;
    color: #e7ca83;
    background: #08182a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font: inherit;
    appearance: none;
    cursor: pointer;
    user-select: none;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.map-layers-active-entry:is(:hover, :focus-visible) {
    border-color: rgba(255, 221, 139, 0.96);
    color: #f2d37f;
    background: #0f2842;
    box-shadow:
        0 0 0 2px rgba(232, 190, 97, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    outline: none;
}

.map-layers-active-entry[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 4;
    width: max-content;
    max-width: min(240px, calc(100vw - 24px));
    padding: 7px 10px;
    border: 1px solid rgba(225, 183, 92, 0.42);
    border-radius: 9px;
    color: rgba(247, 244, 238, 0.96);
    background: linear-gradient(180deg, #13202e, #07121d);
    box-shadow: 0 10px 24px rgba(2, 8, 15, 0.38);
    font: 600 0.72rem/1.25 system-ui, sans-serif;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
}

.map-layers-active-entry[data-tooltip]:is(:hover, :focus-visible)::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 80ms, 80ms, 80ms;
}

.map-layers-active-entry :is(.map-radial-item-core, .map-radial-subitem-core) {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
}

.map-layers-active-entry .map-radial-layer-icon {
    width: 27px;
    height: 27px;
    color: #e7ca83;
}

.map-layers-active-entry .map-alliance-monogram {
    color: #e7ca83;
}

.map-layers-active-overflow {
    color: #f2d37f;
    font: 700 0.88rem/1 "Palatino Linotype", "Book Antiqua", serif;
}

.map-radial-layers-launcher > .map-radial-menu .map-radial-item {
    --radial-x: 0px;
    right: calc((100% - var(--premium-rail-item-width)) / 2);
    left: auto;
    padding: 2px 3px 1px;
    flex-direction: column;
    transform-origin: 50% calc(var(--radial-item-size) / 2);
}

.map-radial-layers-launcher > .map-radial-menu .map-radial-label {
    min-height: 0;
    height: auto;
    max-height: none;
    flex: 0 0 auto;
    padding-inline: 4px;
    justify-content: center;
    overflow: visible;
    font-size: 0.62rem;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
    text-overflow: clip;
}

.map-radial-layers-launcher > .map-radial-menu .map-radial-item-core {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
}

.map-radial-layers-launcher .map-radial-layer-index {
    position: relative;
    z-index: 1;
    color: #f1d493;
    font-family: "Palatino Linotype", "Book Antiqua", serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
}

.map-radial-layers-launcher .map-radial-layer-icon {
    position: relative;
    z-index: 1;
    width: 27px;
    height: 27px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #e7ca83;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.58));
    transition: color 150ms ease, filter 150ms ease, transform 150ms ease;
}

.map-radial-layers-launcher .map-radial-layer-image {
    display: block;
    object-fit: contain;
    mix-blend-mode: screen;
}

.map-radial-layers-launcher .map-radial-item.active .map-radial-layer-icon,
.map-radial-layers-launcher .map-radial-item[aria-checked="true"] .map-radial-layer-icon {
    color: #fff0ac;
    filter: drop-shadow(0 0 6px rgba(255, 207, 99, 0.52));
    transform: scale(1.05);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
    position: absolute;
    inset: auto calc(50% + (var(--premium-rail-width) / 2) + 14px) auto auto;
    top: calc(var(--radial-main-stack-first-y) - 8px);
    width: min(258px, calc(100vw - var(--premium-rail-width) - 48px));
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid transparent;
    border-radius: 15px;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 235, 174, 0.075), transparent 38%) padding-box,
        linear-gradient(165deg, rgba(20, 42, 68, 0.985), rgba(9, 25, 43, 0.99) 76%) padding-box,
        linear-gradient(
            145deg,
            rgba(255, 240, 176, 0.86),
            rgba(111, 73, 18, 0.72) 34%,
            rgba(200, 141, 36, 0.62) 68%,
            rgba(58, 38, 16, 0.86)
        ) border-box;
    box-shadow:
        0 0 0 1px rgba(48, 31, 13, 0.34),
        0 18px 38px rgba(2, 9, 17, 0.38),
        inset 0 1px 0 rgba(255, 244, 200, 0.1),
        inset 0 0 0 3px rgba(4, 12, 22, 0.2);
    transform: translate3d(18px, 0, 0) scale(0.98);
    transform-origin: right center;
    transition:
        opacity var(--radial-duration) ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu)::before {
    content: none;
    display: none;
}

.map-radial-layers-launcher[data-radial-open="true"] :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu)[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem {
    position: relative;
    inset: auto;
    min-width: 0;
    width: 100%;
    height: 32px;
    min-height: 32px;
    gap: 8px;
    padding: 2px 8px 2px 4px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #dfc988;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(10px, 0, 0) scale(0.96);
    transition:
        opacity 150ms ease,
        visibility 0s linear var(--radial-duration),
        transform 180ms var(--radial-ease),
        background 140ms ease,
        border-color 140ms ease;
}

.map-radial-layers-launcher[data-radial-open="true"] :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu)[aria-hidden="false"] .map-radial-subitem {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: calc((var(--radial-sub-order, 1) - 1) * 18ms);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem:hover,
.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem:focus-visible {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    transform: translate3d(0, 0, 0) scale(1);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem.active,
.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem[aria-checked="true"] {
    border-color: transparent;
    background: rgba(3, 12, 21, 0.42);
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem-core {
    width: 26px;
    height: 26px;
    min-width: 26px;
    flex-basis: 26px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-layers-launcher .map-alliance-monogram {
    position: relative;
    z-index: 1;
    color: #f0d58d;
    font: 700 0.68rem/1 "Palatino Linotype", "Book Antiqua", serif;
    letter-spacing: -0.02em;
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem-label {
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e8dfc7;
    font-size: 0.76rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem.active .map-radial-subitem-label,
.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem[aria-checked="true"] .map-radial-subitem-label {
    color: #fff0bd;
}

.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-open="true"],
.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-pinned="true"] {
    transform: none;
}

.map-radial-rail-launcher.map-radial-layers-launcher::before {
    top: calc(var(--radial-main-size) - 6px);
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) scaleY(0.1);
    transform-origin: 50% 0;
}

.map-radial-rail-launcher.map-radial-layers-launcher::after {
    content: none;
    display: none;
}

.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-open="true"]::before,
.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-pinned="true"]::before {
    transform: translateX(-50%) scaleY(1);
}

.map-radial-rail-launcher.map-radial-layers-launcher .map-radial-pin {
    top: calc(
        var(--radial-main-size) - 6px +
        var(--premium-rail-height) -
        38px
    );
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 3;
    transform: translate3d(-50%, 8px, 0) scale(0.84);
}

.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-pinned="true"] .map-radial-pin {
    transform: translate3d(-50%, 0, 0) scale(1);
}

.map-radial-rail-launcher.map-radial-layers-launcher > .map-radial-menu .map-radial-item[aria-haspopup="menu"] .map-radial-label {
    position: relative;
    padding-right: 0;
    padding-left: 15px;
}

.map-radial-rail-launcher.map-radial-layers-launcher > .map-radial-menu .map-radial-item[aria-haspopup="menu"] .map-radial-label::after {
    right: auto;
    left: 2px;
    display: block;
    transform: translateY(-50%) rotate(-135deg);
}

@media (max-height: 720px) and (min-width: 721px) {
    .map-view-switches .map-radial-launcher.map-radial-layers-launcher {
        --premium-rail-item-height: 34px;
        --premium-pin-reserve: 44px;
        --radial-main-stack-gap: 1px;
        --radial-main-stack-step: 35px;
    }

    .map-radial-layers-launcher > .map-radial-menu .map-radial-label {
        font-size: 0.5rem;
        line-height: 0.95;
    }

    .map-radial-layers-launcher > .map-radial-menu .map-radial-item-core {
        width: 15px;
        height: 15px;
        flex-basis: 15px;
    }

    .map-radial-layers-launcher .map-radial-layer-icon {
        width: 17px;
        height: 17px;
    }

    .map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
        top: calc(var(--radial-main-stack-first-y) - 7px);
        gap: 0;
        padding: 6px;
    }

    .map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) .map-radial-subitem {
        height: 29px;
        min-height: 29px;
    }
}

@media (max-width: 720px) {
    .plan-actions-menu-content .map-radial-launcher.map-radial-layers-launcher {
        width: 100%;
    }

    .map-radial-layers-launcher [data-map-layers-radial-action="alliances"],
    .map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
        display: none;
    }
}

/* The Layers launcher keeps the shared interaction contract, but presents its
   dense catalogue as one categorized cartographic panel. */
.map-view-switches .map-radial-launcher.map-radial-layers-launcher {
    --map-layers-panel-width: min(344px, calc(100vw - 24px));
    --map-layers-row-height: 45px;
    --map-layers-panel-top-clearance: 12px;
}

.map-radial-catalog-launcher {
    --map-catalog-caret-center-from-right: 40.5px;
    --map-catalog-caret-notch-size: 9px;
    --map-layers-panel-max-height: calc(
        100dvh -
        var(--radial-launcher-bottom) -
        env(safe-area-inset-bottom) -
        15px -
        var(--radial-main-size) -
        14px -
        env(safe-area-inset-top) -
        var(--map-layers-panel-top-clearance)
    );
}

.map-view-switches .map-radial-layers-launcher.map-view-switch-module-layers {
    box-sizing: border-box;
    height: 42px;
    padding: 0;
    border-color: rgba(231, 187, 93, 0.62);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
        linear-gradient(160deg, rgba(13, 35, 58, 0.97), rgba(7, 23, 40, 0.985));
    box-shadow:
        0 12px 30px rgba(2, 9, 16, 0.34),
        inset 0 1px 0 rgba(255, 248, 220, 0.08),
        inset 0 0 0 1px rgba(69, 43, 13, 0.2);
}

.map-view-switches .map-radial-layers-launcher .map-layers-toggle {
    min-height: 40px;
    padding-right: 6px;
    color: rgba(244, 239, 226, 0.9);
}

.map-view-switches .map-radial-layers-launcher .map-layers-toggle .map-view-switch-option {
    min-width: 126px;
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 9px 4px 7px;
    border-radius: 17px;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.78rem;
    font-weight: 560;
}

.map-layers-toggle-icon {
    display: block;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    object-fit: contain;
    filter: brightness(1.1) saturate(1.22) drop-shadow(0 0 5px rgba(239, 184, 67, 0.34));
}

.map-radial-rail-launcher.map-radial-layers-launcher::before,
.map-radial-tools-launcher::before {
    content: "";
    position: absolute;
    top: calc(100% + 8px);
    right: 34px;
    bottom: auto;
    left: auto;
    z-index: 7;
    display: block;
    width: 13px;
    height: 13px;
    border: 0;
    border-top: 1px solid rgba(238, 196, 108, 0.86);
    border-left: 1px solid rgba(238, 196, 108, 0.86);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    clip-path: none;
    opacity: 0;
    pointer-events: none;
    transform: rotate(45deg) scale(0.8);
    transform-origin: center;
}

.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-open="true"]::before,
.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-pinned="true"]::before,
.map-radial-tools-launcher[data-radial-open="true"]::before,
.map-radial-tools-launcher[data-radial-pinned="true"]::before {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.map-radial-rail-launcher.map-radial-layers-launcher::after,
.map-radial-tools-launcher::after {
    content: none;
    display: none;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu),
.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 6;
    display: flex;
    width: var(--map-layers-panel-width);
    height: auto;
    min-height: 0;
    /* Grow toward the top edge before turning the catalogue into a scroll area. */
    max-height: var(--map-layers-panel-max-height);
    box-sizing: border-box;
    padding: 15px 12px 16px;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(225, 179, 84, 0.72);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 229, 157, 0.075), transparent 31%),
        linear-gradient(165deg, rgba(13, 36, 60, 0.985), rgba(6, 23, 40, 0.992) 74%);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 212, 0.08),
        inset 0 0 0 3px rgba(3, 13, 24, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.96, 0.82);
    transform-origin: calc(100% - var(--map-catalog-caret-center-from-right)) 100%;
    scrollbar-color: rgba(220, 170, 66, 0.6) rgba(3, 15, 27, 0.55);
    scrollbar-width: thin;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(100% - var(--map-catalog-caret-center-from-right) + var(--map-catalog-caret-notch-size)) 100%,
        calc(100% - var(--map-catalog-caret-center-from-right)) calc(100% - var(--map-catalog-caret-notch-size)),
        calc(100% - var(--map-catalog-caret-center-from-right) - var(--map-catalog-caret-notch-size)) 100%,
        0 100%
    );
    transition:
        opacity 180ms ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease);
}

/* Cartes and Couches deliberately share this catalogue surface. The former
   only supplies its actions; panel geometry, rows and interaction states come
   from the same component so visual fixes cannot drift. Cartes keeps the
   launcher canvas required by its nested provider chooser. */
.map-radial-options-launcher.map-radial-catalog-launcher {
    --map-catalog-caret-center-from-right: calc((var(--map-options-main-width) / 2) - 0.5px);
    --map-layers-panel-width: min(344px, calc(100vw - 24px));
    --map-layers-row-height: 45px;
    --map-layers-panel-top-clearance: 12px;
    --map-options-control-height: 42px;
    --map-options-catalogue-panel-height: calc((var(--map-layers-row-height) * 2) + 31px);
    /* The catalogue replaces the legacy radial rail instead of expanding it. */
    --premium-pin-reserve: 0px;
}

.map-radial-options-launcher.map-radial-catalog-launcher::before {
    content: "";
    position: absolute;
    top: auto;
    right: calc((var(--map-options-main-width) / 2) - 7px);
    bottom: calc(
        ((var(--radial-main-size) + var(--map-options-control-height)) / 2) +
        8px
    );
    left: auto;
    z-index: 7;
    display: block;
    width: 13px;
    height: 13px;
    border: 0;
    border-top: 1px solid rgba(238, 196, 108, 0.86);
    border-left: 1px solid rgba(238, 196, 108, 0.86);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
    clip-path: none;
    opacity: 0;
    pointer-events: none;
    transform: rotate(45deg) scale(0.8);
    transform-origin: center;
}

.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"]::before,
.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-pinned="true"]::before {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.map-radial-options-launcher.map-radial-catalog-launcher::after {
    content: none;
    display: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher > #map-options-radial-menu {
    top: auto;
    bottom: calc(
        ((var(--radial-main-size) + var(--map-options-control-height)) / 2) +
        14px
    );
}

.map-radial-options-launcher.map-radial-catalog-launcher > #map-options-radial-submenus {
    z-index: 9;
}

.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-active-submenu="layers"] > #map-options-radial-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher .map-radial-pin {
    top: auto;
    right: 7px;
    bottom: calc(
        var(--radial-main-size) +
        14px +
        var(--map-options-catalogue-panel-height) -
        33px
    );
    left: auto;
    z-index: 8;
    transform: translate3d(0, -3px, 0) scale(0.86);
}

.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-pinned="true"] .map-radial-pin {
    transform: translate3d(0, 0, 0) scale(1);
}

.map-radial-catalog-launcher[data-radial-open="true"] > :is(#map-layers-radial-menu, #map-options-radial-menu),
.map-radial-catalog-launcher[data-radial-pinned="true"] > :is(#map-layers-radial-menu, #map-options-radial-menu) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu)::-webkit-scrollbar {
    width: 7px;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu)::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(220, 170, 66, 0.62);
    background-clip: padding-box;
}

.map-layers-section-title {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    padding: 6px 2px 4px;
    color: #e8b65b;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(229, 170, 57, 0.16);
}

.map-layers-section-title:not(:first-child) {
    margin-top: 8px;
}

.map-layers-section-title::before,
.map-layers-section-title::after {
    content: "";
    height: 1px;
    min-width: 18px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, transparent, rgba(221, 171, 68, 0.66));
}

.map-layers-section-title::after {
    background: linear-gradient(90deg, rgba(221, 171, 68, 0.66), transparent);
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    min-width: 0;
    height: var(--map-layers-row-height);
    min-height: var(--map-layers-row-height);
    box-sizing: border-box;
    padding: 4px 38px 4px 10px;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    overflow: visible;
    border: 1px solid rgba(116, 143, 165, 0.13);
    border-top-color: rgba(116, 143, 165, 0.09);
    border-radius: 0;
    color: rgba(248, 246, 240, 0.94);
    background: linear-gradient(90deg, rgba(19, 47, 73, 0.48), rgba(10, 31, 51, 0.56));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(0.94);
    transform-origin: center bottom;
    transition:
        opacity 160ms ease,
        visibility 0s linear var(--radial-duration),
        transform 200ms var(--radial-ease),
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item + .map-radial-item {
    margin-top: -1px;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item.map-layers-section-start {
    border-top-color: rgba(116, 143, 165, 0.18);
    border-radius: 11px 11px 0 0;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item.map-layers-section-end {
    border-radius: 0 0 11px 11px;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item.map-layers-section-start.map-layers-section-end {
    border-radius: 11px;
}

.map-radial-catalog-launcher[data-radial-open="true"] > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item,
.map-radial-catalog-launcher[data-radial-pinned="true"] > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay:
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        0s,
        0s;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item:is(:hover, :focus-visible) {
    z-index: 1;
    border-color: rgba(230, 186, 94, 0.38);
    color: #fff3c6;
    background: linear-gradient(90deg, rgba(26, 58, 87, 0.8), rgba(13, 38, 61, 0.78));
    box-shadow:
        inset 3px 0 0 rgba(238, 190, 92, 0.74),
        inset 0 0 18px rgba(239, 181, 60, 0.045);
    outline: none;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item:is(.active, [aria-current="true"], [aria-checked="true"], [aria-pressed="true"], [aria-expanded="true"]) {
    z-index: 2;
    border-color: rgba(240, 194, 101, 0.86);
    color: #fff4c5;
    background:
        radial-gradient(circle at 10% 50%, rgba(255, 219, 127, 0.11), transparent 24%),
        linear-gradient(90deg, rgba(31, 61, 86, 0.86), rgba(14, 37, 57, 0.88));
    box-shadow:
        0 0 14px rgba(231, 171, 52, 0.2),
        inset 0 0 0 1px rgba(255, 238, 190, 0.08),
        inset 4px 0 12px rgba(238, 177, 48, 0.08);
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item-core {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-label {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-height: none;
    flex: 1 1 auto;
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
    color: currentColor;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.84rem;
    font-weight: 520;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    text-overflow: ellipsis;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-layer-icon {
    width: 34px;
    height: 34px;
    color: #e9b95b;
    stroke-width: 1.55;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.54));
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-layer-image {
    object-fit: contain;
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 4px rgba(232, 173, 54, 0.18));
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item:is(.active, [aria-current="true"], [aria-checked="true"], [aria-pressed="true"])::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 14px;
    color: #f4ca70;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 8px rgba(246, 197, 91, 0.34);
    transform: translateY(-50%);
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item[aria-haspopup="menu"] .map-radial-label {
    padding: 0 0 0 15px;
}

.map-radial-catalog-launcher > :is(#map-layers-radial-menu, #map-options-radial-menu) .map-radial-item[aria-haspopup="menu"] .map-radial-label::after {
    right: auto;
    left: 2px;
    display: block;
    border-color: currentColor;
    transform: translateY(-50%) rotate(-135deg);
}

/* Cartes is a catalogue too. Its provider content is rendered in the nested
   submenu for compatibility with the launcher contract, so give that actual
   surface the same panel, row and state language as Couches. */
.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenus {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) {
    position: absolute;
    top: auto;
    right: 0;
    bottom: calc(
        ((var(--radial-main-size) + var(--map-options-control-height)) / 2) +
        14px
    );
    left: auto;
    display: flex;
    width: var(--map-layers-panel-width);
    height: auto;
    max-height: var(--map-layers-panel-max-height);
    box-sizing: border-box;
    padding: 15px 12px 16px;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(225, 179, 84, 0.72);
    border-radius: 18px;
    background:
        radial-gradient(circle at 16% 0%, rgba(255, 229, 157, 0.075), transparent 31%),
        linear-gradient(165deg, rgba(13, 36, 60, 0.985), rgba(6, 23, 40, 0.992) 74%);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 212, 0.08),
        inset 0 0 0 3px rgba(3, 13, 24, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(0.96, 0.82);
    transform-origin: calc(100% - var(--map-catalog-caret-center-from-right)) 100%;
    scrollbar-color: rgba(220, 170, 66, 0.6) rgba(3, 15, 27, 0.55);
    scrollbar-width: thin;
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(100% - var(--map-catalog-caret-center-from-right) + var(--map-catalog-caret-notch-size)) 100%,
        calc(100% - var(--map-catalog-caret-center-from-right)) calc(100% - var(--map-catalog-caret-notch-size)),
        calc(100% - var(--map-catalog-caret-center-from-right) - var(--map-catalog-caret-notch-size)) 100%,
        0 100%
    );
    transition:
        opacity 180ms ease,
        visibility 0s linear var(--radial-duration),
        transform var(--radial-duration) var(--radial-ease);
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles)::before,
.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles)::after {
    content: none;
    display: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"]:is([data-radial-active-submenu="layers"], [data-radial-active-submenu="styles"]) #map-options-radial-submenu-layers,
.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"][data-radial-active-submenu="styles"] #map-options-radial-submenu-styles {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1, 1);
    transition-delay: 0s;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles)::-webkit-scrollbar {
    width: 7px;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles)::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(220, 170, 66, 0.62);
    background-clip: padding-box;
}

.map-basemap-section-title:not(:first-child) {
    margin-top: 8px;
}

.map-basemap-catalog-group {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    min-width: 0;
    height: var(--map-layers-row-height);
    min-height: var(--map-layers-row-height);
    box-sizing: border-box;
    padding: 4px 38px 4px 10px;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    overflow: visible;
    border: 1px solid rgba(116, 143, 165, 0.13);
    border-top-color: rgba(116, 143, 165, 0.09);
    border-radius: 0;
    color: rgba(248, 246, 240, 0.94);
    background: linear-gradient(90deg, rgba(19, 47, 73, 0.48), rgba(10, 31, 51, 0.56));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(0.94);
    transform-origin: center bottom;
    transition:
        opacity 160ms ease,
        visibility 0s linear var(--radial-duration),
        transform 200ms var(--radial-ease),
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-basemap-catalog-group > .map-radial-subitem + .map-radial-subitem {
    margin-top: -1px;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-basemap-catalog-group > .map-radial-subitem:first-child {
    border-top-color: rgba(116, 143, 165, 0.18);
    border-radius: 11px 11px 0 0;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-basemap-catalog-group > .map-radial-subitem:last-child {
    border-radius: 0 0 11px 11px;
}

.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"]:is([data-radial-active-submenu="layers"], [data-radial-active-submenu="styles"]) #map-options-radial-submenu-layers .map-radial-subitem,
.map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"][data-radial-active-submenu="styles"] #map-options-radial-submenu-styles .map-radial-subitem {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay:
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        0s,
        0s;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem:is(:hover, :focus-visible) {
    z-index: 1;
    border-color: rgba(230, 186, 94, 0.38);
    color: #fff3c6;
    background: linear-gradient(90deg, rgba(26, 58, 87, 0.8), rgba(13, 38, 61, 0.78));
    box-shadow:
        inset 3px 0 0 rgba(238, 190, 92, 0.74),
        inset 0 0 18px rgba(239, 181, 60, 0.045);
    outline: none;
    transform: translate3d(0, 0, 0) scale(1);
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem:is(.active, [aria-current="true"], [aria-checked="true"], [aria-pressed="true"]) {
    z-index: 2;
    border-color: rgba(240, 194, 101, 0.86);
    color: #fff4c5;
    background:
        radial-gradient(circle at 10% 50%, rgba(255, 219, 127, 0.11), transparent 24%),
        linear-gradient(90deg, rgba(31, 61, 86, 0.86), rgba(14, 37, 57, 0.88));
    box-shadow:
        0 0 14px rgba(231, 171, 52, 0.2),
        inset 0 0 0 1px rgba(255, 238, 190, 0.08),
        inset 4px 0 12px rgba(238, 177, 48, 0.08);
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem-core {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem-core::before,
.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem-core::after {
    content: none;
    display: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem-label {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: currentColor;
    background: transparent;
    box-shadow: none;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.84rem;
    font-weight: 520;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    text-overflow: ellipsis;
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 4px rgba(232, 173, 54, 0.18));
}

.map-radial-options-launcher.map-radial-catalog-launcher :is(#map-options-radial-submenu-layers, #map-options-radial-submenu-styles) .map-radial-subitem:is(.active, [aria-current="true"], [aria-checked="true"], [aria-pressed="true"])::after {
    content: "✓";
    position: absolute;
    top: 50%;
    right: 14px;
    color: #f4ca70;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 8px rgba(246, 197, 91, 0.34);
    transform: translateY(-50%);
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-layers .map-radial-display-mode-panel {
    display: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-styles {
    right: calc(var(--map-layers-panel-width) + 14px);
    width: min(258px, calc(100vw - var(--map-layers-panel-width) - 48px));
    clip-path: none;
    transform: translate3d(18px, 0, 0) scale(0.98);
    transform-origin: right bottom;
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-styles .map-radial-subitem {
    height: 40px;
    min-height: 40px;
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-layers .map-radial-provider-subitem[data-radial-provider-has-styles="true"] {
    padding-right: 10px;
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-layers .map-radial-provider-subitem[data-radial-provider-has-styles="true"]::before {
    content: none;
    display: none;
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-layers .map-radial-provider-subitem[data-radial-provider-has-styles="true"] .map-radial-subitem-label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: auto;
    left: 2px;
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.82;
    transform: translateY(-50%) rotate(-135deg);
}

.map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-layers .map-radial-provider-subitem[data-radial-provider-has-styles="true"] .map-radial-subitem-label {
    position: relative;
    padding-left: 15px;
}

.map-basemap-styles-back {
    display: none;
}

@media (any-pointer: coarse) and (max-width: 1366px) {
    .map-radial-pin {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .map-radial-options-launcher.map-radial-catalog-launcher[data-radial-open="true"][data-radial-active-submenu="styles"] #map-options-radial-submenu-layers {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 8px, 0) scale(0.985);
    }

    .map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-styles {
        right: 0;
        width: var(--map-layers-panel-width);
    }

    .map-radial-options-launcher.map-radial-catalog-launcher #map-options-radial-submenu-styles .map-basemap-styles-back {
        display: flex;
        width: 100%;
        min-height: 40px;
        margin-bottom: 8px;
        padding: 4px 10px;
        align-items: center;
        gap: 10px;
        border: 1px solid rgba(230, 186, 94, 0.28);
        border-radius: 10px;
        color: #f4ca70;
        background: rgba(8, 28, 47, 0.72);
    }

    .map-basemap-styles-back-icon {
        font-size: 1rem;
        line-height: 1;
    }
}

.map-radial-rail-launcher.map-radial-layers-launcher .map-radial-pin {
    top: 7px;
    right: 7px;
    bottom: auto;
    left: auto;
    z-index: 8;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    transform: translate3d(0, -3px, 0) scale(0.86);
}

.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-open="true"] .map-radial-pin,
.map-radial-rail-launcher.map-radial-layers-launcher[data-radial-pinned="true"] .map-radial-pin {
    transform: translate3d(0, 0, 0) scale(1);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
    top: 190px;
    right: calc(var(--map-layers-panel-width) + 14px);
    width: min(258px, calc(100vw - var(--map-layers-panel-width) - 48px));
}

@media (max-height: 720px) and (min-width: 721px) {
    .map-view-switches .map-radial-launcher.map-radial-layers-launcher {
        --map-layers-row-height: 40px;
    }

    .map-radial-layers-launcher > #map-layers-radial-menu {
        padding-top: 11px;
    }

    .map-layers-section-title {
        min-height: 32px;
        font-size: 0.64rem;
    }

    .map-radial-layers-launcher > #map-layers-radial-menu .map-radial-layer-icon {
        width: 29px;
        height: 29px;
    }
}

@media (max-width: 720px) {
    .plan-actions-menu-content .map-radial-launcher.map-radial-layers-launcher {
        --map-layers-panel-width: 100%;
    }

    .plan-actions-menu-content .map-radial-layers-launcher > #map-layers-radial-menu {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-height: min(62vh, 560px);
        margin-top: 8px;
    }

    .plan-actions-menu-content .map-radial-layers-launcher > #map-layers-radial-menu::before {
        content: none;
        display: none;
    }

    .map-radial-layers-launcher [data-map-layers-radial-action="alliances"],
    .map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
        display: none;
    }
}
.map-layers-live-world-submenu .live-world-layer-button {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.live-world-layer-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(196, 211, 224, 0.38);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.live-world-layer-button[data-layer-state="loading"] .live-world-layer-indicator {
    background: #f4c76d;
    animation: live-world-pulse 1.1s ease-in-out infinite;
}

.live-world-layer-button[data-layer-state="ready"] .live-world-layer-indicator,
.live-world-layer-button.active .live-world-layer-indicator {
    background: #7ad9c0;
    box-shadow: 0 0 10px rgba(122, 217, 192, 0.72);
}

.live-world-layer-button[data-layer-state="unavailable"] {
    opacity: 0.58;
}

.live-world-layer-button[data-layer-state="unavailable"] .live-world-layer-indicator {
    background: #d88b78;
}

.map-layers-live-world-submenu :is(.live-world-panel-status, .live-world-attribution) {
    margin: 8px 12px 0;
    color: rgba(232, 240, 247, 0.76);
    font-size: 0.72rem;
    line-height: 1.35;
}

.map-layers-live-world-submenu .live-world-attribution a {
    color: #f4c76d;
}

.map-layers-live-world-submenu .live-world-cloud-controls {
    margin: 10px 10px 2px;
    padding: 10px;
    border: 1px solid rgba(139, 197, 221, 0.22);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(20, 42, 59, 0.88), rgba(12, 28, 42, 0.76));
}

.live-world-cloud-transport {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.live-world-cloud-playback {
    min-width: 64px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid rgba(244, 199, 109, 0.52);
    border-radius: 999px;
    color: #fff4d7;
    background: rgba(244, 199, 109, 0.12);
    font: inherit;
    cursor: pointer;
}

.live-world-cloud-playback:disabled {
    cursor: default;
    opacity: 0.48;
}

.live-world-cloud-transport input[type="range"] {
    width: 100%;
    accent-color: #f4c76d;
}

.map-layers-live-world-submenu .live-world-cloud-controls :is(.live-world-cloud-timestamp, .live-world-cloud-hint) {
    margin: 7px 0 0;
    color: rgba(232, 240, 247, 0.82);
    font-size: 0.7rem;
    line-height: 1.35;
}

.map-layers-live-world-submenu .live-world-cloud-controls .live-world-cloud-hint {
    color: rgba(196, 211, 224, 0.64);
}

@keyframes live-world-pulse {
    50% { opacity: 0.34; transform: scale(0.72); }
}

@media (max-width: 720px) {
    .map-radial-layers-launcher .map-layers-live-world-submenu {
        display: flex;
    }
}


/* Final brand layer: owns palette tokens and precedence-sensitive visual overrides. */

:root {
    --maphora-navy: #0c1b2e;
    --maphora-navy-raised: #142a44;
    --maphora-navy-soft: #203b58;
    --maphora-chrome-gradient: linear-gradient(165deg, var(--maphora-navy-raised), var(--maphora-navy) 74%);
    --maphora-gold: #d4a017;
    --maphora-gold-deep: #a9780e;
    --maphora-ivory: #f7f4ee;
    --maphora-ivory-raised: #fffdf8;
    --maphora-beige: #f3e9d6;
    --maphora-mist: #e5e7eb;
    --maphora-border: rgba(12, 27, 46, 0.13);
    --maphora-border-strong: rgba(12, 27, 46, 0.22);
    --maphora-focus: #0067c0;
    --maphora-focus-width: 3px;
    --maphora-focus-offset: 3px;
    --maphora-title-font: Cambria, Georgia, "Times New Roman", serif;
    --maphora-ui-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;

    --sand-1: rgba(255, 253, 248, 0.965);
    --sand-2: rgba(243, 233, 214, 0.945);
    --panel-compositor-base: #f3e9d6;
    --ink: var(--maphora-navy);
    --forest: #244e46;
    --wine: #8c4338;
    --gold: var(--maphora-gold);
    --shadow: rgba(12, 27, 46, 0.2);
    --map-selection-ring: var(--maphora-gold);
    --map-selection-ring-soft: rgba(212, 160, 23, 0.26);
    --map-selection-shadow: rgba(12, 27, 46, 0.28);
    --scrollbar-track: rgba(12, 27, 46, 0.05);
    --scrollbar-track-strong: rgba(12, 27, 46, 0.08);
    --scrollbar-thumb: rgba(20, 42, 68, 0.36);
    --scrollbar-thumb-hover: rgba(20, 42, 68, 0.54);
    --scrollbar-thumb-border: rgba(247, 244, 238, 0.84);
    --surface-card-bg: rgba(255, 253, 248, 0.64);
    --surface-card-bg-strong: rgba(255, 253, 248, 0.82);
    --surface-card-border: var(--maphora-border);
    --section-heading-color: rgba(12, 27, 46, 0.7);
    --subsection-heading-color: rgba(20, 42, 68, 0.62);
    --app-background: linear-gradient(145deg, #e6edf1, #f7f4ee 42%, #f3e9d6);
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--maphora-ui-font);
}

body {
    color: var(--maphora-navy);
    letter-spacing: 0.005em;
}

.panel:not(.decryption-panel),
.modal-card,
.map-layer-menu,
.tab-switcher-menu,
.player-account-menu {
    border: 1px solid var(--maphora-border);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 44%),
        rgba(247, 244, 238, 0.94);
    box-shadow:
        0 18px 44px rgba(12, 27, 46, 0.13),
        0 3px 10px rgba(12, 27, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px) saturate(1.04);
}

.panel,
.modal-card {
    border-radius: 18px;
}

.panel-title,
.player-auth-heading h2,
.riddle-card-title,
.riddle-detail-title,
.settings-title-stack .panel-title {
    font-family: var(--maphora-title-font);
    color: var(--maphora-navy);
    letter-spacing: -0.018em;
}

.panel-title {
    font-size: 1.48rem;
    line-height: 1.16;
}

.panel-subtitle,
.muted,
.coordinates,
#hint-label {
    color: rgba(20, 42, 68, 0.66);
}

.section-label,
.browser-subsection-label {
    color: rgba(20, 42, 68, 0.64);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.115em;
}

button,
input,
select,
textarea {
    border-color: var(--maphora-border);
    border-radius: 10px;
}

button {
    color: var(--maphora-navy);
    background: rgba(255, 253, 248, 0.76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

button:not(.active-riddle-badge-toggle):not(.active-riddle-bar-toggle):not(.maphora-gallery-card):not(.riddle-detail-cta-primary):not(.riddle-gallery-empty-action):not(.riddle-detail-secondary-action-danger):hover:not(:disabled):not(:where(
    .map-radial-main,
    .map-radial-item,
    .map-radial-subitem,
    .map-radial-pin,
    .decryption-method-button,
    .detection-icon-button,
    .detection-delete-outing-button,
    .detection-finding-list-row,
    .detection-entry-row,
    .detection-workspace-option,
    .solar-system-body-button,
    .map-view-switch,
    .riddle-gallery-nav-button,
    .riddle-gallery-nav-toggle,
    .active-riddle-document-dock-scroll,
    .map-click-menu-action,
    .free-tab-audio-panel button,
    .top-bar button
)) {
    color: var(--maphora-navy);
    border-color: rgba(212, 160, 23, 0.42);
    background: var(--maphora-ivory-raised);
    box-shadow:
        0 7px 18px rgba(12, 27, 46, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--maphora-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.14);
}

button.active,
button[aria-pressed="true"],
button[aria-selected="true"] {
    color: var(--maphora-navy);
    border-color: rgba(212, 160, 23, 0.58);
    background: rgba(212, 160, 23, 0.14);
    box-shadow: inset 0 -2px 0 var(--maphora-gold);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    color: rgba(12, 27, 46, 0.42);
    border-color: rgba(12, 27, 46, 0.08);
    background: rgba(229, 231, 235, 0.72);
    box-shadow: none;
    opacity: 0.68;
}

input,
select,
textarea {
    color: var(--maphora-navy);
    background: rgba(255, 253, 248, 0.88);
    box-shadow: inset 0 1px 2px rgba(12, 27, 46, 0.04);
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
    border-color: rgba(12, 27, 46, 0.24);
}

/* Plan appearance follows the same navy, ivory and gold language as the
   branded map controls. This final layer intentionally replaces the legacy
   green-tinted surface without changing the panel's structure or behavior. */
.plan-appearance-panel.panel {
    border: 1px solid rgba(239, 198, 111, 0.68);
    color: var(--maphora-ivory);
    background:
        radial-gradient(circle at 18% 0%, rgba(67, 104, 142, 0.24), transparent 42%),
        var(--maphora-chrome-gradient);
    box-shadow:
        0 24px 58px rgba(2, 10, 20, 0.42),
        0 0 0 1px rgba(212, 160, 23, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    scrollbar-color: rgba(239, 198, 111, 0.48) rgba(247, 244, 238, 0.06);
}

.plan-appearance-panel .panel-header-row {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(239, 198, 111, 0.22);
}

.plan-appearance-panel .panel-title {
    color: var(--maphora-ivory);
    font-family: var(--maphora-title-font);
    font-size: 1.48rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.018em;
}

.plan-appearance-panel .plan-appearance-subtitle,
.plan-appearance-panel .plan-appearance-help,
.plan-appearance-panel .plan-appearance-source-note,
.plan-appearance-panel .plan-appearance-feature-toggle small,
.plan-appearance-panel .plan-appearance-range output {
    color: rgba(247, 244, 238, 0.7);
}

.plan-appearance-panel .panel-header-actions {
    gap: 7px;
}

.plan-appearance-panel :is(.icon-button, .panel-drag-handle) {
    color: rgba(247, 244, 238, 0.82);
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.plan-appearance-panel .panel-drag-handle::before {
    background:
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.72), rgba(239, 198, 111, 0.72)) center 10px / 12px 1.5px no-repeat;
}

.plan-appearance-panel :is(.icon-button, .panel-drag-handle):hover {
    color: #f4cf70;
    border-color: rgba(239, 198, 111, 0.52);
    background: rgba(212, 160, 23, 0.13);
    box-shadow:
        0 7px 18px rgba(2, 10, 20, 0.24),
        0 0 0 3px rgba(212, 160, 23, 0.1);
    transform: translateY(-1px);
}

.plan-appearance-panel .plan-appearance-tabs {
    gap: 5px;
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(4, 14, 26, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.plan-appearance-panel .plan-appearance-tabs button {
    min-height: 38px;
    color: rgba(247, 244, 238, 0.68);
    background: transparent;
    box-shadow: none;
    font-family: var(--maphora-ui-font);
    font-size: 0.78rem;
    letter-spacing: 0.015em;
    transform: none;
}

.plan-appearance-panel .plan-appearance-tabs button:hover:not(:disabled),
.plan-appearance-panel .plan-appearance-tabs button:focus-visible:not(:disabled) {
    color: var(--maphora-ivory);
    border-color: transparent;
    background: rgba(247, 244, 238, 0.08);
    box-shadow: none;
    transform: none;
}

.plan-appearance-panel .plan-appearance-tabs button.active,
.plan-appearance-panel .plan-appearance-tabs button[aria-selected="true"] {
    color: #f4cf70;
    background: rgba(212, 160, 23, 0.13);
    box-shadow:
        inset 0 -2px 0 var(--maphora-gold),
        0 5px 14px rgba(2, 10, 20, 0.18);
}

.plan-appearance-panel .plan-appearance-choice-grid button {
    min-height: 48px;
    border-color: rgba(247, 244, 238, 0.15);
    color: rgba(247, 244, 238, 0.9);
    background: rgba(247, 244, 238, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    font-family: var(--maphora-ui-font);
    font-size: 0.82rem;
    line-height: 1.25;
}

.plan-appearance-panel .plan-appearance-choice-grid button:hover:not(:disabled),
.plan-appearance-panel .plan-appearance-choice-grid button:focus-visible:not(:disabled) {
    color: var(--maphora-ivory);
    border-color: rgba(239, 198, 111, 0.52);
    background: rgba(247, 244, 238, 0.1);
    box-shadow:
        0 8px 18px rgba(2, 10, 20, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.plan-appearance-panel .plan-appearance-choice-grid button.active,
.plan-appearance-panel .plan-appearance-choice-grid button[aria-pressed="true"] {
    color: #f4cf70;
    border-color: rgba(239, 198, 111, 0.78);
    background: rgba(212, 160, 23, 0.13);
    box-shadow:
        inset 3px 0 0 var(--maphora-gold),
        0 8px 18px rgba(2, 10, 20, 0.2);
}

.plan-appearance-panel .plan-appearance-swatch {
    border-color: rgba(239, 198, 111, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.26),
        0 3px 8px rgba(2, 10, 20, 0.22);
}

.plan-appearance-panel .plan-appearance-range,
.plan-appearance-panel .plan-appearance-feature-toggle strong {
    color: rgba(247, 244, 238, 0.92);
}

.plan-appearance-panel .plan-appearance-range input[type="range"],
.plan-appearance-panel .plan-appearance-feature-toggle input {
    accent-color: var(--maphora-gold);
}

.plan-appearance-panel .plan-appearance-feature-toggle {
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.055);
    transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.plan-appearance-panel .plan-appearance-feature-toggle:hover,
.plan-appearance-panel .plan-appearance-feature-toggle:focus-within {
    border-color: rgba(239, 198, 111, 0.48);
    background: rgba(247, 244, 238, 0.09);
    box-shadow: 0 7px 18px rgba(2, 10, 20, 0.18);
    transform: translateY(-1px);
}

.plan-appearance-panel .plan-appearance-section-title {
    color: #f4cf70;
    font-family: var(--maphora-title-font);
    font-size: 0.92rem;
    letter-spacing: 0.015em;
}

.plan-appearance-panel .plan-appearance-source-note,
.plan-appearance-panel .plan-appearance-footer {
    border-color: rgba(239, 198, 111, 0.18);
}

.plan-appearance-panel .plan-appearance-readonly-note {
    color: rgba(247, 244, 238, 0.78);
    border: 1px solid rgba(239, 198, 111, 0.22);
    background: rgba(212, 160, 23, 0.09);
}

.plan-appearance-panel .plan-appearance-footer .secondary-button {
    min-height: 42px;
    color: rgba(247, 244, 238, 0.84);
    border-color: rgba(247, 244, 238, 0.16);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.plan-appearance-panel .plan-appearance-footer .secondary-button:hover:not(:disabled),
.plan-appearance-panel .plan-appearance-footer .secondary-button:focus-visible:not(:disabled) {
    color: #f4cf70;
    border-color: rgba(239, 198, 111, 0.54);
    background: rgba(212, 160, 23, 0.12);
    box-shadow: 0 7px 18px rgba(2, 10, 20, 0.22);
    transform: translateY(-1px);
}

.plan-appearance-panel :is(button, input, [tabindex]):focus-visible {
    outline: 2px solid #f4cf70;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.18);
}

.plan-appearance-panel::-webkit-scrollbar-track {
    background: rgba(247, 244, 238, 0.055);
}

.plan-appearance-panel::-webkit-scrollbar-thumb {
    border-color: rgba(12, 27, 46, 0.82);
    background: linear-gradient(180deg, rgba(239, 198, 111, 0.62), rgba(169, 120, 14, 0.58));
}

/* Radial controls keep their transparent interaction surface so the global
   button finish never paints a pale capsule behind category labels. */
.map-radial-main,
.map-radial-item,
.map-radial-subitem,
.map-radial-pin,
.map-radial-main:hover:not(:disabled),
.map-radial-item:hover:not(:disabled):not(.active):not([aria-current="true"]):not([aria-expanded="true"]),
.map-radial-subitem:hover:not(:disabled):not(.active):not([aria-current="true"]):not([aria-expanded="true"]),
.map-radial-pin:hover:not(:disabled),
.map-radial-main:focus-visible,
.map-radial-item:focus-visible,
.map-radial-subitem:focus-visible,
.map-radial-pin:focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Keep the glow on a dedicated circle aligned with the medallion's visual
   rim, without reintroducing filtered compositor layers over the WebGL map. */
.map-radial-main::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: var(--radial-main-size);
    height: var(--radial-main-size);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.map-radial-main:hover::before,
.map-radial-main:focus-visible::before,
.map-radial-main[aria-expanded="true"]::before {
    box-shadow:
        0 0 0 4px rgba(255, 230, 166, 0.13),
        0 0 18px 5px rgba(255, 220, 128, 0.58),
        0 0 38px 13px rgba(212, 160, 23, 0.3);
}

.map-radial-options-launcher .map-radial-main::before {
    content: none;
}

.map-radial-options-launcher .map-radial-main:focus-visible {
    outline: none;
}

.map-options-main-option {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    width: var(--map-options-main-width);
    min-height: 42px;
    padding: 7px 15px;
    gap: 9px;
    border: 1px solid rgba(231, 187, 93, 0.62);
    border-radius: 22px;
    color: rgba(244, 239, 226, 0.9);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
        linear-gradient(160deg, rgba(13, 35, 58, 0.97), rgba(7, 23, 40, 0.985));
    box-shadow:
        0 12px 30px rgba(2, 9, 16, 0.34),
        inset 0 1px 0 rgba(255, 248, 220, 0.08),
        inset 0 0 0 1px rgba(69, 43, 13, 0.2);
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.78rem;
    font-weight: 560;
    line-height: 1;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

.map-options-main-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #e9b95b;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(239, 184, 67, 0.34));
}

.map-radial-options-launcher .map-radial-main:hover .map-options-main-option,
.map-radial-options-launcher .map-radial-main:focus-visible .map-options-main-option,
.map-radial-options-launcher .map-radial-main[aria-expanded="true"] .map-options-main-option {
    border-color: rgba(244, 215, 125, 0.78);
    color: #fff0c4;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.14), transparent 44%),
        linear-gradient(160deg, rgba(17, 43, 70, 0.98), rgba(8, 26, 45, 0.99));
    box-shadow:
        0 0 0 3px rgba(232, 171, 52, 0.09),
        0 12px 30px rgba(2, 9, 16, 0.38),
        inset 0 1px 0 rgba(255, 248, 220, 0.12);
}

.map-radial-subitem:hover .map-radial-subitem-core,
.map-radial-subitem:focus-visible .map-radial-subitem-core,
.map-radial-subitem.active .map-radial-subitem-core,
.map-radial-subitem[aria-current="true"] .map-radial-subitem-core {
    box-shadow:
        0 0 0 4px rgba(255, 230, 166, 0.12),
        0 0 16px 4px rgba(255, 220, 128, 0.62),
        0 0 34px 11px rgba(212, 160, 23, 0.32);
}

/* Rail selection belongs to the full card; suppress icon halos in this final layer. */
.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core {
    box-shadow: none !important;
}

.map-radial-rail-launcher .map-radial-subitem-core {
    box-shadow: none !important;
}

.map-radial-rail-launcher .map-radial-subitem:focus-visible .map-radial-subitem-core {
    outline: none !important;
    outline-offset: 0 !important;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::before,
.map-radial-rail-launcher > .map-radial-menu .map-radial-item-core::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
}

.map-radial-rail-launcher .map-radial-subitem-core::before,
.map-radial-rail-launcher .map-radial-subitem-core::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
}

.map-radial-rail-launcher > .map-radial-menu .map-radial-item-icon {
    filter: none !important;
}

.map-radial-rail-launcher .map-radial-subitem-icon,
.map-radial-rail-launcher .map-radial-subitem-image {
    filter: none !important;
}

/* Rail submenu rows mirror the primary categories: only a quiet flat tint
   appears during interaction, with no permanent card edge or separator. */
.map-radial-rail-launcher .map-radial-subitem:hover:not(:disabled):not(.active):not([aria-current="true"]):not([aria-expanded="true"]),
.map-radial-rail-launcher .map-radial-subitem:focus-visible:not(:disabled):not(.active):not([aria-current="true"]):not([aria-expanded="true"]) {
    border-color: transparent;
    background: rgba(255, 245, 218, 0.04);
    box-shadow: none;
}

/* Selection remains legible through the same restrained rail accent. */
.map-radial-rail-launcher .map-radial-subitem.active,
.map-radial-rail-launcher .map-radial-subitem[aria-current="true"],
.map-radial-rail-launcher .map-radial-subitem[aria-expanded="true"] {
    border-color: transparent;
    background: rgba(3, 12, 21, 0.42);
    box-shadow:
        inset 3px 0 0 #f4d77d,
        inset 7px 0 16px rgba(238, 177, 48, 0.07);
}

/* Nested rows use the same flat interaction state as final actions. */
.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"]:hover:not(:disabled),
.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"]:focus-visible,
.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"].active,
.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"][aria-current="true"],
.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"][aria-expanded="true"] {
    border-color: transparent;
    color: rgba(255, 249, 235, 0.98);
    background: rgba(3, 12, 21, 0.42);
    box-shadow: inset 3px 0 0 #f4d77d;
}

.map-radial-rail-launcher .map-radial-subitem[aria-haspopup="menu"]:is(:hover, :focus-visible, .active, [aria-current="true"], [aria-expanded="true"]) .map-radial-subitem-label,
.map-radial-rail-launcher .map-radial-subitem:not([aria-haspopup="menu"]):is(:hover, :focus-visible, .active, [aria-current="true"]) .map-radial-subitem-label {
    background: transparent;
    color: currentColor;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.map-radial-item:hover .map-radial-label,
.map-radial-item:focus-visible .map-radial-label,
.map-radial-subitem:hover .map-radial-subitem-label,
.map-radial-subitem:focus-visible .map-radial-subitem-label {
    background: var(--radial-label-bg-hover);
}

/* Main workspace chrome */
.top-bar.panel {
    --top-bar-corner-radius: 18px;
    --top-bar-control-corner-radius: 14px;
    --top-bar-edge-media-corner-radius: calc(var(--top-bar-corner-radius) - 1px);
    min-height: 44px;
    height: 44px;
    padding: 3px 8px;
    gap: 8px;
    border: 1px solid rgba(214, 169, 75, 0.28);
    border-radius: var(--top-bar-corner-radius);
    color: rgba(247, 244, 238, 0.86);
    background: var(--maphora-chrome-gradient);
    box-shadow:
        0 14px 38px rgba(5, 10, 15, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

@media (max-width: 640px) {
    .top-bar.panel {
        height: auto;
        min-height: 52px;
        padding: 6px 8px;
        gap: 8px;
    }

    .top-bar .active-riddle-badge {
        margin-left: 0;
    }
}

/* The active challenge remains identifiable at the compact chrome height. Its
   artwork occupies the full available vertical space without a card frame. */
.top-bar .active-riddle-badge,
.top-bar .active-riddle-badge-entry {
    flex-basis: 62px;
    width: 62px;
    min-width: 62px;
    height: 42px;
    min-height: 42px;
}

.top-bar .active-riddle-badge-card {
    flex-basis: 42px;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
}

.top-bar .active-riddle-badge-entry {
    justify-content: flex-start;
}

.top-bar .active-riddle-badge {
    margin-left: -8px;
}

.top-bar .active-riddle-badge-card,
.top-bar .active-riddle-badge-card:hover,
.top-bar .active-riddle-badge-card.is-selected,
.top-bar .active-riddle-badge-card[data-riddle-session-status="completed"] {
    border: 0;
    border-radius: var(--top-bar-edge-media-corner-radius);
    background: transparent;
    box-shadow: none;
}

.top-bar .active-riddle-badge-card::after {
    content: none;
}

.top-bar .active-riddle-badge-image {
    border: 0;
    border-radius: inherit;
    box-shadow: none;
}

.top-bar-divider {
    width: 1px;
    height: 28px;
    background: rgba(247, 244, 238, 0.12);
    box-shadow: none;
}

.top-bar .tab-selector,
.top-bar .tab-selector-shell.open .tab-selector {
    border: 1px solid rgba(247, 244, 238, 0.1);
    border-radius: var(--top-bar-control-corner-radius);
    background: rgba(247, 244, 238, 0.055);
}

.top-bar .tab-selector-trigger,
.player-session-button {
    color: rgba(247, 244, 238, 0.88);
    background: rgba(247, 244, 238, 0.065);
    border-color: rgba(247, 244, 238, 0.11);
}

.top-bar .active-riddle-badge-toggle {
    color: rgba(247, 244, 238, 0.88);
    border-color: transparent;
    background: rgba(247, 244, 238, 0.065);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.08);
    transform: none;
}

/* The selected riddle is expressed with aria-pressed on both halves of the
   control. Keep that semantic state, but do not inherit the generic selected
   button underline on the narrow chevron half. */
.top-bar .active-riddle-badge-toggle:is(.is-selected, [aria-pressed="true"]) {
    color: rgba(247, 244, 238, 0.88);
    border-color: transparent;
    background: rgba(247, 244, 238, 0.09);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.08);
    transform: none;
}

.top-bar .tab-selector-trigger,
.top-bar .tab-selector-toggle {
    border-radius: var(--top-bar-control-corner-radius);
}

@media (any-pointer: fine) {
    .top-bar .player-session-button,
    .top-bar .player-session-chip.is-pro .player-session-button {
        border-radius: var(--top-bar-control-corner-radius);
    }
}

.top-bar .icon-button,
.top-bar-icon-button {
    color: rgba(247, 244, 238, 0.78);
    background: rgba(247, 244, 238, 0.065);
    border-color: rgba(247, 244, 238, 0.11);
}

.icon-button,
.modal-close-button {
    color: rgba(12, 27, 46, 0.78);
    background: rgba(255, 253, 248, 0.72);
    border-color: rgba(12, 27, 46, 0.1);
}

/* All plan actions share one control silhouette, regardless of whether they
   belong to tab management or document actions. */
.top-bar .tab-add,
.top-bar .tab-close,
.top-bar .tab-save {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(247, 244, 238, 0.11);
    border-radius: 10px;
    color: rgba(247, 244, 238, 0.78);
    background: rgba(247, 244, 238, 0.065);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.top-bar .tab-selector-trigger:hover:not(:disabled),
.top-bar .tab-selector-trigger:focus-visible:not(:disabled),
.top-bar .tab-selector-toggle:hover:not(:disabled),
.top-bar .tab-selector-toggle:focus-visible:not(:disabled),
.player-session-button:hover:not(:disabled),
.player-session-button:focus-visible:not(:disabled),
.top-bar .icon-button:hover:not(:disabled),
.top-bar .icon-button:focus-visible:not(:disabled),
.top-bar-icon-button:hover:not(:disabled),
.top-bar-icon-button:focus-visible:not(:disabled),
.top-bar .tab-add:hover:not(:disabled),
.top-bar .tab-add:focus-visible:not(:disabled),
.top-bar .tab-save:hover:not(:disabled),
.top-bar .tab-save:focus-visible:not(:disabled) {
    border-color: rgba(225, 183, 92, 0.44);
    color: #f2ca72;
    background: linear-gradient(180deg, rgba(226, 181, 84, 0.15), rgba(191, 142, 47, 0.08));
    box-shadow:
        0 7px 18px rgba(5, 10, 15, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.075);
    transform: translateY(-1px);
}

.top-bar .active-riddle-badge-toggle:hover:not(:disabled),
.top-bar .active-riddle-badge-toggle:focus-visible:not(:disabled) {
    color: #f2ca72;
    border-color: transparent;
    background: rgba(247, 244, 238, 0.12);
    box-shadow: inset 1px 0 0 rgba(247, 244, 238, 0.12);
    outline: none;
    outline-offset: 0;
    transform: none;
}

.top-bar .tab-selector-toggle {
    color: rgba(247, 244, 238, 0.68);
}

.top-bar .tab-selector-toggle:hover:not(:disabled),
.top-bar .tab-selector-toggle:focus-visible:not(:disabled) {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
    transform: none;
}

.tab-title-input,
.tab-selector-input {
    color: rgba(247, 244, 238, 0.92);
    border-color: rgba(225, 183, 92, 0.36);
    background: rgba(5, 12, 18, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.top-bar-plan-divider {
    background: linear-gradient(
        180deg,
        rgba(247, 244, 238, 0.03),
        rgba(225, 183, 92, 0.34) 50%,
        rgba(247, 244, 238, 0.03)
    );
    box-shadow: none;
}

.top-bar .panel-drag-handle {
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(247, 244, 238, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.top-bar .panel-drag-handle::before {
    background:
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 10px / 12px 1.5px no-repeat;
}

.top-bar .panel-drag-handle:hover {
    border-color: rgba(225, 183, 92, 0.42);
    background: rgba(226, 181, 84, 0.12);
}

.top-bar .tab-close:hover:not(:disabled),
.top-bar .tab-close:focus-visible:not(:disabled) {
    border-color: #c9473b;
    color: #fffaf2;
    background: #c9473b;
    box-shadow: 0 7px 16px rgba(164, 45, 35, 0.24);
    transform: translateY(-1px);
}

/* Active challenge controls share the workspace's ivory/navy chrome. */
.active-riddle-badge-actions {
    gap: 7px;
}

.active-riddle-badge-action {
    min-width: 176px;
    padding: 9px 13px;
    border: 1px solid rgba(12, 27, 46, 0.12);
    border-radius: 10px;
    color: var(--maphora-navy);
    background: rgba(255, 253, 248, 0.94);
    box-shadow:
        0 8px 20px rgba(12, 27, 46, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.active-riddle-badge-action:hover:not(:disabled),
.active-riddle-badge-action:focus-visible:not(:disabled) {
    color: var(--maphora-navy);
    border-color: rgba(212, 160, 23, 0.46);
    background: #fffdf8;
    box-shadow:
        0 10px 24px rgba(12, 27, 46, 0.15),
        0 0 0 3px rgba(212, 160, 23, 0.1);
    transform: translateY(-1px);
}

.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"]) {
    color: #8f3934;
    border-color: rgba(143, 57, 52, 0.2);
    background: rgba(255, 250, 247, 0.95);
}

.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"]):hover:not(:disabled),
.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"]):focus-visible:not(:disabled) {
    color: #fffaf2;
    border-color: #c9473b;
    background: #c9473b;
    box-shadow: 0 10px 22px rgba(164, 45, 35, 0.22);
}

body[data-theme="dark"] .top-bar .tab-add,
body[data-theme="dark"] .top-bar .tab-close,
body[data-theme="dark"] .top-bar .tab-save {
    border-color: rgba(247, 244, 238, 0.12);
    color: rgba(247, 244, 238, 0.84);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] .top-bar .tab-close:hover:not(:disabled),
body[data-theme="dark"] .top-bar .tab-close:focus-visible:not(:disabled) {
    border-color: #dc5b4d;
    color: #fffaf2;
    background: #dc5b4d;
}

body[data-theme="dark"] .active-riddle-badge-action {
    color: rgba(247, 244, 238, 0.9);
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(12, 27, 46, 0.96);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] .active-riddle-badge-action:hover:not(:disabled),
body[data-theme="dark"] .active-riddle-badge-action:focus-visible:not(:disabled) {
    color: var(--maphora-ivory);
    border-color: rgba(212, 160, 23, 0.5);
    background: rgba(20, 42, 68, 0.98);
}

/* Desktop and tablet: the active-riddle disclosure belongs to the same navy
   and brass visual system as the top bar. Mobile keeps the compact legacy
   disclosure below 721px, where persistent shortcuts would cover the map. */
@media (min-width: 721px) {
    .active-riddle-badge-actions,
    .active-riddle-badge-pinned-actions {
        left: 0;
        transform: none;
        width: 236px;
        padding: 6px;
        gap: 0;
        border: 1px solid rgba(225, 183, 92, 0.32);
        border-radius: 14px;
        color: rgba(247, 244, 238, 0.92);
        background:
            radial-gradient(circle at 18% 0%, rgba(225, 183, 92, 0.11), transparent 38%),
            linear-gradient(155deg, rgba(18, 40, 64, 0.98), rgba(7, 19, 32, 0.98));
        box-shadow:
            0 18px 42px rgba(3, 10, 18, 0.38),
            inset 0 1px 0 rgba(255, 244, 200, 0.08);
        backdrop-filter: blur(16px) saturate(1.08);
        -webkit-backdrop-filter: blur(16px) saturate(1.08);
    }

    .active-riddle-badge-actions::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 23px;
        width: 9px;
        height: 9px;
        border-top: 1px solid rgba(225, 183, 92, 0.32);
        border-left: 1px solid rgba(225, 183, 92, 0.32);
        background: rgba(18, 40, 64, 0.98);
        transform: rotate(45deg);
    }

    .active-riddle-badge-action-row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px;
        align-items: stretch;
        min-height: 42px;
        border-bottom: 1px solid rgba(247, 244, 238, 0.09);
    }

    .active-riddle-badge-action-row:last-child {
        border-bottom: 0;
    }

    .active-riddle-badge-action-row .active-riddle-badge-action {
        min-width: 0;
        max-width: none;
        width: auto;
        padding: 10px 10px 10px 12px;
        border: 0;
        border-radius: 8px 0 0 8px;
        color: rgba(247, 244, 238, 0.91);
        background: transparent;
        box-shadow: none;
        text-align: left;
        transform: none;
    }

    .active-riddle-badge-action-row .active-riddle-badge-action:hover:not(:disabled),
    .active-riddle-badge-action-row .active-riddle-badge-action:focus-visible:not(:disabled) {
        color: #f5d58d;
        border: 0;
        background: linear-gradient(90deg, rgba(225, 183, 92, 0.14), rgba(225, 183, 92, 0.035));
        box-shadow: inset 3px 0 0 rgba(225, 183, 92, 0.72);
        outline: none;
        transform: none;
    }

    .active-riddle-badge-pin {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        margin: 3px 0;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border: 0;
        border-left: 1px solid rgba(247, 244, 238, 0.08);
        border-radius: 0 8px 8px 0;
        color: rgba(247, 244, 238, 0.52);
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
    }

    .active-riddle-badge-pin:hover:not(:disabled),
    .active-riddle-badge-pin:focus-visible:not(:disabled) {
        color: #f2ca72;
        background: rgba(225, 183, 92, 0.11);
        box-shadow: inset 0 0 0 1px rgba(225, 183, 92, 0.16);
        outline: none;
        transform: none;
    }

    .active-riddle-badge-pin.is-pinned {
        color: #f2ca72;
        background: rgba(225, 183, 92, 0.15);
        box-shadow: inset 0 0 0 1px rgba(225, 183, 92, 0.22);
    }

    .active-riddle-badge-pin-icon {
        width: 17px;
        height: 17px;
        display: block;
        transition: transform 160ms ease, fill 160ms ease;
        transform: rotate(-38deg);
    }

    .active-riddle-badge-pin.is-pinned .active-riddle-badge-pin-icon {
        fill: currentColor;
        transform: rotate(0deg);
    }

    .active-riddle-badge-action-row:has(.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"])) .active-riddle-badge-action {
        color: #ef9b91;
        background: transparent;
    }

    .active-riddle-badge-action-row:has(.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"])) .active-riddle-badge-action:hover:not(:disabled),
    .active-riddle-badge-action-row:has(.active-riddle-badge-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"])) .active-riddle-badge-action:focus-visible:not(:disabled) {
        color: #ffd7d1;
        background: linear-gradient(90deg, rgba(201, 71, 59, 0.22), rgba(201, 71, 59, 0.035));
        box-shadow: inset 3px 0 0 rgba(220, 91, 77, 0.76);
    }

    .active-riddle-badge-pinned-actions {
        position: absolute;
        top: calc(100% + 10px);
        z-index: 5600;
        display: grid;
        padding: 5px;
    }

    .active-riddle-badge-entry.is-open .active-riddle-badge-pinned-actions {
        display: none;
    }

    .active-riddle-badge-pinned-action {
        min-width: 0;
        max-width: none;
        width: 100%;
        padding: 9px 12px;
        border: 0;
        border-radius: 8px;
        color: rgba(247, 244, 238, 0.91);
        background: transparent;
        box-shadow: inset 3px 0 0 rgba(225, 183, 92, 0.58);
        text-align: left;
        transform: none;
    }

    .active-riddle-badge-pinned-action:hover:not(:disabled),
    .active-riddle-badge-pinned-action:focus-visible:not(:disabled) {
        color: #f5d58d;
        border: 0;
        background: rgba(225, 183, 92, 0.11);
        box-shadow: inset 3px 0 0 rgba(225, 183, 92, 0.82);
        outline: none;
        transform: none;
    }

    .active-riddle-badge-pinned-action:is([data-riddle-detail-action="stop-session"], [data-riddle-detail-action="close-quest"]) {
        color: #ef9b91;
        box-shadow: inset 3px 0 0 rgba(220, 91, 77, 0.68);
    }
}

@media (max-width: 720px) {
    .active-riddle-badge-action-row {
        display: contents;
    }

    .active-riddle-badge-pin,
    .active-riddle-badge-pinned-actions {
        display: none !important;
    }
}

@media (min-width: 721px) {
    .active-riddle-bar.panel {
        --active-riddle-bar-radius: 18px;
        width: min(400px, calc(100vw - 24px));
        min-width: 360px;
        border: 1px solid rgba(214, 169, 75, 0.46);
        border-radius: var(--active-riddle-bar-radius);
        color: rgba(247, 244, 238, 0.92);
        background:
            radial-gradient(ellipse at 0% 0%, rgba(225, 183, 92, 0.08), transparent 55%),
            linear-gradient(150deg, rgba(14, 29, 42, 0.98), rgba(4, 14, 24, 0.99));
        box-shadow: 0 18px 44px rgba(3, 10, 18, 0.38), inset 0 1px 0 rgba(255, 244, 200, 0.1);
        backdrop-filter: blur(18px) saturate(1.08);
        -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    .active-riddle-bar-header { border-bottom: 0; }
    .active-riddle-bar.is-collapsed .active-riddle-bar-header { border-bottom: 0; }

    .active-riddle-bar-category-icon,
    .active-riddle-bar-title { color: #d2c8a6; }

    .active-riddle-bar-toggle {
        border-radius: 0;
        color: #f2ca72;
    }

    .active-riddle-bar.is-collapsed .active-riddle-bar-toggle {
        border-radius: 0;
    }

    .active-riddle-bar-toggle:hover:not(:disabled),
    .active-riddle-bar-toggle:focus-visible:not(:disabled) {
        color: #ffe3a0;
        border-color: transparent;
        background: rgba(225, 183, 92, 0.12);
        box-shadow: none;
        outline: none;
        transform: none;
    }

    .active-riddle-bar .panel-drag-handle {
        border-color: rgba(247, 244, 238, 0.1);
        background: rgba(247, 244, 238, 0.055);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .active-riddle-bar .panel-drag-handle::before {
        background:
            linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 2px / 12px 1.5px no-repeat,
            linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 6px / 12px 1.5px no-repeat,
            linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 10px / 12px 1.5px no-repeat;
    }

    .active-riddle-bar .panel-drag-handle:hover {
        border-color: rgba(225, 183, 92, 0.42);
        background: rgba(226, 181, 84, 0.12);
    }

    .active-riddle-desktop-image {
        border: 1px solid rgba(225, 183, 92, 0.48);
        box-shadow: 0 10px 22px rgba(2, 8, 14, 0.3);
    }

    .active-riddle-desktop-title {
        color: rgba(255, 250, 241, 0.96);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
    }

    .active-riddle-desktop-action {
        border: 1px solid rgba(225, 183, 92, 0.34);
        border-radius: 8px;
        color: rgba(255, 250, 241, 0.9);
        background: rgba(7, 19, 32, 0.42);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 16px rgba(2, 8, 14, 0.18);
        transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    .active-riddle-desktop-action:hover:not(:disabled),
    .active-riddle-desktop-action:focus-visible:not(:disabled) {
        color: #f7d98e;
        border-color: rgba(242, 202, 114, 0.72);
        background: rgba(225, 183, 92, 0.14);
        box-shadow: 0 9px 20px rgba(2, 8, 14, 0.24), 0 0 0 3px rgba(225, 183, 92, 0.08);
        outline: none;
        transform: translateY(-1px);
    }

    .active-riddle-desktop-action:disabled { opacity: 0.38; cursor: not-allowed; }

    .active-riddle-desktop-action-stop-session,
    .active-riddle-desktop-action-close-quest {
        color: #efaaa2;
        border-color: rgba(220, 91, 77, 0.36);
    }

    .active-riddle-desktop-action-stop-session:hover:not(:disabled),
    .active-riddle-desktop-action-stop-session:focus-visible:not(:disabled),
    .active-riddle-desktop-action-close-quest:hover:not(:disabled),
    .active-riddle-desktop-action-close-quest:focus-visible:not(:disabled) {
        color: #fff5ee;
        border-color: #dc5b4d;
        background: rgba(201, 71, 59, 0.7);
    }

}

.inspector:not(.riddle-gallery-panel):not(.decryption-panel):not(.achievements-panel) {
    width: 380px;
}

/* Properties share the same navy lacquer as the permanent side rails and the
   workspace controls. Keep editable fields slightly recessed so the dense
   form remains easy to scan without bringing back an ivory outer window. */
#inspector-panel.inspector {
    color: rgba(247, 244, 238, 0.9);
    border-color: rgba(214, 169, 75, 0.3);
    background: var(--maphora-chrome-gradient);
    box-shadow:
        0 18px 44px rgba(3, 10, 18, 0.38),
        0 0 24px rgba(9, 24, 40, 0.2),
        inset 0 1px 0 rgba(255, 244, 200, 0.1);
}

#inspector-panel .panel-title,
#inspector-panel .marker-browser-header strong,
#inspector-panel .inspector-group-title {
    color: var(--maphora-ivory);
}

#inspector-panel.inspector .panel-header-row {
    border-bottom-color: rgba(247, 244, 238, 0.1);
}

#inspector-panel .section-label,
#inspector-panel .browser-subsection-label,
#inspector-panel .inspector-ungrouped-label,
#inspector-panel .marker-browser-body,
#inspector-panel .marker-browser-editor label,
#inspector-panel .inspector-group-empty {
    color: rgba(247, 244, 238, 0.72);
}

#inspector-panel .altitude-provider-section-title {
    color: rgba(247, 244, 238, 0.72);
}

#inspector-panel .altitude-provider-row {
    color: rgba(247, 244, 238, 0.82);
    background: rgba(247, 244, 238, 0.06);
}

#inspector-panel .altitude-provider-row.primary {
    color: rgba(255, 248, 235, 0.94);
    background: rgba(76, 109, 95, 0.24);
}

#inspector-panel .altitude-provider-value {
    color: rgba(255, 248, 235, 0.92);
}

#inspector-panel .altitude-provider-empty {
    color: rgba(247, 244, 238, 0.68);
    background: rgba(247, 244, 238, 0.05);
}

#inspector-panel .altitude-properties-separator {
    background: rgba(247, 244, 238, 0.12);
}

#inspector-panel .marker-browser-card,
#inspector-panel .inspector-group-card,
#inspector-panel .panel-disclosure,
#inspector-panel .panel-disclosure-body {
    border-color: rgba(247, 244, 238, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
        rgba(12, 27, 46, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

#inspector-panel .shape-radiance-controls {
    border-color: rgba(247, 244, 238, 0.12);
    background: rgba(5, 14, 25, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#inspector-panel .shape-radiance-heading {
    color: rgba(247, 244, 238, 0.66);
}

#inspector-panel .marker-browser-header:hover,
#inspector-panel .marker-browser-card.expanded .marker-browser-header,
#inspector-panel .inspector-group-toggle:hover,
#inspector-panel .inspector-group-card:not(.collapsed) .inspector-group-toggle {
    background: rgba(247, 244, 238, 0.075);
}

#inspector-panel .line-style-field-label {
    color: rgba(247, 244, 238, 0.72);
}

#inspector-panel .line-style-toggle,
#inspector-panel .line-style-option {
    color: var(--line-style-color, var(--maphora-ivory));
    border-color: rgba(247, 244, 238, 0.15);
    background: rgba(5, 14, 25, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transform: none;
}

#inspector-panel .line-style-toggle:hover,
#inspector-panel .line-style-toggle:focus-visible,
#inspector-panel .line-style-option:hover,
#inspector-panel .line-style-option:focus-visible {
    color: var(--line-style-color, var(--maphora-ivory));
    border-color: rgba(239, 198, 111, 0.48);
    background: rgba(239, 198, 111, 0.1);
    box-shadow: none;
    transform: none;
}

#inspector-panel .line-style-option[aria-selected="true"] {
    border-color: rgba(239, 198, 111, 0.62);
    background: rgba(239, 198, 111, 0.16);
}

#inspector-panel .line-style-menu {
    border-color: rgba(247, 244, 238, 0.15);
    background: rgba(5, 14, 25, 0.98);
}

#inspector-panel textarea,
#inspector-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#inspector-panel select {
    border-color: rgba(247, 244, 238, 0.15);
    color: var(--maphora-ivory);
    background: rgba(5, 14, 25, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#inspector-panel input::placeholder,
#inspector-panel textarea::placeholder {
    color: rgba(247, 244, 238, 0.48);
}

#inspector-panel .icon-button,
#inspector-panel .panel-drag-handle,
#inspector-panel .inspector-group-create,
#inspector-panel .inspector-group-action {
    color: rgba(247, 244, 238, 0.82);
    border-color: rgba(247, 244, 238, 0.12);
    background: rgba(247, 244, 238, 0.065);
}

#inspector-panel .panel-drag-handle::before {
    background:
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(239, 198, 111, 0.62), rgba(239, 198, 111, 0.62)) center 10px / 12px 1.5px no-repeat;
}

#inspector-panel .marker-browser-grip {
    opacity: 0.58;
    background-image:
        radial-gradient(circle, rgba(247, 244, 238, 0.62) 1.2px, transparent 1.3px),
        radial-gradient(circle, rgba(247, 244, 238, 0.62) 1.2px, transparent 1.3px);
}

#inspector-panel .marker-browser-chevron,
#inspector-panel .inspector-group-chevron {
    border-right-color: rgba(247, 244, 238, 0.68);
    border-bottom-color: rgba(247, 244, 238, 0.68);
}

.panel-header-row {
    border-bottom-color: rgba(12, 27, 46, 0.08);
}

.selection-list-item,
.settings-section,
.settings-profile-card,
.search-result-card,
.panel-disclosure,
.panel-disclosure-body {
    border-color: rgba(12, 27, 46, 0.1);
    background-color: rgba(255, 253, 248, 0.58);
}

/* Inspector rows stay visually stable on hover. Feedback is carried by the
   label and fine accents instead of repainting the entire row in white. */
#inspector-panel .browser-section-toggle:hover:not(:disabled),
#inspector-panel .browser-section-toggle:focus-visible:not(:disabled),
#inspector-panel .marker-browser-header:hover:not(:disabled),
#inspector-panel .marker-browser-header:focus-visible:not(:disabled) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

#inspector-panel .marker-browser-card:not(.expanded):hover {
    border-color: rgba(212, 160, 23, 0.24);
    box-shadow: 0 5px 14px rgba(12, 27, 46, 0.055);
}

#inspector-panel .marker-browser-header strong,
#inspector-panel .browser-section-heading {
    transition: color 150ms ease, text-shadow 150ms ease, letter-spacing 150ms ease;
}

/* Section toggles are rebuilt when opened or closed. Applying their hover
   treatment immediately prevents the replacement node from replaying the
   transition while the pointer has not moved. */
#inspector-panel .browser-section-heading {
    transition: none;
}

#inspector-panel .browser-section-toggle:active:not(:disabled) {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
}

#inspector-panel .marker-browser-header:hover strong,
#inspector-panel .marker-browser-header:focus-visible strong,
#inspector-panel .browser-section-toggle:hover .browser-section-heading,
#inspector-panel .browser-section-toggle:focus-visible .browser-section-heading {
    color: var(--maphora-gold-deep);
    letter-spacing: 0.012em;
    text-shadow: 0 0 12px rgba(212, 160, 23, 0.13);
}

#inspector-panel .marker-browser-header:hover .marker-browser-chevron,
#inspector-panel .marker-browser-header:focus-visible .marker-browser-chevron,
#inspector-panel .browser-section-toggle:hover .browser-section-chevron,
#inspector-panel .browser-section-toggle:focus-visible .browser-section-chevron {
    border-color: var(--maphora-gold-deep);
}

#inspector-panel .marker-browser-header:hover strong,
#inspector-panel .marker-browser-header:focus-visible strong,
#inspector-panel .browser-section-toggle:hover .browser-section-heading,
#inspector-panel .browser-section-toggle:focus-visible .browser-section-heading {
    color: #efc66f;
    text-shadow: 0 0 12px rgba(239, 198, 111, 0.18);
}

#inspector-panel .marker-browser-header:hover .marker-browser-chevron,
#inspector-panel .marker-browser-header:focus-visible .marker-browser-chevron,
#inspector-panel .browser-section-toggle:hover .browser-section-chevron,
#inspector-panel .browser-section-toggle:focus-visible .browser-section-chevron {
    border-color: #efc66f;
}

/* Account reuses the Preferences dialog shell and component language. */
#settings-dialog.modal-card-settings,
#account-dialog.account-card {
    top: 50%;
    width: min(572px, calc(100vw - 32px));
    max-height: min(780px, calc(100vh - 40px));
    transform: translate(-50%, -50%);
}

#account-dialog.account-card {
    padding: 16px;
    border: 1px solid var(--maphora-border);
    border-radius: 18px;
    color: var(--maphora-navy);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 44%),
        rgba(247, 244, 238, 0.96);
    box-shadow:
        0 18px 44px rgba(12, 27, 46, 0.13),
        0 3px 10px rgba(12, 27, 46, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#account-dialog.account-card::before,
#account-dialog.account-card::after,
#account-dialog .account-title-ornament {
    content: none;
    display: none;
}

#account-dialog .account-modal-header {
    align-items: center;
    margin: 0;
}

#account-dialog .account-title-block {
    display: grid;
    min-width: 0;
    gap: 4px;
}

#account-dialog #account-title {
    margin: 0;
    font-family: var(--maphora-title-font);
    font-size: 1.48rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.018em;
    color: var(--maphora-navy);
    text-shadow: none;
}

#account-dialog .account-modal-body {
    align-content: start;
    gap: 12px;
    margin-top: 14px;
    padding: 0 14px 0 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

#account-dialog .account-modal-body::-webkit-scrollbar {
    width: 12px;
}

#account-dialog .account-modal-body::-webkit-scrollbar-track {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--scrollbar-track), var(--scrollbar-track-strong));
}

#account-dialog .account-modal-body::-webkit-scrollbar-thumb {
    border: 2px solid var(--scrollbar-thumb-border);
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
}

#account-dialog .settings-profile-card,
#account-dialog .player-profile-card,
#account-dialog .player-upgrade-pro-card,
#account-dialog .player-pro-subscription-card,
#account-dialog .player-privacy-card,
#account-dialog .player-account-logout-card,
#account-dialog .settings-profile-reset-card,
#account-dialog .player-consent-card {
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(12, 27, 46, 0.1);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.62), rgba(255, 253, 248, 0.34)),
        rgba(20, 42, 68, 0.035);
    box-shadow: none;
}

#account-dialog .player-profile-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    border-color: rgba(20, 42, 68, 0.12);
    background: rgba(20, 42, 68, 0.055);
}

#account-dialog .player-profile-copy strong,
#account-dialog .player-privacy-service-row strong,
#account-dialog .player-privacy-services-heading,
#account-dialog .settings-subtle-toggle-copy strong {
    color: var(--maphora-navy);
    font-family: var(--maphora-ui-font);
}

#account-dialog .player-profile-copy small,
#account-dialog .settings-profile-helper,
#account-dialog .player-privacy-service-row small,
#account-dialog .settings-subtle-toggle-copy small {
    color: rgba(20, 42, 68, 0.62);
}

#account-dialog .player-privacy-actions {
    gap: 8px;
}

#account-dialog .player-privacy-actions button,
#account-dialog #player-account-logout,
#account-dialog #reset-profile-button {
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 10px;
    font-family: var(--maphora-ui-font);
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

#account-dialog .player-privacy-actions .player-primary-button {
    color: var(--maphora-navy);
    border-color: rgba(12, 27, 46, 0.12);
    background: rgba(20, 42, 68, 0.075);
    box-shadow: none;
    text-shadow: none;
}

#account-dialog .player-privacy-actions .secondary-button,
#account-dialog #player-account-logout,
#account-dialog #reset-profile-button {
    color: var(--maphora-navy);
    border-color: rgba(12, 27, 46, 0.1);
    background: rgba(255, 253, 248, 0.72);
    box-shadow: none;
}

#account-dialog #player-delete-account {
    color: #8c3934;
    border-color: rgba(140, 57, 52, 0.2);
    background: rgba(140, 57, 52, 0.075);
    box-shadow: none;
}

body[data-theme="dark"] #account-dialog.account-card {
    color: var(--maphora-ivory);
    border-color: rgba(247, 244, 238, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
        rgba(12, 27, 46, 0.96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] #account-dialog #account-title,
body[data-theme="dark"] #account-dialog .player-profile-copy strong,
body[data-theme="dark"] #account-dialog .player-privacy-service-row strong,
body[data-theme="dark"] #account-dialog .player-privacy-services-heading,
body[data-theme="dark"] #account-dialog .settings-subtle-toggle-copy strong {
    color: var(--maphora-ivory);
    text-shadow: none;
}

body[data-theme="dark"] #account-dialog .settings-profile-card,
body[data-theme="dark"] #account-dialog .player-profile-card,
body[data-theme="dark"] #account-dialog .player-upgrade-pro-card,
body[data-theme="dark"] #account-dialog .player-pro-subscription-card,
body[data-theme="dark"] #account-dialog .player-privacy-card,
body[data-theme="dark"] #account-dialog .player-account-logout-card,
body[data-theme="dark"] #account-dialog .settings-profile-reset-card,
body[data-theme="dark"] #account-dialog .player-consent-card {
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(247, 244, 238, 0.045);
    box-shadow: none;
}

/* Decryption keeps its original, self-contained dark visual system. */
.decryption-panel .decryption-method-button,
.decryption-panel .decryption-method-button:hover:not(:disabled),
.decryption-panel .decryption-method-button:focus-visible:not(:disabled) {
    color: var(--decryption-text);
    border: 1px solid rgba(193, 120, 46, 0.22);
    background: linear-gradient(145deg, rgba(11, 29, 38, 0.94), rgba(7, 18, 24, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 183, 67, 0.06);
    transform: none;
}

.decryption-panel .decryption-method-button:hover:not(:disabled),
.decryption-panel .decryption-method-button:focus-visible:not(:disabled) {
    color: var(--decryption-text);
    border-color: rgba(255, 183, 67, 0.54);
    background: linear-gradient(145deg, rgba(13, 40, 40, 0.98), rgba(8, 22, 27, 0.98));
    box-shadow:
        0 0 0 1px rgba(255, 183, 67, 0.08),
        inset 0 1px 0 rgba(255, 183, 67, 0.08);
}

.decryption-panel .decryption-method-button.is-active,
.decryption-panel .decryption-method-button.is-active:hover:not(:disabled),
.decryption-panel .decryption-method-button.is-active:focus-visible:not(:disabled) {
    color: var(--decryption-text);
    border-color: rgba(116, 240, 121, 0.72);
    background:
        linear-gradient(145deg, rgba(12, 53, 39, 0.95), rgba(8, 25, 23, 0.98)),
        radial-gradient(circle at right, rgba(116, 240, 121, 0.18), transparent 56%);
    box-shadow:
        0 0 0 1px rgba(116, 240, 121, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.decryption-panel .decryption-method-button .decryption-method-copy span {
    color: #fff8ed;
}

.decryption-panel .decryption-method-button .decryption-method-copy small {
    color: rgba(246, 238, 228, 0.72);
}

.decryption-panel .decryption-result-card .guided-empty-state.decryption-result-empty {
    min-height: 194px;
    align-content: center;
    border: 1px solid rgba(193, 120, 46, 0.24);
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 18%, rgba(116, 240, 121, 0.075), transparent 34%),
        linear-gradient(180deg, rgba(5, 22, 28, 0.96), rgba(3, 13, 18, 0.98));
    color: var(--decryption-text);
    box-shadow: inset 0 1px 0 rgba(255, 183, 67, 0.055);
}

.decryption-panel .decryption-result-empty .guided-empty-state-illustration {
    background: rgba(116, 240, 121, 0.08);
    color: var(--decryption-green-soft);
}

.decryption-panel .decryption-result-empty .guided-empty-state-title {
    color: #fff8ed;
}

.decryption-panel .decryption-result-empty .guided-empty-state-description {
    color: rgba(246, 238, 228, 0.68);
}

.decryption-panel .decryption-result-empty .guided-empty-state-primary,
.decryption-panel .decryption-result-empty .guided-empty-state-primary:hover:not(:disabled),
.decryption-panel .decryption-result-empty .guided-empty-state-primary:focus-visible:not(:disabled) {
    color: var(--decryption-green-soft);
    border-color: rgba(116, 240, 121, 0.34);
    background: rgba(5, 38, 25, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: none;
}

/* Gallery: calmer cards, precise selection, no synthetic neon. */
.riddle-gallery-panel {
    background: rgba(247, 244, 238, 0.975);
}

.riddle-gallery-interaction-scrim {
    background: rgba(12, 27, 46, 0.3);
}

.riddle-gallery-nav {
    border-color: rgba(247, 244, 238, 0.1);
    background:
        linear-gradient(165deg, rgba(20, 42, 68, 0.98), rgba(12, 27, 46, 0.995));
    box-shadow:
        0 16px 30px rgba(12, 27, 46, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.riddle-gallery-nav-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.46), transparent);
    box-shadow: none;
}

.riddle-gallery-nav-button {
    border-color: rgba(247, 244, 238, 0.08);
    color: rgba(247, 244, 238, 0.84);
    background: rgba(247, 244, 238, 0.025);
}

.riddle-gallery-nav-button:hover,
.riddle-gallery-nav-button:focus-visible {
    border-color: rgba(212, 160, 23, 0.28);
    color: var(--maphora-ivory);
    background: rgba(247, 244, 238, 0.075);
    box-shadow: none;
    transform: none;
}

.riddle-gallery-nav-button.is-selected {
    border-color: rgba(212, 160, 23, 0.46);
    color: #f5d77e;
    background: rgba(212, 160, 23, 0.13);
    box-shadow: inset 3px 0 0 var(--maphora-gold);
}

.riddle-gallery-nav-count {
    border-color: rgba(247, 244, 238, 0.1);
    color: rgba(247, 244, 238, 0.72);
    background: rgba(247, 244, 238, 0.055);
}

.riddle-gallery-toolbar {
    border-color: rgba(247, 244, 238, 0.1);
    background:
        linear-gradient(165deg, rgba(20, 42, 68, 0.98), rgba(12, 27, 46, 0.995));
    box-shadow:
        0 12px 26px rgba(12, 27, 46, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.riddle-gallery-toolbar-title {
    color: #f1c95f;
    font-family: var(--maphora-title-font);
    letter-spacing: 0.035em;
}

.riddle-gallery-toolbar-subtitle {
    color: rgba(247, 244, 238, 0.72);
}

.riddle-gallery-toolbar-select,
.riddle-gallery-missing-filter,
.riddle-gallery-view-button {
    border-color: rgba(247, 244, 238, 0.14);
    color: rgba(247, 244, 238, 0.88);
    background-color: rgba(247, 244, 238, 0.055);
    box-shadow: none;
}

.riddle-gallery-missing-filter {
    color: var(--maphora-navy);
    background: rgba(255, 253, 248, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.riddle-gallery-missing-filter input {
    accent-color: var(--maphora-gold-deep);
}

.riddle-gallery-missing-filter:hover,
.riddle-gallery-missing-filter:focus-within {
    color: var(--maphora-navy);
    border-color: rgba(212, 160, 23, 0.42);
    background: rgba(212, 160, 23, 0.075);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.09);
}

.riddle-gallery-missing-filter:has(input:checked) {
    border-color: rgba(212, 160, 23, 0.5);
    background: rgba(212, 160, 23, 0.13);
}

.riddle-gallery-toolbar-select {
    background-image:
        linear-gradient(45deg, transparent 50%, #e8bd4c 50%),
        linear-gradient(135deg, #e8bd4c 50%, transparent 50%),
        linear-gradient(180deg, rgba(247, 244, 238, 0.08), rgba(247, 244, 238, 0.035));
}

.riddle-gallery-toolbar-select:hover,
.riddle-gallery-toolbar-select:focus-visible,
.riddle-gallery-view-button:hover,
.riddle-gallery-view-button:focus-visible {
    border-color: rgba(212, 160, 23, 0.48);
    color: var(--maphora-ivory);
    background-color: rgba(247, 244, 238, 0.1);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.1);
    transform: none;
}

.riddle-gallery-section,
.riddle-detail-card {
    border-color: rgba(12, 27, 46, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 46%),
        var(--maphora-beige);
    box-shadow:
        0 12px 28px rgba(12, 27, 46, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.riddle-gallery-carousel,
.riddle-gallery-carousel-row {
    gap: 18px;
}

.riddle-card,
.beacon-gallery-card {
    border-radius: 16px;
    border-color: rgba(12, 27, 46, 0.16);
    box-shadow: 0 10px 24px rgba(12, 27, 46, 0.12);
}

.maphora-gallery-card {
    box-shadow:
        0 10px 24px rgba(12, 27, 46, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition:
        border-color 170ms ease,
        transform 170ms ease,
        scale 180ms ease;
}

.maphora-gallery-card-glow {
    display: none;
    animation: none;
}

.riddle-card:hover,
.riddle-card:focus-visible,
.maphora-gallery-card:hover,
.maphora-gallery-card:focus-visible {
    z-index: 10;
    filter: brightness(1.02) saturate(0.98);
    border-color: rgba(212, 160, 23, 0.55);
    box-shadow:
        0 17px 34px rgba(12, 27, 46, 0.18),
        0 0 0 1px rgba(212, 160, 23, 0.18);
    transform: none;
}

.riddle-card.selected,
.beacon-gallery-card.selected {
    border-color: var(--maphora-gold);
    box-shadow:
        0 0 0 2px var(--maphora-ivory-raised),
        0 0 0 4px var(--maphora-gold),
        0 18px 36px rgba(12, 27, 46, 0.2);
}

.riddle-card.selected::after,
.beacon-gallery-card.selected::after {
    inset: 4px;
    border-color: rgba(255, 255, 255, 0.62);
    box-shadow: none;
}

.riddle-card-random,
.riddle-card-random:hover,
.riddle-card-random:focus-visible {
    border-color: rgba(212, 160, 23, 0.66);
    background:
        radial-gradient(circle at 52% 32%, rgba(212, 160, 23, 0.18), transparent 48%),
        linear-gradient(160deg, #142a44, #0c1b2e 72%);
    box-shadow: 0 14px 30px rgba(12, 27, 46, 0.24);
}

button.riddle-card-random:hover:not(:disabled),
button.riddle-card-random:focus-visible:not(:disabled) {
    color: inherit;
    border-color: rgba(212, 160, 23, 0.82);
    background:
        radial-gradient(circle at 52% 32%, rgba(212, 160, 23, 0.22), transparent 48%),
        linear-gradient(160deg, #142a44, #0c1b2e 72%);
    filter: brightness(1.025) saturate(1.02);
    box-shadow:
        0 18px 36px rgba(12, 27, 46, 0.28),
        0 0 0 2px rgba(212, 160, 23, 0.14);
    transform: none;
}

/* Gallery surfaces use the brand's navy, ivory and gold composition. */
.riddle-gallery-panel {
    padding: 14px;
    border-radius: 20px;
    background: rgba(247, 244, 238, 0.985);
    box-shadow:
        0 24px 64px rgba(12, 27, 46, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.riddle-gallery-panel .panel-header-row {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 8;
    min-height: 30px;
    padding: 0;
    border: 0;
}

.riddle-gallery-panel .panel-drag-handle {
    background: rgba(255, 253, 248, 0.86);
    border-color: rgba(12, 27, 46, 0.14);
    box-shadow:
        0 4px 10px rgba(12, 27, 46, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.riddle-gallery-panel .panel-drag-handle::before {
    background:
        linear-gradient(rgba(12, 27, 46, 0.42), rgba(12, 27, 46, 0.42)) center 2px / 12px 1.5px no-repeat,
        linear-gradient(rgba(12, 27, 46, 0.42), rgba(12, 27, 46, 0.42)) center 6px / 12px 1.5px no-repeat,
        linear-gradient(rgba(12, 27, 46, 0.42), rgba(12, 27, 46, 0.42)) center 10px / 12px 1.5px no-repeat;
}

.riddle-gallery-panel .panel-drag-handle:hover {
    border-color: rgba(212, 160, 23, 0.46);
    background: #fffdf8;
    box-shadow:
        0 6px 14px rgba(12, 27, 46, 0.12),
        0 0 0 3px rgba(212, 160, 23, 0.1);
}

.riddle-gallery-close-button,
.riddle-gallery-window-button {
    color: rgba(12, 27, 46, 0.72);
    border-color: rgba(12, 27, 46, 0.1);
    background: rgba(255, 253, 248, 0.86);
    box-shadow: none;
}

.riddle-gallery-content {
    height: calc(100% - 44px);
    margin-top: 38px;
}

.riddle-gallery-catalog-shell {
    grid-template-columns: minmax(236px, 260px) minmax(0, 1fr);
    gap: 16px;
}

.riddle-gallery-nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid rgba(247, 244, 238, 0.08);
    border-radius: 16px;
    background: linear-gradient(165deg, #142a44, #0c1b2e 74%);
    box-shadow: 0 12px 28px rgba(12, 27, 46, 0.17);
    scrollbar-width: none;
}

.riddle-gallery-nav::-webkit-scrollbar {
    display: none;
}

.riddle-gallery-nav-list {
    flex: 0 0 auto;
    gap: 14px;
}

.riddle-gallery-brand-signature {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 7px;
    margin-top: auto;
    padding: 28px 8px 20px;
    color: var(--maphora-ivory);
    text-align: center;
    pointer-events: none;
}

.riddle-gallery-brand-signature::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 50%;
    width: 82%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 160, 23, 0.5), transparent);
    transform: translateX(-50%);
}

.riddle-gallery-brand-signature::after {
    content: "";
    position: absolute;
    top: 38px;
    left: 50%;
    width: 92px;
    height: 54px;
    border-radius: 50%;
    background: rgba(212, 160, 23, 0.12);
    filter: blur(20px);
    transform: translateX(-50%);
}

.riddle-gallery-brand-logo-frame {
    position: relative;
    z-index: 1;
    display: grid;
    width: 64px;
    height: 64px;
    padding: 3px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(244, 207, 112, 0.46);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(212, 160, 23, 0.025));
    box-shadow:
        0 13px 26px rgba(2, 10, 20, 0.3),
        0 0 0 4px rgba(212, 160, 23, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.riddle-gallery-brand-logo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.19) 48%, transparent 68%);
    opacity: 0.7;
    transform: translateX(-125%);
    animation: riddleGalleryBrandSheen 5600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.riddle-gallery-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

.riddle-gallery-brand-wordmark {
    position: relative;
    z-index: 1;
    margin-right: -0.28em;
    font-family: var(--maphora-display-font);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-shadow: 0 3px 14px rgba(212, 160, 23, 0.2);
}

.riddle-gallery-brand-tagline {
    position: relative;
    z-index: 1;
    max-width: 180px;
    color: rgba(247, 244, 238, 0.48);
    font-family: var(--maphora-ui-font);
    font-size: 0.57rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

@keyframes riddleGalleryBrandSheen {
    0%,
    62% {
        transform: translateX(-125%);
    }
    82%,
    100% {
        transform: translateX(125%);
    }
}

@media (max-width: 1260px) {
    .riddle-gallery-nav {
        display: block;
    }

    .riddle-gallery-brand-signature {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .riddle-gallery-brand-logo-frame::after {
        animation: none;
    }
}

.riddle-gallery-nav-separator {
    height: 1px;
    margin: 8px 4px;
    background: rgba(247, 244, 238, 0.1);
}

.riddle-gallery-nav-button {
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(247, 244, 238, 0.075);
    border-radius: 11px;
    color: rgba(247, 244, 238, 0.82);
    background: rgba(247, 244, 238, 0.025);
}

.riddle-gallery-nav-button:hover,
.riddle-gallery-nav-button:focus-visible {
    color: var(--maphora-ivory);
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: none;
}

.riddle-gallery-nav-button.is-selected {
    color: #f4cf70;
    border-color: rgba(212, 160, 23, 0.4);
    background: rgba(212, 160, 23, 0.1);
    box-shadow: inset 3px 0 0 var(--maphora-gold);
}

.riddle-gallery-nav-label {
    gap: 9px;
    font-family: var(--maphora-ui-font);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.045em;
}

.riddle-gallery-nav-icon-shell {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.riddle-gallery-nav-icon-image {
    filter: none;
    opacity: 0.94;
}

.riddle-gallery-nav-count,
.riddle-gallery-nav-badge {
    min-width: 24px;
    min-height: 22px;
    padding: 2px 7px;
    border-color: rgba(247, 244, 238, 0.1);
    color: rgba(247, 244, 238, 0.68);
    background: rgba(247, 244, 238, 0.055);
    font-size: 0.68rem;
}

.riddle-gallery-catalog-main {
    gap: 12px;
}

.riddle-gallery-toolbar {
    gap: 12px;
    padding: 15px 18px;
    border: 1px solid rgba(12, 27, 46, 0.11);
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.56), transparent 48%),
        rgba(255, 253, 248, 0.96);
    box-shadow: 0 8px 20px rgba(12, 27, 46, 0.075);
}

.riddle-gallery-toolbar-title {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.riddle-gallery-toolbar-subtitle {
    max-width: 62ch;
    min-height: 44px;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(20, 42, 68, 0.64);
    font-family: var(--maphora-ui-font);
    font-size: 0.86rem;
    line-height: 1.4;
    box-shadow: none;
}

.riddle-gallery-toolbar-objective-icon {
    color: var(--maphora-gold-deep);
}

.riddle-gallery-toolbar-objective-icon .riddle-gallery-nav-icon-image {
    transform: scale(1.2);
}

.riddle-gallery-toolbar-objective-text {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 0.94rem;
    font-weight: 600;
}

.riddle-gallery-toolbar-filters {
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid rgba(12, 27, 46, 0.13);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 250, 238, 0.48)),
        rgba(255, 253, 248, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 5px 14px rgba(111, 73, 18, 0.06);
    flex-wrap: nowrap;
    overflow-x: auto;
}

.riddle-gallery-toolbar-field {
    min-width: 142px;
}

.riddle-gallery-toolbar-select,
.riddle-gallery-missing-filter,
.riddle-gallery-view-button {
    min-height: 38px;
    color: var(--maphora-navy);
    border-color: rgba(12, 27, 46, 0.12);
    background-color: rgba(12, 27, 46, 0.035);
    box-shadow: none;
}

.riddle-gallery-toolbar-select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--maphora-gold) 50%),
        linear-gradient(135deg, var(--maphora-gold) 50%, transparent 50%),
        linear-gradient(180deg, rgba(12, 27, 46, 0.035), rgba(12, 27, 46, 0.035));
}

.riddle-gallery-toolbar-select:hover,
.riddle-gallery-toolbar-select:focus-visible,
.riddle-gallery-view-button:hover,
.riddle-gallery-view-button:focus-visible {
    color: var(--maphora-navy);
    border-color: rgba(212, 160, 23, 0.42);
    background-color: rgba(212, 160, 23, 0.065);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.09);
}

/* The scroll viewport must keep clipping its contents for scrolling, so the
   pointer-tilted visual is mirrored into this fixed elevation layer. */
.maphora-gallery-card[data-gallery-tilt-proxy="true"] {
    position: fixed !important;
    z-index: 60 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    transform-origin: center center;
}

.riddle-gallery-author-filter {
    border-color: rgba(212, 160, 23, 0.34);
    background: rgba(212, 160, 23, 0.1);
    color: var(--maphora-navy);
}

.riddle-gallery-author-filter-close {
    background: rgba(212, 160, 23, 0.15);
    color: #8a5b10;
}

.riddle-gallery-author-filter:hover,
.riddle-gallery-author-filter:focus-visible {
    border-color: rgba(212, 160, 23, 0.54);
    background: rgba(212, 160, 23, 0.16);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.09);
}

.riddle-gallery-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 14px;
}

.riddle-gallery-sections {
    gap: 12px;
    padding-right: 4px;
    border: 0;
    box-shadow: none;
}

.riddle-gallery-section,
.riddle-detail-card {
    border: 1px solid rgba(12, 27, 46, 0.1);
    border-radius: 15px;
    background: var(--maphora-ivory-raised);
    box-shadow: 0 8px 20px rgba(12, 27, 46, 0.075);
}

.riddle-gallery-section {
    padding: 16px;
    gap: 12px;
}

.riddle-gallery-carousel,
.riddle-gallery-carousel-row {
    gap: 14px;
}

.riddle-gallery-carousel {
    padding: 12px 20px 28px;
}

.riddle-card,
.beacon-gallery-card {
    border: 1px solid rgba(12, 27, 46, 0.16);
    border-radius: 14px;
    background: var(--maphora-navy);
    box-shadow: 0 8px 18px rgba(12, 27, 46, 0.13);
}

.maphora-gallery-card:hover,
.maphora-gallery-card:focus-visible {
    border-color: rgba(212, 160, 23, 0.58);
    box-shadow:
        0 14px 28px rgba(12, 27, 46, 0.19),
        0 0 0 1px rgba(212, 160, 23, 0.18);
    filter: brightness(1.02);
    transform: none;
}

.riddle-card-overlay,
.beacon-gallery-card-overlay {
    gap: 5px;
    padding: 44px 12px 12px;
    background: linear-gradient(180deg, transparent, rgba(6, 15, 25, 0.74) 38%, rgba(6, 15, 25, 0.96));
}

.riddle-card-title,
.beacon-gallery-card-title {
    color: #fffdf8;
    font-family: var(--maphora-title-font);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.16;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.riddle-card-author,
.riddle-card-meta-text,
.beacon-gallery-card-meta,
.beacon-gallery-card-altitude {
    color: rgba(255, 253, 248, 0.78);
    font-family: var(--maphora-ui-font);
    font-size: 0.74rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.riddle-card-badge,
.riddle-card-finds-badge,
.riddle-card-status-badge,
.riddle-card-new-badge {
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--maphora-ui-font);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
    text-shadow: none;
}

.riddle-card-finds-badge {
    color: #fff4d3;
    border-color: rgba(255, 225, 156, 0.25);
    background: rgba(108, 67, 22, 0.84);
}

.riddle-card-status-badge[data-riddle-card-status="completed"] {
    color: #e8f8e9;
    border-color: rgba(120, 204, 143, 0.34);
    background: rgba(31, 108, 58, 0.88);
}

.riddle-card.is-completed::before,
.beacon-gallery-card.is-completed::before,
.riddle-card.is-active::before {
    inset: 3px;
    border-radius: 11px;
    box-shadow: none;
}

.riddle-card:is(.is-completed, .is-active)::before,
.beacon-gallery-card.is-completed::before {
    border-color: var(--riddle-card-state-premium-before-border);
}

.riddle-card.selected,
.beacon-gallery-card.selected {
    border-color: var(--maphora-gold);
    box-shadow:
        0 0 0 2px var(--maphora-ivory-raised),
        0 0 0 4px var(--maphora-gold),
        0 14px 28px rgba(12, 27, 46, 0.2);
}

.riddle-detail-card {
    grid-template-rows: minmax(190px, 40%) minmax(0, 1fr);
}

.riddle-detail-image-shell {
    background: var(--maphora-navy);
}

.riddle-detail-body {
    gap: 12px;
    padding: 17px;
    color: var(--maphora-navy);
    background: var(--maphora-ivory-raised);
}

.riddle-detail-section-kicker,
.riddle-detail-header-badge {
    color: #5b6876;
    font-family: var(--maphora-ui-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.riddle-detail-header-badge {
    border-color: rgba(12, 27, 46, 0.1);
    background: rgba(12, 27, 46, 0.035);
}

.riddle-detail-title {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 2rem;
    line-height: 1.12;
}

.riddle-detail-author-label {
    color: rgba(137, 91, 19, 0.72);
    font-family: var(--maphora-ui-font);
}

.riddle-detail-author-name {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 1.08rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.riddle-detail-meta,
.riddle-detail-description,
.riddle-detail-link,
.riddle-detail-author-meta-line {
    color: rgba(20, 42, 68, 0.72);
    font-family: var(--maphora-ui-font);
    font-size: 0.84rem;
    line-height: 1.45;
}

.riddle-detail-fact,
.riddle-detail-satellite-challenge,
.riddle-detail-finds {
    border-color: rgba(12, 27, 46, 0.09);
    background: rgba(12, 27, 46, 0.025);
    box-shadow: none;
}

.riddle-detail-cta-primary,
.riddle-gallery-empty-action {
    color: var(--maphora-navy);
    border-color: #d4a017;
    background: #d4a017;
    box-shadow: 0 7px 16px rgba(12, 27, 46, 0.12);
    text-shadow: none;
}

.riddle-detail-secondary-action,
.riddle-detail-cta-secondary {
    color: var(--maphora-navy);
    border-color: rgba(12, 27, 46, 0.11);
    background: rgba(12, 27, 46, 0.035);
    box-shadow: none;
}

.riddle-gallery-grid-empty {
    display: grid;
    min-height: 100%;
}

.riddle-detail-empty,
.riddle-gallery-filter-empty {
    min-height: 100%;
    padding: 32px;
    border: 1px solid rgba(12, 27, 46, 0.1);
    border-radius: 15px;
    color: var(--maphora-navy);
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 160, 23, 0.055), transparent 26%),
        var(--maphora-ivory-raised);
    box-shadow: 0 8px 20px rgba(12, 27, 46, 0.06);
}

.riddle-gallery-empty {
    justify-items: center;
    gap: 9px;
}

.riddle-gallery-empty-title {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 1.05rem;
    letter-spacing: 0.015em;
}

.riddle-gallery-empty-body {
    max-width: 48ch;
    color: rgba(20, 42, 68, 0.62);
    font-family: var(--maphora-ui-font);
    font-size: 0.84rem;
    line-height: 1.5;
}

/* Gallery gilded edges: layered bronze, champagne and restrained highlights.
   Status colors stay inside the cards while gold communicates hierarchy and
   selection across the gallery chrome. */
#riddle-gallery-panel.riddle-gallery-panel {
    --gallery-gold-deep: #6f4912;
    --gallery-gold-mid: #c88d24;
    --gallery-gold-bright: #f4d77d;
    --gallery-gold-champagne: #fff0b0;
    --gallery-frame-surface: linear-gradient(var(--maphora-ivory-raised), var(--maphora-ivory-raised));
    --gallery-frame-border: linear-gradient(
        132deg,
        rgba(111, 73, 18, 0.72),
        rgba(244, 215, 125, 0.84) 24%,
        rgba(161, 108, 27, 0.42) 54%,
        rgba(255, 240, 176, 0.74) 76%,
        rgba(73, 47, 17, 0.62)
    );
    --gallery-frame-shadow:
        0 9px 22px rgba(12, 27, 46, 0.085),
        0 0 0 1px rgba(98, 64, 20, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 0 0 3px rgba(111, 73, 18, 0.025);
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(247, 244, 238, 0.985), rgba(247, 244, 238, 0.985)) padding-box,
        linear-gradient(
            122deg,
            #4f3517 0%,
            #b47a20 13%,
            #f1d27a 26%,
            #815516 45%,
            #fff0b0 63%,
            #a26c1b 79%,
            #4b3115 100%
        ) border-box;
    box-shadow:
        0 0 0 1px rgba(48, 31, 13, 0.74),
        0 0 0 3px rgba(244, 215, 125, 0.08),
        0 28px 68px rgba(12, 27, 46, 0.24),
        0 8px 22px rgba(54, 36, 14, 0.16),
        inset 0 0 0 1px rgba(255, 248, 218, 0.48),
        inset 0 0 0 4px rgba(79, 53, 18, 0.055);
}

.riddle-gallery-nav {
    border: 1px solid rgba(151, 178, 205, 0.12);
    background: linear-gradient(165deg, #10263d, #091a2c 74%);
    box-shadow:
        0 14px 30px rgba(12, 27, 46, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.riddle-gallery-nav-group {
    padding: 11px 8px 8px;
    border-color: rgba(151, 178, 205, 0.22);
    background:
        linear-gradient(155deg, rgba(27, 53, 79, 0.72), rgba(9, 28, 46, 0.76));
    box-shadow:
        0 8px 18px rgba(2, 8, 15, 0.16),
        inset 0 1px 0 rgba(228, 238, 248, 0.055),
        inset 0 0 0 1px rgba(4, 14, 25, 0.22);
}

.riddle-gallery-nav-group-title {
    margin-bottom: 9px;
    color: rgba(208, 222, 236, 0.68);
    font-family: var(--maphora-ui-font);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.095em;
}

.riddle-gallery-nav-group-items {
    gap: 5px;
}

.riddle-gallery-sections,
.riddle-detail-card {
    border: 1px solid transparent;
    background:
        var(--gallery-frame-surface) padding-box,
        var(--gallery-frame-border) border-box;
    box-shadow: var(--gallery-frame-shadow);
}

.riddle-gallery-section {
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 900px),
    (pointer: coarse) and (min-width: 641px) and (max-width: 1180px) {
    .riddle-gallery-sections {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .riddle-gallery-grid {
        border: 1px solid transparent;
        background:
            var(--gallery-frame-surface) padding-box,
            var(--gallery-frame-border) border-box;
        box-shadow: var(--gallery-frame-shadow);
    }
}

.riddle-gallery-detail-slot:not(.is-tablet-popover-detail) > .riddle-detail-card {
    animation: riddleGalleryDetailSwapIn 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes riddleGalleryDetailSwapIn {
    from {
        opacity: 0.72;
        transform: translate3d(8px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.riddle-gallery-nav-button {
    transition:
        color 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.riddle-gallery-nav-button:hover,
.riddle-gallery-nav-button:focus-visible {
    border-color: rgba(244, 215, 125, 0.32);
    background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.085), rgba(255, 253, 248, 0.045));
    box-shadow:
        inset 0 1px 0 rgba(255, 244, 200, 0.08),
        0 5px 12px rgba(2, 8, 15, 0.14);
}

.riddle-gallery-nav-button.is-selected {
    border: 1px solid transparent;
    color: #ffe59a;
    background:
        linear-gradient(180deg, rgba(80, 57, 31, 0.94), rgba(38, 31, 26, 0.98)) padding-box,
        linear-gradient(
            115deg,
            var(--gallery-gold-deep),
            var(--gallery-gold-champagne) 28%,
            var(--gallery-gold-mid) 58%,
            #f7dc87 78%,
            #6b4613
        ) border-box;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(244, 215, 125, 0.08),
        inset 0 1px 0 rgba(255, 244, 200, 0.16),
        inset 3px 0 0 rgba(255, 225, 139, 0.8);
}

.riddle-gallery-nav-button.is-selected .riddle-gallery-nav-count,
.riddle-gallery-nav-button.is-selected .riddle-gallery-nav-badge {
    border-color: rgba(255, 225, 139, 0.28);
    color: #fff0bf;
    background: rgba(255, 230, 160, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 250, 224, 0.08);
}

.riddle-gallery-toolbar-select,
.riddle-gallery-missing-filter,
.riddle-gallery-view-button,
.riddle-gallery-close-button,
.riddle-gallery-panel .panel-drag-handle {
    border-color: rgba(122, 81, 21, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 3px 9px rgba(12, 27, 46, 0.055);
}

.riddle-gallery-toolbar-select:hover,
.riddle-gallery-toolbar-select:focus-visible,
.riddle-gallery-missing-filter:hover,
.riddle-gallery-missing-filter:focus-within,
.riddle-gallery-view-button:hover,
.riddle-gallery-view-button:focus-visible,
.riddle-gallery-close-button:hover,
.riddle-gallery-close-button:focus-visible,
.riddle-gallery-panel .panel-drag-handle:hover {
    border-color: rgba(200, 141, 36, 0.62);
    box-shadow:
        0 0 0 1px rgba(255, 240, 176, 0.24),
        0 6px 14px rgba(12, 27, 46, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Opening the gallery focuses its close action. Keep the cross legible on
   the premium light surface instead of inheriting the dark-shell hover ink. */
.riddle-gallery-close-button:focus-visible {
    color: var(--maphora-navy);
    background: #fffdf8;
}

.riddle-gallery-toolbar {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.riddle-gallery-window-button:focus-visible {
    color: var(--maphora-navy);
    background: #fffdf8;
}

.riddle-gallery-view-button.is-selected {
    border-color: rgba(200, 141, 36, 0.68);
    color: var(--maphora-navy);
    background:
        linear-gradient(180deg, rgba(255, 239, 181, 0.72), rgba(222, 184, 94, 0.36));
    box-shadow:
        0 0 0 1px rgba(111, 73, 18, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.riddle-card,
.beacon-gallery-card {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        linear-gradient(
            135deg,
            rgba(96, 65, 25, 0.86),
            rgba(224, 188, 105, 0.62) 24%,
            rgba(91, 60, 20, 0.74) 54%,
            rgba(244, 215, 125, 0.54) 78%,
            rgba(54, 35, 14, 0.88)
        ) border-box;
    box-shadow:
        0 9px 20px rgba(12, 27, 46, 0.14),
        inset 0 1px 0 rgba(255, 244, 200, 0.12);
}

.riddle-card:hover,
.riddle-card:focus-visible,
.maphora-gallery-card:hover,
.maphora-gallery-card:focus-visible,
.beacon-gallery-card:hover,
.beacon-gallery-card:focus-visible {
    border-color: transparent;
    z-index: 20;
    /* Elevation is depth-only: keep the card centered in the screen plane. */
    translate: 0 0;
    scale: 1.035;
    transform: none;
    background:
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        linear-gradient(
            128deg,
            var(--gallery-gold-deep),
            var(--gallery-gold-bright) 24%,
            #a86f18 52%,
            var(--gallery-gold-champagne) 76%,
            #6a4412
        ) border-box;
    box-shadow:
        0 38px 60px rgba(12, 27, 46, 0.36),
        0 18px 30px rgba(12, 27, 46, 0.24),
        0 10px 24px rgba(168, 111, 24, 0.22),
        0 4px 8px rgba(7, 16, 28, 0.32),
        0 0 0 1px rgba(244, 215, 125, 0.12),
        inset 0 1px 0 rgba(255, 244, 200, 0.18);
}

.riddle-card.selected,
.beacon-gallery-card.selected,
.riddle-card.selected.is-active {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        var(--premium-gold-border-sweep) border-box;
    background-size: 100% 100%, 240% 100%;
    background-position: 0 0, 0% 50%;
    box-shadow:
        inset 0 0 0 2px #4b2e09,
        inset 0 0 0 6px #f7d568,
        inset 0 0 0 9px rgba(75, 46, 9, 0.88),
        0 24px 42px rgba(12, 27, 46, 0.32),
        0 9px 24px rgba(168, 111, 24, 0.28),
        inset 0 1px 0 rgba(255, 249, 220, 0.22);
    z-index: 12;
    filter: brightness(1.07) saturate(1.04);
    translate: 0 0;
    scale: 1.1;
    animation: none;
}

.riddle-card.selected:hover,
.riddle-card.selected:focus-visible,
.beacon-gallery-card.selected:hover,
.beacon-gallery-card.selected:focus-visible,
.riddle-card.selected.is-active:hover,
.riddle-card.selected.is-active:focus-visible {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        var(--premium-gold-border-sweep) border-box;
    background-size: 100% 100%, 240% 100%;
    background-position: 0 0, 0% 50%;
    box-shadow:
        inset 0 0 0 2px #4b2e09,
        inset 0 0 0 6px #f7d568,
        inset 0 0 0 9px rgba(75, 46, 9, 0.88),
        0 52px 76px rgba(12, 27, 46, 0.58),
        0 22px 42px rgba(168, 111, 24, 0.44),
        0 10px 24px rgba(12, 27, 46, 0.32),
        0 5px 10px rgba(7, 16, 28, 0.52),
        inset 0 1px 0 rgba(255, 249, 220, 0.22);
    z-index: 22;
    filter: brightness(1.1) saturate(1.06);
    translate: 0 0;
    scale: 1.1;
}

.riddle-card.selected::after,
.beacon-gallery-card.selected::after,
.riddle-card.selected.is-completed::after,
.riddle-card.selected.is-active::after {
    inset: 4px;
    border: 1px solid rgba(255, 238, 173, 0.72);
    border-radius: 9px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 247, 205, 0.92), transparent) top center / 72% 1px no-repeat,
        linear-gradient(180deg, rgba(255, 244, 194, 0.74), transparent) left top / 1px 42% no-repeat,
        linear-gradient(270deg, rgba(116, 72, 15, 0.48), transparent) right bottom / 38% 1px no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(91, 56, 13, 0.34),
        inset 0 0 18px rgba(244, 215, 125, 0.08);
}

.riddle-card.selected,
.beacon-gallery-card.selected {
    border-color: var(--riddle-card-state-premium-border);
    box-shadow:
        0 0 0 2px var(--maphora-ivory-raised),
        0 0 0 4px var(--riddle-card-state-premium-ring),
        0 14px 28px var(--riddle-card-state-premium-shadow);
}

.riddle-card.selected::after,
.beacon-gallery-card.selected::after {
    border-color: var(--riddle-card-state-premium-inner-border);
    background: none;
    box-shadow:
        inset 0 0 0 1px var(--riddle-card-state-premium-inner-highlight),
        inset 0 0 18px var(--riddle-card-state-premium-inner-fill);
}

/* The in-progress shelf is the active-play state, so its selected challenge
   keeps the cyan state treatment instead of the gallery-wide gold selection. */
.riddle-gallery-section[data-riddle-section="in-progress"] .riddle-card.selected {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        linear-gradient(
            128deg,
            #064978,
            #65dcff 24%,
            #159bd1 52%,
            #b1f3ff 76%,
            #04375f
        ) border-box;
    background-size: 100% 100%, 240% 100%;
    background-position: 0 0, 0% 50%;
    box-shadow:
        inset 0 0 0 2px #063e65,
        inset 0 0 0 6px #64d7f7,
        inset 0 0 0 9px rgba(6, 55, 91, 0.88),
        0 24px 42px rgba(8, 38, 62, 0.32),
        0 9px 24px rgba(21, 155, 209, 0.28),
        inset 0 1px 0 rgba(220, 250, 255, 0.28);
}

.riddle-gallery-section[data-riddle-section="in-progress"] .riddle-card.selected:hover,
.riddle-gallery-section[data-riddle-section="in-progress"] .riddle-card.selected:focus-visible {
    box-shadow:
        inset 0 0 0 2px #063e65,
        inset 0 0 0 6px #64d7f7,
        inset 0 0 0 9px rgba(6, 55, 91, 0.88),
        0 32px 54px rgba(8, 38, 62, 0.42),
        0 13px 30px rgba(21, 155, 209, 0.34),
        inset 0 1px 0 rgba(220, 250, 255, 0.28);
}

.riddle-gallery-section[data-riddle-section="in-progress"] .riddle-card.selected::after {
    border-color: rgba(163, 239, 255, 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(213, 248, 255, 0.36),
        inset 0 0 18px rgba(76, 170, 205, 0.16);
}

.riddle-detail-fact,
.riddle-detail-satellite-challenge,
.riddle-detail-finds,
.riddle-detail-secondary-action,
.riddle-detail-cta-secondary {
    border-color: rgba(111, 73, 18, 0.19);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

/* Stopping an active challenge is destructive. Keep its warning tone above
   the generic premium button finish so it cannot read as a neutral action. */
.riddle-detail-secondary-action.riddle-detail-secondary-action-danger {
    color: #7a2b20;
    border-color: rgba(174, 69, 43, 0.52);
    background: linear-gradient(180deg, #f5dfd5, #ecc3b1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 5px 12px rgba(133, 47, 27, 0.08);
}

.riddle-detail-secondary-action.riddle-detail-secondary-action-danger:hover:not(:disabled),
.riddle-detail-secondary-action.riddle-detail-secondary-action-danger:focus-visible:not(:disabled) {
    color: #fff8f3;
    border-color: #8f301e;
    background: linear-gradient(180deg, #bd4b2c, #a53a24);
    box-shadow:
        0 7px 16px rgba(112, 35, 20, 0.2),
        inset 0 1px 0 rgba(255, 226, 214, 0.26);
    transform: none;
}

.riddle-detail-secondary-action.riddle-detail-secondary-action-danger:focus-visible:not(:disabled) {
    outline-color: #c95735;
    box-shadow:
        0 0 0 4px rgba(201, 87, 53, 0.2),
        0 7px 16px rgba(112, 35, 20, 0.2),
        inset 0 1px 0 rgba(255, 226, 214, 0.26);
}

.riddle-detail-cta-primary,
.riddle-gallery-empty-action {
    border-color: #7a5014;
    background:
        linear-gradient(180deg, #e9bd52, #bd7f18) padding-box;
    box-shadow:
        0 0 0 1px rgba(255, 240, 176, 0.5),
        0 8px 18px rgba(94, 59, 12, 0.2),
        inset 0 1px 0 rgba(255, 250, 224, 0.64);
}

.riddle-detail-cta-primary:hover,
.riddle-detail-cta-primary:focus-visible,
.riddle-gallery-empty-action:hover,
.riddle-gallery-empty-action:focus-visible {
    border-color: #6f4912;
    color: var(--maphora-navy);
    background:
        linear-gradient(180deg, #f4cf72, #c98c20) padding-box;
    box-shadow:
        0 0 0 2px rgba(255, 240, 176, 0.28),
        0 10px 22px rgba(94, 59, 12, 0.24),
        inset 0 1px 0 rgba(255, 251, 226, 0.74);
}

.riddle-pile-poil-miss-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 8px;
    padding: 26px 32px 24px;
    border: 1px solid transparent;
    border-radius: 18px;
    background:
        linear-gradient(var(--maphora-ivory-raised), var(--maphora-ivory-raised)) padding-box,
        linear-gradient(135deg, #6f4912, #f4d77d 38%, #b87918 72%, #5a3910) border-box;
    box-shadow:
        0 18px 42px rgba(12, 27, 46, 0.24),
        0 0 0 3px rgba(212, 160, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
}

.riddle-pile-poil-miss-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #d4a017 18%, #f4d77d 50%, #d4a017 82%, transparent);
}

.riddle-pile-poil-miss-card .riddle-pile-poil-confirm-title {
    color: var(--maphora-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    line-height: 1.25;
    text-shadow: none;
}

.riddle-pile-poil-miss-card .riddle-pile-poil-confirm-body {
    color: #526173;
    font-size: 0.94rem;
    line-height: 1.5;
}

/* Pile-poil completion belongs to the gallery reward language. Keep the
 * interaction contract from 20-00-riddle-challenges.css, but finish the
 * surface with the current ivory, navy and gold identity. */
.riddle-pile-poil-celebration {
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 160, 23, 0.16), transparent 30%),
        rgba(3, 10, 19, 0.52);
    backdrop-filter: blur(9px) saturate(0.94);
}

.riddle-pile-poil-celebration-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 14px;
    min-width: min(500px, calc(100vw - 48px));
    max-width: min(540px, calc(100vw - 48px));
    padding: 34px 34px 30px;
    border: 1px solid transparent;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.76), transparent 42%) padding-box,
        linear-gradient(var(--maphora-ivory-raised), var(--maphora-ivory-raised)) padding-box,
        linear-gradient(135deg, #6f4912, #f4d77d 38%, #b87918 72%, #5a3910) border-box;
    box-shadow:
        0 30px 72px rgba(3, 10, 19, 0.34),
        0 0 0 4px rgba(212, 160, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: none;
}

.riddle-pile-poil-celebration-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, #d4a017 18%, #f4d77d 50%, #d4a017 82%, transparent);
}

.riddle-pile-poil-celebration-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    top: -150px;
    right: -80px;
    border: 1px solid rgba(212, 160, 23, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 24px rgba(212, 160, 23, 0.035),
        0 0 0 52px rgba(212, 160, 23, 0.02);
}

.riddle-pile-poil-celebration-badge {
    min-height: 28px;
    padding: 5px 12px;
    border: 1px solid rgba(212, 160, 23, 0.36);
    border-radius: 999px;
    color: #77500f;
    background: rgba(212, 160, 23, 0.1);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.riddle-pile-poil-celebration-title {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: clamp(1.9rem, 4vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
}

.riddle-pile-poil-celebration-body {
    max-width: 450px;
    color: rgba(12, 27, 46, 0.68);
    font-size: 0.98rem;
    line-height: 1.55;
}

.riddle-pile-poil-celebration-rating {
    gap: 11px;
    margin-top: 4px;
    padding-top: 17px;
    border-top: 1px solid rgba(12, 27, 46, 0.09);
}

.riddle-celebration-rating-title {
    color: rgba(12, 27, 46, 0.72);
    font-size: 0.78rem;
    letter-spacing: 0.025em;
}

.riddle-celebration-rating-row {
    gap: 9px;
    width: min(410px, 100%);
}

.riddle-celebration-rating-button {
    grid-template-rows: 30px auto;
    gap: 7px;
    min-height: 82px;
    padding: 11px 8px 10px;
    border: 1px solid rgba(12, 27, 46, 0.11);
    border-radius: 14px;
    color: var(--maphora-navy-soft);
    background: rgba(255, 253, 248, 0.78);
    box-shadow:
        0 7px 18px rgba(12, 27, 46, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.riddle-celebration-rating-button:hover,
.riddle-celebration-rating-button:focus-visible {
    border-color: rgba(212, 160, 23, 0.44);
    color: var(--maphora-navy);
    background: #fffdf8;
    box-shadow:
        0 11px 24px rgba(12, 27, 46, 0.11),
        0 0 0 2px rgba(212, 160, 23, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.riddle-celebration-rating-button.is-active {
    border-color: #b87918;
    color: var(--maphora-navy);
    background: linear-gradient(180deg, #fff8df, #f5e5b7);
    box-shadow:
        0 0 0 2px rgba(212, 160, 23, 0.16),
        0 10px 22px rgba(111, 73, 18, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.riddle-celebration-rating-button span {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.riddle-celebration-rating-icon {
    width: 29px;
    height: 29px;
    filter: none;
}

.riddle-pile-poil-celebration-actions {
    gap: 9px;
    margin-top: 3px;
}

.riddle-pile-poil-celebration-actions .secondary-button,
.riddle-pile-poil-celebration-actions button {
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 10px;
    font-family: var(--maphora-ui-font);
    font-size: 0.82rem;
}

#riddle-pile-poil-celebration-dismiss {
    border-color: rgba(12, 27, 46, 0.13);
    color: var(--maphora-navy);
    background: rgba(255, 253, 248, 0.86);
}

#riddle-pile-poil-celebration-wikipedia {
    border-color: #7a5014;
    color: var(--maphora-navy);
    background: linear-gradient(180deg, #e9bd52, #bd7f18);
    box-shadow:
        0 0 0 1px rgba(255, 240, 176, 0.5),
        0 8px 18px rgba(94, 59, 12, 0.2),
        inset 0 1px 0 rgba(255, 250, 224, 0.64);
}

#riddle-pile-poil-celebration-wikipedia:hover,
#riddle-pile-poil-celebration-wikipedia:focus-visible {
    border-color: #6f4912;
    color: var(--maphora-navy);
    background: linear-gradient(180deg, #f4cf72, #c98c20);
    box-shadow:
        0 0 0 2px rgba(255, 240, 176, 0.28),
        0 10px 22px rgba(94, 59, 12, 0.24),
        inset 0 1px 0 rgba(255, 251, 226, 0.74);
}

body[data-theme="dark"] .riddle-pile-poil-celebration-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 42%) padding-box,
        linear-gradient(var(--maphora-navy), var(--maphora-navy)) padding-box,
        linear-gradient(135deg, #8a5d17, #f4d77d 38%, #b87918 72%, #6f4912) border-box;
    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.46),
        0 0 0 4px rgba(212, 160, 23, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .riddle-pile-poil-celebration-badge {
    color: #f4d77d;
    border-color: rgba(244, 215, 125, 0.32);
    background: rgba(212, 160, 23, 0.11);
}

body[data-theme="dark"] .riddle-pile-poil-celebration-title {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .riddle-pile-poil-celebration-body,
body[data-theme="dark"] .riddle-celebration-rating-title {
    color: rgba(247, 244, 238, 0.7);
}

body[data-theme="dark"] .riddle-pile-poil-celebration-rating {
    border-top-color: rgba(247, 244, 238, 0.1);
}

body[data-theme="dark"] .riddle-celebration-rating-button {
    color: rgba(247, 244, 238, 0.8);
    border-color: rgba(247, 244, 238, 0.13);
    background: rgba(247, 244, 238, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .riddle-celebration-rating-button:hover,
body[data-theme="dark"] .riddle-celebration-rating-button:focus-visible,
body[data-theme="dark"] .riddle-celebration-rating-button.is-active {
    color: #fff4cf;
    border-color: rgba(244, 215, 125, 0.48);
    background: rgba(212, 160, 23, 0.13);
}

body[data-theme="dark"] #riddle-pile-poil-celebration-dismiss {
    border-color: rgba(247, 244, 238, 0.16);
    color: var(--maphora-ivory);
    background: rgba(247, 244, 238, 0.07);
}

@media (max-width: 640px) {
    .riddle-pile-poil-celebration {
        align-items: flex-end;
        padding: 16px;
    }

    .riddle-pile-poil-celebration-card {
        gap: 12px;
        min-width: 0;
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 32px);
        padding: 28px 18px 20px;
        border-radius: 18px;
        overflow-y: auto;
    }

    .riddle-pile-poil-celebration-title {
        font-size: 1.85rem;
    }

    .riddle-celebration-rating-row {
        gap: 7px;
    }

    .riddle-celebration-rating-button {
        min-height: 78px;
        padding-inline: 5px;
    }
}

/* The completion scene deliberately sits above the app chrome: the challenge
 * image, earned progression and player feedback become one cinematic moment. */
.riddle-pile-poil-celebration {
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 8vh, 92px) clamp(24px, 5vw, 76px) 34px;
    background:
        radial-gradient(circle at 50% 46%, rgba(214, 164, 40, 0.13), transparent 34%),
        radial-gradient(circle at 12% 80%, rgba(32, 72, 91, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(2, 11, 21, 0.72), rgba(4, 19, 34, 0.86));
    backdrop-filter: blur(12px) saturate(0.78) brightness(0.62);
}

.riddle-pile-poil-celebration::before,
.riddle-pile-poil-celebration::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.riddle-pile-poil-celebration::before {
    inset: -28%;
    background:
        radial-gradient(circle at 38% 50%, rgba(244, 215, 125, 0.19) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 42%, rgba(255, 244, 207, 0.16) 0 1px, transparent 2px),
        radial-gradient(ellipse at center, rgba(212, 160, 23, 0.13), transparent 48%);
    background-size: 74px 74px, 113px 113px, 100% 100%;
    filter: blur(0.2px);
    animation: riddle-pile-poil-atmosphere-drift 22s linear infinite;
}

.riddle-pile-poil-celebration::after {
    inset: -20% 4% 44%;
    opacity: 0.36;
    background: conic-gradient(from 203deg at 50% -15%, transparent 0 18deg, rgba(250, 220, 143, 0.1) 21deg 25deg, transparent 28deg 48deg, rgba(250, 220, 143, 0.07) 52deg 56deg, transparent 60deg);
    filter: blur(20px);
    transform-origin: 50% 0;
    animation: riddle-pile-poil-light-breathe 8s ease-in-out infinite alternate;
}

.riddle-pile-poil-celebration-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px, 0.92fr) minmax(500px, 1.08fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    width: min(1040px, calc(100vw - 96px));
    min-width: 0;
    max-width: 1040px;
    min-height: 610px;
    padding: 0;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 27px;
    text-align: left;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 38%) padding-box,
        linear-gradient(135deg, #071a2c, #061424 58%, #091d30) padding-box,
        linear-gradient(130deg, #6f4912, #f4d77d 32%, #b87918 68%, #5a3910) border-box;
    box-shadow:
        0 48px 110px rgba(0, 0, 0, 0.56),
        0 0 0 4px rgba(212, 160, 23, 0.1),
        0 0 68px rgba(212, 160, 23, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: none;
    animation: riddle-pile-poil-premium-in 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.riddle-pile-poil-celebration-card::before,
.riddle-pile-poil-celebration-card::after {
    content: none;
}

#riddle-pile-poil-celebration-dismiss.riddle-pile-poil-celebration-dismiss {
    position: absolute;
    z-index: 10;
    top: 17px;
    right: 17px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(244, 215, 125, 0.22);
    border-radius: 50%;
    color: rgba(255, 244, 207, 0.76);
    background: rgba(2, 11, 21, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

#riddle-pile-poil-celebration-dismiss.riddle-pile-poil-celebration-dismiss:hover,
#riddle-pile-poil-celebration-dismiss.riddle-pile-poil-celebration-dismiss:focus-visible {
    color: #fff4cf;
    border-color: rgba(244, 215, 125, 0.52);
    background: rgba(212, 160, 23, 0.15);
    transform: rotate(4deg) scale(1.04);
}

#riddle-pile-poil-celebration-dismiss.riddle-pile-poil-celebration-dismiss svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.riddle-pile-poil-celebration-visual {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 608px;
    overflow: hidden;
    border-radius: 25px 82px 82px 25px;
    background:
        radial-gradient(circle at 28% 24%, rgba(244, 215, 125, 0.19), transparent 30%),
        linear-gradient(145deg, #14364a, #071827 72%);
    box-shadow:
        8px 0 30px rgba(0, 0, 0, 0.24),
        inset -1px 0 0 rgba(244, 215, 125, 0.48),
        inset 0 0 0 1px rgba(244, 215, 125, 0.14);
}

.riddle-pile-poil-celebration-visual::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 11, 21, 0.02) 34%, rgba(2, 11, 21, 0.82) 84%, #061321 100%),
        linear-gradient(90deg, transparent 68%, rgba(5, 18, 31, 0.28));
}

.riddle-pile-poil-celebration-visual::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(244, 215, 125, 0.5);
    border-radius: inherit;
    box-shadow: inset 0 0 48px rgba(4, 13, 23, 0.24);
}

.riddle-pile-poil-celebration-image,
.riddle-pile-poil-celebration-image-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.riddle-pile-poil-celebration-image {
    z-index: 2;
    display: block;
    object-fit: cover;
    transform: scale(1.018);
    animation: riddle-pile-poil-image-settle 8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.riddle-pile-poil-celebration-image-fallback {
    z-index: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(32deg, transparent 48%, rgba(244, 215, 125, 0.08) 49% 51%, transparent 52%) 0 0 / 68px 68px,
        radial-gradient(circle at 38% 38%, rgba(69, 121, 139, 0.42), transparent 31%),
        linear-gradient(145deg, #153a4e, #061726 72%);
}

.riddle-pile-poil-celebration-image-fallback span {
    width: 150px;
    height: 150px;
    border: 1px solid rgba(244, 215, 125, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 0 24px rgba(244, 215, 125, 0.035), 0 0 0 52px rgba(244, 215, 125, 0.018);
}

.riddle-pile-poil-celebration-visual-copy {
    position: absolute;
    z-index: 6;
    right: 138px;
    bottom: 18px;
    left: 30px;
    color: var(--maphora-ivory);
}

.riddle-pile-poil-celebration-category {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
    color: rgba(255, 244, 207, 0.78);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.riddle-pile-poil-celebration-category::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 1px solid rgba(244, 215, 125, 0.74);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(4, 18, 31, 0.64);
    background: #d4a017;
}

.riddle-pile-poil-celebration-visual-title {
    font-family: var(--maphora-title-font);
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
    font-weight: 600;
    line-height: 1.08;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.52);
}

.riddle-pile-poil-celebration-meta {
    margin-top: 10px;
    color: rgba(247, 244, 238, 0.68);
    font-size: 0.72rem;
    line-height: 1.35;
}

.riddle-pile-poil-celebration-attribution {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0 0.35em;
    margin-top: 4px;
    color: rgba(247, 244, 238, 0.78);
    font-size: 0.66rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.riddle-pile-poil-celebration-attribution.hidden {
    display: none;
}

.riddle-pile-poil-celebration-attribution a {
    color: #f4d77d;
    text-decoration-color: rgba(244, 215, 125, 0.52);
    text-underline-offset: 2px;
}

.riddle-pile-poil-celebration-attribution a:hover,
.riddle-pile-poil-celebration-attribution a:focus-visible {
    color: #fff4cf;
    text-decoration-color: currentColor;
}

.riddle-pile-poil-celebration-stamp {
    position: absolute;
    z-index: 7;
    right: 28px;
    bottom: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border: 2px solid #d9a52f;
    border-radius: 50%;
    color: #e8b947;
    background: rgba(4, 16, 28, 0.76);
    box-shadow:
        inset 0 0 0 5px rgba(4, 16, 28, 0.82),
        inset 0 0 0 6px rgba(217, 165, 47, 0.62),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(212, 160, 23, 0.12);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-12deg);
}

.riddle-pile-poil-celebration-stamp::before,
.riddle-pile-poil-celebration-stamp::after {
    content: "✦";
    position: absolute;
    top: 48%;
    color: rgba(232, 185, 71, 0.78);
    font-size: 0.5rem;
}

.riddle-pile-poil-celebration-stamp::before { left: 9px; }
.riddle-pile-poil-celebration-stamp::after { right: 9px; }

.riddle-pile-poil-celebration-stamp svg {
    width: 42px;
    height: 36px;
    margin: 1px 0 3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.riddle-pile-poil-celebration-stamp-top {
    margin-bottom: 0;
}

.riddle-pile-poil-celebration-difficulty {
    position: absolute;
    z-index: 7;
    right: 38px;
    bottom: 17px;
    padding: 5px 11px;
    border: 1px solid rgba(244, 215, 125, 0.32);
    border-radius: 999px;
    color: rgba(255, 244, 207, 0.84);
    background: rgba(2, 11, 21, 0.66);
    font-size: 0.64rem;
    font-weight: 750;
}

.riddle-pile-poil-celebration-content {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 46px 43px 28px;
    overflow: hidden;
    border-radius: 0 25px 25px 0;
    color: var(--maphora-ivory);
    text-align: center;
    background:
        radial-gradient(circle at 102% -4%, rgba(212, 160, 23, 0.1), transparent 30%),
        repeating-radial-gradient(ellipse at 110% 26%, transparent 0 18px, rgba(244, 215, 125, 0.025) 19px 20px),
        linear-gradient(145deg, #0a2138, #061626 62%, #081c30);
}

.riddle-pile-poil-celebration-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 5px 14px;
    border: 1px solid rgba(212, 160, 23, 0.68);
    border-radius: 999px;
    color: #f4c65c;
    background: rgba(5, 19, 33, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.riddle-pile-poil-celebration-badge > span[aria-hidden] {
    color: #e6af31;
    font-size: 0.58rem;
}

.riddle-pile-poil-celebration-title {
    margin-top: 21px;
    color: #fff8e8;
    font-family: var(--maphora-title-font);
    font-size: clamp(3.5rem, 5.4vw, 4.8rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.88;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.riddle-pile-poil-celebration-title::after {
    content: "✦";
    display: inline-block;
    margin-left: 12px;
    color: #d6a02a;
    font-family: var(--maphora-ui-font);
    font-size: 0.38em;
    vertical-align: 0.8em;
    animation: riddle-pile-poil-star-pulse 2.8s ease-in-out infinite;
}

.riddle-pile-poil-celebration-lead {
    margin-top: 22px;
    color: rgba(247, 244, 238, 0.82);
    font-family: var(--maphora-title-font);
    font-size: 1.18rem;
    line-height: 1.2;
}

.riddle-pile-poil-celebration-challenge-title {
    margin-top: 6px;
    color: #e9b945;
    font-family: var(--maphora-title-font);
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    font-weight: 650;
    line-height: 1.14;
}

.riddle-pile-poil-celebration-body {
    max-width: none;
    margin-top: 9px;
    color: rgba(247, 244, 238, 0.72);
    font-family: var(--maphora-title-font);
    font-size: 1.04rem;
    line-height: 1.25;
}

.riddle-pile-poil-celebration-progression {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-top: 28px;
    padding: 21px 8px 17px;
    border-top: 1px solid rgba(244, 215, 125, 0.19);
}

.riddle-pile-poil-celebration-compass {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(212, 160, 23, 0.36);
    border-radius: 50%;
    color: #dfae3d;
    background: radial-gradient(circle, rgba(212, 160, 23, 0.13), rgba(4, 17, 29, 0.5) 68%);
    box-shadow: 0 0 24px rgba(212, 160, 23, 0.09), inset 0 0 0 4px rgba(4, 17, 29, 0.34);
}

.riddle-pile-poil-celebration-compass svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.1;
}

.riddle-pile-poil-celebration-progress-main {
    min-width: 0;
}

.riddle-pile-poil-celebration-progress-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
}

.riddle-pile-poil-celebration-progress-head > div:first-child,
.riddle-pile-poil-celebration-progress-numbers {
    display: grid;
    gap: 3px;
}

.riddle-pile-poil-celebration-progress-head strong {
    color: #fff8e8;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
}

.riddle-pile-poil-celebration-progress-head span {
    color: rgba(247, 244, 238, 0.68);
    font-size: 0.7rem;
    font-weight: 650;
}

.riddle-pile-poil-celebration-progress-numbers {
    justify-items: end;
    text-align: right;
}

.riddle-pile-poil-celebration-progress-numbers strong {
    color: #e9b945;
    font-size: 0.7rem;
}

.riddle-pile-poil-celebration-progress-bar {
    height: 7px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.34);
}

.riddle-pile-poil-celebration-progress-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #bd7f18, #f4c75f 72%, #fff0b0);
    box-shadow: 0 0 15px rgba(244, 199, 95, 0.42);
    transition: width 900ms 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.riddle-pile-poil-celebration-encouragement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 0;
    padding: 13px 8px 0;
    border-top: 1px solid rgba(247, 244, 238, 0.07);
    color: rgba(247, 244, 238, 0.72);
    font-size: 0.72rem;
    line-height: 1.35;
}

.riddle-pile-poil-celebration-encouragement > span:first-child {
    color: #e9b945;
}

.riddle-pile-poil-celebration-rating {
    gap: 9px;
    width: 100%;
    margin-top: 14px;
    padding: 14px 0 0;
    border-top: 1px solid rgba(247, 244, 238, 0.07);
}

.riddle-celebration-rating-title {
    color: rgba(247, 244, 238, 0.68);
    font-size: 0.7rem;
    letter-spacing: 0.025em;
}

.riddle-celebration-rating-row {
    gap: 8px;
    width: min(390px, 100%);
}

.riddle-celebration-rating-button {
    grid-template-rows: 25px auto;
    gap: 5px;
    min-height: 64px;
    padding: 8px 7px 7px;
    border: 1px solid rgba(247, 244, 238, 0.12);
    border-radius: 12px;
    color: rgba(247, 244, 238, 0.76);
    background: rgba(247, 244, 238, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.riddle-celebration-rating-button:hover,
.riddle-celebration-rating-button:focus-visible,
.riddle-celebration-rating-button.is-active {
    border-color: rgba(244, 215, 125, 0.48);
    color: #fff4cf;
    background: rgba(212, 160, 23, 0.13);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(212, 160, 23, 0.07);
}

.riddle-celebration-rating-button span {
    font-size: 0.64rem;
}

.riddle-celebration-rating-icon {
    width: 24px;
    height: 24px;
}

.riddle-pile-poil-celebration-actions {
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 11px;
}

.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open {
    min-height: 28px;
    padding: 2px 8px;
    color: rgba(243, 237, 223, 0.68);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open:hover,
.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open:focus-visible,
.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open.is-active {
    color: #f4ca63;
    background: transparent;
}

.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open:focus-visible {
    outline: none;
}

.riddle-pile-poil-celebration-actions #riddle-pile-poil-celebration-keep-tab-open:focus-visible .riddle-pile-poil-celebration-keep-tab-open-switch {
    border-color: rgba(244, 202, 99, 0.78);
    box-shadow: 0 0 0 2px rgba(244, 202, 99, 0.18);
}

.riddle-pile-poil-celebration-actions button {
    min-height: 40px;
    padding: 9px 22px;
    border-radius: 10px;
    font-family: var(--maphora-ui-font);
    font-size: 0.76rem;
}

#riddle-pile-poil-celebration-wikipedia {
    border: 1px solid #7a5014;
    color: #071827;
    background: linear-gradient(180deg, #f1ca68, #bd7f18);
    box-shadow: 0 0 0 1px rgba(255, 240, 176, 0.38), 0 9px 22px rgba(0, 0, 0, 0.23), inset 0 1px 0 rgba(255, 250, 224, 0.66);
}

#riddle-pile-poil-celebration-wikipedia:hover,
#riddle-pile-poil-celebration-wikipedia:focus-visible {
    border-color: #f4d77d;
    color: #061626;
    background: linear-gradient(180deg, #ffdb7c, #cc9025);
    box-shadow: 0 0 0 2px rgba(244, 215, 125, 0.18), 0 11px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 251, 226, 0.76);
}

#riddle-pile-poil-celebration-continue {
    border: 1px solid rgba(244, 215, 125, 0.32);
    color: #fff4cf;
    background: rgba(247, 244, 238, 0.055);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#riddle-pile-poil-celebration-continue:hover,
#riddle-pile-poil-celebration-continue:focus-visible {
    border-color: rgba(244, 215, 125, 0.58);
    background: rgba(212, 160, 23, 0.14);
}

.riddle-star-reward {
    position: absolute;
    z-index: 3;
    top: max(12px, calc(50% - 475px));
    left: 50%;
    width: min(500px, 62vw);
    height: 190px;
    pointer-events: none;
    transform: translateX(-50%);
    filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.34));
}

.riddle-star-reward-canvas,
.riddle-star-reward-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.riddle-star-reward-points {
    position: absolute;
    z-index: 4;
    top: 2px;
    left: 50%;
    min-width: max-content;
    color: #ffd86f;
    font-family: var(--maphora-title-font);
    font-size: clamp(2.35rem, 4.1vw, 3.65rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1;
    text-shadow:
        0 0 12px rgba(255, 222, 126, 0.58),
        0 0 32px rgba(212, 160, 23, 0.42),
        0 9px 20px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
}

.riddle-star-reward-points::before,
.riddle-star-reward-points::after {
    content: "✦";
    display: inline-block;
    margin: 0 0.34em;
    color: #fff0b0;
    font-family: var(--maphora-ui-font);
    font-size: 0.3em;
    vertical-align: 0.62em;
    text-shadow: 0 0 14px rgba(255, 240, 176, 0.74);
}

.riddle-star-reward-points.is-animated {
    animation: riddle-star-reward-points-in 720ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.riddle-star-reward-canvas {
    z-index: 2;
    display: block;
    opacity: 0;
    transition: opacity 180ms ease;
}

.riddle-star-reward-fallback {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 4vw, 34px);
    transition: opacity 180ms ease;
}

.riddle-star-reward-fallback span {
    color: #253542;
    font-size: clamp(3.4rem, 7vw, 5.15rem);
    line-height: 1;
    -webkit-text-stroke: 1px rgba(244, 215, 125, 0.36);
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}

.riddle-star-reward-fallback span.is-earned {
    color: #e2aa2d;
    -webkit-text-stroke-color: #fff0b0;
    text-shadow: 0 0 22px rgba(244, 199, 95, 0.48), 0 12px 26px rgba(0, 0, 0, 0.42);
    animation: riddle-star-reward-fallback-in 540ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.riddle-star-reward-fallback span:nth-child(2) { animation-delay: 180ms; }
.riddle-star-reward-fallback span:nth-child(3) { animation-delay: 360ms; }

.riddle-star-reward.is-webgl-ready .riddle-star-reward-canvas { opacity: 1; }
.riddle-star-reward.is-webgl-ready .riddle-star-reward-fallback { opacity: 0; }

@keyframes riddle-star-reward-fallback-in {
    from { opacity: 0; transform: translateY(-18px) scale(0.25) rotate(-16deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes riddle-star-reward-points-in {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(0.78); filter: blur(4px); }
    62% { opacity: 1; transform: translate(-50%, -4px) scale(1.06); filter: blur(0); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}

@keyframes riddle-pile-poil-premium-in {
    from { opacity: 0; transform: translateY(28px) scale(0.965); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes riddle-pile-poil-image-settle {
    from { transform: scale(1.085); filter: saturate(0.78) brightness(0.78); }
    to { transform: scale(1.018); filter: saturate(1) brightness(1); }
}

@keyframes riddle-pile-poil-atmosphere-drift {
    from { transform: translate3d(-2%, 0, 0) rotate(0.001deg); }
    to { transform: translate3d(2%, -3%, 0) rotate(0.001deg); }
}

@keyframes riddle-pile-poil-light-breathe {
    from { opacity: 0.24; transform: scaleX(0.96) rotate(-1deg); }
    to { opacity: 0.46; transform: scaleX(1.04) rotate(1deg); }
}

@keyframes riddle-pile-poil-star-pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.84) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(12deg); }
}

@media (max-width: 1080px) {
    .riddle-pile-poil-celebration-card {
        grid-template-columns: minmax(320px, 0.82fr) minmax(440px, 1.18fr);
        width: min(960px, calc(100vw - 48px));
    }

    .riddle-pile-poil-celebration-content {
        padding-inline: 31px;
    }
}

@media (max-width: 820px) {
    .riddle-pile-poil-celebration {
        z-index: 8900;
        align-items: center;
        padding: 14px;
    }

    .riddle-pile-poil-celebration.has-star-reward {
        padding: 142px 14px 14px;
    }

    .riddle-pile-poil-celebration.has-star-reward .riddle-pile-poil-celebration-card {
        max-height: calc(100dvh - 156px);
    }

    .riddle-star-reward {
        top: 5px;
        width: min(410px, 92vw);
        height: 136px;
    }

    .riddle-star-reward-points {
        top: 0;
        font-size: clamp(1.85rem, 8.5vw, 2.6rem);
    }

    .riddle-star-reward-fallback span {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }

    .riddle-pile-poil-celebration-card {
        display: block;
        width: min(620px, 100%);
        max-width: 620px;
        max-height: calc(100dvh - 28px);
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 23px;
    }

    #riddle-pile-poil-celebration-dismiss.riddle-pile-poil-celebration-dismiss {
        top: 16px;
        right: 16px;
        background: rgba(2, 11, 21, 0.68);
    }

    .riddle-pile-poil-celebration-visual {
        min-height: 260px;
        height: 260px;
        border-radius: 22px 22px 54px 54px;
    }

    .riddle-pile-poil-celebration-visual-copy {
        right: 124px;
        bottom: 14px;
        left: 22px;
    }

    .riddle-pile-poil-celebration-stamp {
        right: 22px;
        bottom: 39px;
        width: 88px;
        height: 88px;
        font-size: 0.5rem;
    }

    .riddle-pile-poil-celebration-stamp svg {
        width: 35px;
        height: 29px;
    }

    .riddle-pile-poil-celebration-difficulty {
        right: 29px;
        bottom: 10px;
    }

    .riddle-pile-poil-celebration-content {
        padding: 34px 26px 25px;
        border-radius: 0 0 22px 22px;
    }

    .riddle-pile-poil-celebration-title {
        font-size: clamp(3rem, 13vw, 4rem);
    }
}

@media (max-width: 520px) {
    .riddle-pile-poil-celebration-visual {
        min-height: 224px;
        height: 224px;
    }

    .riddle-pile-poil-celebration-visual-copy {
        right: 105px;
        bottom: 12px;
        left: 18px;
    }

    .riddle-pile-poil-celebration-meta {
        display: none;
    }

    .riddle-pile-poil-celebration-attribution {
        margin-top: 5px;
        font-size: 0.6rem;
    }

    .riddle-pile-poil-celebration-visual-title {
        font-size: 1.32rem;
    }

    .riddle-pile-poil-celebration-stamp {
        right: 16px;
        bottom: 31px;
        width: 76px;
        height: 76px;
    }

    .riddle-pile-poil-celebration-stamp svg {
        width: 30px;
        height: 25px;
        margin: 0;
    }

    .riddle-pile-poil-celebration-difficulty {
        right: 22px;
        bottom: 7px;
        font-size: 0.56rem;
    }

    .riddle-pile-poil-celebration-content {
        padding: 29px 16px 20px;
    }

    .riddle-pile-poil-celebration-lead {
        margin-top: 18px;
    }

    .riddle-pile-poil-celebration-progression {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px;
        margin-top: 23px;
        padding-inline: 0;
    }

    .riddle-pile-poil-celebration-compass {
        width: 46px;
        height: 46px;
    }

    .riddle-pile-poil-celebration-compass svg {
        width: 39px;
        height: 39px;
    }

    .riddle-celebration-rating-row {
        gap: 6px;
    }

    .riddle-celebration-rating-button {
        min-height: 61px;
        padding-inline: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .riddle-pile-poil-celebration::before,
    .riddle-pile-poil-celebration::after,
    .riddle-pile-poil-celebration-card,
    .riddle-pile-poil-celebration-image,
    .riddle-pile-poil-celebration-title::after,
    .riddle-star-reward-points.is-animated,
    .riddle-star-reward-fallback span.is-earned {
        animation: none;
    }

    .riddle-pile-poil-celebration-progress-bar > span {
        transition: none;
    }
}

.riddle-gallery-carousel-arrow {
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #f5e5b7, #d5ad56) padding-box,
        linear-gradient(135deg, #6f4912, #fff0b0 42%, #b67919 72%, #56370f) border-box;
    box-shadow:
        0 10px 24px rgba(12, 27, 46, 0.18),
        0 0 0 1px rgba(86, 55, 15, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.riddle-gallery-carousel-arrow:hover:not(:disabled),
.riddle-gallery-carousel-arrow:focus-visible:not(:disabled) {
    background:
        linear-gradient(180deg, #fff0c5, #e2bd67) padding-box,
        linear-gradient(135deg, #704812, #fff6c9 42%, #c98c20 72%, #59390f) border-box;
    box-shadow:
        0 12px 28px rgba(12, 27, 46, 0.2),
        0 0 0 2px rgba(244, 215, 125, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Official identity on the welcome screen. */
.player-welcome-overlay {
    --player-gold: #f1b928;
}

.player-photo-field::before,
.player-photo-field::after {
    content: "";
    position: absolute;
    inset: -4%;
    pointer-events: none;
}

.player-photo-field::before {
    z-index: 1;
    background-image:
        radial-gradient(ellipse at 10% 24%, transparent 0 17%, rgba(224, 174, 46, 0.2) 17.15% 17.28%, transparent 17.45%),
        radial-gradient(ellipse at 91% 64%, transparent 0 23%, rgba(224, 174, 46, 0.16) 23.12% 23.24%, transparent 23.4%),
        radial-gradient(circle at 4% 33%, rgba(244, 199, 82, 0.78) 0 2px, transparent 3px),
        radial-gradient(circle at 16% 8%, rgba(244, 199, 82, 0.48) 0 1px, transparent 2px),
        radial-gradient(circle at 24% 82%, rgba(244, 199, 82, 0.46) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 34% 17%, rgba(244, 199, 82, 0.34) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 12%, rgba(244, 199, 82, 0.42) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 83% 84%, rgba(244, 199, 82, 0.62) 0 2px, transparent 3px),
        radial-gradient(circle at 96% 36%, rgba(244, 199, 82, 0.5) 0 1px, transparent 2px);
    filter: drop-shadow(0 0 7px rgba(241, 185, 40, 0.38));
    opacity: 0.78;
    animation: playerAuthParticleDrift 14s ease-in-out infinite alternate;
}

.player-photo-field::after {
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 48%, transparent 24%, rgba(3, 13, 25, 0.12) 58%, rgba(3, 13, 25, 0.72) 100%),
        linear-gradient(180deg, rgba(3, 13, 25, 0.08), rgba(3, 13, 25, 0.24));
}

.player-welcome-shell {
    grid-template-columns: minmax(520px, 1.46fr) minmax(410px, 0.9fr);
    width: min(1320px, calc(100% - 56px));
    min-height: min(760px, calc(100vh - 72px));
    border-color: rgba(228, 185, 82, 0.34);
    border-radius: 24px;
    background-color: rgba(7, 23, 40, 0.95);
    background-image:
        radial-gradient(ellipse at 30% 35%, rgba(33, 66, 91, 0.3), transparent 45%),
        linear-gradient(100deg, rgba(12, 34, 54, 0.96), rgba(7, 23, 40, 0.94) 62%, rgba(5, 17, 31, 0.97)),
        var(--player-auth-leather-texture);
    background-size: auto, auto, var(--player-auth-leather-texture-size);
    box-shadow:
        0 38px 110px rgba(0, 6, 15, 0.68),
        0 0 0 1px rgba(247, 224, 167, 0.06),
        inset 0 1px 0 rgba(255, 244, 215, 0.12),
        inset 0 0 80px rgba(0, 8, 18, 0.24);
}

.player-welcome-shell::before {
    box-shadow:
        inset 0 0 0 1px rgba(255, 244, 215, 0.045),
        inset 0 -32px 70px rgba(0, 7, 16, 0.16);
}

.player-brand-panel {
    padding: 34px 48px 38px;
    background: transparent;
}

.player-brand-panel::before {
    inset: 6% -14% 28% 6%;
    background:
        radial-gradient(circle at 48% 36%, rgba(255, 196, 66, 0.28), rgba(214, 147, 27, 0.08) 24%, transparent 56%);
    opacity: 0.76;
    animation: playerAuthAmbientGlow 7s ease-in-out infinite;
}

.player-brand-panel::after {
    content: "";
    display: block;
    position: absolute;
    inset: 5% 10% 6% 2%;
    z-index: 1;
    background:
        repeating-radial-gradient(ellipse at 12% 48%, transparent 0 18px, rgba(224, 188, 103, 0.08) 19px 20px, transparent 21px 33px);
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 78%);
    mask-image: linear-gradient(90deg, #000, transparent 78%);
    pointer-events: none;
}

.player-brand-hero {
    min-height: 336px;
    padding: 28px 8px 20px;
}

.player-brand-hero > .player-brand-compass {
    display: none;
}

.player-brand-logo-frame {
    position: relative;
    z-index: 2;
    width: clamp(144px, 15vw, 184px);
    aspect-ratio: 1;
    overflow: visible;
    border: 1px solid rgba(246, 208, 111, 0.58);
    border-radius: 28%;
    background: var(--maphora-navy);
    box-shadow:
        0 22px 48px rgba(3, 10, 19, 0.48),
        0 0 0 6px rgba(247, 244, 238, 0.035),
        0 0 28px rgba(224, 174, 46, 0.22);
}

.player-brand-logo-frame::before {
    content: "";
    position: absolute;
    inset: -35%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 213, 113, 0.36), rgba(224, 160, 37, 0.12) 34%, transparent 68%);
    filter: blur(12px);
    opacity: 0.76;
    transform: scale(0.92);
    animation: playerAuthLogoAura 5.8s ease-in-out infinite;
}

.player-brand-logo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 221, 137, 0.08);
    pointer-events: none;
}

.player-brand-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.player-brand-hero h1 {
    margin: 18px 0 8px;
    font-family: var(--maphora-title-font);
    font-size: clamp(3.3rem, 5.8vw, 5.35rem);
    font-weight: 600;
    color: var(--maphora-ivory);
    letter-spacing: 0.035em;
    text-shadow:
        0 12px 30px rgba(3, 10, 19, 0.58),
        0 0 30px rgba(224, 174, 46, 0.1);
}

.player-beta-badge {
    color: #f7d77f;
    border-color: rgba(212, 160, 23, 0.46);
    background: rgba(12, 27, 46, 0.58);
    box-shadow: none;
}

.player-brand-hero p {
    color: rgba(247, 244, 238, 0.82);
    font-family: var(--maphora-ui-font);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.player-brand-path {
    gap: 14px;
    width: min(690px, 100%);
    margin-inline: auto;
}

.player-brand-path-intro {
    margin-inline: auto;
    padding-bottom: 2px;
}

.player-feature {
    grid-template-columns: 52px 1fr;
    gap: 14px;
}

.player-feature-icon {
    width: 48px;
    height: 48px;
    border-color: rgba(212, 160, 23, 0.46);
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 225, 155, 0.13), transparent 42%),
        rgba(8, 24, 41, 0.72);
    box-shadow:
        0 8px 20px rgba(3, 10, 19, 0.22),
        inset 0 0 18px rgba(224, 174, 46, 0.06);
}

.player-brand-path-intro strong {
    color: #f0c55a;
    font-family: var(--maphora-title-font);
    letter-spacing: 0.02em;
}

.player-feature strong {
    color: #f0c55a;
    font-family: var(--maphora-title-font);
    letter-spacing: 0.03em;
}

.player-feature small {
    color: rgba(247, 244, 238, 0.76);
}

.player-auth-card {
    min-height: calc(100% - 64px);
    margin: 32px 30px 32px 0;
    border: 1px solid rgba(228, 185, 82, 0.32);
    border-radius: 22px;
    background:
        radial-gradient(circle at 10% 0, rgba(88, 116, 142, 0.16), transparent 38%),
        linear-gradient(160deg, rgba(20, 43, 69, 0.96), rgba(8, 24, 42, 0.98));
    box-shadow:
        0 26px 70px rgba(0, 7, 17, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 0 46px rgba(0, 7, 17, 0.16);
    backdrop-filter: blur(22px);
}

.player-auth-card::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 38%);
    opacity: 1;
}

.player-auth-tabs {
    min-height: 72px;
    border-bottom-color: rgba(247, 244, 238, 0.1);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 52%),
        rgba(3, 10, 19, 0.2);
}

.player-auth-tab {
    min-height: 72px;
    color: rgba(247, 244, 238, 0.56);
    background: transparent;
    font-family: var(--maphora-ui-font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.player-auth-tab.active {
    color: #f7d77f;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
}

.player-auth-tab.active::after {
    right: 18%;
    left: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e0ae2d 20%, #ffe7a0 50%, #e0ae2d 80%, transparent);
    box-shadow: 0 0 10px rgba(224, 174, 45, 0.4);
}

.player-auth-form,
.player-guest-block {
    padding-right: 34px;
    padding-left: 34px;
}

.player-auth-form {
    padding-top: 36px;
}

.player-guest-block {
    padding-top: 18px;
    padding-bottom: 26px;
}

.player-auth-heading h2 {
    color: var(--maphora-ivory);
    font-size: 1.38rem;
    line-height: 1.22;
    text-transform: none;
}

.player-auth-heading p,
.player-check-row {
    color: rgba(247, 244, 238, 0.72);
}

.player-auth-heading p {
    max-width: 35ch;
    line-height: 1.55;
}

.player-auth-field > span:first-child {
    color: rgba(247, 244, 238, 0.68);
    font-weight: 600;
}

.player-auth-field input {
    min-height: 54px;
    color: var(--maphora-ivory);
    border-color: rgba(247, 244, 238, 0.18);
    border-radius: 10px;
    background: rgba(3, 10, 19, 0.28);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}

.player-auth-field input:focus,
.player-auth-field input:focus-visible {
    border-color: rgba(212, 160, 23, 0.82);
    background: rgba(3, 10, 19, 0.38);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.14);
}

#player-toggle-password,
#player-toggle-password:hover:not(:disabled) {
    min-width: 44px;
    color: var(--player-gold);
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    font-size: 0;
}

#player-toggle-password::before {
    content: "";
    width: 18px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 50% / 62%;
    pointer-events: none;
    transform: none;
}

#player-toggle-password::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
    transform: none;
}

#player-toggle-password[aria-pressed="true"]::after {
    background: currentColor;
    box-shadow: 0 0 0 2px rgba(7, 23, 40, 0.92);
}

#player-toggle-password:hover:not(:disabled),
#player-toggle-password:focus-visible {
    color: #fff0b6;
    background: rgba(255, 208, 112, 0.08);
}

.player-primary-button {
    position: relative;
    min-height: 56px;
    border: 1px solid #efc85f;
    border-radius: 10px;
    color: var(--maphora-navy);
    background: linear-gradient(180deg, #f0c65b, #dda51f);
    box-shadow:
        0 12px 26px rgba(3, 10, 19, 0.3),
        0 0 18px rgba(224, 174, 45, 0.12),
        inset 0 1px 0 rgba(255, 249, 222, 0.52);
    font-family: var(--maphora-ui-font);
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-shadow: none;
}

.player-primary-button::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: 18px;
    display: block;
    color: rgba(12, 27, 46, 0.82);
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(-52%);
    animation: none;
}

.player-primary-button:hover:not(:disabled),
.player-primary-button:focus-visible:not(:disabled) {
    color: var(--maphora-navy);
    border-color: #efc85f;
    background: #efc85f;
    box-shadow: 0 14px 28px rgba(3, 10, 19, 0.3);
    filter: none;
}

@keyframes playerAuthParticleDrift {
    0% {
        opacity: 0.58;
        transform: translate3d(-0.3%, 0.2%, 0) scale(0.995);
    }
    100% {
        opacity: 0.9;
        transform: translate3d(0.45%, -0.35%, 0) scale(1.008);
    }
}

@keyframes playerAuthAmbientGlow {
    0%,
    100% {
        opacity: 0.64;
        transform: translate3d(-1%, 1%, 0) scale(0.96);
    }
    50% {
        opacity: 0.9;
        transform: translate3d(1%, -1%, 0) scale(1.045);
    }
}

@keyframes playerAuthLogoAura {
    0%,
    100% {
        opacity: 0.58;
        transform: scale(0.9) rotate(-2deg);
    }
    50% {
        opacity: 0.92;
        transform: scale(1.08) rotate(2deg);
    }
}

.player-divider {
    gap: 10px;
    color: rgba(247, 244, 238, 0.5);
    font-family: var(--maphora-ui-font);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
}

.player-divider::before,
.player-divider::after {
    background: linear-gradient(90deg, transparent, rgba(224, 174, 45, 0.24));
}

.player-divider::after {
    background: linear-gradient(90deg, rgba(224, 174, 45, 0.24), transparent);
}

.player-guest-button {
    display: grid;
    grid-template-columns: 18px minmax(0, max-content) 18px;
    width: fit-content;
    max-width: 100%;
    min-height: 46px;
    margin: 10px auto 0;
    padding: 6px 12px;
    border-color: transparent;
    border-radius: 10px;
    color: #f0c55a;
    background: transparent;
    font-family: var(--maphora-ui-font);
    font-size: 0.94rem;
    box-shadow: none;
}

.player-guest-button > .player-button-spinner {
    grid-column: 1;
}

.player-guest-copy > span {
    font-weight: 700;
    letter-spacing: 0.025em;
}

.player-guest-copy {
    grid-column: 2;
}

.player-guest-button small {
    margin-top: 2px;
    color: rgba(247, 244, 238, 0.48);
    font-family: var(--maphora-ui-font);
    font-size: 0.75rem;
}

.player-guest-button:hover:not(:disabled),
.player-guest-button:focus-visible:not(:disabled) {
    border-color: rgba(224, 174, 45, 0.2);
    color: #ffe49b;
    background: rgba(224, 174, 45, 0.065);
    box-shadow: inset 0 0 18px rgba(224, 174, 45, 0.04);
}

.player-guest-button:hover:not(:disabled) small,
.player-guest-button:focus-visible:not(:disabled) small {
    color: rgba(247, 244, 238, 0.68);
}

body[data-theme="dark"] {
    --sand-1: rgba(12, 27, 46, 0.95);
    --sand-2: rgba(8, 20, 34, 0.95);
    --panel-compositor-base: #0c1b2e;
    --ink: #f7f4ee;
    --gold: #e0ae2d;
    --surface-card-bg: rgba(20, 42, 68, 0.62);
    --surface-card-bg-strong: rgba(20, 42, 68, 0.8);
    --surface-card-border: rgba(247, 244, 238, 0.12);
    --section-heading-color: rgba(247, 244, 238, 0.78);
    --subsection-heading-color: rgba(247, 244, 238, 0.6);
    --scrollbar-track: rgba(247, 244, 238, 0.055);
    --scrollbar-track-strong: rgba(247, 244, 238, 0.09);
    --scrollbar-thumb: rgba(212, 160, 23, 0.34);
    --scrollbar-thumb-hover: rgba(224, 174, 45, 0.52);
    --scrollbar-thumb-border: rgba(8, 20, 34, 0.88);
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .panel:not(.decryption-panel),
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .map-layer-menu,
body[data-theme="dark"] .tab-switcher-menu,
body[data-theme="dark"] .player-account-menu {
    border-color: rgba(247, 244, 238, 0.12);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
        rgba(12, 27, 46, 0.94);
    color: var(--maphora-ivory);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

/* Because this layer wins the cascade, every light chrome override needs a dark counterpart here. */
body[data-theme="dark"] .top-bar.panel {
    background: rgba(12, 27, 46, 0.96);
}

body[data-theme="dark"] .top-bar-divider {
    background: rgba(247, 244, 238, 0.12);
}

body[data-theme="dark"] .tab-selector,
body[data-theme="dark"] .tab-selector-shell.open .tab-selector {
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(247, 244, 238, 0.045);
}

body[data-theme="dark"] .tab-selector-trigger,
body[data-theme="dark"] .player-session-button,
body[data-theme="dark"] .player-account-menu-item,
body[data-theme="dark"] .top-bar .icon-button,
body[data-theme="dark"] .top-bar-icon-button,
body[data-theme="dark"] #toggle-immersive-view-mode,
body[data-theme="dark"] #toggle-window-mode,
body[data-theme="dark"] #quit-app {
    color: rgba(247, 244, 238, 0.88);
    border-color: rgba(247, 244, 238, 0.12);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] .modal-close-button,
body[data-theme="dark"] .panel-close-button {
    color: rgba(247, 244, 238, 0.82);
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body[data-theme="dark"] #settings-dialog .settings-section {
    border-color: rgba(247, 244, 238, 0.11);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 46%),
        rgba(20, 42, 68, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body[data-theme="dark"] #settings-dialog .settings-section-label,
body[data-theme="dark"] #settings-dialog .settings-section-static-heading,
body[data-theme="dark"] #settings-dialog .settings-radio-card strong {
    color: rgba(247, 244, 238, 0.9);
}

body[data-theme="dark"] #settings-dialog .settings-help-row,
body[data-theme="dark"] #settings-dialog .panel-subtitle,
body[data-theme="dark"] #settings-dialog .muted {
    color: rgba(247, 244, 238, 0.64);
}

body[data-theme="dark"] #settings-dialog .secondary-button {
    color: rgba(247, 244, 238, 0.88);
    border-color: rgba(247, 244, 238, 0.14);
    background: rgba(247, 244, 238, 0.07);
}

body[data-theme="dark"] #riddle-gallery-panel.riddle-gallery-panel {
    --gallery-frame-surface: linear-gradient(rgba(20, 42, 68, 0.94), rgba(12, 27, 46, 0.97));
    --gallery-frame-border: linear-gradient(
        132deg,
        rgba(111, 73, 18, 0.82),
        rgba(244, 215, 125, 0.68) 24%,
        rgba(161, 108, 27, 0.46) 54%,
        rgba(255, 240, 176, 0.58) 76%,
        rgba(73, 47, 17, 0.76)
    );
    --gallery-frame-shadow:
        0 10px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    color: var(--maphora-ivory);
    background:
        linear-gradient(rgba(8, 20, 34, 0.985), rgba(8, 20, 34, 0.985)) padding-box,
        linear-gradient(
            122deg,
            #4f3517 0%,
            #b47a20 13%,
            #f1d27a 26%,
            #815516 45%,
            #fff0b0 63%,
            #a26c1b 79%,
            #4b3115 100%
        ) border-box;
    box-shadow:
        0 0 0 1px rgba(4, 11, 20, 0.86),
        0 28px 68px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 238, 181, 0.1);
}

body[data-theme="dark"] .riddle-gallery-grid {
    --riddle-gallery-viewport-border: rgba(247, 244, 238, 0.1);
    --riddle-gallery-viewport-surface: rgba(8, 20, 34, 0.38);
}

body[data-theme="dark"] .riddle-gallery-sections,
body[data-theme="dark"] .riddle-detail-card {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .riddle-gallery-section {
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme="dark"] .riddle-gallery-toolbar-title {
    color: #f1c95f;
}

body[data-theme="dark"] .riddle-gallery-toolbar-subtitle,
body[data-theme="dark"] .riddle-gallery-empty-body,
body[data-theme="dark"] #riddle-gallery-panel .guided-empty-state-description,
body[data-theme="dark"] .riddle-detail-meta,
body[data-theme="dark"] .riddle-detail-description,
body[data-theme="dark"] .riddle-detail-link,
body[data-theme="dark"] .riddle-detail-author-meta-line {
    color: rgba(247, 244, 238, 0.68);
}

body[data-theme="dark"] .riddle-detail-author-label {
    color: rgba(241, 201, 95, 0.72);
}

body[data-theme="dark"] .riddle-detail-author-name {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .riddle-gallery-toolbar-subtitle {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

body[data-theme="dark"] .riddle-gallery-toolbar-filters {
    border-color: rgba(241, 201, 95, 0.24);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
        rgba(8, 20, 34, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 6px 16px rgba(0, 0, 0, 0.12);
}

body[data-theme="dark"] .riddle-gallery-toolbar-objective-text {
    color: rgba(247, 244, 238, 0.9);
}

body[data-theme="dark"] .riddle-gallery-toolbar-select,
body[data-theme="dark"] .riddle-gallery-missing-filter,
body[data-theme="dark"] .riddle-gallery-view-button,
body[data-theme="dark"] .riddle-detail-secondary-action,
body[data-theme="dark"] .riddle-detail-cta-secondary {
    color: rgba(247, 244, 238, 0.88);
    border-color: rgba(247, 244, 238, 0.14);
    background-color: rgba(247, 244, 238, 0.065);
    box-shadow: none;
}

body[data-theme="dark"] .riddle-detail-secondary-action.riddle-detail-secondary-action-danger {
    color: #ffc0aa;
    border-color: rgba(242, 126, 86, 0.56);
    background: rgba(190, 66, 38, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 218, 202, 0.08);
}

body[data-theme="dark"] .riddle-detail-secondary-action.riddle-detail-secondary-action-danger:hover:not(:disabled),
body[data-theme="dark"] .riddle-detail-secondary-action.riddle-detail-secondary-action-danger:focus-visible:not(:disabled) {
    color: #fff8f3;
    border-color: rgba(255, 158, 120, 0.78);
    background: linear-gradient(180deg, #bd4b2c, #91301f);
}

body[data-theme="dark"] .riddle-gallery-toolbar-select {
    background-image:
        linear-gradient(45deg, transparent 50%, #e8bd4c 50%),
        linear-gradient(135deg, #e8bd4c 50%, transparent 50%),
        linear-gradient(180deg, rgba(247, 244, 238, 0.075), rgba(247, 244, 238, 0.035));
}

body[data-theme="dark"] .riddle-detail-body {
    color: var(--maphora-ivory);
    background: rgba(8, 20, 34, 0.72);
}

body[data-theme="dark"] .riddle-detail-body .riddle-detail-title,
body[data-theme="dark"] .riddle-gallery-empty-title {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .riddle-detail-fact,
body[data-theme="dark"] .riddle-detail-satellite-challenge,
body[data-theme="dark"] .riddle-detail-finds,
body[data-theme="dark"] .riddle-detail-header-badge {
    border-color: rgba(247, 244, 238, 0.1);
    background: rgba(247, 244, 238, 0.045);
}

body[data-theme="dark"] .riddle-detail-empty,
body[data-theme="dark"] .riddle-gallery-filter-empty,
body[data-theme="dark"] #riddle-gallery-panel .guided-empty-state {
    color: var(--maphora-ivory);
    border-color: rgba(247, 244, 238, 0.1);
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 160, 23, 0.08), transparent 28%),
        rgba(12, 27, 46, 0.9);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] #riddle-gallery-panel .guided-empty-state-title {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] #riddle-gallery-panel .guided-empty-state-primary {
    color: var(--maphora-navy);
    border-color: #d4a017;
    background: #d4a017;
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.24);
}

body[data-theme="dark"] .panel-title,
body[data-theme="dark"] .riddle-detail-title,
body[data-theme="dark"] .settings-title-stack .panel-title {
    color: var(--maphora-ivory);
}

/* Keep destructive tab actions unmistakable inside the plan switcher. */
.top-bar .tab-switcher-close:hover:not(:disabled),
.top-bar .tab-switcher-close:focus-visible:not(:disabled) {
    border-color: #c9473b;
    background: #c9473b;
    color: #fffaf2;
    box-shadow: 0 6px 14px rgba(164, 45, 35, 0.24);
    transform: none;
}

body[data-theme="dark"] .top-bar .tab-switcher-close:hover:not(:disabled),
body[data-theme="dark"] .top-bar .tab-switcher-close:focus-visible:not(:disabled) {
    border-color: #dc5b4d;
    background: #dc5b4d;
    color: #fffaf2;
}

/* Fixed map view switches: deliberately outside the draggable top bar. */
:root {
    --map-tools-control-width: 126px;
    --map-tools-control-height: 42px;
    --map-tools-control-left: var(--radial-launcher-left);
    --map-gallery-control-width: 126px;
    --map-gallery-control-left: calc(
        var(--map-tools-control-left) + var(--map-tools-control-width) + var(--map-view-control-gap, 10px)
    );
    --map-tools-control-bottom: calc(var(--radial-launcher-bottom) + 15px);
}

body[data-theme="dark"] .riddle-gallery-toolbar {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.map-view-switches {
    --map-view-control-gap: 10px;
    --map-layers-control-width: 134px;
    position: fixed;
    top: max(var(--hud-top-edge-gap), calc(env(safe-area-inset-top) + 10px));
    right: calc(var(--hud-top-side-gap) + env(safe-area-inset-right));
    z-index: 5350;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--map-view-control-gap);
    padding: 0;
    color: rgba(247, 244, 238, 0.68);
    pointer-events: none;
    isolation: isolate;
}

.map-view-mode-group {
    display: contents;
}

.map-view-switches .map-view-switch-module-search {
    display: none;
}

.map-view-switches:has(
    .map-radial-layers-launcher[data-active-layer-count]:not([data-active-layer-count="0"])
) {
    --map-layers-control-width: 169px;
}

.map-view-switch-module {
    overflow: visible;
    border: 1px solid rgba(214, 169, 75, 0.3);
    border-radius: 18px;
    background: var(--maphora-chrome-gradient);
    box-shadow:
        0 12px 32px rgba(5, 10, 15, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    pointer-events: auto;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.map-view-switch-module {
    display: inline-flex;
    align-items: stretch;
    padding: 3px;
}

.map-view-switch-module:hover {
    border-color: rgba(225, 183, 92, 0.52);
    box-shadow:
        0 14px 36px rgba(5, 10, 15, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.map-view-switch-module-map {
    position: relative;
}

.map-terrain-status:not([hidden]) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    max-width: min(280px, 80vw);
    padding: 6px 10px;
    border: 1px solid rgba(214, 169, 75, 0.4);
    border-radius: 9px;
    background: #0b2135;
    color: #f7f4ee;
    font-size: 11px;
    line-height: 1.35;
    pointer-events: none;
}

.map-view-switch[data-map-terrain-status="loading"] [data-switch-value="3d"] svg {
    animation: map-terrain-loading 1s ease-in-out infinite alternate;
}

@keyframes map-terrain-loading {
    to { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
    .map-view-switch[data-map-terrain-status="loading"] [data-switch-value="3d"] svg {
        animation: none;
    }
}

.map-view-switches .map-view-switch {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    min-height: 36px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 999px;
    color: inherit;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    touch-action: manipulation;
    transform: none;
}

.map-view-switch-module .map-view-switch + .map-view-switch {
    margin-left: 3px;
    padding-left: 4px;
}

.map-view-switch-module .map-view-switch + .map-view-switch::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: rgba(247, 244, 238, 0.12);
}

.map-view-switch-module .map-globe-toggle::before {
    content: none;
}

.solar-system-entry-toggle .map-view-switch-option {
    min-width: 38px;
    padding-inline: 9px;
}

.solar-system-entry-toggle .solar-system-planet {
    fill: currentColor;
    stroke: none;
}

.map-layers-toggle .map-view-switch-option svg {
    fill: currentColor;
    stroke: none;
}

.map-view-switches .immersive-view-toggle {
    display: inline-flex;
}

.map-view-switches .solar-system-scale-toggle {
    display: none;
}

.map-view-switch-module-audio {
    flex: 0 0 auto;
}

.map-view-switches .riddle-game-audio-mute {
    color: #efc66f;
}

.map-view-switches .riddle-game-audio-mute .map-view-switch-option {
    min-width: 38px;
    padding-inline: 10px;
}

.riddle-game-audio-icon {
    position: relative;
}

.riddle-game-audio-icon::before,
.riddle-game-audio-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    pointer-events: none;
}

.riddle-game-audio-icon::before {
    left: calc(50% - 9px);
    width: 13px;
    height: 16px;
    background: currentColor;
    clip-path: polygon(0 36%, 28% 36%, 70% 8%, 70% 92%, 28% 64%, 0 64%);
    transform: translateY(-50%);
}

.riddle-game-audio-icon::after {
    left: calc(50% + 2px);
    width: 6px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-radius: 0 999px 999px 0;
    transform: translateY(-50%);
}

.riddle-game-audio-mute[data-audio-muted="true"] {
    color: #ff9d8f;
}

.riddle-game-audio-mute[data-audio-muted="true"] .map-view-switch-option {
    background: linear-gradient(180deg, rgba(201, 71, 59, 0.2), rgba(164, 45, 35, 0.1));
    box-shadow: inset 0 0 0 1px rgba(255, 157, 143, 0.16);
}

.riddle-game-audio-mute[data-audio-muted="true"] .riddle-game-audio-icon::after {
    left: 50%;
    width: 18px;
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Keep the Layers catalogue with the bottom map action. Its panel expands
   upward so it remains available without obscuring the top view controls. */
.map-view-switches .map-radial-launcher.map-radial-layers-launcher {
    position: fixed;
    top: auto;
    right: calc(
        var(--radial-launcher-right) +
        env(safe-area-inset-right) +
        var(--map-options-main-width) +
        var(--map-view-control-gap)
    );
    /* Center the 42px Layers capsule against the 72px Cartes hit area. */
    bottom: calc(var(--radial-launcher-bottom) + env(safe-area-inset-bottom) + 15px);
    left: auto;
    z-index: 5350;
}

/* Bottom map actions share one child surface. Position is the only concern
   that differs between the left Gallery/Tools actions and their right peers. */
.map-view-switches :is(.map-view-switch-module-appearance, .map-view-switch-module-gallery, .map-view-switch-module-tools) {
    position: fixed;
    bottom: calc(var(--map-tools-control-bottom) + env(safe-area-inset-bottom));
    z-index: 5350;
    box-sizing: border-box;
    height: var(--map-tools-control-height);
    padding: 0;
    border-color: rgba(231, 187, 93, 0.62);
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
        linear-gradient(160deg, rgba(13, 35, 58, 0.97), rgba(7, 23, 40, 0.985));
}

.map-view-switches .map-view-switch-module-appearance {
    right: calc(
        var(--radial-launcher-right) +
        env(safe-area-inset-right) +
        var(--map-options-main-width) +
        var(--map-layers-control-width) +
        var(--map-view-control-gap) +
        var(--map-view-control-gap)
    );
}

.map-view-switches .map-view-switch-module-gallery {
    right: auto;
    left: calc(var(--map-gallery-control-left) + env(safe-area-inset-left));
    width: var(--map-gallery-control-width);
}

.map-view-switches .map-view-switch-module-tools {
    right: auto;
    left: calc(var(--map-tools-control-left) + env(safe-area-inset-left));
    width: var(--map-tools-control-width);
}

/* Desk mode shrinks legacy radial launchers to their circular hit area. The
   current Tools catalogue is a fixed capsule, so it keeps the map-control
   dimensions instead of inheriting that legacy 72px square. */
body[data-immersive-view="immersive"] .map-view-switches .map-view-switch-module-tools {
    width: var(--map-tools-control-width);
    height: var(--map-tools-control-height);
}

.map-view-switches :is(.map-appearance-toggle, .map-gallery-toggle, .map-tools-toggle) {
    width: 100%;
    min-height: 40px;
    color: rgba(244, 239, 226, 0.9);
}

.map-view-switches :is(.map-appearance-toggle, .map-gallery-toggle, .map-tools-toggle) .map-view-switch-option {
    width: 100%;
    min-width: var(--map-tools-control-width);
    justify-content: flex-start;
    gap: 9px;
    padding: 4px 9px 4px 7px;
    border-radius: 17px;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.78rem;
    font-weight: 560;
}

.map-view-switches .map-gallery-toggle .map-view-switch-option {
    min-width: var(--map-gallery-control-width);
}

.map-view-switches .map-tools-toggle .map-view-switch-option {
    padding-right: 39px;
}

.map-view-switches :is(.map-gallery-toggle.active, .map-gallery-toggle[aria-expanded="true"], .map-tools-toggle[aria-expanded="true"]) .map-view-switch-option {
    color: #f5cf7d;
    background: linear-gradient(180deg, rgba(231, 190, 99, 0.2), rgba(191, 142, 47, 0.11));
    box-shadow:
        inset 0 0 0 1px rgba(244, 207, 126, 0.18),
        0 4px 12px rgba(5, 10, 15, 0.14);
}

.map-gallery-toggle-icon,
.map-tools-toggle-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    object-fit: contain;
}

.map-view-switch-module-tools .map-radial-pin {
    top: 7px;
    right: 7px;
    bottom: auto;
    left: auto;
    z-index: 8;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    transform: translate3d(-8px, 0, 0) scale(0.84);
}

.map-view-switch-module-tools:is([data-radial-open="true"], [data-radial-pinned="true"]) .map-radial-pin {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Outils owns its catalogue and transition. The legacy compass is no longer
   used as a containing block, visual anchor or animation origin. */
.map-radial-tools-launcher {
    --map-catalog-caret-center-from-right: calc(
        var(--map-layers-panel-width) - var(--map-tools-control-width) + 40.5px
    );
    --map-layers-panel-width: min(344px, calc(100vw - 24px));
    --map-layers-row-height: 48px;
    --map-layers-panel-top-clearance: 12px;
    transform: none;
    isolation: isolate;
    overflow: visible;
}

.map-radial-tools-launcher > #map-radial-submenus {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu {
    top: auto;
    right: auto;
    left: 0;
    width: var(--map-layers-panel-width);
    max-height: var(--map-layers-panel-max-height);
    padding: 7px;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(0, 18px, 0) scale(0.96, 0.82);
    transform-origin: calc(100% - var(--map-catalog-caret-center-from-right)) 100%;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools {
    bottom: calc(100% + 14px);
    flex-direction: column;
}

.map-radial-tools-launcher > #map-radial-submenus > :is(#map-radial-submenu-measure, #map-radial-submenu-import, #map-radial-submenu-shape) {
    left: calc(var(--map-layers-panel-width) + 14px);
    width: min(244px, calc(100vw - var(--map-layers-panel-width) - 38px));
    clip-path: none;
    flex-direction: column;
    z-index: 7;
}

.map-radial-tools-launcher > #map-radial-submenus > :is(#map-radial-submenu-measure, #map-radial-submenu-import) {
    bottom: calc(100% + 254px);
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-shape {
    bottom: calc(100% + 62px);
}

.map-radial-tools-launcher[data-radial-open="true"] > #map-radial-submenus > .map-radial-submenu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1, 1);
    transition-delay: 0s;
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu > .map-radial-subitem {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    min-width: 0;
    height: var(--map-layers-row-height);
    min-height: var(--map-layers-row-height);
    box-sizing: border-box;
    padding: 4px 10px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(248, 246, 240, 0.94);
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 14px, 0) scale(0.94);
    transform-origin: center bottom;
    transition:
        opacity 160ms ease,
        visibility 0s linear var(--radial-duration),
        transform 200ms var(--radial-ease),
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.map-radial-tools-launcher[data-radial-open="true"] > #map-radial-submenus > .map-radial-submenu[aria-hidden="false"] > .map-radial-subitem {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay:
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        calc(34ms + (var(--radial-catalog-order, 1) - 1) * 14ms),
        0s,
        0s,
        0s;
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu > .map-radial-subitem:is(:hover, :focus-visible) {
    z-index: 1;
    border-color: rgba(230, 186, 94, 0.38);
    color: #fff3c6;
    background: linear-gradient(90deg, rgba(26, 58, 87, 0.8), rgba(13, 38, 61, 0.78));
    box-shadow:
        inset 3px 0 0 rgba(238, 190, 92, 0.74),
        inset 0 0 18px rgba(239, 181, 60, 0.045);
    outline: none;
    transform: translate3d(0, 0, 0);
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu > .map-radial-subitem > .map-radial-subitem-core {
    display: grid;
    width: 33px;
    height: 33px;
    flex: 0 0 33px;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu > .map-radial-subitem > .map-radial-subitem-label {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    padding: 0;
    justify-content: flex-start;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: currentColor;
    background: transparent;
    box-shadow: none;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.84rem;
    font-weight: 520;
    line-height: 1.15;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.map-radial-tools-launcher > #map-radial-submenus > .map-radial-submenu > .map-radial-subitem .map-radial-subitem-image {
    width: 34px;
    height: 34px;
    object-fit: contain;
    mix-blend-mode: normal;
    opacity: 0.86;
    filter: drop-shadow(0 0 4px rgba(232, 173, 54, 0.18));
}

.map-appearance-toggle-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    filter: brightness(1.1) saturate(1.22) drop-shadow(0 0 5px rgba(239, 184, 67, 0.34));
}

.map-appearance-toggle-icon circle {
    fill: currentColor;
    stroke: none;
}

.map-radial-layers-launcher > #map-layers-radial-menu {
    top: auto;
    bottom: calc(100% + 14px);
}

.map-radial-layers-launcher :is(.map-layers-alliance-submenu, .map-layers-live-world-submenu) {
    top: auto;
    bottom: calc(100% + 14px);
    z-index: 7;
    max-height: var(--map-layers-panel-max-height);
    overflow-y: auto;
}

.map-radial-rail-launcher.map-radial-layers-launcher::before,
.map-radial-tools-launcher::before {
    top: auto;
    bottom: calc(100% + 8px);
}

.map-radial-tools-launcher::before {
    bottom: calc(100% + 7.5px);
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem {
    padding-right: 38px;
    border-color: rgba(116, 143, 165, 0.13);
    border-top-color: rgba(116, 143, 165, 0.09);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(19, 47, 73, 0.48), rgba(10, 31, 51, 0.56));
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem + .map-radial-subitem {
    margin-top: -1px;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem.map-layers-section-start {
    border-top-color: rgba(116, 143, 165, 0.18);
    border-radius: 11px 11px 0 0;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem.map-layers-section-end {
    border-radius: 0 0 11px 11px;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem.map-layers-section-start.map-layers-section-end {
    border-radius: 11px;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    inset: 4px 8px 4px 52px;
    display: flex;
    align-items: center;
    color: #fff3c6;
    font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
    font-size: 0.72rem;
    font-weight: 560;
    line-height: 1.16;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(4px, 0, 0);
    transition: opacity 120ms ease, transform 150ms ease;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem[data-tooltip]:is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem[data-tooltip] > .map-radial-subitem-label {
    transition: opacity 100ms ease;
}

.map-radial-tools-launcher > #map-radial-submenus > #map-radial-submenu-tools > .map-radial-subitem[data-tooltip]:is(:hover, :focus-visible) > .map-radial-subitem-label {
    opacity: 0;
}

@media (max-width: 720px) {
    .map-radial-tools-launcher[data-radial-depth="nested"] > #map-radial-submenus > #map-radial-submenu-tools {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 8px, 0) scale(0.985);
    }

    .map-radial-tools-launcher > #map-radial-submenus > :is(#map-radial-submenu-measure, #map-radial-submenu-import, #map-radial-submenu-shape) {
        right: auto;
        bottom: calc(100% + 14px);
        left: 0;
        width: var(--map-layers-panel-width);
    }
}

@media (max-width: 720px) {
    :root {
        --map-tools-control-width: 110px;
        --map-tools-control-left: var(--radial-launcher-left);
        --map-gallery-control-width: 110px;
        --map-gallery-control-left: calc(
            var(--map-tools-control-left) + var(--map-tools-control-width) + var(--map-view-control-gap, 10px)
        );
        --map-tools-control-bottom: var(--radial-launcher-bottom);
    }

    /* The plan actions popover moves Couches into its own stacking context.
       Keep the catalogue's notched caret above that surface so it retains the
       exact same visual link to its trigger. */
    .plan-actions-menu-content .map-radial-rail-launcher.map-radial-layers-launcher::before {
        z-index: 5701;
    }
}

.map-layers-active-summary {
    top: auto;
    bottom: calc(100% + 7px);
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
}

.map-view-switches .map-view-switch:hover:not(:disabled),
.map-view-switches .map-view-switch:focus-visible:not(:disabled) {
    border-color: transparent;
    color: rgba(247, 244, 238, 0.82);
    background: transparent;
    box-shadow: none;
    transform: none;
}

.map-view-switches .map-view-switch:focus-visible {
    outline: 2px solid rgba(241, 202, 116, 0.92);
    outline-offset: -1px;
}

.map-view-switches .map-view-switch:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.map-view-switches .map-view-switch[data-tooltip]::after,
#map-options-radial-main[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: var(--map-control-tooltip-top, calc(100% + 11px));
    bottom: var(--map-control-tooltip-bottom, auto);
    left: 50%;
    width: max-content;
    max-width: min(220px, calc(100vw - 24px));
    padding: 7px 10px;
    border: 1px solid rgba(225, 183, 92, 0.3);
    border-radius: 9px;
    color: rgba(247, 244, 238, 0.92);
    background: linear-gradient(180deg, rgba(19, 27, 34, 0.98), rgba(9, 15, 20, 0.97));
    box-shadow:
        0 10px 24px rgba(5, 10, 15, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(var(--map-control-tooltip-x, -50%), var(--map-control-tooltip-hidden-y, -4px));
    z-index: 8;
    transition:
        opacity 120ms ease 420ms,
        transform 120ms ease 420ms,
        visibility 0s linear 540ms;
}

.map-view-switches .map-view-switch[data-tooltip]:is(:hover, :focus-visible),
#map-options-radial-main[data-tooltip]:is(:hover, :focus-visible) {
    z-index: 9;
}

.map-view-switches .map-view-switch[data-tooltip]:is(:hover, :focus-visible)::after,
#map-options-radial-main[data-tooltip]:is(:hover, :focus-visible)::after {
    opacity: 1;
    visibility: visible;
    transform: translate(var(--map-control-tooltip-x, -50%), 0);
    transition-delay: 420ms, 420ms, 420ms;
}

.map-view-switches :is(.solar-system-entry-toggle, .map-layers-toggle)[data-tooltip]::after,
#map-options-radial-main[data-tooltip]::after {
    --map-control-tooltip-x: 0;
    right: 0;
    left: auto;
}

#map-options-radial-main[data-tooltip] {
    --map-control-tooltip-top: auto;
    --map-control-tooltip-bottom: calc(100% + 11px);
    --map-control-tooltip-hidden-y: 4px;
}

.map-view-switch-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 66px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.map-dimension-toggle .map-view-switch-option {
    min-width: 52px;
}

.map-globe-toggle .map-view-switch-option {
    min-width: 36px;
    padding-inline: 9px;
}

.map-view-switch-option + .map-view-switch-option::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 24%;
    bottom: 24%;
    width: 1px;
    background: rgba(247, 244, 238, 0.09);
    transition: opacity 180ms ease;
}

.map-view-switch-option svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

.map-view-switch[data-immersive-view-mode="immersive"] [data-switch-value="immersive"],
.map-view-switch[data-immersive-view-mode="focus"] [data-switch-value="focus"],
.map-view-switch[data-map-dimension-mode="2d"] [data-switch-value="2d"],
.map-view-switch[data-map-dimension-mode="3d"] [data-switch-value="3d"],
.map-view-switch[data-solar-scale-mode="adapted"] [data-switch-value="adapted"],
.map-view-switch[data-solar-scale-mode="real"] [data-switch-value="real"],
.map-view-switch[aria-pressed="true"] [data-switch-value="globe"] {
    color: #efc66f;
    background: linear-gradient(180deg, rgba(226, 181, 84, 0.16), rgba(191, 142, 47, 0.08));
    box-shadow:
        inset 0 0 0 1px rgba(236, 194, 103, 0.08),
        0 5px 14px rgba(0, 0, 0, 0.12);
}

.map-view-switch[data-immersive-view-mode="immersive"] [data-switch-value="immersive"]::before,
.map-view-switch[data-immersive-view-mode="focus"] [data-switch-value="focus"]::before,
.map-view-switch[data-map-dimension-mode="2d"] [data-switch-value="2d"]::before,
.map-view-switch[data-map-dimension-mode="3d"] [data-switch-value="3d"]::before,
.map-view-switch[data-solar-scale-mode="adapted"] [data-switch-value="adapted"]::before,
.map-view-switch[data-solar-scale-mode="real"] [data-switch-value="real"]::before {
    opacity: 0;
}

.map-view-switch:not(:disabled) .map-view-switch-option:hover {
    color: #f5cf7d;
    background: linear-gradient(180deg, rgba(231, 190, 99, 0.2), rgba(191, 142, 47, 0.11));
    box-shadow:
        inset 0 0 0 1px rgba(244, 207, 126, 0.18),
        0 4px 12px rgba(5, 10, 15, 0.14);
}

@media (max-width: 1200px) {
    .map-view-switches {
        top: max(calc(var(--hud-gap) + 66px), calc(env(safe-area-inset-top) + 74px));
    }
}

@media (max-width: 520px) {
    .map-view-switches {
        top: max(calc(var(--hud-gap) + 112px), calc(env(safe-area-inset-top) + 120px));
        right: calc(var(--radial-launcher-right) + env(safe-area-inset-right));
    }

    .map-view-switches .map-view-switch {
        min-height: 34px;
    }

    .map-view-switch-option {
        min-width: 54px;
        gap: 4px;
        padding: 6px 8px;
        font-size: 0.7rem;
    }

    .map-dimension-toggle .map-view-switch-option {
        min-width: 40px;
    }

    .map-globe-toggle .map-view-switch-option,
    .solar-system-entry-toggle .map-view-switch-option {
        min-width: 34px;
        padding-inline: 8px;
    }

    .map-view-switch-option svg {
        display: none;
    }

    .map-globe-toggle .map-view-switch-option svg,
    .solar-system-entry-toggle .map-view-switch-option svg,
    .map-layers-toggle .map-view-switch-option svg,
    .map-appearance-toggle .map-view-switch-option svg {
        display: block;
    }
}

@media (min-width: 521px) and (max-width: 720px) {
    .map-view-switches {
        top: max(calc(var(--hud-gap) + 112px), calc(env(safe-area-inset-top) + 120px));
    }
}

@media (max-width: 699px) {
    .map-view-switch-module-audio {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-view-switch-option {
        transition: none;
    }
}

/* Plan closure is a destructive confirmation: use the current ivory/navy
 * surface and reserve the red accent for its irreversible action. */
.plan-close-confirm-modal .modal-backdrop {
    background:
        radial-gradient(circle at 50% 42%, rgba(212, 160, 23, 0.14), transparent 34%),
        rgba(3, 10, 19, 0.48);
    backdrop-filter: blur(8px) saturate(1.04);
}

.modal-card-plan-close-confirm {
    width: min(440px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--maphora-border-strong);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.58), transparent 45%),
        var(--maphora-ivory);
    box-shadow:
        0 24px 58px rgba(3, 10, 19, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.modal-card-plan-close-confirm::before {
    height: 3px;
    background: linear-gradient(90deg, var(--maphora-gold-deep), var(--maphora-gold), rgba(212, 160, 23, 0.22));
}

.plan-close-confirm-icon {
    width: 68px;
    height: 68px;
    margin-top: 0;
    border-color: rgba(166, 62, 53, 0.34);
    background: #c9473b;
    box-shadow:
        0 14px 30px rgba(164, 45, 35, 0.28),
        0 0 0 7px rgba(201, 71, 59, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.plan-close-confirm-icon svg {
    width: 36px;
    height: 36px;
}

.plan-close-confirm-copy {
    gap: 7px;
    margin-top: 18px;
    text-align: center;
}

.plan-close-confirm-copy h2 {
    color: var(--maphora-navy);
    font-family: var(--maphora-title-font);
    font-size: 1.3rem;
}

.plan-close-confirm-copy p {
    color: rgba(12, 27, 46, 0.68);
}

.plan-close-confirm-modal[data-confirm-tone="destructive"] .plan-close-confirm-copy p {
    color: #81372f;
    font-weight: 600;
}

.plan-close-confirm-actions {
    justify-content: center;
    gap: 9px;
    margin-top: 22px;
}

.plan-close-confirm-actions button {
    min-width: 124px;
    min-height: 44px;
    border-radius: 10px;
}

.plan-close-confirm-actions .secondary-button {
    border-color: var(--maphora-border);
    background: rgba(255, 253, 248, 0.82);
    color: var(--maphora-navy);
}

.plan-close-confirm-primary {
    color: #fffaf2;
    border-color: #a63e35;
    background: #c9473b;
    box-shadow: 0 10px 22px rgba(164, 45, 35, 0.22);
}

.plan-close-confirm-primary:hover,
.plan-close-confirm-primary:focus-visible {
    color: #fffaf2;
    border-color: #dc5b4d;
    background: #dc5b4d;
    box-shadow: 0 14px 28px rgba(164, 45, 35, 0.28);
}

.plan-close-confirm-modal[data-confirm-tone="primary"] .plan-close-confirm-primary {
    color: var(--maphora-navy);
    border-color: var(--maphora-gold-deep);
    background: linear-gradient(135deg, var(--maphora-gold), #f0c95c);
    box-shadow: 0 10px 22px rgba(142, 102, 10, 0.22);
}

.plan-close-confirm-modal[data-confirm-tone="primary"] .plan-close-confirm-primary:hover,
.plan-close-confirm-modal[data-confirm-tone="primary"] .plan-close-confirm-primary:focus-visible {
    color: var(--maphora-navy);
    border-color: var(--maphora-gold-deep);
    background: linear-gradient(135deg, #e4b936, #f6d675);
    box-shadow: 0 14px 28px rgba(142, 102, 10, 0.28);
}

body[data-theme="dark"] .modal-card-plan-close-confirm {
    border-color: rgba(247, 244, 238, 0.14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 45%),
        var(--maphora-navy);
}

body[data-theme="dark"] .plan-close-confirm-icon {
    border-color: rgba(255, 153, 143, 0.42);
    background: #d65347;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.3),
        0 0 0 7px rgba(214, 83, 71, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body[data-theme="dark"] .plan-close-confirm-copy h2 {
    color: var(--maphora-ivory);
}

body[data-theme="dark"] .plan-close-confirm-copy p {
    color: rgba(247, 244, 238, 0.68);
}

body[data-theme="dark"] .plan-close-confirm-modal[data-confirm-tone="destructive"] .plan-close-confirm-copy p {
    color: #ffb2a9;
}

body[data-theme="dark"] .plan-close-confirm-actions .secondary-button {
    border-color: rgba(247, 244, 238, 0.16);
    background: rgba(247, 244, 238, 0.08);
    color: var(--maphora-ivory);
}

/* The premium gallery surface is declared after its responsive layer. Keep the
 * phone composition here so its desktop grid cannot override the mobile view. */
@media (max-width: 640px) {
    .riddle-gallery-close-button {
        top: calc(8px + env(safe-area-inset-top));
        right: calc(8px + env(safe-area-inset-right));
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 44px;
    }

    .riddle-gallery-content {
        box-sizing: border-box;
        height: 100%;
        margin-top: 0;
        padding-top: 56px;
    }

    .riddle-gallery-catalog-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
    }

    .riddle-gallery-nav {
        display: block;
        position: relative;
        z-index: 30;
        padding: 6px;
        border-radius: 14px;
        overflow: visible;
    }

    .riddle-gallery-nav-toggle {
        box-sizing: border-box;
        width: 100%;
        min-height: 52px;
        padding: 10px 14px;
        border: 1px solid rgba(231, 200, 116, 0.38);
        border-radius: 12px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        color: #fff0bc;
        background: linear-gradient(180deg, rgba(106, 71, 42, 0.96), rgba(62, 42, 29, 0.99));
        box-shadow: inset 0 1px 0 rgba(255, 239, 208, 0.14);
        text-align: left;
    }

    .riddle-gallery-nav-toggle:focus-visible {
        outline: 2px solid var(--riddle-gold);
        outline-offset: 3px;
    }

    .riddle-gallery-nav-toggle-label {
        min-width: 0;
        overflow: hidden;
        color: inherit;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0.04em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .riddle-gallery-nav-toggle-chevron {
        width: 10px;
        height: 10px;
        margin: 0 4px 5px 0;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        rotate: 45deg;
        transition: rotate 160ms ease, margin 160ms ease;
    }

    .riddle-gallery-nav.is-menu-open .riddle-gallery-nav-toggle-chevron {
        margin-top: 6px;
        margin-bottom: 0;
        rotate: 225deg;
    }

    .riddle-gallery-nav-list {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        max-height: min(62dvh, 520px);
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        border: 1px solid rgba(231, 200, 116, 0.32);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(47, 32, 23, 0.99), rgba(23, 17, 14, 0.995));
        box-shadow: 0 20px 42px rgba(6, 5, 4, 0.42);
        overscroll-behavior: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-nav:not(.is-menu-open) .riddle-gallery-nav-list {
        display: none;
    }

    .riddle-gallery-nav .riddle-gallery-nav-group {
        display: block;
        padding: 8px 6px 6px;
    }

    .riddle-gallery-nav .riddle-gallery-nav-group-items {
        display: grid;
        gap: 5px;
    }

    .riddle-gallery-nav .riddle-gallery-nav-group-title {
        display: block;
        margin: 0 8px 6px;
    }

    .riddle-gallery-nav-list::-webkit-scrollbar {
        display: none;
    }

    .riddle-gallery-main,
    .riddle-gallery-catalog-main {
        min-height: 0;
        gap: 10px;
    }

    .riddle-gallery-toolbar {
        gap: 10px;
        padding: 10px;
        border-radius: 14px;
    }

    .riddle-gallery-toolbar-main {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .riddle-gallery-toolbar-copy {
        width: auto;
        min-width: 0;
    }

    .riddle-gallery-toolbar-subtitle {
        display: none;
    }

    .riddle-gallery-toolbar-filters {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 8px;
        width: 100%;
    }

    .riddle-gallery-toolbar-field,
    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        flex: initial;
        width: 100%;
        min-width: 0;
    }

    .riddle-gallery-toolbar-select,
    .riddle-gallery-missing-filter {
        min-height: 48px;
    }

    .riddle-gallery-missing-filter {
        line-height: 1.25;
        white-space: normal;
    }

    .riddle-gallery-missing-filter input {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .riddle-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        height: 100%;
        gap: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: start;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-sections {
        height: auto;
        overflow: visible;
        gap: 12px;
        padding-right: 0;
    }

    .riddle-gallery-detail-slot:not(.is-tablet-popover-detail) {
        min-height: 0;
        height: auto;
    }

    .riddle-gallery-detail-slot:empty {
        display: none;
    }

    .riddle-gallery-section {
        padding: 12px;
        border-radius: 14px;
    }

    .riddle-gallery-carousel,
    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
        gap: 12px;
    }

    .riddle-gallery-carousel {
        padding: 4px 12px 28px;
    }

    .riddle-card {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }
}

@media (min-width: 641px) and (max-width: 1260px) {
    .riddle-gallery-panel .panel-header-row {
        top: 12px;
        right: 12px;
        left: auto;
        min-height: 40px;
        pointer-events: auto;
    }

    .riddle-gallery-panel .panel-header-actions {
        margin-left: 0;
    }

    .riddle-gallery-panel .riddle-gallery-close-button {
        position: static;
        z-index: auto;
        top: auto;
        right: auto;
        width: var(--ui-compact-control-size);
        height: var(--ui-compact-control-size);
        border-radius: 999px;
        display: inline-flex !important;
        color: rgba(12, 27, 46, 0.72);
        border-color: rgba(12, 27, 46, 0.1);
        background: rgba(255, 253, 248, 0.9);
        box-shadow: 0 4px 10px rgba(12, 27, 46, 0.08);
    }

    .riddle-gallery-content {
        box-sizing: border-box;
        height: 100%;
        margin-top: 0;
        padding-top: 48px;
    }

    .riddle-gallery-catalog-shell {
        grid-template-columns: minmax(188px, 218px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        gap: 12px;
    }

    .riddle-gallery-nav {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 8px;
        border-radius: 14px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .riddle-gallery-nav-list {
        display: grid;
        flex: 0 0 auto;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        overflow: visible;
        padding-bottom: 0;
        scroll-snap-type: none;
    }

    .riddle-gallery-nav-separator {
        width: 100%;
        height: 1px;
        min-height: 1px;
        margin: 8px 4px;
        background: rgba(247, 244, 238, 0.1);
    }

    .riddle-gallery-main,
    .riddle-gallery-catalog-main {
        min-height: 0;
        gap: 12px;
    }

    .riddle-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: max-content max-content;
        height: 100%;
        gap: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        align-content: start;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .riddle-gallery-sections {
        height: auto;
        overflow: visible;
        gap: 12px;
        padding-right: 0;
    }

    .riddle-gallery-detail-slot:not(.is-tablet-popover-detail) {
        min-height: 0;
        height: auto;
    }

    .riddle-gallery-detail-slot:empty {
        display: none;
    }

    .riddle-detail-card {
        height: auto;
        max-height: none;
        grid-template-rows: min(36dvh, 300px) auto;
    }

    .riddle-detail-card-photo-challenge {
        grid-template-rows: min(40dvh, 340px) auto;
    }

    .riddle-detail-body {
        overflow: visible;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail {
        position: absolute;
        z-index: 80;
        display: block;
        min-width: 0;
        height: auto;
        margin: 0;
        overflow: visible;
        filter: drop-shadow(0 24px 34px rgba(12, 27, 46, 0.34));
        animation: riddle-gallery-detail-popover-enter 150ms ease-out both;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -7px;
        left: var(--riddle-detail-popover-anchor-x, 50%);
        width: 16px;
        height: 16px;
        border-top: 1px solid rgba(212, 160, 23, 0.62);
        border-left: 1px solid rgba(212, 160, 23, 0.62);
        background: #fffdf8;
        transform: translateX(-50%) rotate(45deg);
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-card {
        grid-template-rows: auto;
        max-height: inherit;
        border: 1px solid rgba(212, 160, 23, 0.68);
        border-radius: 16px;
        background: #fffdf8;
        box-shadow:
            0 0 0 3px rgba(212, 160, 23, 0.12),
            0 18px 44px rgba(12, 27, 46, 0.3);
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-image-shell {
        display: none;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-body {
        max-height: inherit;
        gap: 10px;
        padding: 18px;
        overflow: auto;
        border-radius: 16px;
        background: #fffdf8;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-title {
        padding-right: 34px;
        font-size: 1.34rem;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-author-row,
    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-tags,
    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-finds {
        display: none;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-description {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-facts-grid {
        grid-template-columns: 1fr;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-fact-value {
        overflow-wrap: normal;
        word-break: normal;
    }

    .riddle-gallery-detail-slot.is-tablet-popover-detail .riddle-detail-actions {
        gap: 8px;
    }

    .riddle-gallery-detail-popover-close {
        position: absolute;
        z-index: 5;
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        min-height: 0;
        padding: 0;
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(12, 27, 46, 0.14);
        border-radius: 999px;
        color: rgba(12, 27, 46, 0.76);
        background: rgba(255, 253, 248, 0.94);
        box-shadow: 0 6px 14px rgba(12, 27, 46, 0.16);
        font-size: 1.34rem;
        line-height: 1;
        touch-action: manipulation;
    }

    .riddle-gallery-detail-popover-close:hover,
    .riddle-gallery-detail-popover-close:focus-visible {
        color: #0c1b2e;
        border-color: rgba(212, 160, 23, 0.52);
        background: #fffdf8;
    }

    @keyframes riddle-gallery-detail-popover-enter {
        from {
            opacity: 0;
            transform: translateY(8px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .riddle-gallery-section {
        padding: 14px;
    }

    .riddle-gallery-carousel,
    .riddle-gallery-carousel-row {
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
        gap: 12px;
    }

    .riddle-gallery-carousel {
        padding: 4px 12px 28px;
    }

    .riddle-card {
        width: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 1024px) {
    .inspector:not(.riddle-gallery-panel):not(.decryption-panel):not(.achievements-panel) {
        width: min(360px, calc(100vw - 24px));
    }
}

@media (max-width: 980px) {
    .player-welcome-shell {
        grid-template-columns: 1fr;
        width: min(720px, 100%);
        min-height: auto;
    }

    .player-auth-card {
        min-height: auto;
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }
}

@media (max-width: 760px) {
    .player-brand-panel {
        padding-inline: 24px;
    }

    .player-brand-logo-frame {
        width: 118px;
    }

    .player-brand-hero h1 {
        font-size: clamp(2.4rem, 14vw, 3.5rem);
        letter-spacing: 0.035em;
    }
}

@media (max-width: 640px) {
    .player-welcome-shell {
        width: 100%;
        min-height: 100svh;
        border-width: 0;
        border-radius: 0;
    }

    .player-brand-panel {
        min-height: 0;
        padding: 14px 20px 16px;
    }

    .player-brand-hero {
        flex: 0 0 auto;
        min-height: 0;
        padding: 8px 0 6px;
    }

    .player-brand-logo-frame {
        width: clamp(82px, 23vw, 104px);
        border-radius: 24%;
    }

    .player-brand-hero h1 {
        margin: 10px 0 3px;
        font-size: clamp(2.25rem, 12vw, 3rem);
    }

    .player-brand-hero p {
        font-size: 0.72rem;
        line-height: 1.2;
        letter-spacing: 0.12em;
    }

    .player-brand-path {
        display: none;
    }

    .player-auth-form {
        padding-top: 20px;
    }

    .player-auth-form,
    .player-guest-block {
        padding-right: 20px;
        padding-left: 20px;
    }

    .player-auth-heading {
        margin-bottom: 14px;
    }

    .player-auth-heading h2 {
        font-size: 1.12rem;
    }

    .player-auth-heading p {
        margin-top: 5px;
        font-size: 0.9rem;
        line-height: 1.32;
    }

    .player-auth-field {
        gap: 6px;
        margin-top: 10px;
    }

    .player-auth-field input {
        min-height: 48px;
    }

    .player-field-action {
        top: 5px;
    }

    .player-auth-options {
        margin: 12px 0 14px;
    }

    .player-primary-button {
        min-height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .player-photo-field::before,
    .player-brand-panel::before,
    .player-brand-logo-frame::before {
        animation: none;
    }

    .riddle-gallery-detail-slot:not(.is-tablet-popover-detail) > .riddle-detail-card {
        animation: none;
    }

    .maphora-gallery-card,
    .player-primary-button,
    button {
        transition-duration: 0.01ms;
    }

    .maphora-gallery-card:hover,
    .maphora-gallery-card:focus-visible {
        scale: 1;
    }

    .riddle-card.selected:hover,
    .riddle-card.selected:focus-visible,
    .beacon-gallery-card.selected:hover,
    .beacon-gallery-card.selected:focus-visible {
        animation: none;
        translate: 0 0;
        scale: 1.1;
    }

    .riddle-card.selected,
    .beacon-gallery-card.selected {
        animation: none;
    }
}

/* Tablet map composition mirrors the native iPad layout: the plan bar owns
   the view-mode popover, and the six map actions share an edge-to-edge bottom
   dock. */
@media (any-pointer: coarse) and (min-width: 700px) and (max-width: 1366px) and (min-height: 600px) {
    :root {
        --tablet-map-control-width: calc(
            100vw / 6
        );
        --tablet-map-dock-height: calc(56px + env(safe-area-inset-bottom));
        --tablet-map-dock-bottom: 0px;
        --tablet-map-dock-content-height: 56px;
        --tablet-map-dock-content-gap: 9px;
        --tablet-map-dock-content-padding: 12px;
        --tablet-map-dock-font-size: 0.86rem;
        --tablet-map-top-controls: calc(env(safe-area-inset-top) + 82px);
        --map-tools-control-width: var(--tablet-map-control-width);
        --map-tools-control-height: var(--tablet-map-dock-height);
        --map-tools-control-left: 0px;
        --map-gallery-control-width: var(--tablet-map-control-width);
        --map-gallery-control-left: calc(var(--tablet-map-control-width) * 2);
        --map-tools-control-bottom: var(--tablet-map-dock-bottom);
    }

    .top-bar.panel {
        top: calc(env(safe-area-inset-top) + 12px) !important;
        width: max-content !important;
        max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        height: auto;
        min-height: 52px;
        padding: 4px 7px;
        flex-wrap: nowrap;
    }

    .tablet-map-view-menu {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        pointer-events: auto;
    }

    .tablet-map-view-menu-toggle.tab-save {
        position: relative;
        display: inline-grid;
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0;
        place-items: center;
    }

    .tablet-map-view-menu-chevron {
        position: absolute;
        right: 3px;
        bottom: 3px;
        display: block;
        width: 10px;
        height: 10px;
        background: currentColor;
        -webkit-mask: var(--top-bar-chevron-icon) center / 10px 10px no-repeat;
        mask: var(--top-bar-chevron-icon) center / 10px 10px no-repeat;
        opacity: 0.82;
        transform: rotate(0deg);
        transform-origin: center;
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .tablet-map-view-menu-toggle[aria-expanded="true"] .tablet-map-view-menu-chevron {
        transform: rotate(180deg);
    }

    .tablet-map-view-menu-toggle[aria-expanded="true"] {
        color: #efc66f;
        border-color: rgba(225, 183, 92, 0.52);
        background: rgba(226, 181, 84, 0.12);
    }

    .tablet-map-view-menu-icon {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .tablet-map-view-menu-panel {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        z-index: 5700;
        width: max-content;
        max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
        padding: 6px;
        border: 1px solid rgba(225, 183, 92, 0.38);
        border-radius: 18px;
        color: rgba(247, 244, 238, 0.72);
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
            linear-gradient(160deg, rgba(13, 35, 58, 0.985), rgba(7, 23, 40, 0.99));
        box-shadow:
            0 18px 40px rgba(2, 9, 16, 0.38),
            inset 0 1px 0 rgba(255, 248, 220, 0.08);
        backdrop-filter: blur(14px) saturate(1.08);
        transform-origin: top right;
    }

    .tablet-map-view-menu-panel[hidden] {
        display: none;
    }

    .tablet-map-view-menu-panel .map-view-mode-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tablet-map-view-menu-panel .map-view-switch-module {
        min-height: 44px;
        padding: 3px;
        border-radius: 18px;
    }

    .tablet-map-view-menu-panel .map-view-switch {
        position: relative;
        display: inline-flex;
        min-width: 0;
        min-height: 38px;
        margin: 0;
        padding: 0;
        align-items: stretch;
        overflow: visible;
        border: 0;
        border-radius: 15px;
        color: rgba(247, 244, 238, 0.68);
        background: transparent;
        box-shadow: none;
    }

    .tablet-map-view-menu-panel .map-view-switch:is(:hover, :focus-visible):not(:disabled) {
        border-color: transparent;
        color: rgba(247, 244, 238, 0.82);
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .tablet-map-view-menu-panel .map-view-switch:disabled {
        cursor: not-allowed;
        opacity: 0.46;
    }

    .tablet-map-view-menu-panel .map-view-switch[data-tooltip]::after,
    .tablet-map-view-menu-panel .solar-system-scale-toggle {
        display: none;
    }

    .map-view-switches {
        top: var(--tablet-map-top-controls);
        right: 0;
        left: 0;
        width: max-content;
        max-width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));
        margin-inline: auto;
        justify-content: center;
        gap: 12px;
        transform: none;
    }

    .map-view-switches .map-view-switch-module-audio {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 12px);
        right: calc(14px + env(safe-area-inset-right));
        min-height: 52px;
        padding: 3px;
        border-radius: 24px;
    }

    .map-view-switches .map-view-switch-module-audio .map-view-switch {
        min-height: 44px;
    }

    .map-view-switches:has(
        .map-radial-layers-launcher[data-active-layer-count]:not([data-active-layer-count="0"])
    ) {
        --map-layers-control-width: var(--tablet-map-control-width);
    }

    .map-view-switches .map-view-switch-module-workspace,
    .map-view-switches .map-view-switch-module-map {
        min-height: 52px;
        padding: 3px;
        border-radius: 24px;
    }

    .map-view-switches .map-view-switch-module-workspace .map-view-switch,
    .map-view-switches .map-view-switch-module-map .map-view-switch {
        min-height: 44px;
    }

    #map-radial-launcher {
        bottom: calc(var(--tablet-map-dock-bottom) - 8px);
        left: calc(18px + env(safe-area-inset-left));
    }

    #map-options-radial-launcher {
        --radial-main-size: 52px;
        --map-options-main-width: var(--tablet-map-control-width);
        --map-options-control-height: var(--tablet-map-dock-height);
        position: fixed;
        right: auto;
        bottom: var(--tablet-map-dock-bottom);
        left: calc(var(--tablet-map-control-width) * 5);
        width: var(--tablet-map-control-width);
        height: var(--tablet-map-dock-height);
        transform: none;
    }

    #map-options-radial-main:is(:hover, :active, :focus-visible) {
        transform: none;
    }

    #map-options-radial-main {
        width: 100%;
        height: var(--tablet-map-dock-height);
    }

    .map-options-main-option {
        width: var(--tablet-map-control-width);
        min-height: var(--tablet-map-dock-height);
        box-sizing: border-box;
        padding: 0 var(--tablet-map-dock-content-padding) env(safe-area-inset-bottom);
        gap: var(--tablet-map-dock-content-gap);
        border-radius: 0;
        justify-content: center;
        font-size: var(--tablet-map-dock-font-size);
        line-height: 1;
    }

    .map-view-switches .map-radial-launcher.map-radial-layers-launcher {
        top: auto;
        right: auto;
        bottom: var(--tablet-map-dock-bottom);
        left: calc(var(--tablet-map-control-width) * 4);
        width: var(--tablet-map-control-width);
        height: var(--tablet-map-dock-height);
        transform: none;
    }

    .map-view-switches .map-radial-layers-launcher .map-layers-toggle {
        width: 100%;
        height: 100%;
        min-height: var(--tablet-map-dock-height);
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom);
        padding-right: 0;
        justify-content: center;
    }

    .map-view-switches .map-radial-layers-launcher .map-layers-toggle .map-view-switch-option {
        width: 100%;
        min-width: 0;
        min-height: var(--tablet-map-dock-content-height);
        justify-content: center;
        gap: var(--tablet-map-dock-content-gap);
        padding-inline: var(--tablet-map-dock-content-padding);
        border-radius: 0;
        font-size: var(--tablet-map-dock-font-size);
        line-height: 1;
    }

    .map-view-switches .map-view-switch-module-appearance {
        right: auto;
        bottom: var(--tablet-map-dock-bottom);
        left: var(--tablet-map-control-width);
        width: var(--tablet-map-control-width);
        height: var(--tablet-map-dock-height);
        transform: none;
        border-radius: 0;
    }

    .map-view-switches :is(.map-view-switch-module-gallery, .map-view-switch-module-tools) {
        bottom: var(--tablet-map-dock-bottom);
        width: var(--tablet-map-control-width);
        height: var(--tablet-map-dock-height);
        border-radius: 0;
    }

    .map-view-switches .map-view-switch-module-gallery {
        left: calc(var(--tablet-map-control-width) * 2);
    }

    .map-view-switches .map-view-switch-module-tools {
        left: 0;
    }

    .map-view-switches .map-gallery-toggle,
    .map-view-switches .map-tools-toggle,
    .map-view-switches .map-appearance-toggle {
        height: 100%;
        min-height: var(--tablet-map-dock-height);
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .map-view-switches :is(.map-gallery-toggle, .map-tools-toggle, .map-appearance-toggle, .map-layers-toggle)[data-tooltip] {
        --map-control-tooltip-top: auto;
        --map-control-tooltip-bottom: calc(100% + 11px);
        --map-control-tooltip-hidden-y: 4px;
    }

    .map-view-switches .map-gallery-toggle .map-view-switch-option,
    .map-view-switches .map-tools-toggle .map-view-switch-option,
    .map-view-switches .map-appearance-toggle .map-view-switch-option {
        width: 100%;
        min-width: 0;
        min-height: var(--tablet-map-dock-content-height);
        justify-content: center;
        gap: var(--tablet-map-dock-content-gap);
        padding-inline: var(--tablet-map-dock-content-padding);
        border-radius: 0;
        font-size: var(--tablet-map-dock-font-size);
        line-height: 1;
    }

    .map-view-switches .map-view-switch-module-search {
        position: fixed;
        right: auto;
        bottom: var(--tablet-map-dock-bottom);
        left: calc(var(--tablet-map-control-width) * 3);
        z-index: 5350;
        display: block;
        width: var(--tablet-map-control-width);
        height: var(--tablet-map-dock-height);
        box-sizing: border-box;
        padding: 0 8px env(safe-area-inset-bottom);
        transform: none;
        border-color: rgba(231, 187, 93, 0.62);
        border-radius: 0;
    }

    .map-view-switches .map-appearance-toggle {
        width: 100%;
    }

    .map-view-switches .map-view-switch-module-search {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--tablet-map-dock-content-gap);
        padding-inline: var(--tablet-map-dock-content-padding);
        color: rgba(244, 239, 226, 0.9);
        font-family: var(--maphora-ui-font, "Segoe UI", sans-serif);
        font-size: var(--tablet-map-dock-font-size);
        font-weight: 560;
        line-height: 1;
    }

    #open-map-search-map-control:is(:hover, :active, :focus-visible) {
        border-color: rgba(231, 187, 93, 0.62);
        color: rgba(244, 239, 226, 0.9);
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
            linear-gradient(160deg, rgba(13, 35, 58, 0.97), rgba(7, 23, 40, 0.985));
        transform: none;
    }

    .map-search-toggle-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        object-fit: contain;
    }

    .map-view-switches .map-view-switch-module-appearance,
    .map-view-switches .map-view-switch-module-search,
    .map-view-switches .map-radial-launcher.map-radial-layers-launcher,
    .map-options-main-option {
        background:
            radial-gradient(circle at 18% 0%, rgba(255, 229, 157, 0.08), transparent 42%),
            linear-gradient(160deg, rgba(13, 35, 58, 0.97), rgba(7, 23, 40, 0.985));
        box-shadow:
            0 12px 30px rgba(2, 9, 16, 0.34),
            inset 0 1px 0 rgba(255, 248, 220, 0.08);
    }

    .map-view-switches .map-radial-launcher.map-radial-layers-launcher {
        border-radius: 0;
    }

    .map-view-switches :is(
        .map-view-switch-module-appearance,
        .map-view-switch-module-gallery,
        .map-view-switch-module-tools,
        .map-view-switch-module-search,
        .map-radial-layers-launcher
    ),
    #map-options-radial-launcher {
        border-left-width: 0;
        box-shadow: inset 0 1px 0 rgba(255, 248, 220, 0.08);
    }

    .map-options-main-option {
        border-left-width: 0;
    }

    .map-view-switches .map-view-switch-module-tools {
        border-left-width: 1px;
    }

    #map-radial-menu .map-radial-item[data-radial-action="search"] {
        display: none;
    }

}

@media (any-pointer: coarse) and (min-width: 700px) and (max-width: 1024px) and (min-height: 760px) and (orientation: portrait) {
    .map-view-switches {
        gap: 0;
    }

    .map-view-switches .map-view-switch-module-workspace {
        border-radius: 24px 0 0 24px;
    }

    .map-view-switches .map-view-switch-module-map {
        margin-left: -1px;
        border-radius: 0 24px 24px 0;
    }
}

/* Final keyboard-focus contract. Keep this at the end of the last visual layer
   so feature-specific shadows and borders cannot remove the accessible ring.
   The feedback dialog owns an equally visible gold ring in its surface layer. */
body :is(
    a[href],
    button,
    input:not([type="hidden"]):not(#search-query-input),
    select,
    textarea,
    summary,
    [contenteditable="true"],
    [tabindex]:not([tabindex="-1"]),
    .maplibregl-canvas
):focus-visible:not(.riddle-gallery-close-button):not(#riddle-pile-poil-celebration-keep-tab-open):not(:where(#maphora-feedback-dialog *)) {
    outline: var(--maphora-focus-width) solid var(--maphora-focus) !important;
    outline-offset: var(--maphora-focus-offset) !important;
}