* {
    box-sizing: border-box;
}

:root {
    --bg: #07070c;
    --card: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.14);
    --yellow: #ffd029;
    --orange: #ff7a18;
    --pink: #ff2f80;
    --green: #26ff78;
    --text: #ffffff;
    --muted: rgba(255, 255, 255, 0.72);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 47, 128, 0.28), transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(255, 208, 41, 0.18), transparent 30%),
        linear-gradient(135deg, #07070c, #170924 55%, #07070c);
    overflow-x: hidden;
}

.bg-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .55;
}

.bg-glow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: .38;
}

.glow-one {
    background: var(--pink);
    top: 8%;
    left: 5%;
}

.glow-two {
    background: var(--yellow);
    right: 4%;
    top: 0;
}

.app {
    position: relative;
    width: min(1220px, 94vw);
    min-height: 100vh;
    margin: 0 auto;
    padding: 34px 0;
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 24px;
    align-items: start;
}

.left-panel,
.right-panel {
    border: 1px solid var(--border);
    background: var(--card);
    backdrop-filter: blur(16px);
    border-radius: 30px;
    padding: 28px;
    box-shadow: 0 25px 80px rgba(0,0,0,.38);
}

.top-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.28);
    color: var(--yellow);
    font-weight: 900;
    letter-spacing: 1px;
}

.live-dot {
    width: 10px;
    height: 10px;
    background: #ff3333;
    border-radius: 50%;
    box-shadow: 0 0 18px #ff3333;
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: .35;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

h1 {
    font-size: clamp(64px, 10vw, 128px);
    line-height: .82;
    margin: 22px 0 16px;
    letter-spacing: -5px;
    text-shadow: 0 12px 0 rgba(0,0,0,.25);
}

.subtitle {
    max-width: 720px;
    font-size: 20px;
    line-height: 1.45;
    color: var(--muted);
}

.subtitle b {
    color: var(--yellow);
}

.hp-card {
    margin-top: 26px;
    padding: 20px;
    border-radius: 22px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(255,255,255,.11);
}

.hp-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    font-weight: 900;
}

.hp-head span {
    color: var(--yellow);
}

.hp-bar {
    height: 34px;
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 18px rgba(0,0,0,.45);
}

#hpFill {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--yellow), var(--orange));
    transition: width .35s ease;
}

.hp-percent {
    margin-top: 10px;
    text-align: right;
    font-size: 14px;
    opacity: .78;
    font-weight: 800;
}

.boss-stage {
    position: relative;
    min-height: 410px;
    margin: 26px 0 18px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle, rgba(255,208,41,.18), transparent 45%),
        rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

.boss-stage::after {
    content: "";
    position: absolute;
    width: 75%;
    height: 30px;
    bottom: 38px;
    background: rgba(0,0,0,.35);
    filter: blur(16px);
    border-radius: 50%;
}

#bossImage {
    position: relative;
    z-index: 2;
    width: min(380px, 78vw);
    max-height: 380px;
    object-fit: contain;
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.45));
    transition: transform .2s ease;
}

.slap-hand {
    position: absolute;
    z-index: 4;
    left: 10%;
    top: 33%;
    font-size: 92px;
    opacity: 0;
    transform: rotate(-30deg);
}

.impact-text {
    position: absolute;
    z-index: 5;
    top: 16%;
    right: 10%;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--yellow);
    color: #160a00;
    font-size: 38px;
    font-weight: 1000;
    opacity: 0;
    transform: scale(.75);
    box-shadow: 0 12px 35px rgba(255,208,41,.35);
}

.boss-stage.slap #bossImage {
    animation: bossHit .34s ease;
}

.boss-stage.slap .slap-hand {
    animation: handHit .34s ease;
}

.boss-stage.slap .impact-text {
    animation: impactPop .48s ease;
}

body.screen-shake {
    animation: screenShake .24s ease;
}

@keyframes bossHit {
    0% {
        transform: translateX(0) rotate(0);
    }

    45% {
        transform: translateX(34px) rotate(8deg) scale(1.03);
    }

    100% {
        transform: translateX(0) rotate(0);
    }
}

@keyframes handHit {
    0% {
        opacity: 0;
        transform: translateX(-100px) rotate(-30deg) scale(.8);
    }

    45% {
        opacity: 1;
        transform: translateX(170px) rotate(10deg) scale(1.2);
    }

    100% {
        opacity: 0;
        transform: translateX(210px) rotate(10deg) scale(1);
    }
}

@keyframes impactPop {
    0% {
        opacity: 0;
        transform: scale(.5) rotate(-8deg);
    }

    45% {
        opacity: 1;
        transform: scale(1.18) rotate(3deg);
    }

    100% {
        opacity: 0;
        transform: scale(1) rotate(0);
    }
}

@keyframes screenShake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-9px);
    }

    40% {
        transform: translateX(9px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }
}

.button-row,
.demo-box {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.main-btn,
.ghost-btn,
button,
input {
    border: 0;
    border-radius: 14px;
    padding: 13px 16px;
    font-weight: 900;
    text-decoration: none;
}

.main-btn,
button {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #130800;
    cursor: pointer;
}

.ghost-btn {
    color: white;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
}

.demo-box {
    margin-top: 18px;
    padding: 15px;
    border-radius: 18px;
    background: rgba(0,0,0,.22);
}

.demo-title {
    width: 100%;
    color: var(--yellow);
    font-weight: 900;
    margin-bottom: 4px;
}

input {
    background: white;
    color: #111;
    min-width: 150px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-card,
.side-card {
    border-radius: 20px;
    background: rgba(0,0,0,.26);
    border: 1px solid rgba(255,255,255,.1);
}

.stat-card {
    padding: 16px;
}

.stat-card span {
    display: block;
    font-size: 13px;
    color: var(--muted);
}

.stat-card strong {
    display: block;
    margin-top: 6px;
    font-size: 24px;
}

.side-card {
    margin-top: 16px;
    padding: 18px;
}

.side-card h2 {
    margin: 0 0 14px;
    font-size: 21px;
}

.feed,
.leaderboard {
    display: grid;
    gap: 10px;
}

.feed-item,
.leader-item,
.empty {
    padding: 13px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
}

.feed-item strong,
.leader-item strong {
    color: var(--yellow);
}

.info-card p {
    color: var(--muted);
    line-height: 1.5;
}

.info-card b {
    color: var(--yellow);
}

@media (max-width: 920px) {
    .app {
        grid-template-columns: 1fr;
    }

    .left-panel,
    .right-panel {
        padding: 20px;
    }

    h1 {
        letter-spacing: -2px;
    }

    .boss-stage {
        min-height: 330px;
    }
}

@media (max-width: 520px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hp-head {
        flex-direction: column;
    }

    .main-btn,
    .ghost-btn,
    button,
    input {
        width: 100%;
        text-align: center;
    }
}

.hit-burst {
    position: absolute;
    z-index: 6;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: 32%;
    top: 42%;
    opacity: 0;
    background: radial-gradient(circle, #fff 0%, #ffd029 35%, #ff2f80 70%, transparent 72%);
    transform: scale(.2);
}

.stars {
    position: absolute;
    z-index: 7;
    right: 23%;
    top: 18%;
    font-size: 58px;
    opacity: 0;
    transform: rotate(-20deg) scale(.4);
}

.boss-stage.slap .hit-burst {
    animation: burstHit .5s ease-out;
}

.boss-stage.slap .stars {
    animation: starSpin .75s ease-out;
}

.boss-stage.slap #bossImage {
    animation: bossHitBetter .48s cubic-bezier(.2, 1.4, .4, 1);
}

.boss-stage.slap .slap-hand {
    animation: handHitBetter .48s cubic-bezier(.2, 1.4, .4, 1);
}

.boss-stage.slap .impact-text {
    animation: impactBetter .62s ease-out;
}

body.screen-shake {
    animation: screenShakeBetter .35s ease;
}

@keyframes bossHitBetter {
    0% {
        transform: translateX(0) rotate(0) scale(1);
        filter: drop-shadow(0 24px 28px rgba(0,0,0,.45));
    }

    25% {
        transform: translateX(52px) rotate(11deg) scale(1.08);
        filter: drop-shadow(0 24px 28px rgba(0,0,0,.45)) brightness(1.45) saturate(1.35);
    }

    55% {
        transform: translateX(-18px) rotate(-4deg) scale(.98);
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        filter: drop-shadow(0 24px 28px rgba(0,0,0,.45));
    }
}

@keyframes handHitBetter {
    0% {
        opacity: 0;
        transform: translateX(-140px) translateY(20px) rotate(-45deg) scale(.7);
    }

    30% {
        opacity: 1;
        transform: translateX(150px) translateY(-10px) rotate(10deg) scale(1.35);
    }

    55% {
        opacity: .9;
        transform: translateX(185px) translateY(-5px) rotate(18deg) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translateX(240px) translateY(-15px) rotate(25deg) scale(.8);
    }
}

@keyframes impactBetter {
    0% {
        opacity: 0;
        transform: scale(.2) rotate(-20deg);
    }

    30% {
        opacity: 1;
        transform: scale(1.45) rotate(5deg);
    }

    70% {
        opacity: 1;
        transform: scale(1) rotate(-3deg);
    }

    100% {
        opacity: 0;
        transform: scale(.75) rotate(0);
    }
}

@keyframes burstHit {
    0% {
        opacity: 0;
        transform: scale(.2);
    }

    35% {
        opacity: 1;
        transform: scale(7);
    }

    100% {
        opacity: 0;
        transform: scale(11);
    }
}

@keyframes starSpin {
    0% {
        opacity: 0;
        transform: rotate(-30deg) scale(.2);
    }

    30% {
        opacity: 1;
        transform: rotate(30deg) scale(1.35);
    }

    100% {
        opacity: 0;
        transform: rotate(240deg) scale(.5);
    }
}

@keyframes screenShakeBetter {
    0%, 100% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(-12px, 5px);
    }

    30% {
        transform: translate(11px, -4px);
    }

    45% {
        transform: translate(-8px, 3px);
    }

    60% {
        transform: translate(7px, -2px);
    }

    75% {
        transform: translate(-4px, 1px);
    }
}

.big-buy-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(255,208,41,.28), rgba(255,47,128,.18), rgba(0,0,0,.72));
}

.big-buy-overlay.show {
    animation: bigBuyOverlayAnim 1.35s ease-out;
}

.big-buy-title {
    font-size: clamp(48px, 10vw, 140px);
    font-weight: 1000;
    line-height: .9;
    text-align: center;
    color: #ffd029;
    text-shadow:
        0 8px 0 rgba(0,0,0,.45),
        0 0 35px rgba(255,208,41,.9);
    transform: scale(.4) rotate(-8deg);
}

.big-buy-amount {
    margin-top: 18px;
    font-size: clamp(22px, 4vw, 54px);
    font-weight: 1000;
    text-align: center;
    color: white;
}

.big-buy-overlay.show .big-buy-title {
    animation: bigBuyTitleAnim 1.35s cubic-bezier(.2,1.4,.4,1);
}

.big-buy-overlay.show .big-buy-amount {
    animation: bigBuyAmountAnim 1.35s ease-out;
}

body.big-buy-shake {
    animation: bigBuyShake 1.1s ease;
}

body.world-destroyer {
    animation: worldFlash 1.6s ease;
}

@keyframes bigBuyOverlayAnim {
    0% { opacity: 0; }
    12% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes bigBuyTitleAnim {
    0% { opacity: 0; transform: scale(.25) rotate(-16deg); }
    22% { opacity: 1; transform: scale(1.18) rotate(3deg); }
    45% { transform: scale(.95) rotate(-2deg); }
    75% { opacity: 1; transform: scale(1.04) rotate(1deg); }
    100% { opacity: 0; transform: scale(.85) rotate(0); }
}

@keyframes bigBuyAmountAnim {
    0% { opacity: 0; transform: translateY(28px); }
    25% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes bigBuyShake {
    0%, 100% { transform: translate(0,0); }
    10% { transform: translate(-16px, 8px); }
    20% { transform: translate(15px, -7px); }
    30% { transform: translate(-12px, 6px); }
    40% { transform: translate(11px, -5px); }
    50% { transform: translate(-8px, 4px); }
    60% { transform: translate(7px, -3px); }
    70% { transform: translate(-5px, 2px); }
    80% { transform: translate(4px, -2px); }
}

@keyframes worldFlash {
    0%, 100% { filter: none; }
    20% { filter: brightness(1.8) saturate(1.8); }
    40% { filter: brightness(.6) saturate(2.2) hue-rotate(25deg); }
    60% { filter: brightness(1.9) saturate(2.4); }
}

.epic-btn{
    background:#ff9800;
    color:white;
}

.god-btn{
    background:#9c27b0;
    color:white;
}

.destroy-btn{
    background:#d50000;
    color:white;
    animation:pulse 1s infinite;
}