:root {
    --bg: #fff6e8;
    --ink: #201a14;
    --pink: #d6127a;
    --yellow: #ffd23f;
    --blue: #116a82;
    --green: #55c26e;
    --orange: #ff7a3d;
    --purple: #6d28d9;
    --card: #ffffff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Nunito', sans-serif;
    position: relative;
    overflow-x: hidden;
}

/* dotted confetti backdrop */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--ink) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    opacity: 0.06;
}

.blob {
    position: absolute;
    border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%;
    z-index: 0;
    pointer-events: none;
}

.font-display {
    font-family: 'Fredoka', sans-serif;
}

/* neubrutalist hard-shadow card */
.pop-card {
    background: var(--card);
    border: 3px solid var(--ink);
    border-radius: 22px;
    box-shadow: 7px 7px 0 var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pop-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 11px 11px 0 var(--ink);
}

.pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    background: var(--yellow);
    border: 3px solid var(--ink);
    padding: 0.9rem 2rem;
    border-radius: 999px;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pop-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink);
}
.pop-btn:active {
    transform: translate(0, 0);
    box-shadow: 2px 2px 0 var(--ink);
}
.pop-btn.pink { background: var(--pink); color: #fff; }
.pop-btn.blue { background: var(--blue); color: #fff; }

.sticker {
    display: inline-flex;
    align-items: center;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 2.5px solid var(--ink);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    background: var(--green);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transform: rotate(-3deg);
}

.nav-pop {
    position: relative;
    font-weight: 700;
}
.nav-pop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 8px;
    background: var(--pink);
    border-radius: 999px;
    transform: translateX(-50%);
    transition: width 0.25s ease;
    z-index: -1;
}
.nav-pop:hover::after { width: 100%; }

.game-card { overflow: hidden; }
.game-card .game-img {
    border: 3px solid var(--ink);
    border-radius: 16px;
    transition: transform 0.3s ease;
}
.game-card:hover .game-img { transform: rotate(-2deg) scale(1.03); }
.game-card .badge-play {
    transform: scale(0) rotate(-15deg);
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.game-card:hover .badge-play { transform: scale(1) rotate(-8deg); }

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-10px) rotate(-4deg); }
}
.bounce-slow { animation: bounce-slow 3.2s ease-in-out infinite; }

@keyframes bounce-slow2 {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-14px) rotate(5deg); }
}
.bounce-slow2 { animation: bounce-slow2 3.8s ease-in-out infinite; }

@keyframes wiggle {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}
.wiggle { animation: wiggle 2.4s ease-in-out infinite; }

.winners-row {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.5rem 0.5rem 1rem;
}
.winners-row::-webkit-scrollbar { height: 8px; }
.winners-row::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; border: 2px solid var(--ink); }
.winner-card { scroll-snap-align: start; flex: 0 0 auto; }

.speech-bubble { position: relative; }
.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 40px;
    width: 26px;
    height: 26px;
    background: var(--card);
    border-right: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    transform: rotate(45deg);
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.star-gold path { fill: var(--yellow); stroke: var(--ink); stroke-width: 1; }

.iframe-frame {
    border: 3px solid var(--ink);
    border-radius: 22px;
    box-shadow: 8px 8px 0 var(--ink);
    overflow: hidden;
    background: #fff;
}

.scallop-divider {
    height: 26px;
    background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--card) 13.5px);
    background-size: 26px 26px;
    background-repeat: repeat-x;
}