/* Base layout and fullscreen map */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --hg-glass-bg: #450a0abf;
    --hg-glass-border: #fecaca55;
    --hg-glass-radius: 14px;
    --hg-glass-shadow: 0 8px 28px #0005, inset 0 1px 0 #fff2;
    --hg-glass-blur: blur(15px) saturate(1.3);
    --hg-active-gradient: linear-gradient(135deg, #f97316, #dc2626);
    --hg-active-shadow: 0 3px 12px #f973164f, inset 0 1px 0 #fff3;
    --hg-modal-bg: linear-gradient(145deg, #450a0aeF, #1c1917e8);
    --hg-modal-border: #fecaca4f;
    --hg-modal-radius: 20px;
    --hg-modal-shadow: 0 26px 90px #000a, inset 0 1px 0 #fff2;
    --hg-modal-field-bg: #ffffff0f;
    --hg-modal-field-border: #fecaca47;
    --hg-modal-text: #fff7ed;
    --hg-modal-muted: #d6d3d1;
    --hg-modal-accent: #fb923c;
    --hg-modal-gap: 18px;
}

html, body { width: 100%; min-height: 100%; }

body {
    height: 100dvh;
    overflow: hidden;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #292524;
    background: #d6d3d1;
}

button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #fca5a5; outline-offset: 2px; }

.map-shell { position: fixed; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; }
.floating-ui { position: fixed; z-index: 900; transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.hg-glass-control {
    border: 1px solid var(--hg-glass-border); border-radius: var(--hg-glass-radius);
    background: var(--hg-glass-bg); box-shadow: var(--hg-glass-shadow); backdrop-filter: var(--hg-glass-blur);
}
.hg-control-active, .map-btn.active, .mobile-period-option.active {
    color: #fff; background: var(--hg-active-gradient); box-shadow: var(--hg-active-shadow);
    text-shadow: 0 1px 2px #7f1d1d;
}
.floating-brand {
    isolation: isolate; z-index: 1000; right: 12px; bottom: 32px; padding: 7px 10px; border: 1px solid #fecaca44;
    border-radius: 10px; color: #fff; background: #450a0acb; box-shadow: 0 4px 14px #0004;
    backdrop-filter: blur(10px) saturate(1.25);
}
.floating-brand strong { display: flex; position: relative; z-index: 3; align-items: center; font-size: 1rem; }
.floating-brand .brand-symbol { margin-right: 5px; }
.floating-brand .brand-word {
    display: inline-block; transform-origin: 48% 55%; color: #fff7ed;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
    font-weight: 900; font-style: italic; letter-spacing: .075em; line-height: .95;
    -webkit-text-stroke: .35px #fecaca; text-shadow: 2px 2px 0 #7f1d1d, 0 0 8px #ef444466;
    animation: brandHeartbeat 2.85s cubic-bezier(.2,.8,.2,1) infinite;
}
.floating-brand > span:last-child { display: block; margin-top: 3px; font-size: .7rem; opacity: .8; }
.floating-brand::after {
    position: absolute; z-index: 1; inset: -10px; border-radius: 18px;
    background: radial-gradient(circle, #fb923c88 0, #ef444444 35%, transparent 72%);
    content: ''; opacity: 0; pointer-events: none;
}
.brand-fire { position: absolute; z-index: 2; inset: -18px -10px -8px; overflow: visible; pointer-events: none; }
.brand-fire i {
    position: absolute; bottom: 7px; left: 50%; width: 8px; height: 25px; opacity: 0;
    border-radius: 70% 30% 62% 38% / 70% 40% 60% 30%;
    background: linear-gradient(to top, #dc2626, #f97316 58%, #fef08a);
    box-shadow: 0 0 9px #f9731688; transform-origin: 50% 100%;
}
.brand-fire i:nth-child(1) { --fire-x: -58px; --fire-rotate: -18deg; --fire-scale: .75; }
.brand-fire i:nth-child(2) { --fire-x: -31px; --fire-rotate: -8deg; --fire-scale: 1; }
.brand-fire i:nth-child(3) { --fire-x: 0px; --fire-rotate: 4deg; --fire-scale: 1.15; }
.brand-fire i:nth-child(4) { --fire-x: 32px; --fire-rotate: 13deg; --fire-scale: .92; }
.brand-fire i:nth-child(5) { --fire-x: 59px; --fire-rotate: 20deg; --fire-scale: .7; }
.floating-brand.fire-burst::after { animation: brandFireGlow 1s ease-out both; }
.floating-brand.fire-burst .brand-fire i { animation: brandFireTongue .9s cubic-bezier(.16,.76,.35,1) both; }
.floating-brand.fire-burst .brand-fire i:nth-child(2) { animation-delay: .04s; }
.floating-brand.fire-burst .brand-fire i:nth-child(3) { animation-delay: .08s; }
.floating-brand.fire-burst .brand-fire i:nth-child(4) { animation-delay: .02s; }
.floating-brand.fire-burst .brand-fire i:nth-child(5) { animation-delay: .06s; }
.rating-panel {
    z-index: 1100; top: 50%; right: auto; bottom: auto; left: 0;
    width: clamp(300px, 28vw, 350px); height: min(70dvh, 620px); max-height: calc(100dvh - 150px);
    min-width: 0; padding: 0; overflow: hidden; border: 1px solid transparent; border-left: 0;
    border-radius: 0 18px 18px 0; background: transparent; box-shadow: none; backdrop-filter: none;
    transform: translateX(calc(-100% + 52px)) translateY(-50%); pointer-events: none;
    transition: transform .27s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease,
                box-shadow .2s ease, opacity .22s ease, visibility .22s ease;
}
.mobile-panel-header { display: none; }
.mobile-panel-content { min-width: 0; }
.map-control-panel {
    z-index: 1050; top: 16px; left: 50%; padding: 6px; transform: translateX(-50%);
}

.panel-title {
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #fecaca;
    color: #dc2626;
    font-size: 1.08rem;
}

.step { display: none; margin-bottom: 25px; }
.step.active { display: block; }
.step-title { margin-bottom: 15px; color: #dc2626; font-size: 1.15rem; font-weight: 700; }


/* Forms, filters and regional statistics */
.input-container { position: relative; }
.character-input, .city-input {
    width: 100%; margin-bottom: 15px; padding: 12px;
    border: 2px solid #fecaca; border-radius: 8px; background: #fef2f2;
}
.character-input:focus, .city-input:focus { border-color: #dc2626; background: #fff; outline: none; }
.character-input[aria-invalid="true"] { border-color: #dc2626; }
.validation-status { min-height: 18px; margin: -8px 2px 10px; color: #b91c1c; font-size: .78rem; line-height: 1.35; }
.suggestions {
    display: none; position: absolute; z-index: 1000; top: 49px; width: 100%; max-height: 180px;
    overflow-y: auto; border: 1px solid #fecaca; border-radius: 8px; background: #fff;
    box-shadow: 0 8px 18px #0002;
}
.suggestions.open { display: block; }
.suggestion-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #fef2f2; }
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover { background: #fef2f2; }
.suggestion-main { color: #292524; font-weight: 700; }
.suggestion-meta { margin-top: 2px; color: #78716c; font-size: .8rem; }
.hate-suggestions {
    max-height: min(264px, 42dvh); overflow-y: auto; overscroll-behavior: contain;
    border-color: #dc262640; border-radius: var(--hg-control-radius);
    background: #fffefee8; box-shadow: var(--hg-control-shadow);
    backdrop-filter: blur(var(--hg-control-blur)); -webkit-backdrop-filter: blur(var(--hg-control-blur));
}
.hate-suggestions .suggestion-item {
    display: flex; min-height: 44px; align-items: center; padding: 10px 12px;
    border-bottom-color: #dc26261a; color: #451a1a; font-weight: 750;
    transition: color .16s ease, background .16s ease;
}
.hate-suggestions .suggestion-item:hover,
.hate-suggestions .suggestion-item[aria-selected="true"] {
    color: #7f1d1d; background: linear-gradient(135deg, #fee2e2d9, #fff7edcf);
}
.city-search-status { min-height: 18px; margin: -8px 2px 10px; color: #78716c; font-size: .78rem; line-height: 1.35; }
.city-search-status.error { color: #b91c1c; }
.city-search-status.success { color: #166534; }
.city-input[aria-invalid="true"] { border-color: #dc2626; }
.next-btn, .hate-btn, .map-btn {
    border: 0; border-radius: 8px; color: #fff; background: #dc2626;
    cursor: pointer; font-weight: 700; transition: background .2s, transform .2s;
}
.next-btn, .hate-btn { width: 100%; padding: 12px 20px; }
.next-btn:hover, .hate-btn:hover, .map-btn:hover { background: #b91c1c; }
.next-btn:active, .hate-btn:active, .map-btn:active { transform: translateY(1px); }
.hate-btn:disabled { cursor: wait; opacity: .72; transform: none; }

.hate-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 15px 0; }
.hate-number {
    padding: 14px 3px; border: 2px solid var(--rage-color, #dc2626); border-radius: 8px;
    color: var(--rage-color, #dc2626); background: var(--rage-soft, #fef2f2); cursor: pointer;
    text-align: center; font-weight: 900; transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hate-number:hover { border-color: var(--rage-color, #dc2626); background: var(--rage-hover, #fee2e2); transform: translateY(-1px); }
.hate-number.active {
    border-color: var(--rage-color, #dc2626); color: var(--rage-contrast, #fff); background: var(--rage-color, #dc2626);
    box-shadow: 0 0 0 3px var(--rage-soft, #fee2e2), 0 5px 14px #0002; transform: translateY(-1px);
}
.rating-labels { display: flex; justify-content: space-between; margin: 10px 0 15px; color: #78716c; font-size: .83rem; }

.selected-info, .stat-item { padding: 15px; border-left: 4px solid #dc2626; border-radius: 8px; background: #fef2f2; }
.selected-info { margin: 15px 0; }
.selected-item { color: #dc2626; font-weight: 700; }
.local-stats { margin-top: 28px; }
.regional-city-name { margin-bottom: 8px; color: #7f1d1d; font-weight: 800; }
.stat-item p + p { margin-top: 8px; }
.empty-state { color: #78716c; text-align: center; }

.top-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; padding: 9px 0; }
.top-row + .top-row { border-top: 1px solid #fecaca; }
.top-place { color: #dc2626; font-size: 1.1rem; font-weight: 800; text-align: center; }
.top-name { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.top-metrics { color: #7f1d1d; font-size: .86rem; font-weight: 700; text-align: right; white-space: nowrap; }

.trending-row {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0;
}
.trending-row + .trending-row { border-top: 1px solid #fecaca; }
.trending-rank { color: #dc2626; font-weight: 800; text-align: center; }
.trending-name { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.trending-growth { color: #dc2626; font-size: .86rem; font-weight: 800; white-space: nowrap; }
.trending-growth.new { color: #b45309; }

.map-controls { display: flex; gap: 4px; }
.map-btn {
    min-height: 40px; padding: 9px 14px; color: #fff7ed; background: transparent;
    text-shadow: 0 1px 2px #0009; white-space: nowrap;
}
.map-btn:hover { color: #fff; background: #ffffff18; }
.map-btn.active { color: #fff; }
.global-stats-legend {
    z-index: 950; right: auto; bottom: 78px; left: 50%; display: flex; align-items: center; justify-content: center;
    width: max-content; max-width: calc(100vw - 36px); padding: 10px 15px; gap: 9px; border: 1px solid #fff5;
    border-radius: 14px; color: #fff7ed; background: #292524c9; box-shadow: 0 8px 26px #0005;
    backdrop-filter: blur(14px) saturate(1.2); transform: translateX(-50%); font-size: .82rem; white-space: nowrap;
}
.global-stats-legend > span { display: inline-flex; align-items: baseline; gap: 4px; }
.global-stats-legend > span + span::before { margin-right: 5px; color: #fca5a5; content: '·'; }
.global-stats-legend strong { color: #fff; font-weight: 850; }
.global-stats-legend .stats-period strong { color: #fdba74; }
#map { position: absolute; inset: 0; width: 100vw; height: 100dvh; min-height: 0; border: 0; background: #f5f5f4; }
.fire-overview-pane, .fire-boundary-pane { transition: opacity .2s linear; }
.fire-overview-spot, .fire-city-boundary { vector-effect: non-scaling-stroke; }
.fire-overview-core { filter: drop-shadow(0 0 3px #f9731680); }
.fire-overview-halo, .fire-city-boundary-halo { pointer-events: none; }
.map-shell .leaflet-marker-pane, .map-shell .leaflet-overlay-pane { transition: opacity .24s ease; }
.map-shell.map-mode-fade .leaflet-marker-pane, .map-shell.map-mode-fade .leaflet-overlay-pane { opacity: .12; }
.map-empty, .map-loading, .map-error {
    display: none; position: fixed; z-index: 700; inset: 50% auto auto 50%;
    width: min(330px, calc(100% - 40px)); padding: 13px 16px; transform: translate(-50%, -50%);
    border-radius: 10px; color: #57534e; background: #fffc; box-shadow: 0 6px 20px #0002; text-align: center;
    pointer-events: none;
}
.map-empty.visible, .map-loading.visible, .map-error.visible { display: block; }
.map-loading { color: #7f1d1d; font-weight: 650; }
.map-error { color: #991b1b; background: #fff1f2ee; pointer-events: auto; }
.map-retry {
    display: block; margin: 10px auto 0; padding: 7px 11px; border: 0; border-radius: 7px;
    color: #fff; background: #dc2626; cursor: pointer; font-size: .82rem; font-weight: 700;
}
/* Leaflet popups and point markers */
.leaflet-popup-pane { z-index: 1200; }
.location-popup { min-width: 235px; }
.location-stats-popup .leaflet-popup-content { margin: 12px 14px; max-height: min(300px, 55vh); overflow-y: auto; }
.location-popup h3 { margin: 0 0 8px; color: #b91c1c; font-size: 1rem; }
.popup-period { margin-bottom: 5px; color: #7f1d1d; font-size: .8rem; font-weight: 700; }
.popup-total { margin-bottom: 8px; color: #78716c; font-size: .78rem; }
.popup-row { display: grid; grid-template-columns: 24px 1fr; gap: 7px; padding: 7px 0; border-top: 1px solid #fee2e2; }
.popup-place { color: #dc2626; font-weight: 800; }
.popup-name { overflow-wrap: anywhere; font-weight: 700; }
.popup-metrics { margin-top: 2px; color: #57534e; font-size: .78rem; }
.hate-marker-icon { border: 0; background: transparent; }
.hate-marker-dot {
    display: block; width: 100%; height: 100%; border: 2px solid #7f1d1d;
    border-radius: 50%; background: #dc2626c7; box-shadow: 0 2px 8px #0005;
}
.hate-marker-icon:focus { outline: 3px solid #fca5a5; outline-offset: 2px; border-radius: 50%; }

.add-hate-btn {
    width: 100%; margin-bottom: 20px; padding: 12px 16px; border: 0; border-radius: 10px;
    color: #fff; background: linear-gradient(135deg, #dc2626, #991b1b); cursor: pointer;
    box-shadow: 0 6px 16px #991b1b35; font-weight: 800;
}
.add-hate-btn:hover { background: linear-gradient(135deg, #b91c1c, #7f1d1d); }

/* Shared modal system: onboarding, repeat vote and post-vote state. */
.hg-modal-layer {
    display: grid; position: fixed; inset: 0; place-items: center;
    padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px))
             max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
}
.hg-modal-shell {
    position: relative; width: min(520px, 100%); max-height: calc(100dvh - 36px);
    padding: clamp(24px, 3.2vw, 32px); border: 1px solid var(--hg-modal-border);
    border-radius: var(--hg-modal-radius); color: var(--hg-modal-text); background: var(--hg-modal-bg);
    box-shadow: var(--hg-modal-shadow); backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); pointer-events: auto;
}
.hg-modal-title {
    color: var(--hg-modal-text); font-weight: 900; letter-spacing: -.018em;
    text-shadow: 0 2px 14px #0007;
}
.hg-modal-step-title { color: var(--hg-modal-text); line-height: 1.25; }
.hg-modal-close {
    display: grid; position: absolute; z-index: 5; top: 12px; right: 12px; width: 36px; height: 36px;
    place-items: center; padding: 0; border-color: #fecaca45; border-radius: 50%; color: #fff7ed;
    background: #ffffff10; cursor: pointer; font-size: 1.35rem; line-height: 1;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.hg-modal-close:hover { border-color: #fdba7480; background: #ffffff1c; transform: translateY(-1px); }
.hg-modal-close:active { transform: translateY(0); }
.hg-modal-progress { min-height: 18px; }
.hg-modal-input {
    min-height: 50px; border: 1px solid var(--hg-modal-field-border); border-radius: 12px;
    color: var(--hg-modal-text); background: var(--hg-modal-field-bg); box-shadow: inset 0 1px 0 #fff1;
    caret-color: #fdba74; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.hg-modal-input::placeholder { color: #d6d3d1a8; }
.hg-modal-input:focus {
    border-color: #fb923ccc; color: #fff; background: #ffffff16;
    box-shadow: 0 0 0 3px #f9731628, inset 0 1px 0 #fff1; outline: 0;
}
.hg-modal-input[aria-invalid="true"] { border-color: #f87171; box-shadow: 0 0 0 3px #ef444426; }
.hg-modal-suggestions, .hg-modal-shell .suggestions {
    border: 1px solid var(--hg-modal-border); border-radius: 12px; color: var(--hg-modal-text);
    background: #292524f2; box-shadow: 0 16px 42px #0009, inset 0 1px 0 #fff1;
    backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
    scrollbar-color: #fb923c66 transparent;
}
.hg-modal-suggestions .suggestion-item, .hg-modal-shell .suggestions .suggestion-item {
    min-height: 46px; padding: 11px 13px; border-bottom: 1px solid #fecaca1f; color: #fff7ed;
    background: transparent; transition: color .16s ease, background .16s ease;
}
.hg-modal-suggestions .suggestion-item:hover,
.hg-modal-suggestions .suggestion-item[aria-selected="true"],
.hg-modal-shell .suggestions .suggestion-item:hover,
.hg-modal-shell .suggestions .suggestion-item[aria-selected="true"] {
    color: #fff; background: linear-gradient(135deg, #f973163d, #dc26262e);
}
.hg-modal-suggestions .suggestion-main, .hg-modal-shell .suggestions .suggestion-main { color: inherit; }
.hg-modal-suggestions .suggestion-meta, .hg-modal-shell .suggestions .suggestion-meta { color: #d6d3d1; }
.hg-modal-summary {
    margin: 0 0 var(--hg-modal-gap); padding: 12px 14px; border: 1px solid #fecaca2e;
    border-left: 3px solid var(--hg-modal-accent); border-radius: 11px; color: var(--hg-modal-muted);
    background: #ffffff0b; box-shadow: inset 0 1px 0 #fff1; line-height: 1.5;
}
.hg-modal-summary .selected-item { color: #fdba74; }
.hg-modal-status { min-height: 18px; color: var(--hg-modal-muted); }
.hg-modal-status.error, .hg-modal-shell .validation-status { color: #fca5a5; }
.hg-modal-status.success { color: #86efac; }
.hg-modal-btn {
    min-height: 48px; padding: 11px 16px; border-radius: 11px; cursor: pointer;
    color: #fff; font: inherit; font-weight: 850; letter-spacing: .005em;
    transition: filter .18s ease, transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.hg-modal-btn--primary {
    border: 0; background: var(--hg-active-gradient); box-shadow: var(--hg-active-shadow);
    text-shadow: 0 1px 2px #7f1d1d;
}
.hg-modal-btn--primary:hover { filter: brightness(1.09); transform: translateY(-1px); }
.hg-modal-btn--secondary {
    border: 1px solid var(--hg-modal-field-border); color: #fff7ed; background: #ffffff10;
    box-shadow: inset 0 1px 0 #fff1;
}
.hg-modal-btn--secondary:hover { border-color: #fdba7470; background: #ffffff1b; transform: translateY(-1px); }
.hg-modal-btn:active { transform: translateY(1px); }
.hg-modal-btn:disabled { cursor: wait; opacity: .68; filter: saturate(.75); transform: none; }
.hg-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.onboarding-layer {
    z-index: 3000; opacity: 0; visibility: hidden; pointer-events: none;
    background: #1c19175c; transition: opacity .35s ease, visibility .35s ease;
}
.onboarding-layer.open { opacity: 1; visibility: visible; }
.onboarding-modal {
    overflow: visible; transform: translateY(16px) scale(.985);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.onboarding-layer.open .onboarding-modal { transform: translateY(0) scale(1); }
.onboarding-brand { margin: 0 42px 16px; font-size: clamp(1.18rem, 2.3vw, 1.35rem); text-align: center; }
.onboarding-progress { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 20px; }
.onboarding-dot {
    width: 8px; height: 8px; border: 1px solid #fecaca38; border-radius: 50%; background: #ffffff1f;
    transition: width .22s ease, background .22s ease, box-shadow .22s ease;
}
.onboarding-dot.active {
    width: 24px; border-color: #fb923ca8; border-radius: 99px; background: var(--hg-active-gradient);
    box-shadow: 0 0 12px #f973164d;
}
.onboarding-step-label { margin-left: 5px; color: var(--hg-modal-muted); font-size: .76rem; font-weight: 750; }
.onboarding-modal .step { margin-bottom: 0; }
.onboarding-modal .step.active { animation: hgModalStepIn .22s cubic-bezier(.2,.8,.2,1) both; }
.onboarding-modal .step-title { margin-bottom: 18px; font-size: 1.3rem; text-align: center; }
.onboarding-modal .character-input, .onboarding-modal .city-input { margin-bottom: 15px; padding: 12px 14px; }
.onboarding-modal .rating-labels { color: var(--hg-modal-muted); }
.onboarding-modal .hate-number {
    min-width: 0; min-height: 48px; padding: 10px 3px; border-width: 1px; border-radius: 10px;
    color: var(--rage-color, #fb923c); background: color-mix(in srgb, var(--rage-color, #fb923c) 13%, transparent);
    box-shadow: inset 0 1px 0 #fff1;
}
.onboarding-modal .hate-number:hover {
    color: #fff; background: color-mix(in srgb, var(--rage-color, #fb923c) 28%, transparent);
    box-shadow: 0 5px 16px #0004, inset 0 1px 0 #fff2;
}
.onboarding-modal .hate-number.active {
    color: var(--rage-contrast, #fff); background: var(--rage-color, #dc2626);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rage-color, #fb923c) 28%, transparent), 0 7px 18px #0005;
}

body.first-onboarding .floating-ui { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
body.first-onboarding .map-control-panel, body.first-onboarding .global-stats-legend { transform: translate(-50%, 8px); }
body.first-onboarding #map {
    filter: blur(5px) brightness(.82) saturate(1.12);
    pointer-events: none; transform: scale(1.02);
    transition: filter .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
}
body.first-onboarding .map-shell::after {
    position: absolute; z-index: 650; inset: 0; background: #450a0a1c;
    content: ''; opacity: 1; pointer-events: auto; transition: opacity .75s cubic-bezier(.2,.8,.2,1);
}
body.first-onboarding.onboarding-revealing #map { filter: blur(0) brightness(1) saturate(1); transform: scale(1); }
body.first-onboarding.onboarding-revealing .map-shell::after { opacity: 0; pointer-events: none; }
body.first-onboarding .onboarding-close { display: none; }
body.first-onboarding .onboarding-layer { background: transparent; }
body.repeat-onboarding .onboarding-layer { background: #1c191733; pointer-events: none; }
body.exploration-enter .floating-ui { animation: explorationEnter .4s ease both; }
body.exploration-enter .map-control-panel, body.exploration-enter .global-stats-legend {
    animation-name: explorationEnterCentered;
}

/* Compact success state after a confirmed vote, using the same modal shell. */
.post-vote-layer {
    z-index: 3500; opacity: 0; visibility: hidden; pointer-events: none;
    background: #1c191766; transition: opacity .35s ease, visibility 0s linear .35s;
}
.post-vote-layer.open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.post-vote-card {
    width: min(440px, 100%); opacity: 0; text-align: center; transform: translateY(10px) scale(.985);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.post-vote-layer.open .post-vote-card { opacity: 1; transform: translateY(0) scale(1); }
.post-vote-icon { margin-bottom: 7px; font-size: 2.2rem; filter: drop-shadow(0 5px 12px #f9731685); }
.post-vote-card h2 { margin: 0 34px; font-size: 1.45rem; }
.post-vote-card > p { margin: 10px 0 20px; color: var(--hg-modal-muted); font-size: .94rem; line-height: 1.5; }
.manual-share-fallback { margin-top: 13px; text-align: left; }
.manual-share-fallback label { display: block; margin-bottom: 6px; color: var(--hg-modal-muted); font-size: .78rem; font-weight: 750; }
.manual-share-fallback textarea {
    width: 100%; padding: 10px 11px; resize: none; border: 1px solid var(--hg-modal-field-border); border-radius: 10px;
    color: var(--hg-modal-text); background: var(--hg-modal-field-bg); font: inherit; font-size: .78rem; line-height: 1.4;
}
.toast {
    position: fixed; z-index: 4000; left: 50%; bottom: 24px; max-width: calc(100% - 30px);
    padding: 11px 18px; border-radius: 99px; color: #fff; background: #292524eF;
    box-shadow: 0 8px 28px #0005; opacity: 0; pointer-events: none;
    transform: translate(-50%, 14px); transition: opacity .25s, transform .25s;
    font-size: .9rem; font-weight: 700; text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes explorationEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes explorationEnterCentered {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes hgModalStepIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes brandHeartbeat {
    0%, 28%, 100% { transform: skew(-6deg) scale(1); filter: brightness(1); }
    7% { transform: skew(-6deg) scale(1.055); filter: brightness(1.2); text-shadow: 2px 2px 0 #7f1d1d, 0 0 12px #ef4444aa; }
    13% { transform: skew(-6deg) scale(1); filter: brightness(1.02); }
    19% { transform: skew(-6deg) scale(1.028); filter: brightness(1.12); text-shadow: 2px 2px 0 #7f1d1d, 0 0 9px #ef444488; }
}
@keyframes brandFireGlow {
    0% { opacity: 0; transform: scale(.8); }
    24% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes brandFireTongue {
    0% { opacity: 0; transform: translateX(var(--fire-x)) translateY(12px) rotate(var(--fire-rotate)) scale(.35); }
    24% { opacity: .96; transform: translateX(var(--fire-x)) translateY(0) rotate(var(--fire-rotate)) scale(var(--fire-scale)); }
    70% { opacity: .72; }
    100% { opacity: 0; transform: translateX(var(--fire-x)) translateY(-25px) rotate(0deg) scale(.2); }
}
@keyframes brandFireReduced {
    0% { opacity: 0; transform: scale(.96); }
    35% { opacity: .65; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05); }
}

/* Shared floating controls: the same spatial and visual system on mobile and desktop. */
.side-panel-tab {
    display: flex; position: absolute; z-index: 3; top: 50%; right: 0;
    width: 48px; min-width: 48px; height: 176px; align-items: center; justify-content: center;
    padding: 9px 7px; border-right: 0; border-radius: 12px 0 0 12px;
    color: #fff7ed; cursor: pointer; pointer-events: auto; transform: translateY(-50%);
    transition: opacity .16s ease, visibility .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.side-panel-tab:hover { border-color: #fdba7470; box-shadow: 0 8px 28px #0005, 0 0 16px #f9731626, inset 0 1px 0 #fff2; }
.mobile-side-tab-letters {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 850; letter-spacing: 0; line-height: .83rem; text-transform: none;
}
.mobile-side-tab-letters > span { display: block; width: 1em; text-align: center; }
.mobile-side-tab-letters .mobile-word-start { margin-top: 5px; }
.mobile-panel-title {
    display: block; margin-bottom: 10px; color: #fff7ed; font-size: .9rem; font-weight: 850;
    letter-spacing: .025em; line-height: 1; white-space: nowrap;
}
.side-panel-close {
    display: block; position: absolute; z-index: 4; right: 10px; bottom: 10px;
    width: 36px; height: 36px; color: #fff7ed; cursor: pointer; font-size: 1.4rem; font-weight: 900; line-height: 1;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease, border-color .16s ease;
}
.side-panel-close:hover { border-color: #fdba7470; }
.side-panel-close:active { transform: translateX(-1px); }
.mobile-panel-content {
    width: 100%; height: 100%; min-height: 0; padding: 15px 13px 58px; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none;
    scrollbar-width: thin; transition: opacity .16s ease, visibility .16s ease;
}
.rating-panel .local-stats {
    margin: 0; padding: 10px; border: 1px solid #fecaca2e; border-radius: 12px;
    background: #ffffff0c; box-shadow: inset 0 1px 0 #fff1;
}
.rating-panel .local-stats + .local-stats { margin-top: 10px; }
.rating-panel .panel-title {
    margin: 0 0 7px; padding: 0 0 7px; overflow: hidden; border-bottom: 1px solid #fecaca2e;
    color: #fed7aa; font-size: .8rem; letter-spacing: .015em; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
}
.rating-panel .stat-item { padding: 0; border: 0; border-radius: 0; color: #fff7ed; background: transparent; }
.rating-panel .empty-state { color: #d6d3d1; font-size: .76rem; line-height: 1.3; }
.rating-panel .trending-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; padding: 6px 0; }
.rating-panel .trending-row + .trending-row, .rating-panel .top-row + .top-row { border-color: #fecaca24; }
.rating-panel .trending-name, .rating-panel .top-name { color: #fff7ed; font-size: .78rem; }
.rating-panel .trending-rank, .rating-panel .trending-growth, .rating-panel .top-place { color: #fb923c; }
.rating-panel .trending-growth { font-size: .76rem; }
.rating-panel .top-row { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 6px 0; }
.rating-panel .top-metrics {
    grid-column: 2; color: #fdba74; font-size: .7rem; line-height: 1.2; text-align: left; white-space: normal;
}
.rating-panel .regional-city-name { margin-bottom: 5px; color: #fed7aa; font-size: .78rem; }
.period-wheel {
    z-index: 1060; top: 50%; right: 12px; display: flex; width: 48px; height: 208px;
    flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 0 3px;
    border-color: #fecaca30; background: #450a0a59; box-shadow: 0 5px 18px #0003, inset 0 1px 0 #fff1;
    backdrop-filter: blur(11px) saturate(1.2); transform: translateY(-50%);
    scroll-snap-type: y mandatory; overscroll-behavior: contain; touch-action: pan-y;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
}
.period-wheel::-webkit-scrollbar { display: none; }
.period-wheel .period-wheel-spacer { flex: 0 0 84px; width: 1px; pointer-events: none; scroll-snap-align: none; }
.period-wheel .mobile-period-option {
    flex: 0 0 40px; width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 9px;
    color: #fff7ed; background: transparent; cursor: pointer; opacity: .26; scroll-snap-align: center;
    scroll-snap-stop: always; font-size: .72rem; font-weight: 800; line-height: 40px;
    text-align: center; text-shadow: 0 1px 2px #0008; transform: scale(.82);
    transition: opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.period-wheel .mobile-period-option:hover { opacity: .72; }
.period-wheel .mobile-period-option[data-distance="1"] { opacity: .5; transform: scale(.9); }
.period-wheel .mobile-period-option.active { opacity: 1; transform: scale(1); }
.app-action-control {
    z-index: 1050; right: auto; bottom: 20px; left: 50%; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(360px, calc(100vw - 24px));
    min-height: 62px; padding: 6px; gap: 4px; transform: translateX(-50%);
}
.app-action-control .add-hate-btn, .app-action-control .app-share-btn {
    display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 9px 7px;
    overflow: hidden; border: 0; border-radius: 9px; color: #fff; cursor: pointer;
    background: var(--hg-active-gradient); box-shadow: var(--hg-active-shadow);
    font-size: .86rem; font-weight: 850; text-overflow: ellipsis; text-shadow: 0 1px 2px #7f1d1d; white-space: nowrap;
}
.app-action-control .app-share-btn { background: linear-gradient(135deg, #dc2626, #991b1b); }
.app-action-control .add-hate-btn:hover, .app-action-control .app-share-btn:hover { filter: brightness(1.08); }
.app-action-control .add-hate-btn:active, .app-action-control .app-share-btn:active { transform: translateY(1px); }
.app-action-control .add-hate-btn:disabled, .app-action-control .app-share-btn:disabled { cursor: wait; opacity: .72; transform: none; }

/* Responsive behavior */
@media (max-height: 760px) and (min-width: 1025px) {
    .rating-panel { height: min(72dvh, 500px); max-height: calc(100dvh - 120px); }
}

.leaflet-top.leaflet-left { top: 66px; right: 18px; left: auto; }

@media (min-width: 721px) {
    .rating-panel {
        width: clamp(300px, 28vw, 350px); height: min(68dvh, 580px); max-height: calc(100dvh - 150px);
    }
    .rating-panel.desktop-panel--expanded {
        border-color: #fecaca55; background: #450a0ae8; box-shadow: 12px 0 38px #0006, inset 0 1px 0 #fff2;
        backdrop-filter: blur(18px) saturate(1.3); pointer-events: auto; transform: translateX(0) translateY(-50%);
    }
    .desktop-panel--expanded .side-panel-tab { opacity: 0; visibility: hidden; pointer-events: none; }
    .desktop-panel--expanded .mobile-panel-content {
        opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .07s;
    }
    .desktop-panel--expanded .side-panel-close { opacity: 1; visibility: visible; pointer-events: auto; }
    .leaflet-top.leaflet-left { top: 62px; right: auto; left: 12px; }
    body.onboarding-active .rating-panel, body.onboarding-active .app-action-control, body.onboarding-active .period-wheel,
    body.share-success-active .rating-panel, body.share-success-active .app-action-control, body.share-success-active .period-wheel {
        opacity: 0; visibility: hidden; pointer-events: none;
    }
}

@media (max-width: 720px) {
    body { --mobile-action-height: 62px; --mobile-side-tab-width: 40px; }
    .floating-brand {
        top: auto; right: 10px; bottom: calc(122px + env(safe-area-inset-bottom, 0px)); left: auto;
        padding: 7px 9px;
    }
    .floating-brand > span:last-child { display: none; }
    .map-control-panel { top: 12px; }
    .map-btn { min-height: 44px; padding: 8px 10px; font-size: .76rem; }
    .rating-panel {
        z-index: 1100; top: 50%; right: auto; bottom: auto; left: 0;
        width: clamp(210px, 62vw, 320px); height: min(70dvh, 620px); max-height: calc(100dvh - 150px);
        padding: 0; overflow: hidden; border: 1px solid transparent; border-left: 0; border-radius: 0 18px 18px 0;
        background: transparent; box-shadow: none; backdrop-filter: none;
        transform: translateX(calc(-100% + var(--mobile-side-tab-width) + 12px)) translateY(-50%);
        transition: transform .27s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease,
                    box-shadow .2s ease, opacity .22s ease, visibility .22s ease;
        pointer-events: none; will-change: transform;
    }
    .rating-panel.mobile-side-panel--expanded {
        border-color: #fecaca55; background: #450a0ae8; box-shadow: 12px 0 38px #0006, inset 0 1px 0 #fff2;
        backdrop-filter: blur(18px) saturate(1.3); pointer-events: auto; transform: translateX(0) translateY(-50%);
    }
    .mobile-side-tab {
        display: flex; position: absolute; z-index: 3; top: 50%; right: 0;
        width: var(--mobile-side-tab-width); min-width: var(--mobile-side-tab-width); height: 176px;
        align-items: center; justify-content: center; padding: 9px 7px; border-right: 0; border-radius: 12px 0 0 12px;
        color: #fff7ed;
        cursor: pointer; pointer-events: auto; transform: translateY(-50%); transition: opacity .16s ease, visibility .16s ease;
    }
    .mobile-side-tab-letters {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: .72rem; font-weight: 850; letter-spacing: 0; line-height: .83rem; text-transform: none;
    }
    .mobile-side-tab-letters > span { display: block; width: 1em; text-align: center; }
    .mobile-side-tab-letters .mobile-word-start { margin-top: 5px; }
    .mobile-side-panel--expanded .mobile-side-tab { opacity: 0; visibility: hidden; pointer-events: none; }
    .mobile-panel-title {
        display: block; margin-bottom: 10px; color: #fff7ed; font-size: .9rem; font-weight: 850;
        letter-spacing: .025em; line-height: 1; white-space: nowrap;
    }
    .mobile-panel-close {
        display: block; position: absolute; z-index: 4; right: 10px; bottom: 10px;
        width: 36px; height: 36px; color: #fff7ed; cursor: pointer; font-size: 1.4rem; font-weight: 900; line-height: 1;
        opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
    }
    .mobile-side-panel--expanded .mobile-panel-close { opacity: 1; visibility: visible; pointer-events: auto; }
    .mobile-panel-close:active { transform: translateX(-1px); }
    .mobile-panel-content {
        width: 100%; height: 100%; min-height: 0; padding: 15px 13px 58px; overflow-x: hidden; overflow-y: auto;
        overscroll-behavior: contain; opacity: 0; visibility: hidden; pointer-events: none;
        touch-action: pan-y; scrollbar-width: thin; transition: opacity .16s ease, visibility .16s ease;
    }
    .rating-panel.mobile-side-panel--expanded .mobile-panel-content {
        opacity: 1; visibility: visible; pointer-events: auto; transition-delay: .07s;
    }
    .rating-panel .local-stats {
        margin: 0; padding: 10px; border: 1px solid #fecaca2e; border-radius: 12px;
        background: #ffffff0c; box-shadow: inset 0 1px 0 #fff1;
    }
    .rating-panel .local-stats + .local-stats { margin-top: 10px; }
    .rating-panel .panel-title {
        margin: 0 0 7px; padding: 0 0 7px; overflow: hidden; border-bottom: 1px solid #fecaca2e;
        color: #fed7aa; font-size: .8rem; letter-spacing: .015em; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
    }
    .rating-panel .stat-item { padding: 0; border: 0; border-radius: 0; color: #fff7ed; background: transparent; }
    .rating-panel .empty-state { color: #d6d3d1; font-size: .76rem; line-height: 1.3; }
    .rating-panel .trending-row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; padding: 6px 0; }
    .rating-panel .trending-row + .trending-row, .rating-panel .top-row + .top-row { border-color: #fecaca24; }
    .rating-panel .trending-name, .rating-panel .top-name { color: #fff7ed; font-size: .78rem; }
    .rating-panel .trending-rank, .rating-panel .trending-growth, .rating-panel .top-place { color: #fb923c; }
    .rating-panel .trending-growth { font-size: .76rem; }
    .rating-panel .top-row { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; padding: 6px 0; }
    .rating-panel .top-metrics {
        grid-column: 2; color: #fdba74; font-size: .7rem; line-height: 1.2; text-align: left; white-space: normal;
    }
    .rating-panel .regional-city-name { margin-bottom: 5px; color: #fed7aa; font-size: .78rem; }
    .mobile-period-wheel {
        z-index: 1060; top: 50%; right: 8px; display: flex; width: 48px; height: 208px;
        flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 0 3px;
        border-color: #fecaca30; background: #450a0a59; box-shadow: 0 5px 18px #0003, inset 0 1px 0 #fff1;
        backdrop-filter: blur(11px) saturate(1.2); transform: translateY(-50%);
        scroll-snap-type: y mandatory; overscroll-behavior: contain; touch-action: pan-y;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 17%, #000 83%, transparent);
    }
    .mobile-period-wheel::-webkit-scrollbar { display: none; }
    .period-wheel-spacer { flex: 0 0 84px; width: 1px; pointer-events: none; scroll-snap-align: none; }
    .mobile-period-option {
        flex: 0 0 40px; width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 9px;
        color: #fff7ed; background: transparent; cursor: pointer; opacity: .26; scroll-snap-align: center;
        scroll-snap-stop: always;
        font-size: .72rem; font-weight: 800; line-height: 40px; text-align: center; text-shadow: 0 1px 2px #0008;
        transform: scale(.82); transition: opacity .18s ease, transform .18s ease, color .18s ease,
                    background .18s ease, box-shadow .18s ease;
    }
    .mobile-period-option[data-distance="1"] { opacity: .5; transform: scale(.9); }
    .mobile-period-option.active { opacity: 1; transform: scale(1); }
    .mobile-action-control {
        z-index: 1050; right: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 50%;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: min(360px, calc(100vw - 24px)); min-height: var(--mobile-action-height); padding: 6px; gap: 4px;
        transform: translateX(-50%);
    }
    .mobile-action-control .add-hate-btn, .mobile-action-control .app-share-btn {
        display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 9px 7px;
        overflow: hidden; border: 0; border-radius: 9px; color: #fff; cursor: pointer;
        background: var(--hg-active-gradient); box-shadow: var(--hg-active-shadow);
        font-size: .86rem; font-weight: 850; text-overflow: ellipsis; text-shadow: 0 1px 2px #7f1d1d; white-space: nowrap;
    }
    .mobile-action-control .app-share-btn { background: linear-gradient(135deg, #dc2626, #991b1b); }
    .mobile-action-control .add-hate-btn:active, .mobile-action-control .app-share-btn:active { transform: translateY(1px); }
    body.onboarding-active .rating-panel, body.onboarding-active .mobile-action-control, body.onboarding-active .mobile-period-wheel,
    body.share-success-active .rating-panel, body.share-success-active .mobile-action-control, body.share-success-active .mobile-period-wheel {
        opacity: 0; visibility: hidden; pointer-events: none;
    }
    .leaflet-top.leaflet-left { top: 62px; right: auto; left: 12px; }
    .leaflet-control-attribution {
        max-width: calc(100vw - 16px); margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        transition: opacity .2s ease;
    }
    .hate-scale { grid-template-columns: repeat(5, 1fr); }
    .hg-modal-layer {
        padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
                 max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    }
    .hg-modal-shell {
        width: min(520px, 100%); max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px)));
        padding: 24px 17px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        border-radius: 18px; -webkit-overflow-scrolling: touch;
    }
    .onboarding-layer { align-items: center; }
    .onboarding-modal .step-title { font-size: 1.15rem; }
    .onboarding-brand { margin-right: 34px; margin-left: 34px; font-size: 1.1rem; line-height: 1.25; }
    .onboarding-progress { margin-bottom: 17px; }
    .onboarding-modal .hate-number { min-height: 46px; }
    .hate-suggestions { max-height: min(264px, 34dvh); -webkit-overflow-scrolling: touch; }
    .post-vote-layer { align-items: center; }
    .post-vote-card { width: min(440px, 100%); padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
    .global-stats-legend {
        right: 8px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); left: 8px; justify-content: flex-start;
        width: auto; max-width: none; padding: 7px 9px; gap: 4px 7px; overflow-x: auto;
        border-radius: 11px; transform: none; font-size: .72rem; line-height: 1.1; white-space: nowrap;
        scrollbar-width: none;
    }
    .global-stats-legend::-webkit-scrollbar { display: none; }
    .global-stats-legend > span + span::before { margin-right: 3px; }
}
@media (max-width: 720px) and (orientation: landscape) {
    .rating-panel { height: min(78dvh, 430px); max-height: calc(100dvh - 24px); }
    .mobile-side-tab { height: 142px; }
    .mobile-side-tab-letters { font-size: .62rem; line-height: .68rem; }
    .mobile-period-wheel { height: min(208px, calc(100dvh - 110px)); }
}
@media (max-width: 360px) {
    .floating-brand strong { font-size: .82rem; }
    .map-control-panel { padding: 5px; }
    .map-btn { padding: 7px 8px; font-size: .72rem; }
    .mobile-action-control .add-hate-btn, .mobile-action-control .app-share-btn { padding-inline: 5px; font-size: .8rem; }
    .global-stats-legend { font-size: .69rem; gap: 3px 6px; }
    .hg-modal-actions { grid-template-columns: 1fr; }
    .hg-modal-shell { padding-right: 14px; padding-left: 14px; }
    .onboarding-modal .step-title { font-size: 1.08rem; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-brand .brand-word { animation: none; transform: skew(-6deg); }
    .map-shell .leaflet-marker-pane, .map-shell .leaflet-overlay-pane { transition-duration: .01ms; }
    .floating-brand.fire-burst .brand-fire i { animation: none; opacity: 0; }
    .floating-brand.fire-burst::after { animation: brandFireReduced .42s ease-out both; }
    .floating-ui, .onboarding-layer, .onboarding-modal, body.first-onboarding #map,
    body.first-onboarding .map-shell::after, .post-vote-layer, .post-vote-card { transition-duration: .01ms; }
    .onboarding-modal .step.active { animation-duration: .01ms; }
    .rating-panel, .mobile-panel-content, .mobile-side-tab,
    .mobile-panel-close, .mobile-period-option { transition-duration: .01ms !important; transition-delay: 0s !important; }
    .fire-overview-pane, .fire-boundary-pane { transition-duration: .01ms !important; }
}