@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    margin: 0;
    overflow: hidden;
    background-color: #222;
    font-family: 'Press Start 2P', cursive;
    user-select: none;
    touch-action: manipulation;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
    overflow: hidden;
}

#sky-parallax {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#sun-kid {
    position: absolute;
    top: 76px;
    right: 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff59d 0%, #ffe082 38%, #ffca28 72%, #ffb300 100%);
    border: 3px solid #f57f17;
    box-shadow: 0 0 18px rgba(255, 213, 79, 0.55);
    z-index: 0;
}

#sun-kid .ray {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-left: -2px;
    margin-top: -35px;
    border-radius: 3px;
    background: #ffca28;
    border: 1px solid #f9a825;
    transform-origin: 50% 35px;
}

#sun-kid .r1 { transform: rotate(0deg); }
#sun-kid .r2 { transform: rotate(45deg); }
#sun-kid .r3 { transform: rotate(90deg); }
#sun-kid .r4 { transform: rotate(135deg); }
#sun-kid .r5 { transform: rotate(180deg); }
#sun-kid .r6 { transform: rotate(225deg); }
#sun-kid .r7 { transform: rotate(270deg); }
#sun-kid .r8 { transform: rotate(315deg); }

#cloud-band {
    position: absolute;
    top: 132px;
    left: -140px;
    width: calc(100% + 280px);
    height: 28px;
    z-index: 1;
    display: block;
    animation: cloud-band-drift 56s linear infinite;
}

.band-cloud {
    position: absolute;
    width: 74px;
    height: 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.band-cloud::before,
.band-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.band-cloud::before {
    width: 22px;
    height: 16px;
    left: 8px;
    top: -9px;
}

.band-cloud::after {
    width: 28px;
    height: 20px;
    left: 30px;
    top: -11px;
}

.b1 { left: 4%; top: 4px; transform: scale(0.86); }
.b2 { left: 19%; top: 0; transform: scale(1.02); }
.b3 { left: 37%; top: 5px; transform: scale(0.92); }
.b4 { left: 58%; top: 1px; transform: scale(1.08); }
.b5 { left: 76%; top: 6px; transform: scale(0.88); }
.b6 { left: 92%; top: 2px; transform: scale(1.01); }

@keyframes cloud-band-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-150px); }
}

#forest-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    z-index: 1;
    background:
        radial-gradient(26px 14px at 10% 78%, rgba(21, 127, 50, 0.35) 0 60%, transparent 62%),
        radial-gradient(22px 12px at 26% 72%, rgba(29, 140, 56, 0.33) 0 60%, transparent 62%),
        radial-gradient(28px 15px at 44% 82%, rgba(20, 120, 46, 0.34) 0 60%, transparent 62%),
        radial-gradient(22px 12px at 60% 74%, rgba(30, 146, 60, 0.32) 0 60%, transparent 62%),
        radial-gradient(24px 13px at 78% 80%, rgba(19, 118, 44, 0.34) 0 60%, transparent 62%),
        radial-gradient(26px 14px at 92% 73%, rgba(26, 137, 52, 0.34) 0 60%, transparent 62%),
        radial-gradient(10px 6px at 12% 72%, #7a8d7e 0 45%, transparent 47%),
        radial-gradient(9px 5px at 26% 84%, #8a9f90 0 45%, transparent 47%),
        radial-gradient(11px 6px at 38% 70%, #6f8373 0 45%, transparent 47%),
        radial-gradient(10px 6px at 53% 82%, #839888 0 45%, transparent 47%),
        radial-gradient(8px 5px at 66% 74%, #768b7b 0 45%, transparent 47%),
        radial-gradient(10px 6px at 79% 86%, #879d8d 0 45%, transparent 47%),
        radial-gradient(9px 5px at 91% 73%, #708574 0 45%, transparent 47%),
        linear-gradient(to top, #219542 0%, #2cb84d 55%, #35c557 100%);
}

#forest-ground::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 20px;
    background:
        radial-gradient(10px 10px at 5px 13px, #2cb84d 98%, transparent 100%) 0 0 / 24px 20px repeat-x,
        radial-gradient(10px 10px at 17px 12px, #23953d 98%, transparent 100%) 0 0 / 24px 20px repeat-x;
}

#forest-ground::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 4% 12%, rgba(14, 75, 28, 0.28) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 11% 28%, rgba(14, 75, 28, 0.24) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 18% 52%, rgba(14, 75, 28, 0.26) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 27% 40%, rgba(14, 75, 28, 0.24) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 36% 62%, rgba(14, 75, 28, 0.26) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 48% 24%, rgba(14, 75, 28, 0.24) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 56% 48%, rgba(14, 75, 28, 0.26) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 68% 36%, rgba(14, 75, 28, 0.24) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 76% 66%, rgba(14, 75, 28, 0.24) 0 95%, transparent 100%),
        radial-gradient(1px 1px at 88% 30%, rgba(14, 75, 28, 0.26) 0 95%, transparent 100%),
        radial-gradient(2px 2px at 16% 46%, rgba(16, 82, 32, 0.22) 0 95%, transparent 100%),
        radial-gradient(2px 2px at 31% 66%, rgba(16, 82, 32, 0.2) 0 95%, transparent 100%),
        radial-gradient(2px 2px at 48% 54%, rgba(16, 82, 32, 0.2) 0 95%, transparent 100%),
        radial-gradient(2px 2px at 63% 76%, rgba(16, 82, 32, 0.22) 0 95%, transparent 100%),
        radial-gradient(2px 2px at 82% 58%, rgba(16, 82, 32, 0.2) 0 95%, transparent 100%);
    pointer-events: none;
}

.trunk {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    background-color: #5d4037;
    border-left: 8px solid #4e342e;
    border-right: 8px solid #4e342e;
    z-index: 3;
}

#tree-base {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    width: 112px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, #7a564a 0%, #5d4037 55%, #3e2723 100%);
    border: 3px solid #3e2723;
    z-index: 2;
}

#tree-base::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    width: 72px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

#world {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 54px;
    overflow: hidden;
    z-index: 3;
}

.branch {
    position: absolute;
    height: 40px;
    width: 120px;
    background: none;
    z-index: 5;
}

.branch.left {
    right: 100%;
    margin-right: -10px;
}

.branch.right {
    left: 100%;
    margin-left: -10px;
}

.branch-cut-fx {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    right: auto;
    pointer-events: none;
    z-index: 15;
    transform-origin: center;
}

.branch-cut-fx.left {
    animation: branch-detach-left 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.branch-cut-fx.right {
    animation: branch-detach-right 300ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes branch-detach-left {
    from {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-60px, 55px) rotate(-38deg) scale(0.85);
    }
}

@keyframes branch-detach-right {
    from {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(60px, 55px) rotate(38deg) scale(0.85);
    }
}

#lumberjack {
    position: absolute;
    bottom: 86px;
    width: 78px;
    height: 96px;
    transition: left 0.05s ease-out;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lumberjack svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#lumberjack.swing-main .axe-main {
    transform-origin: 53px 53px;
    animation: axe-chop 120ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

#lumberjack.swing-main .arm-main {
    transform-origin: 42px 53px;
    animation: arm-chop 120ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

#lumberjack.swing-off .axe-off {
    transform-origin: 12px 53px;
    animation: axe-chop-off 120ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

#lumberjack.swing-off .arm-off {
    transform-origin: 10px 53px;
    animation: arm-chop-off 120ms cubic-bezier(0.18, 0.82, 0.28, 1);
}

@keyframes axe-chop {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }
    45% {
        transform: rotate(-48deg) translate(4px, -2px);
    }
    70% {
        transform: rotate(-14deg) translate(2px, 0);
    }
    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

@keyframes arm-chop {
    0% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(-18deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes axe-chop-off {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }
    45% {
        transform: rotate(48deg) translate(-4px, -2px);
    }
    70% {
        transform: rotate(14deg) translate(-2px, 0);
    }
    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}

@keyframes arm-chop-off {
    0% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(18deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.side-left { left: calc(50% - 110px); }
.side-right { left: calc(50% + 50px); }

#timer-bar-container {
    position: absolute;
    top: 26px;
    left: 14px;
    width: 200px;
    height: 20px;
    background: rgba(0,0,0,0.3);
    border: 3px solid #fff;
    z-index: 30;
}

#arcade-label {
    position: absolute;
    top: 6px;
    left: 14px;
    color: #ffffff;
    font-size: 10px;
    text-shadow: 2px 2px 0 #000;
    z-index: 31;
}

#progress-ui {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 180px;
    z-index: 30;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #fff;
    padding: 8px;
}

@media (max-width: 560px) {
    #timer-bar-container {
        top: 32px;
        left: 10px;
        width: 54vw;
        max-width: 210px;
    }

    #arcade-label {
        top: 10px;
        left: 10px;
        font-size: 9px;
    }

    #progress-ui {
        top: 10px;
        right: 10px;
        width: 38vw;
        min-width: 132px;
        max-width: 176px;
        padding: 6px;
    }

    #level-label {
        font-size: 8px;
    }

    #exp-bar-container {
        height: 10px;
    }
}

#level-label {
    color: #fff;
    font-size: 10px;
    margin-bottom: 6px;
    text-align: right;
    text-shadow: 2px 2px 0 #000;
}

#exp-bar-container {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid #fff;
}

#exp-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #ffd54f 0%, #ffa000 100%);
}

#timer-bar {
    width: 100%;
    height: 100%;
    background: #ff5252;
}


#score {
    position: absolute;
    top: 80px;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px 0px #000;
    z-index: 20;
}

#overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 100;
    text-align: center;
    padding: 20px;
}

.status-help {
    font-size: 10px;
    margin-top: 15px;
    line-height: 1.5;
}

.btn {
    margin-top: 20px;
    padding: 15px 30px;
    background: #4caf50;
    border: none;
    color: white;
    font-family: 'Press Start 2P', cursive;
    cursor: pointer;
    box-shadow: 0 5px 0 #2e7d32;
}

.menu-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.btn-alt {
    background: #1976d2;
    box-shadow: 0 5px 0 #0d47a1;
}

.btn-alt:active {
    box-shadow: 0 2px 0 #0d47a1;
}

.btn-back {
    background: #6d4c41;
    box-shadow: 0 5px 0 #4e342e;
}

.btn-back:active {
    box-shadow: 0 2px 0 #4e342e;
}

.btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #2e7d32;
}

.chip {
    position: absolute;
    width: 20px;
    height: 10px;
    background: #795548;
    pointer-events: none;
}

.slash-fx {
    position: absolute;
    width: 65px;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0) 100%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 1);
    pointer-events: none;
    z-index: 40;
}

.slash-fx.left {
    animation: slash-left 150ms ease-out forwards;
}

.slash-fx.right {
    animation: slash-right 150ms ease-out forwards;
}

.slash-fx.flat {
    animation: slash-flat 140ms ease-out forwards;
}

@keyframes slash-left {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(24deg) scaleX(0.6);
    }
    30% {
        opacity: 1;
        transform: translate(-6px, -1px) rotate(24deg) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate(-16px, 2px) rotate(24deg) scaleX(1.12);
    }
}

@keyframes slash-right {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-24deg) scaleX(0.6);
    }
    30% {
        opacity: 1;
        transform: translate(6px, -1px) rotate(-24deg) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate(16px, 2px) rotate(-24deg) scaleX(1.12);
    }
}

@keyframes slash-flat {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(0deg) scaleX(0.6);
    }
    35% {
        opacity: 1;
        transform: translate(0, -1px) rotate(0deg) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 1px) rotate(0deg) scaleX(1.12);
    }
}