* {
    box-sizing: border-box;
}

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

body {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    background:
        linear-gradient(180deg, rgba(40, 23, 12, 0.12), rgba(40, 23, 12, 0.34)),
        url("images/cozy-room-background.jpg") center / cover no-repeat,
        #9a7250;
    color: #f7ead7;
    cursor: pointer;
}

button,
input,
select {
    font: inherit;
}

button {
    border: 1px solid rgba(255, 232, 195, 0.46);
    border-radius: 8px;
    background: rgba(35, 20, 12, 0.78);
    color: #fff7ea;
    cursor: pointer;
    min-height: 44px;
    padding: 0 18px;
    box-shadow: 0 10px 28px rgba(38, 22, 10, 0.28);
}

button:hover:not(:disabled) {
    background: rgba(57, 34, 19, 0.9);
}

button:disabled {
    cursor: default;
    opacity: 0.45;
}

#stage,
#forPuzzle {
    position: fixed;
    inset: 0;
}

#stage {
    --frame-width: min(82vw, 620px, calc((100vh - 128px) * 0.8));
    overflow: hidden;
}

#stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 232, 190, 0.16), transparent 32%),
        linear-gradient(90deg, rgba(24, 14, 8, 0.22), transparent 28%, transparent 72%, rgba(24, 14, 8, 0.24));
    pointer-events: none;
    z-index: 0;
}

#frameBackdrop {
    position: absolute;
    left: 50%;
    top: 46%;
    width: var(--frame-width);
    aspect-ratio: 4 / 5;
    transform: translate(-50%, -50%);
    border: clamp(14px, 2vw, 26px) solid transparent;
    border-image: linear-gradient(135deg, #6f3f21, #c28a4b 24%, #5a2f19 52%, #d0a161 75%, #3a2115) 1;
    background:
        linear-gradient(135deg, rgba(255, 238, 190, 0.32), rgba(70, 34, 16, 0.24)),
        rgba(82, 46, 27, 0.3);
    box-shadow:
        0 34px 72px rgba(34, 18, 10, 0.52),
        inset 0 0 0 1px rgba(255, 236, 182, 0.48),
        inset 0 0 34px rgba(35, 18, 9, 0.66);
    pointer-events: none;
    z-index: 1;
}

#frameBackdrop::before {
    content: "";
    position: absolute;
    inset: clamp(5px, 0.8vw, 11px);
    border: 1px solid rgba(255, 229, 174, 0.62);
    box-shadow:
        inset 0 0 28px rgba(31, 15, 8, 0.6),
        0 0 0 1px rgba(70, 33, 14, 0.45);
}

#pieceQueueGuide {
    position: absolute;
    left: 18px;
    top: 72px;
    bottom: 112px;
    width: min(26vw, 320px);
    min-width: 190px;
    border-radius: 18px;
    background: transparent;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
}

#fireplace {
    position: absolute;
    right: clamp(16px, 4vw, 70px);
    top: 57%;
    width: clamp(128px, 13vw, 190px);
    aspect-ratio: 1.18 / 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.96);
    transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
    z-index: 1;
}

body.playing #fireplace {
    opacity: 1;
}

#fireplace.burn-ready {
    filter: drop-shadow(0 0 22px rgba(255, 196, 96, 0.72));
    transform: translateY(-50%) scale(1.04);
}

#fireplace.burning {
    filter:
        drop-shadow(0 0 18px rgba(255, 213, 107, 0.9))
        drop-shadow(0 0 38px rgba(255, 111, 34, 0.54));
}

#fireplace.burning .flames {
    animation-duration: 220ms;
    transform: translateX(-50%) scale(1.18);
}

#fireplace.burning .fire-glow {
    animation: fire-pulse 360ms ease-in-out infinite alternate;
}

.fire-glow {
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 20%;
    height: 42%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 64%, rgba(255, 203, 91, 0.62), rgba(204, 64, 25, 0.34) 40%, transparent 72%);
    filter: blur(8px);
    z-index: 3;
}

.flames {
    position: absolute;
    left: 50%;
    bottom: 25%;
    width: 34%;
    height: 46%;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    animation: fire-flicker 560ms ease-in-out infinite alternate;
    z-index: 4;
}

.flame {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    border-radius: 72% 12% 72% 34%;
    transform: translateX(-50%) rotate(45deg);
}

.flame-large {
    width: 48%;
    height: 74%;
    background: linear-gradient(135deg, #ffe28c 12%, #ff8f2e 48%, #9f2518 88%);
}

.flame-mid {
    left: 34%;
    width: 32%;
    height: 54%;
    background: linear-gradient(135deg, #fff0b5 8%, #ffba3f 48%, #cf421e 88%);
    animation: fire-side 420ms ease-in-out infinite alternate;
}

.flame-small {
    left: 68%;
    width: 28%;
    height: 46%;
    background: linear-gradient(135deg, #fff7cf 10%, #ffc95a 52%, #d64a24 90%);
    animation: fire-side 360ms ease-in-out infinite alternate-reverse;
}

.fire-mantel {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 5%;
    height: 14%;
    border-radius: 6px 6px 3px 3px;
    background:
        linear-gradient(180deg, rgba(255, 225, 170, 0.25), transparent 55%),
        linear-gradient(90deg, #54321f, #a06a3f 28%, #d3a66d 52%, #6b3d25 82%, #321d13);
    border: 1px solid rgba(255, 230, 176, 0.32);
    box-shadow: 0 12px 22px rgba(34, 17, 8, 0.34);
    z-index: 5;
}

.fire-surround {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 16%;
    bottom: 14%;
    border-radius: 10px 10px 5px 5px;
    background:
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(61, 29, 17, 0.42) 18px 20px),
        repeating-linear-gradient(90deg, transparent 0 32px, rgba(61, 29, 17, 0.38) 32px 34px),
        linear-gradient(135deg, #8f5231, #bf7b48 45%, #6e3c23);
    border: 1px solid rgba(255, 216, 154, 0.38);
    box-shadow:
        inset 0 0 22px rgba(38, 17, 9, 0.42),
        0 18px 30px rgba(35, 17, 9, 0.38);
    z-index: 1;
}

.firebox {
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 13%;
    height: 62%;
    border-radius: 42% 42% 6px 6px / 30% 30% 6px 6px;
    background:
        radial-gradient(circle at 50% 78%, rgba(255, 143, 44, 0.3), transparent 38%),
        linear-gradient(180deg, #1b100c, #070504);
    border: 2px solid rgba(53, 25, 14, 0.9);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.78);
    z-index: 2;
}

.fire-logs {
    position: absolute;
    left: 34%;
    right: 34%;
    bottom: 19%;
    height: 12%;
    border-radius: 999px;
    background:
        linear-gradient(12deg, transparent 0 28%, #4a2413 28% 68%, transparent 68%),
        linear-gradient(-13deg, transparent 0 25%, #6d371c 25% 70%, transparent 70%);
    box-shadow: 0 4px 8px rgba(8, 4, 2, 0.42);
    z-index: 3;
}

.fire-base {
    position: absolute;
    left: 3%;
    right: 3%;
    bottom: 3%;
    height: 15%;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(255, 221, 160, 0.14), transparent 44%),
        linear-gradient(90deg, #4a2b1b, #9d6538 30%, #d2a06a 52%, #653820 78%, #2b180f);
    border: 1px solid rgba(255, 219, 149, 0.28);
    box-shadow: 0 10px 24px rgba(33, 16, 8, 0.36);
    z-index: 5;
}

@keyframes fire-flicker {
    from {
        transform: translateX(-50%) scaleX(0.95) scaleY(0.98) rotate(-1deg);
    }
    to {
        transform: translateX(-50%) scaleX(1.04) scaleY(1.06) rotate(2deg);
    }
}

@keyframes fire-side {
    from {
        transform: translateX(-50%) rotate(38deg) scaleY(0.92);
    }
    to {
        transform: translateX(-50%) rotate(50deg) scaleY(1.08);
    }
}

@keyframes fire-pulse {
    from {
        opacity: 0.74;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1.26);
    }
}

#forPuzzle {
    z-index: 2;
    background: transparent;
    overflow: hidden;
    touch-action: none;
}

#forPuzzle canvas,
#forPuzzle img,
.showimage {
    z-index: 2;
}

#menu {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 10;
    transform: translateX(-50%);
}

#controls,
.hidden-controls {
    display: none;
}

#menu.hidden #showhide {
    display: none;
}

.primary-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 232, 195, 0.3);
    border-radius: 10px;
    background: rgba(52, 31, 18, 0.62);
    backdrop-filter: blur(10px);
}

#start {
    background: #f0b35e;
    border-color: #ffda91;
    color: #241408;
    font-weight: 700;
}

#start:hover:not(:disabled) {
    background: #ffc476;
}

.showimage {
    position: absolute;
    inset: 0;
    display: none;
    background-color: rgba(79, 48, 28, 0.62);
}

.showimage img {
    display: block;
    position: absolute;
    object-fit: contain;
}

.moving {
    transition-property: top, left, width, height;
    transition-duration: 1s;
}

dialog {
    max-width: min(460px, calc(100vw - 32px));
    border: 1px solid rgba(255, 232, 195, 0.4);
    background: #2c1a10;
    color: #fff7ea;
}

@media (max-width: 760px) {
    #stage {
        --frame-width: min(94vw, calc((100vh - 128px) * 0.8));
    }

    #frameBackdrop {
        top: 43%;
    }

    #pieceQueueGuide {
        left: 10px;
        top: 74px;
        bottom: 116px;
        width: clamp(78px, 20vw, 150px);
        min-width: 0;
        border-radius: 14px;
    }

    #fireplace {
        left: auto;
        right: 12px;
        top: auto;
        bottom: 122px;
        width: clamp(64px, 16vw, 82px);
        transform: scale(0.96);
    }

    #fireplace.burn-ready {
        transform: scale(1.04);
    }

    .primary-controls {
        width: calc(100vw - 28px);
    }

    .primary-controls button {
        flex: 1 1 0;
        padding: 0 10px;
    }
}

@media (min-width: 561px) and (max-width: 760px) {
    #fireplace {
        right: clamp(16px, 4vw, 70px);
        top: 55%;
        bottom: auto;
        width: clamp(78px, 10vw, 104px);
        transform: translateY(-50%) scale(0.96);
    }

    #fireplace.burn-ready {
        transform: translateY(-50%) scale(1.04);
    }
}