/* ============ ЧУКАЙ.МЕ — knock-on-a-door simulator ============ */

:root {
    --wood-1: #7b4a24;
    --wood-2: #5e3418;
    --wood-3: #8a5a2f;
    --brass: #d8b24a;
    --wall-1: #b7a07a;
    --wall-2: #9c8560;
    --floor: 20vh;   /* height of the floor band, anchored to the bottom of the screen */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Comic Sans MS', 'Segoe UI', system-ui, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    cursor: none;
    touch-action: none;
}

#game {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;             /* track the *visible* viewport on mobile (no dead space) */
    display: flex;
    align-items: flex-end;      /* door stands on the floor line */
    justify-content: center;
    overflow: hidden;
    cursor: none;
}

/* ---------- Wall ---------- */
.wall {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 10%, rgba(255, 236, 190, .35), transparent 60%),
        repeating-linear-gradient(90deg, var(--wall-1) 0 46px, var(--wall-2) 46px 48px),
        linear-gradient(180deg, var(--wall-1), var(--wall-2));
    box-shadow: inset 0 0 220px rgba(0, 0, 0, .55);
}
.wall-lamp {
    position: absolute;
    top: 0; left: 50%;
    width: 220px; height: 200px;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 20%, rgba(255, 220, 140, .85), rgba(255, 210, 120, 0) 62%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 0;
}
/* Framed picture on the wall, at the door's vertical level */
.picture {
    position: absolute;
    top: 42%; left: 8%;
    font-size: clamp(40px, 6vw, 72px);
    transform: rotate(-6deg);
    filter: drop-shadow(3px 6px 6px rgba(0, 0, 0, .4));
    animation: sway 6s ease-in-out infinite;
    z-index: 1;
}
@keyframes sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-2deg); } }

/* ---------- Floor: solid band locked to the very bottom ---------- */
.floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--floor);
    z-index: 1;
    background: linear-gradient(180deg, #5a3d24 0%, #3a2612 100%);
    overflow: hidden;
    box-shadow: inset 0 8px 16px rgba(0, 0, 0, .35);
}
/* perspective floorboards, kept inside the band */
.floor::before {
    content: '';
    position: absolute;
    left: -60%; right: -60%; bottom: 0; top: -80%;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 5%);
    transform: perspective(240px) rotateX(58deg);
    transform-origin: bottom center;
}
/* skirting board at the wall/floor junction */
.baseboard {
    position: absolute;
    left: 0; right: 0; bottom: var(--floor);
    height: 16px;
    background: linear-gradient(180deg, #d8cbb0, #b39c78);
    box-shadow: 0 4px 6px rgba(0, 0, 0, .35);
    z-index: 2;
}

/* ---------- Door (stands on the floor, horizontally centered) ---------- */
.scene {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;        /* keep the frame sized to the door (no stretch) */
    margin-bottom: var(--floor); /* base sits exactly on the wall/floor junction */
}

.doorframe {
    position: relative;
    padding: 14px;
    border-radius: 14px 14px 4px 4px;
    background: linear-gradient(180deg, #caa46a, #a9824c);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .12);
}

/* interior behind the door */
.doorway {
    position: absolute;
    inset: 14px;
    border-radius: 8px 8px 2px 2px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 35%, #4a3526, #160d08 75%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .8);
    z-index: 0;
}
.doorway .baba {
    position: absolute;
    left: 50%; bottom: 0;
    width: 78%;
    transform: translateX(-50%) translateY(8%);
    opacity: 0;
    transition: opacity .3s, transform .4s;
}
.doorway.reveal .baba { opacity: 1; transform: translateX(-50%) translateY(0); }
.doorway.reveal .baba svg { animation: babarage .18s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes babarage {
    0%, 100% { transform: rotate(-1.5deg) translateY(0); }
    50% { transform: rotate(1.5deg) translateY(-3px); }
}

.door {
    position: relative;
    z-index: 1;
    width: clamp(210px, 26vw, 320px);
    height: clamp(320px, 58vh, 520px);
    border-radius: 8px 8px 2px 2px;
    background: linear-gradient(180deg, var(--wood-3), var(--wood-1) 40%, var(--wood-2));
    box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .18), inset 0 0 60px rgba(0, 0, 0, .35);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.5, 0, .3, 1), filter .3s;
    backface-visibility: hidden;
}
.door.angry { filter: saturate(1.4) hue-rotate(-10deg) brightness(1.02); }
.door.open  { transform: perspective(1500px) rotateY(-112deg); }

.panel {
    position: absolute;
    width: 38%; height: 30%;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .06));
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .22), inset 3px 3px 8px rgba(0, 0, 0, .35);
}
.panel.tl { top: 8%; left: 12%; }
.panel.tr { top: 8%; right: 12%; }
.panel.bl { bottom: 18%; left: 12%; height: 34%; }
.panel.br { bottom: 18%; right: 12%; height: 34%; }

.peephole {
    position: absolute;
    top: 28%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #f4e7c8, #7a6a45);
    box-shadow: 0 0 0 4px #3a2a14, inset 0 0 6px rgba(0, 0, 0, .6);
    display: flex; align-items: center; justify-content: center;
}
.eye {
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .25s;
}
.door.watching .eye { opacity: 1; }
.pupil {
    width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #4a3, #061);
    transition: transform .06s linear;
}
.mailslot {
    position: absolute;
    top: 58%; left: 50%;
    transform: translateX(-50%);
    width: 46%; height: 24px;
    line-height: 24px;
    font-size: 11px; letter-spacing: 2px; text-align: center;
    color: rgba(255, 255, 255, .55);
    background: linear-gradient(180deg, #2a1c0e, #4a3018);
    border-radius: 4px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .12);
}
.number {
    position: absolute;
    top: 1.5%; left: 50%;
    transform: translateX(-50%);
    font-weight: bold; font-size: 26px;
    color: var(--brass);
    text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
}
.handle {
    position: absolute;
    top: 46%; right: 10%;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a0, var(--brass) 60%, #8a6a1e);
    box-shadow: 0 3px 5px rgba(0, 0, 0, .5), 0 0 0 4px rgba(0, 0, 0, .15);
}
.doorbell {
    position: absolute;
    top: 46%; right: -34px;
    transform: translateY(-50%);
    width: 30px; height: 46px;
    border: none; border-radius: 8px;
    background: linear-gradient(180deg, #efe6cf, #c9b89a);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
    cursor: none;
    display: flex; align-items: center; justify-content: center;
    padding: 0; z-index: 2;
}
.bell-btn {
    width: 16px; height: 16px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff7cf, #d99d2a 60%, #a06a12);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4);
    transition: transform .08s;
}
.doorbell:active .bell-btn { transform: scale(.8); }

.mat {
    position: absolute;
    top: 100%; left: 50%;
    margin-top: 4px;
    width: clamp(240px, 32vw, 380px);
    height: 52px; line-height: 52px;
    text-align: center; letter-spacing: 3px;
    font-weight: bold; color: #3a2a14;
    background: repeating-linear-gradient(45deg, #b98c4f 0 8px, #a97c3f 8px 16px);
    border: 4px solid #7a5628;
    border-radius: 6px;
    /* lie flat on the floor just past the threshold */
    transform: translateX(-50%) perspective(300px) rotateX(60deg);
    transform-origin: center top;
    box-shadow: 0 18px 24px rgba(0, 0, 0, .5);
    z-index: 3;
}

/* ---------- First-person arm + fist (2-bone IK, drawn in JS) ---------- */
#armSvg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(6px 12px 9px rgba(0, 0, 0, .4));
}

/* impact "ТУК!" bursts */
.impact {
    position: fixed; z-index: 900;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    font-weight: bold; font-size: clamp(24px, 4vw, 42px);
    color: #fff; -webkit-text-stroke: 3px #111;
    pointer-events: none;
    animation: pop .5s ease-out forwards;
}
@keyframes pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.3); }
    30%  { opacity: 1; transform: translate(-50%, -70%) rotate(var(--r)) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -120%) rotate(var(--r)) scale(1); }
}
.ring {
    position: fixed; z-index: 890;
    width: 20px; height: 20px;
    border: 4px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: ring .45s ease-out forwards;
}
@keyframes ring { 0% { opacity: .9; width: 10px; height: 10px; } 100% { opacity: 0; width: 120px; height: 120px; } }

/* flying slipper (toward camera) + splat */
.shoe {
    position: fixed; z-index: 1200;
    left: 0; top: 0;
    font-size: 60px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, .55));
}
.splat {
    position: fixed; inset: 0; z-index: 2400;
    display: flex; align-items: center; justify-content: center;
    font-size: 60vmin;
    pointer-events: none;
    animation: splat .7s ease-out forwards;
    text-shadow: 0 20px 40px rgba(0, 0, 0, .6);
}
@keyframes splat {
    0%   { opacity: 0; transform: scale(.2) rotate(-20deg); }
    18%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
    40%  { transform: scale(1.05) rotate(-3deg); }
    100% { opacity: 0; transform: scale(1.15) rotate(0deg); }
}

/* shakes */
#game.shake { animation: shake .4s; }
@keyframes shake {
    0%,100% { transform: translate(0, 0); }
    15% { transform: translate(-12px, 8px) rotate(-.5deg); }
    35% { transform: translate(13px, -7px) rotate(.5deg); }
    55% { transform: translate(-9px, -6px); }
    75% { transform: translate(8px, 7px); }
}
.door.shakeDoor { animation: dshake .18s; }
@keyframes dshake {
    0%,100% { transform: translate(0, 0); }
    30% { transform: translate(-3px, 1px) rotate(-.5deg); }
    70% { transform: translate(3px, -1px) rotate(.5deg); }
}

/* ---------- HUD ---------- */
.hud {
    position: fixed;
    top: 14px; left: 0; right: 0;
    display: flex; justify-content: space-between;
    padding: 0 18px;
    z-index: 800; pointer-events: none;
    color: #fff; text-shadow: 2px 2px 0 #000;
}
.counter { font-size: clamp(16px, 2.4vw, 24px); }
.counter b { color: #ffd94a; font-size: 1.25em; }
.rage { text-align: right; font-size: clamp(13px, 1.8vw, 17px); }
.rage-bar {
    width: clamp(120px, 20vw, 200px);
    height: 16px; margin-top: 4px;
    border: 3px solid #000; border-radius: 10px;
    background: #3a1010; overflow: hidden;
}
.rage-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #ffcf3a, #ff7a2a 60%, #e01f1f);
    transition: width .2s ease-out;
}

/* ---------- Start hint ---------- */
.hint {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
    transition: opacity .35s;
}
.hint.gone { opacity: 0; pointer-events: none; }
.hint-card {
    text-align: center; color: #fff;
    padding: 26px 34px;
    border: 5px solid #fff; border-radius: 20px;
    background: rgba(20, 10, 30, .7);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.hint-card h1 {
    margin: 0 0 10px;
    font-size: clamp(38px, 8vw, 68px);
    color: #ffd94a;
    text-shadow: 4px 4px 0 #b12a2a;
    letter-spacing: 2px;
    animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.hint-card p { margin: 6px 0; font-size: clamp(15px, 2.6vw, 20px); }
.hint-card .small { opacity: .75; font-size: clamp(12px, 2vw, 16px); }
.hint-card .press {
    margin-top: 16px; font-weight: bold; color: #7dff8a;
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* ================= Tasks / achievements ================= */
.ach-badge {
    pointer-events: auto;
    cursor: pointer;
    font-size: clamp(15px, 2.2vw, 22px);
    background: rgba(0, 0, 0, .35);
    padding: 3px 14px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, .5);
    align-self: flex-start;
}
.ach-badge b { color: #ffd94a; }

.ach-panel {
    position: fixed;
    top: 52px; left: 50%;
    transform: translateX(-50%);
    width: min(300px, 86vw);
    max-height: 62vh; overflow-y: auto;
    background: rgba(22, 12, 30, .96);
    border: 3px solid #ffd94a;
    border-radius: 14px;
    padding: 12px 16px;
    color: #fff;
    z-index: 1500;
    display: none;
    box-shadow: 0 14px 44px rgba(0, 0, 0, .65);
}
.ach-panel.open { display: block; }
.ach-panel h3 { margin: 0 0 8px; color: #ffd94a; text-align: center; }
.ach-panel .ach-sub { text-align: center; opacity: .7; font-size: 13px; margin-bottom: 8px; }
.ach-item { padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; }
.ach-item.locked { opacity: .55; font-style: italic; }

/* completion toast */
.toast {
    position: fixed;
    top: -140px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffe27a, #ff9d2a);
    color: #201018;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 16px;
    border: 3px solid #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
    z-index: 3000;
    transition: top .45s cubic-bezier(.3, 1.5, .5, 1);
    text-align: center;
    max-width: 86vw;
}
.toast.show { top: 18px; }
.toast .t-label { font-size: 11px; letter-spacing: 2px; opacity: .8; display: block; }
.toast .t-name { font-size: clamp(16px, 3.2vw, 21px); }

/* confetti / stars particles */
.confetti, .starfx {
    position: fixed; z-index: 2600; pointer-events: none;
    will-change: transform, opacity;
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .3));
}

/* painting falls */
.picture.fell { animation: pictureFall 1.15s forwards cubic-bezier(.5, 0, .8, 1); z-index: 500; }
@keyframes pictureFall {
    0%   { transform: rotate(-6deg); }
    18%  { transform: rotate(-34deg) translateY(6px); }
    100% { transform: rotate(-150deg) translateY(120vh); opacity: .85; }
}

/* poked peephole eye */
.eye.poked { background: #fff; }
.eye.poked .pupil { display: none; }
.eye.poked::after {
    content: '✖'; color: #c0392b; font-weight: bold;
    font-size: 20px; line-height: 1;
}

/* punched babushka flash */
.baba.punched svg { filter: brightness(1.5) saturate(2.2) hue-rotate(-8deg); }

/* easter-egg critters */
.critter {
    position: fixed; z-index: 780; pointer-events: none;
    font-size: clamp(36px, 6vw, 54px);
    transition: transform .6s ease;
    filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, .4));
}
.critter.cat    { left: 14px; bottom: calc(var(--floor) + 2px); transform: translateX(-150%) rotate(-8deg); }
.critter.cat.in { transform: translateX(0) rotate(-8deg); }
.critter.spider { left: 50%; top: 0; transform: translate(-50%, -160%); transition: transform .8s ease; }
.critter.spider.in { transform: translate(-50%, 42vh); }   /* drops well down from the ceiling */
/* thread runs from the very top of the screen down to the spider (always reaches the ceiling) */
.critter.spider::before {
    content: ''; position: absolute; left: 50%; bottom: 100%;
    width: 2px; height: 100vh; transform: translateX(-50%);
    background: rgba(0, 0, 0, .4);
}

/* ================= Mobile ================= */
@media (max-width: 640px), (pointer: coarse) {
    /* a bit shorter floor so the centered door has breathing room above (lamp)
       and its base sits close to the floor line. */
    :root { --floor: 18vh; }
    .wall-lamp { top: 0; width: 170px; height: 160px; }
    .picture { top: 38%; left: 3%; font-size: clamp(30px, 8vw, 48px); }

    .ach-panel { top: 60px; }
    .hud { top: 8px; padding: 0 10px; }
    .rage-bar { width: 90px; }
    /* bigger tap target for the doorbell on touch screens */
    .doorbell { width: 40px; height: 58px; right: -42px; }
    /* lighter paint on touch devices (perf) */
    .confetti, .starfx, .impact { filter: none; }
}