/* style.css - Мясной цех: мрачный индустриальный хоррор и контрастный Волшебный сад */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Golos+Text:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&family=PT+Mono&family=Playfair+Display:ital,wght@0,600;1,400&display=swap');

:root {
    --bg-dark: #090b0c;
    --industrial-green: #1a2721;
    --rust-accent: #8b3a2b;
    --cold-light: #9dc5bb;
    --toxic-lime: #4ade80;
    --paper-yellow: #f4ecd8;
    --font-mono: 'PT Mono', Consolas, monospace;
    --font-elite: 'Oswald', Impact, sans-serif;
    --font-garden: 'Playfair Display', serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-display: 'Oswald', Impact, sans-serif;
    --font-sans: 'Golos Text', system-ui, -apple-system, sans-serif;

    /* Аутентичные токены Волшебного Сада */
    --garden-powder-pink: #E8B8B8;
    --garden-soft-peach: #F2B49F;
    --garden-rose-coral: #D9878C;
    --garden-light-blush: #F6D5D0;
    --garden-muted-sage: #8D9B78;
    --garden-plum-base: #24171C;
    --garden-antique-gold: #D7AE70;
    --garden-warm-cream: #F4E6D4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-dark);
    font-family: var(--font-mono);
    color: #c5d1cb;
}

/* Фонарик за курсором и эффект зернистости пленки */
#game-viewport {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    padding: 24px;
    background: #000;
    color: #fff;
    text-align: center;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
}

.loading-paw-run {
    position: relative;
    width: min(520px, 82vw);
    height: 180px;
    transform: rotate(-7deg);
}

.paw-print {
    --paw-rotation: 62deg;
    position: absolute;
    width: 52px;
    height: 58px;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.24));
    animation: pawStep 1.8s ease-in-out infinite;
}

.paw-print-1 { left: 2%; top: 74%; animation-delay: -.9s; }
.paw-print-2 { left: 18%; top: 40%; animation-delay: -.7s; }
.paw-print-3 { left: 34%; top: 64%; animation-delay: -.5s; }
.paw-print-4 { left: 50%; top: 25%; animation-delay: -.3s; }
.paw-print-5 { left: 67%; top: 48%; animation-delay: -.1s; }
.paw-print-6 { left: 84%; top: 8%; animation-delay: .1s; }

.paw-print i,
.paw-print b {
    position: absolute;
    display: block;
    background: #fff;
}

.paw-print i { width: 12px; height: 17px; border-radius: 60% 60% 48% 48%; }
.paw-print i:nth-child(1) { left: 2px; top: 15px; transform: rotate(-25deg); }
.paw-print i:nth-child(2) { left: 13px; top: 2px; transform: rotate(-10deg); }
.paw-print i:nth-child(3) { right: 13px; top: 2px; transform: rotate(10deg); }
.paw-print i:nth-child(4) { right: 2px; top: 15px; transform: rotate(25deg); }
.paw-print b { left: 12px; top: 27px; width: 29px; height: 27px; border-radius: 48% 48% 58% 58%; transform: rotate(45deg); }

.loading-progress-text {
    color: #ddd;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: .17em;
    text-transform: uppercase;
}

@keyframes pawStep {
    0%, 18% { opacity: 0; transform: translateY(12px) scale(.5) rotate(var(--paw-rotation, 0deg)); }
    32%, 68% { opacity: 1; transform: translateY(0) scale(.72) rotate(var(--paw-rotation, 0deg)); }
    84%, 100% { opacity: 0; transform: translateY(-8px) scale(.63) rotate(var(--paw-rotation, 0deg)); }
}

/* Зернистость пленки - ослабленный навязчивый узор */
.film-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(0,0,0,0) 65%, rgba(0,0,0,0.65) 100%);
    z-index: 20;
}

.film-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035; /* Ослабленный рисунок точки для читаемости */
    background-image: repeating-radial-gradient(circle at 17% 32%, #fff, #000 2px, transparent 4px);
    pointer-events: none;
}

.flashlight-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 35%, rgba(5, 7, 7, 0.80) 85%);
    transition: background 0.04s ease-out;
}

/* РЕДКАЯ МИГАЮЩАЯ СУДОВАЯ ЛАМПА */
#lamp-flicker-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 12;
    --lamp-x: 16.5%;
    --lamp-y: 13%;
    --lamp-color: 255, 196, 92;
    --lamp-x-2: 78%;
    --lamp-y-2: 18%;
    background:
        radial-gradient(circle 290px at var(--lamp-x) var(--lamp-y), rgba(var(--lamp-color), 0.32) 0%, rgba(var(--lamp-color), 0.09) 48%, transparent 78%),
        radial-gradient(circle 220px at var(--lamp-x-2) var(--lamp-y-2), rgba(var(--lamp-color), 0.17) 0%, rgba(var(--lamp-color), 0.045) 46%, transparent 76%);
    opacity: 0.62;
    transition: opacity 0.4s ease;
}

body[data-room="archive"] #lamp-flicker-overlay { --lamp-x: 39%; --lamp-y: 16%; --lamp-color: 255, 222, 153; }
body[data-room="weighing"] #lamp-flicker-overlay { --lamp-x: 50%; --lamp-y: 15%; --lamp-color: 255, 210, 122; }
body[data-room="deadend7"] #lamp-flicker-overlay { --lamp-x: 51%; --lamp-y: 14%; --lamp-color: 210, 54, 38; }
body[data-room="breakroom"] #lamp-flicker-overlay { --lamp-x: 48%; --lamp-y: 19%; --lamp-color: 255, 206, 120; }
body[data-room="cutting"] #lamp-flicker-overlay { --lamp-x: 20%; --lamp-y: 16%; --lamp-color: 199, 48, 34; }
body[data-room="boiler"] #lamp-flicker-overlay { --lamp-x: 52%; --lamp-y: 11%; --lamp-color: 255, 212, 132; }
body[data-room="laboratory"] #lamp-flicker-overlay { --lamp-x: 32%; --lamp-y: 22%; --lamp-x-2: 76%; --lamp-y-2: 23%; --lamp-color: 255, 197, 111; }
body[data-room="demonroom"] #lamp-flicker-overlay { --lamp-x: 42%; --lamp-y: 27%; --lamp-x-2: 69%; --lamp-y-2: 31%; --lamp-color: 171, 26, 20; }

#lamp-flicker-overlay.flickering {
    opacity: 0.95;
    filter: brightness(1.6);
}

/* РЕЖИМ БЕЗ ВСПЫШЕК И МЕРЦАНИЯ (NO FLASHES MODE) */
body.no-flashes-mode #lamp-flicker-overlay {
    animation: none !important;
    opacity: 0.35 !important;
    filter: none !important;
    transition: opacity 0.8s ease !important;
}

body.no-flashes-mode #lamp-flicker-overlay.flickering {
    opacity: 0.55 !important;
    filter: none !important;
}

body.no-flashes-mode .flashlight-vignette {
    background: radial-gradient(circle 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), transparent 45%, rgba(5, 7, 7, 0.75) 90%);
}

/* Сцена локации с фиксированным адаптивным холстом 16:9 */
#room-view {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #050707;
}

#room-stage {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: calc(100vh * (16 / 9));
    max-height: calc(100vw * (9 / 16));
    aspect-ratio: 16 / 9;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9);
}

#current-room-bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: brightness(0.9) contrast(1.1) saturate(0.95);
    transition: opacity 0.5s ease-in-out;
}

#archive-map-board {
    position: absolute;
    left: 19.78%;
    top: 13.81%;
    width: 25.79%;
    height: 46.12%;
    object-fit: fill;
    z-index: 5;
    pointer-events: none;
    transform: perspective(900px) rotateY(-1deg) rotateZ(0.12deg);
    transform-origin: 50% 50%;
    filter: brightness(0.76) contrast(1.1) saturate(0.82) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.78));
    clip-path: polygon(7% 9.5%, 93.5% 9.5%, 93.5% 85.3%, 7% 85.3%);
}

#mobile-pan-hint {
    display: none;
}

.inventory-map-slot {
    cursor: pointer;
}

.inventory-map-slot:focus-visible {
    outline: 2px solid #d5b879;
    outline-offset: 2px;
}

.blueprint-source {
    margin: 8px 0 0;
    color: #4d554d;
    font-size: 0.84rem;
}

/* Анимированные персонажи новых локаций живут отдельным слоем над фоном. */
#room-characters-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    overflow: hidden;
    perspective: 900px;
}

.room-sprite {
    position: absolute;
    background-repeat: no-repeat;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.lab-fairy-anchor {
    /* Центр именно зелёной колбы на новом фоне, а не геометрический центр кадра. */
    left: 57.5%;
    top: 20.5%;
    width: 16%;
    aspect-ratio: 500 / 787;
    transform: translateX(-50%);
    filter: none;
}

.lab-fairy-hologram {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 14px rgba(187, 255, 211, 0.72));
    opacity: 0.82;
    mix-blend-mode: screen;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: visible;
    position: relative;
    z-index: 2;
    animation: fairyDepthFloat 5s ease-in-out infinite alternate;
}

.fairy-particle {
    --particle-x: 0px;
    --particle-y: -90px;
    --particle-drift: 4px;
    position: absolute;
    left: 50%;
    top: 72%;
    z-index: 1;
    width: clamp(2px, 0.28vw, 5px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(218, 255, 226, 0.94);
    box-shadow: 0 0 5px rgba(203, 255, 218, 0.95), 0 0 12px rgba(116, 255, 174, 0.68);
    opacity: 0;
    animation: fairyParticleRise 3.8s ease-out infinite;
}

.fairy-particle:nth-of-type(1)  { --particle-x: -34px; --particle-y: -118px; animation-delay: -0.2s; }
.fairy-particle:nth-of-type(2)  { --particle-x:  28px; --particle-y: -104px; animation-delay: -1.7s; }
.fairy-particle:nth-of-type(3)  { --particle-x: -18px; --particle-y: -142px; animation-delay: -2.8s; }
.fairy-particle:nth-of-type(4)  { --particle-x:  40px; --particle-y: -128px; animation-delay: -0.9s; }
.fairy-particle:nth-of-type(5)  { --particle-x: -42px; --particle-y:  -88px; animation-delay: -2.1s; }
.fairy-particle:nth-of-type(6)  { --particle-x:  16px; --particle-y: -156px; animation-delay: -3.3s; }
.fairy-particle:nth-of-type(7)  { --particle-x:  -7px; --particle-y: -112px; animation-delay: -1.2s; }
.fairy-particle:nth-of-type(8)  { --particle-x:  48px; --particle-y:  -92px; animation-delay: -2.5s; }
.fairy-particle:nth-of-type(9)  { --particle-x: -29px; --particle-y: -164px; animation-delay: -3.6s; }
.fairy-particle:nth-of-type(10) { --particle-x:  34px; --particle-y: -146px; animation-delay: -0.5s; }
.fairy-particle:nth-of-type(11) { --particle-x: -48px; --particle-y: -132px; animation-delay: -1.9s; }
.fairy-particle:nth-of-type(12) { --particle-x:   8px; --particle-y:  -98px; animation-delay: -3s; }

@keyframes fairyParticleRise {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.35); }
    18% { opacity: 0.88; }
    68% { opacity: 0.58; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), var(--particle-y)) scale(1.15); }
}

/* Красный свет остаётся только в глазах демонов и мягко «дышит». */
.demon-eye-pair {
    --eye-gap: 0.42vw;
    --eye-size: clamp(3px, 0.3vw, 5px);
    position: absolute;
    width: 1.3%;
    height: 0.8%;
    mix-blend-mode: screen;
    animation: demonEyePulse 2.8s ease-in-out infinite alternate;
}

.demon-eye-pair::before,
.demon-eye-pair::after {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--eye-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ff2c20;
    box-shadow:
        0 0 2px #fff5ef,
        0 0 7px #ff2418,
        0 0 16px rgba(255, 18, 8, 0.98),
        0 0 28px rgba(255, 0, 0, 0.92),
        0 0 46px rgba(180, 0, 0, 0.72);
    transform: translateY(-50%);
}

.demon-eye-pair::before { left: calc(50% - var(--eye-gap)); }
.demon-eye-pair::after { left: calc(50% + var(--eye-gap)); }
.demon-eyes-1 { left: 42.9%; top: 38%; animation-delay: -0.4s; }
.demon-eyes-2 { --eye-gap: 0.32vw; --eye-size: clamp(5px, 0.46vw, 8px); left: 54.8%; top: 24.8%; animation-delay: -1.8s; }
.demon-eyes-3 { left: 60.6%; top: 19%; animation-delay: -0.9s; }
.demon-eyes-4 { left: 70.5%; top: 37%; animation-delay: -2.1s; }
.demon-eyes-5 { left: 55.3%; top: 47%; animation-delay: -1.25s; }
.demon-eyes-6 { left: 39.5%; top: 60.5%; animation-delay: -2.55s; }

@keyframes demonEyePulse {
    0%, 18% { opacity: 0.52; filter: brightness(0.9); transform: scale(0.88); }
    68%, 100% { opacity: 1; filter: brightness(1.55); transform: scale(1.12); }
}

.lab-daisy {
    width: 12%;
    aspect-ratio: 271.5 / 724;
    bottom: 8%;
    background-size: 800% 100%;
    background-position: 0% 0%;
    animation: daisyLabTurn 4.8s steps(7, end) infinite;
}

.lab-daisy-gesturing {
    /* Ближняя ромашка с планшетом — слева перед голограммой. */
    left: 40.5%;
    bottom: 21%;
    width: 9.5%;
    z-index: 5;
    background-image: url('../images/characters/lab/daisy-researcher-clipboard.webp');
    background-position: 28.571% 0%;
    animation: leftDaisyObserve 5.4s step-end infinite;
}

.lab-daisy-standing {
    /* Дальняя ромашка в противогазе разводит руками у голограммы. */
    left: 32%;
    right: auto;
    bottom: 21%;
    width: 17%;
    z-index: 3;
    aspect-ratio: 409.6 / 512;
    background-image: url('../images/characters/lab/daisy-researcher-confused.webp');
    background-size: 500% 200%;
    background-position: 50% 100%;
    animation: confusedDaisyObserve 6.2s step-end infinite;
    animation-delay: -1.6s;
}

.lab-daisy-seated {
    left: auto;
    right: 16.5%;
    bottom: 6%;
    width: 11%;
    aspect-ratio: 222 / 724;
    background-image: url('../images/characters/lab/daisy-researcher-seated-controls.webp');
    background-position: 28.571% 0%;
    animation: seatedDaisyGlance 6.8s step-end infinite;
    animation-delay: -2.1s;
}

@keyframes daisyLabTurn {
    from { background-position: 0% 0%; }
    to { background-position: 100% 0%; }
}

/* Сидящая лаборантка не вращается: работает за столом и лишь иногда оглядывается. */
@keyframes seatedDaisyGlance {
    0%, 24% { background-position: 28.571% 0%; }
    25%, 39% { background-position: 14.286% 0%; }
    40%, 59% { background-position: 28.571% 0%; }
    60%, 72% { background-position: 0% 0%; }
    73%, 100% { background-position: 28.571% 0%; }
}

@keyframes leftDaisyObserve {
    0%, 24% { background-position: 28.571% 0%; }
    25%, 43% { background-position: 14.286% 0%; }
    44%, 57% { background-position: 0% 0%; }
    58%, 79% { background-position: 14.286% 0%; }
    80%, 100% { background-position: 28.571% 0%; }
}

@keyframes rightDaisyObserve {
    0%, 48% { background-position: 85.714% 0%; }
    49%, 65% { background-position: 100% 0%; }
    66%, 100% { background-position: 85.714% 0%; }
}

@keyframes confusedDaisyObserve {
    0%, 27% { background-position: 25% 100%; }
    28%, 48% { background-position: 50% 100%; }
    49%, 67% { background-position: 25% 100%; }
    68%, 84% { background-position: 50% 100%; }
    85%, 100% { background-position: 25% 100%; }
}

@keyframes fairyDepthFloat {
    from { opacity: 0.8; transform: translateY(2px) rotateY(-3deg) scale(0.99); }
    to { opacity: 0.88; transform: translateY(-2px) rotateY(3deg) scale(1.01); }
}

@media (prefers-reduced-motion: reduce) {
    .room-sprite { animation: none !important; }
    .lab-fairy-hologram,
    .demon-eye-pair,
    .fairy-particle { animation: none !important; }
}

/* Оверлей зелёного индикатора кодового замка */
.keypad-overlay {
    position: absolute;
    left: 91.55%;
    top: 51.25%;
    width: 2.4%;
    height: 1.3%;
    border-radius: 50%;
    background: #d4382c;
    border: 1px solid rgba(255, 201, 182, 0.8);
    pointer-events: none;
    z-index: 8;
    box-shadow: 0 0 3px #fff1e9, 0 0 9px rgba(224, 49, 38, 0.95);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.keypad-overlay.unlocked {
    background: #49e585;
    border-color: rgba(213, 255, 226, 0.95);
    box-shadow: 0 0 3px #ecfff2, 0 0 11px rgba(73, 229, 133, 1);
}

/* Интерактивные точки (Hotspots) с различимым контуром и фокусом клавиатуры */
#hotspots-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.hotspot-marker {
    --spot-rgb: 189, 212, 190;
    position: absolute;
    cursor: pointer;
    border: 0;
    background: transparent;
    outline: none;
}

.hotspot-marker[data-hotspot-type="door"] { --spot-rgb: 98, 208, 196; }
.hotspot-marker[data-hotspot-type="document"] { --spot-rgb: 240, 190, 99; }
.hotspot-marker[data-hotspot-type="control"] { --spot-rgb: 231, 101, 72; }

.hotspot-marker::after {
    content: "";
    position: absolute;
    left: var(--marker-x, 50%);
    top: var(--marker-y, 50%);
    width: clamp(11px, 1.15vw, 19px);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--spot-rgb), 0.28);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.78);
    box-shadow: 0 0 7px rgba(var(--spot-rgb), 0.18);
    filter: blur(0.7px);
    opacity: 0.3;
    animation: hotspotIdleBreath 3.8s ease-in-out infinite;
    transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, opacity 0.22s ease;
}

.hotspot-marker:hover,
.hotspot-marker:focus-visible {
    background: transparent;
    filter: none;
}

.hotspot-marker:hover::after,
.hotspot-marker:focus-visible::after,
.hotspot-marker.look-around-active::after {
    border-color: rgba(var(--spot-rgb), 0.92);
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 8px rgba(var(--spot-rgb), 0.92), 0 0 17px rgba(var(--spot-rgb), 0.46), inset 0 0 5px rgba(var(--spot-rgb), 0.35);
    filter: blur(0);
    opacity: 1;
    animation: none;
}

.hotspot-marker.hotspot-used::after {
    border-color: rgba(126, 197, 157, 0.46);
    box-shadow: 0 0 8px rgba(126, 197, 157, 0.22);
    opacity: 0.38;
}

.hotspot-marker.hotspot-activated::after {
    animation: hotspotActivated 0.7s ease-out both;
}

@keyframes hotspotIdleBreath {
    0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.72); }
    50% { opacity: 0.42; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes hotspotActivated {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.75); box-shadow: 0 0 7px rgba(126, 238, 177, 0.7); }
    55% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 18px rgba(126, 238, 177, 0.95); }
    100% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.9); box-shadow: 0 0 8px rgba(126, 197, 157, 0.22); }
}

/* Эффект временной мягкой подсветки объектов при клике «Осмотреться» */
.hotspot-marker.look-around-active {
    background: transparent !important;
    filter: none;
}

.hotspot-marker.look-around-active::after {
    animation: lookAroundMarkerPulse 1.5s ease-in-out infinite alternate;
}

@keyframes lookAroundMarkerPulse {
    0% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.82); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* ПЛАВАЮЩАЯ ПОДСКАЗКА СТРОГО У КУРСОРА МЫШИ */
#cursor-floating-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    background: rgba(8, 12, 10, 0.95);
    border: 1px solid #3c5247;
    color: #e2fce9;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 10px rgba(74, 222, 128, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0);
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

#cursor-floating-tooltip.active {
    opacity: 1;
    visibility: visible;
}

/* Верхняя панель инвентаря и кнопки управления */
#ui-header {
    position: absolute;
    top: 16px;
    right: 20px;
    left: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 150;
    pointer-events: none;
}

.header-right-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    max-width: 100%;
}

/* СТАРТОВЫЕ ЭКРАНЫ: Предупреждение и Титульный экран */
.start-screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #060807;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 1;
    transition: opacity 0.6s ease;
}

.start-screen-overlay.hidden {
    display: none !important;
}

.warning-box {
    max-width: 680px;
    width: 100%;
    background: #0d1210;
    border: 2px solid #8b3a2b;
    border-radius: 8px;
    padding: 36px 40px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.95), 0 0 30px rgba(139, 58, 43, 0.25);
    color: #d1dad5;
    text-align: left;
}

.warning-title {
    font-family: var(--font-elite);
    font-size: 1.6rem;
    color: #e56b55;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(229, 107, 85, 0.3);
    padding-bottom: 10px;
}

.warning-text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: #aebcb5;
    margin-bottom: 30px;
}

.warning-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.warning-btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    outline: none;
    border: none;
}

.primary-warning-btn {
    background: #1a2721;
    border: 1px solid #4ade80;
    color: #4ade80;
}

.primary-warning-btn:hover,
.primary-warning-btn:focus-visible {
    background: #4ade80;
    color: #060807;
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.5);
}

.secondary-warning-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #5c6e65;
    color: #c5d1cb;
}

.secondary-warning-btn:hover,
.secondary-warning-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: #aebcb5;
}

.link-warning-btn {
    background: transparent;
    border: 1px dashed #d9878c;
    color: #f6d5d0;
}

.link-warning-btn:hover,
.link-warning-btn:focus-visible {
    background: rgba(217, 135, 140, 0.15);
    color: #ffffff;
}

/* ТИТУЛЬНЫЙ ЭКРАН */
#title-screen {
    align-items: stretch;
    justify-content: flex-start;
    background: #030303;
}

.title-bg-door {
    position: absolute;
    inset: 0;
    background: url('../images/ui/menu-manul-bg.png') center/cover no-repeat;
    opacity: 1;
    filter: saturate(.82) contrast(1.06) brightness(.76);
    pointer-events: none;
}

.title-bg-door::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,8,7,.94) 0%, rgba(2,8,7,.78) 29%, rgba(2,8,7,.08) 51%, transparent 70%),
        linear-gradient(0deg, rgba(0,0,0,.48), transparent 34%, rgba(0,0,0,.12));
}

.title-box {
    position: relative;
    z-index: 10;
    width: min(510px, 39vw);
    min-height: 100%;
    margin: 0;
    padding: clamp(40px, 8vh, 88px) 0 34px clamp(38px, 5.5vw, 94px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: left;
}

.title-logo {
    display: block;
    width: min(100%, 470px);
    max-height: 32vh;
    object-fit: contain;
    object-position: left center;
    mix-blend-mode: screen;
    filter: contrast(1.18) drop-shadow(0 7px 22px #000);
    margin: 0 0 8px;
}

.title-main {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6.4rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #f4ecd8;
    text-shadow: 0 4px 25px #000, 0 0 24px rgba(126, 0, 0, .6);
    margin-bottom: 2px;
}

.title-subtitle {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    color: #ddd4ca;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 8px 18px;
}

.title-tagline {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-style: italic;
    color: #b7a59d;
    color: #aaa39b;
    margin: 0 0 24px 18px;
}

.main-menu {
    width: min(390px, calc(100% - 18px));
    margin-left: 18px;
    display: grid;
    gap: 7px;
}

.title-menu-btn {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 13px 20px 13px 44px;
    border: 1px solid rgba(80, 122, 109, .55);
    border-left: 2px solid rgba(80, 122, 109, .8);
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(2, 17, 15, .94), rgba(1, 9, 8, .72));
    color: #eee4dc;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 0 18px rgba(90, 0, 0, .2), 0 5px 18px rgba(0,0,0,.45);
    transition: all 0.25s ease;
}

.title-menu-btn::before { content: ""; position: absolute; left: 20px; top: 50%; width: 7px; height: 7px; border: 2px solid #477c6c; border-radius: 50%; transform: translateY(-50%); }
.title-menu-btn::after { content: "›"; position: absolute; right: 18px; top: 50%; color: transparent; font-size: 1.8rem; transform: translateY(-53%); }
.title-menu-btn:hover,
.title-menu-btn:focus-visible {
    transform: translateX(5px);
    background: linear-gradient(90deg, rgba(83, 8, 7, .96), rgba(22, 5, 5, .88));
    border-color: #e14b40;
    color: #fff;
    outline: 1px solid rgba(255,255,255,.85);
    outline-offset: 2px;
}

.title-menu-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.title-menu-btn-primary { border-color: #e14b40; box-shadow: inset 0 0 22px rgba(126, 12, 10, .32), 0 0 16px rgba(126, 12, 10, .25); }
.title-menu-btn-primary::before { background: #ff4e42; border-color: #ff6d62; box-shadow: 0 0 9px #ff3c31; }
.title-menu-btn-primary::after { color: #ff5c50; }
.title-menu-link { display: block; }

.title-version {
    position: absolute;
    left: clamp(38px, 5.5vw, 94px);
    bottom: 24px;
    color: #75827e;
    font: .68rem var(--font-mono);
}

.save-slots-panel {
    width: min(92vw, 760px);
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(137, 26, 22, .68);
    border-radius: 8px;
    background: rgba(10, 3, 3, .94);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.9), inset 0 0 32px rgba(132, 13, 10, .12);
    backdrop-filter: blur(10px);
}

.save-slots-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.save-slots-heading-row h2 {
    margin: 0;
    color: #dcebe3;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.16em;
}

.save-slots-back,
.save-slot-delete {
    border: 1px solid #5b6f65;
    border-radius: 4px;
    background: rgba(15, 24, 20, 0.92);
    color: #b8c8c0;
    cursor: pointer;
}

.save-slots-back {
    padding: 7px 12px;
    font-family: var(--font-sans);
}

.save-slots-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.save-slot {
    position: relative;
    min-width: 0;
}

.save-slot-main {
    width: 100%;
    min-height: 142px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    border: 1px solid #40564b;
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(21, 34, 28, 0.96), rgba(8, 14, 11, 0.98));
    color: #dcebe3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.save-slot-main:hover,
.save-slot-main:focus-visible {
    border-color: #4ade80;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
    transform: translateY(-2px);
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.save-slot-number {
    color: #7f9a8c;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.save-slot-main strong {
    color: #f1ead7;
    font-family: var(--font-sans);
    font-size: 0.98rem;
    line-height: 1.25;
}

.save-slot-main small {
    color: #9eb2a8;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.35;
}

.save-slot-empty .save-slot-main {
    border-style: dashed;
}

.save-slot-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    font-size: 1.15rem;
    line-height: 1;
}

.save-slot-delete:hover,
.save-slot-delete:focus-visible {
    border-color: #ff7474;
    color: #ff9a92;
    outline: 2px solid #ff7474;
}

.save-slots-hint {
    margin: 14px 0 0;
    color: #71877c;
    font-family: var(--font-sans);
    font-size: 0.72rem;
}

@media (max-width: 680px) {
    .title-box {
        width: 100%;
        padding: 36vh 18px 28px;
        justify-content: flex-end;
        background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,.06) 82%);
    }

    .title-logo { width: min(74vw, 360px); max-height: 24vh; }
    .title-subtitle { font-size: .72rem; margin-left: 0; }
    .title-tagline { font-size: 1rem; margin: 0 0 14px; }
    .main-menu { width: 100%; max-width: 360px; margin-left: 0; }
    .title-version { display: none; }

    .save-slots-panel {
        max-height: 68dvh;
        overflow-y: auto;
        padding: 14px;
    }

    .save-slots-list {
        grid-template-columns: 1fr;
    }

    .save-slot-main {
        min-height: 104px;
    }
}

/* Единый стиль утилитарных кнопок в шапке */
.header-util-btn {
    pointer-events: auto;
    background: rgba(10, 14, 12, 0.88);
    border: 1px solid #3c5247;
    color: #c5d1cb;
    padding: 7px 14px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-util-btn:hover,
.header-util-btn:focus-visible {
    background: #1a2721;
    border-color: #4ade80;
    color: #4ade80;
}

/* МОДАЛЬНЫЕ ОКНА И ЖУРНАЛ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 6, 0.90);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-window {
    position: relative;
    max-width: 740px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    background: #F2EAD7;
    color: #252923;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    padding: 32px 36px;
}

.modal-close-icon {
    position: sticky;
    top: 0;
    float: right;
    font-size: 2rem;
    background: #F2EAD7;
    border: 1px solid #873E32;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #873E32;
    line-height: 1;
    z-index: 10;
}

.modal-close-icon:hover,
.modal-close-icon:focus-visible {
    color: #ffffff;
    background: #873E32;
    border-color: #873E32;
    outline: 2px solid #873E32;
}

#room-footer-bar {
    position: absolute;
    bottom: 24px;
    left: 25px;
    right: 25px;
    z-index: 30;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.game-version-credits {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: #7b8e84;
    background: rgba(10, 14, 12, 0.75);
    border: 1px solid rgba(60, 82, 71, 0.5);
    padding: 4px 10px;
    border-radius: 4px;
}

.about-link-btn {
    background: transparent;
    border: none;
    color: #9dc5bb;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.about-link-btn:hover,
.about-link-btn:focus-visible {
    color: #4ade80;
}

.about-modal-box {
    color: #252923;
}

.about-modal-box h2 {
    margin: 0;
    color: #873e32;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 4vw, 1.9rem);
}

.about-version {
    margin: 3px 0 16px;
    color: #62685f;
    font-style: italic;
}

.about-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(88, 74, 60, 0.22);
    scrollbar-width: thin;
}

.about-tab {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(101, 87, 70, 0.32);
    border-radius: 5px 5px 0 0;
    background: rgba(92, 80, 66, 0.06);
    color: #4b5048;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.about-tab.active {
    border-color: #873e32;
    background: #873e32;
    color: #fff7e8;
}

.about-panels {
    min-height: 245px;
    padding: 18px 2px 8px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.about-panel[hidden] {
    display: none;
}

.about-panel p + p {
    margin-top: 10px;
}

.about-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.about-tech-grid article {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-left: 3px solid #873e32;
    background: rgba(76, 69, 57, 0.055);
}

.about-tech-grid span {
    color: #555b53;
    font-size: 0.78rem;
}

.about-build-note {
    margin-top: 12px;
    color: #555b53;
    font-size: 0.8rem;
}

.about-control-list {
    display: grid;
    gap: 11px;
    padding-left: 20px;
}

.about-closing {
    color: #62685f;
    font-style: italic;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 560px) {
    .about-tech-grid { grid-template-columns: 1fr; }
    .about-panels { min-height: 300px; }
}

/* Карточка информации о текущей локации:
   расположена внизу слева, никогда не перекрывает лампу и верхние объекты */
.room-info-box {
    background: rgba(10, 14, 12, 0.92);
    border-left: 3px solid var(--rust-accent);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 10px 18px;
    max-width: 440px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.85), 0 0 15px rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

#room-title-text {
    font-family: var(--font-elite);
    font-size: 1.15rem;
    color: #e5ece8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

#room-description-text {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: #8fa399;
    line-height: 1.35;
}

.inventory-panel {
    pointer-events: auto;
    background: rgba(10, 14, 12, 0.88);
    border: 1px solid #2d3d34;
    padding: 8px 14px;
    border-radius: 4px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.inv-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6a8276;
}

#inventory-items {
    display: flex;
    gap: 8px;
}

.inventory-slot {
    position: relative;
    width: 38px;
    height: 38px;
    background: #141c18;
    border: 1px solid #3c5247;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    cursor: help;
}

.inventory-slot:hover .inv-tooltip {
    opacity: 1;
    visibility: visible;
}

.inv-tooltip {
    position: absolute;
    bottom: -30px;
    right: 0;
    background: #000;
    border: 1px solid #555;
    color: #fff;
    font-size: 0.7rem;
    padding: 3px 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 50;
}

/* =======================================================
   ИНТРО-СЦЕНА С МАНУЛОМ: CANVAS РЕНДЕР
   ======================================================= */
#manul-intro-container {
    position: absolute;
    inset: 0;
    background: #000;
    z-index: 100;
    overflow: hidden;
    transition: opacity 0.9s ease-out;
}

#manul-intro-container.fade-out {
    opacity: 0;
}

#manul-intro-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* ДИАЛОГ С МАНУЛОМ */
#manul-dialogue {
    position: absolute;
    bottom: 6.5%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(12, 16, 14, 0.96);
    border: 2px solid #6e271e;
    padding: 20px 32px;
    border-radius: 6px;
    text-align: center;
    max-width: 650px;
    width: 90%;
    z-index: 115;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9), 0 0 20px rgba(220, 38, 38, 0.25);
    opacity: 0;
    transition: opacity 0.8s ease;
}

#manul-dialogue.visible {
    opacity: 1;
}

#manul-dialogue.fade-out {
    opacity: 0;
}

.dialogue-speaker {
    font-family: var(--font-elite);
    color: #e56b55;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

#dialogue-content {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.4;
    font-weight: bold;
    min-height: 40px;
}

#dialogue-subcontent {
    font-size: 0.92rem;
    color: #999;
    font-style: italic;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#dialogue-subcontent.subtext-visible {
    opacity: 1;
}

.skip-btn {
    position: absolute;
    top: 24px;
    left: 24px;
    background: rgba(10, 14, 12, 0.92);
    border: 1px solid #3c5247;
    color: #d1dad5;
    padding: 8px 16px;
    font-family: var(--font-sans);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.skip-btn:hover,
.skip-btn:focus-visible {
    border-color: #4ade80;
    color: #ffffff;
    background: #141c18;
    box-shadow: 0 0 14px rgba(74, 222, 128, 0.35);
    transform: translateY(-1px);
}

/* МОДАЛЬНЫЕ ОКНА И КАЗЕННЫЕ ДОКУМЕНТЫ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 6, 0.88);
    backdrop-filter: blur(5px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-window {
    position: relative;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--paper-yellow);
    color: #1a1a1a;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.95);
    padding: 30px;
}

.modal-close-icon {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    line-height: 1;
}

.modal-close-icon:hover {
    color: #000;
}

/* План подвала строится из того же графа помещений, что и навигация игры. */
.blueprint-heading {
    margin: 0;
    padding-right: 34px;
    color: #873e32;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.035em;
}

.blueprint-location-mark,
.blueprint-note,
.blueprint-legend {
    font-family: var(--font-sans);
}

.blueprint-location-mark {
    margin-top: 6px;
    color: #4d554d;
    font-size: 0.82rem;
}

.blueprint-diagram {
    margin: 15px 0 10px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(115, 255, 238, 0.42);
    border-radius: 8px;
    background:
        radial-gradient(circle at 48% 38%, rgba(0, 255, 196, 0.07), transparent 45%),
        linear-gradient(145deg, #041d18, #01120f 70%);
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.62), 0 0 18px rgba(63, 255, 224, 0.1);
}

.blueprint-svg {
    display: block;
    width: 100%;
    height: auto;
}

.map-boundary {
    fill: none;
    stroke: #8dfff2;
    stroke-width: 2;
    stroke-dasharray: 10 8;
    filter: drop-shadow(0 0 4px rgba(93, 255, 236, 0.55));
}

.map-connection-bases path {
    fill: none;
    stroke: rgba(4, 46, 40, 0.96);
    stroke-width: 22;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-connections > path,
.map-exit-route {
    fill: none;
    stroke: #9bfff3;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px #d8fffb) drop-shadow(0 0 8px rgba(85, 255, 232, 0.82));
}

.map-link-unexplored {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.map-room-unexplored,
.map-stair-locked.map-room-unexplored {
    opacity: 0.24;
    cursor: help;
}

.map-room-unexplored:hover,
.map-stair-locked.map-room-unexplored:hover {
    opacity: 0.42;
}

.map-room-unexplored text,
.map-stair-locked.map-room-unexplored text {
    fill: rgba(171, 224, 210, 0.78) !important;
}

.map-door-nodes {
    display: none;
}

.map-door-nodes rect {
    fill: #d4fff9;
    stroke: #69fbe8;
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(85, 255, 232, 0.95));
}

.map-room rect,
.map-room circle {
    fill: rgba(26, 132, 111, 0.07);
    stroke: #9bfff3;
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(77, 255, 230, 0.55));
}

.map-room text,
.map-exit-label {
    fill: #cafff8;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-anchor: middle;
    dominant-baseline: middle;
}

.map-room-danger rect,
.map-room-danger circle {
    fill: rgba(255, 76, 76, 0.12);
    stroke: #ff6868;
    filter: drop-shadow(0 0 7px rgba(255, 75, 75, 0.78));
}

.map-room-danger text {
    fill: #ffb0a9;
}

.map-room-secret rect,
.map-room-secret circle {
    fill: rgba(255, 233, 107, 0.07);
    stroke: #fff07d;
    filter: drop-shadow(0 0 6px rgba(255, 229, 92, 0.62));
}

.map-room-secret text {
    fill: #fff4a8;
}

.map-short-corridor rect {
    fill: rgba(255, 233, 107, 0.12);
    stroke-width: 3;
}

.map-room-secret .map-room-inner-wall {
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.7;
}

.map-room-cold rect {
    fill: rgba(72, 187, 255, 0.08);
    stroke: #82ddff;
    filter: drop-shadow(0 0 6px rgba(80, 198, 255, 0.58));
}

.map-room-cold text {
    fill: #bcecff;
}

.map-room-active rect,
.map-room-active circle {
    fill: rgba(74, 222, 128, 0.27);
    stroke: #68f39b;
    stroke-width: 4;
    filter: drop-shadow(0 0 10px rgba(74, 255, 135, 0.95));
}

.map-room-active text {
    fill: #f0fff5;
}

.map-room-active .map-room-inner-wall {
    fill: none;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.8;
}

.map-room-locked circle {
    fill: rgba(255, 68, 68, 0.09);
    stroke: #ff7474;
    filter: drop-shadow(0 0 7px rgba(255, 77, 77, 0.68));
}

.map-room-locked .map-room-inner-wall {
    fill: none;
    stroke: #ff9a92;
}

.map-room-locked text,
.map-room-locked .map-locked-label {
    fill: #ffd0ca;
}

.map-room-locked .map-locked-label {
    font-size: 10px;
    letter-spacing: 0.08em;
}

.map-room-grille path {
    fill: none;
    stroke: #ff7474;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.72;
    filter: drop-shadow(0 0 3px rgba(255, 77, 77, 0.72));
}

.map-stair-locked > circle {
    fill: rgba(255, 82, 82, 0.08);
    stroke: #ff7474;
    stroke-width: 3;
    stroke-dasharray: 7 5;
    filter: drop-shadow(0 0 7px rgba(255, 77, 77, 0.7));
}

.map-stair-spiral {
    fill: none;
    stroke: rgba(155, 255, 243, 0.72);
    stroke-width: 5;
}

.map-stair-grille path {
    fill: none;
    stroke: #ff7474;
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(255, 77, 77, 0.82));
}

.map-stair-locked text {
    fill: #ffd0ca;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #071713;
    stroke-width: 3px;
}

.map-exit-route {
    stroke: #4ade80;
}

.map-exit-node {
    fill: #40f58c;
    stroke: #aaffca;
    stroke-width: 2;
    filter: drop-shadow(0 0 8px rgba(64, 245, 140, 0.9));
}

.map-exit-label {
    fill: #4ade80;
    font-size: 13px;
    text-anchor: start;
    filter: drop-shadow(0 0 4px rgba(64, 245, 140, 0.65));
}

.blueprint-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 8px 0 12px;
    color: #4d554d;
    font-size: 0.76rem;
}

.blueprint-legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.legend-swatch {
    width: 18px;
    height: 10px;
    border: 2px solid #9dc5bb;
    background: rgba(74, 222, 128, 0.08);
}

.legend-swatch.current {
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.32);
}

.legend-swatch.secret {
    border-color: #b99a6b;
    border-style: dashed;
}

.blueprint-note {
    margin: 0;
    color: #252923;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Стили советских бланков ООО «По документам ромашки» */
.bureaucratic-doc {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.5;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(18px, 3vw, 30px);
    color: #2b2923;
    border: 1px solid rgba(75, 58, 38, 0.38);
    box-shadow: inset 0 0 42px rgba(85, 58, 28, 0.16), 0 8px 20px rgba(0, 0, 0, 0.14);
    background:
        radial-gradient(circle at 14% 18%, rgba(111, 75, 39, 0.13) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 78%, rgba(111, 75, 39, 0.1) 0 42px, transparent 90px),
        repeating-linear-gradient(0deg, rgba(73, 58, 39, 0.025) 0 1px, transparent 1px 4px),
        #e7ddc4;
    text-shadow: 0.25px 0 rgba(30, 25, 18, 0.45);
}

.bureaucratic-doc::before {
    content: "ДЕЛО";
    position: absolute;
    z-index: -1;
    right: -13px;
    top: 28px;
    color: rgba(133, 38, 30, 0.1);
    border: 4px double rgba(133, 38, 30, 0.1);
    padding: 5px 12px;
    font: 700 1.25rem/1 var(--font-elite);
    letter-spacing: 0.18em;
    transform: rotate(11deg);
}

.bureaucratic-doc::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 5px;
    border: 1px dashed rgba(73, 58, 39, 0.18);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hotspot-marker::after,
    .hotspot-marker.hotspot-activated::after {
        animation: none;
    }
}

.doc-header {
    border-bottom: 2px solid #222;
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.doc-org {
    font-size: 0.72rem;
    color: #555;
    text-transform: uppercase;
    display: block;
}

.doc-title {
    font-family: var(--font-elite);
    font-size: 1.35rem;
    margin: 6px 0 2px;
    letter-spacing: 1px;
}

.doc-date {
    font-size: 0.8rem;
    color: #666;
}

.doc-table, .doc-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.85rem;
}

.doc-table th, .doc-table td {
    padding: 6px 8px;
    text-align: left;
}

.doc-table th {
    width: 25%;
    color: #444;
}

.doc-items-table th, .doc-items-table td {
    border: 1px solid #777;
    padding: 6px 8px;
    text-align: left;
}

.doc-items-table th {
    background: rgba(0,0,0,0.06);
    font-weight: bold;
}

.doc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    border-top: 1px dashed #777;
    padding-top: 15px;
}

.official-stamp {
    display: inline-block;
    border: 3px double #b91c1c;
    color: #b91c1c;
    padding: 8px 14px;
    font-family: var(--font-elite);
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
    transform: rotate(-7deg);
    border-radius: 6px;
    opacity: 0.9;
}

.manul-stamp {
    border-color: #1e3a8a;
    color: #1e3a8a;
    transform: rotate(5deg);
}

.nadzor-doc {
    background: #ede6d2;
    padding: 10px;
}

.nadzor-verdict {
    background: rgba(0,0,0,0.07);
    border-left: 4px solid #1e3a8a;
    padding: 12px;
    margin: 15px 0;
    font-size: 1.05rem;
}

/* Заметки и карточки */
.notice-card {
    padding: 10px 5px;
}

.stamp-mark {
    display: inline-block;
    background: #8b3a2b;
    color: #fff;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.warning-stamp {
    background: #dc2626;
    font-size: 1rem;
}

.notice-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #222;
    margin-bottom: 15px;
}

.notice-emphasis {
    display: inline;
    padding: 0.04em 0.18em;
    border-radius: 3px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.notice-reward {
    color: #075f49;
    background: linear-gradient(180deg, transparent 50%, rgba(52, 211, 153, 0.25) 50%);
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.28);
}

.notice-success {
    color: #176b42;
    background: linear-gradient(180deg, transparent 50%, rgba(74, 222, 128, 0.24) 50%);
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.25);
}

.notice-clue {
    color: #8b4a05;
    background: linear-gradient(180deg, transparent 50%, rgba(245, 158, 11, 0.25) 50%);
    text-shadow: 0 0 9px rgba(245, 158, 11, 0.2);
}

.stamp-sub {
    font-size: 0.78rem;
    color: #777;
    text-transform: uppercase;
}

/* Холодильник и сметана */
.fridge-view {
    color: #252923;
}

.fridge-view p {
    color: #252923 !important;
}

.sour-cream-box {
    background: #ffffff;
    border: 1px solid #c8d4cd;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 18px 0;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.sour-cream-jar {
    width: 95px;
    height: 105px;
    background: #f8faf9;
    border: 2px solid #3b82f6;
    border-radius: 12px 12px 22px 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.jar-label {
    font-size: 0.72rem;
    color: #1d4ed8;
    font-weight: bold;
    line-height: 1.25;
}

.jar-note {
    color: #252923;
    font-size: 0.9rem;
    line-height: 1.45;
}

.action-btn {
    background: rgba(10, 14, 12, 0.88);
    color: #c5d1cb;
    border: 1px solid #3c5247;
    padding: 10px 20px;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 15px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn:hover:not(:disabled),
.action-btn:focus-visible:not(:disabled) {
    background: #1a2721;
    border-color: #4ade80;
    color: #4ade80;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.3);
}

.action-btn:disabled {
    background: rgba(20, 26, 23, 0.6);
    border-color: #2a3830;
    color: #6a7c73;
    cursor: not-allowed;
}

/* Черный экран перехода */
.blackout-curtain {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(0.8, 0, 0.2, 1);
}

.blackout-curtain.active {
    opacity: 1;
    pointer-events: auto;
}

/* =======================================================
   ВОЛШЕБНЫЙ САД (ФИНАЛ: АУТЕНТИЧНЫЙ СТИЛЬ САЙТА)
   ======================================================= */
#garden-screen {
    position: absolute;
    inset: 0;
    z-index: 400;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 110px 0;
    --garden-foreground-x: 0px;
    --garden-foreground-y: 0px;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    background-color: var(--garden-light-blush);
    color: #2D1822;
    font-family: var(--font-sans);
}

#garden-screen.visible {
    opacity: 1;
}

/* Переключение темы: Светлая / Сумеречная */
#garden-screen.garden-dusk-mode {
    background-color: #160811;
    color: #FFF5F3;
}

/* Слоистый панорамный фон */
.garden-bg-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 401;
    pointer-events: none;
    overflow: hidden;
}

/* Градиентный оверлей перед домом из оригинального сайта (Светлая тема) */
.garden-bg-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(#fffaf7ad, #fffaf78c 42%, #fffaf714 66%, #f6d5d09e);
    transition: background-image 1.2s ease-in-out, opacity 1.2s ease-in-out;
}

/* Градиентный оверлей перед домом из оригинального сайта (Сумеречная / Темная тема) */
#garden-screen.garden-dusk-mode .garden-bg-container::before {
    background-image: linear-gradient(to top, rgba(68, 24, 52, 0.94) 0%, rgba(68, 24, 52, 0.66) 44%, rgba(40, 14, 30, 0.18) 76%, rgba(24, 8, 18, 0.22) 100%);
}

/* Объёмная виньетка / затенение из оригинального сайта */
.garden-bg-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background-image: linear-gradient(#0000 70%, #16081175), radial-gradient(circle at 50% 40%, #0000 45%, #230a1933);
    transition: opacity 1.2s ease-in-out;
}

#garden-screen.garden-dusk-mode .garden-bg-container::after {
    opacity: 1;
}

.garden-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 1.2s ease-in-out;
}

.garden-bg-day {
    opacity: 1;
}

.garden-bg-dusk {
    opacity: 0;
}

#garden-screen.garden-dusk-mode .garden-bg-day {
    opacity: 0.9;
    filter: brightness(0.48) saturate(0.72) contrast(1.05);
}

#garden-screen.garden-dusk-mode .garden-bg-dusk {
    opacity: 0;
}

.garden-overlay-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.6s ease;
}

.garden-lights-new {
    opacity: 1;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 14px rgba(255, 215, 130, 0.85));
    transition: opacity 0.5s ease;
}

.garden-lights-off .garden-lights-new {
    opacity: 0 !important;
}

/* Передние слои из исходного «Волшебного сада»: туи и нижняя трава создают глубину. */
.garden-foreground {
    position: fixed;
    inset: 0;
    z-index: 446;
    pointer-events: none;
    overflow: hidden;
}

.garden-foreground-grass {
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -7px;
    width: 104%;
    height: clamp(55px, 10vh, 92px);
    object-fit: fill;
    filter: hue-rotate(260deg) saturate(1.35) brightness(0.7) contrast(1.08) drop-shadow(0 -8px 18px rgba(72, 16, 69, 0.42));
    transition: filter 0.9s ease;
}

/* Точная боковая рамка из исходного GardenMmorpgApp. */
.garden-foreground-trees {
    position: fixed;
    inset: 0;
    z-index: 406;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.garden-tree-side {
    position: absolute;
    bottom: -6vh;
    width: min(55vw, 72vh);
    height: 118vh;
    transform: translate3d(var(--garden-foreground-x), var(--garden-foreground-y), 0);
    transition: transform 180ms ease-out;
}

.garden-tree-side--left {
    left: calc(min(55vw, 72vh) * -0.5);
    transform-origin: left bottom;
    mask-image: linear-gradient(to right, #000 0%, #000 80%, rgba(0, 0, 0, 0.76) 90%, transparent 100%);
}

.garden-tree-side--right {
    right: calc(min(55vw, 72vh) * -0.5);
    transform-origin: right bottom;
    mask-image: linear-gradient(to left, #000 0%, #000 80%, rgba(0, 0, 0, 0.76) 90%, transparent 100%);
}

.garden-tree-art,
.garden-tree-piece {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.garden-tree-piece {
    object-fit: contain;
    object-position: center bottom;
}

.garden-tree-side--right .garden-tree-art { transform: scaleX(-1); }
.garden-foreground-trees--twilight .garden-tree-side {
    opacity: 0.92;
    filter: brightness(0.62) contrast(1.16) saturate(1.02) sepia(0.18) hue-rotate(285deg) drop-shadow(0 10px 18px rgba(13, 4, 12, 0.48));
}

#garden-screen:not(.garden-dusk-mode) .garden-tree-side {
    opacity: 0.98;
    filter: saturate(1.08) contrast(1.1) brightness(0.84) drop-shadow(0 10px 16px rgba(74, 43, 35, 0.24));
}

#garden-screen:not(.garden-dusk-mode) .garden-foreground-grass {
    filter: hue-rotate(45deg) saturate(1.28) brightness(0.96) contrast(1.05) drop-shadow(0 -8px 18px rgba(43, 88, 36, 0.28));
}

/* Фея стоит между деревьями и самой передней травой. */
.garden-fairy-figure {
    position: fixed;
    right: clamp(0px, 1vw, 18px);
    bottom: 0;
    z-index: 439;
    width: clamp(330px, 34vw, 520px);
    height: min(78vh, 800px);
    pointer-events: none;
    transform-origin: right bottom;
    filter: drop-shadow(-18px 16px 28px rgba(73, 27, 43, 0.3));
}

.garden-fairy-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

#garden-screen.garden-dusk-mode .garden-fairy-figure {
    filter: brightness(0.82) saturate(0.92) drop-shadow(-18px 16px 30px rgba(83, 14, 65, 0.58));
}

/* Канвас лепестков и золотой пыльцы */
#petals-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 448;
}

/* Верхняя навигация Сада: точные стили из оригинального сайта */
.garden-top-header {
    position: relative;
    z-index: 450;
    width: 100%;
    max-width: 1152px;
    padding: 24px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.garden-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.garden-daisy-btn {
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
    background: rgba(50, 18, 38, 0.88);
    border: 1px solid rgba(226, 92, 128, 0.42);
    box-shadow: 0 4px 14px rgba(28, 8, 21, 0.35);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
}

.garden-daisy-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.garden-daisy-btn:hover .garden-daisy-icon-wrap {
    transform: scale(1.1) rotate(15deg);
}

.garden-daisy-svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 6px rgba(217, 135, 140, 0.3));
}

.daisy-petals ellipse {
    fill: #FFF9F4;
    stroke: #B75069;
    stroke-width: 0.75;
    transition: fill 0.3s, stroke 0.3s;
}

#garden-screen.garden-dusk-mode .daisy-petals ellipse {
    fill: #FFD9E3;
    stroke: #FFAEC2;
}

.garden-brand-info {
    display: flex;
    flex-direction: column;
}

.garden-site-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2D1822;
    line-height: 1.1;
}

#garden-screen.garden-dusk-mode .garden-site-name {
    color: #FFFFFF;
}

.garden-site-tagline {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: #4B2D39;
    font-weight: 500;
}

#garden-screen.garden-dusk-mode .garden-site-tagline {
    color: #F2D1DA;
}

.garden-top-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Точные кнопки шапки из GARDEN_THEMES */
.garden-header-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.garden-header-btn:hover {
    transform: scale(1.05);
}

.garden-header-btn:active {
    transform: scale(0.95);
}

/* Огни дома (Светлая тема) */
.garden-lights-btn {
    background: #F4E6D4;
    border: 1px solid #D7AE70;
    color: #78521A;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(215, 174, 112, 0.3);
}

.garden-lights-off .garden-lights-btn {
    background: #FFFFFF;
    border: 1px solid #E8B8B8;
    color: #6A4350;
    font-weight: normal;
    box-shadow: none;
}

/* Огни дома (Сумеречная тема) */
#garden-screen.garden-dusk-mode .garden-lights-btn {
    background: linear-gradient(to right, rgba(226, 92, 128, 0.3), rgba(201, 59, 102, 0.3));
    border: 1px solid #E25C80;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 0 20px rgba(226, 92, 128, 0.4);
}

#garden-screen.garden-dusk-mode.garden-lights-off .garden-lights-btn {
    background: rgba(50, 18, 38, 0.8);
    border: 1px solid rgba(226, 92, 128, 0.3);
    color: #F2D1DA;
    font-weight: normal;
    box-shadow: none;
}

/* Кнопка Темы (Дневной режим -> показывает кнопку 'Сумерки' на тёмном фоне) */
.garden-theme-btn {
    background: rgba(50, 18, 38, 0.85);
    border: 1px solid rgba(226, 92, 128, 0.5);
    color: #FFFFFF;
    box-shadow: 0 0 15px rgba(226, 92, 128, 0.25);
}

.garden-theme-btn:hover {
    background: #551F41;
}

.garden-theme-btn .moon-icon {
    color: #FFAEC2;
}

/* Кнопка Темы (Сумеречный режим -> показывает кнопку 'День' на светлом фоне) */
#garden-screen.garden-dusk-mode .garden-theme-btn {
    background: #FFFFFF;
    border: 1px solid #E8B8B8;
    color: #2D1822;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#garden-screen.garden-dusk-mode .garden-theme-btn:hover {
    background: #FFF7F5;
}

#garden-screen.garden-dusk-mode .garden-theme-btn .sun-icon {
    color: #D9878C;
}

/* Центральный контент */
.garden-center-container,
.garden-content-shell {
    position: relative;
    z-index: 440;
    width: calc(100% - clamp(7rem, 14vw, 12rem));
    max-width: 64rem;
    margin: 4px auto 80px auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1100px) {
    .garden-center-container {
        transform: none;
        max-width: 58rem;
    }
}

.garden-hero-section {
    text-align: center;
    max-width: 48rem;
    margin: 16px auto 32px auto;
}

/* Бедж героя */
.garden-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-family: var(--font-sans);
    font-weight: 700;
    margin-bottom: 14px;
    backdrop-filter: blur(12px);
    background: #FFF7F5;
    border: 1px solid rgba(201, 123, 142, 0.55);
    color: #8D344C;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#garden-screen.garden-dusk-mode .garden-hero-badge {
    background: rgba(50, 18, 38, 0.9);
    border-color: rgba(226, 92, 128, 0.5);
    color: #FFAEC2;
    box-shadow: 0 0 20px rgba(226, 92, 128, 0.25);
}

/* Главный заголовок героя */
.garden-main-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #321726;
    text-shadow: 0 1px 0 rgba(255, 250, 247, 0.96), 0 0 8px rgba(255, 247, 240, 0.92), 0 2px 12px rgba(255, 255, 255, 0.78);
    margin-bottom: 14px;
}

#garden-screen.garden-dusk-mode .garden-main-title {
    color: #FFFFFF;
    text-shadow: 0 0 25px rgba(226, 92, 128, 0.4);
}

/* Поэтическое описание */
.garden-main-quote {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.75;
    max-width: 48rem;
    margin: 8px auto 42px auto;
    color: #3b202c;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 0 rgba(255, 252, 248, 0.98), 0 0 7px rgba(255, 248, 241, 0.96), 0 2px 12px rgba(255, 255, 255, 0.82);
}

#garden-screen.garden-dusk-mode .garden-main-quote {
    color: #F2D1DA;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

/* Кнопки Шёпот сада и Колокольчик ветра */
.garden-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.garden-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.garden-hero-btn:hover {
    transform: scale(1.05);
}

.garden-hero-btn:active {
    transform: scale(0.95);
}

.primary-whisper-btn {
    background: linear-gradient(to right, #D9878C, #C96F82);
    border: 1px solid #B75069;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(183, 80, 105, 0.24);
}

#garden-screen.garden-dusk-mode .primary-whisper-btn {
    background: linear-gradient(to right, #E25C80, #C93B66);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 0 25px rgba(226, 92, 128, 0.5);
}

.secondary-chime-btn {
    background: linear-gradient(to right, #F4E6D4, #EBCB9A);
    border: 1px solid #B9853E;
    color: #55350D;
    box-shadow: 0 6px 18px rgba(185, 133, 62, 0.2);
}

#garden-screen.garden-dusk-mode .secondary-chime-btn {
    background: rgba(50, 18, 38, 0.8);
    border: 1px solid rgba(226, 92, 128, 0.5);
    color: #FFAEC2;
    box-shadow: 0 0 15px rgba(226, 92, 128, 0.25);
}

/* =======================================================
   КАРТОЧКА ФЕИ (ТОЧНЫЙ СТИЛЬ FairyStage ИЗ САЙТА)
   ======================================================= */
.garden-fairy-card {
    width: 100%;
    text-align: left;
    background: linear-gradient(to bottom right, #FFFFFF, #FFF7F5, #FDE8E4);
    border: 2px solid #D9878C;
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(217, 135, 140, 0.22);
    padding: 36px 38px;
    color: #2D1822;
    transition: all 0.3s ease;
}

@media (min-width: 900px) {
    .garden-fairy-card {
        width: 78%;
        align-self: flex-start;
    }
}

@media (min-width: 600px) and (max-height: 820px) {
    .garden-center-container,
    .garden-content-shell {
        margin-top: 28px;
        margin-bottom: 72px;
    }

    .garden-hero-section {
        margin-bottom: 18px;
    }

    .garden-main-title {
        font-size: clamp(2.35rem, 4vw, 3rem);
        margin-bottom: 8px;
    }

    .garden-main-quote {
        margin-bottom: 22px;
        line-height: 1.55;
    }

    .garden-fairy-card {
        padding: 24px 28px;
    }

    .fairy-card-header {
        padding-bottom: 10px;
        margin-bottom: 14px;
    }
}

#garden-screen.garden-dusk-mode .garden-fairy-card {
    background: rgba(68, 24, 52, 0.96);
    border: 2px solid rgba(226, 92, 128, 0.6);
    box-shadow: 0 20px 60px rgba(21, 5, 16, 0.44), 0 0 45px rgba(226, 92, 128, 0.18);
    color: #FFFFFF;
}

.fairy-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(217, 135, 140, 0.25);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

#garden-screen.garden-dusk-mode .fairy-card-header {
    border-bottom-color: rgba(226, 92, 128, 0.3);
}

.fairy-meta-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #9E3F59;
    font-family: var(--font-sans);
}

#garden-screen.garden-dusk-mode .fairy-meta-tag {
    color: #E25C80;
}

.fairy-universe-badge {
    padding: 4px 14px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-sans);
    background: rgba(217, 135, 140, 0.2);
    border: 1px solid #B75069;
    color: #7C2D45;
}

#garden-screen.garden-dusk-mode .fairy-universe-badge {
    background: rgba(226, 92, 128, 0.2);
    border-color: #E25C80;
    color: #FFAEC2;
}

/* Сетка карточки: 3D портрет слева, описание справа */
.fairy-card-body-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    align-items: center;
}

@media (max-width: 820px) {
    .fairy-card-body-grid {
        grid-template-columns: 1fr;
    }
}

.fairy-portrait-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #D9878C;
    box-shadow: 0 0 35px rgba(217, 135, 140, 0.35);
}

#garden-screen.garden-dusk-mode .fairy-portrait-frame {
    border: 2px solid #E25C80;
    box-shadow: 0 0 35px rgba(226, 92, 128, 0.4);
}

.fairy-portrait-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.fairy-portrait-frame:hover .fairy-portrait-img {
    transform: scale(1.04);
}

.fairy-frame-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 4px 10px;
    background: rgba(45, 24, 34, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
    font-size: 0.68rem;
    color: #FFF5F3;
    text-align: center;
    font-family: var(--font-sans);
}

.fairy-info-column {
    display: flex;
    flex-direction: column;
}

.fairy-num-badge {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    color: #B75069;
    margin-bottom: 4px;
}

#garden-screen.garden-dusk-mode .fairy-num-badge {
    color: #FFAEC2;
}

.fairy-name {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #2D1822;
}

#garden-screen.garden-dusk-mode .fairy-name {
    color: #FFFFFF;
}

.fairy-lead-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #4B2D39;
    margin-bottom: 20px;
    font-family: var(--font-sans);
}

#garden-screen.garden-dusk-mode .fairy-lead-desc {
    color: #F2D1DA;
}

.fairy-description-box,
.fairy-quote-container {
    background: #FFFFFF;
    border-left: 3px solid #D7AE70;
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

#garden-screen.garden-dusk-mode .fairy-description-box,
#garden-screen.garden-dusk-mode .fairy-quote-container {
    background: rgba(50, 18, 38, 0.9);
    border-left-color: #E25C80;
    box-shadow: inset 0 0 20px rgba(226, 92, 128, 0.1);
}

.fairy-quote-text {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.6;
    color: #5A3542;
}

#garden-screen.garden-dusk-mode .fairy-quote-text {
    color: #FFFFFF;
}

.garden-actions-row,
.fairy-actions-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.garden-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.primary-portal-btn,
.fairy-portal-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 9999px;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(to right, #D9878C, #F2B49F, #E8B8B8);
    color: #24171C;
    box-shadow: 0 4px 15px rgba(217, 135, 140, 0.4);
    transition: all 0.25s ease;
}

.primary-portal-btn:hover,
.fairy-portal-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(217, 135, 140, 0.6);
}

#garden-screen.garden-dusk-mode .primary-portal-btn,
#garden-screen.garden-dusk-mode .fairy-portal-link-btn {
    background: linear-gradient(to right, #E25C80, #FFAEC2, #E25C80);
    color: #0E080D;
    box-shadow: 0 0 25px rgba(226, 92, 128, 0.5);
}

.secondary-whisper-btn {
    background: linear-gradient(to right, #D9878C, #C96F82);
    border: 1px solid #B75069;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(183, 80, 105, 0.2);
}

.secondary-whisper-btn:hover {
    transform: scale(1.05);
}

#garden-screen.garden-dusk-mode .secondary-whisper-btn {
    background: linear-gradient(to right, #E25C80, #C93B66);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 0 20px rgba(226, 92, 128, 0.5);
}

.secondary-chime-btn {
    background: linear-gradient(to right, #F4E6D4, #EBCB9A);
    border: 1px solid #B9853E;
    color: #55350D;
    box-shadow: 0 4px 14px rgba(185, 133, 62, 0.2);
}

.secondary-chime-btn:hover {
    transform: scale(1.05);
}

#garden-screen.garden-dusk-mode .secondary-chime-btn {
    background: rgba(50, 18, 38, 0.8);
    border: 1px solid rgba(226, 92, 128, 0.5);
    color: #FFAEC2;
    box-shadow: 0 0 15px rgba(226, 92, 128, 0.25);
}

.outline-descent-btn,
.fairy-cellar-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 9999px;
    background: transparent;
    border: 1px dashed rgba(183, 80, 105, 0.5);
    color: #6A4350;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    cursor: pointer;
    margin-left: auto;
    transition: all 0.2s ease;
}

.outline-descent-btn:hover,
.fairy-cellar-return-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: #B75069;
}

#garden-screen.garden-dusk-mode .outline-descent-btn,
#garden-screen.garden-dusk-mode .fairy-cellar-return-btn {
    border-color: rgba(226, 92, 128, 0.4);
    color: #F6D5D0;
}

/* =======================================================
   НИЖНИЙ АУДИОПЛЕЕР (ТОЧНАЯ КОПИЯ GardenMusicPlayer)
   ======================================================= */
.garden-music-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 460;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.garden-music-reminder-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: all 0.3s ease;
    background: linear-gradient(to right, #FFFFFF, #FDE8E4);
    border: 1px solid #D9878C;
    color: #2D1822;
    box-shadow: 0 8px 25px rgba(217, 135, 140, 0.35);
    animation: gentleBounce 2.5s infinite ease-in-out;
}

@keyframes gentleBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

#garden-screen.garden-dusk-mode .garden-music-reminder-btn {
    background: linear-gradient(to right, #E25C80, #C93B66);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    box-shadow: 0 0 30px rgba(226, 92, 128, 0.7);
}

.garden-player-capsule {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 9999px;
    backdrop-filter: blur(16px);
    background: #FFFFFF;
    border: 1px solid #E8B8B8;
    box-shadow: 0 4px 20px rgba(217, 135, 140, 0.2);
    color: #2D1822;
}

#garden-screen.garden-dusk-mode .garden-player-capsule {
    background: #321226;
    border: 1px solid rgba(226, 92, 128, 0.5);
    box-shadow: 0 0 20px rgba(226, 92, 128, 0.35);
    color: #FFFFFF;
}

.player-circle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: linear-gradient(to bottom right, #D9878C, #F2B49F, #D7AE70);
    color: #24171C;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.player-circle-btn:hover {
    transform: scale(1.08);
}

#garden-screen.garden-dusk-mode .player-circle-btn {
    background: linear-gradient(to right, #E25C80, #C93B66);
    color: #FFFFFF;
    box-shadow: 0 0 15px rgba(226, 92, 128, 0.6);
}

.player-volume-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-vol-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8D6B77;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s;
}

.player-vol-icon-btn:hover {
    color: #2D1822;
}

#garden-screen.garden-dusk-mode .player-vol-icon-btn {
    color: #FFAEC2;
}

#garden-screen.garden-dusk-mode .player-vol-icon-btn:hover {
    color: #FFFFFF;
}

.player-vol-slider {
    width: 55px;
    height: 4px;
    accent-color: #D9878C;
    cursor: pointer;
}

#garden-screen.garden-dusk-mode .player-vol-slider {
    accent-color: #E25C80;
}

.spin-slow {
    animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hidden {
    display: none !important;
}

/* =======================================================
   МОБИЛЬНАЯ КОМПОНОВКА
   ======================================================= */
@media (max-width: 820px) {
    .start-screen-overlay {
        overflow-y: auto;
        overflow-x: hidden;
        align-items: flex-start;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #title-screen {
        display: block;
        padding: 0;
        background: #020504;
    }

    #title-screen.hidden {
        display: none !important;
    }

    #title-screen .title-bg-door {
        position: fixed;
        min-height: 100dvh;
        background-position: 57% center;
    }

    #title-screen .title-box {
        width: 100%;
        min-height: 100dvh;
        height: auto;
        padding-top: min(35dvh, 260px);
        padding-right: max(18px, env(safe-area-inset-right));
        padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px));
        padding-left: max(18px, env(safe-area-inset-left));
        justify-content: flex-end;
    }

    #title-screen .title-logo {
        flex: 0 0 auto;
        max-height: 22dvh;
    }

    #title-screen .main-menu {
        flex: 0 0 auto;
    }

    #title-screen .title-menu-btn {
        min-height: 48px;
    }

    #title-screen .save-slots-panel {
        width: 100%;
        max-height: none;
        margin-bottom: 0;
        overflow: visible;
    }

    .warning-box {
        margin: auto 0;
        padding: 24px 22px;
    }

    .warning-title {
        font-size: clamp(1.2rem, 6vw, 1.55rem);
        overflow-wrap: anywhere;
    }

    .warning-text,
    .warning-btn {
        overflow-wrap: anywhere;
    }

    .modal-overlay {
        padding: 10px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-window {
        width: 100%;
        max-height: calc(100dvh - 20px);
        margin: auto 0;
        padding: 24px 20px;
        overflow-x: hidden;
    }

    .bureaucratic-doc,
    .modal-window,
    .modal-window p,
    .modal-window li {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .modal-window td,
    .modal-window th {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
    }

    .doc-table,
    .doc-items-table {
        width: 100%;
        table-layout: fixed;
        font-size: clamp(0.66rem, 2.4vw, 0.8rem);
    }

    .doc-table th,
    .doc-table td,
    .doc-items-table th,
    .doc-items-table td {
        padding: 4px;
        vertical-align: top;
    }

    .doc-table th {
        width: 38%;
    }

    .doc-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .garden-top-header {
        padding: max(12px, env(safe-area-inset-top)) 12px 10px;
        gap: 10px;
        align-items: flex-start;
    }

    .garden-site-name {
        font-size: 0.92rem;
        letter-spacing: 0.1em;
    }

    .garden-site-tagline {
        font-size: 0.7rem;
    }

    .garden-top-controls {
        gap: 6px;
        flex-shrink: 0;
    }

    .garden-header-btn {
        padding: 8px 10px;
    }

    .garden-center-container,
    .garden-content-shell {
        width: calc(100% - 24px);
        margin-top: 8px;
        margin-bottom: 120px;
    }

    .garden-main-title {
        font-size: clamp(2.4rem, 13vw, 4rem);
        overflow-wrap: anywhere;
    }

    .garden-main-quote,
    .fairy-quote-text {
        font-size: clamp(1rem, 4.5vw, 1.15rem);
        overflow-wrap: anywhere;
    }

    .garden-music-widget {
        left: max(8px, env(safe-area-inset-left));
        bottom: max(8px, env(safe-area-inset-bottom));
        transform: scale(0.9);
        transform-origin: left bottom;
    }

    .garden-fairy-figure {
        right: -25vw;
        bottom: 42px;
        z-index: 439;
        width: 82vw;
        height: 68vh;
        opacity: 0.72;
    }
}

@media (max-width: 820px) and (max-height: 700px) {
    #title-screen .title-box {
        padding-top: 23dvh;
    }

    #title-screen .title-logo {
        width: min(62vw, 290px);
        max-height: 18dvh;
    }

    #title-screen .title-tagline {
        display: none;
    }

    #title-screen .title-subtitle {
        margin-bottom: 10px;
    }
}

/* На телефоне комната становится горизонтальной панорамой: изображение остаётся
   крупным и не деформируется, а игрок осматривает края обычным свайпом. */
@media (max-width: 820px) and (orientation: portrait) {
    #game-viewport {
        height: 100dvh;
        min-height: 100dvh;
    }

    #room-view {
        inset: 0;
        width: 100%;
        height: 100dvh;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scrollbar-width: none;
        touch-action: pan-x;
    }

    #room-view::-webkit-scrollbar {
        display: none;
    }

    #room-stage {
        flex: 0 0 auto;
        width: min(99.56dvh, 995px);
        height: min(56dvh, 560px);
        max-width: none;
        max-height: none;
    }

    #room-footer-bar {
        left: 10px;
        right: 10px;
        bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
        display: flex;
        max-height: none;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .room-info-box {
        width: 100%;
        max-width: 100%;
        max-height: min(28dvh, 250px);
        overflow-y: auto;
        padding: 9px 12px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .game-version-credits {
        position: static;
        display: inline-flex;
        flex: 0 0 auto;
        align-self: flex-end;
        min-height: 34px;
        padding: 6px 9px;
    }

    .game-version-credits .version-tag,
    .game-version-credits .dot-sep,
    .game-version-credits .about-link-btn {
        display: inline;
    }

    #mobile-pan-hint {
        position: fixed;
        left: 50%;
        bottom: max(31dvh, calc(env(safe-area-inset-bottom) + 190px));
        z-index: 145;
        display: block;
        width: max-content;
        max-width: calc(100vw - 32px);
        padding: 7px 12px;
        border: 1px solid rgba(157, 197, 187, 0.52);
        border-radius: 999px;
        background: rgba(8, 12, 10, 0.88);
        color: #cfe7df;
        font-family: var(--font-sans);
        font-size: clamp(0.68rem, 3vw, 0.78rem);
        text-align: center;
        pointer-events: none;
        transform: translateX(-50%);
        animation: mobilePanHint 6s ease forwards;
    }

    .flashlight-vignette {
        background: radial-gradient(circle 68vw at 50% 50%, transparent 34%, rgba(5, 7, 7, 0.72) 100%);
    }

    .header-util-btn,
    .inventory-panel,
    .about-link-btn,
    .modal-close-icon {
        min-height: 40px;
    }
}

@keyframes mobilePanHint {
    0%, 58% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (max-width: 480px) {
    #cursor-floating-tooltip {
        display: none !important;
    }

    #ui-header {
        top: max(8px, env(safe-area-inset-top));
        left: 8px;
        right: 8px;
    }

    .header-right-controls {
        gap: 6px;
    }

    .header-util-btn,
    .inventory-panel {
        padding: 6px 9px;
        font-size: 0.72rem;
    }

    #room-footer-bar {
        left: 8px;
        right: 8px;
        bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
        display: flex;
        max-height: none;
    }

    .room-info-box {
        width: 100%;
        max-width: 100%;
        max-height: min(28dvh, 230px);
        overflow-y: auto;
        padding: 8px 10px;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    #room-title-text {
        font-size: clamp(0.95rem, 5vw, 1.1rem);
        overflow-wrap: anywhere;
    }

    #room-description-text {
        font-size: 0.76rem;
        line-height: 1.32;
        overflow-wrap: anywhere;
    }

    .game-version-credits {
        position: static;
        align-self: flex-end;
        padding: 5px 7px;
    }

    .game-version-credits .version-tag,
    .game-version-credits .dot-sep {
        display: inline;
    }

    .modal-window {
        padding: 22px 14px;
    }

    .modal-close-icon {
        top: 8px;
        right: 8px;
    }

    .doc-title {
        padding-right: 30px;
        font-size: 1.08rem;
        overflow-wrap: anywhere;
    }

    .doc-items-table,
    .doc-items-table tbody,
    .doc-items-table tr,
    .doc-items-table td {
        display: block;
        width: 100%;
    }

    .doc-items-table thead {
        display: none;
    }

    .doc-items-table tr {
        margin: 12px 0;
        border: 1px solid #777;
        background: rgba(255, 255, 255, 0.18);
    }

    .doc-items-table td {
        position: relative;
        min-height: 34px;
        padding: 7px 8px 7px 42%;
        border: 0;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
    }

    .doc-items-table td:last-child {
        border-bottom: 0;
    }

    .doc-items-table td::before {
        position: absolute;
        left: 8px;
        top: 7px;
        width: 36%;
        color: #555;
        font-weight: 700;
    }

    .doc-items-table td:nth-child(1)::before { content: "№"; }
    .doc-items-table td:nth-child(2)::before { content: "Товар"; }
    .doc-items-table td:nth-child(3)::before { content: "Ед."; }
    .doc-items-table td:nth-child(4)::before { content: "Кол-во"; }
    .doc-items-table td:nth-child(5)::before { content: "Примечание"; }

    .garden-daisy-svg {
        width: 30px;
        height: 30px;
    }

    .garden-top-header .btn-text {
        display: none;
    }

    .garden-header-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        justify-content: center;
    }

    .garden-hero-badge {
        max-width: 100%;
        padding: 6px 12px;
        letter-spacing: 0.12em;
        line-height: 1.35;
        white-space: normal;
    }

    .garden-fairy-card {
        padding: 22px 14px;
    }

    .garden-actions-row,
    .fairy-actions-footer {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .garden-action-btn,
    .primary-portal-btn,
    .outline-descent-btn {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        text-align: center;
    }
}

.hidden {
    display: none !important;
}