/* component: sound — визуальных стилей нет. */

/* component: ui */
/* ======================================== */

:root{
    --ui-bg: rgba(8,10,11,.82);
    --ui-panel: rgba(18,21,22,.94);
    --ui-border: rgba(255,255,255,.12);
    --ui-text: #f1ede3;
    --ui-muted: #aaa69e;
    --ui-accent: #d1b36b;
    --ui-danger: #e9a19a;
    --ui-warning: #e5c778;
}

.game{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#0b0d0e;
    color:var(--ui-text);
}

.place-title{
    position:absolute;
    left:16px;
    top:16px;
    z-index:31;
    padding:10px 13px;
    border-radius:14px;
    background:var(--ui-bg);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(9px);
    box-shadow:0 8px 26px rgba(0,0,0,.25);
    font-size:15px;
    font-weight:750;
    line-height:1.2;
}

.timer{
    position:absolute;
    right:16px;
    top:16px;
    z-index:31;
    min-width:76px;
    padding:9px 12px;
    text-align:center;
    border-radius:14px;
    background:var(--ui-bg);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(9px);
    color:#ded9cc;
    font-size:14px;
    font-weight:800;
    line-height:1;
}

.timer.warning{
    color:var(--ui-warning);
    border-color:rgba(229,199,120,.28);
}

.timer.danger{
    color:var(--ui-danger);
    border-color:rgba(233,161,154,.35);
}

.ui-idle-hint{
    position:absolute;
    left:50%;
    top:58%;
    z-index:32;
    width:max-content;
    max-width:min(320px,82vw);
    padding:12px 16px;
    transform:translate(-50%,-50%) translateY(6px);
    border-radius:16px;
    background:rgba(7,9,10,.82);
    border:1px solid var(--ui-border);
    box-shadow:0 12px 35px rgba(0,0,0,.42);
    backdrop-filter:blur(9px);
    color:#e5dfd2;
    font-size:14px;
    line-height:1.35;
    text-align:center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.ui-idle-hint.show{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

.ui-last-ten{
    position:absolute;
    inset:0;
    z-index:33;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility 0s linear .18s;
}

.ui-last-ten.show{
    opacity:1;
    visibility:visible;
    transition:opacity .18s ease, visibility 0s linear 0s;
}

.ui-last-ten-number{
    width:116px;
    height:116px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(7,9,10,.42);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 10px 45px rgba(0,0,0,.30);
    backdrop-filter:blur(3px);
    color:#f4ead4;
    font-size:64px;
    font-weight:850;
    line-height:1;
    text-shadow:0 3px 18px rgba(0,0,0,.45);
}

.ui-last-ten.pulse .ui-last-ten-number{
    animation:uiCountPulse .38s ease;
}

@keyframes uiCountPulse{
    0%{transform:scale(.86);opacity:.65}
    55%{transform:scale(1.08);opacity:1}
    100%{transform:scale(1);opacity:1}
}

.ui-panel-wrap{
    position:absolute;
    left:12px;
    right:12px;
    bottom:82px;
    z-index:35;
    pointer-events:none;
}

.ui-panel{
    position:relative;
    width:100%;
    background:var(--ui-panel);
    border:1px solid var(--ui-border);
    border-radius:22px;
    padding:16px;
    backdrop-filter:blur(14px);
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    transform:translate3d(0,calc(100% + 80px),0);
    opacity:0;
    visibility:hidden;
    transition:
        transform .25s ease,
        opacity .20s ease,
        visibility 0s linear .25s;
    pointer-events:none;
}

.ui-panel.open{
    transform:translate3d(0,0,0);
    opacity:1;
    visibility:visible;
    transition:
        transform .25s ease,
        opacity .20s ease,
        visibility 0s linear 0s;
    pointer-events:auto;
}

.ui-panel h2{
    margin:0 0 6px;
    color:var(--ui-text);
    font-size:20px;
}

.ui-panel p{
    margin:0 0 14px;
    color:#c6c3bb;
    font-size:14px;
    line-height:1.4;
}

.ui-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.ui-actions button{
    min-height:52px;
    border:0;
    border-radius:15px;
    background:#2a2f31;
    color:#fff;
    font-weight:700;
    touch-action:manipulation;
}

.ui-actions button.primary{
    background:var(--ui-accent);
    color:#171411;
}

.ui-quick-inventory{
    position:absolute;
    left:50%;
    bottom:16px;
    z-index:34;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px;
    border-radius:18px;
    background:var(--ui-bg);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 10px 30px rgba(0,0,0,.42);
    backdrop-filter:blur(10px);
}

.ui-inventory-slot{
    position:relative;
    width:50px;
    height:50px;
    border:0;
    border-radius:14px;
    background:#171b1d;
    color:#8f8b84;
    display:grid;
    place-items:center;
    font-size:22px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    touch-action:manipulation;
}

.ui-inventory-slot.active{
    background:var(--ui-accent);
    color:#171411;
    box-shadow:0 0 18px rgba(209,179,107,.24), inset 0 0 0 1px rgba(255,255,255,.18);
}

.ui-inventory-slot.empty{
    opacity:.30;
}

.ui-exit-overlay{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(4,6,7,.88);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility 0s linear .22s;
}

.ui-exit-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .22s ease, visibility 0s linear 0s;
}

.ui-exit-card{
    width:min(390px,100%);
    padding:26px 22px 22px;
    border-radius:24px;
    background:var(--ui-panel);
    border:1px solid var(--ui-border);
    box-shadow:0 20px 70px rgba(0,0,0,.55);
    text-align:center;
}

.ui-exit-card h2{
    margin:0 0 8px;
    color:var(--ui-text);
    font-size:26px;
}

.ui-exit-card p{
    margin:0 0 20px;
    color:var(--ui-muted);
    line-height:1.45;
}

.ui-exit-card button{
    width:100%;
    min-height:54px;
    border:0;
    border-radius:15px;
    background:var(--ui-accent);
    color:#171411;
    font-weight:800;
    touch-action:manipulation;
}

@media (max-height:650px){
    .ui-inventory-slot{width:46px;height:46px}
    .ui-panel-wrap{bottom:72px}
}


/* Совместимость с текущей разметкой house.php */
.idle-hint,
.last-ten,
.last-ten-number,
.quick-inventory,
.inventory-slot,
.bottom-panel-wrap,
.panel,
.actions,
.exit-overlay,
.exit-card {
    /* page-specific styling is intentionally kept in css/house.css */
}


/* ======================================== */

/* ===== INTRO PRELOADER ===== */
.intro-loader{
    min-height:74px;
    margin:16px 0 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#aaa69e;
    font-size:13px;
}
.intro-spinner{
    width:30px;
    height:30px;
    border:2px solid rgba(255,255,255,.12);
    border-top-color:#d1b36b;
    border-radius:50%;
    animation:introSpin .8s linear infinite;
}
.intro-loader-text{min-height:18px;text-align:center}
@keyframes introSpin{to{transform:rotate(360deg)}}

.intro-loader.hide{display:none}


.music-button .music-icon{
    width:28px;
    height:28px;
    object-fit:contain;
    opacity:.88;
    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* =========================================================
   DESKTOP PHONE FRAME
   ========================================================= */

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

@media (min-width:641px){

    html,
    body{
        min-height:100vh;
    }

    body{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        padding:2vh 0;
        background:
            radial-gradient(
                circle at 50% 18%,
                rgba(255,255,255,.055),
                transparent 38%
            ),
            #000000;
        overflow:auto;
    }

    .phone-frame{
        width:478px;
        height:96vh;
        max-height:920px;
        min-height:560px;
        padding:14px;
        box-sizing:border-box;
        background:#000;
        border-radius:44px;
        box-shadow:
            0 30px 60px rgba(0,0,0,.60),
            0 0 0 2px #3a3a3a inset;
    }

    .phone-screen{
        position:relative;
        width:100%;
        height:100%;
        overflow:hidden;
        box-sizing:border-box;
        border-radius:32px;
        background:#2a2e34;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.05);
    }

    .phone-screen::before{
        content:"";
        display:block;
        position:absolute;
        z-index:1000;
        top:0;
        left:50%;
        width:120px;
        height:34px;
        transform:translateX(-50%);
        background:#000;
        border-radius:0 0 20px 20px;
        pointer-events:none;
    }

    .phone-screen > .game{
        width:100%;
        height:100%;
        max-width:none;
        border-radius:32px;
    }
}

@media (max-width:640px){

    html,
    body{
        width:100%;
        height:100%;
        min-height:0;
        margin:0;
        padding:0;
        overflow:hidden;
    }

    body{
        height:100dvh;
        min-height:100dvh;
        background:#000;
    }

    .phone-frame{
        width:100%;
        max-width:100%;
        height:100dvh;
        min-height:0;
        padding:0;
        background:#000;
        border-radius:0;
        box-shadow:none;
        box-sizing:border-box;
    }

    .phone-screen{
        position:relative;
        width:100%;
        height:100dvh;
        min-height:0;
        overflow:hidden;
        background:#000;
        border-radius:0;
        box-shadow:none;
        box-sizing:border-box;
    }

    /*
     * PWA/iPhone:
     * верхняя часть экрана постепенно уходит в чёрный.
     */
    .phone-screen::before{
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:92px;
        z-index:9;
        pointer-events:none;

        background:
            linear-gradient(
                to bottom,
                #000000 0%,
                rgba(0,0,0,.98) 18%,
                rgba(0,0,0,.78) 43%,
                rgba(0,0,0,.38) 70%,
                rgba(0,0,0,0) 100%
            );
    }

    .phone-screen > .game{
        width:100%;
        max-width:none;
        height:100%;
        min-height:0;
        border-radius:0;
        box-sizing:border-box;
    }
}

/*
 * Старые iOS/WebView без dynamic viewport.
 * svh берёт минимальную безопасную высоту видимой области,
 * поэтому интерфейс не уезжает под браузерные панели.
 */
@supports not (height:100dvh){
    @media (max-width:640px){
        body,
        .phone-frame,
        .phone-screen{
            height:100svh;
            min-height:100svh;
        }
    }
}


/* =========================================================
   ЗАПРЕТ ИГРЫ В ГОРИЗОНТАЛЬНОЙ ОРИЕНТАЦИИ
   ========================================================= */

@media (max-width:900px) and (orientation:landscape){

    html,
    body{
        width:100%;
        height:100%;
        min-height:100%;
        overflow:hidden;
        background:#000 !important;
    }

    .phone-frame,
    .phone-screen{
        width:100%;
        height:100%;
        min-height:100%;
        background:#000 !important;
    }

    /*
     * Полностью блокируем игру в landscape.
     * Никаких элементов интерфейса и панорамы игрок
     * не видит и не может нажимать на них.
     */
    .phone-screen > .game{
        visibility:hidden;
        pointer-events:none;
    }

    .phone-screen::after{
        content:"Поверните телефон вертикально";
        position:absolute;
        inset:0;
        z-index:99999;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:32px;
        box-sizing:border-box;

        background:#000;
        color:#f1ede3;

        font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
        font-size:20px;
        font-weight:700;
        line-height:1.35;
        text-align:center;

        pointer-events:auto;
    }
}

/* component: panorama */
/* ======================================== */

.scene-viewport{
    position:absolute;inset:0;overflow:hidden;touch-action:none;background:#090b0d;
}
.panorama{
    position:absolute;top:0;left:0;width:2200px;height:100%;
    will-change:transform;
}
.panorama img{
    display:block;width:100%;height:100%;object-fit:cover;
    pointer-events:none;user-select:none;-webkit-user-drag:none;
}


/* ======================================== */


/* ========================================
   ЛЁГКАЯ АТМОСФЕРА ПАНОРАМЫ
   ======================================== */

.panorama-atmosphere{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:4;
    overflow:hidden;
    pointer-events:none;
    user-select:none;
}

.panorama-dust{
    position:absolute;
    display:block;
    width:var(--dust-size);
    height:var(--dust-size);
    border-radius:50%;
    background:rgba(255,255,255,.62);
    box-shadow:0 0 7px rgba(255,255,255,.32);
    opacity:0;
    animation:
        panorama-dust-float
        var(--dust-duration)
        ease-in-out
        var(--dust-delay)
        infinite;
    will-change:transform,opacity;
}

@keyframes panorama-dust-float{

    0%{
        opacity:0;
        transform:
            translate3d(0, 18px, 0)
            scale(.72);
    }

    15%{
        opacity:.28;
    }

    48%{
        opacity:.52;
        transform:
            translate3d(
                var(--dust-drift),
                var(--dust-rise),
                0
            )
            scale(1);
    }

    72%{
        opacity:.22;
    }

    100%{
        opacity:0;
        transform:
            translate3d(
                calc(var(--dust-drift) * -0.55),
                calc(var(--dust-rise) - 18px),
                0
            )
            scale(.72);
    }
}

@media (prefers-reduced-motion: reduce){

    .panorama-dust{
        animation:none;
        opacity:.06;
    }
}

/* component: flashlight */
/* ======================================== */

.flashlight{
    width:50px;height:50px;border:0;border-radius:14px;
    background:#171b1d;color:#666;font-size:22px;opacity:.72;
    touch-action:manipulation;
}
.flashlight.active{
    background:#d1b36b;color:#171411;opacity:1;
    box-shadow:0 0 18px rgba(209,179,107,.24);
}


/* ======================================== */

/* component: timer */
/* ======================================== */

.timer{
    position:absolute;right:16px;top:16px;z-index:31;min-width:76px;
    padding:9px 12px;text-align:center;border-radius:14px;
    background:rgba(8,10,11,.72);border:1px solid rgba(255,255,255,.10);
    color:#ded9cc;font-size:14px;font-weight:800;
}
.timer.warning{color:#e5c778}
.timer.danger{color:#e9a19a}


/* ======================================== */

/* component: item */
/* ======================================== */

/*
 * ==================================================
 * ITEM COMPONENT
 * ==================================================
 */

.item-overlay {
    position:absolute;
    inset:0;
    z-index:60;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(4,6,7,.82);
    backdrop-filter:blur(7px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility 0s linear .22s;
}

.item-overlay.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .22s ease,
        visibility 0s linear 0s;
}

.item-card {
    width:min(360px,100%);

    overflow:hidden;

    border-radius:24px;

    background:rgba(18,21,22,.96);

    border:1px solid rgba(255,255,255,.12);

    box-shadow:
        0 20px 70px rgba(0,0,0,.58);

    transform:
        translateY(14px)
        scale(.97);

    opacity:0;

    transition:
        transform .25s ease,
        opacity .22s ease;
}

.item-overlay.open .item-card {
    transform:
        translateY(0)
        scale(1);

    opacity:1;
}

.item-icon {
    min-height:190px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    background:
        radial-gradient(
            circle at center,
            rgba(209,179,107,.12),
            rgba(7,9,10,.22) 70%
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);

    font-size:92px;
    line-height:1;

    filter:
        drop-shadow(
            0 12px 24px rgba(0,0,0,.45)
        );
}

.item-content {
    padding:20px;
}

.item-content h2 {
    margin:0 0 8px;

    color:#f1ede3;

    font-size:23px;
    line-height:1.2;
}

.item-content p {
    margin: 0 0 0px;

    color:#aaa69e;

    font-size:14px;
    line-height:1.45;
}

.item-take {
    width:100%;
    min-height:54px;

    border:0;
    border-radius:15px;

    background:#d1b36b;
    color:#171411;

    font-weight:800;

    cursor:pointer;
    touch-action:manipulation;
}

.item-take:active {
    transform:scale(.985);
}

.scene-object.item-collected {
    opacity:0;
    pointer-events:none;
}

.inventory-slot.item-slot {
    background:#d1b36b;
    color:#171411;

    box-shadow:
        0 0 18px rgba(209,179,107,.24),
        inset 0 0 0 1px rgba(255,255,255,.18);
}

@media (max-height:650px) {
    .item-icon {
        min-height:145px;
        font-size:72px;
    }
}


.inventory-item-icon {
    display:block;
    line-height:1;
    font-size:22px;
}


/* ==================================================
   ITEM: CLOSE BUTTON
   ================================================== */

.item-card {
    position: relative;
}

.item-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

    background: rgba(7,9,10,.55);
    color: rgba(255,255,255,.82);

    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}

.item-close:active {
    transform: scale(.94);
}


/* ==================================================
   ITEM: IMAGE / EMOJI
   ================================================== */

.item-icon {
    width: 100%;
    min-height: 210px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    font-size: 84px;
    line-height: 1;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.08),
            rgba(0,0,0,.28) 72%
        );
}

.item-icon.has-image {
    padding: 18px;
}

.item-icon img {
    display: block;

    width: 100%;
    height: 210px;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(
            0 14px 25px rgba(0,0,0,.45)
        );
}


/* ==================================================
   ITEM: MESSAGE
   ================================================== */

.item-message {
    min-height: 20px;

    margin:
        -6px 0 12px;

    color: #d8b96e;

    font-size: 13px;
    line-height: 1.35;

    text-align: center;
}

.item-take:disabled {
    opacity: .55;
    cursor: default;
}

.item-take.item-discard {
    background: #6b3d39;
    color: #fff;
}


/* ==================================================
   INVENTORY ITEMS
   ================================================== */

.inventory-slot.item-slot {
    position: relative;

    background: #171b1d;
    color: #eee;

    /*
     * Центрируем само содержимое слота через flex.
     * Это одинаково работает для:
     * - img
     * - emoji / обычного текстового icon
     *
     * Не используем transform/position для содержимого,
     * чтобы Safari/iOS не давал дробного смещения.
     */
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    line-height: 1;
    text-align: center;

    /*
     * Предметы НЕ являются выбранными.
     * Никакой подсветки active.
     */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06);

    opacity: 1;
}

.inventory-slot.item-slot img {
    display: block;

    width: 34px;
    height: 34px;

    margin: 0;
    padding: 0;

    object-fit: contain;

    /*
     * Убираем влияние baseline/inline-layout,
     * которое особенно заметно на мобильном Safari.
     */
    vertical-align: middle;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/*
 * Emoji и текстовые иконки:
 * line-height:1 + flex-контейнер дают одинаковое
 * геометрическое центрирование с картинками.
 */
.inventory-slot.item-slot {
    font-size: 22px;
    line-height: 1;
}

.inventory-slot.item-slot:active {
    transform: scale(.94);
}

.inventory-slot.item-slot.active {
    background: #171b1d;
    color: #eee;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06);
}


/* ==================================================
   СОБРАННЫЙ ОБЪЕКТ
   ================================================== */

.scene-object.item-collected {
    pointer-events: none;
    opacity: .25;
}

.scene-object.item-collected::after {
    opacity: 0 !important;
}


/* ==================================================
   ITEM ACTION DELAY / SEARCH COUNTDOWN
   ================================================== */

.item-search-overlay {
    position: absolute;
    inset: 0;
    z-index: 60;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(4,6,7,.82);

    backdrop-filter: blur(6px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility 0s linear .2s;
}

.item-search-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity .2s ease,
        visibility 0s linear 0s;
}

.item-search-card {
    position: relative;

    width: min(360px,100%);

    padding: 28px 24px 26px;

    border-radius: 24px;

    background: rgba(18,21,22,.96);

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        0 20px 70px rgba(0,0,0,.55);

    text-align: center;
}

.item-search-close {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

    background: rgba(7,9,10,.55);

    color: rgba(255,255,255,.82);

    font-size: 27px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}

.item-search-title {
    margin-bottom: 8px;

    color: #f1ede3;

    font-size: 21px;
    font-weight: 800;
}

.item-search-text {
    min-height: 42px;

    margin-bottom: 12px;

    color: #aaa69e;

    font-size: 14px;
    line-height: 1.4;
}

.item-search-count {
    display: grid;
    place-items: center;

    width: 112px;
    height: 112px;

    margin: 10px auto 12px;

    border-radius: 50%;

    background: rgba(7,9,10,.48);

    border: 1px solid rgba(255,255,255,.14);

    color: #f4ead4;

    font-size: 60px;
    font-weight: 850;
    line-height: 1;

    box-shadow:
        0 10px 35px rgba(0,0,0,.30);
}

.item-search-caption {
    color: #8f8b84;

    font-size: 12px;
}


/* ===== ТЕКСТОВЫЙ РЕЗУЛЬТАТ БЕЗ ПРЕДМЕТА ===== */

.item-overlay.text-only .item-icon,
.item-overlay.text-only #itemTitle,
.item-overlay.text-only .item-take,
.item-overlay.text-only .item-message{
    display:none;
}

.item-overlay.text-only .item-content{
    padding-top:8px;
}

.item-overlay.text-only #itemText{
    margin: 20px;
}


/* ======================================== */

/* component: house */
/* ======================================== */

:root{
    /* Настройка освещения сцены */
    --dark-scene-brightness: .30;
    --lamp-scene-brightness: .90;
    --dark-overlay: .42;
    --lamp-overlay: .10;
    --ambient-contrast: 1.08;

    --bg: #000000;
    --panel: rgba(18,21,22,.94);
    --border: rgba(255,255,255,.12);
    --text: #f1ede3;
    --muted: #aaa69e;
    --accent: #d1b36b;
}

*{
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,body{
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
    display:flex;
    justify-content:center;
}

button{
    font:inherit;
}

.game{
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    max-width:560px;
    overflow:hidden;
    background:#0b0d0e;
}

.game {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
}

.game * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.game img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ===== СЦЕНА ===== */

.scene-viewport{
    position:absolute;
    inset:0;
    overflow:hidden;
    touch-action:none;
    background:#090b0d;
}

.panorama{
    position:absolute;
    top:0;
    left:0;
    width:2200px;
    height:100%;
    will-change:transform;
}

.panorama img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

.game:not(.lamp-on) .panorama{
    filter:brightness(var(--dark-scene-brightness))
    contrast(var(--ambient-contrast));
}

.game.lamp-on .panorama{
    filter:brightness(var(--lamp-scene-brightness))
    contrast(var(--ambient-contrast));
}

.scene-shade{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
    background:rgba(0,0,0,var(--dark-overlay));
    transition:background .28s ease;
}

.game.lamp-on .scene-shade{
    background:rgba(0,0,0,var(--lamp-overlay));
}

/* ===== ИНТЕРАКТИВНЫЕ ОБЪЕКТЫ ===== */

.scene-object{
    position:absolute;
    z-index:21;
    border:0;
    padding:0;
    margin:0;
    background:transparent;
    cursor:pointer;
    touch-action:manipulation;
    outline:none;
}

.scene-object::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:24px;
    height:24px;
    transform:translate(-50%,-50%) scale(.86);
    border-radius:50%;
    background:rgba(224,205,156,.08);
    border:1px solid rgba(224,205,156,.17);
    border:3px solid rgba(255,255,255,.9);
    box-shadow:0 0 14px rgba(224,205,156,.045);
    opacity:0;
    transition:
            opacity .18s ease,
            transform .18s ease,
            background .18s ease;
    pointer-events:none;
}

/*
    Кружки видны только при включённом фонарике.
    Они достаточно заметные, чтобы понимать, куда нажимать,
    но не превращают сцену в интерфейс с яркими кнопками.
*/
.game.lamp-on .scene-object::after{
    opacity:.78;

    /*
     * Едва заметное «дыхание» метки.
     * Она не прыгает и не двигается по сцене —
     * только слегка меняет свечение, чтобы объект
     * ощущался живым.
     */
    animation:
        scene-object-breathe
        4.8s
        ease-in-out
        infinite;
}

.game.lamp-on .scene-object:nth-child(2n)::after{
    animation-delay:-1.7s;
}

.game.lamp-on .scene-object:nth-child(3n)::after{
    animation-delay:-3.1s;
}

.game.lamp-on .scene-object:nth-child(5n)::after{
    animation-delay:-.8s;
}

.game.lamp-on .scene-object:active::after{
    /*
     * Яркая обратная связь в момент нажатия.
     * Останавливаем «дыхание», чтобы подсветка была
     * чистой и хорошо читалась на тёмной панораме.
     */
    animation:none;
    opacity:1;
    transform:translate(-50%,-50%) scale(1.28);
    background:rgba(255,255,255,.22);
    border-color:rgba(255,255,255,1);
    box-shadow:
        0 0 0 5px rgba(255,255,255,.08),
        0 0 24px rgba(255,255,255,.42);
}

.game.lamp-on .scene-object.is-found::after{
    opacity:.9;
    transform:translate(-50%,-50%) scale(1.12);
    background:rgba(224,205,156,.18);
}

@keyframes scene-object-breathe{

    0%,
    100%{
        box-shadow:
            0 0 12px rgba(224,205,156,.035);
        opacity:.68;
    }

    50%{
        box-shadow:
            0 0 18px rgba(224,205,156,.11);
        opacity:.82;
    }
}

@media (prefers-reduced-motion: reduce){

    .game.lamp-on .scene-object::after{
        animation:none;
    }
}

/* Общий UI подключается через components/ui/ui.css. Ниже только page-specific rules. */

/* ===== НАЗВАНИЕ ===== */

.place-title{
    position:absolute;
    left:16px;
    top:16px;
    z-index:31;
    padding:10px 13px;
    border-radius:14px;
    background:rgba(8,10,11,.70);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(9px);
    box-shadow:0 8px 26px rgba(0,0,0,.25);
    font-size:15px;
    font-weight:750;
}

/* ===== ТАЙМЕР ===== */

.timer{
    position:absolute;
    right:16px;
    top:16px;
    z-index:31;
    min-width:76px;
    padding:9px 12px;
    text-align:center;
    border-radius:14px;
    background:rgba(8,10,11,.72);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(9px);
    font-size:14px;
    font-weight:800;
    color:#ded9cc;
}

.timer.warning{
    color:#e5c778;
    border-color:rgba(229,199,120,.28);
}

.timer.danger{
    color:#e9a19a;
    border-color:rgba(233,161,154,.35);
}

/* ===== ПОДСКАЗКА ===== */
/*
 * Старый idle-hint больше не используется.
 * Подсказка горизонтального свайпа создаётся house.js
 * и оформляется правилами .swipe-hint ниже.
 */

/* ===== ПОСЛЕДНИЕ 10 СЕКУНД ===== */

.last-ten{
    position:absolute;
    inset:0;
    z-index:33;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .18s ease;
}

.last-ten.show{
    opacity:1;
}

.last-ten-number{
    width:116px;
    height:116px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(7,9,10,.42);
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 10px 45px rgba(0,0,0,.30);
    backdrop-filter:blur(3px);
    color:#f4ead4;
    font-size:64px;
    font-weight:850;
    line-height:1;
    text-shadow:0 3px 18px rgba(0,0,0,.45);
}

.last-ten.pulse .last-ten-number{
    animation:countPulse .38s ease;
}

@keyframes countPulse{
    0%{
        transform:scale(.86);
        opacity:.65;
    }
    55%{
        transform:scale(1.08);
        opacity:1;
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}

/* ===== БЫСТРЫЙ ИНВЕНТАРЬ ===== */

.quick-inventory{
    position:absolute;
    left:50%;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:34;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px;
    border-radius:18px;
    background:rgba(8,10,11,.82);
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 10px 30px rgba(0,0,0,.42);
    backdrop-filter:blur(10px);
}

.inventory-slot{
    position:relative;
    width:50px;
    height:50px;
    border:0;
    border-radius:14px;
    background:#171b1d;
    color:#8f8b84;

    /*
     * Центрируем содержимое самим слотом.
     * Это одинаково работает для img и emoji-wrapper.
     */
    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    font-size:22px;
    line-height:1;
    text-align:center;

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
    touch-action:manipulation;
}

.inventory-slot .inventory-item-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    font-size:22px;
    line-height:1;
    text-align:center;

    /*
     * Убираем baseline-расчёт inline-текста.
     */
    vertical-align:middle;
}

/*
 * У Apple Color Emoji визуальный центр glyph слегка отличается
 * от математического центра текстового бокса. На iPhone это
 * особенно заметно на 🔦. Десктоп не меняем.
 */
@media (max-width:640px){
    .inventory-slot .inventory-item-icon.is-emoji{
        transform:translateX(-1px);
    }
}

.inventory-slot.item-slot img{
    display:block;
    width:34px;
    height:34px;
    margin:0;
    padding:0;
    object-fit:contain;
    vertical-align:middle;
    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
}

.inventory-slot.active{
    background:#d1b36b;
    color:#171411;
    box-shadow:
            0 0 18px rgba(209,179,107,.24),
            inset 0 0 0 1px rgba(255,255,255,.18);
}

.inventory-slot.empty{
    opacity:.30;
}

.inventory-slot:disabled{
    cursor:default;
}

/* ===== ПАНЕЛЬ ОБЪЕКТА ===== */

.bottom-panel-wrap{
    position:absolute;
    left:12px;
    right:12px;
    bottom:82px;
    z-index:35;
    pointer-events:none;
}

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:22px;
    padding:16px;
    backdrop-filter:blur(14px);
    box-shadow:0 14px 40px rgba(0,0,0,.45);
    transform:translate3d(0,calc(100% + 80px),0);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
            transform .25s ease,
            opacity .20s ease,
            visibility 0s linear .25s;
}

.panel.open{
    transform:translate3d(0,0,0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:
            transform .25s ease,
            opacity .20s ease,
            visibility 0s linear 0s;
}

.panel h2{
    margin:0 0 6px;
    font-size:20px;
}

.panel p{
    margin:0 0 14px;
    color:#c6c3bb;
    font-size:14px;
    line-height:1.4;
}

.actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.actions button{
    min-height:52px;
    border:0;
    border-radius:15px;
    background:#2a2f31;
    color:#fff;
    font-weight:700;
}

.actions button.primary{
    background:#d6b46a;
    color:#171411;
}

/* ===== ФИНАЛЬНОЕ ОКНО ===== */

.exit-overlay{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(4,6,7,.88);
    backdrop-filter:blur(5px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
}

.exit-overlay.show{
    opacity:1;
    pointer-events:auto;
}

.exit-card{
    width:min(390px,100%);
    padding:26px 22px 22px;
    border-radius:24px;
    background:var(--panel);
    border:1px solid var(--border);
    box-shadow:0 20px 70px rgba(0,0,0,.55);
    text-align:center;
}

.exit-card h2{
    margin:0 0 8px;
    font-size:26px;
}

.exit-card p{
    margin:0 0 20px;
    color:var(--muted);
    line-height:1.45;
}

.exit-card button{
    width:100%;
    min-height:54px;
    border:0;
    border-radius:15px;
    background:var(--accent);
    color:#171411;
    font-weight:800;
}

@media (max-height:650px){
    .inventory-slot{
        width:46px;
        height:46px;
    }

    .quick-inventory{
        bottom:12px;
    }

    .bottom-panel-wrap{
        bottom:72px;
    }
}


/* ===== ПОДСКАЗКА ГОРИЗОНТАЛЬНОГО СВАЙПА ===== */

.swipe-hint{
    position:absolute;
    left:50%;
    top:50%;
    z-index:30;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;

    transform:translate(-50%,-50%);

    pointer-events:none;

    color:rgba(255,255,255,.82);

    text-shadow:
        0 2px 14px rgba(0,0,0,.9);

    opacity:1;

    transition:
        opacity .4s ease,
        transform .4s ease;
}

.swipe-hint.hide{
    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.92);
}


/* ===== ЖЕСТ ===== */

.swipe-hint-gesture{
    position:relative;

    width:180px;
    height:64px;

    display:flex;
    align-items:center;
    justify-content:center;
}


/* ===== СТРЕЛКИ ===== */

.swipe-hint-arrow{
    position:absolute;

    top:50%;

    width:20px;
    height:20px;

    margin-top:-10px;

    border-left:
        3px solid rgba(255,255,255,.78);

    border-bottom:
        3px solid rgba(255,255,255,.78);

    filter:
        drop-shadow(
            0 2px 6px rgba(0,0,0,.75)
        );
}

.swipe-hint-arrow.left{
    left:8px;

    transform:
        rotate(45deg);

    animation:
        swipeArrowLeft 1.5s ease-in-out infinite;
}

.swipe-hint-arrow.right{
    right:8px;

    transform:
        rotate(225deg);

    animation:
        swipeArrowRight 1.5s ease-in-out infinite;
}

@keyframes swipeArrowLeft{

    0%,
    100%{
        transform:
            translateX(5px)
            rotate(45deg);

        opacity:.55;
    }

    50%{
        transform:
            translateX(-5px)
            rotate(45deg);

        opacity:1;
    }
}

@keyframes swipeArrowRight{

    0%,
    100%{
        transform:
            translateX(-5px)
            rotate(225deg);

        opacity:.55;
    }

    50%{
        transform:
            translateX(5px)
            rotate(225deg);

        opacity:1;
    }
}


/* ===== ПАЛЕЦ ===== */

.swipe-hint-hand{
    position:absolute;

    left:50%;
    top:50%;

    z-index:2;

    width:22px;
    height:30px;

    margin-left:-11px;
    margin-top:-15px;

    border-radius:
        13px 13px 10px 10px;

    background:
        rgba(241,237,227,.82);

    box-shadow:
        0 2px 10px rgba(0,0,0,.35);

    pointer-events:none;

    animation:
        swipeFingerMove 1.5s ease-in-out infinite;
}

.swipe-hint-hand::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:18px;
    height:13px;

    border-radius:
        0 0 9px 9px;

    background:
        rgba(241,237,227,.82);

    transform:
        translateX(-50%);
}

@keyframes swipeFingerMove{

    0%,
    100%{
        transform:
            translateX(25px);
    }

    50%{
        transform:
            translateX(-25px);
    }
}


/* ===== ТЕКСТ ===== */

.swipe-hint-text{
    padding:8px 13px;

    border-radius:12px;

    background:
        rgba(7,9,10,.52);

    border:
        1px solid rgba(255,255,255,.10);

    backdrop-filter:
        blur(5px);

    color:
        rgba(255,255,255,.78);

    width:min(100%, calc(100vw - 28px));
    max-width:calc(100vw - 28px);
    box-sizing:border-box;

    font-size:13px;
    line-height:1.3;

    text-align:center;

    white-space:normal;
    overflow-wrap:anywhere;
}


/* ===== СТАРТОВАЯ ИНСТРУКЦИЯ ===== */

.intro-overlay{
    position:absolute;
    inset:0;
    z-index:100;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    background:rgba(4,6,7,.90);
    backdrop-filter:blur(7px);

    opacity:1;
    visibility:visible;

    transition:
        opacity .28s ease,
        visibility 0s linear 0s;
}

.intro-overlay.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility 0s linear .28s;
}

.intro-card{
    width:min(390px,100%);

    padding:26px 22px 22px;

    border-radius:24px;

    background:var(--panel);

    border:
        1px solid var(--border);

    box-shadow:
        0 20px 70px rgba(0,0,0,.58);

    text-align:center;
}

.intro-card h2{
    margin:0 0 10px;

    font-size:26px;
    line-height:1.15;
}

.intro-card p{
    margin:0 0 22px;

    color:var(--muted);

    font-size:14px;
    line-height:1.5;
}

.intro-card button{
    width:100%;
    min-height:54px;

    border:0;
    border-radius:15px;

    background:var(--accent);
    color:#171411;

    font-weight:800;

    cursor:pointer;
    touch-action:manipulation;
}

.intro-card button:active{
    transform:scale(.985);
}


/* ===== ОТКЛЮЧЕНИЕ АНИМАЦИИ ===== */

@media (prefers-reduced-motion:reduce){

    .swipe-hint-arrow.left,
    .swipe-hint-arrow.right,
    .swipe-hint-hand{
        animation:none;
    }
}


/* ==================================================
   КНОПКА «ВЫХОД»
   ================================================== */

.exit-button {
    position:absolute;
    right:14px;
    bottom:calc(10px + env(safe-area-inset-bottom));

    z-index:40;

    min-width:74px;
    min-height:62px;

    padding:7px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;

    background:rgba(8,10,11,.72);

    color:rgba(255,255,255,.72);

    backdrop-filter:blur(9px);

    box-shadow:
        0 8px 24px rgba(0,0,0,.28);

    font-size:13px;
    font-weight:700;

    cursor:pointer;
    touch-action:manipulation;
}

.exit-button:active {
    transform:scale(.96);
}


/* ==================================================
   ПОДТВЕРЖДЕНИЕ ВЫХОДА
   ================================================== */

.leave-confirm-overlay {
    position:absolute;
    inset:0;

    z-index:70;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:28px;

    background:rgba(4,6,7,.84);
    backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility 0s linear .22s;
}

.leave-confirm-overlay.show {
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .22s ease,
        visibility 0s linear 0s;
}

.leave-confirm-card {
    position:relative;

    width:min(390px,100%);

    padding:28px 22px 22px;

    border-radius:24px;

    background:var(--panel);

    border:1px solid var(--border);

    box-shadow:
        0 20px 70px rgba(0,0,0,.55);

    text-align:center;

    transform:
        translateY(12px)
        scale(.98);

    opacity:0;

    transition:
        transform .25s ease,
        opacity .22s ease;
}

.leave-confirm-overlay.show .leave-confirm-card {
    transform:
        translateY(0)
        scale(1);

    opacity:1;
}

.leave-confirm-card h2 {
    margin:0 0 22px;

    padding:0 20px;

    font-size:22px;
    line-height:1.3;
}

.item-close {
    position:absolute;

    top:10px;
    right:10px;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    padding:0;

    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;

    background:rgba(7,9,10,.55);

    color:rgba(255,255,255,.82);

    font-size:27px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
}

.leave-confirm-actions {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;
}

.leave-confirm-actions button {
    min-height:52px;

    border:0;
    border-radius:15px;

    font-weight:800;

    cursor:pointer;
    touch-action:manipulation;
}

.leave-cancel {
    background:#292e30;
    color:#ddd9d0;
}

.leave-confirm {
    background:var(--accent);
    color:#171411;
}


/* ==================================================
   ФИНАЛЬНОЕ ОКНО
   ================================================== */

.exit-overlay {
    z-index:65;
}

.exit-card p {
    margin-bottom:20px;
}

.exit-card button {
    cursor:pointer;
    touch-action:manipulation;
}


/* ======================================== */

/* component: music */
/* ======================================== */

.music-button{
    position:absolute;
    right:102px;
    top:16px;
    z-index:31;

    width:42px;
    height:34px;

    padding:0;

    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;

    background:rgba(8,10,11,.72);
    color:#ded9cc;

    backdrop-filter:blur(9px);

    box-shadow:
        0 8px 26px rgba(0,0,0,.25);

    cursor:pointer;
    font-size:18px;
}

.music-button:active{
    transform:scale(.96);
}

/* =========================================================
   МЫСЛИ ПЕРСОНАЖА
   ========================================================= */

.thought-chat{
    position:absolute;
    left:18px;
    bottom:92px;
    z-index:35;

    width:min(350px, calc(100% - 36px));

    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
}

.thought-chat-head{
    display:flex;
    align-items:center;
    gap:8px;

    margin:0 0 8px 3px;

    color:rgba(241,237,227,.62);
    font-size:10px;
    font-weight:800;
    line-height:1;
    letter-spacing:.16em;
    text-transform:uppercase;

    text-shadow:0 2px 12px rgba(0,0,0,.95);
}

.thought-chat-head::before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;

    border-radius:50%;

    background:rgba(209,179,107,.9);
    box-shadow:0 0 12px rgba(209,179,107,.3);
}

.thought-chat-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:5px;

    /*
     * Высота рассчитана примерно на две мысли.
     * Старые остаются в DOM, но постепенно растворяются
     * и уходят за верхнюю границу.
     */
    max-height:112px;
    overflow:hidden;

    padding:0 4px 2px 2px;

    /*
     * Последняя мысль всегда находится внизу.
     */
    justify-content:flex-end;

}

.thought-chat-message{
    position:relative;

    box-sizing:border-box;

    width:fit-content;
    max-width:min(100%, 340px);

    padding:8px 12px 9px 14px;

    border-radius:4px 13px 13px 13px;

    background:linear-gradient(
        135deg,
        rgba(10,12,13,.82),
        rgba(6,8,9,.60)
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 7px 20px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.035);

    color:rgba(241,237,227,.84);

    font-size:14px;
    font-weight:500;
    line-height:1.4;

    text-align:left;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;

    text-shadow:0 2px 10px rgba(0,0,0,.9);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    transform:translate3d(-6px,6px,0);

    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .45s ease;
}

.thought-chat-message::before{
    content:"";

    position:absolute;
    left:-1px;
    top:8px;
    bottom:8px;

    width:2px;

    border-radius:2px;

    background:rgba(209,179,107,.58);
}

.thought-chat-message.show{
    transform:translate3d(0,0,0);
}

/*
 * ВАЖНО:
 * Используем !important, чтобы никакие старые
 * nth-last-child правила не могли сделать свежую
 * мысль невидимой.
 */

.thought-chat-message.thought-chat-current{
    opacity:1 !important;
    filter:none;
    z-index:2;
}

.thought-chat-message.thought-chat-second{
    opacity:.48 !important;
    filter:none;
}

.thought-chat-message.thought-chat-old{
    opacity:.14 !important;
    filter:none;
}

.thought-chat-message.thought-chat-faded{
    opacity:.035 !important;
    filter:blur(.2px);
}

/* Курсор печати. */
.thought-chat-cursor{
    display:inline-block;

    width:1px;
    height:1em;

    margin-left:2px;

    vertical-align:-.12em;

    background:rgba(241,237,227,.9);

    animation:thoughtCursorBlink .72s steps(1) infinite;
}

.thought-chat-cursor.done{
    display:none;
}

@keyframes thoughtCursorBlink{
    0%,45%{ opacity:1; }
    46%,100%{ opacity:0; }
}

@media (max-width:560px){

    .thought-chat{
        left:12px;
        bottom:calc(74px + 64px + env(safe-area-inset-bottom));
        width:min(320px, calc(100% - 24px));
        max-width:calc(100vw - 24px);
    }

    .thought-chat-head{
        margin-left:2px;
        font-size:9px;
    }

    .thought-chat-list{
        max-height:104px;
    }

    .thought-chat-message{
        max-width:calc(100% - 2px);

        padding:7px 10px 8px 12px;

        font-size:12.5px;
        line-height:1.36;
    }
}

@media (prefers-reduced-motion:reduce){

    .thought-chat-message{
        transition:none;
        transform:none;
    }

    .thought-chat-cursor{
        animation:none;
        opacity:1;
    }
}

/* Служебные настройки чата никогда не видны игроку. */
.thought-chat > [data-trigger],
.thought-chat > [data-delay]{
    display:none !important;
}


/* =========================================================
   НИЗКИЕ ЭКРАНЫ / PWA
   ========================================================= */

@media (max-width:560px) and (max-height:740px){

    .thought-chat{
        bottom:calc(82px + 64px + env(safe-area-inset-bottom));
    }

    .thought-chat-list{
        max-height:92px;
    }
}



/* =========================================================
   НИЗКИЕ ЭКРАНЫ / PWA
   ========================================================= */

@media (max-width:560px) and (max-height:740px){

    .thought-chat{
        bottom:calc(82px + 64px + env(safe-area-inset-bottom));
    }

    .thought-chat-list{
        max-height:92px;
    }
}