:root {
    --ink: #28233d;
    --purple: #6648e8;
    --purple-dark: #5134cf;
    --pink: #ff4f8b;
    --yellow: #ffd45c;
    --mint: #38d4a0;
    --sky: #68ccf4;
    --paper: #fffdf8;
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    min-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
    overscroll-behavior: none;
    color: var(--ink);
    background: #fff8ed;
    font-family: "Nunito", sans-serif;
}

img,
video,
svg,
canvas {
    max-width: 100%;
}

button,
a,
input,
canvas,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button,
a,
[role="button"] {
    touch-action: manipulation;
}

.navbar {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid rgba(67, 49, 119, .08);
    backdrop-filter: blur(12px);
}

.game-logo {
    color: var(--ink);
    font-family: "Baloo 2", cursive;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
}

.game-logo:hover {
    color: var(--purple);
}

.pwa-nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.install-app-button {
    padding: 8px 14px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--purple), #9b5de8);
    font-weight: 900;
    box-shadow: 0 4px 0 #4b2daf;
}

.install-app-button:hover {
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #4b2daf;
}

.game-page .install-app-button {
    display: none !important;
}

@media (display-mode: fullscreen) {
    .install-app-button {
        display: none !important;
    }
}

@media (display-mode: standalone) {
    .install-app-button {
        display: none !important;
    }
}

.install-guide {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    padding: 20px;
    place-items: center;
    background: rgba(37,27,60,.72);
    backdrop-filter: blur(8px);
}

.install-guide[hidden] {
    display: none;
}

.install-guide-card {
    position: relative;
    width: min(92vw, 410px);
    padding: 27px 24px 23px;
    border: 5px solid #fff;
    border-radius: 28px;
    text-align: center;
    background: #fff8ed;
    box-shadow: 0 24px 70px rgba(25,14,48,.38);
}

.install-guide-card img {
    border-radius: 22px;
    box-shadow: 0 8px 20px rgba(72,49,177,.22);
}

.install-guide-card h2 {
    margin: 12px 0 5px;
    color: var(--ink);
    font-family: "Baloo 2", cursive;
    font-size: 1.65rem;
    font-weight: 800;
}

.install-guide-card p {
    margin: 0 auto 17px;
    color: #706984;
    font-weight: 800;
}

.install-guide-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #6c5c79;
    background: #f0e8f3;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1;
}

.install-guide-ok {
    padding: 10px 24px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--mint);
    font-weight: 900;
    box-shadow: 0 5px 0 #169b70;
}

@media (display-mode: fullscreen), (display-mode: standalone) {
    body {
        min-height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
    }
}

.hero-section {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 74px);
    padding: 64px 0 40px;
    background:
        radial-gradient(circle at 8% 14%, rgba(255, 209, 102, .36) 0 90px, transparent 92px),
        radial-gradient(circle at 92% 10%, rgba(255, 79, 139, .16) 0 140px, transparent 142px),
        radial-gradient(circle at 78% 90%, rgba(56, 212, 160, .2) 0 150px, transparent 152px),
        #fff8ed;
}

.hero-copy {
    max-width: 790px;
    margin-bottom: 50px;
}

.eyebrow,
.coming-soon {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--purple-dark);
    font-weight: 800;
}

.hero-copy h1,
.game-heading h1 {
    margin: 14px 0 12px;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.7rem, 6vw, 5rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -2px;
}

.hero-copy h1 span {
    color: var(--purple);
}

.hero-copy p,
.game-heading p {
    margin: 0;
    color: #706984;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
}

.home-page {
    height: 100dvh;
    overflow: hidden;
}

.home-page .navbar {
    height: 64px;
    padding: 0 !important;
}

.home-page main {
    height: calc(100dvh - 64px);
}

.home-page .site-footer {
    display: none;
}

.home-page .hero-section {
    height: 100%;
    min-height: 0;
    padding: 10px 14px 14px;
}

.home-page .hero-section > .container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    padding: 0;
    flex-direction: column;
}

.home-page .hero-copy {
    flex: 0 0 auto;
    margin: 0 auto 10px;
}

.home-page .hero-copy h1 {
    margin: 0;
    font-size: clamp(2rem, 4.2vw, 3.5rem);
    line-height: 1;
}

.home-page .hero-copy p {
    margin-top: 1px;
    font-size: .94rem;
}

.home-page .game-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 12px !important;
    min-height: 0;
    margin: 0;
}

.home-page .game-grid > div {
    grid-column: span 2;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
}

.home-page .game-card {
    display: flex;
    min-height: 0;
    border-radius: 24px;
    flex-direction: column;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 8px 0 rgba(74, 47, 118, .06), 0 15px 35px rgba(62, 44, 105, .12);
}

.home-page .game-card:focus-visible {
    outline: 5px solid var(--yellow);
    outline-offset: -3px;
}

.home-page .card-art {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.home-page .card-content {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 14px;
    text-align: center;
}

.home-page .card-content h2 {
    overflow: hidden;
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-page .game-tag {
    flex: 0 0 auto;
    padding: 4px 8px;
    font-size: .58rem;
}

.game-card {
    overflow: hidden;
    border: 0;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 18px 0 rgba(74, 47, 118, .06), 0 28px 65px rgba(62, 44, 105, .13);
    transition: transform .25s ease, box-shadow .25s ease;
}

.game-card:hover {
    transform: translateY(-7px) rotate(-.4deg);
    box-shadow: 0 20px 0 rgba(74, 47, 118, .06), 0 34px 72px rgba(62, 44, 105, .18);
}

.paint-card:hover {
    transform: translateY(-7px) rotate(.4deg);
}

.card-art {
    position: relative;
    overflow: hidden;
    height: 290px;
}

.race-art {
    background: linear-gradient(#6fd4f7 0 48%, #8be06c 48% 100%);
}

.cloud {
    position: absolute;
    width: 78px;
    height: 26px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .85);
}

.cloud::before,
.cloud::after {
    position: absolute;
    bottom: 6px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.cloud::before {
    left: 13px;
    width: 30px;
    height: 30px;
}

.cloud::after {
    right: 10px;
    width: 38px;
    height: 38px;
}

.cloud-a { top: 30px; left: 10%; }
.cloud-b { top: 58px; right: 8%; transform: scale(.72); }

.mini-road {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 68%;
    height: 245px;
    transform: translateX(-50%) perspective(180px) rotateX(10deg);
    background: #4e5360;
    border-right: 8px solid #f8f0df;
    border-left: 8px solid #f8f0df;
}

.road-line {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    opacity: .8;
    background: repeating-linear-gradient(to bottom, white 0 26px, transparent 26px 52px);
}

.line-one { left: 33%; }
.line-two { right: 33%; }

.preview-car,
.player-car {
    position: absolute;
    width: 66px;
    height: 104px;
    border: 4px solid #1569c7;
    border-radius: 22px 22px 15px 15px;
    background: linear-gradient(90deg, #2487ee, #5db9ff 48%, #2487ee);
    box-shadow: 0 8px 0 rgba(20, 28, 50, .3);
}

.preview-car {
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
}

.car-window,
.windshield {
    position: absolute;
    top: 16px;
    left: 9px;
    width: 40px;
    height: 27px;
    border: 3px solid #dff7ff;
    border-radius: 11px 11px 7px 7px;
    background: #244b73;
}

.wheel,
.tire {
    position: absolute;
    width: 10px;
    height: 25px;
    border-radius: 5px;
    background: #282b35;
}

.wheel-left,
.tire-left { left: -9px; top: 56px; }
.wheel-right,
.tire-right { right: -9px; top: 56px; }

.preview-cone {
    position: absolute;
    color: #ff8b21;
    font-size: 34px;
    text-shadow: 0 5px white;
}

.cone-one { top: 48px; left: 15%; }
.cone-two { top: 78px; right: 12%; }

.paint-art {
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,.42) 0 4px, transparent 5px),
        linear-gradient(135deg, #ff99bb, #ffd979);
}

.paint-splat {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 48% 52% 42% 58%;
    transform: rotate(24deg);
}

.paint-splat::before,
.paint-splat::after {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.paint-splat::before { top: -12px; left: 8px; }
.paint-splat::after { right: -18px; bottom: 2px; }
.splat-pink { left: 8%; bottom: 27px; background: #ff4384; }
.splat-yellow { right: 10%; top: 28px; background: #ffe055; }
.splat-blue { left: 16%; top: 42px; transform: scale(.65); background: #52bff4; }

.easel {
    position: absolute;
    top: 24px;
    left: 50%;
    width: 218px;
    height: 245px;
    transform: translateX(-50%);
}

.easel-paper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 185px;
    overflow: hidden;
    border: 10px solid #a7673f;
    border-radius: 9px;
    background: #fffdf3;
    box-shadow: 0 8px 0 rgba(102, 57, 43, .16);
}

.easel-leg {
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 85px;
    border-radius: 8px;
    background: #945738;
}

.leg-left { left: 50px; transform: rotate(11deg); }
.leg-right { right: 50px; transform: rotate(-11deg); }

.paper-sun {
    position: absolute;
    top: 24px;
    right: 30px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffd24f;
    box-shadow: 0 0 0 10px rgba(255, 210, 79, .18);
}

.paper-hill {
    position: absolute;
    bottom: -28px;
    left: -10px;
    width: 230px;
    height: 90px;
    border-radius: 50% 50% 0 0;
    background: #7fd36b;
}

.paper-flower {
    position: absolute;
    z-index: 2;
    bottom: 23px;
    left: 45px;
    color: #ff5b91;
    font-size: 44px;
}

.paint-brush {
    position: absolute;
    right: 8%;
    bottom: 22px;
    width: 42px;
    height: 160px;
    transform: rotate(35deg);
}

.brush-handle {
    position: absolute;
    bottom: 0;
    left: 12px;
    width: 18px;
    height: 118px;
    border-radius: 12px;
    background: #6f45c8;
}

.brush-tip {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 7px;
    width: 28px;
    height: 54px;
    border-radius: 50% 50% 12px 12px;
    background: linear-gradient(#28b8e6 0 50%, #d3a56b 52% 100%);
}

.card-content {
    padding: 30px 34px 36px;
}

.game-tag {
    display: inline-flex;
    padding: 6px 13px;
    border-radius: 30px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.tag-yellow {
    color: #7b5100;
    background: #ffe69a;
}

.tag-pink {
    color: #a61953;
    background: #ffd1e1;
}

.card-content h2 {
    margin: 14px 0 5px;
    font-family: "Baloo 2", cursive;
    font-size: 2rem;
    font-weight: 800;
}

.card-content p {
    min-height: 52px;
    margin-bottom: 22px;
    color: #746d84;
    font-weight: 700;
}

.game-button,
.start-button {
    padding: 12px 20px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 6px 0 rgba(42, 33, 76, .16);
}

.game-button:hover,
.start-button:hover {
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 4px 0 rgba(42, 33, 76, .16);
}

.race-button { background: var(--purple); }
.race-button:hover { background: var(--purple-dark); }
.paint-button { background: var(--pink); }
.paint-button:hover { background: #e83c77; }
.salon-button { background: #8b4ed9; }
.salon-button:hover { background: #7136bd; }
.balloon-button { background: #168bc9; }
.balloon-button:hover { background: #0877b2; }
.jump-button { background: #21a66c; }
.jump-button:hover { background: #148856; }
.market-button { background: #ed812f; }
.market-button:hover { background: #d5681b; }

.tag-purple {
    color: #5b2892;
    background: #ead7ff;
}

.tag-blue {
    color: #075c8f;
    background: #cdefff;
}

.tag-green {
    color: #12693e;
    background: #cbf3de;
}

.tag-orange {
    color: #8a410b;
    background: #ffe0b9;
}

.tag-aqua {
    color: #08627a;
    background: #c8f4f5;
}

.salon-art {
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,.55) 0 5px, transparent 6px),
        linear-gradient(145deg, #b38af2, #ffd1e8 72%);
}

.salon-preview {
    position: absolute;
    bottom: -18px;
    left: 50%;
    width: 178px;
    height: 238px;
    transform: translateX(-50%);
}

.preview-hair-back {
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    width: 154px;
    height: 215px;
    border-radius: 48% 48% 38% 38%;
    background: #63361f;
    box-shadow: inset -14px 0 0 #4d2818, inset 12px 0 0 #7f492c;
}

.preview-face {
    position: absolute;
    z-index: 2;
    top: 48px;
    left: 31px;
    width: 116px;
    height: 142px;
    border-radius: 46% 46% 50% 50%;
    background: #f8b995;
    box-shadow: inset 0 -6px 0 rgba(213, 113, 97, .12);
}

.preview-hair-top {
    position: absolute;
    z-index: 3;
    top: 11px;
    left: 18px;
    width: 142px;
    height: 84px;
    border-radius: 56% 50% 42% 25%;
    background: #6b3b22;
    transform: rotate(-3deg);
}

.preview-hair-top::after {
    position: absolute;
    right: 7px;
    bottom: -32px;
    width: 38px;
    height: 76px;
    border-radius: 0 0 24px 24px;
    background: #6b3b22;
    content: "";
    transform: rotate(-9deg);
}

.preview-eye {
    position: absolute;
    top: 61px;
    width: 10px;
    height: 12px;
    border-radius: 50%;
    background: #3b2929;
}

.preview-eye.eye-left { left: 29px; }
.preview-eye.eye-right { right: 29px; }

.preview-smile {
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 29px;
    height: 14px;
    border-bottom: 4px solid #b74d62;
    border-radius: 50%;
    transform: translateX(-50%);
}

.preview-bow {
    position: absolute;
    z-index: 4;
    top: 19px;
    right: 3px;
    font-size: 46px;
    transform: rotate(12deg);
}

.preview-comb {
    position: absolute;
    right: 12%;
    bottom: 24px;
    color: #6648e8;
    font-size: 72px;
    font-weight: 900;
    transform: rotate(-38deg);
    text-shadow: 0 5px 0 rgba(255,255,255,.45);
}

.salon-sparkle {
    position: absolute;
    color: #fff7a8;
    font-size: 34px;
    animation: sparklePulse 1.8s ease-in-out infinite;
}

.sparkle-one { top: 30px; left: 12%; }
.sparkle-two { top: 62px; right: 12%; animation-delay: -.8s; }

@keyframes sparklePulse {
    50% { opacity: .45; transform: scale(.72) rotate(20deg); }
}

.balloon-art {
    background:
        radial-gradient(circle at 16% 24%, rgba(255,255,255,.75) 0 3px, transparent 4px),
        linear-gradient(#71d5f6, #d8f5ff);
    background-size: 44px 44px, auto;
}

.balloon-art::after {
    position: absolute;
    right: -8%;
    bottom: -52px;
    left: -8%;
    height: 110px;
    border-radius: 50% 50% 0 0;
    background: #82d66c;
    content: "";
}

.balloon-preview {
    position: absolute;
    z-index: 2;
    display: block;
    width: 62px;
    height: 72px;
    background: var(--preview-color);
    box-shadow: inset 10px 8px 0 rgba(255,255,255,.24), 0 6px 0 rgba(48, 62, 95, .12);
}

.balloon-preview::after {
    position: absolute;
    bottom: -62px;
    left: 50%;
    width: 2px;
    height: 64px;
    background: rgba(68, 73, 105, .45);
    content: "";
    transform: translateX(-50%);
}

.balloon-preview.shape-round { border-radius: 50%; }
.balloon-preview.shape-oval { border-radius: 50%; }
.balloon-preview.shape-star {
    clip-path: polygon(50% 0, 61% 35%, 98% 36%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 36%, 39% 35%);
}
.balloon-preview.shape-heart {
    clip-path: polygon(50% 92%, 9% 51%, 4% 28%, 15% 8%, 36% 3%, 50% 20%, 64% 3%, 85% 8%, 96% 28%, 91% 51%);
}

.preview-red {
    top: 45px;
    left: 12%;
    --preview-color: #ff5179;
    transform: rotate(-7deg);
}

.preview-blue {
    top: 22px;
    left: 38%;
    height: 92px;
    --preview-color: #2caee9;
}

.preview-yellow {
    top: 72px;
    right: 27%;
    --preview-color: #ffd23f;
    transform: rotate(8deg);
}

.preview-pink {
    top: 28px;
    right: 6%;
    --preview-color: #bd66e8;
    transform: rotate(5deg);
}

.preview-pop {
    position: absolute;
    z-index: 4;
    top: 126px;
    left: 48%;
    color: #6842bd;
    font-family: "Baloo 2", cursive;
    font-size: 1.7rem;
    font-weight: 900;
    transform: rotate(-8deg);
    text-shadow: 2px 2px 0 #fff;
}

.preview-particle {
    position: absolute;
    z-index: 4;
    color: #ff4f8b;
    font-size: 22px;
}

.particle-a { top: 115px; left: 36%; transform: rotate(-18deg); }
.particle-b { top: 148px; left: 62%; color: #ff9f1c; }
.particle-c { top: 104px; left: 64%; color: #6648e8; }

.jump-art {
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.65) 0 3px, transparent 4px),
        linear-gradient(#63cbf3 0 68%, #8cda72 68% 100%);
    background-size: 46px 46px, auto;
}

.jump-art::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    background:
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.25) 29px 35px),
        #8b5d38;
    content: "";
}

.jump-preview-cloud {
    position: absolute;
    top: 36px;
    right: 12%;
    width: 78px;
    height: 25px;
    border-radius: 30px;
    background: rgba(255,255,255,.8);
}

.jump-preview-cloud::before,
.jump-preview-cloud::after {
    position: absolute;
    bottom: 4px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.jump-preview-cloud::before { left: 10px; width: 34px; height: 34px; }
.jump-preview-cloud::after { right: 8px; width: 42px; height: 42px; }

.preview-speedster {
    position: absolute;
    z-index: 3;
    bottom: 49px;
    left: 18%;
    width: 116px;
    height: 112px;
    transform: rotate(-8deg);
}

.preview-spikes {
    position: absolute;
    top: 12px;
    left: -18px;
    width: 73px;
    height: 72px;
    background: #176bc2;
    clip-path: polygon(100% 10%, 54% 20%, 22% 0, 28% 35%, 0 44%, 31% 61%, 9% 91%, 54% 78%, 86% 100%);
}

.preview-speed-body {
    position: absolute;
    right: 12px;
    bottom: 9px;
    width: 72px;
    height: 76px;
    border-radius: 48%;
    background: #2385e4;
    box-shadow: inset -9px -4px 0 #1568bf;
}

.preview-speed-face {
    position: absolute;
    z-index: 2;
    top: 25px;
    right: 1px;
    width: 56px;
    height: 51px;
    border-radius: 45% 54% 49% 45%;
    background: #f2bd85;
}

.preview-speed-eye {
    position: absolute;
    z-index: 3;
    top: 32px;
    right: 15px;
    width: 10px;
    height: 15px;
    border-radius: 50%;
    background: #222639;
    box-shadow: inset 3px 2px 0 #fff;
}

.preview-speed-shoe {
    position: absolute;
    z-index: 4;
    right: -4px;
    bottom: 1px;
    width: 49px;
    height: 23px;
    border-radius: 60% 45% 35% 40%;
    background: #f04f45;
    box-shadow: inset 0 -6px 0 #fff;
}

.preview-jump-lines {
    position: absolute;
    z-index: 2;
    bottom: 76px;
    left: 4%;
    color: rgba(255,255,255,.85);
    font-size: 2.3rem;
    font-weight: 900;
}

.preview-jump-obstacle {
    position: absolute;
    z-index: 3;
    right: 15%;
    bottom: 34px;
    font-size: 59px;
    filter: drop-shadow(0 6px 2px rgba(67,59,49,.2));
}

.market-art {
    background:
        linear-gradient(90deg, #ff6b6b 0 12.5%, #fff4df 12.5% 25%, #ff6b6b 25% 37.5%, #fff4df 37.5% 50%, #ff6b6b 50% 62.5%, #fff4df 62.5% 75%, #ff6b6b 75% 87.5%, #fff4df 87.5%) top / 100% 30px no-repeat,
        linear-gradient(#fff0d5, #c9f0e3);
}

.preview-shelf {
    position: absolute;
    right: 6%;
    left: 6%;
    display: flex;
    height: 64px;
    padding: 5px 8px 12px;
    border-bottom: 10px solid #ad7245;
    gap: 13px;
    align-items: center;
    justify-content: space-around;
    background: rgba(255,255,255,.64);
    box-shadow: 0 5px 0 rgba(80,52,36,.15);
}

.preview-shelf span {
    font-size: 34px;
}

.preview-shelf-one { top: 47px; }
.preview-shelf-two { top: 125px; }

.preview-market-cart {
    position: absolute;
    z-index: 3;
    right: 7%;
    bottom: 3px;
    font-size: 65px;
    filter: drop-shadow(0 5px 2px rgba(62,49,42,.18));
}

.preview-market-order {
    position: absolute;
    z-index: 4;
    bottom: 15px;
    left: 7%;
    padding: 7px 11px;
    border: 3px solid #f3a33b;
    border-radius: 12px;
    color: #83440e;
    background: #fff;
    font-size: .72rem;
    font-weight: 900;
    box-shadow: 0 5px 0 rgba(145,85,29,.12);
}

.aquarium-art {
    border-bottom: 8px solid #516f87;
    background:
        radial-gradient(circle at 16% 25%, rgba(255,255,255,.5) 0 3px, transparent 4px),
        linear-gradient(#65d4ed, #2d9fc7 72%, #e9c784 73%);
    background-size: 38px 38px, auto;
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.58);
}

.preview-aqua-fish {
    position: absolute;
    z-index: 3;
    font-size: 46px;
    filter: drop-shadow(0 5px 2px rgba(24,84,105,.2));
}

.preview-aqua-fish.fish-one { top: 48px; left: 13%; }
.preview-aqua-fish.fish-two { top: 105px; left: 46%; transform: scaleX(-1); }
.preview-aqua-fish.fish-three { top: 42px; right: 11%; }

.preview-aqua-plant,
.preview-aqua-coral,
.preview-aqua-castle {
    position: absolute;
    z-index: 2;
    bottom: 2px;
    font-size: 52px;
}

.preview-aqua-plant { left: 8%; }
.preview-aqua-coral { left: 34%; }
.preview-aqua-castle { right: 9%; font-size: 60px; }

.preview-aqua-bubble {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 3px solid rgba(255,255,255,.72);
    border-radius: 50%;
}

.preview-aqua-bubble.bubble-one { top: 34px; left: 43%; }
.preview-aqua-bubble.bubble-two { top: 82px; right: 33%; transform: scale(.65); }

.coming-soon {
    margin-top: 46px;
    color: #776e87;
}

.site-footer {
    color: #81798d;
    background: #fff;
    font-size: .88rem;
    font-weight: 800;
}

/* Game pages */
.race-page {
    background: #e8f8ff;
}

.paint-page {
    background: #fff4f8;
}

.back-button {
    border: 2px solid #e8e2f0;
    border-radius: 14px;
    color: var(--ink);
    background: #fff;
    font-weight: 800;
}

.back-button:hover {
    color: var(--purple);
    border-color: #cfc3ff;
}

.game-page {
    height: 100dvh;
    overflow: hidden;
}

.game-page .navbar {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    padding: 12px 0 !important;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
}

.game-page .navbar .container {
    justify-content: flex-end;
}

.game-page .navbar .game-logo {
    display: none;
}

.game-page .back-button {
    box-shadow: 0 5px 18px rgba(43, 34, 68, .15);
    pointer-events: auto;
}

.game-page main,
.game-page .play-section {
    height: 100dvh;
}

.game-page .site-footer {
    display: none;
}

.global-sound-toggle {
    position: fixed;
    z-index: 150;
    top: 14px;
    left: 14px;
    display: grid;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 50%;
    place-items: center;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 18px rgba(38,31,63,.2);
    font-size: 1.45rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.global-sound-toggle:active {
    transform: scale(.91);
}

.play-section {
    min-height: 100dvh;
    padding: 12px;
    background:
        radial-gradient(circle at 8% 14%, rgba(255, 212, 92, .35) 0 75px, transparent 77px),
        radial-gradient(circle at 92% 34%, rgba(255, 79, 139, .14) 0 110px, transparent 112px);
}

.play-section > .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
}

.game-heading {
    flex: 0 0 auto;
    margin: 0 auto 8px;
    padding: 0 130px;
}

.game-heading h1 {
    margin: 0;
    font-size: clamp(1.8rem, 3.2vw, 2.75rem);
}

.game-heading .game-tag {
    display: none;
}

.game-heading p {
    font-size: .94rem;
}

.race-layout {
    position: relative;
    flex: 1 1 auto;
    width: min(100%, 760px);
    min-height: 0;
    margin: auto;
}

.race-stats {
    position: absolute;
    z-index: 8;
    top: 12px;
    left: 50%;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 0;
    transform: translateX(-50%);
}

.race-stats div {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(42, 75, 95, .08);
}

.race-stats span {
    color: #80778c;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
}

.race-stats strong {
    color: var(--purple);
    font-family: "Baloo 2", cursive;
    font-size: 1.4rem;
}

.game-stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    margin: auto;
    border: 7px solid #fff;
    border-radius: 26px;
    outline: none;
    background: #474d58;
    box-shadow: 0 20px 55px rgba(38, 65, 81, .22);
    touch-action: none;
}

.game-stage:focus-visible {
    box-shadow: 0 0 0 5px #ffd45c, 0 20px 55px rgba(38, 65, 81, .22);
}

.road-edge {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 12px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #fff 0 28px, #f25c54 28px 56px);
}

.road-edge-left { left: 0; }
.road-edge-right { right: 0; }

.lane-divider {
    position: absolute;
    top: -80px;
    width: 7px;
    height: calc(100% + 160px);
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,.8) 0 38px, transparent 38px 76px);
    animation: roadMove .8s linear infinite paused;
}

.game-stage.running .lane-divider {
    animation-play-state: running;
}

.divider-one { left: 20%; }
.divider-two { left: 40%; }
.divider-three { left: 60%; }
.divider-four { left: 80%; }

@keyframes roadMove {
    to { transform: translateY(76px); }
}

.player-car {
    z-index: 5;
    bottom: 28px;
    left: calc(50% - 33px);
    transition: left .15s cubic-bezier(.25,.8,.3,1.2);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.player-car.dragging {
    cursor: grabbing;
    transition: none;
    filter: drop-shadow(0 0 12px rgba(104, 204, 244, .9));
}

.drag-hint {
    position: absolute;
    z-index: 7;
    bottom: 152px;
    left: 50%;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 8px 14px;
    border-radius: 30px;
    color: #fff;
    background: rgba(34, 31, 57, .7);
    font-size: .82rem;
    font-weight: 900;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .2s ease;
}

.drag-hint span {
    color: var(--yellow);
    font-size: 1.25rem;
}

.drag-hint.hidden {
    opacity: 0;
}

.car-shine {
    position: absolute;
    top: 7px;
    left: 13px;
    width: 14px;
    height: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,.7);
}

.headlight {
    position: absolute;
    top: 77px;
    width: 11px;
    height: 10px;
    border-radius: 50%;
    background: #fff3a6;
}

.headlight-left { left: 8px; }
.headlight-right { right: 8px; }

.obstacle {
    position: absolute;
    z-index: 4;
    top: -80px;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    font-size: 50px;
    line-height: 1;
    filter: drop-shadow(0 7px 2px rgba(0,0,0,.22));
}

.game-overlay {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    color: #fff;
    text-align: center;
    background: rgba(30, 29, 55, .82);
    backdrop-filter: blur(4px);
}

.game-overlay.hidden {
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.overlay-icon {
    font-size: 4rem;
}

.game-overlay h2 {
    margin: 8px 0 4px;
    font-family: "Baloo 2", cursive;
    font-size: 2rem;
    font-weight: 800;
}

.game-overlay p {
    max-width: 300px;
    color: #e8e3f7;
}

.start-button {
    background: var(--pink);
}

/* Paint */
.paint-play-section {
    background:
        radial-gradient(circle at 8% 20%, rgba(255, 210, 79, .35) 0 80px, transparent 82px),
        radial-gradient(circle at 92% 42%, rgba(104, 204, 244, .2) 0 130px, transparent 132px);
}

.paint-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) clamp(132px, 15vw, 190px);
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: none;
    margin: auto;
    border: 6px solid #fff;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(99, 60, 91, .15);
}

.paint-toolbar {
    display: flex;
    grid-row: 1;
    grid-column: 1 / -1;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
}

.tool-group {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tool-label {
    color: #746b80;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.color-list {
    display: flex;
    gap: 7px;
}

.color-swatch {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px #ded9e5;
    transition: transform .15s ease;
}

.color-swatch:hover,
.color-swatch.active {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--ink);
}

.brush-type-list {
    display: flex;
    gap: 7px;
}

.brush-type-button {
    display: flex;
    min-width: 62px;
    padding: 6px 7px 5px;
    border: 2px solid #e9e1ed;
    border-radius: 12px;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    color: #6b6073;
    background: #fff;
    font-weight: 900;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.brush-type-button small {
    font-size: .61rem;
    line-height: 1;
}

.brush-type-button:hover,
.brush-type-button.active {
    color: var(--purple);
    border-color: #ad96ff;
    background: #f3efff;
    transform: translateY(-2px);
}

.brush-type-icon {
    position: relative;
    display: block;
    width: 25px;
    height: 20px;
}

.icon-round::before {
    position: absolute;
    top: 3px;
    left: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.icon-marker::before {
    position: absolute;
    top: 6px;
    left: 3px;
    width: 20px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    content: "";
    transform: rotate(-13deg);
}

.icon-chalk::before {
    position: absolute;
    top: 7px;
    left: 3px;
    width: 20px;
    height: 7px;
    border: 2px dashed currentColor;
    border-radius: 4px;
    content: "";
    transform: rotate(-13deg);
}

.icon-spray {
    background-image: radial-gradient(circle, currentColor 0 1.5px, transparent 2px);
    background-size: 7px 7px;
}

#brushSize {
    width: 110px;
    accent-color: var(--purple);
}

.brush-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--purple);
}

.tool-actions {
    display: flex;
    gap: 8px;
}

.tool-button {
    border: 2px solid #e8e1ed;
    border-radius: 12px;
    color: #5d5468;
    background: #fff;
    font-size: .87rem;
    font-weight: 900;
}

.tool-button:hover,
.tool-button.active {
    color: var(--purple);
    border-color: #bfaeff;
    background: #f4f0ff;
}

.canvas-frame {
    position: relative;
    grid-row: 2;
    grid-column: 1;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border: 2px dashed #e7dfe9;
    border-radius: 18px;
    background-color: #fffdf9;
    background-image: radial-gradient(#e9e2ec 1.2px, transparent 1.2px);
    background-size: 23px 23px;
}

#drawingCanvas {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: none;
    touch-action: none;
}

.canvas-brush-cursor {
    position: absolute;
    z-index: 4;
    border: 2px solid var(--cursor-color, #6146e5);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity .12s ease;
}

.canvas-brush-cursor.visible {
    opacity: .88;
}

.canvas-brush-cursor.drawing {
    box-shadow: 0 0 0 3px rgba(255,255,255,.75);
}

.canvas-brush-cursor.marker {
    border-radius: 3px;
    background: color-mix(in srgb, var(--cursor-color) 22%, transparent);
    transform: translate(-50%, -50%) rotate(-13deg);
}

.canvas-brush-cursor.chalk {
    border-style: dashed;
    background: color-mix(in srgb, var(--cursor-color) 10%, transparent);
}

.canvas-brush-cursor.spray {
    border-style: dotted;
    background-image: radial-gradient(circle, var(--cursor-color) 0 1px, transparent 1.5px);
    background-size: 7px 7px;
    opacity: .65;
}

.canvas-brush-cursor.eraser {
    border-color: #777;
    background: rgba(255,255,255,.55);
}

.canvas-brush-cursor.stamp {
    display: grid;
    border: 0;
    place-items: center;
    background: transparent;
    filter: drop-shadow(0 5px 3px rgba(66,43,73,.23));
    line-height: 1;
}

.canvas-brush-cursor.stamp.drawing {
    box-shadow: none;
    transform: translate(-50%, -50%) scale(.88);
}

.stamp-panel {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 10px;
    border-left: 3px solid #eee5f0;
    background:
        radial-gradient(circle at 80% 8%, rgba(255,209,102,.28) 0 35px, transparent 36px),
        linear-gradient(#fff9fc, #f5efff);
    scrollbar-width: thin;
    scrollbar-color: #b99dea transparent;
}

.stamp-panel-heading {
    display: flex;
    margin-bottom: 9px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #7045a8;
    font-family: "Baloo 2", cursive;
    font-size: 1.05rem;
}

.stamp-panel-heading span {
    font-size: 1.25rem;
}

.stamp-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stamp-button {
    display: grid;
    min-width: 0;
    aspect-ratio: 1;
    padding: 2px;
    border: 3px solid #eadfeb;
    border-radius: 17px;
    place-items: center;
    background: rgba(255,255,255,.94);
    box-shadow: 0 4px 0 #e1d3e5;
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.stamp-button:hover,
.stamp-button.active {
    border-color: #9c6be1;
    background: #f1e8ff;
    transform: translateY(2px) scale(1.04);
    box-shadow: 0 2px 0 #cdb6dd;
}

.canvas-hint {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    color: #c5b9c9;
    pointer-events: none;
}

.canvas-hint span {
    font-size: 3.5rem;
}

.canvas-hint.hidden {
    display: none;
}

/* Hair salon */
.salon-play-section {
    background:
        radial-gradient(circle at 10% 14%, rgba(255, 213, 92, .32) 0 90px, transparent 92px),
        radial-gradient(circle at 90% 80%, rgba(130, 86, 220, .22) 0 150px, transparent 152px),
        #fff0f7;
}

.salon-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 340px;
    min-height: 0;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(89, 51, 105, .17);
}

.salon-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.65) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 28%, rgba(255,255,255,.48) 0 6px, transparent 7px),
        linear-gradient(145deg, #ffe0ee, #e5d3ff);
    background-size: 54px 54px, 75px 75px, auto;
    touch-action: none;
}

.salon-progress {
    position: absolute;
    z-index: 12;
    top: 14px;
    left: 18px;
    width: min(230px, 42%);
    padding: 9px 12px;
    border-radius: 15px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 22px rgba(82, 48, 98, .1);
    backdrop-filter: blur(8px);
}

.progress-copy {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    color: #6a5475;
    font-size: .78rem;
    font-weight: 900;
}

.progress-copy strong {
    color: var(--purple);
}

.progress-track {
    height: 7px;
    overflow: hidden;
    margin-top: 5px;
    border-radius: 10px;
    background: #eadff0;
}

.progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), #9c65ed);
    transition: width .15s ease;
}

.hair-zone {
    position: absolute;
    z-index: 3;
    top: 7%;
    left: 50%;
    width: clamp(270px, 45vw, 470px);
    height: 88%;
    max-height: 690px;
    transform: translateX(-50%);
    --hair-main: #65371f;
    --hair-dark: #442014;
    --hair-light: #d89455;
}

.hair-back {
    position: absolute;
    z-index: 2;
    top: 6%;
    left: 7%;
    width: 86%;
    height: 88%;
    border-radius: 47% 47% 37% 37%;
    background:
        repeating-linear-gradient(94deg, transparent 0 14px, rgba(255,255,255,.07) 15px 18px),
        linear-gradient(90deg, var(--hair-dark), var(--hair-main) 48%, var(--hair-dark));
    box-shadow:
        inset -22px 0 0 color-mix(in srgb, var(--hair-dark) 82%, transparent),
        inset 18px 0 0 color-mix(in srgb, var(--hair-light) 34%, transparent),
        0 10px 18px rgba(61,34,31,.15);
    transition: border-radius .5s ease, filter .5s ease;
}

.doll-neck {
    position: absolute;
    z-index: 3;
    bottom: 5%;
    left: 40%;
    width: 20%;
    height: 24%;
    border-radius: 25px;
    background: #eaa27f;
}

.doll-shoulders {
    position: absolute;
    z-index: 3;
    right: 10%;
    bottom: -9%;
    left: 10%;
    height: 24%;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(90deg, #7f51d7, #b47aef);
}

.doll-face {
    position: absolute;
    z-index: 4;
    top: 19%;
    left: 25%;
    width: 50%;
    height: 54%;
    border-radius: 45% 45% 49% 49%;
    background: linear-gradient(90deg, #eda986, #ffc29e 52%, #efa783);
    box-shadow: inset 0 -8px 0 rgba(190, 91, 75, .08);
}

.doll-ear {
    position: absolute;
    z-index: 3;
    top: 40%;
    width: 10%;
    height: 16%;
    border-radius: 50%;
    background: #eca481;
}

.doll-ear.ear-left { left: 20%; }
.doll-ear.ear-right { right: 20%; }

.doll-eye {
    position: absolute;
    top: 43%;
    width: 8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3b2a37;
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.72);
}

.doll-eye.eye-left { left: 25%; }
.doll-eye.eye-right { right: 25%; }

.doll-brow {
    position: absolute;
    top: 35%;
    width: 16%;
    height: 5%;
    border-top: 3px solid #744333;
    border-radius: 50%;
}

.doll-brow.brow-left { left: 20%; }
.doll-brow.brow-right { right: 20%; }

.doll-blush {
    position: absolute;
    top: 58%;
    width: 14%;
    height: 8%;
    border-radius: 50%;
    background: rgba(238, 94, 121, .25);
}

.doll-blush.blush-left { left: 13%; }
.doll-blush.blush-right { right: 13%; }

.doll-nose {
    position: absolute;
    top: 52%;
    left: 47%;
    width: 7%;
    height: 10%;
    border-right: 2px solid rgba(167, 86, 69, .35);
    border-bottom: 2px solid rgba(167, 86, 69, .35);
    border-radius: 50%;
}

.doll-mouth {
    position: absolute;
    bottom: 19%;
    left: 50%;
    width: 19%;
    height: 9%;
    border-bottom: 4px solid #ba5066;
    border-radius: 50%;
    transform: translateX(-50%);
}

.hair-cap {
    position: absolute;
    z-index: 6;
    top: 5%;
    left: 16%;
    width: 68%;
    height: 35%;
    border-radius: 52% 50% 31% 24%;
    background:
        repeating-linear-gradient(100deg, transparent 0 18px, rgba(255,255,255,.07) 19px 22px),
        var(--hair-main);
    box-shadow:
        inset -12px -7px 0 color-mix(in srgb, var(--hair-dark) 38%, transparent),
        inset 12px 8px 0 color-mix(in srgb, var(--hair-light) 16%, transparent);
    transform: rotate(-2deg);
}

.hair-fringe {
    position: absolute;
    z-index: 7;
    top: 25%;
    width: 28%;
    height: 30%;
    background: linear-gradient(145deg, var(--hair-light), var(--hair-main) 32%, var(--hair-dark));
}

.fringe-left {
    left: 17%;
    border-radius: 35% 0 70% 30%;
    transform: rotate(8deg);
}

.fringe-right {
    right: 17%;
    border-radius: 0 35% 30% 70%;
    transform: rotate(-8deg);
}

.hair-strands {
    position: absolute;
    z-index: 8;
    inset: 8% 10% 9%;
    overflow: hidden;
    border-radius: 48%;
    pointer-events: none;
}

.hair-strands span {
    position: absolute;
    top: calc(3% + var(--strand) * 2%);
    left: calc(13% + var(--strand) * 13%);
    width: 10%;
    height: 82%;
    border-right: 4px solid color-mix(in srgb, var(--hair-light) 38%, transparent);
    border-radius: 50%;
    transform: rotate(calc(-7deg + var(--strand) * 2deg));
    transition: transform .55s ease, border-color .55s ease;
}

.hair-zone.combed .hair-back {
    border-radius: 47% 47% 44% 44%;
    filter: saturate(1.13) brightness(1.08);
}

.hair-zone.combed .hair-strands span {
    border-color: color-mix(in srgb, var(--hair-light) 55%, transparent);
    transform: rotate(0);
}

.hair-shine {
    position: absolute;
    z-index: 11;
    inset: 7% 9% 12%;
    overflow: hidden;
    border-radius: 48%;
    pointer-events: none;
}

.hair-shine span {
    position: absolute;
    display: block;
    border-left: 7px solid color-mix(in srgb, var(--hair-light) 58%, transparent);
    border-radius: 50%;
    filter: blur(.2px);
    opacity: .72;
    transform: rotate(8deg);
    transition: all .4s ease;
}

.hair-shine .shine-one {
    top: 7%;
    left: 25%;
    width: 25%;
    height: 48%;
}

.hair-shine .shine-two {
    top: 17%;
    right: 16%;
    width: 20%;
    height: 55%;
}

.hair-shine .shine-three {
    bottom: 5%;
    left: 15%;
    width: 32%;
    height: 35%;
    opacity: .38;
    transform: rotate(22deg);
}

.hair-zone.combed .hair-shine span {
    border-left-width: 9px;
    opacity: .9;
}

.hair-zone.style-changing .hair-back,
.hair-zone.style-changing .hair-cap,
.hair-zone.style-changing .hair-fringe,
.hair-zone.style-changing .hair-shine {
    animation: hairStylePop .4s ease-out;
}

@keyframes hairStylePop {
    50% { filter: brightness(1.22) saturate(1.18); transform: scale(1.025); }
}

.hair-zone.style-bob .hair-back {
    top: 8%;
    left: 13%;
    width: 74%;
    height: 65%;
    border-radius: 48% 48% 38% 38%;
}

.hair-zone.style-bob .hair-strands {
    inset: 8% 16% 28%;
}

.hair-zone.style-bob .hair-strands span {
    height: 68%;
}

.hair-zone.style-bob .hair-shine {
    inset: 8% 17% 30%;
}

.hair-zone.style-curls .hair-back {
    top: 5%;
    left: 4%;
    width: 92%;
    height: 86%;
    border-radius: 45%;
    background:
        radial-gradient(circle at 16px 16px, var(--hair-light) 0 5px, transparent 6px),
        radial-gradient(circle at 32px 32px, var(--hair-dark) 0 7px, transparent 8px),
        var(--hair-main);
    background-size: 38px 38px;
}

.hair-zone.style-curls .hair-cap {
    background:
        radial-gradient(circle at 13px 13px, var(--hair-light) 0 4px, transparent 5px),
        radial-gradient(circle at 27px 27px, var(--hair-dark) 0 6px, transparent 7px),
        var(--hair-main);
    background-size: 32px 32px;
}

.hair-zone.style-curls .hair-strands span {
    width: 20%;
    height: 20%;
    border: 7px solid color-mix(in srgb, var(--hair-light) 52%, transparent);
    border-radius: 50%;
    transform: none;
}

.hair-zone.style-curls .hair-strands span:nth-child(1) { top: 34%; left: 2%; }
.hair-zone.style-curls .hair-strands span:nth-child(2) { top: 52%; left: 8%; }
.hair-zone.style-curls .hair-strands span:nth-child(3) { top: 67%; left: 20%; }
.hair-zone.style-curls .hair-strands span:nth-child(4) { top: 67%; left: 60%; }
.hair-zone.style-curls .hair-strands span:nth-child(5) { top: 51%; left: 73%; }
.hair-zone.style-curls .hair-strands span:nth-child(6) { top: 33%; left: 78%; }

.hair-zone.style-curls .hair-shine span {
    width: 20px;
    height: 20px;
    border: 5px solid color-mix(in srgb, var(--hair-light) 58%, transparent);
    border-radius: 50%;
}

.hair-zone.style-curls .hair-shine .shine-one { top: 14%; left: 16%; }
.hair-zone.style-curls .hair-shine .shine-two { top: 34%; right: 9%; }
.hair-zone.style-curls .hair-shine .shine-three { bottom: 13%; left: 24%; }

.hair-zone.style-ponytail .hair-back {
    top: 7%;
    left: 17%;
    width: 66%;
    height: 62%;
    border-radius: 48%;
}

.hair-zone.style-ponytail .hair-back::after {
    position: absolute;
    z-index: 0;
    top: 18%;
    right: -36%;
    width: 48%;
    height: 72%;
    border-radius: 30% 60% 55% 45%;
    background: linear-gradient(90deg, var(--hair-dark), var(--hair-main));
    box-shadow: inset -9px 0 0 color-mix(in srgb, var(--hair-light) 20%, transparent);
    content: "";
    transform: rotate(-13deg);
}

.hair-zone.style-ponytail .hair-strands {
    inset: 8% 18% 30%;
}

.hair-zone.style-ponytail .hair-shine {
    inset: 8% 20% 31%;
}

.hair-zone.accessory-drop-ready {
    border-radius: 46%;
    outline: 6px dashed #ff5f9c;
    outline-offset: -9px;
    background: rgba(255,255,255,.16);
    filter: drop-shadow(0 0 18px rgba(255,95,156,.55));
}

.decorations {
    position: absolute;
    z-index: 15;
    inset: 0;
    pointer-events: none;
}

.hair-decoration {
    position: absolute;
    z-index: 1;
    display: grid;
    width: clamp(42px, 6vw, 60px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    place-items: center;
    background: transparent;
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    line-height: 1;
    filter: drop-shadow(0 4px 3px rgba(60, 31, 48, .25));
    transform: translate(-50%, -50%);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}

.hair-decoration.dragging {
    z-index: 5;
    cursor: grabbing;
    filter: drop-shadow(0 7px 6px rgba(60, 31, 48, .35));
}

.accessory-drag-ghost {
    position: fixed;
    z-index: 1000;
    display: grid;
    width: 68px;
    height: 68px;
    border: 4px solid #fff;
    border-radius: 50%;
    place-items: center;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 32px rgba(76,43,72,.28);
    font-size: 3rem;
    line-height: 1;
    opacity: .9;
    transform: translate(-50%, -50%) rotate(-7deg) scale(.92);
    pointer-events: none;
    transition: transform .12s ease, background .12s ease;
}

.accessory-drag-ghost.over-hair {
    background: #fff4fa;
    transform: translate(-50%, -50%) rotate(5deg) scale(1.18);
}

.salon-brush {
    position: absolute;
    z-index: 20;
    right: 8%;
    bottom: 8%;
    width: 82px;
    height: 182px;
    transform: rotate(16deg);
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: filter .15s ease;
}

.salon-brush.dragging {
    cursor: grabbing;
    filter: drop-shadow(0 7px 7px rgba(67, 39, 91, .28));
}

.brush-grip {
    position: absolute;
    bottom: 0;
    left: 28px;
    width: 27px;
    height: 112px;
    border: 4px solid #6c36ac;
    border-radius: 8px 8px 18px 18px;
    background: linear-gradient(90deg, #9a5fe0, #c083f1 52%, #8d50d2);
}

.brush-grip::after {
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 7px;
    height: 7px;
    border: 2px solid #6c36ac;
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
}

.brush-head {
    position: absolute;
    top: 0;
    left: 7px;
    width: 68px;
    height: 84px;
    border: 5px solid #6c36ac;
    border-radius: 50% 50% 42% 42%;
    background: #f2b2dd;
    box-shadow: inset 8px 0 0 rgba(255,255,255,.25);
}

.brush-head i {
    position: absolute;
    top: 18px;
    width: 3px;
    height: 40px;
    border-radius: 5px;
    background: #653079;
}

.brush-head i:nth-child(1) { left: 14px; }
.brush-head i:nth-child(2) { left: 27px; }
.brush-head i:nth-child(3) { left: 40px; }
.brush-head i:nth-child(4) { left: 53px; }

.salon-tool-picker {
    position: absolute;
    z-index: 24;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 7px;
    padding: 7px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 22px rgba(80,47,90,.16);
    backdrop-filter: blur(8px);
}

.salon-tool-button {
    display: flex;
    width: 67px;
    height: 64px;
    padding: 4px 3px;
    border: 3px solid transparent;
    border-radius: 14px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #67546f;
    background: #fff8fc;
    font-weight: 900;
    box-shadow: 0 3px 0 #eadbea;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.salon-tool-button:hover,
.salon-tool-button.active {
    color: #713eb1;
    border-color: #a97de1;
    background: #f2e9ff;
    transform: translateY(-2px);
}

.salon-tool-button span {
    display: block;
    min-height: 31px;
    font-size: 1.9rem;
    line-height: 1;
}

.salon-tool-button small {
    font-size: .61rem;
}

.dryer-button-icon,
.spray-button-icon {
    position: relative;
    width: 34px;
    height: 25px;
}

.dryer-button-icon::before {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 28px;
    height: 19px;
    border-radius: 45% 55% 55% 45%;
    background: #ff70ae;
    box-shadow: -8px 3px 0 -3px #8b4cc4;
    content: "";
}

.dryer-button-icon::after {
    position: absolute;
    top: 17px;
    left: 18px;
    width: 8px;
    height: 14px;
    border-radius: 3px;
    background: #8b4cc4;
    content: "";
    transform: rotate(-14deg);
}

.spray-button-icon::before {
    position: absolute;
    top: 7px;
    left: 10px;
    width: 17px;
    height: 24px;
    border-radius: 5px 5px 8px 8px;
    background: linear-gradient(#77ddeb, #42aabd);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
    content: "";
}

.spray-button-icon::after {
    position: absolute;
    top: 1px;
    left: 12px;
    width: 18px;
    height: 8px;
    border: 4px solid #6a4177;
    border-left: 0;
    content: "";
}

.salon-dryer-shape,
.salon-spray-shape {
    display: none;
}

.salon-brush.tool-dryer {
    width: 145px;
    height: 105px;
    transform: rotate(-9deg);
}

.salon-brush.tool-spray {
    width: 82px;
    height: 155px;
    transform: rotate(7deg);
}

.tool-dryer .brush-grip,
.tool-dryer .brush-head,
.tool-spray .brush-grip,
.tool-spray .brush-head {
    display: none;
}

.tool-dryer .salon-dryer-shape,
.tool-spray .salon-spray-shape {
    position: absolute;
    inset: 0;
    display: block;
}

.salon-dryer-shape {
    border: 5px solid #6d3aa4;
    border-radius: 45% 55% 52% 48%;
    background: linear-gradient(145deg, #ffacd2, #ef5fa2);
    box-shadow: inset 10px 7px 0 rgba(255,255,255,.28);
}

.dryer-nozzle {
    position: absolute;
    top: 23px;
    left: -42px;
    width: 50px;
    height: 47px;
    border: 5px solid #6d3aa4;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(90deg, #a978d5, #ef8fc1);
}

.dryer-handle {
    position: absolute;
    right: 24px;
    bottom: -70px;
    width: 31px;
    height: 80px;
    border: 5px solid #6d3aa4;
    border-radius: 8px 8px 18px 18px;
    background: linear-gradient(90deg, #b66ae7, #8d4dc7);
    transform: rotate(-13deg);
}

.dryer-air-line {
    position: absolute;
    left: -80px;
    width: 34px;
    height: 5px;
    border-radius: 10px;
    background: #bdeeff;
    opacity: 0;
}

.dryer-air-line.air-one { top: 25px; }
.dryer-air-line.air-two { top: 47px; width: 48px; }
.dryer-air-line.air-three { top: 69px; }

.tool-dryer.dragging .dryer-air-line {
    animation: salonDryerAir .42s ease-out infinite;
}

.tool-dryer.dragging .air-two { animation-delay: -.15s; }
.tool-dryer.dragging .air-three { animation-delay: -.28s; }

@keyframes salonDryerAir {
    from { opacity: 0; transform: translateX(30px) scaleX(.35); }
    45% { opacity: 1; }
    to { opacity: 0; transform: translateX(-35px) scaleX(1.25); }
}

.salon-spray-shape {
    border: 5px solid #476b8f;
    border-radius: 13px 13px 24px 24px;
    background: linear-gradient(90deg, #6fd6e7, #baf4ef 48%, #4db6d1);
    box-shadow: inset 9px 0 0 rgba(255,255,255,.25);
}

.spray-pump {
    position: absolute;
    top: -28px;
    left: 22px;
    width: 50px;
    height: 30px;
    border: 5px solid #476b8f;
    border-left: 0;
    background: #ebf8fb;
}

.spray-label {
    position: absolute;
    top: 42px;
    left: 50%;
    display: grid;
    width: 54px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #9c65ed;
    font-size: 2rem;
    font-style: normal;
    transform: translateX(-50%);
}

.spray-mist {
    position: absolute;
    top: -24px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8f7ff;
    opacity: 0;
}

.mist-one { left: -18px; }
.mist-two { top: -37px; left: -39px; }
.mist-three { top: -18px; left: -55px; }

.tool-spray.dragging .spray-mist {
    animation: salonSprayMist .55s ease-out infinite;
}

.tool-spray.dragging .mist-two { animation-delay: -.18s; }
.tool-spray.dragging .mist-three { animation-delay: -.34s; }

@keyframes salonSprayMist {
    from { opacity: 1; transform: translate(34px, 18px) scale(.4); }
    to { opacity: 0; transform: translate(-30px, -4px) scale(1.4); }
}

.hair-zone.dryer-active .hair-back,
.hair-zone.dryer-active .hair-strands {
    animation: salonHairBreeze .25s ease-in-out infinite alternate;
}

@keyframes salonHairBreeze {
    to { transform: translateX(-5px) skewX(-2deg); }
}

.hair-zone.sprayed .hair-shine span {
    filter: drop-shadow(0 0 8px #fff);
    opacity: 1;
}

.salon-air-particle,
.salon-spray-particle {
    position: absolute;
    z-index: 19;
    border-radius: 50%;
    pointer-events: none;
    animation: salonToolParticle .65s ease-out var(--tool-particle-delay) forwards;
}

.salon-air-particle {
    width: 22px;
    height: 7px;
    border: 3px solid #d7f5ff;
    border-right: 0;
    border-left: 0;
}

.salon-spray-particle {
    width: 9px;
    height: 9px;
    background: #a8efff;
    box-shadow: 0 0 6px #fff;
}

@keyframes salonToolParticle {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
    to {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--tool-particle-x)),
            calc(-50% + var(--tool-particle-y))
        ) scale(1.35);
    }
}

.comb-hint {
    position: absolute;
    z-index: 11;
    right: 5%;
    bottom: 3%;
    padding: 8px 13px;
    border-radius: 30px;
    color: #6a4177;
    background: rgba(255,255,255,.88);
    font-size: .77rem;
    font-weight: 900;
    pointer-events: none;
    transition: opacity .2s ease;
}

.comb-hint span {
    color: var(--pink);
    font-size: 1.1rem;
}

.comb-hint.hidden {
    opacity: 0;
}

.accessory-panel {
    position: relative;
    z-index: 22;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
}

.salon-control-section {
    padding-bottom: 11px;
    border-bottom: 1px solid #f0e8f2;
}

.accessory-title,
.accessory-help {
    display: block;
}

.accessory-title {
    color: var(--ink);
    font-family: "Baloo 2", cursive;
    font-size: 1.12rem;
    font-weight: 800;
}

.accessory-control-section .accessory-title {
    color: #713eb1;
    font-size: 1.48rem;
}

.accessory-help {
    margin-top: 2px;
    color: #8a7a91;
    font-size: .76rem;
    font-weight: 700;
}

.hair-style-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.hair-style-button {
    display: flex;
    min-width: 0;
    padding: 5px 3px;
    border: 2px solid #eee4f2;
    border-radius: 12px;
    flex-direction: column;
    align-items: center;
    color: #75657e;
    background: #fff9fc;
    font-weight: 900;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.hair-style-button span {
    font-size: 1.65rem;
    line-height: 1.1;
}

.hair-style-button small {
    max-width: 100%;
    overflow: hidden;
    font-size: .57rem;
    text-overflow: ellipsis;
}

.hair-style-button:hover,
.hair-style-button.active {
    color: var(--purple);
    border-color: #ad91e3;
    background: #f1eaff;
    transform: translateY(-2px);
}

.hair-color-list {
    display: flex;
    gap: 8px;
    margin-top: 7px;
}

.hair-color-button {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--hair-swatch);
    box-shadow: 0 0 0 1px #dcd2df;
    transition: transform .15s ease, box-shadow .15s ease;
}

.hair-color-button:hover,
.hair-color-button.active {
    transform: scale(1.12);
    box-shadow: 0 0 0 3px var(--purple);
}

.accessory-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.accessory-button {
    display: grid;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid #eee4f2;
    border-radius: 17px;
    place-items: center;
    background: #fff9fc;
    font-size: 2.55rem;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 4px 0 #eadfeb;
    transition: transform .15s ease, border-color .15s ease;
}

.accessory-button:hover,
.accessory-button:active {
    border-color: #bd93ed;
    transform: translateY(2px) scale(1.04);
    box-shadow: 0 2px 0 #dfcfe7;
}

.accessory-button.dragging-source {
    cursor: grabbing;
    opacity: .5;
    transform: scale(.92);
}

.salon-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.salon-finish-button {
    padding: 10px 14px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(90deg, var(--pink), #9a5fe0);
    font-weight: 900;
    box-shadow: 0 5px 0 #7038a4;
}

.salon-finish-button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #7038a4;
}

.salon-celebration {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 28px;
    border-radius: 22px;
    color: #6b388e;
    background: rgba(255,255,255,.95);
    box-shadow: 0 18px 55px rgba(76, 39, 89, .22);
    font-family: "Baloo 2", cursive;
    font-size: 1.55rem;
    font-weight: 800;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
    transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1.3);
    pointer-events: none;
}

.salon-celebration span {
    font-size: 2.7rem;
}

.salon-celebration.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Balloon game */
.balloon-page {
    background: #8edcf7;
}

.balloon-play-section,
.balloon-stage {
    width: 100%;
    height: 100dvh;
}

.balloon-stage {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 17%, rgba(255,255,255,.35) 0 3px, transparent 4px),
        linear-gradient(#65cbf3 0, #bdeeff 72%, #eafaff 100%);
    background-size: 52px 52px, auto;
    touch-action: manipulation;
    user-select: none;
}

.sky-cloud {
    position: absolute;
    z-index: 1;
    width: 130px;
    height: 42px;
    border-radius: 40px;
    background: rgba(255,255,255,.72);
    filter: blur(.2px);
    pointer-events: none;
}

.sky-cloud::before,
.sky-cloud::after {
    position: absolute;
    bottom: 8px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.sky-cloud::before {
    left: 19px;
    width: 58px;
    height: 58px;
}

.sky-cloud::after {
    right: 14px;
    width: 72px;
    height: 72px;
}

.cloud-one { top: 20%; left: 7%; animation: cloudDrift 12s ease-in-out infinite alternate; }
.cloud-two { top: 39%; right: 4%; transform: scale(.72); animation: cloudDrift 15s ease-in-out -4s infinite alternate-reverse; }
.cloud-three { top: 8%; left: 58%; transform: scale(.5); animation: cloudDrift 10s ease-in-out -2s infinite alternate; }

@keyframes cloudDrift {
    to { margin-left: 45px; }
}

.balloon-hills {
    position: absolute;
    z-index: 2;
    right: -8%;
    bottom: -10%;
    left: -8%;
    height: 24%;
    border-radius: 50% 50% 0 0;
    background: #7fd76b;
    box-shadow: inset 0 16px 0 rgba(255,255,255,.16);
    pointer-events: none;
}

.balloon-hills::after {
    position: absolute;
    right: -12%;
    bottom: -8%;
    width: 70%;
    height: 90%;
    border-radius: 50% 50% 0 0;
    background: #5bc78a;
    content: "";
}

.balloon-hud {
    position: absolute;
    z-index: 40;
    top: 14px;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.hud-item,
.combo-item {
    display: flex;
    min-width: 88px;
    padding: 8px 13px;
    border: 2px solid rgba(255,255,255,.78);
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    color: #59627e;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(47, 99, 128, .14);
    backdrop-filter: blur(8px);
}

.hud-item span,
.combo-item span {
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.hud-item strong,
.combo-item strong {
    color: var(--purple);
    font-family: "Baloo 2", cursive;
    font-size: 1.25rem;
    line-height: 1;
}

.combo-item {
    opacity: .58;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.combo-item.active {
    color: #8a4d00;
    background: #fff3a9;
    opacity: 1;
    transform: scale(1.06) rotate(1deg);
}

.combo-item.active strong {
    color: #f07822;
}

.sound-toggle {
    position: absolute;
    z-index: 42;
    top: 14px;
    left: 14px;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 15px;
    place-items: center;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(47, 99, 128, .14);
    font-size: 1.2rem;
}

.floating-balloon {
    position: absolute;
    z-index: 12;
    bottom: -145px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    filter: drop-shadow(0 9px 5px rgba(41, 81, 111, .2));
    animation: balloonRise var(--rise-duration) linear forwards;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.floating-balloon::before {
    position: absolute;
    inset: 0;
    background: var(--balloon-color);
    box-shadow: inset 12px 9px 0 rgba(255,255,255,.2), inset -7px -8px 0 rgba(40,30,90,.1);
    content: "";
}

.floating-balloon:focus-visible {
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 12px #6146e5);
}

.balloon-round::before {
    border-radius: 50%;
}

.balloon-oval::before {
    border-radius: 50%;
}

.balloon-pear::before {
    border-radius: 54% 54% 46% 46% / 43% 43% 60% 60%;
}

.balloon-star::before {
    clip-path: polygon(50% 0, 61% 35%, 98% 36%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 36%, 39% 35%);
}

.balloon-heart::before {
    clip-path: polygon(50% 94%, 9% 53%, 4% 29%, 15% 8%, 36% 3%, 50% 21%, 64% 3%, 85% 8%, 96% 29%, 91% 53%);
}

.balloon-shine {
    position: absolute;
    z-index: 2;
    top: 14%;
    left: 23%;
    width: 19%;
    height: 27%;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    transform: rotate(24deg);
    pointer-events: none;
}

.balloon-knot {
    position: absolute;
    z-index: 2;
    bottom: -9px;
    left: 50%;
    width: 17px;
    height: 14px;
    background: var(--balloon-color);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    transform: translateX(-50%);
    pointer-events: none;
}

.balloon-string {
    position: absolute;
    z-index: -1;
    top: calc(100% + 6px);
    left: 50%;
    width: 34px;
    height: 80px;
    border-left: 2px solid rgba(77, 79, 102, .55);
    border-radius: 50%;
    transform: translateX(-1px) rotate(7deg);
    pointer-events: none;
}

@keyframes balloonRise {
    0% { transform: translate3d(0, 0, 0) rotate(-3deg); }
    25% { transform: translate3d(calc(var(--sway) * .4), -30vh, 0) rotate(4deg); }
    55% { transform: translate3d(calc(var(--sway) * -.25), -70vh, 0) rotate(-4deg); }
    100% { transform: translate3d(var(--sway), -125vh, 0) rotate(5deg); }
}

.floating-balloon.popped {
    animation: balloonPop .13s ease-out forwards;
    pointer-events: none;
}

@keyframes balloonPop {
    to { opacity: 0; transform: scale(1.55); }
}

.burst-particle,
.pop-ring,
.pop-word {
    position: absolute;
    z-index: 30;
    pointer-events: none;
}

.burst-particle {
    width: 10px;
    height: 10px;
    color: var(--burst-color);
    background: var(--burst-color);
    animation: burstOut .72s cubic-bezier(.1,.65,.3,1) forwards;
}

.burst-particle.effect-confetti {
    width: 8px;
    height: 15px;
    border-radius: 2px;
}

.burst-particle.effect-sparkle,
.burst-particle.effect-symbol {
    width: auto;
    height: auto;
    background: transparent;
    font-size: 18px;
    font-weight: 900;
}

.burst-particle.effect-bubble {
    width: 13px;
    height: 13px;
    border: 3px solid var(--burst-color);
    border-radius: 50%;
    background: transparent;
}

@keyframes burstOut {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.4) rotate(0); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(var(--spin)); }
}

.pop-ring {
    width: 24px;
    height: 24px;
    border: 5px solid var(--burst-color);
    border-radius: 50%;
    animation: popRing .45s ease-out forwards;
}

@keyframes popRing {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

.pop-word {
    font-family: "Baloo 2", cursive;
    font-size: clamp(1.1rem, 3vw, 1.65rem);
    font-weight: 900;
    text-shadow: 2px 2px 0 #fff;
    white-space: nowrap;
    animation: popWord .65s ease-out forwards;
}

@keyframes popWord {
    from { opacity: 0; transform: translate(-50%, -20%) scale(.5) rotate(-8deg); }
    35% { opacity: 1; transform: translate(-50%, -75%) scale(1.15) rotate(4deg); }
    to { opacity: 0; transform: translate(-50%, -145%) scale(1) rotate(-2deg); }
}

.balloon-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #fff;
    text-align: center;
    background: rgba(39, 43, 86, .72);
    backdrop-filter: blur(7px);
    transition: opacity .25s ease;
}

.balloon-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.overlay-balloon-cluster {
    display: flex;
    align-items: flex-end;
    font-size: clamp(3.2rem, 8vw, 5.5rem);
}

.overlay-balloon-cluster span:first-child { transform: rotate(-12deg) translateY(12px); }
.overlay-balloon-cluster span:last-child { transform: rotate(12deg) translateY(12px); }

.balloon-overlay h1 {
    margin: 6px 0 2px;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.4rem, 7vw, 4.6rem);
    font-weight: 800;
    line-height: 1;
}

.balloon-overlay p {
    max-width: 510px;
    color: #edfaff;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    font-weight: 700;
}

.balloon-start-button {
    padding: 13px 22px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: var(--pink);
    font-weight: 900;
    box-shadow: 0 6px 0 #c82e64;
}

.balloon-start-button:hover {
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #c82e64;
}

/* Jump game */
.jump-page {
    background: #66cef4;
}

.jump-play-section,
.jump-stage {
    width: 100%;
    height: 100dvh;
}

.jump-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    background-color: #5fcaf3;
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,.32) 0 3px, transparent 4px),
        linear-gradient(#5fcaf3 0, #c2f1ff 72%, #f4fcff 100%);
    background-size: 58px 58px, auto;
    transition: background-color 1.2s ease, filter 1.2s ease;
    touch-action: manipulation;
    user-select: none;
}

.jump-stage.weather-rain {
    background-color: #647f9b;
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,.12) 0 3px, transparent 4px),
        linear-gradient(#657c95 0, #9db3c6 70%, #d5e2e7 100%);
}

.jump-stage.weather-night {
    background-color: #152653;
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,.12) 0 2px, transparent 3px),
        linear-gradient(#111d48 0, #26396e 66%, #596b98 100%);
}

.jump-stage.weather-snow {
    background-color: #9fc9e5;
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,.5) 0 3px, transparent 4px),
        linear-gradient(#91bddb 0, #d5e9f4 68%, #f7fbff 100%);
}

.jump-stage:focus-visible {
    box-shadow: inset 0 0 0 5px rgba(255,212,92,.85);
}

.jump-stars {
    position: absolute;
    z-index: 1;
    inset: 8% 5% 42%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.weather-night .jump-stars {
    opacity: 1;
}

.jump-stars i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff8b7;
    box-shadow: 0 0 9px #fff;
    animation: jumpStarTwinkle 1.4s ease-in-out infinite alternate;
}

.jump-stars i:nth-child(1) { top: 8%; left: 7%; }
.jump-stars i:nth-child(2) { top: 28%; left: 22%; animation-delay: -.5s; }
.jump-stars i:nth-child(3) { top: 4%; left: 38%; animation-delay: -.9s; }
.jump-stars i:nth-child(4) { top: 36%; left: 48%; animation-delay: -.2s; }
.jump-stars i:nth-child(5) { top: 15%; left: 62%; animation-delay: -.7s; }
.jump-stars i:nth-child(6) { top: 45%; left: 75%; animation-delay: -1.1s; }
.jump-stars i:nth-child(7) { top: 7%; left: 86%; animation-delay: -.35s; }
.jump-stars i:nth-child(8) { top: 32%; left: 94%; animation-delay: -.8s; }

@keyframes jumpStarTwinkle {
    to { opacity: .3; transform: scale(.55); }
}

.jump-sun {
    position: absolute;
    z-index: 1;
    top: 11%;
    right: 12%;
    width: clamp(70px, 10vw, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffe169;
    box-shadow: 0 0 0 18px rgba(255,225,105,.2), 0 0 55px rgba(255,204,69,.45);
    transition: background 1s ease, box-shadow 1s ease, transform 1s ease;
}

.weather-rain .jump-sun {
    background: #d9e3e8;
    box-shadow: 0 0 35px rgba(255,255,255,.2);
    transform: scale(.8);
}

.weather-night .jump-sun {
    background: #fff9d7;
    box-shadow: 0 0 0 12px rgba(255,255,225,.1), 0 0 48px rgba(255,255,220,.55);
    transform: scale(.82);
}

.weather-night .jump-sun::after {
    position: absolute;
    top: 23%;
    left: 20%;
    width: 19%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(205,210,204,.55);
    box-shadow: 29px 23px 0 -2px rgba(205,210,204,.4);
    content: "";
}

.jump-cloud {
    position: absolute;
    z-index: 2;
    width: 145px;
    height: 44px;
    border-radius: 50px;
    background: rgba(255,255,255,.78);
    pointer-events: none;
    transition: background 1s ease, opacity 1s ease;
}

.weather-rain .jump-cloud {
    background: rgba(68,82,102,.88);
}

.weather-night .jump-cloud {
    opacity: .28;
}

.weather-snow .jump-cloud {
    background: rgba(242,249,255,.95);
}

.jump-cloud::before,
.jump-cloud::after {
    position: absolute;
    bottom: 7px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.jump-cloud::before { left: 20px; width: 61px; height: 61px; }
.jump-cloud::after { right: 13px; width: 78px; height: 78px; }
.jump-cloud-one { top: 24%; left: 12%; animation: jumpCloudMove 16s ease-in-out infinite alternate; }
.jump-cloud-two { top: 40%; right: 17%; transform: scale(.62); animation: jumpCloudMove 13s ease-in-out -5s infinite alternate-reverse; }

@keyframes jumpCloudMove {
    to { margin-left: 65px; }
}

.jump-mountains {
    position: absolute;
    z-index: 2;
    right: -6%;
    bottom: 13%;
    left: -6%;
    height: 34%;
    clip-path: polygon(0 100%, 0 78%, 10% 35%, 18% 76%, 29% 12%, 41% 75%, 51% 31%, 62% 78%, 74% 5%, 86% 74%, 94% 39%, 100% 75%, 100% 100%);
    pointer-events: none;
}

.mountains-back {
    bottom: 20%;
    background: #8ac8c8;
    opacity: .65;
    transform: scale(1.15);
}

.mountains-front {
    background: linear-gradient(#56b67e, #44a16c);
}

.weather-rain .mountains-back { background: #668591; }
.weather-rain .mountains-front { background: linear-gradient(#567c70, #456b60); }
.weather-night .mountains-back { background: #263a61; opacity: .82; }
.weather-night .mountains-front { background: linear-gradient(#304a59, #243d48); }
.weather-snow .mountains-back { background: #b4cee0; opacity: .85; }
.weather-snow .mountains-front { background: linear-gradient(#f8fcff 0 17%, #89aaba 18%, #6f929f); }

.jump-weather-layer {
    position: absolute;
    z-index: 30;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.jump-raindrop,
.jump-snowflake {
    position: absolute;
    top: -12%;
    display: block;
    pointer-events: none;
}

.jump-raindrop {
    width: 3px;
    height: clamp(28px, 5vh, 50px);
    border-radius: 4px;
    background: linear-gradient(transparent, rgba(211,239,255,.95));
    transform: rotate(12deg);
    animation: jumpRainFall var(--weather-duration) linear var(--weather-delay) infinite;
}

.jump-snowflake {
    width: var(--weather-size);
    height: var(--weather-size);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.9);
    animation: jumpSnowFall var(--weather-duration) linear var(--weather-delay) infinite;
}

@keyframes jumpRainFall {
    to { transform: translate3d(-45px, 125vh, 0) rotate(12deg); }
}

@keyframes jumpSnowFall {
    to { transform: translate3d(var(--weather-drift), 120vh, 0) rotate(360deg); }
}

.jump-hud {
    position: absolute;
    z-index: 35;
    top: 14px;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.jump-hud div {
    display: flex;
    min-width: 90px;
    padding: 8px 13px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    color: #59627e;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(47, 99, 128, .14);
    backdrop-filter: blur(8px);
}

.jump-hud span {
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.jump-hud strong {
    color: #167b56;
    font-family: "Baloo 2", cursive;
    font-size: 1.24rem;
    line-height: 1;
}

.jump-weather-status {
    position: absolute;
    z-index: 36;
    top: 15px;
    right: 18px;
    display: flex;
    min-width: 92px;
    padding: 7px 12px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 18px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #354d68;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(47,99,128,.14);
    pointer-events: none;
}

.jump-weather-status span {
    font-size: 1.45rem;
    line-height: 1;
}

.jump-weather-status strong {
    font-family: "Baloo 2", cursive;
    font-size: .95rem;
}

.jump-weather-status.changing {
    animation: jumpWeatherAnnounce 1.5s cubic-bezier(.2,1.4,.4,1);
}

@keyframes jumpWeatherAnnounce {
    0% { opacity: 0; transform: translateY(-25px) scale(.65); }
    22%, 72% { opacity: 1; transform: translateY(0) scale(1.12); }
    100% { transform: scale(1); }
}

.jump-tip {
    position: absolute;
    z-index: 32;
    bottom: 34%;
    left: clamp(20px, 8vw, 110px);
    padding: 9px 15px;
    border-radius: 30px;
    color: #275f76;
    background: rgba(255,255,255,.9);
    box-shadow: 0 8px 24px rgba(44, 97, 119, .13);
    font-size: .82rem;
    font-weight: 900;
    pointer-events: none;
    transition: opacity .2s ease;
}

.jump-tip span {
    font-size: 1.2rem;
}

.jump-tip.hidden {
    opacity: 0;
}

.jump-runner {
    position: absolute;
    z-index: 25;
    bottom: calc(13% - 2px);
    left: clamp(28px, 8vw, 115px);
    width: 122px;
    height: 120px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    filter: drop-shadow(0 8px 4px rgba(30,71,94,.24));
    transform: translateY(calc(var(--jump-height, 0px) * -1));
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.jump-runner:focus-visible {
    filter: drop-shadow(0 0 7px #fff) drop-shadow(0 0 12px #ffd45c);
}

.speedster-character {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: center;
}

.jump-stage.running .jump-runner:not(.jumping) .speedster-character {
    animation: speedsterBob .24s ease-in-out infinite alternate;
}

@keyframes speedsterBob {
    to { transform: translateY(-4px) rotate(-2deg); }
}

.jump-runner.jumping .speedster-character {
    animation: speedsterSpin .58s linear infinite;
}

.jump-runner.double-jumping {
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.95))
        drop-shadow(0 0 15px rgba(255,212,92,.95))
        drop-shadow(0 8px 4px rgba(30,71,94,.2));
}

.jump-runner.double-jumping .speedster-character {
    animation: speedsterDoubleSpin .34s linear infinite;
}

@keyframes speedsterSpin {
    to { transform: rotate(360deg); }
}

@keyframes speedsterDoubleSpin {
    50% { transform: rotate(180deg) scale(1.12); }
    to { transform: rotate(360deg) scale(1); }
}

.jump-runner.crashed .speedster-character {
    transform: rotate(-18deg) translateY(10px);
}

.speed-spike {
    position: absolute;
    z-index: 1;
    width: 56px;
    height: 42px;
    background: #176bc2;
    clip-path: polygon(0 50%, 100% 0, 78% 100%);
}

.spike-one { top: 13px; left: 3px; transform: rotate(9deg); }
.spike-two { top: 34px; left: -5px; transform: rotate(-5deg); }
.spike-three { top: 56px; left: 1px; transform: rotate(-18deg); }
.spike-four { top: 72px; left: 16px; transform: rotate(-33deg); }

.speed-body {
    position: absolute;
    z-index: 3;
    right: 15px;
    bottom: 14px;
    width: 77px;
    height: 78px;
    border-radius: 48%;
    background: #2486e5;
    box-shadow: inset -10px -5px 0 #1568be;
}

.speed-body::after {
    position: absolute;
    right: 12px;
    bottom: 9px;
    width: 43px;
    height: 47px;
    border-radius: 50%;
    background: #f1be87;
    content: "";
}

.speed-head {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 4px;
    width: 78px;
    height: 76px;
    border-radius: 52% 48% 45% 50%;
    background: #2486e5;
    box-shadow: inset -8px -2px 0 #1568be;
}

.speed-face {
    position: absolute;
    right: -2px;
    bottom: 4px;
    width: 57px;
    height: 54px;
    border-radius: 44% 54% 48% 45%;
    background: #f2bd85;
}

.speed-eye {
    position: absolute;
    z-index: 2;
    top: 15px;
    right: 15px;
    width: 17px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
}

.speed-pupil {
    position: absolute;
    z-index: 3;
    top: 21px;
    right: 18px;
    width: 9px;
    height: 14px;
    border-radius: 50%;
    background: #263047;
    box-shadow: inset 3px 2px 0 #fff;
}

.speed-nose {
    position: absolute;
    z-index: 4;
    right: -8px;
    top: 39px;
    width: 18px;
    height: 14px;
    border-radius: 50%;
    background: #263047;
}

.speed-smile {
    position: absolute;
    z-index: 3;
    right: 11px;
    bottom: 12px;
    width: 19px;
    height: 10px;
    border-bottom: 3px solid #8d4a3f;
    border-radius: 50%;
}

.speed-ear {
    position: absolute;
    z-index: 4;
    top: -4px;
    left: 17px;
    width: 24px;
    height: 28px;
    background: #2486e5;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.speed-ear::after {
    position: absolute;
    inset: 8px 6px 2px;
    background: #eaa977;
    clip-path: inherit;
    content: "";
}

.speed-arm {
    position: absolute;
    z-index: 6;
    right: 4px;
    bottom: 34px;
    width: 50px;
    height: 14px;
    border-radius: 12px;
    background: #f2bd85;
    transform: rotate(-24deg);
}

.speed-leg {
    position: absolute;
    z-index: 7;
    bottom: 12px;
    width: 42px;
    height: 13px;
    border-radius: 10px;
    background: #176bc2;
}

.leg-one { right: 10px; transform: rotate(10deg); }
.leg-two { right: 39px; transform: rotate(-10deg); }

.speed-shoe {
    position: absolute;
    z-index: 8;
    bottom: 4px;
    width: 50px;
    height: 24px;
    border-radius: 60% 45% 35% 40%;
    background: #f04f45;
    box-shadow: inset 0 -7px 0 #fff, inset -6px 0 0 #c73535;
}

.shoe-one { right: -2px; }
.shoe-two { right: 32px; }

.jump-stage.running .jump-runner:not(.jumping) .shoe-one {
    animation: shoeRun .22s linear infinite alternate;
}

.jump-stage.running .jump-runner:not(.jumping) .shoe-two {
    animation: shoeRun .22s linear -.11s infinite alternate;
}

@keyframes shoeRun {
    to { transform: translateX(-12px) rotate(-12deg); }
}

.jump-obstacle {
    position: absolute;
    z-index: 20;
    bottom: calc(13% - 1px);
    display: grid;
    place-items: center;
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 7px 2px rgba(65,54,44,.25));
}

.obstacle-log { font-size: 58px; }
.obstacle-barrier { font-size: 58px; }

.jump-ground {
    position: absolute;
    z-index: 15;
    right: 0;
    bottom: 0;
    left: 0;
    height: 13%;
    min-height: 70px;
    border-top: 10px solid #58b94f;
    background: #93633c;
    box-shadow: inset 0 12px 0 #6fbb4c;
    transition: border-color 1s ease, background 1s ease, box-shadow 1s ease;
}

.weather-rain .jump-ground {
    border-top-color: #4d8b4e;
    background: #685748;
    box-shadow: inset 0 12px 0 #527f4d;
}

.weather-night .jump-ground {
    border-top-color: #305d43;
    background: #4b3a36;
    box-shadow: inset 0 12px 0 #284e3a;
}

.weather-snow .jump-ground {
    border-top-color: #f7fcff;
    background: #7b6659;
    box-shadow: inset 0 14px 0 #dcecf3;
}

.ground-stripes {
    position: absolute;
    inset: 31px 0 0;
    opacity: .32;
    background: repeating-linear-gradient(110deg, transparent 0 55px, rgba(255,255,255,.45) 56px 70px);
    animation: groundMove .7s linear infinite paused;
}

.jump-stage.running .ground-stripes {
    animation-play-state: running;
}

@keyframes groundMove {
    to { background-position-x: -140px; }
}

.runner-dust {
    position: absolute;
    z-index: 24;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    animation: dustFly .48s ease-out forwards;
    pointer-events: none;
}

@keyframes dustFly {
    to {
        opacity: 0;
        transform: translate(var(--dust-x), var(--dust-y)) scale(1.8);
    }
}

.crash-star {
    position: absolute;
    z-index: 48;
    color: #ffd447;
    font-size: 25px;
    font-weight: 900;
    text-shadow: 2px 2px 0 #fff;
    animation: crashBurst .65s ease-out forwards;
    pointer-events: none;
}

@keyframes crashBurst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    to { opacity: 0; transform: translate(calc(-50% + var(--crash-x)), calc(-50% + var(--crash-y))) rotate(160deg) scale(1.2); }
}

.jump-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #fff;
    text-align: center;
    background: rgba(29, 49, 77, .76);
    backdrop-filter: blur(7px);
    transition: opacity .25s ease;
}

.jump-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.jump-overlay-icon {
    font-size: clamp(3rem, 8vw, 5.5rem);
}

.jump-overlay h1 {
    margin: 4px 0 2px;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    font-weight: 800;
    line-height: 1;
}

.jump-overlay p {
    max-width: 550px;
    color: #e8f9ff;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    font-weight: 700;
}

.jump-start-button {
    padding: 13px 22px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: #20ae70;
    font-weight: 900;
    box-shadow: 0 6px 0 #11784b;
}

.jump-start-button:hover {
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #11784b;
}

/* Supermarket game */
.market-page {
    background: #fff2d6;
}

.market-play-section,
.market-stage {
    width: 100%;
    height: 100dvh;
}

.market-stage {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.5) 0 4px, transparent 5px),
        linear-gradient(#fff2d8, #d9f3e8);
    background-size: 54px 54px, auto;
    touch-action: none;
    user-select: none;
}

.market-awning {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 70px;
    border-bottom: 8px solid #e35151;
    background: repeating-linear-gradient(90deg, #ef5959 0 72px, #fff4df 72px 144px);
    box-shadow: 0 7px 18px rgba(122,72,56,.16);
}

.market-sign {
    position: absolute;
    z-index: 4;
    top: 14px;
    left: 50%;
    padding: 8px 20px;
    border: 4px solid #fff;
    border-radius: 14px;
    color: #fff;
    background: #2ca77c;
    font-family: "Baloo 2", cursive;
    font-size: clamp(1rem, 2.4vw, 1.45rem);
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 5px 0 #167557;
    transform: translateX(-50%);
}

.market-order-card {
    position: absolute;
    z-index: 35;
    top: 82px;
    left: 22px;
    display: flex;
    min-width: 315px;
    padding: 12px 18px;
    border: 6px solid #f0a23c;
    border-radius: 24px;
    flex-direction: column;
    background: linear-gradient(135deg, #fff, #fff7cf);
    box-shadow:
        0 9px 0 rgba(173,96,31,.16),
        0 16px 35px rgba(100,69,48,.14),
        0 0 0 5px rgba(255,225,102,.22);
}

.market-order-card.new-order {
    animation: newOrderPop .38s ease-out;
}

@keyframes newOrderPop {
    50% { transform: scale(1.08) rotate(-2deg); }
}

.order-label {
    color: #b35b14;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.market-order-card strong {
    display: flex;
    gap: 13px;
    align-items: center;
    color: #5b3c2e;
    font-family: "Baloo 2", cursive;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1;
}

#targetEmoji {
    display: grid;
    width: 82px;
    height: 82px;
    border: 4px solid #ffd15c;
    border-radius: 22px;
    place-items: center;
    background: #fff;
    box-shadow: 0 6px 0 rgba(206,129,28,.15);
    font-size: 3.85rem;
    animation: targetItemPulse 1.8s ease-in-out infinite;
}

@keyframes targetItemPulse {
    50% { transform: scale(1.08) rotate(3deg); }
}

.market-score-card {
    position: absolute;
    z-index: 35;
    top: 88px;
    right: 22px;
    display: flex;
    gap: 7px;
}

.market-score-card div {
    display: flex;
    min-width: 86px;
    padding: 8px 12px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 15px;
    flex-direction: column;
    align-items: center;
    color: #736558;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(89,70,53,.12);
}

.market-score-card span {
    font-size: .57rem;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.market-score-card strong {
    color: #e57623;
    font-family: "Baloo 2", cursive;
    font-size: 1.2rem;
    line-height: 1;
}

.market-shelf {
    position: absolute;
    z-index: 8;
    right: 3%;
    left: 3%;
    height: clamp(145px, 24vh, 190px);
    border: 7px solid #d89a62;
    border-radius: 15px;
    background:
        linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68)),
        repeating-linear-gradient(90deg, #f6d7a9 0 52px, #ecc58d 53px 55px);
    box-shadow: 0 10px 0 #a56a3d, 0 17px 30px rgba(105,69,43,.14);
}

.shelf-top { top: 27%; }
.shelf-bottom { top: calc(27% + clamp(145px, 24vh, 190px) + 8px); }

.shelf-board {
    position: absolute;
    right: -7px;
    bottom: 0;
    left: -7px;
    height: 18px;
    border-top: 5px solid #f1bb78;
    background: #b87845;
}

.shelf-label {
    position: absolute;
    z-index: 2;
    top: -19px;
    left: 18px;
    padding: 3px 9px;
    border-radius: 8px 8px 0 0;
    color: #fff;
    background: #e8883f;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .8px;
}

.market-item {
    position: absolute;
    z-index: 18;
    display: grid;
    width: 90px;
    height: 90px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 18px;
    place-items: center;
    background: rgba(255,255,255,.93);
    box-shadow: 0 6px 0 rgba(133,82,46,.13), 0 10px 18px rgba(79,58,43,.1);
    font-size: 3.55rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    transition: transform .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}

.market-item:hover {
    transform: translateY(-3px);
}

.market-item:focus-visible {
    outline: 5px solid var(--purple);
    outline-offset: 2px;
}

.market-item.dragging {
    z-index: 45;
    cursor: grabbing;
    transform: scale(1.16) rotate(-4deg);
    box-shadow: 0 12px 24px rgba(76,51,37,.24);
}

.market-item.wrong {
    animation: marketWrong .38s ease-in-out;
}

@keyframes marketWrong {
    25%, 75% { transform: translateX(-9px) rotate(-5deg); }
    50% { transform: translateX(9px) rotate(5deg); }
}

.shopping-cart-zone {
    position: absolute;
    z-index: 25;
    right: 3%;
    bottom: 2%;
    display: flex;
    width: clamp(190px, 24vw, 280px);
    height: clamp(130px, 20vh, 185px);
    border: 5px dashed #3da5d9;
    border-radius: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #24799f;
    background: rgba(255,255,255,.64);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
    pointer-events: none;
}

.cart-drop-label {
    padding: 4px 10px;
    border-radius: 20px;
    background: #fff;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .7px;
}

.market-cart-emoji {
    margin-top: -4px;
    font-size: clamp(4.2rem, 9vw, 6.5rem);
    filter: drop-shadow(0 8px 3px rgba(50,66,79,.18));
}

.shopping-cart-zone.ready {
    border-color: #25b978;
    background: rgba(204,255,226,.87);
    transform: scale(1.06);
}

.shopping-cart-zone.celebrate {
    animation: cartCelebrate .45s ease-out;
}

.shopping-cart-zone.wrong {
    border-color: #ef5d5d;
    background: rgba(255,218,218,.85);
    animation: marketWrong .38s ease-in-out;
}

@keyframes cartCelebrate {
    45% { transform: scale(1.1) rotate(3deg); }
}

.market-drag-tip {
    position: absolute;
    z-index: 30;
    bottom: 9%;
    left: 5%;
    padding: 9px 14px;
    border-radius: 30px;
    color: #6f5b4c;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 20px rgba(88,69,54,.12);
    font-size: .8rem;
    font-weight: 900;
    pointer-events: none;
    transition: opacity .2s ease;
}

.market-drag-tip.hidden {
    opacity: 0;
}

.market-feedback {
    position: absolute;
    z-index: 55;
    top: 18%;
    left: 50%;
    padding: 9px 18px;
    border-radius: 30px;
    color: #fff;
    font-family: "Baloo 2", cursive;
    font-size: 1.1rem;
    font-weight: 800;
    opacity: 0;
    transform: translate(-50%, -10px) scale(.8);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.market-feedback.visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.market-feedback.success { background: #24a96e; }
.market-feedback.wrong { background: #e65757; }

.market-particle {
    position: absolute;
    z-index: 54;
    color: #ffb52f;
    font-size: 23px;
    font-weight: 900;
    text-shadow: 2px 2px 0 #fff;
    animation: marketBurst .7s ease-out forwards;
    pointer-events: none;
}

@keyframes marketBurst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    to { opacity: 0; transform: translate(calc(-50% + var(--market-x)), calc(-50% + var(--market-y))) rotate(180deg) scale(1.25); }
}

.market-success-visual {
    position: absolute;
    z-index: 65;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.96) 0 12%, rgba(255,241,113,.82) 25%, rgba(92,224,151,.5) 48%, transparent 72%);
}

.market-success-visual.visible {
    animation: marketScreenCelebrate 1.4s ease-out both;
}

.market-success-badge {
    position: relative;
    display: grid;
    width: clamp(150px, 35vmin, 285px);
    aspect-ratio: 1;
    place-items: center;
    border: clamp(7px, 1.3vmin, 13px) solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff9a9, #ffd83d);
    box-shadow:
        0 14px 0 rgba(178,114,17,.25),
        0 18px 45px rgba(61,62,56,.28);
}

.market-success-visual.visible .market-success-badge {
    animation: marketBadgePop 1.15s cubic-bezier(.2,1.5,.35,1) both;
}

.market-success-badge::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -35%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,.92) 0 5deg,
        transparent 5deg 18deg
    );
    animation: marketSuccessRays 4s linear infinite;
}

.market-success-emoji {
    font-size: clamp(5.5rem, 19vmin, 10.5rem);
    line-height: 1;
    filter: drop-shadow(0 8px 2px rgba(135,83,19,.2));
}

.market-success-check {
    position: absolute;
    right: -7%;
    bottom: 1%;
    display: grid;
    width: 34%;
    aspect-ratio: 1;
    place-items: center;
    border: 6px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #25b96f;
    box-shadow: 0 5px 0 #13844c;
    font-family: Arial, sans-serif;
    font-size: clamp(2rem, 7vmin, 4rem);
    font-weight: 900;
}

.market-screen-confetti {
    position: absolute;
    z-index: 66;
    top: -12%;
    font-size: clamp(1.25rem, 4vmin, 2.5rem);
    line-height: 1;
    text-shadow: 2px 2px 0 #fff;
    pointer-events: none;
    animation: marketConfettiFall var(--confetti-duration) ease-in var(--confetti-delay) forwards;
}

@keyframes marketScreenCelebrate {
    0% { opacity: 0; transform: scale(.8); }
    15%, 68% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

@keyframes marketBadgePop {
    0% { opacity: 0; transform: scale(.1) rotate(-18deg); }
    35% { opacity: 1; transform: scale(1.15) rotate(6deg); }
    58% { transform: scale(.96) rotate(-3deg); }
    75%, 100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes marketSuccessRays {
    to { transform: rotate(360deg); }
}

@keyframes marketConfettiFall {
    0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0); }
    12% { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate3d(var(--confetti-drift), 118vh, 0) rotate(var(--confetti-spin));
    }
}

.market-overlay {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #fff;
    text-align: center;
    background: rgba(65,53,67,.76);
    backdrop-filter: blur(7px);
    transition: opacity .25s ease;
}

.market-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.market-overlay-icon {
    font-size: clamp(3.5rem, 9vw, 6rem);
}

.market-overlay h1 {
    margin: 3px 0;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.3rem, 7vw, 4.7rem);
    font-weight: 800;
    line-height: 1;
}

.market-overlay p {
    max-width: 540px;
    color: #fff5e8;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    font-weight: 700;
}

.market-start-button {
    padding: 13px 22px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: #ee812e;
    font-weight: 900;
    box-shadow: 0 6px 0 #ac5019;
}

.market-start-button:hover {
    color: #fff;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #ac5019;
}

/* Aquarium */
.aquarium-page {
    background: #ddf8fb;
}

.aquarium-play-section {
    background:
        radial-gradient(circle at 10% 15%, rgba(255,220,100,.3) 0 85px, transparent 87px),
        radial-gradient(circle at 91% 76%, rgba(71,190,213,.2) 0 145px, transparent 147px),
        #e7fbfc;
}

.aquarium-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 0;
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(41,104,121,.17);
}

.aquarium-tank {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 10px solid #6c8798;
    border-top-width: 17px;
    border-radius: 24px 24px 38px 38px;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.34) 0 3px, transparent 4px),
        linear-gradient(180deg, #6dd8ed 0, #2b9fc6 74%, #1684ac 100%);
    background-size: 48px 48px, auto;
    box-shadow:
        inset 15px 0 20px rgba(255,255,255,.16),
        inset -15px 0 20px rgba(0,75,110,.12),
        inset 0 0 0 5px rgba(255,255,255,.28);
    touch-action: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.aquarium-tank.drop-ready {
    border-color: #ff73ad;
    box-shadow:
        inset 0 0 0 8px rgba(255,255,255,.42),
        0 0 0 7px rgba(255,115,173,.3),
        0 0 35px rgba(255,115,173,.42);
}

.tank-light {
    position: absolute;
    z-index: 1;
    top: -10%;
    left: 12%;
    width: 25%;
    height: 120%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-15deg);
    pointer-events: none;
}

.tank-sand {
    position: absolute;
    z-index: 3;
    right: -5%;
    bottom: -3%;
    left: -5%;
    height: 17%;
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(circle, rgba(153,104,54,.28) 0 2px, transparent 3px) 0 0 / 24px 18px,
        #ebc97f;
    box-shadow: inset 0 9px 0 rgba(255,242,183,.35);
    pointer-events: none;
}

.tank-rock {
    position: absolute;
    z-index: 4;
    bottom: 7%;
    border-radius: 50% 48% 35% 42%;
    background: linear-gradient(145deg, #a2b2af, #657d7c);
    box-shadow: inset 8px 6px 0 rgba(255,255,255,.18);
    pointer-events: none;
}

.rock-one {
    left: 8%;
    width: 72px;
    height: 48px;
    transform: rotate(-7deg);
}

.rock-two {
    right: 12%;
    width: 55px;
    height: 37px;
    transform: rotate(10deg);
}

.tank-bubbles {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.tank-bubbles span {
    position: absolute;
    bottom: -20px;
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255,255,255,.62);
    border-radius: 50%;
    animation: tankBubbleRise 7s linear infinite;
}

.tank-bubbles span:nth-child(1) { left: 13%; animation-delay: -1s; }
.tank-bubbles span:nth-child(2) { left: 33%; width: 10px; height: 10px; animation-delay: -4s; }
.tank-bubbles span:nth-child(3) { left: 59%; width: 22px; height: 22px; animation-delay: -2.5s; }
.tank-bubbles span:nth-child(4) { left: 76%; width: 12px; height: 12px; animation-delay: -5.5s; }
.tank-bubbles span:nth-child(5) { left: 89%; animation-delay: -3.4s; }

@keyframes tankBubbleRise {
    to { opacity: 0; transform: translateY(-90vh) translateX(25px); }
}

.aquarium-drop-hint {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(80%, 370px);
    padding: 16px 20px;
    border: 3px dashed rgba(255,255,255,.72);
    border-radius: 22px;
    flex-direction: column;
    align-items: center;
    color: #fff;
    background: rgba(10,106,143,.28);
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity .2s ease;
}

.aquarium-drop-hint span {
    font-size: 2rem;
}

.aquarium-drop-hint.hidden {
    opacity: 0;
}

.tank-items {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
}

.tank-item {
    position: absolute;
    display: grid;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 0;
    place-items: center;
    background: transparent;
    font-size: 4.45rem;
    line-height: 1;
    filter: drop-shadow(0 7px 3px rgba(7,63,84,.25));
    transform: scaleX(var(--swim-direction, 1));
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}

.tank-decor {
    font-size: 4.65rem;
    transform: none;
}

.tank-item.dragging {
    z-index: 20;
    filter: drop-shadow(0 12px 7px rgba(7,63,84,.34));
    transform: scale(1.18) rotate(-5deg);
    cursor: grabbing;
}

.tank-item:focus-visible {
    outline: 5px solid #fff;
    border-radius: 50%;
}

.aquarium-palette {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: flex-start;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
}

.aquarium-palette-section {
    padding-bottom: 14px;
    border-bottom: 1px solid #e4eef0;
}

.aquarium-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.aquarium-section-heading strong {
    color: #176a83;
    font-family: "Baloo 2", cursive;
    font-size: 1.25rem;
    font-weight: 800;
}

.aquarium-section-heading span {
    color: #84959b;
    font-size: .63rem;
    font-weight: 800;
}

.aquarium-option-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-top: 7px;
}

.aquarium-option {
    display: grid;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid #dcebed;
    border-radius: 17px;
    place-items: center;
    background: #f4fcfd;
    box-shadow: 0 4px 0 #d4e5e7;
    font-size: 3rem;
    cursor: grab;
    touch-action: none;
    transition: transform .15s ease, border-color .15s ease;
}

.aquarium-option:hover {
    border-color: #59bfd3;
    transform: translateY(-2px);
}

.aquarium-option.dragging-source {
    opacity: .48;
    transform: scale(.9);
    cursor: grabbing;
}

.aquarium-drag-ghost {
    position: fixed;
    z-index: 1000;
    display: grid;
    width: 92px;
    height: 92px;
    border: 4px solid #fff;
    border-radius: 50%;
    place-items: center;
    background: rgba(238,253,255,.93);
    box-shadow: 0 12px 35px rgba(18,83,101,.3);
    font-size: 4.25rem;
    opacity: .92;
    transform: translate(-50%, -50%) scale(.94);
    pointer-events: none;
    transition: transform .12s ease, background .12s ease;
}

.aquarium-drag-ghost.over-tank {
    background: #fff1f7;
    transform: translate(-50%, -50%) scale(1.18) rotate(5deg);
}

.aquarium-clear-button {
    padding: 9px 13px;
    border: 2px solid #cfe4e7;
    border-radius: 13px;
    color: #39788b;
    background: #fff;
    font-size: .82rem;
    font-weight: 900;
}

.aquarium-clear-button:hover {
    color: #fff;
    border-color: #258fad;
    background: #258fad;
}

/* Penalty game */
.penalty-art {
    background:
        linear-gradient(transparent 0 58%, rgba(255,255,255,.18) 59% 61%, transparent 62%),
        linear-gradient(#65c9f2 0 51%, #43b868 52%);
}

.penalty-art::after {
    position: absolute;
    right: -10%;
    bottom: -42%;
    left: -10%;
    height: 76%;
    border: 5px solid rgba(255,255,255,.7);
    border-radius: 50%;
    content: "";
}

.preview-stadium-light {
    position: absolute;
    top: 8%;
    width: 46px;
    height: 18px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, #fff8a2 0 8px, #e8f9ff 9px 13px);
    box-shadow: 0 0 18px rgba(255,246,142,.7);
}

.preview-stadium-light.light-left { left: 8%; transform: rotate(-8deg); }
.preview-stadium-light.light-right { right: 8%; transform: rotate(8deg); }

.preview-penalty-goal {
    position: absolute;
    z-index: 2;
    top: 22%;
    left: 50%;
    width: 58%;
    height: 46%;
    border: 8px solid #fff;
    border-bottom-width: 5px;
    background:
        repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,255,255,.62) 15px 17px),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.62) 19px 21px),
        rgba(47,132,173,.28);
    box-shadow: 0 7px 0 rgba(36,91,73,.18);
    transform: translateX(-50%);
}

.preview-keeper {
    position: absolute;
    bottom: -4px;
    left: 50%;
    font-size: 3rem;
    filter: drop-shadow(0 5px 2px rgba(22,69,66,.25));
    transform: translateX(-50%) rotate(-8deg);
}

.preview-penalty-ball {
    position: absolute;
    z-index: 5;
    bottom: 10%;
    left: 50%;
    font-size: clamp(3rem, 6vw, 4.7rem);
    filter: drop-shadow(0 7px 2px rgba(31,77,43,.28));
    transform: translateX(-50%) rotate(-12deg);
}

.preview-penalty-stars {
    position: absolute;
    z-index: 4;
    top: 18%;
    left: 23%;
    color: #ffe665;
    font-size: 1.7rem;
    letter-spacing: 115px;
    text-shadow: 0 2px 0 rgba(81,71,20,.18);
}

.penalty-page {
    background: #3eb467;
}

.penalty-play-section,
.penalty-stage {
    width: 100%;
    height: 100dvh;
}

.penalty-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 80px, transparent 81px 160px),
        linear-gradient(#48bd70, #249653);
    touch-action: none;
    user-select: none;
}

.penalty-stage::after {
    position: absolute;
    z-index: 2;
    right: -12%;
    bottom: -34%;
    left: -12%;
    height: 68%;
    border: 7px solid rgba(255,255,255,.7);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.penalty-sky {
    position: absolute;
    z-index: 0;
    inset: 0 0 53%;
    background:
        radial-gradient(circle at 14% 20%, rgba(255,255,255,.75) 0 3px, transparent 4px),
        linear-gradient(#4bbbef, #9ce3fb);
    background-size: 52px 52px, auto;
}

.penalty-crowd {
    position: absolute;
    z-index: 3;
    top: 10%;
    right: 0;
    left: 0;
    height: 17%;
    border-top: 7px solid #485b78;
    border-bottom: 9px solid #384963;
    overflow: hidden;
    background: #62718a;
}

.penalty-crowd i {
    position: relative;
    display: inline-block;
    width: clamp(20px, 5.8vw, 70px);
    height: clamp(20px, 5.8vw, 70px);
    margin: 8px clamp(2px, 1vw, 11px);
    border-radius: 50% 50% 38% 38%;
    background: var(--fan-color, #ffcf4a);
    box-shadow: 0 18px 0 4px color-mix(in srgb, var(--fan-color) 72%, #33435c);
}

.penalty-crowd i:nth-child(4n+1) { --fan-color: #ffcf4a; }
.penalty-crowd i:nth-child(4n+2) { --fan-color: #ff6698; }
.penalty-crowd i:nth-child(4n+3) { --fan-color: #6ce0cf; }
.penalty-crowd i:nth-child(4n) { --fan-color: #9d7bed; }

.penalty-hud {
    position: absolute;
    z-index: 45;
    top: 14px;
    left: 50%;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: none;
}

.penalty-hud div {
    display: flex;
    min-width: 94px;
    padding: 8px 13px;
    border: 2px solid rgba(255,255,255,.86);
    border-radius: 16px;
    flex-direction: column;
    align-items: center;
    color: #526173;
    background: rgba(255,255,255,.92);
    box-shadow: 0 7px 20px rgba(28,80,84,.18);
    backdrop-filter: blur(8px);
}

.penalty-hud span {
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.penalty-hud strong {
    color: #168451;
    font-family: "Baloo 2", cursive;
    font-size: 1.28rem;
    line-height: 1;
}

.penalty-goal {
    position: absolute;
    z-index: 12;
    top: 20%;
    left: 50%;
    width: min(78vw, 760px);
    height: clamp(210px, 40vh, 390px);
    border: clamp(9px, 1.4vw, 16px) solid #fff;
    border-bottom-width: 8px;
    background: rgba(36,119,147,.13);
    box-shadow:
        0 12px 0 rgba(26,98,60,.25),
        0 18px 35px rgba(28,80,63,.18);
    transform: translateX(-50%);
}

.goal-net {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.7) 29px 32px),
        repeating-linear-gradient(90deg, transparent 0 35px, rgba(255,255,255,.7) 36px 39px);
    box-shadow: inset 0 0 28px rgba(21,90,116,.17);
}

.penalty-keeper {
    position: absolute;
    z-index: 4;
    bottom: 0;
    left: 50%;
    width: 112px;
    height: 155px;
    filter: drop-shadow(0 8px 3px rgba(24,67,57,.25));
    transform: translateX(-50%);
    transform-origin: center bottom;
}

.penalty-keeper:not(.diving) {
    animation: keeperReady .55s ease-in-out infinite alternate;
}

@keyframes keeperReady {
    to { transform: translateX(-50%) translateY(-5px) scaleX(1.04); }
}

.keeper-head {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 50%;
    width: 51px;
    height: 55px;
    border: 4px solid #5e3729;
    border-radius: 47% 47% 44% 44%;
    background: #d58f63;
    transform: translateX(-50%);
}

.keeper-head i {
    position: absolute;
    top: -6px;
    right: -3px;
    left: -3px;
    height: 23px;
    border-radius: 50% 50% 30% 30%;
    background: #503126;
}

.keeper-head::before,
.keeper-head::after {
    position: absolute;
    top: 27px;
    width: 6px;
    height: 8px;
    border-radius: 50%;
    background: #332624;
    content: "";
}

.keeper-head::before { left: 11px; }
.keeper-head::after { right: 11px; }

.keeper-body {
    position: absolute;
    z-index: 3;
    top: 47px;
    left: 50%;
    width: 72px;
    height: 78px;
    border: 5px solid #314e88;
    border-radius: 17px 17px 25px 25px;
    background: linear-gradient(90deg, #ffd43d, #ffeb77 50%, #f2bb24);
    transform: translateX(-50%);
}

.keeper-body::after {
    position: absolute;
    top: 20px;
    left: 50%;
    color: #35538c;
    content: "1";
    font-family: "Baloo 2", cursive;
    font-size: 2rem;
    font-weight: 900;
    transform: translateX(-50%);
}

.keeper-arm {
    position: absolute;
    z-index: 2;
    top: 57px;
    width: 67px;
    height: 20px;
    border: 4px solid #314e88;
    border-radius: 15px;
    background: #ffd43d;
}

.keeper-arm-left { left: -4px; transform: rotate(14deg); }
.keeper-arm-right { right: -4px; transform: rotate(-14deg); }

.keeper-arm i {
    position: absolute;
    top: -9px;
    width: 29px;
    height: 34px;
    border: 4px solid #4a397e;
    border-radius: 50% 50% 45% 45%;
    background: #f774ad;
}

.keeper-arm-left i { left: -17px; }
.keeper-arm-right i { right: -17px; }

.keeper-leg {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 27px;
    height: 48px;
    border: 4px solid #263e70;
    border-radius: 8px 8px 15px 15px;
    background: #405f9c;
}

.keeper-leg-left { left: 26px; transform: rotate(5deg); }
.keeper-leg-right { right: 26px; transform: rotate(-5deg); }

.penalty-ball {
    position: absolute;
    z-index: 36;
    bottom: 8%;
    left: 50%;
    width: clamp(82px, 13vmin, 118px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: clamp(4.8rem, 12vmin, 7rem);
    line-height: 1;
    filter: drop-shadow(0 12px 4px rgba(21,72,42,.32));
    transform: translateX(-50%);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.penalty-ball.aiming {
    filter: drop-shadow(0 0 10px #fff) drop-shadow(0 12px 4px rgba(21,72,42,.32));
    cursor: grabbing;
}

.penalty-aim {
    position: absolute;
    z-index: 31;
    display: grid;
    width: clamp(58px, 9vmin, 82px);
    aspect-ratio: 1;
    border: 6px solid rgba(255,238,79,.95);
    border-radius: 50%;
    place-items: center;
    opacity: 0;
    box-shadow: 0 0 0 6px rgba(255,255,255,.42), 0 0 25px rgba(255,226,58,.7);
    transform: translate(-50%, -50%) scale(.7);
    pointer-events: none;
}

.penalty-aim span {
    width: 17px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ff5f7f;
}

.penalty-aim.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.penalty-trajectory {
    position: absolute;
    z-index: 30;
    height: 0;
    border-top: 6px dashed rgba(255,255,255,.88);
    opacity: 0;
    transform-origin: left center;
    pointer-events: none;
}

.penalty-trajectory.visible {
    opacity: 1;
}

.penalty-tip {
    position: absolute;
    z-index: 38;
    bottom: 23%;
    left: 50%;
    padding: 9px 16px;
    border-radius: 28px;
    color: #286346;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 22px rgba(22,88,54,.18);
    font-size: .82rem;
    font-weight: 900;
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity .2s ease;
    pointer-events: none;
}

.penalty-tip span { font-size: 1.2rem; }
.penalty-tip.hidden { opacity: 0; }

.penalty-result {
    position: absolute;
    z-index: 52;
    top: 57%;
    left: 50%;
    display: flex;
    min-width: 230px;
    padding: 15px 25px;
    border: 7px solid #fff;
    border-radius: 30px;
    flex-direction: column;
    align-items: center;
    color: #fff;
    background: #24b974;
    box-shadow: 0 14px 0 rgba(22,91,59,.28), 0 22px 48px rgba(20,70,48,.25);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(-8deg);
    pointer-events: none;
}

.penalty-result span {
    font-size: clamp(3rem, 10vmin, 5.8rem);
    line-height: 1;
}

.penalty-result strong {
    font-family: "Baloo 2", cursive;
    font-size: clamp(2rem, 6vmin, 3.6rem);
    line-height: 1;
}

.penalty-result.saved { background: #6d62d9; }

.penalty-result.visible {
    opacity: 1;
    animation: penaltyResultPop 1s cubic-bezier(.2,1.45,.35,1) both;
}

@keyframes penaltyResultPop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
    30%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.penalty-confetti {
    position: absolute;
    z-index: 50;
    font-size: clamp(1rem, 3.5vmin, 2rem);
    font-style: normal;
    font-weight: 900;
    text-shadow: 2px 2px 0 #fff;
    animation: penaltyBurst .85s ease-out forwards;
    pointer-events: none;
}

@keyframes penaltyBurst {
    from { opacity: 1; transform: translate(-50%, -50%) scale(.25); }
    to {
        opacity: 0;
        transform: translate(
            calc(-50% + var(--penalty-x)),
            calc(-50% + var(--penalty-y))
        ) rotate(280deg) scale(1.2);
    }
}

.penalty-overlay {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: flex;
    padding: 28px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background: rgba(24,65,59,.78);
    backdrop-filter: blur(8px);
    transition: opacity .25s ease;
}

.penalty-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.penalty-overlay-icon {
    font-size: clamp(4rem, 11vw, 7rem);
    filter: drop-shadow(0 8px 3px rgba(11,48,34,.3));
}

.penalty-overlay h1 {
    margin: 3px 0;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    font-weight: 800;
    line-height: 1;
}

.penalty-overlay p {
    max-width: 560px;
    color: #effff7;
    font-size: clamp(.95rem, 2vw, 1.1rem);
    font-weight: 700;
}

.penalty-start-button {
    padding: 13px 27px;
    border: 0;
    border-radius: 16px;
    color: #30543d;
    background: #ffe45d;
    font-weight: 900;
    box-shadow: 0 6px 0 #c39820;
}

.penalty-start-button:hover {
    color: #30543d;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #c39820;
}

@media (max-width: 767.98px) {
    .penalty-hud {
        top: 8px;
        gap: 4px;
    }

    .penalty-hud div {
        min-width: 72px;
        padding: 6px 7px;
        border-radius: 13px;
    }

    .penalty-hud span { font-size: .49rem; }
    .penalty-hud strong { font-size: 1.05rem; }

    .penalty-goal {
        top: 21%;
        width: 88vw;
        height: clamp(190px, 38vh, 310px);
        border-width: 9px;
        border-bottom-width: 6px;
    }

    .goal-net {
        background:
            repeating-linear-gradient(0deg, transparent 0 22px, rgba(255,255,255,.7) 23px 25px),
            repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.7) 28px 30px);
    }

    .penalty-keeper {
        width: 94px;
        height: 135px;
        transform: translateX(-50%);
        transform-origin: center bottom;
    }

    .penalty-tip {
        bottom: 21%;
        padding: 7px 11px;
        font-size: .7rem;
        white-space: nowrap;
    }

    .penalty-result {
        min-width: 190px;
        padding: 12px 19px;
    }
}

@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 38px;
    }

    .home-page .navbar {
        height: 54px;
    }

    .home-page main {
        height: calc(100dvh - 54px);
    }

    .home-page .hero-section {
        padding: 6px 8px 8px;
    }

    .home-page .hero-copy {
        margin-bottom: 6px;
    }

    .home-page .hero-copy h1 {
        font-size: clamp(1.55rem, 7vw, 2.15rem);
        letter-spacing: -1px;
    }

    .home-page .hero-copy p {
        font-size: .72rem;
    }

    .home-page .game-grid {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px !important;
    }

    .home-page .game-grid > div {
        grid-column: span 1;
    }

    .home-page .game-grid > div:nth-child(17) {
        grid-column: 2 / span 1;
    }

    .home-page .game-card {
        border-radius: 16px;
        box-shadow: 0 5px 0 rgba(74, 47, 118, .05), 0 9px 20px rgba(62, 44, 105, .1);
    }

    .home-page .game-card:hover {
        transform: translateY(-2px);
    }

    .home-page .card-content {
        min-height: 38px;
        padding: 5px 8px;
        justify-content: center;
    }

    .home-page .card-content h2 {
        font-size: clamp(.82rem, 4vw, 1.05rem);
        text-align: center;
    }

    .home-page .game-tag {
        display: none;
    }

    .home-page .easel {
        top: 8px;
        transform: translateX(-50%) scale(.52);
        transform-origin: top center;
    }

    .home-page .salon-preview {
        bottom: -8px;
        transform: translateX(-50%) scale(.52);
        transform-origin: bottom center;
    }

    .home-page .preview-comb {
        right: 5%;
        bottom: 2px;
        transform: rotate(-38deg) scale(.55);
    }

    .home-page .preview-speedster {
        bottom: 16px;
        left: 12%;
        transform: rotate(-8deg) scale(.62);
        transform-origin: bottom left;
    }

    .home-page .preview-jump-obstacle {
        right: 8%;
        bottom: 14px;
        font-size: 38px;
    }

    .hero-copy {
        margin-bottom: 32px;
    }

    .game-grid {
        --bs-gutter-y: 26px;
    }

    .card-art {
        height: 230px;
    }

    .card-content {
        padding: 24px;
    }

    .easel {
        transform: translateX(-50%) scale(.82);
        transform-origin: top center;
    }

    .game-page .navbar {
        padding: 8px 0 !important;
    }

    .play-section {
        padding: 8px;
    }

    .game-heading {
        display: none;
    }

    .race-stats {
        top: 9px;
    }

    .race-stats div {
        gap: 6px;
        padding: 6px 11px;
        background: rgba(255, 255, 255, .92);
    }

    .race-stats strong {
        font-size: 1.15rem;
    }

    .game-stage {
        border-width: 4px;
        border-radius: 20px;
    }

    .balloon-hud {
        top: 9px;
        gap: 5px;
    }

    .hud-item,
    .combo-item {
        min-width: 72px;
        padding: 6px 8px;
        border-radius: 13px;
    }

    .hud-item span,
    .combo-item span {
        font-size: .53rem;
    }

    .hud-item strong,
    .combo-item strong {
        font-size: 1.05rem;
    }

    .sound-toggle {
        top: auto;
        bottom: 12px;
        left: 12px;
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .balloon-overlay {
        padding: 22px;
    }

    .jump-hud {
        top: 9px;
        gap: 5px;
    }

    .jump-hud div {
        min-width: 72px;
        padding: 6px 8px;
        border-radius: 13px;
    }

    .jump-hud span {
        font-size: .51rem;
    }

    .jump-hud strong {
        font-size: 1.04rem;
    }

    .jump-weather-status {
        top: 67px;
        right: 9px;
        min-width: 54px;
        padding: 5px 8px;
        border-radius: 14px;
    }

    .jump-weather-status span {
        font-size: 1.25rem;
    }

    .jump-weather-status strong {
        display: none;
    }

    .jump-runner {
        left: 18px;
        width: 108px;
        height: 108px;
        transform: translateY(calc(var(--jump-height, 0px) * -1)) scale(.9);
        transform-origin: bottom left;
    }

    .jump-tip {
        bottom: 32%;
        left: 14px;
        padding: 7px 11px;
        font-size: .7rem;
    }

    .jump-sun {
        top: 16%;
        right: 7%;
    }

    .jump-overlay {
        padding: 22px;
    }

    .market-awning {
        height: 58px;
        background-size: auto;
    }

    .market-sign {
        top: 11px;
        padding: 6px 12px;
        font-size: .82rem;
    }

    .market-order-card {
        top: 65px;
        left: 8px;
        min-width: 205px;
        padding: 7px 9px;
        border-width: 4px;
        border-radius: 17px;
    }

    .order-label {
        font-size: .62rem;
    }

    .market-order-card strong {
        gap: 7px;
        font-size: 1.18rem;
    }

    #targetEmoji {
        width: 57px;
        height: 57px;
        border-width: 3px;
        border-radius: 15px;
        font-size: 2.65rem;
    }

    .market-score-card {
        top: 68px;
        right: 8px;
        gap: 4px;
    }

    .market-score-card div {
        min-width: 61px;
        padding: 6px;
        border-radius: 12px;
    }

    .market-score-card span {
        font-size: .47rem;
    }

    .market-score-card strong {
        font-size: 1rem;
    }

    .market-shelf {
        right: 2%;
        left: 2%;
        height: clamp(122px, 22vh, 155px);
        border-width: 5px;
    }

    .shelf-top { top: 26%; }
    .shelf-bottom { top: calc(26% + clamp(122px, 22vh, 155px) + 6px); }

    .market-item {
        width: 74px;
        height: 74px;
        border-radius: 15px;
        font-size: 2.9rem;
    }

    .shopping-cart-zone {
        right: 2%;
        bottom: 1.5%;
        width: 155px;
        height: 118px;
        border-width: 4px;
        border-radius: 20px;
    }

    .market-cart-emoji {
        font-size: 4.25rem;
    }

    .cart-drop-label {
        font-size: .5rem;
    }

    .market-drag-tip {
        bottom: 5%;
        left: 3%;
        max-width: 175px;
        padding: 7px 10px;
        font-size: .67rem;
    }

    .market-feedback {
        top: 20%;
        max-width: 85%;
        font-size: .9rem;
        white-space: nowrap;
    }

    .market-overlay {
        padding: 22px;
    }

    .aquarium-workspace {
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-columns: 1fr;
        border-width: 4px;
        border-radius: 18px;
    }

    .aquarium-tank {
        border-width: 6px;
        border-top-width: 11px;
        border-radius: 16px 16px 24px 24px;
    }

    .aquarium-palette {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
        max-height: 245px;
        padding: 8px;
    }

    .aquarium-palette-section {
        grid-column: 1;
        min-width: 0;
        padding-bottom: 0;
        border: 0;
    }

    .aquarium-section-heading strong {
        font-size: .88rem;
    }

    .aquarium-section-heading span {
        display: none;
    }

    .aquarium-option-list {
        grid-template-columns: repeat(6, minmax(38px, 1fr));
        gap: 4px;
        margin-top: 3px;
    }

    .aquarium-option {
        min-height: 44px;
        border-radius: 10px;
        font-size: clamp(1.75rem, 7vw, 2.35rem);
    }

    .aquarium-clear-button {
        grid-row: 1 / 3;
        grid-column: 2;
        align-self: stretch;
        width: 65px;
        padding: 5px;
        font-size: .63rem;
    }

    .tank-item {
        width: 78px;
        height: 78px;
        font-size: 3.65rem;
    }

    .tank-decor {
        font-size: 3.85rem;
    }

    .aquarium-drop-hint {
        padding: 10px 13px;
        font-size: .78rem;
    }

    .paint-workspace {
        grid-template-columns: minmax(0, 1fr) 116px;
        border-width: 4px;
        border-radius: 18px;
    }

    .stamp-panel {
        padding: 7px 5px;
        border-left-width: 2px;
    }

    .stamp-panel-heading {
        margin-bottom: 5px;
        font-size: .78rem;
    }

    .stamp-panel-heading span {
        font-size: 1rem;
    }

    .stamp-list {
        gap: 5px;
    }

    .stamp-button {
        min-height: 45px;
        border-width: 2px;
        border-radius: 11px;
        font-size: clamp(1.75rem, 8vw, 2.35rem);
        box-shadow: 0 3px 0 #e1d3e5;
    }

    .salon-workspace {
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-columns: 1fr;
        border-width: 4px;
        border-radius: 18px;
    }

    .hair-zone {
        top: 5%;
        width: min(76vw, 380px);
        height: 94%;
    }

    .salon-progress {
        top: 8px;
        left: 8px;
        width: 165px;
        padding: 6px 9px;
    }

    .salon-tool-picker {
        top: 7px;
        right: 7px;
        gap: 3px;
        padding: 4px;
        border-width: 2px;
        border-radius: 14px;
    }

    .salon-tool-button {
        width: 41px;
        height: 47px;
        padding: 2px;
        border-width: 2px;
        border-radius: 10px;
    }

    .salon-tool-button span {
        min-height: 25px;
        font-size: 1.45rem;
        transform: scale(.78);
    }

    .salon-tool-button small {
        font-size: .48rem;
    }

    .progress-copy {
        font-size: .68rem;
    }

    .salon-brush {
        right: 3%;
        bottom: 4%;
        transform: scale(.78) rotate(16deg);
        transform-origin: bottom right;
    }

    .salon-brush.tool-dryer {
        transform: scale(.66) rotate(-9deg);
    }

    .salon-brush.tool-spray {
        transform: scale(.7) rotate(7deg);
    }

    .comb-hint {
        display: none;
    }

    .accessory-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 8px;
        max-height: 225px;
        padding: 8px;
    }

    .salon-control-section {
        min-width: 0;
        padding-bottom: 5px;
    }

    .accessory-title {
        font-size: .84rem;
        line-height: 1;
    }

    .accessory-control-section {
        grid-column: 1 / -1;
    }

    .accessory-control-section .accessory-title {
        font-size: 1.06rem;
    }

    .accessory-help {
        display: none;
    }

    .hair-style-list {
        gap: 4px;
        margin-top: 4px;
    }

    .hair-style-button {
        padding: 3px 2px;
        border-radius: 9px;
    }

    .hair-style-button span {
        font-size: 1.25rem;
    }

    .hair-style-button small {
        display: none;
    }

    .hair-color-list {
        gap: 5px;
        margin-top: 6px;
    }

    .hair-color-button {
        width: 30px;
        height: 30px;
        border-width: 3px;
    }

    .accessory-list {
        grid-template-columns: repeat(6, minmax(42px, 1fr));
        gap: 5px;
        margin-top: 5px;
    }

    .accessory-button {
        border-radius: 12px;
        font-size: clamp(1.8rem, 7vw, 2.3rem);
    }

    .salon-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .salon-actions .btn {
        padding: 5px 8px;
        font-size: .7rem;
    }

    .paint-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
    }

    .tool-group:first-child {
        width: 100%;
        overflow-x: auto;
    }

    .paint-toolbar .brush-type-group {
        width: 100%;
        overflow-x: auto;
    }

    .paint-toolbar .brush-type-list {
        flex: 1;
    }

    .paint-toolbar .brush-type-button {
        flex: 1 0 62px;
    }

    .brush-size-group {
        flex: 1;
    }

    .tool-actions {
        width: 100%;
    }

    .tool-actions .btn {
        flex: 1;
    }

    .canvas-frame {
        min-height: 0;
        border-radius: 10px;
    }

    .back-button {
        padding: 7px 10px;
        font-size: .78rem;
    }
}

@media (max-width: 767.98px) and (orientation: landscape) {
    .home-page .hero-copy {
        display: none;
    }

    .home-page .game-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(18, minmax(0, 1fr));
        gap: 8px !important;
    }

    .home-page .game-grid > div {
        grid-column: span 2;
        width: auto;
    }

    .home-page .game-grid > div:nth-child(17) {
        grid-column: span 2;
    }

    .paint-toolbar {
        display: grid;
        grid-template-areas:
            "colors types actions"
            "size size size";
        grid-template-columns: minmax(190px, 1fr) auto auto;
        gap: 6px 8px;
        padding: 7px 10px;
    }

    .paint-toolbar .tool-group:first-child {
        grid-area: colors;
        width: 100%;
        min-width: 0;
    }

    .paint-toolbar .tool-label,
    .paint-toolbar .brush-preview {
        display: none;
    }

    .paint-toolbar .color-swatch {
        width: 34px;
        height: 34px;
        border-width: 3px;
    }

    .paint-toolbar .brush-type-group {
        grid-area: types;
        width: auto;
    }

    .paint-toolbar .brush-type-button {
        min-width: 37px;
        padding: 4px;
        flex-basis: 37px;
    }

    .paint-toolbar .brush-type-button small {
        display: none;
    }

    .paint-toolbar .brush-size-group {
        grid-area: size;
        max-width: none;
        justify-content: center;
    }

    .paint-toolbar #brushSize {
        width: min(280px, 50vw);
    }

    .paint-toolbar .tool-actions {
        grid-area: actions;
        width: auto;
    }

    .paint-toolbar .tool-button {
        width: 38px;
        padding: 6px;
        font-size: 0;
    }

    .paint-toolbar .tool-button span {
        font-size: 1rem;
    }

    .player-car {
        bottom: 14px;
        transform: scale(.82);
        transform-origin: bottom center;
    }

    .drag-hint {
        bottom: 108px;
    }

    .salon-workspace {
        grid-template-rows: 1fr;
        grid-template-columns: minmax(0, 1fr) 220px;
    }

    .hair-zone {
        top: 2%;
        width: min(45vw, 330px);
        height: 106%;
    }

    .salon-brush {
        right: 2%;
        bottom: 2%;
        transform: scale(.65) rotate(16deg);
    }

    .accessory-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        max-height: none;
        padding: 8px;
    }

    .accessory-control-section,
    .salon-actions {
        grid-column: 1;
    }

    .hair-style-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .hair-color-list {
        flex-wrap: wrap;
    }

    .accessory-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .accessory-button {
        font-size: 1.65rem;
    }

    .salon-actions {
        width: 100%;
    }

    .aquarium-workspace {
        grid-template-rows: 1fr;
        grid-template-columns: minmax(0, 1fr) 245px;
    }

    .aquarium-palette {
        display: flex;
        max-height: none;
        gap: 8px;
        padding: 8px;
    }

    .aquarium-option-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .aquarium-clear-button {
        width: 100%;
    }
}

@media (max-height: 650px) {
    .home-page .hero-copy p {
        display: none;
    }

    .home-page .hero-copy h1 {
        font-size: 1.55rem;
    }

    .home-page .hero-copy {
        margin-bottom: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Global compact layout for small phones and short tablet viewports */
@media (max-width: 480px) {
    html {
        font-size: clamp(12px, 3.75vw, 15px);
    }

    .navbar .container {
        max-width: none;
        padding-right: 8px;
        padding-left: 8px;
    }

    .game-logo {
        font-size: clamp(.92rem, 4.4vw, 1.15rem);
    }

    .install-app-button {
        padding: 6px 9px;
        border-radius: 11px;
        font-size: .76rem;
    }

    .global-sound-toggle {
        top: 8px;
        left: 8px;
        width: 42px;
        height: 42px;
        border-width: 2px;
        font-size: 1.2rem;
    }

    .game-page .back-button {
        max-width: 42vw;
        overflow: hidden;
        padding: 6px 8px;
        font-size: .72rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-page .hero-section {
        padding: 4px 5px 6px;
    }

    .home-page .game-grid {
        gap: 5px !important;
    }

    .home-page .game-card {
        border-radius: 13px;
    }

    .home-page .card-content {
        min-height: 32px;
        padding: 3px 5px;
    }

    .home-page .card-content h2 {
        font-size: clamp(.68rem, 3.6vw, .92rem);
    }

    .paint-workspace {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .stamp-panel {
        padding: 5px 4px;
    }

    .stamp-list {
        gap: 3px;
    }

    .stamp-button {
        min-height: 38px;
        font-size: clamp(1.45rem, 7vw, 1.9rem);
    }

    .aquarium-palette {
        max-height: 210px;
        padding: 6px;
    }

    .aquarium-option-list {
        grid-template-columns: repeat(6, minmax(30px, 1fr));
        gap: 3px;
    }

    .aquarium-option {
        min-height: 38px;
        font-size: clamp(1.45rem, 6.5vw, 1.9rem);
    }

    .aquarium-clear-button {
        width: 54px;
        font-size: .56rem;
    }

    .accessory-panel {
        max-height: 200px;
        padding: 6px;
    }

    .accessory-list {
        grid-template-columns: repeat(6, minmax(34px, 1fr));
        gap: 3px;
    }

    .manicure-hand {
        --hand-scale: .58;
    }

    .dentist-patient {
        --patient-scale: .56;
    }
}

@media (max-width: 360px) {
    .paint-workspace {
        grid-template-columns: minmax(0, 1fr) 82px;
    }

    .stamp-panel-heading strong,
    .aquarium-section-heading span,
    .accessory-help {
        display: none;
    }

    .paint-toolbar {
        gap: 6px;
        padding: 6px;
    }

    .paint-toolbar .color-swatch {
        width: 31px;
        height: 31px;
    }

    .manicure-hand {
        --hand-scale: .52;
    }

    .dentist-patient {
        --patient-scale: .5;
    }
}

/* Pong Neon */
.pong-art {
    background:
        radial-gradient(circle at 50% 45%, rgba(120,77,255,.28), transparent 42%),
        linear-gradient(145deg, #12072d, #16104b 55%, #06284a);
}

.preview-arcade-grid {
    position: absolute;
    inset: 0;
    opacity: .27;
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, #4beaff 28px 29px),
        repeating-linear-gradient(90deg, transparent 0 35px, #4beaff 36px 37px);
    transform: perspective(250px) rotateX(7deg) scale(1.1);
}

.preview-pong-paddle {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: 45%;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 20px;
    transform: translateX(-50%);
}

.preview-pong-paddle.paddle-top {
    top: 16%;
    background: linear-gradient(90deg, #ff4f9a, #b35cff);
    box-shadow: 0 0 18px #ff4f9a;
}

.preview-pong-paddle.paddle-bottom {
    bottom: 14%;
    background: linear-gradient(90deg, #22bfff, #6eefff, #4f77ff);
    box-shadow: 0 0 20px #38dcff;
}

.preview-pong-ball {
    position: absolute;
    z-index: 4;
    top: 48%;
    left: 54%;
    width: 30px;
    height: 30px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #ffe45b;
    box-shadow: 0 0 24px #ffe45b;
}

.preview-pong-score {
    position: absolute;
    z-index: 3;
    top: 31%;
    left: 50%;
    color: rgba(255,255,255,.82);
    font-family: "Baloo 2", cursive;
    font-size: clamp(1.7rem, 4vw, 3rem);
    font-weight: 800;
    text-shadow: 0 0 13px #8b66ff;
    transform: translateX(-50%);
}

.preview-pong-spark {
    position: absolute;
    z-index: 4;
    color: #fff07a;
    font-size: 1.8rem;
    text-shadow: 0 0 12px #ffe45b;
}

.preview-pong-spark.spark-one { top: 42%; left: 24%; }
.preview-pong-spark.spark-two { right: 22%; bottom: 28%; }

.pong-page,
.pong-play-section,
.pong-stage {
    width: 100%;
    height: 100dvh;
}

.pong-page {
    background: #10082e;
}

.pong-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background: #10082e;
}

#pongCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.pong-scoreboard {
    position: absolute;
    z-index: 20;
    top: 11px;
    left: 50%;
    display: flex;
    min-width: 250px;
    padding: 7px 18px;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #fff;
    background: rgba(16,8,46,.76);
    box-shadow: 0 0 26px rgba(99,92,255,.48);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.pong-scoreboard > div {
    display: flex;
    min-width: 74px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pong-scoreboard span {
    color: #bcf7ff;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.pong-scoreboard strong {
    font-family: "Baloo 2", cursive;
    font-size: 1.75rem;
    line-height: 1;
}

.pong-score-cpu span { color: #ffc1df; }
.pong-score-divider { color: #ffe45b !important; font-size: 1.5rem !important; }

.pong-wins {
    position: absolute;
    z-index: 20;
    top: 17px;
    right: clamp(92px, 12vw, 180px);
    display: flex;
    padding: 7px 12px;
    border: 2px solid rgba(255,255,255,.62);
    border-radius: 14px;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: rgba(16,8,46,.66);
    font-size: .75rem;
    font-weight: 900;
}

.pong-wins strong {
    color: #ffe45b;
    font-size: 1.15rem;
}

.pong-tip {
    position: absolute;
    z-index: 18;
    bottom: clamp(82px, 12vh, 125px);
    left: 50%;
    padding: 8px 14px;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 16px;
    color: #d8fbff;
    background: rgba(20,16,65,.72);
    box-shadow: 0 0 18px rgba(73,221,255,.25);
    font-size: .85rem;
    font-weight: 900;
    pointer-events: none;
    transform: translateX(-50%);
    animation: pong-tip-pulse 1.25s ease-in-out infinite alternate;
}

.pong-tip.hidden { display: none; }

.pong-message {
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;
    display: flex;
    opacity: 0;
    padding: 13px 20px;
    border: 4px solid #fff;
    border-radius: 22px;
    align-items: center;
    gap: 9px;
    color: #191040;
    background: #fff279;
    box-shadow: 0 0 35px rgba(255,226,73,.58);
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.25);
}

.pong-message.visible {
    animation: pong-message-pop .85s ease both;
}

.pong-message.cpu-point {
    background: #ff9dca;
    box-shadow: 0 0 35px rgba(255,79,154,.55);
}

.pong-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: grid;
    padding: 22px;
    place-content: center;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 45%, rgba(123,77,255,.42), transparent 35%),
        rgba(8,5,31,.82);
    text-align: center;
    backdrop-filter: blur(8px);
}

.pong-overlay.hidden {
    display: none;
}

.pong-logo {
    display: grid;
    transform: rotate(-3deg);
}

.pong-logo span,
.pong-logo strong {
    font-family: "Baloo 2", cursive;
    font-weight: 800;
    line-height: .72;
}

.pong-logo span {
    color: #70f3ff;
    font-size: clamp(4.6rem, 13vw, 8.5rem);
    text-shadow: 0 0 8px #fff, 0 0 28px #16ccff, 7px 7px 0 #5535af;
}

.pong-logo strong {
    justify-self: end;
    color: #ff72b5;
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: 8px;
    text-shadow: 0 0 18px #ff3f9a;
}

.pong-overlay h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.pong-overlay p {
    max-width: 520px;
    margin: 22px 0 17px;
    color: #e7e2ff;
    font-size: clamp(.95rem, 2.2vw, 1.18rem);
    font-weight: 800;
}

.pong-start-button {
    min-width: 170px;
    padding: 12px 28px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #251750;
    background: linear-gradient(135deg, #ffe45b, #ff9f43);
    box-shadow: 0 7px 0 #b253bf, 0 0 25px rgba(255,228,91,.35);
    font-size: 1.2rem;
    font-weight: 900;
}

.pong-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #b253bf;
}

@keyframes pong-tip-pulse {
    to { transform: translateX(-50%) translateY(-5px) scale(1.03); }
}

@keyframes pong-message-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-8deg); }
    18%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.12); }
}

@media (max-width: 767.98px) {
    .pong-scoreboard {
        top: 7px;
        min-width: 196px;
        padding: 5px 10px;
        border-width: 2px;
        border-radius: 15px;
        gap: 8px;
    }

    .pong-scoreboard > div {
        min-width: 58px;
        gap: 5px;
    }

    .pong-scoreboard span { font-size: .5rem; }
    .pong-scoreboard strong { font-size: 1.35rem; }

    .pong-wins {
        top: 56px;
        right: 7px;
        padding: 5px 8px;
        font-size: .62rem;
    }

    .pong-tip {
        bottom: 82px;
        width: max-content;
        max-width: 74vw;
        padding: 6px 10px;
        font-size: .7rem;
    }

    .pong-overlay {
        padding: 18px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .pong-scoreboard {
        top: 5px;
    }

    .pong-wins {
        top: 7px;
        right: 70px;
    }

    .pong-tip {
        bottom: 55px;
    }

    .pong-logo {
        transform: rotate(-3deg) scale(.72);
    }

    .pong-overlay p {
        margin: 8px 0 10px;
        font-size: .82rem;
    }

    .pong-start-button {
        padding: 8px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pong-tip,
    .pong-message.visible {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    html {
        font-size: 12px;
    }

    .home-page .navbar {
        height: 46px;
    }

    .home-page main {
        height: calc(100dvh - 46px);
    }

    .game-page .navbar {
        padding: 4px 0 !important;
    }

    .global-sound-toggle {
        top: 5px;
        left: 5px;
        width: 37px;
        height: 37px;
        font-size: 1rem;
    }

    .game-page .back-button {
        padding: 4px 7px;
        font-size: .68rem;
    }

    .play-section {
        padding: 4px;
    }

    .install-guide-card {
        max-height: 94dvh;
        padding: 14px 18px;
    }

    .install-guide-card img {
        width: 58px;
        height: 58px;
    }

    .install-guide-card h2 {
        margin-top: 6px;
    }
}

/* Full-screen race and weather cycle */
.race-page .play-section {
    padding: 0;
    background: #474d58;
}

.race-page .game-heading { display: none; }

.race-page .race-layout {
    width: 100%;
    height: 100dvh;
    margin: 0;
}

.race-page .game-stage {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background-color: #4b525e;
    box-shadow: none;
    transition: background 1.2s ease, background-color 1.2s ease, box-shadow 1.2s ease;
}

.race-page .player-car {
    bottom: 28px;
    transform: scale(clamp(1.18, calc(.85 + .06vw), 1.7));
    transform-origin: bottom center;
}

.race-page .drag-hint {
    bottom: clamp(170px, 24vh, 225px);
}

.race-page .lane-divider {
    z-index: 2;
    width: clamp(4px, .45vw, 8px);
}

.race-page .road-edge {
    z-index: 3;
    width: clamp(9px, 1vw, 16px);
    transition: background .8s ease;
}

.race-celestial {
    position: absolute;
    z-index: 1;
    top: 82px;
    right: clamp(24px, 7vw, 120px);
    width: clamp(56px, 7vw, 92px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffe36b;
    box-shadow: 0 0 0 18px rgba(255,227,107,.12), 0 0 55px rgba(255,216,82,.38);
    pointer-events: none;
    transition: background 1s ease, box-shadow 1s ease, transform 1s ease, opacity 1s ease;
}

.race-stars {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

.race-stars i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 9px #fff;
    animation: race-star-twinkle 1.2s ease-in-out infinite alternate;
}

.race-stars i:nth-child(1) { top: 12%; left: 9%; }
.race-stars i:nth-child(2) { top: 25%; left: 27%; animation-delay: -.4s; }
.race-stars i:nth-child(3) { top: 16%; left: 46%; animation-delay: -.8s; }
.race-stars i:nth-child(4) { top: 34%; left: 65%; animation-delay: -.2s; }
.race-stars i:nth-child(5) { top: 20%; left: 82%; animation-delay: -.6s; }
.race-stars i:nth-child(6) { top: 47%; left: 17%; animation-delay: -.9s; }
.race-stars i:nth-child(7) { top: 55%; left: 73%; animation-delay: -.3s; }
.race-stars i:nth-child(8) { top: 68%; left: 91%; animation-delay: -.7s; }

.race-weather-layer {
    position: absolute;
    z-index: 6;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.race-raindrop,
.race-snowflake {
    position: absolute;
    top: -12%;
    display: block;
    pointer-events: none;
}

.race-raindrop {
    width: 3px;
    height: clamp(28px, 5vh, 52px);
    border-radius: 5px;
    background: linear-gradient(transparent, rgba(207,239,255,.95));
    transform: rotate(13deg);
    animation: race-rain-fall var(--race-weather-duration) linear var(--race-weather-delay) infinite;
}

.race-snowflake {
    width: var(--race-weather-size);
    height: var(--race-weather-size);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 7px rgba(255,255,255,.95);
    animation: race-snow-fall var(--race-weather-duration) linear var(--race-weather-delay) infinite;
}

.race-weather-status {
    position: absolute;
    z-index: 9;
    bottom: 18px;
    left: 18px;
    display: flex;
    min-width: 112px;
    padding: 8px 13px;
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 17px;
    align-items: center;
    gap: 8px;
    color: #4d5365;
    background: rgba(255,255,255,.86);
    box-shadow: 0 7px 20px rgba(26,36,54,.18);
    pointer-events: none;
}

.race-weather-status span { font-size: 1.45rem; line-height: 1; }
.race-weather-status strong { font-size: .9rem; }
.race-weather-status.changing { animation: race-weather-announce 1.5s cubic-bezier(.2,1.4,.4,1); }

.race-weather-night {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.035) 0 2px, transparent 3px),
        linear-gradient(90deg, #20283a, #2c3549 50%, #20283a);
    box-shadow: inset 0 0 110px rgba(4,10,29,.55);
}

.race-weather-night .race-stars { opacity: .85; }

.race-weather-night .race-celestial {
    background: #fff9d7;
    box-shadow: 0 0 0 13px rgba(255,255,225,.08), 0 0 45px rgba(255,255,220,.42);
    transform: scale(.88);
}

.race-weather-night .race-celestial::after {
    position: absolute;
    top: 8%;
    left: -8%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #232c40;
    content: "";
    transform: translate(-21%, -9%);
}

.race-weather-night .headlight {
    box-shadow: 0 0 15px 7px rgba(255,244,155,.8), 0 45px 35px 22px rgba(255,244,155,.18);
}

.race-weather-rain {
    background:
        linear-gradient(105deg, transparent 0 45%, rgba(209,234,245,.08) 48%, transparent 51%),
        linear-gradient(90deg, #3f4b58, #566573 50%, #3f4b58);
    box-shadow: inset 0 0 100px rgba(23,40,55,.4);
}

.race-weather-rain .race-celestial {
    opacity: .42;
    background: #dce4e8;
    box-shadow: 0 0 35px rgba(235,245,249,.22);
    transform: scale(.75);
}

.race-weather-rain .road-edge {
    background: repeating-linear-gradient(to bottom, #d9e9ed 0 28px, #d66d68 28px 56px);
}

.race-weather-snow {
    background:
        linear-gradient(90deg, rgba(234,246,252,.2), transparent 15% 85%, rgba(234,246,252,.2)),
        linear-gradient(90deg, #687883, #7f909a 50%, #687883);
    box-shadow: inset 0 0 120px rgba(224,243,252,.28);
}

.race-weather-snow .race-celestial {
    background: #f8fcff;
    box-shadow: 0 0 0 15px rgba(255,255,255,.11), 0 0 45px rgba(255,255,255,.4);
    transform: scale(.82);
}

.race-weather-snow .road-edge {
    background: repeating-linear-gradient(to bottom, #fff 0 28px, #b8dded 28px 56px);
    box-shadow: 0 0 15px rgba(255,255,255,.75);
}

@keyframes race-rain-fall {
    to { transform: translate3d(-55px, 125vh, 0) rotate(13deg); }
}

@keyframes race-snow-fall {
    to { transform: translate3d(var(--race-weather-drift), 120vh, 0) rotate(360deg); }
}

@keyframes race-star-twinkle {
    to { opacity: .35; transform: scale(.55); }
}

@keyframes race-weather-announce {
    0% { opacity: 0; transform: translateY(30px) scale(.65); }
    22%, 80% { opacity: 1; transform: translateY(0) scale(1.08); }
    100% { transform: scale(1); }
}

@media (max-width: 767.98px) {
    .race-page .play-section { padding: 0; }
    .race-page .game-stage { border: 0; border-radius: 0; }

    .race-page .race-stats {
        top: 8px;
        gap: 5px;
    }

    .race-page .race-stats div { padding: 5px 9px; }
    .race-page .race-stats span { font-size: .62rem; }
    .race-page .race-stats strong { font-size: 1rem; }

    .race-celestial {
        top: 72px;
        right: 18px;
        width: 52px;
    }

    .race-weather-status {
        bottom: 8px;
        left: 8px;
        min-width: 88px;
        padding: 5px 8px;
        border-width: 2px;
        font-size: .72rem;
    }

    .race-weather-status span { font-size: 1.15rem; }

    .race-page .player-car {
        bottom: 14px;
        transform: scale(1.05);
    }

    .race-page .drag-hint { bottom: 128px; }
    .race-page .obstacle { transform-origin: center; }
}

@media (max-width: 767.98px) and (orientation: landscape) {
    .race-celestial { top: 58px; right: 95px; width: 46px; }
    .race-weather-status { right: 8px; bottom: 8px; left: auto; }
    .race-page .player-car { transform: scale(1.18); }
    .race-page .drag-hint { bottom: 142px; }
}

@media (prefers-reduced-motion: reduce) {
    .race-raindrop,
    .race-snowflake,
    .race-stars i,
    .race-weather-status.changing {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Manicure game */
.manicure-art {
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.5) 0 5%, transparent 5.5%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.45) 0 7%, transparent 7.5%),
        linear-gradient(145deg, #ff9dc7, #b995ff);
}

.preview-manicure-hand {
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 47%;
    font-size: clamp(5rem, 9vw, 7.4rem);
    filter: drop-shadow(0 10px 3px rgba(91,43,104,.2));
    transform: translate(-50%, -50%) rotate(-12deg);
}

.preview-manicure-sparkle {
    position: absolute;
    z-index: 3;
    color: #fff7a8;
    font-size: 2rem;
    text-shadow: 0 3px 0 rgba(124,70,135,.15);
}

.preview-manicure-sparkle.sparkle-a { top: 13%; left: 17%; }
.preview-manicure-sparkle.sparkle-b { right: 14%; bottom: 21%; font-size: 2.6rem; }

.preview-polish {
    position: absolute;
    z-index: 4;
    right: 11%;
    bottom: 9%;
    width: 34px;
    height: 45px;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 8px 8px 11px 11px;
    box-shadow: 0 5px 0 rgba(78,42,97,.15);
}

.preview-polish::before {
    position: absolute;
    top: -21px;
    left: 7px;
    width: 13px;
    height: 19px;
    border-radius: 5px 5px 2px 2px;
    background: #4a3b61;
    content: "";
}

.preview-polish.polish-pink { background: #ff377f; }
.preview-polish.polish-purple {
    right: 24%;
    bottom: 5%;
    background: #7950f2;
    transform: rotate(-8deg);
}

.manicure-page { background: #f59bc8; }

.manicure-play-section,
.manicure-stage {
    width: 100%;
    height: 100dvh;
}

.manicure-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background:
        radial-gradient(circle at 10% 85%, rgba(255,255,255,.42), transparent 24%),
        radial-gradient(circle at 70% 12%, rgba(255,246,171,.35), transparent 19%),
        linear-gradient(145deg, #ffb4d3 0%, #d9b3ff 52%, #91dff1 100%);
}

.manicure-bg-shape {
    position: absolute;
    width: 34vmin;
    height: 34vmin;
    border: 5vmin solid rgba(255,255,255,.12);
    border-radius: 50%;
}

.manicure-bg-shape.shape-one { right: 18%; bottom: -18%; }
.manicure-bg-shape.shape-two { top: -20%; left: -10%; }

.manicure-bg-star {
    position: absolute;
    color: rgba(255,255,255,.67);
    font-size: clamp(2rem, 5vw, 5rem);
    animation: manicure-float 3s ease-in-out infinite alternate;
}

.manicure-bg-star.star-one { top: 15%; left: 12%; }
.manicure-bg-star.star-two { right: 29%; bottom: 13%; animation-delay: -1.5s; }

.manicure-hud {
    position: absolute;
    z-index: 35;
    top: 16px;
    left: 50%;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.manicure-hud > div {
    display: flex;
    min-width: 126px;
    padding: 7px 13px;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    color: #62416f;
    background: rgba(255,255,255,.82);
    box-shadow: 0 6px 18px rgba(94,53,111,.13);
    font-size: .87rem;
    font-weight: 900;
}

.manicure-hud strong {
    color: #e83e8c;
    font-size: 1.08rem;
}

.manicure-hand {
    --hand-scale: 1.14;
    position: absolute;
    z-index: 10;
    top: 53%;
    left: 41%;
    width: 350px;
    height: 510px;
    filter: drop-shadow(0 22px 12px rgba(104,55,92,.2));
    transform: translate(-50%, -50%) scale(var(--hand-scale));
    transform-origin: center;
}

.manicure-wrist,
.manicure-palm,
.manicure-finger {
    border: 4px solid #cf7e73;
    background: linear-gradient(110deg, #f3ad8d, #ffd0b0);
}

.manicure-wrist {
    position: absolute;
    z-index: 1;
    bottom: -55px;
    left: 104px;
    width: 158px;
    height: 145px;
    border-radius: 38px;
}

.manicure-palm {
    position: absolute;
    z-index: 4;
    top: 198px;
    left: 56px;
    width: 257px;
    height: 265px;
    border-radius: 43% 42% 38% 37%;
}

.manicure-finger {
    position: absolute;
    z-index: 3;
    display: block;
    padding: 0;
    border-radius: 48% 48% 24px 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.manicure-finger:focus-visible {
    z-index: 8;
    outline: 6px solid #fff176;
    outline-offset: 3px;
}

.finger-index { top: 69px; left: 70px; width: 66px; height: 265px; }
.finger-middle { top: 17px; left: 133px; width: 69px; height: 315px; }
.finger-ring { top: 54px; left: 198px; width: 66px; height: 285px; }
.finger-little { top: 111px; left: 258px; width: 58px; height: 225px; }
.finger-thumb {
    z-index: 6;
    top: 264px;
    left: 0;
    width: 119px;
    height: 72px;
    border-radius: 50% 36% 34% 50%;
    transform: rotate(-34deg);
    transform-origin: right center;
}

.manicure-nail {
    position: absolute;
    z-index: 7;
    top: 13px;
    left: 50%;
    width: 58%;
    height: 54px;
    border: 3px solid rgba(177,91,101,.7);
    border-radius: 55% 55% 34% 34%;
    background: var(--nail-color, #fff6ec);
    box-shadow: inset 5px 5px 0 rgba(255,255,255,.42), 0 3px 0 rgba(174,90,93,.15);
    transform: translateX(-50%);
    transition: height .25s cubic-bezier(.2,1.6,.5,1), background .2s, box-shadow .2s;
}

.finger-thumb .manicure-nail {
    top: 50%;
    left: 15px;
    width: 51px;
    height: 38px;
    border-radius: 50% 42% 42% 50%;
    transform: translateY(-50%);
}

.manicure-finger.trimmed:not(.finger-thumb) .manicure-nail {
    height: 34px;
    border-radius: 55% 55% 40% 40%;
}

.finger-thumb.trimmed .manicure-nail { width: 34px; }

.manicure-finger.painted .manicure-nail {
    background: var(--nail-color, #fff6ec);
    box-shadow: inset 7px 6px 0 rgba(255,255,255,.32), 0 4px 0 rgba(114,62,103,.18);
}

.manicure-floating-tool {
    --brush-color: #ff4f8b;
    position: absolute;
    z-index: 57;
    width: 86px;
    height: 100px;
    pointer-events: none;
    filter: drop-shadow(0 8px 3px rgba(92,49,102,.24));
    transform: translate(-25%, -72%);
}

.manicure-floating-tool[hidden] { display: none; }

.manicure-floating-tool .floating-clipper {
    display: block;
    font-size: 4.7rem;
    line-height: 1;
    transform: rotate(-28deg);
    transform-origin: 38% 70%;
}

.floating-polish-brush {
    position: relative;
    display: none;
    width: 58px;
    height: 100px;
    transform: rotate(-24deg);
    transform-origin: 50% 80%;
}

.floating-polish-brush i {
    position: absolute;
    left: 50%;
    display: block;
    transform: translateX(-50%);
}

.polish-brush-cap {
    top: 0;
    width: 33px;
    height: 42px;
    border: 4px solid #493753;
    border-radius: 9px 9px 5px 5px;
    background: linear-gradient(90deg, #594264, #81658d 50%, #4a374f);
}

.polish-brush-stem {
    top: 38px;
    width: 8px;
    height: 41px;
    border-radius: 0 0 5px 5px;
    background: #493753;
}

.polish-brush-tip {
    top: 72px;
    width: 22px;
    height: 28px;
    border: 3px solid #493753;
    border-radius: 8px 8px 55% 55%;
    background: var(--brush-color);
    box-shadow: inset 5px 3px 0 rgba(255,255,255,.28);
}

.manicure-floating-tool[data-tool="polish"] .floating-clipper { display: none; }
.manicure-floating-tool[data-tool="polish"] .floating-polish-brush { display: block; }

.manicure-floating-tool.using .floating-clipper {
    animation: manicure-clipper-use .22s ease-in-out infinite alternate;
}

.manicure-floating-tool.using .floating-polish-brush {
    animation: manicure-brush-use .24s ease-in-out infinite alternate;
}

.manicure-tools {
    position: absolute;
    z-index: 40;
    top: 50%;
    right: clamp(18px, 4vw, 62px);
    display: grid;
    width: clamp(220px, 25vw, 290px);
    padding: 18px;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 28px;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    color: #68416f;
    background: rgba(255,255,255,.83);
    box-shadow: 0 15px 35px rgba(92,50,105,.18);
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.manicure-tools-title {
    grid-column: 1 / -1;
    color: #8f3973;
    text-align: center;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1;
    text-shadow: 0 2px 0 #fff;
}

.manicure-tool-button,
.polish-button,
.manicure-reset-button {
    border: 3px solid transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.manicure-tool-button {
    display: grid;
    min-height: 104px;
    border-color: #efd8ea;
    border-radius: 20px;
    grid-row: span 2;
    place-items: center;
    color: #6b4773;
    background: #fff;
    font-weight: 900;
}

.manicure-tool-button span { font-size: 3.2rem; line-height: 1; }
.manicure-tool-button small { font-size: .98rem; font-weight: 900; }

.manicure-tool-button.active,
.polish-button.active {
    border-color: #ffe86e;
    box-shadow: 0 0 0 4px #f062a5, 0 7px 12px rgba(83,47,95,.14);
    transform: translateY(-2px);
}

.manicure-polishes {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 9px;
}

.polish-button {
    position: relative;
    min-width: 46px;
    height: 58px;
    margin-top: 5px;
    border: 4px solid rgba(255,255,255,.92);
    border-radius: 9px 9px 16px 16px;
    background: var(--polish);
    box-shadow:
        inset 7px 6px 0 rgba(255,255,255,.24),
        inset -5px -5px 0 rgba(63,35,70,.1),
        0 6px 0 rgba(82,49,91,.16);
}

.polish-button::before {
    position: absolute;
    top: -15px;
    left: 24%;
    width: 52%;
    height: 16px;
    border: 3px solid #44334c;
    border-radius: 7px 7px 2px 2px;
    background: linear-gradient(90deg, #4b3854, #80678b 52%, #46344d);
    content: "";
}

.polish-button::after {
    position: absolute;
    right: 24%;
    bottom: 10px;
    left: 24%;
    height: 17px;
    border: 2px solid rgba(255,255,255,.68);
    border-radius: 50%;
    background: rgba(255,255,255,.28);
    box-shadow: inset 0 -4px 0 rgba(255,255,255,.13);
    content: "";
}

.manicure-reset-button {
    grid-column: 1 / -1;
    padding: 11px 12px;
    border-color: #e8d8ef;
    border-radius: 14px;
    color: #76517e;
    background: #fff;
    font-size: .96rem;
    font-weight: 900;
}

.manicure-tip {
    position: absolute;
    z-index: 32;
    bottom: 18px;
    left: 41%;
    max-width: 440px;
    padding: 9px 17px;
    border: 3px solid rgba(255,255,255,.86);
    border-radius: 18px;
    color: #694770;
    background: rgba(255,255,255,.83);
    box-shadow: 0 7px 18px rgba(84,50,98,.12);
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
}

.manicure-celebration {
    position: absolute;
    z-index: 58;
    top: 19%;
    left: 41%;
    padding: 16px 24px;
    border: 5px solid #fff;
    border-radius: 25px;
    color: #9b3375;
    background: linear-gradient(135deg, #fff59d, #ffb8dc);
    box-shadow: 0 16px 30px rgba(77,42,91,.2);
    font-size: clamp(1.4rem, 4vw, 2.5rem);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.2) rotate(-8deg);
}

.manicure-celebration.show { animation: manicure-celebrate 2.6s ease both; }

.manicure-action-sparkle {
    --spark-x: 0;
    --spark-y: 0;
    --spark-color: #fff;
    position: absolute;
    z-index: 55;
    color: var(--spark-color);
    font-style: normal;
    pointer-events: none;
    text-shadow: 0 2px #fff;
    animation: manicure-sparkle .65s ease-out forwards;
}

.manicure-overlay {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: grid;
    padding: 24px;
    place-content: center;
    place-items: center;
    color: #66406c;
    background: rgba(96,50,111,.25);
    text-align: center;
    backdrop-filter: blur(10px);
}

.manicure-overlay[hidden],
.manicure-celebration[hidden] { display: none; }

.manicure-overlay-icon {
    font-size: clamp(5rem, 13vw, 9rem);
    filter: drop-shadow(0 10px 4px rgba(93,49,108,.2));
    animation: manicure-float 1.1s ease-in-out infinite alternate;
}

.manicure-overlay h1 {
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: .95;
    text-shadow: 0 5px 0 #bd62a0;
}

.manicure-overlay p {
    max-width: 500px;
    margin: 14px 0 18px;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 900;
}

.manicure-start-button {
    padding: 12px 34px;
    border: 4px solid #fff;
    border-radius: 20px;
    color: #7b3b75;
    background: #fff176;
    box-shadow: 0 7px 0 #c75d9e;
    font-size: 1.25rem;
    font-weight: 900;
}

@keyframes manicure-float {
    to { transform: translateY(-10px) rotate(6deg); }
}

@keyframes manicure-sparkle {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.4) rotate(140deg); }
}

@keyframes manicure-celebrate {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
    15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.15) rotate(-2deg); }
}

@keyframes manicure-clipper-use {
    to { transform: rotate(-18deg) scale(.92); }
}

@keyframes manicure-brush-use {
    to { transform: rotate(-14deg) translateY(8px); }
}

@media (max-width: 767.98px) {
    .manicure-hud {
        top: 8px;
        gap: 5px;
    }

    .manicure-hud > div {
        min-width: 104px;
        padding: 5px 8px;
        border-width: 2px;
        border-radius: 13px;
        font-size: .69rem;
    }

    .manicure-hud strong { font-size: .88rem; }

    .manicure-hand {
        --hand-scale: .82;
        top: 38%;
        left: 50%;
    }

    .manicure-tools {
        top: auto;
        right: 7px;
        bottom: 7px;
        left: 7px;
        width: auto;
        padding: 8px 9px;
        border-width: 3px;
        border-radius: 20px;
        grid-template-columns: 82px minmax(0, 1fr) 78px;
        align-items: center;
        gap: 7px;
        transform: none;
    }

    .manicure-tools-title {
        display: block;
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: .94rem;
    }

    .manicure-tool-button {
        min-height: 86px;
        border-radius: 15px;
        grid-column: 1;
        grid-row: 2;
    }

    .manicure-tool-button span { font-size: 2.65rem; }
    .manicure-tool-button small { font-size: .76rem; }

    .manicure-polishes {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px 5px;
    }

    .polish-button {
        min-width: 27px;
        height: 40px;
        margin-top: 4px;
        border-width: 3px;
        border-radius: 7px 7px 11px 11px;
    }

    .polish-button::before {
        top: -10px;
        height: 11px;
        border-width: 2px;
        border-radius: 5px 5px 1px 1px;
    }

    .polish-button::after {
        right: 25%;
        bottom: 6px;
        left: 25%;
        height: 11px;
        border-width: 1px;
    }

    .manicure-reset-button {
        grid-column: 3;
        grid-row: 2;
        min-height: 70px;
        padding: 4px;
        font-size: .74rem;
    }

    .manicure-tip {
        z-index: 42;
        bottom: 140px;
        left: 50%;
        width: max-content;
        max-width: 92vw;
        padding: 6px 11px;
        border-width: 2px;
        font-size: .7rem;
    }

    .manicure-celebration { top: 20%; left: 50%; }

    .manicure-floating-tool {
        width: 70px;
        height: 82px;
    }

    .manicure-floating-tool .floating-clipper { font-size: 3.8rem; }

    .floating-polish-brush {
        width: 48px;
        height: 82px;
        transform: rotate(-24deg) scale(.82);
        transform-origin: top center;
    }
}

@media (max-width: 767.98px) and (orientation: landscape) {
    .manicure-hand {
        --hand-scale: .68;
        top: 52%;
        left: 36%;
    }

    .manicure-tools {
        top: 50%;
        right: 8px;
        bottom: auto;
        left: auto;
        width: 250px;
        grid-template-columns: 75px 1fr;
        transform: translateY(-50%);
    }

    .manicure-polishes {
        grid-column: 2;
        grid-row: 2;
    }

    .manicure-reset-button {
        grid-column: 1 / -1;
        grid-row: 3;
        min-height: auto;
    }

    .manicure-tip {
        bottom: 7px;
        left: 36%;
    }

    .manicure-hud { left: 39%; }
    .manicure-celebration { top: 27%; left: 36%; }
}

@media (max-height: 620px) and (orientation: portrait) {
    .manicure-hand { --hand-scale: .67; top: 35%; }
    .manicure-tip { bottom: 135px; }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid > div:nth-child(n) { grid-column: span 1; }
    .home-page .game-grid > div:nth-child(17) { grid-column: 2 / span 1; }
}

@media (prefers-reduced-motion: reduce) {
    .manicure-bg-star,
    .manicure-overlay-icon,
    .manicure-celebration.show,
    .manicure-action-sparkle,
    .manicure-floating-tool.using .floating-clipper,
    .manicure-floating-tool.using .floating-polish-brush {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Dentist game */
.dentist-art {
    background:
        radial-gradient(circle at 22% 22%, rgba(255,255,255,.5) 0 5%, transparent 5.5%),
        linear-gradient(145deg, #7fe2ef, #68b7f4 55%, #9e8bff);
}

.preview-dentist-mouth {
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 46%;
    display: flex;
    width: 58%;
    height: 47%;
    border: 7px solid #f08085;
    border-radius: 45% 45% 50% 50%;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    background: #7d294c;
    box-shadow: 0 8px 0 rgba(46,70,112,.14);
    transform: translate(-50%, -50%);
}

.preview-dentist-mouth span {
    margin: -5px;
    font-size: clamp(2.4rem, 5vw, 4.1rem);
    filter: drop-shadow(0 3px 0 rgba(41,54,85,.15));
}

.preview-dirty-tooth { filter: sepia(.9) saturate(2) drop-shadow(0 3px 0 rgba(41,54,85,.15)) !important; }

.preview-toothbrush {
    position: absolute;
    z-index: 4;
    right: 5%;
    bottom: 3%;
    font-size: clamp(3rem, 6vw, 5rem);
    filter: drop-shadow(0 6px 2px rgba(42,58,100,.2));
    transform: rotate(-28deg);
}

.preview-dentist-star {
    position: absolute;
    z-index: 5;
    color: #fff79b;
    font-size: 2.2rem;
}

.preview-dentist-star.star-a { top: 10%; left: 12%; }
.preview-dentist-star.star-b { top: 16%; right: 13%; font-size: 2.8rem; }

.dentist-page { background: #6bd3e3; }

.dentist-play-section,
.dentist-stage {
    width: 100%;
    height: 100dvh;
}

.dentist-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background:
        radial-gradient(circle at 75% 12%, rgba(255,255,255,.42), transparent 22%),
        radial-gradient(circle at 12% 85%, rgba(255,246,157,.3), transparent 25%),
        linear-gradient(145deg, #70dbe8 0%, #75bcf5 50%, #b59cf8 100%);
}

.dentist-bg-bubble {
    position: absolute;
    border: 7px solid rgba(255,255,255,.25);
    border-radius: 50%;
}

.dentist-bg-bubble.bubble-a { top: 15%; left: 7%; width: 15vmin; height: 15vmin; }
.dentist-bg-bubble.bubble-b { right: 24%; bottom: 7%; width: 25vmin; height: 25vmin; }

.dentist-bg-sparkle {
    position: absolute;
    color: rgba(255,255,255,.72);
    font-size: clamp(2rem, 5vw, 4.8rem);
    animation: dentist-float 2.4s ease-in-out infinite alternate;
}

.dentist-bg-sparkle.sparkle-a { top: 18%; left: 18%; }
.dentist-bg-sparkle.sparkle-b { right: 29%; bottom: 15%; animation-delay: -1.2s; }

.dentist-hud {
    position: absolute;
    z-index: 35;
    top: 16px;
    left: 44%;
    display: flex;
    min-width: 230px;
    padding: 8px 15px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #35677e;
    background: rgba(255,255,255,.86);
    box-shadow: 0 7px 20px rgba(37,75,112,.14);
    font-size: .9rem;
    font-weight: 900;
    transform: translateX(-50%);
}

.dentist-hud strong { color: #4d7de2; font-size: 1.12rem; }

.dentist-patient {
    --patient-scale: 1;
    position: absolute;
    z-index: 10;
    top: 54%;
    left: 42%;
    width: 530px;
    height: 555px;
    border: 7px solid #ca806c;
    border-radius: 47% 47% 44% 44%;
    background:
        radial-gradient(circle at 20% 53%, rgba(255,120,135,.22) 0 7%, transparent 7.5%),
        radial-gradient(circle at 80% 53%, rgba(255,120,135,.22) 0 7%, transparent 7.5%),
        linear-gradient(120deg, #ffc49e, #ffe0bd);
    box-shadow: 0 24px 0 rgba(66,91,128,.12);
    transform: translate(-50%, -50%) scale(var(--patient-scale));
    transform-origin: center;
}

.dentist-ear {
    position: absolute;
    z-index: -1;
    top: 220px;
    width: 65px;
    height: 100px;
    border: 7px solid #ca806c;
    border-radius: 50%;
    background: #ffc6a1;
}

.dentist-ear::after {
    position: absolute;
    inset: 20px 14px;
    border: 4px solid rgba(194,101,93,.35);
    border-radius: 50%;
    content: "";
}

.dentist-ear.ear-left { left: -43px; }
.dentist-ear.ear-right { right: -43px; }

.dentist-hair {
    position: absolute;
    z-index: 5;
    top: -22px;
    left: 23px;
    width: 475px;
    height: 175px;
    border-radius: 50% 50% 38% 38%;
    background:
        radial-gradient(circle at 12% 60%, #6d426d 0 16%, transparent 17%),
        radial-gradient(circle at 30% 40%, #754a72 0 24%, transparent 25%),
        radial-gradient(circle at 53% 34%, #6b406a 0 27%, transparent 28%),
        radial-gradient(circle at 76% 38%, #7c4b75 0 24%, transparent 25%),
        radial-gradient(circle at 92% 62%, #654062 0 17%, transparent 18%),
        #75476f;
}

.dentist-eye {
    position: absolute;
    z-index: 4;
    top: 198px;
    width: 72px;
    height: 38px;
    border-bottom: 9px solid #5b465d;
    border-radius: 0 0 50% 50%;
}

.dentist-eye::after {
    position: absolute;
    bottom: -17px;
    width: 18px;
    height: 6px;
    border-radius: 50%;
    background: #7a596d;
    content: "";
}

.dentist-eye.eye-left { left: 105px; transform: rotate(7deg); }
.dentist-eye.eye-right { right: 105px; transform: rotate(-7deg); }
.dentist-eye.eye-left::after { left: 5px; }
.dentist-eye.eye-right::after { right: 5px; }

.dentist-nose {
    position: absolute;
    z-index: 4;
    top: 246px;
    left: 50%;
    width: 31px;
    height: 24px;
    border-right: 5px solid rgba(180,100,91,.5);
    border-bottom: 5px solid rgba(180,100,91,.5);
    border-radius: 0 0 13px 0;
    transform: translateX(-50%);
}

.dentist-mouth {
    position: absolute;
    z-index: 6;
    right: 48px;
    bottom: 39px;
    left: 48px;
    height: 250px;
    overflow: hidden;
    border: 9px solid #da6672;
    border-radius: 42% 42% 48% 48%;
    background:
        radial-gradient(ellipse at 50% 90%, #f47d92 0 30%, transparent 31%),
        #652648;
    box-shadow: inset 0 12px 12px rgba(62,20,48,.24), 0 5px 0 rgba(159,75,74,.16);
}

.dentist-tongue {
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 210px;
    height: 75px;
    border-radius: 50% 50% 0 0;
    background: #ec7890;
    transform: translateX(-50%);
}

.dentist-teeth {
    position: absolute;
    z-index: 5;
    left: 50%;
    display: grid;
    width: 370px;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    transform: translateX(-50%);
}

.upper-teeth { top: -3px; align-items: start; }
.lower-teeth { bottom: -3px; align-items: end; }

.dentist-tooth {
    position: relative;
    display: block;
    width: 59px;
    height: 82px;
    padding: 0;
    overflow: hidden;
    border: 3px solid #d8d4c8;
    border-radius: 10px 10px 45% 45%;
    background: linear-gradient(110deg, #fffef4, #eaf6f6);
    box-shadow: inset 7px 4px 0 rgba(255,255,255,.7);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lower-teeth .dentist-tooth { border-radius: 45% 45% 10px 10px; }

.dentist-tooth:focus-visible {
    z-index: 10;
    outline: 5px solid #fff176;
    outline-offset: -2px;
}

.dentist-tooth i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #62d397;
    font-size: 1.55rem;
    font-style: normal;
    text-shadow: 13px 15px #8f63e6, -12px 20px #5fc9e8;
}

.dentist-tooth.issue-dirty {
    background:
        radial-gradient(circle at 35% 48%, rgba(191,144,52,.68) 0 13%, transparent 14%),
        radial-gradient(circle at 65% 67%, rgba(219,168,58,.58) 0 17%, transparent 18%),
        linear-gradient(110deg, #fff5be, #e9d77e);
}

.dentist-tooth.issue-cavity::after {
    position: absolute;
    top: 41%;
    left: 50%;
    width: 22px;
    height: 20px;
    border-radius: 48% 55% 43% 50%;
    background: #594056;
    box-shadow: inset 4px 4px 0 #352b3e;
    content: "";
    transform: translate(-50%, -50%) rotate(12deg);
}

.dentist-tooth.issue-germ {
    background:
        radial-gradient(circle at 30% 30%, rgba(92,215,139,.32) 0 18%, transparent 19%),
        radial-gradient(circle at 70% 66%, rgba(145,93,227,.28) 0 20%, transparent 21%),
        linear-gradient(110deg, #fffef4, #eaf6f6);
}

.dentist-tooth.clean { background: linear-gradient(110deg, #fffef4, #eafcff); }
.dentist-tooth.just-cleaned { animation: dentist-clean .6s ease; }
.dentist-tooth.wrong-tool { animation: dentist-shake .35s ease; }
.dentist-tooth.tooth-happy { animation: dentist-happy .35s ease; }

.dentist-floating-tool {
    position: absolute;
    z-index: 52;
    width: 84px;
    height: 84px;
    pointer-events: none;
    filter: drop-shadow(0 8px 3px rgba(39,65,96,.24));
    transform: translate(-24%, -72%);
    transition: opacity .15s;
}

.dentist-floating-tool[hidden] { display: none; }

.dentist-floating-tool span {
    display: block;
    font-size: 4.5rem;
    line-height: 1;
    transform-origin: 35% 75%;
}

.dentist-floating-tool[data-tool="brush"] span { transform: rotate(-32deg); }
.dentist-floating-tool[data-tool="drill"] span { transform: rotate(-28deg); }
.dentist-floating-tool[data-tool="rinse"] span { transform: rotate(-12deg); }

.dentist-floating-tool.using span {
    animation: dentist-tool-use .24s ease-in-out infinite alternate;
}

.dentist-floating-tool[data-tool="rinse"].using::after {
    position: absolute;
    right: 7px;
    bottom: -10px;
    color: #dffaff;
    font-size: 1.7rem;
    letter-spacing: 5px;
    text-shadow: 0 2px #3eaed9;
    content: "• •";
    animation: dentist-water-drops .45s linear infinite;
}

.dentist-tools {
    position: absolute;
    z-index: 40;
    top: 50%;
    right: clamp(17px, 3vw, 48px);
    display: grid;
    width: clamp(205px, 22vw, 255px);
    padding: 16px;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 27px;
    gap: 9px;
    color: #3e6880;
    background: rgba(255,255,255,.86);
    box-shadow: 0 16px 35px rgba(42,71,114,.18);
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
}

.dentist-tools > strong {
    color: #27728d;
    text-align: center;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1;
    text-shadow: 0 2px 0 #fff;
}

.dentist-tool {
    display: flex;
    min-height: 70px;
    padding: 8px 11px;
    border: 3px solid #d9e9f0;
    border-radius: 17px;
    align-items: center;
    gap: 9px;
    color: #44677c;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
    -webkit-tap-highlight-color: transparent;
}

.dentist-tool span { width: 50px; font-size: 2.45rem; line-height: 1; }
.dentist-tool small { font-size: .88rem; font-weight: 900; }

.dentist-tool.active {
    border-color: #fff176;
    background: #eafcff;
    box-shadow: 0 0 0 4px #42bad2, 0 7px 12px rgba(47,81,111,.15);
    transform: translateX(-3px);
}

.dentist-reset {
    padding: 8px 10px;
    border: 3px solid #d8e8ef;
    border-radius: 14px;
    color: #4b7185;
    background: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.dentist-tip {
    position: absolute;
    z-index: 34;
    bottom: 17px;
    left: 42%;
    width: max-content;
    max-width: 470px;
    padding: 9px 17px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 18px;
    color: #3f6b80;
    background: rgba(255,255,255,.86);
    box-shadow: 0 7px 18px rgba(45,75,112,.13);
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
}

.dentist-celebration {
    position: absolute;
    z-index: 60;
    top: 22%;
    left: 42%;
    padding: 16px 24px;
    border: 5px solid #fff;
    border-radius: 25px;
    color: #376c86;
    background: linear-gradient(135deg, #fff7a1, #b9f4ff);
    box-shadow: 0 16px 30px rgba(43,74,113,.2);
    font-size: clamp(1.35rem, 4vw, 2.5rem);
    transform: translate(-50%, -50%) scale(.2);
}

.dentist-celebration.show { animation: dentist-celebrate 2.8s ease both; }
.dentist-celebration[hidden] { display: none; }

.dentist-particle {
    --move-x: 0;
    --move-y: -40px;
    position: absolute;
    z-index: 58;
    color: #fff176;
    font-style: normal;
    pointer-events: none;
    text-shadow: 0 2px #fff;
    animation: dentist-particle .65s ease-out forwards;
}

.dentist-particle.particle-rinse { color: #dffaff; text-shadow: 0 2px #45b9e4; }

.dentist-overlay {
    position: absolute;
    z-index: 70;
    inset: 0;
    display: grid;
    padding: 24px;
    place-content: center;
    place-items: center;
    color: #35677e;
    background: rgba(40,91,131,.25);
    text-align: center;
    backdrop-filter: blur(10px);
}

.dentist-overlay[hidden] { display: none; }

.dentist-overlay-icon {
    font-size: clamp(5rem, 13vw, 9rem);
    filter: drop-shadow(0 10px 4px rgba(43,72,111,.2));
    animation: dentist-float 1s ease-in-out infinite alternate;
}

.dentist-overlay h1 {
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: .95;
    text-shadow: 0 5px 0 #438fb6;
}

.dentist-overlay p {
    margin: 14px 0 18px;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 900;
}

.dentist-start-button {
    padding: 12px 34px;
    border: 4px solid #fff;
    border-radius: 20px;
    color: #35657e;
    background: #fff176;
    box-shadow: 0 7px 0 #3b94b8;
    font-size: 1.25rem;
    font-weight: 900;
}

@keyframes dentist-float {
    to { transform: translateY(-10px) rotate(5deg); }
}

@keyframes dentist-clean {
    45% { filter: brightness(1.25); transform: scale(1.18); }
}

@keyframes dentist-shake {
    25% { transform: translateX(-7px) rotate(-4deg); }
    50% { transform: translateX(7px) rotate(4deg); }
    75% { transform: translateX(-4px); }
}

@keyframes dentist-happy {
    50% { transform: translateY(-5px) scale(1.06); }
}

@keyframes dentist-tool-use {
    to { transform: rotate(-18deg) translateY(7px) scale(1.06); }
}

@keyframes dentist-water-drops {
    to { opacity: 0; transform: translateY(18px); }
}

@keyframes dentist-particle {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) scale(1.5) rotate(150deg); }
}

@keyframes dentist-celebrate {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    15%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.15) rotate(-2deg); }
}

@media (max-width: 767.98px) {
    .dentist-hud {
        top: 8px;
        left: 50%;
        min-width: 205px;
        padding: 5px 10px;
        border-width: 2px;
        border-radius: 13px;
        font-size: .75rem;
    }

    .dentist-hud strong { font-size: .9rem; }

    .dentist-patient {
        --patient-scale: .64;
        top: 40%;
        left: 50%;
    }

    .dentist-tools {
        top: auto;
        right: 7px;
        bottom: 7px;
        left: 7px;
        width: auto;
        padding: 8px;
        border-width: 3px;
        border-radius: 20px;
        grid-template-columns: repeat(3, 1fr) 82px;
        gap: 6px;
        transform: none;
    }

    .dentist-tools > strong {
        display: block;
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: .96rem;
    }

    .dentist-tool {
        min-height: 72px;
        padding: 4px;
        border-radius: 14px;
        grid-row: 2;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
    }

    .dentist-tool span { width: auto; font-size: 2rem; }
    .dentist-tool small { font-size: .67rem; line-height: .9; }
    .dentist-tool.active { transform: translateY(-3px); }

    .dentist-reset {
        grid-row: 2;
        min-height: 55px;
        padding: 4px;
        font-size: .64rem;
    }

    .dentist-tip {
        z-index: 42;
        bottom: 118px;
        left: 50%;
        max-width: 92vw;
        padding: 6px 11px;
        border-width: 2px;
        font-size: .69rem;
    }

    .dentist-celebration { top: 18%; left: 50%; }

    .dentist-floating-tool {
        width: 68px;
        height: 68px;
    }

    .dentist-floating-tool span { font-size: 3.7rem; }
}

@media (max-width: 767.98px) and (orientation: landscape) {
    .dentist-patient {
        --patient-scale: .54;
        top: 52%;
        left: 37%;
    }

    .dentist-tools {
        top: 50%;
        right: 8px;
        bottom: auto;
        left: auto;
        width: 215px;
        grid-template-columns: repeat(3, 1fr);
        transform: translateY(-50%);
    }

    .dentist-tools > strong { grid-row: 1; }
    .dentist-tool { grid-row: 2; }
    .dentist-reset { grid-column: 1 / -1; grid-row: 3; min-height: auto; }
    .dentist-tip { bottom: 6px; left: 37%; }
    .dentist-hud { left: 39%; }
    .dentist-celebration { top: 25%; left: 37%; }
}

@media (max-height: 620px) and (orientation: portrait) {
    .dentist-patient { --patient-scale: .54; top: 38%; }
    .dentist-tip { bottom: 113px; }
}

@media (prefers-reduced-motion: reduce) {
    .dentist-bg-sparkle,
    .dentist-overlay-icon,
    .dentist-celebration.show,
    .dentist-particle,
    .dentist-tooth,
    .dentist-floating-tool.using span,
    .dentist-floating-tool[data-tool="rinse"].using::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Final compact overrides must follow the game-specific mobile rules. */
@media (max-width: 480px) {
    .manicure-hand {
        --hand-scale: .58;
    }

    .dentist-patient {
        --patient-scale: .56;
    }
}

@media (max-width: 360px) {
    .manicure-hand {
        --hand-scale: .52;
    }

    .dentist-patient {
        --patient-scale: .5;
    }
}

/* Stickman Aventureiro */
.stickman-art {
    background:
        radial-gradient(circle at 82% 18%, #ffe66d 0 10%, transparent 10.5%),
        linear-gradient(#69d7ff 0 68%, #b8f19a 69%);
}

.preview-stick-cloud {
    position: absolute;
    width: 68px;
    height: 22px;
    border-radius: 30px;
    background: rgba(255,255,255,.78);
}

.preview-stick-cloud::before,
.preview-stick-cloud::after {
    position: absolute;
    bottom: 3px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.preview-stick-cloud::before { left: 10px; width: 27px; height: 27px; }
.preview-stick-cloud::after { right: 8px; width: 34px; height: 34px; }
.preview-stick-cloud.cloud-one { top: 18%; left: 9%; }
.preview-stick-cloud.cloud-two { top: 32%; right: 7%; transform: scale(.72); }

.preview-stick-platform {
    position: absolute;
    height: 15px;
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(#80ea83 0 35%, #5fb661 36% 60%, #805642 61%);
    box-shadow: 0 5px 0 rgba(83,61,69,.16);
}

.preview-stick-platform.platform-one { bottom: 22%; left: 5%; width: 38%; }
.preview-stick-platform.platform-two { right: 5%; bottom: 46%; width: 32%; }

.preview-stick-star {
    position: absolute;
    z-index: 3;
    color: #ffe33e;
    font-size: 2rem;
    text-shadow: 0 2px #fff, 0 0 12px #ffba39;
}

.preview-stick-star.star-one { bottom: 31%; left: 19%; }
.preview-stick-star.star-two { right: 16%; bottom: 56%; }
.preview-stick-flag { position: absolute; right: 7%; bottom: 22%; color: #7448df; font-size: 3.2rem; }

.preview-stickman {
    position: absolute;
    z-index: 4;
    bottom: 24%;
    left: 42%;
    width: 56px;
    height: 104px;
    filter: drop-shadow(0 4px 0 rgba(255,255,255,.65));
    transform: rotate(-5deg);
}

.preview-stickman i {
    position: absolute;
    display: block;
    border-radius: 20px;
    background: #302642;
}

.preview-stickman .stick-head {
    top: 0;
    left: 15px;
    width: 29px;
    height: 29px;
    border: 5px solid #302642;
    border-radius: 50%;
    background: #fff8e9;
}

.preview-stickman .stick-body { top: 27px; left: 26px; width: 7px; height: 43px; }
.preview-stickman .stick-arm { top: 37px; width: 7px; height: 35px; transform-origin: top center; }
.preview-stickman .arm-left { left: 25px; transform: rotate(55deg); }
.preview-stickman .arm-right { left: 27px; transform: rotate(-62deg); }
.preview-stickman .stick-leg { top: 65px; width: 7px; height: 40px; transform-origin: top center; }
.preview-stickman .leg-left { left: 26px; transform: rotate(25deg); }
.preview-stickman .leg-right { left: 28px; transform: rotate(-29deg); }

.stickman-page,
.stickman-play-section,
.stickman-stage {
    width: 100%;
    height: 100dvh;
}

.stickman-page {
    background: #69d7ff;
}

.stickman-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background: #69d7ff;
}

#stickmanCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.stickman-hud {
    position: absolute;
    z-index: 25;
    top: 10px;
    left: 50%;
    display: flex;
    padding: 7px 13px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 20px;
    gap: 7px;
    color: #423657;
    background: rgba(255,255,255,.86);
    box-shadow: 0 8px 22px rgba(63,73,117,.18);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.stickman-hud > div {
    display: grid;
    min-width: 78px;
    padding: 3px 9px;
    border-radius: 12px;
    place-items: center;
    background: rgba(232,247,255,.75);
}

.stickman-hud span {
    color: #766b88;
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .8px;
}

.stickman-hud strong {
    color: #6746d9;
    font-family: "Baloo 2", cursive;
    font-size: 1.25rem;
    line-height: 1;
}

#stickmanLives {
    color: #ff5579;
    letter-spacing: 2px;
}

.stickman-controls {
    position: absolute;
    z-index: 35;
    right: max(13px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(13px, env(safe-area-inset-left));
    display: flex;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
}

.stickman-direction-controls {
    display: flex;
    gap: 10px;
}

.stickman-control {
    display: grid;
    width: clamp(58px, 9vw, 76px);
    height: clamp(58px, 9vw, 76px);
    padding: 0;
    border: 4px solid #fff;
    border-radius: 22px;
    place-items: center;
    color: #493c68;
    background: rgba(255,255,255,.9);
    box-shadow: 0 7px 0 rgba(68,57,96,.28), 0 10px 24px rgba(55,66,104,.18);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    pointer-events: auto;
    touch-action: none;
}

.stickman-control.pressed,
.stickman-control:active {
    transform: translateY(5px) scale(.97);
    box-shadow: 0 2px 0 rgba(68,57,96,.28);
}

.stickman-jump {
    color: #fff;
    background: linear-gradient(145deg, #694be4, #a257e8);
    box-shadow: 0 7px 0 #4931a9, 0 10px 24px rgba(69,45,153,.25);
    line-height: .8;
}

.stickman-jump small {
    margin-top: -7px;
    font-size: .52rem;
    letter-spacing: .7px;
}

.stickman-message {
    position: absolute;
    z-index: 28;
    top: 21%;
    left: 50%;
    display: flex;
    opacity: 0;
    padding: 12px 19px;
    border: 4px solid #fff;
    border-radius: 22px;
    align-items: center;
    gap: 8px;
    color: #493c68;
    background: #fff38a;
    box-shadow: 0 12px 28px rgba(76,61,104,.2);
    font-size: clamp(1rem, 3vw, 1.55rem);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.3);
}

.stickman-message.visible {
    animation: stickman-message-pop .95s ease both;
}

.stickman-message.success { background: #a9f4bd; }
.stickman-message.danger { background: #ffb3c5; }
.stickman-message.warning { background: #ffe69a; }

.stickman-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: grid;
    padding: 22px;
    place-content: center;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,239,112,.25), transparent 26%),
        linear-gradient(145deg, rgba(65,57,148,.9), rgba(46,29,100,.93));
    text-align: center;
    backdrop-filter: blur(8px);
}

.stickman-overlay.hidden {
    display: none;
}

.stickman-overlay-hero {
    position: relative;
    width: 135px;
    height: 205px;
    filter: drop-shadow(0 8px 0 rgba(28,18,67,.3));
    transform: rotate(-5deg);
    animation: stickman-hero-float 1.1s ease-in-out infinite alternate;
}

.stickman-overlay-hero > span {
    position: absolute;
    display: block;
    border-radius: 30px;
    background: #fff;
}

.overlay-stick-head {
    top: 0;
    left: 42px;
    width: 55px;
    height: 55px;
    border: 9px solid #fff;
    border-radius: 50% !important;
    background: transparent !important;
}

.overlay-stick-body { top: 50px; left: 62px; width: 13px; height: 79px; }
.overlay-stick-arm { top: 68px; width: 12px; height: 68px; transform-origin: top center; }
.overlay-stick-arm.arm-a { left: 62px; transform: rotate(64deg); }
.overlay-stick-arm.arm-b { left: 65px; transform: rotate(-57deg); }
.overlay-stick-leg { top: 120px; width: 13px; height: 84px; transform-origin: top center; }
.overlay-stick-leg.leg-a { left: 62px; transform: rotate(27deg); }
.overlay-stick-leg.leg-b { left: 65px; transform: rotate(-29deg); }

.stickman-overlay-hero i {
    position: absolute;
    top: 12px;
    right: -30px;
    color: #ffe34e;
    font-size: 3.2rem;
    font-style: normal;
    text-shadow: 0 0 18px #ffe34e;
}

.stickman-overlay h1 {
    margin: 8px 0 0;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 800;
    line-height: .9;
    text-shadow: 0 5px 0 #332379;
}

.stickman-overlay p {
    max-width: 520px;
    margin: 14px 0 17px;
    color: #eeeaff;
    font-size: clamp(.95rem, 2.2vw, 1.18rem);
    font-weight: 800;
}

.stickman-start-button {
    padding: 12px 30px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #493c68;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8a32;
    font-size: 1.15rem;
    font-weight: 900;
}

.stickman-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8a32;
}

@keyframes stickman-message-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
    18%, 76% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1); }
}

@keyframes stickman-hero-float {
    to { transform: translateY(-9px) rotate(3deg); }
}

@media (max-width: 767.98px) {
    .stickman-hud {
        top: 7px;
        padding: 5px 7px;
        border-width: 2px;
        border-radius: 15px;
        gap: 4px;
    }

    .stickman-hud > div {
        min-width: 61px;
        padding: 3px 5px;
    }

    .stickman-hud span { font-size: .45rem; }
    .stickman-hud strong { font-size: 1rem; }

    .stickman-control {
        width: 58px;
        height: 58px;
        border-width: 3px;
        border-radius: 18px;
    }

    .stickman-direction-controls { gap: 7px; }
    .stickman-message { top: 18%; padding: 9px 13px; border-width: 3px; }

    .stickman-overlay-hero {
        transform: rotate(-5deg) scale(.78);
        margin: -22px 0;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .stickman-hud {
        top: 5px;
    }

    .stickman-control {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.25rem;
    }

    .stickman-overlay {
        grid-template-columns: 115px minmax(0, 440px);
        grid-template-rows: auto auto auto;
        column-gap: 15px;
    }

    .stickman-overlay-hero {
        grid-row: 1 / 4;
        transform: rotate(-5deg) scale(.62);
    }

    .stickman-overlay h1 {
        font-size: 2.2rem;
    }

    .stickman-overlay p {
        margin: 7px 0 9px;
        font-size: .8rem;
    }

    .stickman-start-button {
        padding: 7px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stickman-message.visible,
    .stickman-overlay-hero {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Desafio da Cabeçada */
.header-art {
    background:
        radial-gradient(circle at 82% 15%, rgba(255,240,113,.9) 0 9%, transparent 9.5%),
        linear-gradient(#6ed1f5 0 52%, #7463b8 53% 72%, #42b85f 73%);
}

.preview-header-crowd {
    position: absolute;
    right: 0;
    bottom: 28%;
    left: 0;
    height: 25%;
    opacity: .85;
    background:
        radial-gradient(circle, #ffe15d 0 3px, transparent 4px) 0 0 / 23px 19px,
        radial-gradient(circle, #ff6c9f 0 3px, transparent 4px) 11px 8px / 27px 23px,
        #6e5baa;
}

.preview-header-ball {
    position: absolute;
    z-index: 5;
    top: 15%;
    left: 50%;
    font-size: clamp(3.1rem, 6vw, 5rem);
    filter: drop-shadow(0 8px 2px rgba(46,54,91,.25));
    transform: translateX(-50%) rotate(-14deg);
}

.preview-header-player {
    position: absolute;
    z-index: 4;
    bottom: 8%;
    left: 50%;
    width: 92px;
    height: 135px;
    transform: translateX(-50%);
}

.preview-header-player i {
    position: absolute;
    display: block;
}

.preview-header-player .header-head {
    z-index: 2;
    top: 0;
    left: 23px;
    width: 48px;
    height: 51px;
    border: 5px solid #34416c;
    border-radius: 50%;
    background: #f6b58e;
}

.preview-header-player .header-hair {
    z-index: 3;
    top: -2px;
    left: 25px;
    width: 44px;
    height: 25px;
    border-radius: 50% 50% 30% 30%;
    background: #342e46;
}

.preview-header-player .header-body {
    bottom: 0;
    left: 17px;
    width: 60px;
    height: 88px;
    border: 5px solid #34416c;
    border-radius: 28px 28px 12px 12px;
    background: linear-gradient(90deg, #ff5876, #ff8d62);
}

.preview-header-impact {
    position: absolute;
    z-index: 6;
    top: 33%;
    left: 59%;
    color: #ffe451;
    font-size: 2.5rem;
    text-shadow: 0 0 12px #fff;
}

.preview-header-score {
    position: absolute;
    z-index: 6;
    top: 22%;
    right: 17%;
    padding: 3px 9px;
    border: 3px solid #fff;
    border-radius: 13px;
    color: #fff;
    background: #7956df;
    font-size: 1.25rem;
    font-weight: 900;
    transform: rotate(7deg);
}

.header-page,
.header-play-section,
.header-stage {
    width: 100%;
    height: 100dvh;
}

.header-page {
    background: #6ed1f5;
}

.header-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background: #6ed1f5;
}

#headerCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.header-hud {
    position: absolute;
    z-index: 25;
    top: 10px;
    left: 50%;
    display: flex;
    padding: 7px 11px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 20px;
    gap: 7px;
    color: #3e4064;
    background: rgba(255,255,255,.87);
    box-shadow: 0 8px 23px rgba(53,72,111,.18);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.header-hud > div {
    display: grid;
    min-width: 83px;
    padding: 3px 9px;
    border-radius: 12px;
    place-items: center;
    background: rgba(227,247,255,.82);
}

.header-hud span {
    color: #6c718e;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .7px;
}

.header-hud strong {
    color: #6550d7;
    font-family: "Baloo 2", cursive;
    font-size: 1.25rem;
    line-height: 1;
}

#headerLives {
    color: #ff657f;
    font-family: "Nunito", sans-serif;
    font-size: .95rem;
    letter-spacing: 1px;
}

.header-controls {
    position: absolute;
    z-index: 35;
    right: max(13px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(13px, env(safe-area-inset-left));
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.header-control {
    display: grid;
    width: clamp(60px, 9vw, 78px);
    height: clamp(60px, 9vw, 78px);
    padding: 0;
    border: 4px solid #fff;
    border-radius: 23px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #5d54d9, #8b62e9);
    box-shadow: 0 7px 0 #44399f, 0 10px 24px rgba(58,50,127,.25);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    pointer-events: auto;
    touch-action: none;
}

.header-control.pressed,
.header-control:active {
    transform: translateY(5px) scale(.97);
    box-shadow: 0 2px 0 #44399f;
}

.header-tip {
    position: absolute;
    z-index: 24;
    bottom: clamp(80px, 13vh, 125px);
    left: 50%;
    width: max-content;
    max-width: 74vw;
    padding: 8px 13px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 17px;
    color: #424264;
    background: rgba(255,255,255,.86);
    box-shadow: 0 7px 18px rgba(50,66,103,.16);
    font-size: .8rem;
    font-weight: 900;
    pointer-events: none;
    transform: translateX(-50%);
    animation: header-tip-bob 1.15s ease-in-out infinite alternate;
}

.header-tip.hidden {
    display: none;
}

.header-combo {
    position: absolute;
    z-index: 30;
    top: 25%;
    left: 50%;
    display: flex;
    opacity: 0;
    padding: 12px 19px;
    border: 4px solid #fff;
    border-radius: 22px;
    align-items: center;
    gap: 8px;
    color: #4a3d63;
    background: #ffe279;
    box-shadow: 0 13px 30px rgba(66,60,104,.2);
    font-size: clamp(1rem, 3vw, 1.55rem);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.3);
}

.header-combo.visible {
    animation: header-combo-pop .9s ease both;
}

.header-combo.special {
    background: linear-gradient(135deg, #ffe969, #ff99ce, #89edff);
}

.header-combo.miss {
    background: #ffb4c4;
}

.header-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: grid;
    padding: 22px;
    place-content: center;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 37%, rgba(255,235,102,.26), transparent 28%),
        linear-gradient(145deg, rgba(62,78,173,.9), rgba(65,40,132,.94));
    text-align: center;
    backdrop-filter: blur(8px);
}

.header-overlay.hidden {
    display: none;
}

.header-overlay-ball {
    font-size: clamp(6rem, 15vw, 10rem);
    filter: drop-shadow(0 13px 3px rgba(34,29,80,.3));
    animation: header-ball-float .9s ease-in-out infinite alternate;
}

.header-overlay h1 {
    margin: 4px 0 0;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.4rem, 7vw, 5rem);
    font-weight: 800;
    line-height: .9;
    text-shadow: 0 5px 0 #392b8c;
}

.header-overlay p {
    max-width: 520px;
    margin: 14px 0 18px;
    color: #efedff;
    font-size: clamp(.95rem, 2.2vw, 1.18rem);
    font-weight: 800;
}

.header-start-button {
    padding: 12px 31px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #493c68;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8735;
    font-size: 1.15rem;
    font-weight: 900;
}

.header-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8735;
}

@keyframes header-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes header-combo-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
    18%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.12); }
}

@keyframes header-ball-float {
    to { transform: translateY(-12px) rotate(13deg); }
}

@media (max-width: 767.98px) {
    .header-hud {
        top: 7px;
        padding: 5px 7px;
        border-width: 2px;
        border-radius: 15px;
        gap: 4px;
    }

    .header-hud > div {
        min-width: 63px;
        padding: 3px 5px;
    }

    .header-hud span { font-size: .43rem; }
    .header-hud strong { font-size: 1rem; }
    #headerLives { font-size: .72rem; }

    .header-control {
        width: 58px;
        height: 58px;
        border-width: 3px;
        border-radius: 18px;
    }

    .header-combo {
        top: 20%;
        padding: 9px 13px;
        border-width: 3px;
    }

    .header-tip {
        bottom: 78px;
        padding: 6px 10px;
        border-width: 2px;
        font-size: .68rem;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .header-hud { top: 5px; }

    .header-control {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.25rem;
    }

    .header-tip { bottom: 55px; }
    .header-overlay-ball { font-size: 5rem; }
    .header-overlay h1 { font-size: 2.25rem; }
    .header-overlay p { margin: 7px 0 9px; font-size: .8rem; }
    .header-start-button { padding: 7px 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .header-tip,
    .header-combo.visible,
    .header-overlay-ball {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Show de Embaixadinhas */
.keepy-art {
    background:
        radial-gradient(circle at 50% 115%, rgba(255,255,255,.22) 0 36%, transparent 36.5%),
        linear-gradient(145deg, #7258dd, #c178e5 57%, #ffb4cc);
}

.preview-keepy-spotlight {
    position: absolute;
    top: -15%;
    width: 42%;
    height: 120%;
    opacity: .25;
    background: linear-gradient(to bottom, #fff, transparent 75%);
    clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
}

.preview-keepy-spotlight.light-a { left: 4%; transform: rotate(10deg); }
.preview-keepy-spotlight.light-b { right: 3%; transform: rotate(-10deg); }

.preview-keepy-ball {
    position: absolute;
    z-index: 5;
    top: 16%;
    left: 52%;
    font-size: clamp(3rem, 6vw, 4.7rem);
    filter: drop-shadow(0 8px 2px rgba(52,37,96,.3));
    transform: translateX(-50%) rotate(13deg);
}

.preview-keepy-player {
    position: absolute;
    z-index: 4;
    bottom: 6%;
    left: 46%;
    width: 112px;
    height: 154px;
    transform: translateX(-50%);
}

.preview-keepy-player i {
    position: absolute;
    display: block;
}

.preview-keepy-player .keepy-head {
    z-index: 3;
    top: 0;
    left: 36px;
    width: 42px;
    height: 44px;
    border: 5px solid #343455;
    border-radius: 50%;
    background: #f4b58e;
}

.preview-keepy-player .keepy-body {
    z-index: 2;
    top: 40px;
    left: 26px;
    width: 62px;
    height: 75px;
    border: 5px solid #343455;
    border-radius: 25px;
    background: #ffd052;
}

.preview-keepy-player .keepy-leg {
    bottom: 4px;
    left: 54px;
    width: 9px;
    height: 55px;
    border-radius: 8px;
    background: #343455;
    transform: rotate(-45deg);
    transform-origin: top;
}

.preview-keepy-player .keepy-shoe {
    right: 1px;
    bottom: 21px;
    width: 42px;
    height: 20px;
    border: 4px solid #343455;
    border-radius: 15px 20px 8px 8px;
    background: #fff;
    transform: rotate(-16deg);
}

.preview-keepy-spark {
    position: absolute;
    z-index: 6;
    top: 45%;
    right: 22%;
    color: #ffe64e;
    font-size: 2.7rem;
    text-shadow: 0 0 13px #fff;
}

.preview-keepy-perfect {
    position: absolute;
    z-index: 6;
    right: 6%;
    bottom: 10%;
    padding: 4px 8px;
    border: 3px solid #fff;
    border-radius: 12px;
    color: #584290;
    background: #ffe665;
    font-size: .7rem;
    font-weight: 900;
    transform: rotate(-7deg);
}

.keepy-page,
.keepy-play-section,
.keepy-stage {
    width: 100%;
    height: 100dvh;
}

.keepy-page {
    background: #7359dd;
}

.keepy-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background: #7359dd;
}

#keepyCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.keepy-hud {
    position: absolute;
    z-index: 25;
    top: 10px;
    left: 50%;
    display: flex;
    padding: 7px 11px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 20px;
    gap: 7px;
    color: #42385e;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 24px rgba(52,37,102,.22);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.keepy-hud > div {
    display: grid;
    min-width: 88px;
    padding: 3px 9px;
    border-radius: 12px;
    place-items: center;
    background: rgba(244,235,255,.82);
}

.keepy-hud span {
    color: #716484;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .7px;
}

.keepy-hud strong {
    color: #6747d4;
    font-family: "Baloo 2", cursive;
    font-size: 1.25rem;
    line-height: 1;
}

#keepyLives {
    color: #ff5f80;
    letter-spacing: 2px;
}

.keepy-controls {
    position: absolute;
    z-index: 35;
    right: max(13px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(13px, env(safe-area-inset-left));
    display: flex;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
}

.keepy-directions {
    display: flex;
    gap: 9px;
}

.keepy-control {
    padding: 0;
    border: 4px solid #fff;
    color: #fff;
    font-weight: 900;
    pointer-events: auto;
    touch-action: none;
}

.keepy-direction {
    display: grid;
    width: clamp(58px, 9vw, 76px);
    height: clamp(58px, 9vw, 76px);
    border-radius: 22px;
    place-items: center;
    background: linear-gradient(145deg, #5a4bd0, #8b61e4);
    box-shadow: 0 7px 0 #423493, 0 10px 24px rgba(53,42,119,.24);
    font-size: clamp(1.5rem, 4vw, 2.15rem);
}

.keepy-kick {
    display: grid;
    min-width: clamp(92px, 14vw, 128px);
    height: clamp(66px, 10vw, 88px);
    padding: 5px 12px;
    border-radius: 25px;
    place-items: center;
    color: #493b65;
    background: linear-gradient(145deg, #ffe860, #ffb24f);
    box-shadow: 0 8px 0 #c26849, 0 12px 27px rgba(87,49,92,.26);
}

.keepy-kick span {
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    line-height: .9;
}

.keepy-kick strong {
    font-size: clamp(.64rem, 1.5vw, .85rem);
    letter-spacing: .7px;
}

.keepy-control.pressed,
.keepy-control:active {
    transform: translateY(5px) scale(.97);
    box-shadow: 0 2px 0 rgba(63,47,115,.45);
}

.keepy-tip {
    position: absolute;
    z-index: 24;
    bottom: clamp(91px, 14vh, 137px);
    left: 50%;
    width: max-content;
    max-width: 72vw;
    padding: 8px 13px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 17px;
    color: #483e61;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 19px rgba(57,42,100,.2);
    font-size: .8rem;
    font-weight: 900;
    pointer-events: none;
    transform: translateX(-50%);
    animation: keepy-tip-bob 1.15s ease-in-out infinite alternate;
}

.keepy-tip.hidden {
    display: none;
}

.keepy-feedback {
    position: absolute;
    z-index: 30;
    top: 24%;
    left: 50%;
    display: flex;
    opacity: 0;
    padding: 12px 19px;
    border: 4px solid #fff;
    border-radius: 22px;
    align-items: center;
    gap: 8px;
    color: #4a3b64;
    background: #ffe36b;
    box-shadow: 0 14px 30px rgba(59,40,103,.23);
    font-size: clamp(1rem, 3vw, 1.55rem);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.3);
}

.keepy-feedback.visible {
    animation: keepy-feedback-pop .85s ease both;
}

.keepy-feedback.perfect {
    background: linear-gradient(135deg, #ffe75f, #ff9bd0, #83edff);
}

.keepy-feedback.miss {
    background: #ffb2c4;
}

.keepy-overlay {
    position: absolute;
    z-index: 60;
    inset: 0;
    display: grid;
    padding: 22px;
    place-content: center;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,231,91,.24), transparent 27%),
        linear-gradient(145deg, rgba(93,61,183,.93), rgba(74,36,123,.95));
    text-align: center;
    backdrop-filter: blur(8px);
}

.keepy-overlay.hidden {
    display: none;
}

.keepy-overlay-icon {
    position: relative;
    font-size: clamp(6rem, 15vw, 10rem);
    filter: drop-shadow(0 13px 3px rgba(39,23,79,.3));
    animation: keepy-ball-float .9s ease-in-out infinite alternate;
}

.keepy-overlay-icon span {
    position: absolute;
    right: -20%;
    bottom: -3%;
    font-size: .55em;
    transform: rotate(-25deg);
}

.keepy-overlay h1 {
    margin: 4px 0 0;
    font-family: "Baloo 2", cursive;
    font-size: clamp(2.35rem, 7vw, 5rem);
    font-weight: 800;
    line-height: .9;
    text-shadow: 0 5px 0 #42257f;
}

.keepy-overlay p {
    max-width: 540px;
    margin: 14px 0 18px;
    color: #f1edff;
    font-size: clamp(.95rem, 2.2vw, 1.18rem);
    font-weight: 800;
}

.keepy-start-button {
    padding: 12px 31px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #493c68;
    background: #ffe34e;
    box-shadow: 0 7px 0 #cf7843;
    font-size: 1.15rem;
    font-weight: 900;
}

.keepy-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #cf7843;
}

@keyframes keepy-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes keepy-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); }
    18%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.12); }
}

@keyframes keepy-ball-float {
    to { transform: translateY(-12px) rotate(11deg); }
}

@media (max-width: 767.98px) {
    .keepy-hud {
        top: 7px;
        padding: 5px 7px;
        border-width: 2px;
        border-radius: 15px;
        gap: 4px;
    }

    .keepy-hud > div {
        min-width: 66px;
        padding: 3px 5px;
    }

    .keepy-hud span { font-size: .42rem; }
    .keepy-hud strong { font-size: 1rem; }
    #keepyLives { font-size: .78rem; }

    .keepy-direction {
        width: 56px;
        height: 56px;
        border-width: 3px;
        border-radius: 18px;
    }

    .keepy-kick {
        min-width: 90px;
        height: 64px;
        border-width: 3px;
        border-radius: 20px;
    }

    .keepy-feedback {
        top: 20%;
        padding: 9px 13px;
        border-width: 3px;
    }

    .keepy-tip {
        bottom: 80px;
        padding: 6px 10px;
        border-width: 2px;
        font-size: .67rem;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .keepy-hud { top: 5px; }

    .keepy-direction {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.2rem;
    }

    .keepy-kick {
        min-width: 82px;
        height: 51px;
        border-radius: 16px;
    }

    .keepy-kick span { font-size: 1.45rem; }
    .keepy-tip { bottom: 57px; }
    .keepy-overlay-icon { font-size: 5rem; }
    .keepy-overlay h1 { font-size: 2.2rem; }
    .keepy-overlay p { margin: 7px 0 9px; font-size: .8rem; }
    .keepy-start-button { padding: 7px 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .keepy-tip,
    .keepy-feedback.visible,
    .keepy-overlay-icon {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Home grid for portrait tablets: five cards per row. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(4, minmax(0, 1fr));
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 9px !important;
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: span 1;
    }

    .home-page .game-grid > div:nth-child(16) {
        grid-column: 2 / span 1;
    }

    .home-page .game-card {
        border-radius: 19px;
    }

    .home-page .card-content {
        min-height: 43px;
        padding: 6px 9px;
    }

    .home-page .card-content h2 {
        font-size: clamp(.9rem, 2.2vw, 1.15rem);
    }
}

/* Stickman Molenga */
.floppy-art {
    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.75) 0 4%, transparent 4.5%),
        radial-gradient(circle at 82% 28%, rgba(255,255,255,.65) 0 3%, transparent 3.5%),
        linear-gradient(145deg, #7de8ff 0 53%, #9bea8d 54% 100%);
}

.preview-floppy-target {
    position: absolute;
    top: 29%;
    z-index: 1;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #ff657d;
    box-shadow: 0 5px 0 rgba(116,55,102,.24);
    font-size: 1.35rem;
}

.preview-floppy-target.target-left { left: 8%; transform: rotate(-12deg); }
.preview-floppy-target.target-right { right: 8%; background: #8b66ed; transform: rotate(12deg); }

.preview-floppy-stickman {
    position: absolute;
    top: 48%;
    left: 51%;
    z-index: 2;
    width: 58px;
    height: 72px;
    transform: translate(-50%, -50%) rotate(24deg);
}

.preview-floppy-stickman i {
    position: absolute;
    display: block;
    background: #35426d;
}

.preview-floppy-stickman .floppy-head {
    top: 0;
    left: 20px;
    width: 25px;
    height: 25px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #ffd166;
}

.preview-floppy-stickman .floppy-body {
    top: 23px;
    left: 29px;
    width: 8px;
    height: 30px;
    border-radius: 7px;
}

.preview-floppy-stickman .floppy-arm,
.preview-floppy-stickman .floppy-leg {
    width: 7px;
    border-radius: 7px;
    transform-origin: 50% 3px;
}

.preview-floppy-stickman .floppy-arm { top: 27px; left: 29px; height: 28px; }
.preview-floppy-stickman .arm-a { transform: rotate(72deg); }
.preview-floppy-stickman .arm-b { transform: rotate(-57deg); }
.preview-floppy-stickman .floppy-leg { top: 48px; left: 29px; height: 29px; }
.preview-floppy-stickman .leg-a { transform: rotate(42deg); }
.preview-floppy-stickman .leg-b { transform: rotate(-35deg); }

.preview-floppy-motion {
    position: absolute;
    top: 14%;
    left: 43%;
    color: #fff;
    text-shadow: 0 3px 0 rgba(66,66,124,.2);
    font-size: 2.2rem;
    font-weight: 900;
    transform: rotate(-15deg);
}

.preview-floppy-trampoline {
    position: absolute;
    bottom: 8%;
    left: 50%;
    width: 38%;
    height: 13px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #ff8b4d;
    box-shadow: -10px 9px 0 -7px #6557a7, 10px 9px 0 -7px #6557a7;
    transform: translateX(-50%);
}

.floppy-page,
.floppy-play-section,
.floppy-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.floppy-page {
    overflow: hidden;
    background: #72dbf2;
}

.floppy-play-section {
    position: relative;
    padding: 0;
}

.floppy-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 2.2%, transparent 2.4%),
        radial-gradient(circle at 88% 15%, rgba(255,255,255,.72) 0 2.8%, transparent 3%),
        linear-gradient(#66d6f2 0 68%, #8de37e 68% 100%);
}

#floppyCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#floppyCanvas:active { cursor: grabbing; }

.floppy-hud {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding: 7px;
    border: 3px solid rgba(255,255,255,.92);
    border-radius: 20px;
    background: rgba(69,58,120,.88);
    box-shadow: 0 6px 0 rgba(49,45,91,.24);
    transform: translateX(-50%);
    pointer-events: auto;
}

.floppy-hud > div {
    display: grid;
    min-width: 84px;
    place-items: center;
    padding: 3px 10px;
    border-radius: 13px;
    color: #fff;
    background: rgba(255,255,255,.13);
}

.floppy-hud span {
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.floppy-hud strong {
    color: #ffe65b;
    font-size: 1.35rem;
    line-height: 1;
}

.floppy-hud button {
    min-width: 47px;
    border: 0;
    border-radius: 13px;
    color: #564672;
    background: #fff;
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: inset 0 -3px 0 #d7d1e6;
}

.floppy-hud button:active { transform: translateY(2px); }

.floppy-tip {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 30px);
    padding: 9px 15px;
    border: 3px solid #fff;
    border-radius: 18px;
    color: #4f4370;
    background: rgba(255,239,124,.94);
    box-shadow: 0 5px 0 rgba(113,82,70,.2);
    font-size: clamp(.72rem, 2vw, .98rem);
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
    animation: floppy-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
}

.floppy-feedback {
    position: absolute;
    top: 26%;
    left: 50%;
    z-index: 4;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 10px 17px;
    border: 4px solid #fff;
    border-radius: 22px;
    color: #fff;
    background: #ff5e7b;
    box-shadow: 0 7px 0 rgba(116,52,87,.22);
    font-size: clamp(1rem, 3vw, 1.45rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.floppy-feedback.visible { animation: floppy-feedback-pop .85s ease both; }
.floppy-feedback span { font-size: 1.5em; }

.floppy-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(145deg, rgba(74,86,188,.96), rgba(151,75,185,.95));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.floppy-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.floppy-overlay-doll {
    position: relative;
    width: 110px;
    height: 145px;
    margin-bottom: 10px;
    animation: floppy-doll-wiggle 1.2s ease-in-out alternate infinite;
}

.floppy-overlay-doll span {
    position: absolute;
    display: block;
}

.overlay-floppy-head {
    top: 0;
    left: 35px;
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: #ffd45f;
    box-shadow: inset 0 -6px 0 rgba(222,147,54,.25);
}

.overlay-floppy-body {
    top: 45px;
    left: 52px;
    width: 14px;
    height: 52px;
    border-radius: 10px;
    background: #fff;
}

.overlay-floppy-arm,
.overlay-floppy-leg {
    left: 52px;
    width: 14px;
    border-radius: 10px;
    background: #fff;
    transform-origin: 7px 7px;
}

.overlay-floppy-arm { top: 53px; height: 48px; }
.overlay-floppy-arm.arm-a { transform: rotate(66deg); }
.overlay-floppy-arm.arm-b { transform: rotate(-62deg); }
.overlay-floppy-leg { top: 91px; height: 54px; }
.overlay-floppy-leg.leg-a { transform: rotate(34deg); }
.overlay-floppy-leg.leg-b { transform: rotate(-39deg); }

.floppy-overlay h1 {
    margin: 2px 0 0;
    font-size: clamp(2rem, 7vw, 4.1rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(67,44,110,.3);
}

.floppy-overlay p {
    max-width: 520px;
    margin: 9px 0 20px;
    font-size: clamp(.88rem, 2.5vw, 1.16rem);
    font-weight: 800;
}

.floppy-start-button {
    min-width: 150px;
    padding: 12px 28px;
    border: 4px solid #fff;
    border-radius: 19px;
    color: #504171;
    background: #ffe34f;
    box-shadow: 0 7px 0 #dc8448;
    font-size: 1.18rem;
    font-weight: 1000;
}

.floppy-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8448;
}

@keyframes floppy-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes floppy-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
    22%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.12); }
}

@keyframes floppy-doll-wiggle {
    to { transform: rotate(13deg) translateY(-7px); }
}

@media (max-width: 767.98px) {
    .floppy-hud {
        top: max(6px, env(safe-area-inset-top));
        gap: 4px;
        padding: 5px;
        border-width: 2px;
        border-radius: 15px;
    }

    .floppy-hud > div {
        min-width: 65px;
        padding: 3px 6px;
        border-radius: 10px;
    }

    .floppy-hud span { font-size: .43rem; }
    .floppy-hud strong { font-size: 1.05rem; }
    .floppy-hud button { min-width: 39px; font-size: 1rem; }

    .floppy-tip {
        bottom: max(9px, env(safe-area-inset-bottom));
        padding: 7px 11px;
        border-width: 2px;
    }

    .floppy-feedback {
        top: 22%;
        padding: 8px 12px;
        border-width: 3px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .floppy-tip { bottom: 7px; padding: 5px 10px; font-size: .65rem; }
    .floppy-feedback { top: 26%; }
    .floppy-overlay-doll { width: 80px; height: 104px; transform: scale(.72); margin: -15px 0 -7px; }
    .floppy-overlay h1 { font-size: 2rem; }
    .floppy-overlay p { margin: 4px 0 8px; font-size: .76rem; }
    .floppy-start-button { min-width: 120px; padding: 7px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .floppy-tip,
    .floppy-feedback.visible,
    .floppy-overlay-doll {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Avião Aventureiro */
.airplane-art {
    background: linear-gradient(#5ed5fb 0 67%, #83d878 68% 100%);
}

.preview-air-sun {
    position: absolute;
    top: 13%;
    right: 10%;
    width: 38px;
    height: 38px;
    border: 4px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: #ffe35b;
    box-shadow: 0 0 0 8px rgba(255,227,91,.22);
}

.preview-air-cloud {
    position: absolute;
    width: 56px;
    height: 17px;
    border-radius: 20px;
    background: rgba(255,255,255,.88);
}

.preview-air-cloud::before,
.preview-air-cloud::after {
    position: absolute;
    bottom: 3px;
    border-radius: 50%;
    background: inherit;
    content: "";
}

.preview-air-cloud::before { left: 8px; width: 24px; height: 24px; }
.preview-air-cloud::after { right: 7px; width: 29px; height: 29px; }
.preview-air-cloud.cloud-one { top: 20%; left: 7%; transform: scale(.75); }
.preview-air-cloud.cloud-two { right: 22%; bottom: 21%; transform: scale(.5); }

.preview-airplane {
    position: absolute;
    top: 42%;
    left: 43%;
    z-index: 2;
    color: #2875dc;
    text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff, 0 6px 0 rgba(53,75,127,.18);
    font-size: clamp(3.1rem, 5vw, 4.8rem);
    line-height: 1;
    transform: translate(-50%, -50%) rotate(-7deg);
}

.preview-air-fuel {
    position: absolute;
    right: 10%;
    bottom: 14%;
    z-index: 2;
    display: grid;
    width: 42px;
    height: 48px;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 10px;
    background: #ff615b;
    box-shadow: 0 5px 0 rgba(113,56,75,.22);
    font-size: 1.45rem;
}

.preview-air-lightning {
    position: absolute;
    top: 15%;
    right: 31%;
    color: #fff253;
    text-shadow: 0 3px 0 #725b86;
    font-size: 2.2rem;
    font-weight: 1000;
    transform: rotate(10deg);
}

.preview-air-trail {
    position: absolute;
    top: 48%;
    left: 7%;
    width: 25%;
    height: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.68);
    box-shadow: -13px 12px 0 -2px rgba(255,255,255,.42);
}

.airplane-page,
.airplane-play-section,
.airplane-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.airplane-page {
    overflow: hidden;
    background: #63d9ff;
}

.airplane-play-section {
    position: relative;
    padding: 0;
}

.airplane-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#airplaneCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#airplaneCanvas:active { cursor: grabbing; }

.airplane-hud {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: stretch;
    padding: 7px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 20px;
    color: #fff;
    background: rgba(47,56,111,.88);
    box-shadow: 0 6px 0 rgba(30,39,83,.22);
    transform: translateX(-50%);
}

.airplane-hud > div {
    display: grid;
    min-width: 98px;
    place-items: center;
    padding: 3px 11px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
}

.airplane-hud span:not(#airplaneWeatherIcon) {
    font-size: .54rem;
    font-weight: 1000;
    letter-spacing: .08em;
}

.airplane-hud strong {
    color: #ffe763;
    font-size: 1.05rem;
    line-height: 1.05;
}

.airplane-hud strong b { font-size: 1.35rem; }

.airplane-weather {
    grid-template-columns: auto 1fr !important;
    gap: 6px;
}

#airplaneWeatherIcon { font-size: 1.4rem; }

.airplane-hud button {
    min-width: 45px;
    border: 0;
    border-radius: 13px;
    color: #53476f;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d5d0e2;
    font-size: 1.35rem;
    font-weight: 1000;
}

.airplane-hud button:active { transform: translateY(2px); }

.airplane-fuel-panel {
    position: absolute;
    top: max(84px, calc(env(safe-area-inset-top) + 80px));
    left: 14px;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
    width: min(250px, 42vw);
    padding: 7px 10px;
    border: 3px solid #fff;
    border-radius: 17px;
    background: rgba(52,52,92,.76);
    box-shadow: 0 5px 0 rgba(40,42,73,.18);
}

.airplane-fuel-panel > span { font-size: 1.35rem; }

.airplane-fuel-track {
    flex: 1;
    height: 18px;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,.88);
    border-radius: 12px;
    background: rgba(37,37,63,.38);
}

.airplane-fuel-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #64e66f, #d9ed55);
    transition: width .16s linear, background .2s ease;
}

.airplane-fuel-track i.low {
    background: #ff5a65;
    animation: airplane-fuel-pulse .45s ease-in-out alternate infinite;
}

.airplane-tip {
    position: absolute;
    bottom: max(17px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 30px);
    padding: 9px 15px;
    border: 3px solid #fff;
    border-radius: 18px;
    color: #4e4270;
    background: rgba(255,237,106,.94);
    box-shadow: 0 5px 0 rgba(98,72,73,.19);
    font-size: clamp(.7rem, 2vw, .96rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: airplane-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .25s ease;
}

.airplane-tip.hidden { opacity: 0; }

.airplane-feedback {
    position: absolute;
    top: 29%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 11px 18px;
    border: 4px solid #fff;
    border-radius: 22px;
    color: #fff;
    background: #49bf70;
    box-shadow: 0 7px 0 rgba(57,77,78,.24);
    font-size: clamp(1rem, 3vw, 1.45rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.airplane-feedback.danger { background: #ff5d6d; }
.airplane-feedback.weather { background: #7161c7; }
.airplane-feedback.visible { animation: airplane-feedback-pop .9s ease both; }
.airplane-feedback span { font-size: 1.5em; }

.airplane-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.2), transparent 32%),
        linear-gradient(145deg, rgba(31,125,210,.97), rgba(101,71,184,.96));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.airplane-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.airplane-overlay-icon {
    font-size: clamp(5rem, 16vw, 9rem);
    line-height: 1;
    filter: drop-shadow(0 9px 0 rgba(42,49,105,.22));
    animation: airplane-overlay-fly 1.2s ease-in-out alternate infinite;
}

.airplane-overlay h1 {
    margin: 4px 0 0;
    font-size: clamp(2rem, 7vw, 4.1rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(42,44,99,.28);
}

.airplane-overlay p {
    max-width: 590px;
    margin: 9px 0 20px;
    font-size: clamp(.86rem, 2.5vw, 1.15rem);
    font-weight: 800;
}

.airplane-start-button {
    min-width: 160px;
    padding: 12px 29px;
    border: 4px solid #fff;
    border-radius: 19px;
    color: #504271;
    background: #ffe34f;
    box-shadow: 0 7px 0 #dc8448;
    font-size: 1.17rem;
    font-weight: 1000;
}

.airplane-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8448;
}

@keyframes airplane-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes airplane-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.12); }
}

@keyframes airplane-overlay-fly {
    to { transform: translate(15px, -9px) rotate(-7deg); }
}

@keyframes airplane-fuel-pulse {
    to { opacity: .52; }
}

@media (max-width: 767.98px) {
    .airplane-hud {
        top: max(6px, env(safe-area-inset-top));
        gap: 4px;
        padding: 5px;
        border-width: 2px;
        border-radius: 15px;
    }

    .airplane-hud > div {
        min-width: 72px;
        padding: 3px 6px;
        border-radius: 10px;
    }

    .airplane-hud span:not(#airplaneWeatherIcon) { font-size: .4rem; }
    .airplane-hud strong { font-size: .75rem; }
    .airplane-hud strong b { font-size: 1rem; }
    #airplaneWeatherIcon { font-size: 1rem; }
    .airplane-weather { gap: 3px; }
    .airplane-hud button { min-width: 36px; font-size: 1rem; }

    .airplane-fuel-panel {
        top: max(61px, calc(env(safe-area-inset-top) + 57px));
        left: 7px;
        width: min(190px, 49vw);
        padding: 5px 7px;
        border-width: 2px;
    }

    .airplane-fuel-panel > span { font-size: 1rem; }
    .airplane-fuel-track { height: 14px; border-width: 2px; }

    .airplane-tip {
        bottom: max(8px, env(safe-area-inset-bottom));
        padding: 6px 10px;
        border-width: 2px;
    }

    .airplane-feedback {
        top: 24%;
        padding: 8px 12px;
        border-width: 3px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .airplane-fuel-panel {
        top: 7px;
        left: 58px;
        width: 150px;
    }

    .airplane-tip { bottom: 6px; padding: 4px 9px; font-size: .64rem; }
    .airplane-feedback { top: 27%; }
    .airplane-overlay-icon { font-size: 4.4rem; }
    .airplane-overlay h1 { font-size: 2rem; }
    .airplane-overlay p { margin: 4px 0 8px; font-size: .74rem; }
    .airplane-start-button { min-width: 130px; padding: 7px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .airplane-tip,
    .airplane-feedback.visible,
    .airplane-overlay-icon,
    .airplane-fuel-track i.low {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Labirinto Encantado */
.maze-art {
    background: linear-gradient(145deg, #8b6ce5, #58ced7 62%, #79dd9b);
}

.preview-maze-lines {
    position: absolute;
    inset: 9% 7%;
    border: 5px solid #fff;
    border-radius: 14px;
    opacity: .94;
    background:
        linear-gradient(90deg, transparent 18%, #fff 18% 23%, transparent 23% 71%, #fff 71% 76%, transparent 76%),
        linear-gradient(0deg, transparent 20%, #fff 20% 26%, transparent 26% 47%, #fff 47% 53%, transparent 53% 76%, #fff 76% 82%, transparent 82%);
    box-shadow: 0 6px 0 rgba(67,50,112,.19);
}

.preview-maze-lines::before,
.preview-maze-lines::after {
    position: absolute;
    background: #fff;
    content: "";
}

.preview-maze-lines::before {
    top: 22%;
    left: 20%;
    width: 52%;
    height: 6%;
}

.preview-maze-lines::after {
    right: 20%;
    bottom: 20%;
    width: 6%;
    height: 30%;
}

.preview-maze-player,
.preview-maze-door,
.preview-maze-star {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 4px 0 rgba(57,48,98,.2));
}

.preview-maze-player { top: 15%; left: 12%; font-size: 2rem; }
.preview-maze-door { right: 10%; bottom: 10%; font-size: 2rem; }
.preview-maze-star { color: #ffe34e; text-shadow: 0 2px 0 #fff; font-size: 1.5rem; }
.preview-maze-star.star-a { top: 34%; right: 24%; }
.preview-maze-star.star-b { bottom: 17%; left: 31%; }

.maze-page,
.maze-play-section,
.maze-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.maze-page {
    overflow: hidden;
    background: #7566d5;
}

.maze-play-section {
    position: relative;
    padding: 0;
}

.maze-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#mazeCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.maze-hud {
    position: absolute;
    top: max(9px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: stretch;
    padding: 7px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 20px;
    color: #fff;
    background: rgba(57,43,111,.88);
    box-shadow: 0 6px 0 rgba(43,37,82,.22);
    transform: translateX(-50%);
}

.maze-hud > div {
    display: grid;
    min-width: 90px;
    place-items: center;
    padding: 3px 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
}

.maze-hud span {
    font-size: .53rem;
    font-weight: 1000;
    letter-spacing: .08em;
}

.maze-hud strong {
    color: #ffe34e;
    font-size: 1.1rem;
    line-height: 1;
}

.maze-hud strong b { font-size: 1.35rem; }
.maze-hud strong i { font-style: normal; }

.maze-hud button {
    min-width: 45px;
    border: 0;
    border-radius: 13px;
    color: #55466f;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d5d0e2;
    font-size: 1.35rem;
    font-weight: 1000;
}

.maze-hud button:active { transform: translateY(2px); }

.maze-tip {
    position: absolute;
    right: auto;
    bottom: max(9px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 13px;
    border: 3px solid #fff;
    border-radius: 18px;
    color: #4d416d;
    background: rgba(255,235,100,.95);
    box-shadow: 0 5px 0 rgba(73,61,91,.18);
    font-size: clamp(.68rem, 2vw, .92rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: maze-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .25s ease;
}

.maze-tip.hidden { opacity: 0; }

.maze-feedback {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 17px;
    border: 4px solid #fff;
    border-radius: 22px;
    color: #fff;
    background: #8264dc;
    box-shadow: 0 7px 0 rgba(64,49,100,.22);
    font-size: clamp(1rem, 3vw, 1.42rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.maze-feedback.success { background: #45bd70; }
.maze-feedback.visible { animation: maze-feedback-pop .9s ease both; }
.maze-feedback span { font-size: 1.5em; }

.maze-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 2px, transparent 2px) 0 0 / 52px 52px,
        linear-gradient(rgba(255,255,255,.08) 2px, transparent 2px) 0 0 / 52px 52px,
        linear-gradient(145deg, rgba(104,74,190,.98), rgba(52,178,183,.97));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.maze-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.maze-overlay-icon {
    font-size: clamp(5rem, 16vw, 8.5rem);
    line-height: 1;
    filter: drop-shadow(0 8px 0 rgba(51,45,103,.22));
    animation: maze-overlay-turn 1.25s ease-in-out alternate infinite;
}

.maze-overlay h1 {
    margin: 5px 0 0;
    font-size: clamp(2rem, 7vw, 4.1rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(47,42,91,.28);
}

.maze-overlay p {
    max-width: 560px;
    margin: 9px 0 20px;
    font-size: clamp(.86rem, 2.5vw, 1.15rem);
    font-weight: 800;
}

.maze-start-button {
    min-width: 155px;
    padding: 12px 28px;
    border: 4px solid #fff;
    border-radius: 19px;
    color: #504270;
    background: #ffe34e;
    box-shadow: 0 7px 0 #db8347;
    font-size: 1.17rem;
    font-weight: 1000;
}

.maze-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #db8347;
}

@keyframes maze-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes maze-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.12); }
}

@keyframes maze-overlay-turn {
    to { transform: rotate(8deg) translateY(-7px); }
}

@media (max-width: 767.98px) {
    .maze-hud {
        top: max(5px, env(safe-area-inset-top));
        gap: 4px;
        padding: 5px;
        border-width: 2px;
        border-radius: 15px;
    }

    .maze-hud > div {
        min-width: 65px;
        padding: 3px 5px;
        border-radius: 10px;
    }

    .maze-hud span { font-size: .4rem; }
    .maze-hud strong { font-size: .73rem; }
    .maze-hud strong b { font-size: 1rem; }
    .maze-hud button { min-width: 36px; font-size: 1rem; }

    .maze-tip { padding: 5px 9px; border-width: 2px; }
    .maze-feedback { top: 21%; padding: 8px 12px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .maze-tip { display: none; }
    .maze-feedback { top: 26%; }
    .maze-overlay-icon { font-size: 4.3rem; }
    .maze-overlay h1 { font-size: 2rem; }
    .maze-overlay p { margin: 4px 0 8px; font-size: .74rem; }
    .maze-start-button { min-width: 125px; padding: 7px 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .maze-tip,
    .maze-feedback.visible,
    .maze-overlay-icon {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Travessia Divertida */
.crossing-art {
    background: #51586b;
}

.preview-crossing-grass {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    height: 22%;
    background: #7ed879;
}

.preview-crossing-grass.grass-top { top: 0; border-bottom: 4px solid #fff; }
.preview-crossing-grass.grass-bottom { bottom: 0; border-top: 4px solid #fff; }

.preview-crossing-line {
    position: absolute;
    right: 0;
    left: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, #ffe66b 0 24px, transparent 24px 42px);
}

.preview-crossing-line.line-a { top: 42%; }
.preview-crossing-line.line-b { top: 62%; }

.preview-crossing-car,
.preview-crossing-child,
.preview-crossing-goal {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 4px 0 rgba(39,39,66,.2));
}

.preview-crossing-car { font-size: 2.35rem; }
.preview-crossing-car.car-a { top: 23%; left: 14%; }
.preview-crossing-car.car-b { right: 13%; bottom: 23%; transform: scaleX(-1); }
.preview-crossing-child { bottom: 4%; left: 47%; font-size: 2.1rem; }
.preview-crossing-goal { top: 1%; right: 12%; font-size: 2rem; }

.crossing-page,
.crossing-play-section,
.crossing-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.crossing-page {
    overflow: hidden;
    background: #7ed879;
}

.crossing-play-section {
    position: relative;
    padding: 0;
}

.crossing-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#crossingCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.crossing-hud {
    position: absolute;
    top: max(9px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 6px;
    align-items: stretch;
    padding: 7px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 20px;
    color: #fff;
    background: rgba(55,47,93,.9);
    box-shadow: 0 6px 0 rgba(38,37,70,.22);
    transform: translateX(-50%);
}

.crossing-hud > div {
    display: grid;
    min-width: 78px;
    place-items: center;
    padding: 3px 9px;
    border-radius: 13px;
    background: rgba(255,255,255,.13);
}

.crossing-hud span {
    font-size: .5rem;
    font-weight: 1000;
    letter-spacing: .07em;
}

.crossing-hud strong {
    color: #ffe45b;
    font-size: 1.25rem;
    line-height: 1;
}

#crossingLives {
    min-width: 70px;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .05em;
}

.crossing-hud button {
    min-width: 44px;
    border: 0;
    border-radius: 13px;
    color: #55476e;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d5d0e2;
    font-size: 1.3rem;
    font-weight: 1000;
}

.crossing-hud button:active { transform: translateY(2px); }

.crossing-tip {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 13px;
    border: 3px solid #fff;
    border-radius: 18px;
    color: #4d416c;
    background: rgba(255,235,96,.95);
    box-shadow: 0 5px 0 rgba(72,62,85,.18);
    font-size: clamp(.68rem, 2vw, .92rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: crossing-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .25s ease;
}

.crossing-tip.hidden { opacity: 0; }

.crossing-feedback {
    position: absolute;
    top: 27%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 17px;
    border: 4px solid #fff;
    border-radius: 22px;
    color: #fff;
    background: #7564d1;
    box-shadow: 0 7px 0 rgba(59,49,91,.22);
    font-size: clamp(.92rem, 3vw, 1.4rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.crossing-feedback.success { background: #43bb6c; }
.crossing-feedback.danger { background: #f05b65; }
.crossing-feedback.visible { animation: crossing-feedback-pop .9s ease both; }
.crossing-feedback span { font-size: 1.5em; }

.crossing-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        linear-gradient(90deg, transparent 47%, rgba(255,238,103,.18) 47% 53%, transparent 53%) 0 0 / 90px 100%,
        linear-gradient(145deg, rgba(64,74,111,.98), rgba(71,171,127,.97));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.crossing-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.crossing-overlay-icon {
    font-size: clamp(5rem, 16vw, 8.5rem);
    line-height: 1;
    filter: drop-shadow(0 8px 0 rgba(37,42,69,.22));
    animation: crossing-overlay-step 1s ease-in-out alternate infinite;
}

.crossing-overlay h1 {
    margin: 5px 0 0;
    font-size: clamp(2rem, 7vw, 4.1rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(43,42,72,.28);
}

.crossing-overlay p {
    max-width: 570px;
    margin: 9px 0 20px;
    font-size: clamp(.86rem, 2.5vw, 1.15rem);
    font-weight: 800;
}

.crossing-start-button {
    min-width: 160px;
    padding: 12px 28px;
    border: 4px solid #fff;
    border-radius: 19px;
    color: #504270;
    background: #ffe34e;
    box-shadow: 0 7px 0 #db8347;
    font-size: 1.17rem;
    font-weight: 1000;
}

.crossing-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #db8347;
}

@keyframes crossing-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes crossing-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.12); }
}

@keyframes crossing-overlay-step {
    to { transform: translateY(-8px) rotate(4deg); }
}

@media (max-width: 767.98px) {
    .crossing-hud {
        top: max(5px, env(safe-area-inset-top));
        gap: 3px;
        padding: 4px;
        border-width: 2px;
        border-radius: 14px;
    }

    .crossing-hud > div {
        min-width: 52px;
        padding: 3px 4px;
        border-radius: 9px;
    }

    .crossing-hud span { font-size: .35rem; }
    .crossing-hud strong { font-size: .9rem; }
    #crossingLives { min-width: 55px; font-size: .73rem; }
    .crossing-hud button { min-width: 33px; font-size: .95rem; }
    .crossing-tip { padding: 5px 9px; border-width: 2px; }
    .crossing-feedback { top: 22%; padding: 8px 11px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .crossing-tip { display: none; }
    .crossing-feedback { top: 27%; }
    .crossing-overlay-icon { font-size: 4.3rem; }
    .crossing-overlay h1 { font-size: 2rem; }
    .crossing-overlay p { margin: 4px 0 8px; font-size: .74rem; }
    .crossing-start-button { min-width: 130px; padding: 7px 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .crossing-tip,
    .crossing-feedback.visible,
    .crossing-overlay-icon {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Refined game chooser */
.home-page {
    background: #f8f3ff;
}

.home-page .navbar {
    height: 66px;
    border-bottom: 2px solid rgba(102,72,232,.09);
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 24px rgba(67,45,116,.06);
}

.home-page .navbar .container {
    width: 100%;
    max-width: 1520px;
    padding-right: 18px;
    padding-left: 18px;
}

.home-page .game-logo {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
}

.home-page main {
    height: calc(100dvh - 66px);
}

.home-page .hero-section {
    padding: 10px 16px 16px;
    background:
        radial-gradient(circle at 3% 8%, rgba(255,211,86,.3) 0 70px, transparent 72px),
        radial-gradient(circle at 96% 5%, rgba(255,91,146,.16) 0 95px, transparent 97px),
        radial-gradient(circle at 82% 96%, rgba(56,212,160,.17) 0 120px, transparent 122px),
        linear-gradient(145deg, #fffaf0, #f7f2ff 54%, #eefcff);
}

.home-page .hero-section::before,
.home-page .hero-section::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.home-page .hero-section::before {
    top: 20%;
    left: 1.2%;
    width: 13px;
    height: 13px;
    background: #ff6f9d;
    box-shadow: 25px 28px 0 #ffd95d, 8px 62px 0 #65d8ba;
}

.home-page .hero-section::after {
    right: 1.4%;
    bottom: 20%;
    width: 11px;
    height: 11px;
    background: #8065e8;
    box-shadow: -22px 26px 0 #ff9d56, 3px 57px 0 #5ed4ec;
}

.home-page .hero-section > .container {
    z-index: 1;
    max-width: 1520px;
}

.home-page .hero-copy {
    display: grid;
    margin: 0 auto 9px;
    place-items: center;
}

.home-kicker {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 1px;
    padding: 3px 11px;
    border: 2px solid rgba(102,72,232,.12);
    border-radius: 999px;
    color: #6557a0;
    background: rgba(255,255,255,.8);
    font-size: clamp(.68rem, 1vw, .82rem);
    font-weight: 900;
    line-height: 1.15;
    box-shadow: 0 4px 12px rgba(80,56,135,.06);
}

.home-page .hero-copy h1 {
    margin: 1px 0 0;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    line-height: .95;
    letter-spacing: -1.5px;
}

.home-page .hero-copy p {
    margin-top: 2px;
    color: #766d8d;
    font-size: clamp(.72rem, 1.1vw, .88rem);
}

.home-page .game-grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 11px !important;
}

.home-page .game-grid > div:nth-child(n) {
    grid-column: auto;
}

.home-page .game-card {
    position: relative;
    isolation: isolate;
    border: 3px solid rgba(255,255,255,.96);
    border-radius: 23px;
    background: #fff;
    box-shadow:
        0 5px 0 rgba(92,68,142,.09),
        0 11px 24px rgba(71,50,116,.11);
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-page .game-card:hover {
    z-index: 3;
    transform: translateY(-4px) scale(1.018);
    box-shadow:
        0 7px 0 rgba(92,68,142,.1),
        0 17px 30px rgba(71,50,116,.17);
}

.home-page .game-card:active {
    transform: translateY(2px) scale(.985);
    box-shadow: 0 3px 0 rgba(92,68,142,.1), 0 7px 14px rgba(71,50,116,.1);
}

.home-page .game-card:focus-visible {
    outline: 5px solid #ffd84f;
    outline-offset: -1px;
}

.home-page .card-art {
    border-radius: 19px 19px 8px 8px;
    transition: filter .18s ease;
}

.home-page .game-card:hover .card-art {
    filter: saturate(1.08) brightness(1.02);
}

.home-page .card-content {
    gap: 7px;
    min-height: 47px;
    padding: 6px 9px 7px 12px;
    justify-content: space-between;
    background: linear-gradient(180deg, #fff, #fffaf5);
}

.home-page .card-content h2 {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    font-size: clamp(.83rem, 1.3vw, 1.14rem);
    line-height: .92;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-page .card-content::after {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #7558e8, #a45ce4);
    box-shadow: 0 3px 0 #5036b2;
    content: "▶";
    font-size: .62rem;
    line-height: 1;
    text-indent: 1px;
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px !important;
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(17) {
        grid-column: 2;
    }

    .home-page .game-card { border-radius: 19px; }
    .home-page .card-art { border-radius: 15px 15px 7px 7px; }
    .home-page .card-content { min-height: 42px; padding: 5px 7px 6px 9px; }
    .home-page .card-content h2 { font-size: clamp(.76rem, 2vw, .98rem); }
    .home-page .card-content::after { width: 23px; height: 23px; flex-basis: 23px; }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .navbar {
        height: 52px;
    }

    .home-page main {
        height: calc(100dvh - 52px);
    }

    .home-page .navbar .container {
        padding-right: 7px;
        padding-left: 7px;
    }

    .home-page .hero-section {
        padding: 5px 6px 7px;
    }

    .home-page .hero-copy {
        margin-bottom: 5px;
    }

    .home-kicker {
        margin: 0;
        padding: 2px 8px;
        border-width: 1px;
        font-size: .57rem;
    }

    .home-page .hero-copy h1 {
        margin-top: 1px;
        font-size: clamp(1.25rem, 5.8vw, 1.7rem);
        letter-spacing: -.7px;
    }

    .home-page .hero-copy p {
        display: none;
    }

    .home-page .game-grid {
        grid-template-rows: repeat(6, minmax(0, 1fr));
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-card {
        border-width: 2px;
        border-radius: 15px;
        box-shadow: 0 3px 0 rgba(92,68,142,.08), 0 7px 13px rgba(71,50,116,.09);
    }

    .home-page .card-art {
        border-radius: 12px 12px 5px 5px;
    }

    .home-page .card-content {
        gap: 4px;
        min-height: 32px;
        padding: 3px 4px 4px 6px;
    }

    .home-page .card-content h2 {
        font-size: clamp(.61rem, 2.75vw, .82rem);
        line-height: .9;
    }

    .home-page .card-content::after {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        box-shadow: 0 2px 0 #5036b2;
        font-size: .43rem;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .home-page .navbar {
        height: 46px;
    }

    .home-page main {
        height: calc(100dvh - 46px);
    }

    .home-page .hero-section {
        padding: 5px 7px 7px;
    }

    .home-page .hero-copy {
        display: none;
    }

    .home-page .game-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 6px !important;
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-card {
        border-width: 2px;
        border-radius: 15px;
    }

    .home-page .card-art {
        border-radius: 12px 12px 5px 5px;
    }

    .home-page .card-content {
        gap: 3px;
        min-height: 30px;
        padding: 3px 4px 4px 6px;
    }

    .home-page .card-content h2 {
        font-size: clamp(.58rem, 1.2vw, .75rem);
        line-height: .88;
    }

    .home-page .card-content::after {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
        box-shadow: 0 2px 0 #5036b2;
        font-size: .4rem;
    }
}

@media (max-width: 360px) and (orientation: portrait) {
    .home-page .game-grid { gap: 4px !important; }
    .home-page .game-card { border-radius: 12px; }
    .home-page .card-content { min-height: 29px; padding-left: 4px; }
    .home-page .card-content h2 { font-size: .57rem; }
    .home-page .card-content::after { width: 16px; height: 16px; flex-basis: 16px; }
}

/* Home grid with 19 games. */
.home-page .game-grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.home-page .game-grid > div:nth-child(n) {
    grid-column: auto;
}

.home-page .game-grid > div:nth-child(15) {
    grid-column: 2;
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(7, minmax(0, 1fr));
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(19) {
        grid-column: 2;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .home-page .game-grid {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(15) {
        grid-column: 2;
    }
}

/* Come-Come Colorido */
.munch-art {
    background:
        radial-gradient(circle at 50% 50%, rgba(93,100,241,.28), transparent 55%),
        #15163e;
}

.preview-munch-maze {
    position: absolute;
    inset: 8%;
    border: 4px solid #6276f4;
    border-radius: 14px;
    background:
        linear-gradient(90deg, transparent 18%, #6276f4 18% 22%, transparent 22% 67%, #6276f4 67% 71%, transparent 71%),
        linear-gradient(0deg, transparent 24%, #6276f4 24% 29%, transparent 29% 66%, #6276f4 66% 71%, transparent 71%);
    box-shadow: inset 0 0 18px rgba(94,116,244,.2);
}

.preview-munch-dots {
    position: absolute;
    top: 44%;
    left: 13%;
    z-index: 2;
    color: #ffe9a5;
    font-size: 1.25rem;
    font-weight: 1000;
    letter-spacing: .34em;
    white-space: nowrap;
}

.preview-munch-hero,
.overlay-munch-hero {
    position: absolute;
    z-index: 3;
    width: 43px;
    height: 43px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #ffe047;
    box-shadow: 0 5px 0 rgba(33,30,72,.28);
}

.preview-munch-hero {
    top: 37%;
    left: 31%;
}

.preview-munch-hero::after,
.overlay-munch-hero::after {
    position: absolute;
    top: 8px;
    right: -3px;
    width: 22px;
    height: 25px;
    background: #15163e;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    content: "";
}

.preview-munch-monster,
.overlay-munch-monster {
    position: absolute;
    z-index: 3;
    width: 35px;
    height: 38px;
    border: 3px solid #fff;
    border-radius: 50% 50% 30% 30%;
    background: #ff6380;
    box-shadow: 0 5px 0 rgba(33,30,72,.28);
}

.preview-munch-monster::before,
.overlay-munch-monster::before {
    position: absolute;
    top: 10px;
    left: 7px;
    width: 7px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 12px 0 0 #fff;
    content: "";
}

.preview-munch-monster.monster-a { top: 19%; right: 17%; }
.preview-munch-monster.monster-b { right: 27%; bottom: 14%; background: #55d8e8; transform: scale(.82); }

.preview-munch-fruit {
    position: absolute;
    bottom: 12%;
    left: 15%;
    z-index: 3;
    font-size: 1.8rem;
    filter: drop-shadow(0 3px 0 rgba(34,31,76,.25));
}

.munch-page,
.munch-play-section,
.munch-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.munch-page {
    overflow: hidden;
    background: #15163e;
}

.munch-play-section {
    position: relative;
    padding: 0;
}

.munch-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#munchCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#munchCanvas:active { cursor: grabbing; }

.munch-hud {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 5px;
    align-items: stretch;
    padding: 6px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 18px;
    color: #fff;
    background: rgba(42,31,92,.9);
    box-shadow: 0 5px 0 rgba(14,13,44,.32);
    transform: translateX(-50%);
}

.munch-hud > div {
    display: grid;
    min-width: 76px;
    place-items: center;
    padding: 3px 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.11);
}

.munch-hud span {
    font-size: .46rem;
    font-weight: 1000;
    letter-spacing: .08em;
}

.munch-hud strong {
    color: #ffe34e;
    font-size: 1.12rem;
    line-height: 1;
}

#munchLives {
    min-width: 70px;
    color: #fff;
    font-size: .9rem;
}

.munch-hud button {
    min-width: 41px;
    border: 0;
    border-radius: 11px;
    color: #514574;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d5d0e2;
    font-size: 1.2rem;
    font-weight: 1000;
}

.munch-power {
    position: absolute;
    top: max(72px, calc(env(safe-area-inset-top) + 68px));
    left: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
    align-items: center;
    width: min(190px, 38vw);
    padding: 5px 7px;
    border: 2px solid #fff;
    border-radius: 14px;
    background: rgba(39,32,87,.78);
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .2s ease, transform .2s ease;
}

.munch-power.active {
    opacity: 1;
    transform: none;
}

.munch-power span { font-size: 1.05rem; }

.munch-power i {
    display: block;
    width: 100%;
    height: 11px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ffe34e, #ff75af);
}

.munch-tip {
    position: absolute;
    bottom: max(9px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 12px;
    border: 3px solid #fff;
    border-radius: 17px;
    color: #493e6d;
    background: rgba(255,232,91,.96);
    box-shadow: 0 5px 0 rgba(17,16,48,.25);
    font-size: clamp(.66rem, 2vw, .9rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: munch-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .2s ease;
}

.munch-tip.hidden { opacity: 0; }

.munch-feedback {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 15px;
    border: 4px solid #fff;
    border-radius: 21px;
    color: #fff;
    background: #ff6681;
    box-shadow: 0 7px 0 rgba(14,13,44,.3);
    font-size: clamp(.9rem, 3vw, 1.35rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.munch-feedback.power { background: #695fd4; }
.munch-feedback.success { background: #42bc74; }
.munch-feedback.danger { background: #ed5868; }
.munch-feedback.visible { animation: munch-feedback-pop .9s ease both; }
.munch-feedback span { font-size: 1.5em; }

.munch-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 36%, rgba(91,111,241,.28), transparent 33%),
        linear-gradient(145deg, rgba(18,21,61,.98), rgba(59,29,100,.98));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.munch-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.munch-overlay-scene {
    position: relative;
    width: 260px;
    height: 92px;
    animation: munch-overlay-run 1.2s ease-in-out alternate infinite;
}

.overlay-munch-hero {
    top: 22px;
    left: 18px;
    width: 55px;
    height: 55px;
}

.overlay-munch-hero::after {
    top: 10px;
    width: 28px;
    height: 32px;
    background: #17163e;
}

.overlay-munch-dots {
    position: absolute;
    top: 29px;
    left: 88px;
    color: #ffe8a3;
    font-size: 2rem;
    letter-spacing: .28em;
}

.overlay-munch-monster {
    top: 21px;
    right: 12px;
    width: 50px;
    height: 55px;
}

.overlay-munch-monster::before {
    top: 14px;
    left: 11px;
    width: 9px;
    height: 13px;
    box-shadow: 17px 0 0 #fff;
}

.munch-overlay h1 {
    margin: 5px 0 0;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(15,13,49,.35);
}

.munch-overlay p {
    max-width: 570px;
    margin: 8px 0 19px;
    font-size: clamp(.84rem, 2.5vw, 1.12rem);
    font-weight: 800;
}

.munch-start-button {
    min-width: 150px;
    padding: 11px 27px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #4e426e;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8347;
    font-size: 1.14rem;
    font-weight: 1000;
}

.munch-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8347;
}

@keyframes munch-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes munch-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1); }
}

@keyframes munch-overlay-run {
    to { transform: translateX(10px); }
}

@media (max-width: 767.98px) {
    .munch-hud {
        top: max(4px, env(safe-area-inset-top));
        gap: 3px;
        padding: 4px;
        border-width: 2px;
        border-radius: 14px;
    }

    .munch-hud > div {
        min-width: 49px;
        padding: 3px 4px;
        border-radius: 8px;
    }

    .munch-hud span { font-size: .33rem; }
    .munch-hud strong { font-size: .84rem; }
    #munchLives { min-width: 51px; font-size: .68rem; }
    .munch-hud button { min-width: 31px; font-size: .9rem; }

    .munch-power {
        top: max(53px, calc(env(safe-area-inset-top) + 49px));
        left: 6px;
        width: min(140px, 42vw);
        padding: 3px 5px;
    }

    .munch-tip { padding: 5px 9px; border-width: 2px; }
    .munch-feedback { top: 21%; padding: 7px 10px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .munch-power { top: 5px; left: 54px; width: 125px; }
    .munch-tip { display: none; }
    .munch-feedback { top: 27%; }
    .munch-overlay-scene { transform: scale(.72); margin: -13px 0; }
    .munch-overlay h1 { font-size: 2rem; }
    .munch-overlay p { margin: 4px 0 8px; font-size: .73rem; }
    .munch-start-button { min-width: 125px; padding: 7px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .munch-tip,
    .munch-feedback.visible,
    .munch-overlay-scene {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Home grid with 20 games. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(7, minmax(0, 1fr));
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: span 2;
    }

    .home-page .game-grid > div:nth-child(19) {
        grid-column: 2 / span 2;
    }

    .home-page .game-grid > div:nth-child(20) {
        grid-column: 4 / span 2;
    }
}

/* Resgate Submarino */
.submarine-art {
    background: linear-gradient(#86e8f8 0 18%, #42cae4 19%, #136ba9 100%);
}

.preview-submarine-surface {
    position: absolute;
    top: 17%;
    right: 0;
    left: 0;
    height: 7px;
    background: repeating-radial-gradient(ellipse at center, #fff 0 7px, transparent 8px 17px);
    opacity: .9;
}

.preview-submarine {
    position: absolute;
    top: 43%;
    left: 39%;
    z-index: 3;
    font-size: clamp(3rem, 5vw, 4.5rem);
    filter: drop-shadow(0 5px 0 rgba(22,63,111,.24));
    transform: translate(-50%, -50%) rotate(-5deg);
}

.preview-submarine-diver {
    position: absolute;
    right: 15%;
    bottom: 18%;
    z-index: 3;
    font-size: 2.15rem;
    filter: drop-shadow(0 4px 0 rgba(22,63,111,.24));
}

.preview-submarine-fish {
    position: absolute;
    z-index: 2;
    font-size: 1.7rem;
}

.preview-submarine-fish.fish-a { top: 25%; right: 12%; }
.preview-submarine-fish.fish-b { bottom: 10%; left: 11%; transform: scaleX(-1); }

.preview-submarine-bubble {
    position: absolute;
    z-index: 2;
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 50%;
}

.preview-submarine-bubble.bubble-a { top: 31%; left: 14%; }
.preview-submarine-bubble.bubble-b { top: 24%; left: 21%; width: 8px; height: 8px; }

.preview-submarine-coral {
    position: absolute;
    right: 7%;
    bottom: -4px;
    color: #ff7c7e;
    text-shadow: 0 3px 0 #fff;
    font-size: 2.7rem;
    font-weight: 1000;
}

.submarine-page,
.submarine-play-section,
.submarine-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.submarine-page {
    overflow: hidden;
    background: #1474ae;
}

.submarine-play-section {
    position: relative;
    padding: 0;
}

.submarine-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#submarineCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#submarineCanvas:active { cursor: grabbing; }

.submarine-hud {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 5px;
    align-items: stretch;
    padding: 6px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 18px;
    color: #fff;
    background: rgba(32,55,105,.88);
    box-shadow: 0 5px 0 rgba(19,43,83,.25);
    transform: translateX(-50%);
}

.submarine-hud > div {
    display: grid;
    min-width: 82px;
    place-items: center;
    padding: 3px 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.13);
}

.submarine-hud span {
    font-size: .46rem;
    font-weight: 1000;
    letter-spacing: .07em;
}

.submarine-hud strong {
    color: #ffe34e;
    font-size: 1.12rem;
    line-height: 1;
}

.submarine-hud strong b { font-size: 1.25rem; }
.submarine-hud strong i { font-style: normal; }

#submarineLives {
    min-width: 72px;
    color: #fff;
    font-size: .9rem;
}

.submarine-hud button {
    min-width: 41px;
    border: 0;
    border-radius: 11px;
    color: #4f5274;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d0d9e4;
    font-size: 1.2rem;
    font-weight: 1000;
}

.submarine-oxygen {
    position: absolute;
    top: max(72px, calc(env(safe-area-inset-top) + 68px));
    left: 12px;
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: center;
    width: min(235px, 42vw);
    padding: 6px 8px;
    border: 3px solid #fff;
    border-radius: 15px;
    background: rgba(26,57,103,.76);
    box-shadow: 0 5px 0 rgba(19,43,83,.2);
}

.submarine-oxygen > span { font-size: 1.1rem; }

.submarine-oxygen > div {
    flex: 1;
    height: 15px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 10px;
    background: rgba(17,45,82,.5);
}

.submarine-oxygen i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #62e7f5, #a8f7ff);
    transition: width .15s linear;
}

.submarine-oxygen i.low {
    background: #ff6475;
    animation: submarine-oxygen-pulse .45s ease-in-out alternate infinite;
}

.submarine-tip {
    position: absolute;
    bottom: max(9px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 28px);
    padding: 7px 12px;
    border: 3px solid #fff;
    border-radius: 17px;
    color: #405174;
    background: rgba(255,235,99,.96);
    box-shadow: 0 5px 0 rgba(22,56,94,.22);
    font-size: clamp(.66rem, 2vw, .9rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: submarine-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .2s ease;
}

.submarine-tip.hidden { opacity: 0; }

.submarine-feedback {
    position: absolute;
    top: 27%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 15px;
    border: 4px solid #fff;
    border-radius: 21px;
    color: #fff;
    background: #5b78dc;
    box-shadow: 0 7px 0 rgba(17,49,89,.26);
    font-size: clamp(.9rem, 3vw, 1.35rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.submarine-feedback.success { background: #42bc78; }
.submarine-feedback.oxygen { background: #43bddd; }
.submarine-feedback.danger { background: #ed5f6c; }
.submarine-feedback.visible { animation: submarine-feedback-pop .9s ease both; }
.submarine-feedback span { font-size: 1.5em; }

.submarine-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 40%, rgba(151,242,255,.22), transparent 34%),
        linear-gradient(145deg, rgba(19,112,168,.98), rgba(38,71,145,.98));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.submarine-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.submarine-overlay-scene {
    position: relative;
    width: 250px;
    height: 100px;
    animation: submarine-overlay-float 1.2s ease-in-out alternate infinite;
}

.overlay-submarine {
    position: absolute;
    top: 15px;
    left: 12px;
    font-size: 5.2rem;
    filter: drop-shadow(0 7px 0 rgba(19,54,101,.25));
}

.overlay-diver {
    position: absolute;
    right: 15px;
    bottom: 5px;
    font-size: 3.4rem;
    filter: drop-shadow(0 6px 0 rgba(19,54,101,.25));
}

.overlay-bubbles {
    position: absolute;
    top: 1px;
    right: 24px;
    color: #fff;
    font-size: 1.45rem;
    letter-spacing: .15em;
}

.submarine-overlay h1 {
    margin: 5px 0 0;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(15,52,97,.3);
}

.submarine-overlay p {
    max-width: 590px;
    margin: 8px 0 19px;
    font-size: clamp(.84rem, 2.5vw, 1.12rem);
    font-weight: 800;
}

.submarine-start-button {
    min-width: 155px;
    padding: 11px 27px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #46516c;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8347;
    font-size: 1.14rem;
    font-weight: 1000;
}

.submarine-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8347;
}

@keyframes submarine-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes submarine-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1); }
}

@keyframes submarine-overlay-float {
    to { transform: translateY(-9px) rotate(-2deg); }
}

@keyframes submarine-oxygen-pulse {
    to { opacity: .45; }
}

@media (max-width: 767.98px) {
    .submarine-hud {
        top: max(4px, env(safe-area-inset-top));
        gap: 3px;
        padding: 4px;
        border-width: 2px;
        border-radius: 14px;
    }

    .submarine-hud > div {
        min-width: 48px;
        padding: 3px 4px;
        border-radius: 8px;
    }

    .submarine-hud span { font-size: .32rem; }
    .submarine-hud strong { font-size: .8rem; }
    #submarineLives { min-width: 50px; font-size: .65rem; }
    .submarine-hud button { min-width: 30px; font-size: .88rem; }

    .submarine-oxygen {
        top: max(52px, calc(env(safe-area-inset-top) + 48px));
        left: 6px;
        width: min(160px, 45vw);
        padding: 4px 6px;
        border-width: 2px;
    }

    .submarine-oxygen > div { height: 12px; }
    .submarine-tip { padding: 5px 9px; border-width: 2px; }
    .submarine-feedback { top: 22%; padding: 7px 10px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .submarine-oxygen { top: 5px; left: 54px; width: 135px; }
    .submarine-tip { display: none; }
    .submarine-feedback { top: 28%; }
    .submarine-overlay-scene { transform: scale(.72); margin: -12px 0; }
    .submarine-overlay h1 { font-size: 2rem; }
    .submarine-overlay p { margin: 4px 0 8px; font-size: .72rem; }
    .submarine-start-button { min-width: 125px; padding: 7px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .submarine-tip,
    .submarine-feedback.visible,
    .submarine-overlay-scene,
    .submarine-oxygen i.low {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Home grid with 21 games. */
.home-page .game-grid > div:nth-child(15) {
    grid-column: auto;
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(21) {
        grid-column: 3;
    }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid > div:nth-child(n) {
        grid-column: span 2;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .home-page .game-grid > div:nth-child(15) {
        grid-column: auto;
    }
}

/* Patrulha Espacial */
.space-art {
    background:
        radial-gradient(circle at 76% 24%, rgba(117,104,230,.6) 0 13%, transparent 14%),
        linear-gradient(145deg, #201d64, #0d123a);
}

.preview-space-star {
    position: absolute;
    color: #fff;
    text-shadow: 0 0 9px #8deaff;
}

.preview-space-star.star-a { top: 12%; left: 13%; font-size: 1.2rem; }
.preview-space-star.star-b { right: 17%; bottom: 13%; font-size: .8rem; }

.preview-space-planet {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 47px;
    height: 47px;
    border: 3px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: linear-gradient(145deg, #a98af1, #6558cd);
    box-shadow: -10px 8px 0 -6px rgba(255,255,255,.25);
}

.preview-space-ship {
    position: absolute;
    top: 48%;
    left: 37%;
    z-index: 3;
    font-size: clamp(3.2rem, 5vw, 4.6rem);
    filter: drop-shadow(0 5px 0 rgba(5,8,32,.35));
    transform: translate(-50%, -50%) rotate(35deg);
}

.preview-space-rock {
    position: absolute;
    z-index: 2;
    border: 3px solid #fff;
    border-radius: 44% 56% 48% 52%;
    background: #9b7ec7;
    box-shadow: inset -7px -5px 0 rgba(59,45,95,.2), 0 4px 0 rgba(4,7,29,.28);
}

.preview-space-rock::before {
    position: absolute;
    top: 22%;
    left: 18%;
    width: 26%;
    height: 22%;
    border-radius: 50%;
    background: rgba(63,47,103,.25);
    content: "";
}

.preview-space-rock.rock-a { top: 27%; right: 14%; width: 47px; height: 43px; transform: rotate(18deg); }
.preview-space-rock.rock-b { bottom: 10%; left: 12%; width: 29px; height: 27px; background: #6bb8d3; }

.preview-space-shot {
    position: absolute;
    top: 41%;
    left: 57%;
    z-index: 4;
    color: #ffe34e;
    text-shadow: 0 0 10px #ffe34e;
    font-size: 1.5rem;
}

.space-page,
.space-play-section,
.space-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.space-page {
    overflow: hidden;
    background: #0d123a;
}

.space-play-section {
    position: relative;
    padding: 0;
}

.space-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#spaceCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#spaceCanvas:active { cursor: grabbing; }

.space-hud {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 5px;
    align-items: stretch;
    padding: 6px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 18px;
    color: #fff;
    background: rgba(36,31,96,.9);
    box-shadow: 0 5px 0 rgba(7,8,33,.34);
    transform: translateX(-50%);
}

.space-hud > div {
    display: grid;
    min-width: 82px;
    place-items: center;
    padding: 3px 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.11);
}

.space-hud span {
    font-size: .45rem;
    font-weight: 1000;
    letter-spacing: .07em;
}

.space-hud strong {
    color: #ffe34e;
    font-size: 1.1rem;
    line-height: 1;
}

.space-hud strong b { font-size: 1.24rem; }
.space-hud strong i { font-style: normal; }
#spaceLives { min-width: 70px; color: #fff; font-size: .88rem; }

.space-hud button {
    min-width: 41px;
    border: 0;
    border-radius: 11px;
    color: #504572;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d3d0e1;
    font-size: 1.2rem;
    font-weight: 1000;
}

.space-fire-button {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(17px, env(safe-area-inset-bottom));
    z-index: 4;
    display: grid;
    width: clamp(74px, 12vw, 105px);
    height: clamp(74px, 12vw, 105px);
    place-items: center;
    padding: 6px;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #4f4270;
    background: #ffe34e;
    box-shadow: 0 8px 0 #dd8148, 0 13px 24px rgba(6,7,31,.32);
    touch-action: none;
}

.space-fire-button span {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: .8;
}

.space-fire-button strong {
    font-size: clamp(.48rem, 1.1vw, .68rem);
    font-weight: 1000;
}

.space-fire-button:active {
    transform: translateY(5px);
    box-shadow: 0 3px 0 #dd8148;
}

.space-tip {
    position: absolute;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 200px);
    padding: 7px 12px;
    border: 3px solid #fff;
    border-radius: 17px;
    color: #493e6d;
    background: rgba(255,233,92,.96);
    box-shadow: 0 5px 0 rgba(7,8,33,.28);
    font-size: clamp(.65rem, 2vw, .9rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: space-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .2s ease;
}

.space-tip.hidden { opacity: 0; }

.space-feedback {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 15px;
    border: 4px solid #fff;
    border-radius: 21px;
    color: #fff;
    background: #7765d8;
    box-shadow: 0 7px 0 rgba(7,8,33,.34);
    font-size: clamp(.9rem, 3vw, 1.35rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.space-feedback.success { background: #42bb77; }
.space-feedback.shield { background: #43bcda; }
.space-feedback.danger { background: #ed5c6d; }
.space-feedback.visible { animation: space-feedback-pop .9s ease both; }
.space-feedback span { font-size: 1.5em; }

.space-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(111,105,231,.3), transparent 35%),
        linear-gradient(145deg, rgba(16,18,59,.99), rgba(50,28,94,.99));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.space-overlay.hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.space-overlay-scene {
    position: relative;
    width: 270px;
    height: 105px;
    animation: space-overlay-fly 1.2s ease-in-out alternate infinite;
}

.overlay-space-ship {
    position: absolute;
    top: 9px;
    left: 10px;
    font-size: 5.5rem;
    filter: drop-shadow(0 7px 0 rgba(7,8,33,.35));
    transform: rotate(40deg);
}

.overlay-space-shot {
    position: absolute;
    top: 35px;
    left: 145px;
    color: #ffe34e;
    text-shadow: 0 0 14px #ffe34e;
    font-size: 2.2rem;
}

.overlay-space-rock {
    position: absolute;
    top: 19px;
    right: 9px;
    width: 60px;
    height: 58px;
    border: 4px solid #fff;
    border-radius: 43% 57% 49% 51%;
    background: #a183cf;
    box-shadow: inset -9px -7px 0 rgba(56,42,91,.22);
    transform: rotate(15deg);
}

.space-overlay h1 {
    margin: 4px 0 0;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(7,8,33,.36);
}

.space-overlay p {
    max-width: 590px;
    margin: 8px 0 19px;
    font-size: clamp(.84rem, 2.5vw, 1.12rem);
    font-weight: 800;
}

.space-start-button {
    min-width: 150px;
    padding: 11px 27px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #4e426e;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8347;
    font-size: 1.14rem;
    font-weight: 1000;
}

.space-start-button:active {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #dc8347;
}

@keyframes space-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes space-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1); }
}

@keyframes space-overlay-fly {
    to { transform: translate(10px, -8px); }
}

@media (max-width: 767.98px) {
    .space-hud {
        top: max(4px, env(safe-area-inset-top));
        gap: 3px;
        padding: 4px;
        border-width: 2px;
        border-radius: 14px;
    }

    .space-hud > div {
        min-width: 48px;
        padding: 3px 4px;
        border-radius: 8px;
    }

    .space-hud span { font-size: .31rem; }
    .space-hud strong { font-size: .78rem; }
    #spaceLives { min-width: 49px; font-size: .64rem; }
    .space-hud button { min-width: 30px; font-size: .88rem; }
    .space-fire-button { right: 9px; bottom: 10px; border-width: 4px; }
    .space-tip { max-width: calc(100% - 130px); padding: 5px 8px; border-width: 2px; }
    .space-feedback { top: 21%; padding: 7px 10px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .space-fire-button { width: 62px; height: 62px; right: 8px; bottom: 7px; }
    .space-tip { display: none; }
    .space-feedback { top: 27%; }
    .space-overlay-scene { transform: scale(.72); margin: -14px 0; }
    .space-overlay h1 { font-size: 2rem; }
    .space-overlay p { margin: 4px 0 8px; font-size: .72rem; }
    .space-start-button { min-width: 125px; padding: 7px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .space-tip,
    .space-feedback.visible,
    .space-overlay-scene {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Home grid with 22 games. */
.home-page .game-grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.home-page .game-grid > div:nth-child(n) {
    grid-column: auto;
}

.home-page .game-grid > div:nth-child(17) {
    grid-column: 2;
}

@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(21) {
        grid-column: 2;
    }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid {
        grid-template-rows: repeat(8, minmax(0, 1fr));
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: span 2;
    }

    .home-page .game-grid > div:nth-child(22) {
        grid-column: 3 / span 2;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .home-page .game-grid {
        grid-template-rows: repeat(3, minmax(0, 1fr));
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }

    .home-page .game-grid > div:nth-child(17) {
        grid-column: 2;
    }
}

/* Esquadrão das Estrelas */
.squad-art {
    background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,.75) 0 1.5%, transparent 2%),
        radial-gradient(circle at 84% 72%, rgba(255,255,255,.55) 0 1%, transparent 1.5%),
        linear-gradient(#4e2878, #171947);
}

.preview-squad-enemy {
    position: absolute;
    top: 16%;
    z-index: 2;
    font-size: 2rem;
    filter: drop-shadow(0 4px 0 rgba(10,10,40,.32));
}

.preview-squad-enemy.enemy-a { left: 13%; }
.preview-squad-enemy.enemy-b { left: 43%; }
.preview-squad-enemy.enemy-c { right: 11%; }

.preview-squad-shot {
    position: absolute;
    z-index: 3;
    color: #ffe34e;
    text-shadow: 0 0 10px #ffe34e;
    font-size: 1.25rem;
}

.preview-squad-shot.shot-a { top: 48%; left: 39%; }
.preview-squad-shot.shot-b { top: 58%; right: 34%; }

.preview-squad-ship {
    position: absolute;
    bottom: 3%;
    left: 50%;
    z-index: 3;
    font-size: 3.6rem;
    filter: drop-shadow(0 5px 0 rgba(8,9,37,.35));
    transform: translateX(-50%) rotate(-45deg);
}

.preview-squad-trail {
    position: absolute;
    bottom: 3%;
    left: 33%;
    width: 33%;
    height: 8px;
    border-radius: 10px;
    background: rgba(255,225,77,.65);
    filter: blur(2px);
}

.squad-page,
.squad-play-section,
.squad-stage {
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

.squad-page { overflow: hidden; background: #131844; }
.squad-play-section { position: relative; padding: 0; }

.squad-stage {
    position: relative;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

#squadCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}

#squadCanvas:active { cursor: grabbing; }

.squad-hud {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 5px;
    align-items: stretch;
    padding: 6px;
    border: 3px solid rgba(255,255,255,.94);
    border-radius: 18px;
    color: #fff;
    background: rgba(53,31,101,.9);
    box-shadow: 0 5px 0 rgba(8,8,34,.34);
    transform: translateX(-50%);
}

.squad-hud > div {
    display: grid;
    min-width: 76px;
    place-items: center;
    padding: 3px 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.11);
}

.squad-hud span { font-size: .45rem; font-weight: 1000; letter-spacing: .07em; }
.squad-hud strong { color: #ffe34e; font-size: 1.1rem; line-height: 1; }
#squadLives { min-width: 70px; color: #fff; font-size: .88rem; }

.squad-hud button {
    min-width: 41px;
    border: 0;
    border-radius: 11px;
    color: #514575;
    background: #fff;
    box-shadow: inset 0 -3px 0 #d3d0e1;
    font-size: 1.2rem;
    font-weight: 1000;
}

.squad-power {
    position: absolute;
    top: max(72px, calc(env(safe-area-inset-top) + 68px));
    left: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 3px solid #fff;
    border-radius: 15px;
    color: #fff;
    background: rgba(74,51,150,.86);
    box-shadow: 0 5px 0 rgba(8,8,34,.25);
    font-size: .8rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.squad-power.active { opacity: 1; transform: none; }
.squad-power span { font-size: 1.25rem; }

.squad-fire-button {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(17px, env(safe-area-inset-bottom));
    z-index: 4;
    display: grid;
    width: clamp(74px, 12vw, 105px);
    height: clamp(74px, 12vw, 105px);
    place-items: center;
    padding: 6px;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #50416f;
    background: #ffe34e;
    box-shadow: 0 8px 0 #dc8148, 0 13px 24px rgba(7,8,32,.32);
    touch-action: none;
}

.squad-fire-button span { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: .8; }
.squad-fire-button strong { font-size: clamp(.48rem, 1.1vw, .68rem); font-weight: 1000; }
.squad-fire-button:active { transform: translateY(5px); box-shadow: 0 3px 0 #dc8148; }

.squad-tip {
    position: absolute;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    max-width: calc(100% - 200px);
    padding: 7px 12px;
    border: 3px solid #fff;
    border-radius: 17px;
    color: #493e6d;
    background: rgba(255,233,92,.96);
    box-shadow: 0 5px 0 rgba(7,8,33,.28);
    font-size: clamp(.65rem, 2vw, .9rem);
    font-weight: 1000;
    text-align: center;
    transform: translateX(-50%);
    animation: squad-tip-bob .8s ease-in-out alternate infinite;
    pointer-events: none;
    transition: opacity .2s ease;
}

.squad-tip.hidden { opacity: 0; }

.squad-feedback {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 9px 15px;
    border: 4px solid #fff;
    border-radius: 21px;
    color: #fff;
    background: #7863d5;
    box-shadow: 0 7px 0 rgba(7,8,33,.34);
    font-size: clamp(.9rem, 3vw, 1.35rem);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    pointer-events: none;
}

.squad-feedback.success { background: #42bc77; }
.squad-feedback.power { background: #43bad8; }
.squad-feedback.danger { background: #ed5c6c; }
.squad-feedback.visible { animation: squad-feedback-pop .9s ease both; }
.squad-feedback span { font-size: 1.5em; }

.squad-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(130,91,217,.34), transparent 35%),
        linear-gradient(145deg, rgba(40,23,82,.99), rgba(18,22,67,.99));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.squad-overlay.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.squad-overlay-scene {
    position: relative;
    width: 310px;
    height: 130px;
    animation: squad-overlay-float 1.2s ease-in-out alternate infinite;
}

.overlay-squad-enemies {
    position: absolute;
    top: 0;
    left: 13px;
    font-size: 2.8rem;
    white-space: nowrap;
    filter: drop-shadow(0 5px 0 rgba(7,8,33,.3));
}

.overlay-squad-stars {
    position: absolute;
    top: 55px;
    left: 118px;
    color: #ffe34e;
    text-shadow: 0 0 12px #ffe34e;
    font-size: 1.7rem;
}

.overlay-squad-ship {
    position: absolute;
    bottom: -3px;
    left: 114px;
    font-size: 4.7rem;
    filter: drop-shadow(0 6px 0 rgba(7,8,33,.35));
    transform: rotate(-45deg);
}

.squad-overlay h1 {
    margin: 3px 0 0;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(7,8,33,.36);
}

.squad-overlay p { max-width: 590px; margin: 8px 0 19px; font-size: clamp(.84rem, 2.5vw, 1.12rem); font-weight: 800; }

.squad-start-button {
    min-width: 170px;
    padding: 11px 27px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #4e426e;
    background: #ffe34e;
    box-shadow: 0 7px 0 #dc8347;
    font-size: 1.12rem;
    font-weight: 1000;
}

.squad-start-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #dc8347; }

@keyframes squad-tip-bob {
    to { transform: translateX(-50%) translateY(-5px); }
}

@keyframes squad-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-7deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -72%) scale(1.1); }
}

@keyframes squad-overlay-float {
    to { transform: translateY(-8px); }
}

@media (max-width: 767.98px) {
    .squad-hud { top: max(4px, env(safe-area-inset-top)); gap: 3px; padding: 4px; border-width: 2px; border-radius: 14px; }
    .squad-hud > div { min-width: 47px; padding: 3px 4px; border-radius: 8px; }
    .squad-hud span { font-size: .31rem; }
    .squad-hud strong { font-size: .78rem; }
    #squadLives { min-width: 49px; font-size: .64rem; }
    .squad-hud button { min-width: 30px; font-size: .88rem; }
    .squad-power { top: max(52px, calc(env(safe-area-inset-top) + 48px)); left: 6px; padding: 4px 7px; border-width: 2px; font-size: .62rem; }
    .squad-fire-button { right: 9px; bottom: 10px; border-width: 4px; }
    .squad-tip { max-width: calc(100% - 130px); padding: 5px 8px; border-width: 2px; }
    .squad-feedback { top: 21%; padding: 7px 10px; border-width: 3px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .squad-power { top: 5px; left: 54px; }
    .squad-fire-button { width: 62px; height: 62px; right: 8px; bottom: 7px; }
    .squad-tip { display: none; }
    .squad-feedback { top: 27%; }
    .squad-overlay-scene { transform: scale(.68); margin: -21px 0; }
    .squad-overlay h1 { font-size: 2rem; }
    .squad-overlay p { margin: 4px 0 8px; font-size: .72rem; }
    .squad-start-button { min-width: 140px; padding: 7px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .squad-tip,
    .squad-feedback.visible,
    .squad-overlay-scene {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Cobrinha Gulosa */
.snake-art {
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(145deg, #99e96e, #41bd69);
    background-size: 23px 23px, 23px 23px, auto;
}

.preview-snake-grid {
    position: absolute;
    inset: 10%;
    border: 3px dashed rgba(255,255,255,.55);
    border-radius: 18px;
}

.preview-snake-body,
.preview-snake-head {
    position: absolute;
    z-index: 2;
    width: 35px;
    height: 35px;
    border: 3px solid #16864a;
    border-radius: 50%;
    background: #63dc6e;
    box-shadow: inset 0 -5px 0 rgba(21,135,73,.22), 0 4px 0 rgba(25,113,61,.2);
}

.preview-snake-body.segment-a { left: 24%; bottom: 27%; }
.preview-snake-body.segment-b { left: 35%; bottom: 27%; }
.preview-snake-body.segment-c { left: 46%; bottom: 27%; }

.preview-snake-head {
    left: 57%;
    bottom: 27%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    font-size: 1.75rem;
    transform: translateY(3px);
}

.preview-snake-fruit,
.preview-snake-star {
    position: absolute;
    z-index: 2;
    filter: drop-shadow(0 4px 0 rgba(27,102,58,.22));
}

.preview-snake-fruit { top: 18%; right: 17%; font-size: 2.4rem; animation: snake-fruit-bob .75s ease-in-out alternate infinite; }
.preview-snake-star { top: 15%; left: 18%; font-size: 1.7rem; animation: snake-star-spin 2.4s linear infinite; }

.snake-page {
    overflow: hidden;
    overscroll-behavior: none;
    background: #70d667;
}

.snake-page main,
.snake-play-section {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.snake-play-section { position: fixed; inset: 0; }

.snake-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: none;
    touch-action: none;
    user-select: none;
    background: #70d667;
    transition: filter .3s ease;
}

.snake-stage.rainbow {
    animation: snake-rainbow-glow 1.1s linear infinite;
}

#snakeCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.snake-hud {
    position: absolute;
    z-index: 5;
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    display: flex;
    gap: 6px;
    align-items: stretch;
    padding: 6px;
    border: 3px solid #fff;
    border-radius: 18px;
    background: rgba(34,107,65,.82);
    box-shadow: 0 5px 0 rgba(22,96,53,.26);
    backdrop-filter: blur(5px);
    transform: translateX(-50%);
}

.snake-hud > div {
    min-width: 63px;
    padding: 4px 8px;
    border-radius: 11px;
    color: #27623c;
    background: #fff9d1;
    text-align: center;
}

.snake-hud span {
    display: block;
    font-size: .46rem;
    font-weight: 1000;
    letter-spacing: .08em;
}

.snake-hud strong { display: block; font-size: 1rem; line-height: 1.05; }
#snakeLives { min-width: 78px; color: #f14d64; font-size: .82rem; letter-spacing: 1px; }

.snake-hud button {
    min-width: 42px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: #ff8d54;
    box-shadow: inset 0 -4px 0 rgba(169,69,36,.25);
    font-size: 1.2rem;
    font-weight: 1000;
}

.snake-feedback {
    position: absolute;
    z-index: 6;
    top: 20%;
    left: 50%;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 15px;
    border: 4px solid #fff;
    border-radius: 20px;
    color: #257044;
    background: #fff9c9;
    box-shadow: 0 7px 0 rgba(27,104,59,.22);
    font-size: clamp(1rem, 3vw, 1.4rem);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.3);
}

.snake-feedback.visible { animation: snake-feedback-pop .9s both; }
.snake-feedback.star { color: #9b5ac9; background: #fff2fc; }
.snake-feedback.bump { color: #c34842; background: #fff1dc; }

.snake-tip {
    position: absolute;
    z-index: 5;
    bottom: max(15px, env(safe-area-inset-bottom));
    left: 50%;
    padding: 8px 14px;
    border: 3px solid #fff;
    border-radius: 17px;
    color: #fff;
    background: rgba(35,110,66,.82);
    box-shadow: 0 5px 0 rgba(22,96,53,.24);
    font-size: clamp(.68rem, 2vw, .92rem);
    font-weight: 1000;
    white-space: nowrap;
    transform: translateX(-50%);
    animation: snake-tip-bob .65s ease-in-out alternate infinite;
    transition: opacity .25s ease;
}

.snake-tip.hidden { opacity: 0; pointer-events: none; }

.snake-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,238,99,.25), transparent 32%),
        linear-gradient(145deg, rgba(41,145,78,.98), rgba(26,104,72,.99));
    text-align: center;
    transition: opacity .25s ease, visibility .25s ease;
}

.snake-overlay.hidden { visibility: hidden; opacity: 0; pointer-events: none; }

.snake-overlay-scene {
    position: relative;
    width: 275px;
    height: 115px;
    animation: snake-overlay-float .9s ease-in-out alternate infinite;
}

.overlay-snake-body {
    position: absolute;
    bottom: 18px;
    left: 28px;
    width: 170px;
    height: 48px;
    border: 5px solid #157e46;
    border-radius: 40px;
    background:
        radial-gradient(circle at 20% 35%, #c8ff6b 0 7px, transparent 8px),
        radial-gradient(circle at 49% 63%, #c8ff6b 0 7px, transparent 8px),
        radial-gradient(circle at 78% 35%, #c8ff6b 0 7px, transparent 8px),
        #61dd6e;
    box-shadow: inset 0 -8px 0 rgba(20,132,70,.2), 0 7px 0 rgba(17,91,52,.24);
}

.overlay-snake-head {
    position: absolute;
    right: 38px;
    bottom: 7px;
    display: grid;
    place-items: center;
    width: 75px;
    height: 75px;
    border: 5px solid #157e46;
    border-radius: 50%;
    background: #61dd6e;
    box-shadow: inset 0 -8px 0 rgba(20,132,70,.2), 0 7px 0 rgba(17,91,52,.24);
    font-size: 3rem;
}

.overlay-snake-fruit {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 2.6rem;
    animation: snake-fruit-bob .65s ease-in-out alternate infinite;
}

.snake-overlay h1 {
    margin: 2px 0 0;
    font-size: clamp(2rem, 7vw, 4rem);
    font-weight: 1000;
    text-shadow: 0 5px 0 rgba(15,83,48,.3);
}

.snake-overlay p { max-width: 590px; margin: 8px 0 19px; font-size: clamp(.84rem, 2.5vw, 1.12rem); font-weight: 800; }

.snake-start-button {
    min-width: 175px;
    padding: 11px 27px;
    border: 4px solid #fff;
    border-radius: 18px;
    color: #356336;
    background: #ffe55c;
    box-shadow: 0 7px 0 #e4a944;
    font-size: 1.12rem;
    font-weight: 1000;
}

.snake-start-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #e4a944; }

@keyframes snake-fruit-bob { to { transform: translateY(-7px) rotate(5deg); } }
@keyframes snake-star-spin { to { transform: rotate(360deg); } }
@keyframes snake-tip-bob { to { transform: translateX(-50%) translateY(-5px); } }
@keyframes snake-overlay-float { to { transform: translateY(-7px); } }
@keyframes snake-rainbow-glow {
    0% { filter: hue-rotate(0deg) saturate(1.05); }
    100% { filter: hue-rotate(360deg) saturate(1.25); }
}
@keyframes snake-feedback-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-8deg); }
    20%, 74% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(2deg); }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1.08); }
}

@media (max-width: 767.98px) {
    .snake-hud { top: max(4px, env(safe-area-inset-top)); gap: 3px; padding: 4px; border-width: 2px; border-radius: 14px; }
    .snake-hud > div { min-width: 48px; padding: 3px 4px; border-radius: 8px; }
    .snake-hud span { font-size: .32rem; }
    .snake-hud strong { font-size: .8rem; }
    #snakeLives { min-width: 60px; font-size: .63rem; }
    .snake-hud button { min-width: 31px; font-size: .9rem; }
    .snake-feedback { top: 18%; padding: 7px 11px; border-width: 3px; }
    .snake-tip { padding: 6px 10px; border-width: 2px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .snake-tip { bottom: 7px; }
    .snake-feedback { top: 25%; }
    .snake-overlay-scene { transform: scale(.72); margin: -18px 0; }
    .snake-overlay h1 { font-size: 2rem; }
    .snake-overlay p { margin: 4px 0 8px; font-size: .72rem; }
    .snake-start-button { min-width: 140px; padding: 7px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .preview-snake-fruit,
    .preview-snake-star,
    .snake-stage.rainbow,
    .snake-tip,
    .snake-feedback.visible,
    .snake-overlay-scene {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Grade inicial com 23 jogos */
.home-page .game-grid > div:nth-child(17) { grid-column: auto; }

@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
    .home-page .game-grid > div:nth-child(21) { grid-column: 2; }
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page .game-grid { grid-template-rows: repeat(8, minmax(0, 1fr)); }
    .home-page .game-grid > div:nth-child(22) { grid-column: 2 / span 2; }
    .home-page .game-grid > div:nth-child(23) { grid-column: 4 / span 2; }
}

@media (orientation: landscape) {
    .home-page .game-grid > div:nth-child(17) { grid-column: auto; }
}

/* Rolagem da vitrine de jogos */
html:has(body.home-page) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

.home-page {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

.home-page main {
    height: auto;
    min-height: calc(100dvh - 66px);
}

.home-page .hero-section {
    height: auto;
    min-height: calc(100dvh - 66px);
}

.home-page .hero-section > .container {
    height: auto;
}

.home-page .game-grid {
    flex: none;
    grid-template-rows: none;
    grid-auto-rows: minmax(175px, 23vh);
}

@media (max-width: 767.98px) and (orientation: portrait) {
    .home-page main,
    .home-page .hero-section {
        min-height: calc(100dvh - 52px);
    }

    .home-page .game-grid {
        grid-template-rows: none;
        grid-auto-rows: minmax(145px, 22vh);
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    .home-page .game-grid {
        grid-template-rows: none;
        grid-auto-rows: minmax(150px, 42vh);
    }
}

/* Cinco jogos por linha na vitrine ampla. */
@media (min-width: 768px), (orientation: landscape) {
    .home-page .game-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-page .game-grid > div:nth-child(n) {
        grid-column: auto;
    }
}

/* Mini Mercado: proporções mais compactas em tablets. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .market-order-card {
        min-width: 270px;
        padding: 9px 14px;
        border-width: 5px;
    }

    .market-order-card strong {
        font-size: clamp(1.35rem, 2.7vw, 1.85rem);
    }

    #targetEmoji {
        width: 68px;
        height: 68px;
        font-size: 3.15rem;
    }

    .market-score-card {
        transform: scale(.9);
        transform-origin: top right;
    }

    .market-shelf {
        right: 4%;
        left: 4%;
        height: clamp(125px, 21vh, 165px);
    }

    .shelf-top { top: 25%; }
    .shelf-bottom { top: calc(25% + clamp(125px, 21vh, 165px) + 7px); }

    .market-item {
        width: 78px;
        height: 78px;
        font-size: 3rem;
    }

    .shopping-cart-zone {
        right: 4%;
        bottom: max(3%, calc(env(safe-area-inset-bottom) + 10px));
        width: clamp(165px, 21vw, 225px);
        height: clamp(108px, 17vh, 145px);
        border-width: 4px;
        border-radius: 23px;
    }

    .market-cart-emoji {
        font-size: clamp(3.8rem, 7.5vw, 5.2rem);
    }

    .market-drag-tip {
        bottom: max(5%, calc(env(safe-area-inset-bottom) + 18px));
    }
}