:root {
    --primary-color: #6366f1;
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --card-bg: #0c1421;
    --muted-text: #cbd5e1;
    --border-color: rgba(148, 163, 184, 0.18);
    --success-color: #10b981;
    --error-color: #f87171;
    --shadow-color: rgba(15, 23, 42, 0.45);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.2), transparent 30%),
        radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.12), transparent 25%),
        var(--bg-color);
    color: var(--text-color);
    margin: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}

.background-glow {
    position: fixed;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.background-glow-left {
    top: -80px;
    left: -60px;
}

.background-glow-right {
    right: -90px;
    bottom: -70px;
}

.hidden {
    display: none !important;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.86);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(16px);
}

.site-header-inner {
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 84px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 18px;
}

.brand-mark {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 320px;
}

.brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 30px -20px rgba(37, 99, 235, 0.55);
}

.brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
}

.app-shell {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-view {
    width: 100%;
    padding-top: 92px;
    height: 100%;
    overflow: hidden;
}

.view {
    width: 100%;
    display: none;
    opacity: 0;
    transform: translateY(24px);
}

.view-active {
    display: block;
    animation: fadeInUp 0.55s ease forwards;
}

.view-leaving {
    display: block;
    animation: fadeOutDown 0.45s ease forwards;
}

.site-ads {
    position: fixed;
    top: 124px;
    right: max(16px, calc(50vw - 780px));
    z-index: 15;
    width: 280px;
    height: min(740px, calc(100vh - 156px));
}

.ad-card {
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.ad-card h3 {
    margin-bottom: 8px;
}

.ad-card-copy {
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.ad-slot-shell {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    border-radius: 20px;
    overflow: hidden;
    border: 1px dashed rgba(125, 211, 252, 0.28);
    background:
        linear-gradient(180deg, rgba(14, 48, 86, 0.96), rgba(15, 23, 42, 0.96)),
        radial-gradient(circle at top, rgba(56, 189, 248, 0.16), transparent 48%);
}

.ad-slot {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 0;
    height: 100%;
}

.ad-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: rgba(226, 232, 240, 0.88);
    letter-spacing: 0.04em;
}

.ad-placeholder span {
    font-size: 0.84rem;
    text-transform: uppercase;
}

.ad-placeholder strong {
    font-size: 1.2rem;
}

.site-ads-ready .ad-placeholder {
    display: none;
}

.app-shell:has(#loginView.view-active) .site-ads,
.app-shell:has(#servicesView.view-active) .site-ads {
    display: none;
}

.card {
    background: rgba(12, 20, 33, 0.97);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 22px 45px -30px var(--shadow-color);
    backdrop-filter: blur(14px);
}

.login-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 40px;
    text-align: center;
}

.login-card > * {
    position: relative;
    z-index: 1;
}

.login-eyebrow {
    margin-top: -2px;
    margin-bottom: 10px;
}

.login-bird-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-bird-flight {
    position: absolute;
    top: clamp(34px, 22%, 96px);
    left: -96px;
    width: 88px;
    height: 52px;
    opacity: 0.34;
    filter: blur(0.2px);
    animation: loginBirdCruise 14s linear infinite;
}

.login-bird {
    position: absolute;
    inset: 0;
    width: 52px;
    height: 40px;
    margin: auto;
    border-radius: 58% 42% 46% 54% / 44% 46% 54% 56%;
    background:
        radial-gradient(circle at 64% 34%, rgba(15, 23, 42, 0.98) 0 8%, transparent 9%),
        radial-gradient(circle at 58% 74%, rgba(255, 255, 255, 0.18), transparent 20%),
        linear-gradient(180deg, rgba(239, 68, 68, 0.88), rgba(185, 28, 28, 0.88) 64%, rgba(245, 158, 11, 0.88) 64% 100%);
    box-shadow:
        inset -10px 0 0 rgba(14, 165, 233, 0.2),
        0 10px 18px -12px rgba(15, 23, 42, 0.56);
    transform-origin: center;
    animation: loginBirdFlap 0.9s ease-in-out infinite;
}

.login-bird::before,
.login-bird::after {
    content: '';
    position: absolute;
}

.login-bird::before {
    right: -10px;
    top: 14px;
    width: 18px;
    height: 10px;
    background: linear-gradient(180deg, #facc15, #f97316);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.login-bird::after {
    left: 6px;
    top: -6px;
    width: 16px;
    height: 14px;
    background: linear-gradient(180deg, #1e293b, #020617);
    border-radius: 8px 8px 2px 2px;
    box-shadow:
        6px 4px 0 -4px rgba(255, 255, 255, 0.18),
        2px 12px 0 -5px rgba(245, 158, 11, 0.96);
}

@keyframes loginBirdCruise {
    0% {
        transform: translate3d(0, 52px, 0) scale(0.94) rotate(5deg);
        opacity: 0;
    }
    10% {
        opacity: 0.28;
    }
    25% {
        transform: translate3d(180px, 34px, 0) scale(1) rotate(-1deg);
    }
    50% {
        transform: translate3d(320px, 88px, 0) scale(1.04) rotate(3deg);
        opacity: 0.38;
    }
    68% {
        transform: translate3d(420px, 52px, 0) scale(1) rotate(-2deg);
        opacity: 0.34;
    }
    75% {
        transform: translate3d(450px, 64px, 0) scale(0.98) rotate(-3deg);
    }
    90% {
        opacity: 0.22;
    }
    100% {
        transform: translate3d(620px, 92px, 0) scale(0.92) rotate(1deg);
        opacity: 0;
    }
}

@keyframes loginBirdFlap {
    0%,
    100% {
        transform: translateY(0) rotate(-8deg) scaleY(1);
    }
    50% {
        transform: translateY(-4px) rotate(8deg) scaleY(0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-bird-flight,
    .login-bird {
        animation: none;
    }

    .login-bird-flight {
        left: auto;
        right: 28px;
        top: 28px;
        opacity: 0.24;
    }
}

.services-shell,
.service-home-card {
    width: min(980px, 100%);
    margin: 0 auto;
}

.page-actions {
    position: fixed;
    top: 18px;
    right: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-action-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: 18px;
}

.page-action-button-legal {
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 14px;
    border-radius: 14px;
}

.services-legal-button {
    position: fixed;
    top: 18px;
    left: 16px;
    z-index: 60;
}

body:has(#servicesView.view-active) .services-legal-button {
    display: inline-flex !important;
}

.legal-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.legal-button-glyph {
    display: block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    transform: none;
}

.logout-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.logout-button-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-copy {
    text-align: center;
    margin-bottom: 28px;
    transform: translateY(-10px);
}

.services-copy .eyebrow {
    font-size: 0.92rem;
    margin-bottom: 8px;
}

.services-copy h1 {
    font-size: clamp(2.6rem, 5.8vw, 4.15rem);
    margin-bottom: 8px;
}

.services-copy .intro {
    margin-bottom: 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.service-card {
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 22px;
    border-radius: 30px;
    background: transparent;
    color: var(--text-color);
}

.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-4px) scale(1.01);
    filter: none;
}

.service-card-art {
    width: min(100%, 280px);
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.service-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.18));
}

.service-card:hover .service-card-art,
.service-card:focus-visible .service-card-art {
    transform: scale(1.03);
    box-shadow:
        inset 0 0 0 1px rgba(99, 102, 241, 0.42),
        0 30px 50px -36px rgba(15, 23, 42, 0.95);
}

.service-card-art-cinema {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.4)),
        linear-gradient(135deg, #1e293b, #6366f1);
}

.service-card-art-games {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.4)),
        linear-gradient(135deg, #0f766e, #38bdf8);
}

.service-card-art-math {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.4)),
        linear-gradient(135deg, #5f72f6, #2aa9ef);
}

.service-card-art-music {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.4)),
        linear-gradient(135deg, #2dd4bf, #f472b6);
}

.service-card-title {
    font-size: 1.75rem;
    font-weight: 700;
}

.service-card-subtitle {
    color: var(--muted-text);
    font-size: 0.98rem;
}

.service-home-card {
    padding: 48px;
    text-align: center;
}

.service-home-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}

.games-layout {
    width: min(960px, 100%);
    margin: 0 auto;
    position: relative;
    align-items: stretch;
    height: min(740px, calc(100vh - 88px));
}

.games-filters-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 18px;
    position: absolute;
    top: 0;
    right: calc(100% + 20px);
    width: 280px;
    height: auto;
    min-height: 0;
}

.games-filters-copy h3 {
    margin-bottom: 8px;
}

.games-filters-copy p:last-child {
    margin-bottom: 0;
}

.games-filter-search {
    display: grid;
    gap: 8px;
}

.games-filter-search-label,
.games-filter-group-label {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(191, 219, 254, 0.8);
}

.games-filter-search input {
    width: 100%;
    min-height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    padding: 0 14px;
    color: var(--text-color);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.68)),
        rgba(15, 23, 42, 0.76);
}

.games-filter-search input:focus {
    outline: 2px solid rgba(125, 211, 252, 0.35);
    outline-offset: 2px;
}

.games-filter-group {
    display: grid;
    gap: 12px;
}

.games-filter-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.games-filter-chip {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.56);
    color: rgba(226, 232, 240, 0.92);
    font-weight: 700;
}

.games-filter-chip.is-active {
    border-color: rgba(125, 211, 252, 0.68);
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.26), rgba(59, 130, 246, 0.16)),
        rgba(15, 23, 42, 0.76);
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.14),
        0 16px 30px -26px rgba(56, 189, 248, 0.58);
}

.games-filter-summary {
    margin-top: auto;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(96, 165, 250, 0.16);
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 54%),
        rgba(15, 23, 42, 0.46);
}

.games-filter-summary strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

.games-filter-summary p {
    margin: 0;
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.92rem;
}

.games-panel {
    display: none;
}

.games-panel.games-panel-active {
    display: block;
    width: 100%;
    height: 100%;
}

.games-layout.games-layout-focus {
    width: min(960px, 100%);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.games-layout.games-layout-focus .games-filters-card {
    display: none;
}

.games-home-card {
    padding: 24px;
    overflow: hidden;
    background: rgba(12, 20, 33, 0.97);
}

.games-home-copy {
    text-align: center;
    margin-bottom: 22px;
}

.multiplayer-lobby-card {
    width: min(100%, 920px);
    margin: 0 auto 22px;
    padding: 18px 20px;
    border-radius: 28px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(6, 10, 20, 0.98), rgba(6, 10, 20, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.multiplayer-lobby-copy h4 {
    margin: 0;
}

.multiplayer-lobby-copy p:last-child {
    margin-bottom: 0;
}

.multiplayer-lobby-status {
    color: rgba(226, 232, 240, 0.86);
}

.multiplayer-entry-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.multiplayer-entry-button {
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.58);
    color: rgba(226, 232, 240, 0.9);
    font-weight: 700;
}

.multiplayer-entry-button.is-active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(59, 130, 246, 0.22));
    border-color: rgba(125, 211, 252, 0.55);
    box-shadow: 0 12px 30px rgba(14, 165, 233, 0.12);
}

.multiplayer-entry-button-success {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(6, 78, 59, 0.26);
    color: #d1fae5;
}

.multiplayer-entry-button-success.is-active {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.32), rgba(34, 197, 94, 0.2));
    border-color: rgba(74, 222, 128, 0.58);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.18);
}

.multiplayer-entry-panels {
    margin-top: 16px;
}

.multiplayer-entry-panel {
    display: none;
    gap: 12px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.48);
    align-content: start;
}

.multiplayer-entry-panel.is-active {
    display: grid;
}

.multiplayer-entry-panel-copy h5 {
    margin: 0;
    font-size: 1.12rem;
}

.multiplayer-entry-panel-copy p:last-child {
    margin-bottom: 0;
    font-size: 0.96rem;
}

.multiplayer-entry-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.multiplayer-entry-fields-join {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.multiplayer-entry-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.multiplayer-lobby-field {
    display: grid;
    gap: 6px;
}

.multiplayer-lobby-field span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(191, 219, 254, 0.82);
}

.multiplayer-lobby-field input {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    padding: 0 14px;
    color: var(--text-color);
    background: rgba(15, 23, 42, 0.62);
}

.multiplayer-lobby-field select {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    padding: 0 14px;
    color: var(--text-color);
    background: rgba(15, 23, 42, 0.62);
}

.multiplayer-lobby-field input:focus {
    outline: 2px solid rgba(56, 189, 248, 0.28);
    outline-offset: 2px;
}

.multiplayer-lobby-field select:focus {
    outline: 2px solid rgba(56, 189, 248, 0.28);
    outline-offset: 2px;
}

.multiplayer-room-inline {
    display: inline-grid;
    gap: 2px;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.multiplayer-room-inline-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(191, 219, 254, 0.76);
}

.multiplayer-room-inline-value {
    font-size: 1rem;
    color: rgba(248, 250, 252, 0.96);
}

.multiplayer-lobby-players {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}

.multiplayer-lobby-players-title {
    margin: 0 0 10px;
    color: rgba(226, 232, 240, 0.92);
}

.multiplayer-lobby-player-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: rgba(226, 232, 240, 0.84);
}

.multiplayer-lobby-player-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.82);
    border: 1px solid rgba(96, 165, 250, 0.18);
}

.multiplayer-lobby-player-pill.is-you {
    border-color: rgba(74, 222, 128, 0.42);
}

.multiplayer-lobby-player-pill.is-host {
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.24);
}

.games-home-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 920px);
    margin: 0 auto;
}

.game-home-tile {
    text-align: center;
    padding: 10px 8px;
    border-radius: 22px;
    color: var(--text-color);
    background:
        linear-gradient(180deg, rgba(99, 102, 241, 0.12), rgba(15, 23, 42, 0.28)),
        rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(99, 102, 241, 0.16);
    aspect-ratio: 0.92 / 1;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
}

.game-home-tile[hidden] {
    display: none !important;
}

.multiplayer-game-tile.is-selected {
    border-color: rgba(125, 211, 252, 0.7);
    background:
        linear-gradient(180deg, rgba(56, 189, 248, 0.2), rgba(15, 23, 42, 0.32)),
        rgba(15, 23, 42, 0.62);
    box-shadow:
        0 0 0 1px rgba(125, 211, 252, 0.18),
        0 18px 36px -26px rgba(56, 189, 248, 0.5);
}

.game-home-art {
    width: 64px;
    height: 64px;
    border-radius: 19px;
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 20px 34px -24px rgba(15, 23, 42, 0.78);
}

.game-home-art::before,
.game-home-art::after {
    content: '';
    position: absolute;
}

.game-home-art-minesweeper {
    background:
        linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(15, 23, 42, 0.22)),
        rgba(15, 23, 42, 0.62);
}

.game-home-art-minesweeper::before {
    inset: 0;
    content: '🏴‍☠️';
    display: grid;
    place-items: center;
    font-size: 3.35rem;
    line-height: 1;
    text-shadow: 0 8px 18px rgba(15, 23, 42, 0.35);
}

.game-home-art-minesweeper::after {
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 10px;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.28), transparent 72%);
    opacity: 0.45;
}

.game-home-art-snake {
    background:
        radial-gradient(circle at 74% 24%, rgba(255, 255, 255, 0.16), transparent 16%),
        linear-gradient(135deg, #0f766e, #2563eb);
}

.game-home-art-snake::before {
    inset: 18px 18px 22px 18px;
    border-radius: 999px 999px 16px 16px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
        radial-gradient(circle at 66% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
        radial-gradient(circle at 34% 30%, rgba(15, 23, 42, 0.96) 0 3%, transparent 4%),
        radial-gradient(circle at 66% 30%, rgba(15, 23, 42, 0.96) 0 3%, transparent 4%),
        linear-gradient(180deg, rgba(94, 234, 212, 0.98), rgba(14, 165, 233, 0.92));
}

.game-home-art-snake::after {
    width: 28px;
    height: 28px;
    right: 14px;
    bottom: 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #f59e0b, #b45309);
}

.game-home-art-pong {
    background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

.game-home-art-pong::before {
    left: 10px;
    top: 11px;
    width: 6px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(125, 211, 252, 0.78));
    box-shadow: 28px 0 0 0 rgba(45, 212, 191, 0.94);
}

.game-home-art-pong::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.18) 49% 51%, transparent 51%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 4px, transparent 5px);
}

.game-home-art-sudoku {
    background: linear-gradient(135deg, #166534, #1d4ed8);
}

.game-home-art-sudoku::before {
    inset: 10px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(255, 255, 255, 0.78) 31% 34%, transparent 34% 64%, rgba(255, 255, 255, 0.78) 64% 67%, transparent 67%),
        linear-gradient(transparent 31%, rgba(255, 255, 255, 0.78) 31% 34%, transparent 34% 64%, rgba(255, 255, 255, 0.78) 64% 67%, transparent 67%),
        linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.24) 10% 12%, transparent 12% 22%, rgba(255, 255, 255, 0.24) 22% 24%, transparent 24% 43%, rgba(255, 255, 255, 0.24) 43% 45%, transparent 45% 55%, rgba(255, 255, 255, 0.24) 55% 57%, transparent 57% 76%, rgba(255, 255, 255, 0.24) 76% 78%, transparent 78% 88%, rgba(255, 255, 255, 0.24) 88% 90%, transparent 90%),
        linear-gradient(transparent 10%, rgba(255, 255, 255, 0.24) 10% 12%, transparent 12% 22%, rgba(255, 255, 255, 0.24) 22% 24%, transparent 24% 43%, rgba(255, 255, 255, 0.24) 43% 45%, transparent 45% 55%, rgba(255, 255, 255, 0.24) 55% 57%, transparent 57% 76%, rgba(255, 255, 255, 0.24) 76% 78%, transparent 78% 88%, rgba(255, 255, 255, 0.24) 88% 90%, transparent 90%),
        rgba(15, 23, 42, 0.22);
}

.game-home-art-sudoku::after {
    inset: 0;
    content: '8';
    color: rgba(255, 255, 255, 0.96);
    font-size: 2rem;
    font-weight: 900;
    display: grid;
    place-items: center;
    text-shadow: 0 0 12px rgba(15, 23, 42, 0.35);
}

.game-home-art-2048 {
    background: linear-gradient(135deg, #93c5fd, #3b82f6 52%, #1e3a8a);
    border: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 20px 34px -24px rgba(15, 23, 42, 0.78);
}

.game-home-art-2048::before {
    inset: 15px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.28) 0 48%, transparent 48% 52%, rgba(15, 23, 42, 0.28) 52% 100%),
        linear-gradient(rgba(15, 23, 42, 0.28) 0 48%, transparent 48% 52%, rgba(15, 23, 42, 0.28) 52% 100%);
}

.game-home-art-2048::after {
    inset: 21px;
    content: '2048';
    color: rgba(255, 255, 255, 0.94);
    font-size: 1rem;
    font-weight: 900;
    display: grid;
    place-items: center;
}

.game-home-art-aim {
    background: linear-gradient(135deg, #0ea5e9, #1e3a8a);
}

.game-home-art-aim::before {
    inset: 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(186, 230, 253, 0.18) 0 10%, transparent 11%),
        radial-gradient(circle at 62% 38%, rgba(125, 211, 252, 0.1) 0 8%, transparent 9%),
        radial-gradient(circle at 42% 62%, rgba(15, 23, 42, 0.22) 0 11%, transparent 12%),
        radial-gradient(circle at 58% 56%, rgba(15, 23, 42, 0.2) 0 9%, transparent 10%),
        radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.12), rgba(59, 130, 246, 0.1) 14%, rgba(30, 64, 175, 0.9) 38%, rgba(23, 37, 84, 0.98) 70%, rgba(15, 23, 42, 1) 100%),
        repeating-conic-gradient(
            from 4deg,
            rgba(15, 23, 42, 0.98) 0deg 5deg,
            transparent 5deg 17deg
        );
    box-shadow:
        0 0 0 1px rgba(17, 24, 39, 0.18),
        0 10px 18px -12px rgba(15, 23, 42, 0.68);
}

.game-home-art-aim::after {
    inset: 10px;
    border-radius: 50%;
    background:
        linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.92) 49% 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.92) 49% 51%, transparent 51%),
        radial-gradient(circle, transparent 18px, rgba(255, 255, 255, 0.92) 18px 20px, transparent 21px);
}

.game-home-art-memory {
    background: linear-gradient(135deg, #10b981, #2563eb);
}

.game-home-art-memory::before {
    left: 14px;
    top: 18px;
    width: 28px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(191, 219, 254, 0.9));
    box-shadow: 24px 10px 0 0 rgba(255, 255, 255, 0.92);
}

.game-home-art-memory::after {
    left: 22px;
    top: 28px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0f172a;
    box-shadow: 23px 11px 0 0 #0f172a;
}

.game-home-art-tictactoe {
    background: linear-gradient(135deg, #f97316, #4f46e5);
}

.game-home-art-tictactoe::before {
    inset: 14px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(255, 255, 255, 0.78) 31% 35%, transparent 35% 65%, rgba(255, 255, 255, 0.78) 65% 69%, transparent 69%),
        linear-gradient(transparent 31%, rgba(255, 255, 255, 0.78) 31% 35%, transparent 35% 65%, rgba(255, 255, 255, 0.78) 65% 69%, transparent 69%);
}

.game-home-art-tictactoe::after {
    inset: 0;
    background:
        linear-gradient(45deg, transparent 47%, #fbbf24 47% 53%, transparent 53%) left 22px top 22px / 18px 18px no-repeat,
        linear-gradient(135deg, transparent 47%, #fbbf24 47% 53%, transparent 53%) left 22px top 22px / 18px 18px no-repeat,
        radial-gradient(circle, transparent 8px, #67e8f9 8px 11px, transparent 12px) right 18px bottom 18px / 26px 26px no-repeat;
}

.game-home-art-battleship {
    background: linear-gradient(135deg, #0f172a, #0f766e);
}

.game-home-art-battleship::before {
    inset: 10px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.18) 0 10%, transparent 11%),
        linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.24)),
        rgba(15, 23, 42, 0.3);
}

.game-home-art-battleship::after {
    inset: 0;
    background:
        linear-gradient(180deg, transparent 20px, rgba(245, 158, 11, 0.96) 20px 58px, transparent 58px) left 18px top 0 / 14px 100% no-repeat,
        linear-gradient(180deg, transparent 12px, rgba(226, 232, 240, 0.96) 12px 46px, transparent 46px) center top 0 / 16px 100% no-repeat,
        linear-gradient(180deg, transparent 28px, rgba(16, 185, 129, 0.94) 28px 66px, transparent 66px) right 18px top 0 / 14px 100% no-repeat,
        radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.98) 0 7%, transparent 8%);
}

.game-home-art-tetris {
    background: linear-gradient(135deg, #1d4ed8, #0f172a);
}

.game-home-art-tetris::before {
    inset: 14px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(56, 189, 248, 0.95) 0 24%, transparent 24% 30%, rgba(251, 191, 36, 0.95) 30% 54%, transparent 54% 60%, rgba(52, 211, 153, 0.95) 60% 84%, transparent 84%),
        linear-gradient(180deg, transparent 0 24%, rgba(248, 113, 113, 0.95) 24% 48%, transparent 48% 54%, rgba(168, 85, 247, 0.95) 54% 78%, transparent 78%);
}

.game-home-art-tetris::after {
    inset: 14px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.08) 24% 26%, transparent 26% 54%, rgba(255, 255, 255, 0.08) 54% 56%, transparent 56% 84%, rgba(255, 255, 255, 0.08) 84% 86%, transparent 86%),
        linear-gradient(180deg, transparent 24%, rgba(255, 255, 255, 0.08) 24% 26%, transparent 26% 48%, rgba(255, 255, 255, 0.08) 48% 50%, transparent 50% 78%, rgba(255, 255, 255, 0.08) 78% 80%, transparent 80%);
}

.game-home-art-pacman {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.16), transparent 18%),
        linear-gradient(135deg, #2563eb, #1e3a8a);
}

.game-home-art-pacman::before {
    inset: 0;
    background: transparent;
}

.game-home-art-pacman::after {
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 30deg, #facc15 0 310deg, transparent 310deg 360deg);
}

.game-home-art-solitaire {
    background: linear-gradient(135deg, #065f46, #0f172a);
}

.game-home-art-solitaire::before {
    left: 14px;
    top: 18px;
    width: 30px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.92));
    box-shadow:
        18px 10px 0 0 rgba(255, 255, 255, 0.96),
        36px 20px 0 0 rgba(255, 255, 255, 0.94);
}

.game-home-art-solitaire::after {
    inset: 0;
    background:
        radial-gradient(circle at 28px 32px, rgba(190, 24, 93, 0.96) 0 5px, transparent 6px),
        radial-gradient(circle at 46px 42px, rgba(190, 24, 93, 0.96) 0 5px, transparent 6px),
        linear-gradient(45deg, transparent 47%, rgba(15, 23, 42, 0.9) 47% 53%, transparent 53%) 56px 52px / 14px 14px no-repeat,
        linear-gradient(135deg, transparent 47%, rgba(15, 23, 42, 0.9) 47% 53%, transparent 53%) 56px 52px / 14px 14px no-repeat;
}

.game-home-art-connect4 {
    background: linear-gradient(135deg, #1d4ed8, #0f172a);
}

.game-home-art-connect4::before {
    inset: 11px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 16% 18%, rgba(15, 23, 42, 0.92) 0 8%, transparent 9%),
        radial-gradient(circle at 50% 18%, rgba(15, 23, 42, 0.92) 0 8%, transparent 9%),
        radial-gradient(circle at 84% 18%, rgba(15, 23, 42, 0.92) 0 8%, transparent 9%),
        radial-gradient(circle at 16% 50%, rgba(248, 250, 252, 0.96) 0 8%, transparent 9%),
        radial-gradient(circle at 50% 50%, rgba(248, 250, 252, 0.96) 0 8%, transparent 9%),
        radial-gradient(circle at 84% 50%, rgba(248, 250, 252, 0.96) 0 8%, transparent 9%),
        radial-gradient(circle at 16% 82%, rgba(251, 191, 36, 0.96) 0 8%, transparent 9%),
        radial-gradient(circle at 50% 82%, rgba(248, 113, 113, 0.96) 0 8%, transparent 9%),
        radial-gradient(circle at 84% 82%, rgba(251, 191, 36, 0.96) 0 8%, transparent 9%),
        linear-gradient(180deg, rgba(96, 165, 250, 0.96), rgba(37, 99, 235, 0.92));
}

.game-home-art-rhythm {
    background: linear-gradient(180deg, #0f172a, #1d4ed8 58%, #0f766e);
}

.game-home-art-rhythm::before {
    inset: 8px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 32%, transparent 32% 34%, rgba(255, 255, 255, 0.1) 34% 66%, transparent 66% 68%, rgba(255, 255, 255, 0.1) 68%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.16), rgba(15, 23, 42, 0.16)),
        rgba(15, 23, 42, 0.42);
}

.game-home-art-rhythm::after {
    inset: 0;
    background:
        linear-gradient(180deg, transparent 16px, rgba(34, 197, 94, 0.96) 16px 27px, transparent 27px) 12px 0 / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 10px, rgba(56, 189, 248, 0.96) 10px 21px, transparent 21px) 25px 0 / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 22px, rgba(251, 191, 36, 0.98) 22px 33px, transparent 33px) 38px 0 / 10px 100% no-repeat,
        linear-gradient(0deg, transparent 12px, rgba(255, 255, 255, 0.92) 12px 16px, transparent 16px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0 10px, transparent 11px);
}

.game-home-art-flappy {
    background:
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.24), transparent 14%),
        linear-gradient(180deg, #7dd3fc, #2563eb 62%, #0f172a);
}

.game-home-art-flappy::before {
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0 12px, rgba(21, 128, 61, 0.96) 12px 54px, transparent 54px) left 10px top 0 / 14px 100% no-repeat,
        linear-gradient(180deg, transparent 22px, rgba(34, 197, 94, 0.96) 22px 74px, transparent 74px) right 12px top 0 / 14px 100% no-repeat;
}

.game-home-art-flappy::after {
    left: 27px;
    top: 28px;
    width: 18px;
    height: 18px;
    border-radius: 50% 50% 45% 45%;
    background:
        radial-gradient(circle at 68% 34%, rgba(15, 23, 42, 0.98) 0 7%, transparent 8%),
        linear-gradient(180deg, #fde68a, #f59e0b);
    box-shadow:
        10px 4px 0 -4px rgba(255, 255, 255, 0.96),
        inset -8px 0 0 rgba(248, 113, 113, 0.78);
}

.game-home-art-flowfree {
    background: linear-gradient(135deg, #0f766e, #1d4ed8);
}

.game-home-art-flowfree::before {
    inset: 8px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 20% 22%, #fb7185 0 8%, transparent 9%),
        radial-gradient(circle at 76% 22%, #fb7185 0 8%, transparent 9%),
        radial-gradient(circle at 24% 76%, #38bdf8 0 8%, transparent 9%),
        radial-gradient(circle at 76% 76%, #38bdf8 0 8%, transparent 9%),
        linear-gradient(90deg, transparent 18%, rgba(255, 255, 255, 0.14) 18% 20%, transparent 20% 40%, rgba(255, 255, 255, 0.14) 40% 42%, transparent 42% 62%, rgba(255, 255, 255, 0.14) 62% 64%, transparent 64%),
        linear-gradient(transparent 18%, rgba(255, 255, 255, 0.14) 18% 20%, transparent 20% 40%, rgba(255, 255, 255, 0.14) 40% 42%, transparent 42% 62%, rgba(255, 255, 255, 0.14) 62% 64%, transparent 64%);
}

.game-home-art-flowfree::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 16px, rgba(251, 113, 133, 0.92) 16px 22px, transparent 22px) center / 100% 100% no-repeat,
        linear-gradient(180deg, transparent 29px, rgba(56, 189, 248, 0.92) 29px 35px, transparent 35px) center / 100% 100% no-repeat;
}

.game-home-art-magicsort {
    background: linear-gradient(135deg, #312e81, #0f766e);
}

.game-home-art-magicsort::before {
    inset: 10px 11px;
    background:
        linear-gradient(180deg, transparent 0 12px, rgba(251, 191, 36, 0.96) 12px 21px, rgba(56, 189, 248, 0.96) 21px 30px, rgba(244, 114, 182, 0.96) 30px 39px, transparent 39px) left top / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 0 15px, rgba(52, 211, 153, 0.96) 15px 24px, rgba(251, 191, 36, 0.96) 24px 33px, rgba(56, 189, 248, 0.96) 33px 42px, transparent 42px) center top / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 0 10px, rgba(244, 114, 182, 0.96) 10px 19px, rgba(52, 211, 153, 0.96) 19px 28px, rgba(251, 191, 36, 0.96) 28px 37px, transparent 37px) right top / 10px 100% no-repeat;
}

.game-home-art-magicsort::after {
    inset: 9px 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28)) left top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28)) 10px top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28)) center top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28)) calc(100% - 12px) top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28)) right top / 2px 100% no-repeat;
}

.game-home-art-mentalmath {
    background: linear-gradient(135deg, #1d4ed8, #14b8a6);
}

.game-home-art-mentalmath::before {
    inset: 7px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent),
        rgba(15, 23, 42, 0.24);
}

.game-home-art-mentalmath::after {
    inset: 0;
    content: '8 x 7';
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.game-home-art-candycrush {
    background: linear-gradient(135deg, #ec4899, #2563eb);
}

.game-home-art-candycrush::before {
    inset: 12px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 20% 22%, #facc15 0 11%, transparent 12%),
        radial-gradient(circle at 52% 28%, #38bdf8 0 11%, transparent 12%),
        radial-gradient(circle at 76% 26%, #34d399 0 11%, transparent 12%),
        radial-gradient(circle at 28% 68%, #fb7185 0 11%, transparent 12%),
        radial-gradient(circle at 70% 70%, #f97316 0 11%, transparent 12%),
        rgba(15, 23, 42, 0.14);
}

.game-home-art-candycrush::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 22px, rgba(255, 255, 255, 0.12) 22px 24px, transparent 24px 42px, rgba(255, 255, 255, 0.12) 42px 44px, transparent 44px) center / 100% 100% no-repeat,
        linear-gradient(transparent 22px, rgba(255, 255, 255, 0.12) 22px 24px, transparent 24px 42px, rgba(255, 255, 255, 0.12) 42px 44px, transparent 44px) center / 100% 100% no-repeat;
}

.game-home-art-harborrun {
    background: linear-gradient(180deg, #7dd3fc, #1d4ed8 55%, #0f172a);
}

.game-home-art-harborrun::before {
    inset: 0;
    background:
        radial-gradient(circle at 20% 78%, rgba(255, 255, 255, 0.18) 0 7%, transparent 8%),
        radial-gradient(circle at 52% 66%, rgba(255, 255, 255, 0.18) 0 6%, transparent 7%),
        radial-gradient(circle at 78% 28%, rgba(251, 191, 36, 0.9) 0 8%, transparent 9%),
        linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 0.16) 70% 73%, transparent 73% 76%, rgba(255, 255, 255, 0.12) 76% 79%, transparent 79%);
}

.game-home-art-harborrun::after {
    left: 18px;
    bottom: 10px;
    width: 18px;
    height: 22px;
    border-radius: 10px 10px 4px 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), transparent 24%),
        linear-gradient(180deg, #f97316, #7c2d12);
    box-shadow:
        16px -24px 0 -4px rgba(107, 114, 128, 0.98),
        23px -18px 0 -9px rgba(148, 163, 184, 0.98);
}

.game-home-art-stacker {
    background: linear-gradient(135deg, #0f172a, #0f766e);
}

.game-home-art-stacker::before {
    left: 12px;
    right: 12px;
    bottom: 10px;
    height: 10px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(212, 161, 93, 0.98), rgba(139, 90, 43, 0.96));
    box-shadow:
        0 -12px 0 0 rgba(202, 107, 74, 0.98),
        4px -24px 0 0 rgba(126, 168, 90, 0.98);
}

.game-home-art-stacker::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 15px, rgba(83, 45, 18, 0.35) 15px 17px, transparent 17px) 0 calc(100% - 10px) / 100% 10px no-repeat,
        linear-gradient(90deg, transparent 21px, rgba(83, 45, 18, 0.35) 21px 23px, transparent 23px) 0 calc(100% - 22px) / 100% 10px no-repeat,
        linear-gradient(90deg, transparent 26px, rgba(83, 45, 18, 0.35) 26px 28px, transparent 28px) 0 calc(100% - 34px) / 100% 10px no-repeat;
}

.game-home-art-minesweeper::before {
    inset: 0;
    content: '🏴‍☠️';
    display: grid;
    place-items: center;
    font-size: 2.4rem;
    color: #f8fafc;
    text-shadow: 0 6px 14px rgba(15, 23, 42, 0.35);
}

.game-home-art-minesweeper::after {
    left: 18px;
    right: 18px;
    bottom: 11px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    opacity: 1;
}

.game-home-art-snake::before {
    inset: 13px 12px 17px 12px;
    border-radius: 999px 999px 14px 14px;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
        radial-gradient(circle at 66% 28%, rgba(255, 255, 255, 0.95) 0 8%, transparent 9%),
        radial-gradient(circle at 34% 30%, rgba(15, 23, 42, 0.96) 0 3%, transparent 4%),
        radial-gradient(circle at 66% 30%, rgba(15, 23, 42, 0.96) 0 3%, transparent 4%),
        linear-gradient(180deg, rgba(94, 234, 212, 0.98), rgba(14, 165, 233, 0.92));
}

.game-home-art-snake::after {
    width: 14px;
    height: 14px;
    right: 8px;
    bottom: 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f59e0b, #b45309);
    box-shadow: -20px 2px 0 0 rgba(15, 23, 42, 0.22);
}

.game-home-art-2048::before {
    inset: 10px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.22) 0 48%, transparent 48% 52%, rgba(15, 23, 42, 0.22) 52% 100%),
        linear-gradient(rgba(15, 23, 42, 0.22) 0 48%, transparent 48% 52%, rgba(15, 23, 42, 0.22) 52% 100%);
}

.game-home-art-2048::after {
    inset: 0;
    content: '2048';
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    display: grid;
    place-items: center;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

.game-home-art-aim::before {
    inset: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255, 255, 255, 0.86) 28% 33%, transparent 34%),
        radial-gradient(circle at 50% 50%, transparent 0 50%, rgba(255, 255, 255, 0.66) 50% 55%, transparent 56%),
        radial-gradient(circle at 50% 50%, rgba(30, 64, 175, 0.92), rgba(15, 23, 42, 0.98));
}

.game-home-art-aim::after {
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 16px, rgba(255, 255, 255, 0.92) 16px 17px, transparent 18px),
        linear-gradient(0deg, transparent 49%, rgba(255, 255, 255, 0.92) 49% 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.92) 49% 51%, transparent 51%);
}

.game-home-art-tictactoe::before {
    inset: 9px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(255, 255, 255, 0.84) 31% 35%, transparent 35% 65%, rgba(255, 255, 255, 0.84) 65% 69%, transparent 69%),
        linear-gradient(transparent 31%, rgba(255, 255, 255, 0.84) 31% 35%, transparent 35% 65%, rgba(255, 255, 255, 0.84) 65% 69%, transparent 69%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%);
}

.game-home-art-tictactoe::after {
    inset: 0;
    background:
        linear-gradient(45deg, transparent 46%, #fbbf24 46% 54%, transparent 54%) left 14px top 13px / 14px 14px no-repeat,
        linear-gradient(135deg, transparent 46%, #fbbf24 46% 54%, transparent 54%) left 14px top 13px / 14px 14px no-repeat,
        linear-gradient(45deg, transparent 46%, #fb7185 46% 54%, transparent 54%) left 30px top 31px / 14px 14px no-repeat,
        linear-gradient(135deg, transparent 46%, #fb7185 46% 54%, transparent 54%) left 30px top 31px / 14px 14px no-repeat,
        radial-gradient(circle, transparent 5px, #67e8f9 5px 7px, transparent 8px) right 10px top 14px / 18px 18px no-repeat,
        radial-gradient(circle, transparent 5px, #67e8f9 5px 7px, transparent 8px) right 12px bottom 10px / 18px 18px no-repeat;
}

.game-home-art-battleship::before {
    inset: 8px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.16) 24% 26%, transparent 26% 49%, rgba(255,255,255,0.16) 49% 51%, transparent 51% 74%, rgba(255,255,255,0.16) 74% 76%, transparent 76%),
        linear-gradient(transparent 24%, rgba(255,255,255,0.16) 24% 26%, transparent 26% 49%, rgba(255,255,255,0.16) 49% 51%, transparent 51% 74%, rgba(255,255,255,0.16) 74% 76%, transparent 76%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.34), rgba(8, 47, 73, 0.42)),
        rgba(15, 23, 42, 0.32);
}

.game-home-art-battleship::after {
    inset: 0;
    background:
        linear-gradient(180deg, transparent 16px, rgba(226, 232, 240, 0.98) 16px 38px, transparent 38px) center / 20px 100% no-repeat,
        linear-gradient(90deg, transparent 12px, rgba(148, 163, 184, 0.96) 12px 32px, transparent 32px) center 31px / 100% 8px no-repeat,
        radial-gradient(circle at 41px 16px, rgba(248, 113, 113, 0.98) 0 4px, transparent 5px),
        radial-gradient(circle at 18px 40px, rgba(255, 255, 255, 0.96) 0 3px, transparent 4px),
        radial-gradient(circle at 48px 44px, rgba(250, 204, 21, 0.96) 0 2px, transparent 3px);
}

.game-home-art-tetris::before {
    inset: 8px;
    border-radius: 12px;
    background:
        linear-gradient(90deg, transparent 18%, rgba(255,255,255,0.09) 18% 20%, transparent 20% 40%, rgba(255,255,255,0.09) 40% 42%, transparent 42% 62%, rgba(255,255,255,0.09) 62% 64%, transparent 64%),
        linear-gradient(transparent 18%, rgba(255,255,255,0.09) 18% 20%, transparent 20% 40%, rgba(255,255,255,0.09) 40% 42%, transparent 42% 62%, rgba(255,255,255,0.09) 62% 64%, transparent 64%),
        linear-gradient(180deg, rgba(15,23,42,0.16), rgba(15,23,42,0.28));
}

.game-home-art-tetris::after {
    inset: 0;
    background:
        linear-gradient(90deg, #38bdf8 0 50%, transparent 50%) 10px 10px / 24px 12px no-repeat,
        linear-gradient(180deg, #38bdf8 0 50%, transparent 50%) 22px 10px / 12px 24px no-repeat,
        linear-gradient(90deg, #fbbf24 0 75%, transparent 75%) 24px 22px / 24px 12px no-repeat,
        linear-gradient(180deg, #34d399 0 100%, transparent 100%) 10px 34px / 12px 12px no-repeat,
        linear-gradient(90deg, #a855f7 0 100%, transparent 100%) 22px 34px / 24px 12px no-repeat,
        linear-gradient(180deg, #fb7185 0 100%, transparent 100%) 34px 34px / 12px 12px no-repeat;
}

.game-home-art-pacman::before {
    inset: 0;
    background: transparent;
}

.game-home-art-pacman::after {
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 58% 32%, #0f172a 0 2px, transparent 2.4px),
        conic-gradient(from 34deg at 50% 50%, transparent 0 58deg, #facc15 58deg 302deg, transparent 302deg 360deg);
}

.game-home-art-flappy::before {
    inset: 0;
    background:
        radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.26), transparent 14%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.96), rgba(37, 99, 235, 0.88));
}

.game-home-art-flappy::after {
    left: 18px;
    top: 18px;
    width: 18px;
    height: 16px;
    border-radius: 58% 42% 46% 54% / 44% 46% 54% 56%;
    background:
        radial-gradient(circle at 64% 34%, rgba(15, 23, 42, 0.98) 0 2px, transparent 3px),
        linear-gradient(180deg, #ef4444, #b91c1c 62%, #f59e0b 62% 100%);
    box-shadow:
        inset -4px 0 0 rgba(14, 165, 233, 0.28),
        9px 4px 0 -6px rgba(250, 204, 21, 0.98),
        -3px -5px 0 -5px rgba(15, 23, 42, 0.98);
}

.game-home-art-flowfree::before {
    inset: 7px;
    border-radius: 12px;
    background:
        radial-gradient(circle at 22% 22%, #fb7185 0 7%, transparent 8%),
        radial-gradient(circle at 78% 22%, #fb7185 0 7%, transparent 8%),
        radial-gradient(circle at 22% 78%, #38bdf8 0 7%, transparent 8%),
        radial-gradient(circle at 78% 78%, #38bdf8 0 7%, transparent 8%),
        radial-gradient(circle at 50% 50%, #34d399 0 7%, transparent 8%),
        linear-gradient(90deg, transparent 16%, rgba(255,255,255,0.14) 16% 18%, transparent 18% 40%, rgba(255,255,255,0.14) 40% 42%, transparent 42% 64%, rgba(255,255,255,0.14) 64% 66%, transparent 66%),
        linear-gradient(transparent 16%, rgba(255,255,255,0.14) 16% 18%, transparent 18% 40%, rgba(255,255,255,0.14) 40% 42%, transparent 42% 64%, rgba(255,255,255,0.14) 64% 66%, transparent 66%);
}

.game-home-art-flowfree::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 14px, rgba(251, 113, 133, 0.94) 14px 19px, transparent 19px) top 14px center / 100% 100% no-repeat,
        linear-gradient(180deg, transparent 28px, rgba(56, 189, 248, 0.94) 28px 33px, transparent 33px) left 14px center / 100% 100% no-repeat,
        linear-gradient(90deg, transparent 28px, rgba(52, 211, 153, 0.94) 28px 33px, transparent 33px) center 30px / 100% 100% no-repeat;
}

.game-home-art-magicsort::before {
    inset: 8px 9px;
    background:
        linear-gradient(180deg, transparent 0 10px, rgba(251,191,36,0.98) 10px 18px, rgba(56,189,248,0.98) 18px 26px, rgba(244,114,182,0.98) 26px 34px, transparent 34px) left top / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 0 15px, rgba(52,211,153,0.98) 15px 23px, rgba(251,191,36,0.98) 23px 31px, rgba(56,189,248,0.98) 31px 39px, transparent 39px) center top / 10px 100% no-repeat,
        linear-gradient(180deg, transparent 0 8px, rgba(244,114,182,0.98) 8px 16px, rgba(52,211,153,0.98) 16px 24px, rgba(251,191,36,0.98) 24px 32px, transparent 32px) right top / 10px 100% no-repeat;
}

.game-home-art-magicsort::after {
    inset: 8px 9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.32)) left top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.32)) 10px top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.32)) center top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.32)) calc(100% - 12px) top / 2px 100% no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.32)) right top / 2px 100% no-repeat,
        radial-gradient(circle at 50% 100%, rgba(255,255,255,0.22) 0 30%, transparent 31%);
}

.game-home-art-candycrush::before {
    inset: 8px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 24% 24%, #facc15 0 8%, transparent 9%),
        radial-gradient(circle at 52% 28%, #38bdf8 0 8%, transparent 9%),
        radial-gradient(circle at 76% 24%, #34d399 0 8%, transparent 9%),
        radial-gradient(circle at 28% 72%, #fb7185 0 8%, transparent 9%),
        radial-gradient(circle at 70% 72%, #f97316 0 8%, transparent 9%),
        radial-gradient(circle at 50% 50%, #fde68a 0 6%, transparent 7%),
        rgba(15, 23, 42, 0.14);
}

.game-home-art-candycrush::after {
    inset: 0;
    background:
        linear-gradient(90deg, transparent 16px, rgba(255,255,255,0.12) 16px 18px, transparent 18px 32px, rgba(255,255,255,0.12) 32px 34px, transparent 34px) center / 100% 100% no-repeat,
        linear-gradient(transparent 16px, rgba(255,255,255,0.12) 16px 18px, transparent 18px 32px, rgba(255,255,255,0.12) 32px 34px, transparent 34px) center / 100% 100% no-repeat,
        radial-gradient(circle at 24% 24%, rgba(255,255,255,0.28) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 24%, rgba(255,255,255,0.28) 0 3px, transparent 4px);
}

.game-home-art-harborrun::before {
    inset: 0;
    background:
        radial-gradient(circle at 18% 80%, rgba(255,255,255,0.18) 0 6%, transparent 7%),
        radial-gradient(circle at 76% 28%, rgba(107,114,128,0.96) 0 7%, transparent 8%),
        linear-gradient(180deg, transparent 70%, rgba(255,255,255,0.16) 70% 73%, transparent 73% 76%, rgba(255,255,255,0.12) 76% 79%, transparent 79%);
}

.game-home-art-harborrun::after {
    left: 18px;
    bottom: 10px;
    width: 18px;
    height: 22px;
    border-radius: 10px 10px 4px 4px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), transparent 24%),
        linear-gradient(180deg, #f97316, #7c2d12);
    box-shadow: 18px -18px 0 -6px rgba(148,163,184,0.98);
}

.game-home-art-2048 {
    background: url("assets/games/game-2048.svg") center / cover no-repeat;
}

.game-home-art-2048::before,
.game-home-art-2048::after,
.game-home-art-battleship::before,
.game-home-art-battleship::after,
.game-home-art-minesweeper::before,
.game-home-art-minesweeper::after,
.game-home-art-tictactoe::before,
.game-home-art-tictactoe::after,
.game-home-art-pacman::before,
.game-home-art-pacman::after,
.game-home-art-snake::before,
.game-home-art-snake::after,
.game-home-art-connect4::before,
.game-home-art-connect4::after,
.game-home-art-tetris::before,
.game-home-art-tetris::after {
    content: none;
}

.game-home-art-battleship {
    background: url("assets/games/game-battleship.svg") center / cover no-repeat;
}

.game-home-art-minesweeper {
    background: url("assets/games/game-minesweeper.svg") center / cover no-repeat;
}

.game-home-art-tictactoe {
    background: url("assets/games/game-tictactoe.svg") center / cover no-repeat;
}

.game-home-art-pacman {
    background: url("assets/games/game-baie-man.svg") center / cover no-repeat;
}

.game-home-art-snake {
    background: url("assets/games/game-snake.svg") center / cover no-repeat;
}

.game-home-art-connect4 {
    background: url("assets/games/game-coin4.svg") center / cover no-repeat;
}

.game-home-art-tetris {
    background: url("assets/games/game-baietris.svg") center / cover no-repeat;
}

.game-home-art-pong,
.game-home-art-sudoku,
.game-home-art-aim,
.game-home-art-memory,
.game-home-art-solitaire,
.game-home-art-rhythm,
.game-home-art-flappy,
.game-home-art-flowfree,
.game-home-art-magicsort,
.game-home-art-mentalmath,
.game-home-art-candycrush,
.game-home-art-harborrun,
.game-home-art-stacker {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.game-home-art-pong {
    background-image: url("assets/games/game-pong.svg");
}

.game-home-art-sudoku {
    background-image: url("assets/games/game-sudoku.svg");
}

.game-home-art-aim {
    background-image: url("assets/games/game-aim.svg");
}

.game-home-art-memory {
    background-image: url("assets/games/game-memory.svg");
}

.game-home-art-solitaire {
    background-image: url("assets/games/game-solitaire.svg");
}

.game-home-art-rhythm {
    background-image: url("assets/games/game-rhythm.svg");
}

.game-home-art-flappy {
    background-image: url("assets/games/game-flappy.svg");
}

.game-home-art-flowfree {
    background-image: url("assets/games/game-flowfree.svg");
}

.game-home-art-magicsort {
    background-image: url("assets/games/game-magicsort.svg");
}

.game-home-art-mentalmath {
    background-image: url("assets/games/game-mentalmath.svg");
}

.game-home-art-candycrush {
    background-image: url("assets/games/game-candycrush.svg");
}

.game-home-art-harborrun {
    background-image: url("assets/games/game-harborrun.svg");
}

.game-home-art-stacker {
    background-image: url("assets/games/game-stacker.svg");
}

.game-home-art-pong::before,
.game-home-art-pong::after,
.game-home-art-sudoku::before,
.game-home-art-sudoku::after,
.game-home-art-aim::before,
.game-home-art-aim::after,
.game-home-art-memory::before,
.game-home-art-memory::after,
.game-home-art-solitaire::before,
.game-home-art-solitaire::after,
.game-home-art-rhythm::before,
.game-home-art-rhythm::after,
.game-home-art-flappy::before,
.game-home-art-flappy::after,
.game-home-art-flowfree::before,
.game-home-art-flowfree::after,
.game-home-art-magicsort::before,
.game-home-art-magicsort::after,
.game-home-art-mentalmath::before,
.game-home-art-mentalmath::after,
.game-home-art-candycrush::before,
.game-home-art-candycrush::after,
.game-home-art-harborrun::before,
.game-home-art-harborrun::after,
.game-home-art-stacker::before,
.game-home-art-stacker::after {
    content: none;
}

.game-home-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
}

.minesweeper-card,
.snake-card,
.pong-card,
.sudoku-card,
.game-2048-card,
.aim-card,
.memory-card,
.tictactoe-card,
.battleship-card,
.tetris-card,
.pacman-card,
.solitaire-card,
.connect4-card,
.rhythm-card,
.flappy-card,
.flowfree-card,
.magicsort-card,
.mentalmath-card,
.candycrush-card,
.harborrun-card,
.stacker-card {
    width: min(100%, 760px);
    padding: 16px;
    height: 100%;
    min-height: 0;
    overflow: auto;
}

.minesweeper-card {
    position: relative;
    width: min(100%, 760px);
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(251, 191, 36, 0.16), transparent 16%),
        radial-gradient(circle at 84% 16%, rgba(125, 211, 252, 0.2), transparent 18%),
        radial-gradient(circle at 20% 82%, rgba(134, 239, 172, 0.14), transparent 18%),
        linear-gradient(180deg, rgba(31, 64, 104, 0.98), rgba(14, 30, 56, 0.99));
}

.minesweeper-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 8% 22%, rgba(255, 255, 255, 0.12), transparent 10%),
        radial-gradient(circle at 90% 24%, rgba(255, 255, 255, 0.09), transparent 12%),
        radial-gradient(circle at 16% 76%, rgba(15, 23, 42, 0.34), transparent 18%),
        radial-gradient(circle at 84% 74%, rgba(15, 23, 42, 0.3), transparent 20%),
        radial-gradient(circle at 34% 64%, rgba(15, 23, 42, 0.22), transparent 12%),
        radial-gradient(circle at 70% 58%, rgba(15, 23, 42, 0.24), transparent 14%);
    opacity: 0.95;
}

.minesweeper-card::after {
    content: '';
    position: absolute;
    inset: 14px;
    pointer-events: none;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at 18% 18%, rgba(252, 211, 77, 0.18) 0 1.4%, transparent 1.5%),
        radial-gradient(circle at 84% 22%, rgba(252, 211, 77, 0.16) 0 1.3%, transparent 1.4%),
        radial-gradient(circle at 76% 82%, rgba(252, 211, 77, 0.14) 0 1.2%, transparent 1.3%),
        radial-gradient(circle at 14% 72%, rgba(252, 211, 77, 0.12) 0 1.1%, transparent 1.2%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%, transparent 76%, rgba(15, 23, 42, 0.16));
}

.snake-card {
    position: relative;
    width: min(100%, 760px);
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 16%, rgba(167, 243, 208, 0.14), transparent 16%),
        radial-gradient(circle at 86% 18%, rgba(103, 232, 249, 0.16), transparent 18%),
        radial-gradient(circle at 18% 84%, rgba(253, 224, 71, 0.12), transparent 16%),
        linear-gradient(180deg, rgba(17, 94, 89, 0.94), rgba(8, 47, 73, 0.98));
}

.snake-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.1), transparent 10%),
        radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.08), transparent 10%),
        radial-gradient(circle at 30% 70%, rgba(15, 23, 42, 0.2), transparent 14%),
        radial-gradient(circle at 72% 72%, rgba(15, 23, 42, 0.22), transparent 16%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%);
}

.sudoku-card {
    position: relative;
    width: min(100%, 760px);
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(253, 224, 71, 0.14), transparent 16%),
        radial-gradient(circle at 86% 16%, rgba(147, 197, 253, 0.16), transparent 18%),
        radial-gradient(circle at 18% 84%, rgba(191, 219, 254, 0.12), transparent 16%),
        linear-gradient(180deg, rgba(30, 64, 175, 0.94), rgba(15, 23, 42, 0.98));
}

.sudoku-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 26%, rgba(255, 255, 255, 0.1), transparent 10%),
        radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.08), transparent 12%),
        linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.06) 46% 47%, transparent 47% 100%),
        linear-gradient(45deg, transparent 0 58%, rgba(255, 255, 255, 0.04) 58% 59%, transparent 59% 100%);
}

.solitaire-card {
    --solitaire-card-width: 84px;
    --solitaire-column-width: calc(var(--solitaire-card-width) + 12px);
}

.memory-card {
    overflow: hidden;
}

#gamesView {
    width: 100%;
    height: 100%;
    padding-top: 92px;
}

#mathView {
    width: 100%;
    height: 100%;
    padding-top: 92px;
}

#musicView {
    width: 100%;
    height: 100%;
    padding-top: 92px;
}

.math-layout {
    width: min(1080px, 100%);
    margin: 0 auto;
    height: min(740px, calc(100vh - 88px));
}

.music-layout {
    width: min(1280px, 100%);
    margin: 0 auto;
    height: min(740px, calc(100vh - 88px));
}

.math-panel {
    display: none;
    width: 100%;
    height: 100%;
    padding: 28px;
    overflow: auto;
}

.math-panel-active {
    display: block;
    animation: fadeInUp 0.45s ease;
}

.music-panel {
    display: none;
    width: 100%;
    height: 100%;
    padding: 28px;
    overflow: auto;
}

.music-panel-active {
    display: block;
    animation: fadeInUp 0.45s ease;
}

.music-home-card {
    text-align: center;
}

.music-home-copy {
    max-width: 700px;
    margin: 0 auto 26px;
}

.music-home-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 280px));
    justify-content: center;
    gap: 16px;
}

.music-home-tile {
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 18px 16px;
    border-radius: 28px;
    color: var(--text-color);
    background:
        linear-gradient(180deg, rgba(45, 212, 191, 0.14), rgba(15, 23, 42, 0.36)),
        rgba(15, 23, 42, 0.56);
    border: 1px solid rgba(244, 114, 182, 0.2);
}

.music-home-art {
    width: 92px;
    height: 92px;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 20px 34px -24px rgba(15, 23, 42, 0.78);
}

.music-home-art-piano {
    background: linear-gradient(135deg, #2dd4bf, #22d3ee 52%, #f472b6);
}

.music-home-art-piano::before {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 42px;
    border-radius: 14px;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.95) 0 14%,
            rgba(15, 23, 42, 0.95) 14% 19%,
            rgba(255, 255, 255, 0.95) 19% 33%,
            rgba(15, 23, 42, 0.95) 33% 38%,
            rgba(255, 255, 255, 0.95) 38% 52%,
            rgba(255, 255, 255, 0.95) 52% 66%,
            rgba(15, 23, 42, 0.95) 66% 71%,
            rgba(255, 255, 255, 0.95) 71% 85%,
            rgba(15, 23, 42, 0.95) 85% 90%,
            rgba(255, 255, 255, 0.95) 90% 100%);
}

.music-home-art-piano::after {
    content: '♪';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 2.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.music-home-title {
    font-size: 1.35rem;
    font-weight: 800;
}

.music-home-subtitle {
    color: var(--muted-text);
}

.piano-card {
    width: min(1240px, 100%);
    background:
        radial-gradient(circle at top left, rgba(45, 212, 191, 0.16), transparent 32%),
        radial-gradient(circle at top right, rgba(244, 114, 182, 0.18), transparent 30%),
        rgba(30, 41, 59, 0.92);
}

.piano-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 190px));
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
    justify-content: center;
}

.piano-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(45, 212, 191, 0.24);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.piano-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.piano-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
}

.piano-face {
    min-height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.9), rgba(244, 114, 182, 0.9));
    color: #082f49;
    font-weight: 800;
    box-shadow: 0 16px 26px -18px rgba(15, 23, 42, 0.82);
}

.piano-stage {
    padding: 22px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(45, 212, 191, 0.18);
}

.piano-copy {
    text-align: center;
    margin-bottom: 20px;
}

.piano-help {
    margin: 0;
}

.piano-keyboard {
    --white-key-count: 15;
    --white-key-gap: 10px;
    position: relative;
    width: 100%;
    min-height: 290px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.04),
        0 26px 50px -36px rgba(15, 23, 42, 0.96);
    user-select: none;
    touch-action: none;
}

.piano-white-keys {
    display: grid;
    grid-template-columns: repeat(var(--white-key-count), minmax(0, 1fr));
    gap: var(--white-key-gap);
}

.piano-black-keys {
    position: absolute;
    inset: 14px 14px auto 14px;
    height: 172px;
    pointer-events: none;
}

.piano-key {
    border: none;
    cursor: pointer;
}

.piano-key:focus-visible {
    outline: 3px solid rgba(45, 212, 191, 0.65);
    outline-offset: 2px;
}

.piano-key-white {
    position: relative;
    min-height: 250px;
    padding: 16px 10px;
    border-radius: 0 0 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #ffffff, #e2e8f0 70%, #cbd5e1);
    color: #0f172a;
    box-shadow:
        inset 0 0 0 1px rgba(148, 163, 184, 0.28),
        0 10px 16px -14px rgba(15, 23, 42, 0.75);
}

.piano-key-black {
    position: absolute;
    top: 0;
    width: calc((100% - (var(--white-key-gap) * (var(--white-key-count) - 1))) / var(--white-key-count));
    height: 172px;
    padding: 12px 6px;
    border-radius: 0 0 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #334155, #0f172a 60%, #020617);
    color: #e2e8f0;
    box-shadow:
        inset 0 0 0 1px rgba(148, 163, 184, 0.08),
        0 14px 24px -18px rgba(15, 23, 42, 0.94);
    pointer-events: auto;
}

.piano-key.is-active {
    transform: translateY(3px);
}

.piano-key-white.is-active {
    background: linear-gradient(180deg, #fef3c7, #fbcfe8 78%, #f9a8d4);
}

.piano-key-black.is-active {
    background: linear-gradient(180deg, #67e8f9, #0f172a 62%, #020617);
}

.piano-key-note {
    font-weight: 800;
    font-size: 0.98rem;
}

.piano-key-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.76;
}

.math-hero {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.math-calculator-shell,
.math-tool-card {
    background: rgba(6, 10, 20, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 22px;
    padding: 22px;
}

.calculator-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.calculator-key {
    min-height: 58px;
}

.calculator-key-equals {
    grid-column: span 2;
}

.math-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.math-form-grid {
    margin-bottom: 16px;
}

.math-result {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(99, 102, 241, 0.16);
    color: var(--text-color);
    min-height: 54px;
}

.minesweeper-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.minesweeper-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.minesweeper-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.minesweeper-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: var(--primary-color);
}

.minesweeper-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(59, 130, 246, 0.72));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 18px 34px -24px rgba(99, 102, 241, 0.75);
}

.minesweeper-center-stack {
    width: 100%;
}

.minesweeper-table {
    position: relative;
    z-index: 1;
    width: min(100%, min(56vh, 520px));
    margin: 0 auto;
    overflow: hidden;
    border-radius: 22px;
    box-shadow:
        0 28px 48px -34px rgba(8, 47, 73, 0.9),
        0 0 0 1px rgba(186, 230, 253, 0.08);
}

.minesweeper-table.is-menu-open > :not(.minesweeper-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.minesweeper-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.minesweeper-menu-overlay.hidden {
    display: none;
}

.minesweeper-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.minesweeper-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.minesweeper-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 16% 18%, rgba(251, 191, 36, 0.16), transparent 21%),
        radial-gradient(circle at 82% 20%, rgba(125, 211, 252, 0.18), transparent 24%),
        radial-gradient(circle at 50% 84%, rgba(134, 239, 172, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(28, 58, 92, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.minesweeper-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fcd34d;
}

.minesweeper-menu-title {
    margin: 0;
    font-size: 1.9rem;
    color: #f8fafc;
}

.minesweeper-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.minesweeper-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.minesweeper-board {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 18%, rgba(253, 224, 71, 0.08), transparent 16%),
        radial-gradient(circle at 84% 20%, rgba(125, 211, 252, 0.1), transparent 20%),
        linear-gradient(180deg, rgba(56, 189, 248, 0.08), rgba(15, 23, 42, 0.22)),
        rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(125, 211, 252, 0.18);
    width: 100%;
    margin: 0;
    transform-origin: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.minesweeper-board.is-shaking {
    animation: boardShake 0.52s ease;
}

.minesweeper-board.is-rumbling {
    animation: boardRumble 0.24s ease;
}

.minesweeper-cell {
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.26), rgba(59, 130, 246, 0.14));
    color: var(--text-color);
    font-size: clamp(0.58rem, 0.88vw, 0.78rem);
    font-weight: 800;
    padding: 0;
    display: grid;
    place-items: center;
    user-select: none;
    overflow: hidden;
    transition: transform 0.18s ease, filter 0.18s ease, background 0.2s ease, border-color 0.2s ease;
}

.minesweeper-cell-label {
    position: relative;
    z-index: 2;
}

.minesweeper-cell:hover {
    transform: translateY(0);
    filter: brightness(1.06);
}

.minesweeper-cell.is-pattern-alt {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.14));
}

.minesweeper-cell.is-revealed {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(99, 102, 241, 0.12);
    transform: none;
    filter: none;
}

.minesweeper-cell.is-newly-revealed {
    animation: revealCell 0.04s linear both;
}

.reveal-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(99, 102, 241, 0.55) 60%, transparent 72%);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
}

.reveal-particle-a {
    animation: revealParticleA 0.34s ease-out forwards;
}

.reveal-particle-b {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(59, 130, 246, 0.52) 60%, transparent 72%);
    animation: revealParticleB 0.32s ease-out forwards;
}

.reveal-particle-c {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(250, 204, 21, 0.5) 60%, transparent 72%);
    animation: revealParticleC 0.3s ease-out forwards;
}

.reveal-particle-d {
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    animation: revealParticleD 0.28s ease-out forwards;
}

.minesweeper-cell.is-flagged {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.28), rgba(234, 88, 12, 0.18));
    animation: flagPulse 0.22s ease;
}

.minesweeper-cell.is-flagged .minesweeper-cell-label {
    color: #fde68a;
    font-size: clamp(1.28rem, 1.82vw, 1.58rem);
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.24);
}

.minesweeper-cell.is-mine {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.32), rgba(127, 29, 29, 0.22));
}

.minesweeper-cell.is-mine .minesweeper-cell-label,
.minesweeper-cell.is-exploded .minesweeper-cell-label {
    color: #fee2e2;
    font-size: clamp(1.08rem, 1.54vw, 1.34rem);
    text-shadow: 0 0 12px rgba(248, 113, 113, 0.22);
}

.minesweeper-cell.is-exploded {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.55), rgba(153, 27, 27, 0.34));
    border-color: rgba(248, 113, 113, 0.42);
    animation: mineBlast 0.45s ease both;
}

.minesweeper-cell-value-1 {
    color: #93c5fd;
}

.minesweeper-cell-value-2 {
    color: #86efac;
}

.minesweeper-cell-value-3 {
    color: #fca5a5;
}

.minesweeper-cell-value-4 {
    color: #c4b5fd;
}

.minesweeper-cell-value-5 {
    color: #f9a8d4;
}

.minesweeper-cell-value-6 {
    color: #67e8f9;
}

.minesweeper-cell-value-7 {
    color: #fde68a;
}

.minesweeper-cell-value-8 {
    color: #e5e7eb;
}

.minesweeper-cell.is-revealed[class*="minesweeper-cell-value-"] {
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.minesweeper-help {
    margin: 0 0 10px;
    font-size: 0.84rem;
    text-align: center;
    color: #e0f2fe !important;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(8, 47, 73, 0.42);
    position: relative;
    z-index: 1;
}

.game-over-card {
    background: rgba(30, 41, 59, 0.78);
    backdrop-filter: none;
    text-align: center;
    animation: gameOverPop 0.22s ease-out;
}

.snake-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.snake-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.snake-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.snake-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: var(--primary-color);
}

.snake-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.9), rgba(99, 102, 241, 0.8));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 18px 34px -24px rgba(59, 130, 246, 0.72);
}

.snake-help {
    margin: 0 0 10px;
    text-align: center;
    color: #d1fae5;
    font-size: 0.84rem;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(8, 47, 73, 0.42);
    position: relative;
    z-index: 1;
}

.snake-table {
    position: relative;
    z-index: 1;
    width: min(100%, min(62vh, 580px));
    margin: 0 auto;
    overflow: hidden;
    border-radius: 22px;
    box-shadow:
        0 28px 48px -34px rgba(8, 47, 73, 0.9),
        0 0 0 1px rgba(167, 243, 208, 0.08);
}

.snake-table.is-menu-open > :not(.snake-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.snake-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.snake-menu-overlay.hidden {
    display: none;
}

.snake-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.snake-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.snake-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(167, 243, 208, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(103, 232, 249, 0.18), transparent 22%),
        radial-gradient(circle at 26% 78%, rgba(253, 224, 71, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(20, 83, 75, 0.98), rgba(8, 47, 73, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.snake-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #a7f3d0;
}

.snake-menu-title {
    margin: 0;
    font-size: 1.9rem;
    color: #f8fafc;
}

.snake-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.snake-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.snake-board {
    --snake-gap: 3px;
    --snake-padding: 6px;
    --snake-size: 14;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: var(--snake-padding);
    border-radius: 20px;
    position: relative;
    touch-action: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 12%, rgba(167, 243, 208, 0.16), transparent 18%),
        radial-gradient(circle at 78% 18%, rgba(103, 232, 249, 0.12), transparent 16%),
        linear-gradient(180deg, rgba(45, 212, 191, 0.12), rgba(15, 23, 42, 0.24)),
        rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(45, 212, 191, 0.18);
}

.snake-grid,
.snake-overlay {
    position: absolute;
    inset: var(--snake-padding);
}

.snake-grid {
    display: grid;
    grid-template-columns: repeat(var(--snake-size), minmax(0, 1fr));
    gap: var(--snake-gap);
}

.snake-bg-cell {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.2), rgba(37, 99, 235, 0.11));
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.snake-bg-cell-alt {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.16), rgba(14, 116, 144, 0.11));
}

.snake-overlay {
    pointer-events: none;
}

.snake-entity {
    position: absolute;
    padding: 2px;
    box-sizing: border-box;
    will-change: transform;
    transition: transform 0.15s linear;
}

.snake-entity::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.snake-entity::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.snake-entity-head::before {
    transform: var(--snake-head-rotation, rotate(90deg));
    transition: transform 0.15s linear;
    background:
        radial-gradient(circle at 35% 36%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
        radial-gradient(circle at 65% 36%, rgba(255, 255, 255, 0.95) 0 7%, transparent 8%),
        radial-gradient(circle at 35% 37%, rgba(15, 23, 42, 0.96) 0 2.6%, transparent 3.8%),
        radial-gradient(circle at 65% 37%, rgba(15, 23, 42, 0.96) 0 2.6%, transparent 3.8%),
        radial-gradient(circle at 50% 74%, rgba(255, 255, 255, 0.22) 0 14%, transparent 15%),
        radial-gradient(circle at 50% 56%, rgba(103, 232, 249, 0.34) 0 28%, transparent 29%),
        linear-gradient(180deg, rgba(94, 234, 212, 0.98), rgba(14, 165, 233, 0.9));
    border-radius: 48% 48% 44% 44%;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.24);
}

.snake-entity-head::after {
    transform: var(--snake-head-rotation, rotate(90deg));
    transition: transform 0.15s linear;
    background:
        radial-gradient(circle at 24% 82%, rgba(94, 234, 212, 0.95) 0 10%, transparent 11%),
        radial-gradient(circle at 38% 91%, rgba(56, 189, 248, 0.88) 0 9%, transparent 10%),
        radial-gradient(circle at 50% 96%, rgba(103, 232, 249, 0.9) 0 8%, transparent 9%),
        radial-gradient(circle at 62% 91%, rgba(56, 189, 248, 0.88) 0 9%, transparent 10%),
        radial-gradient(circle at 76% 82%, rgba(94, 234, 212, 0.95) 0 10%, transparent 11%);
    clip-path: polygon(12% 64%, 88% 64%, 88% 100%, 12% 100%);
    opacity: 0.9;
    filter: drop-shadow(0 2px 3px rgba(14, 165, 233, 0.22));
}

.snake-entity-body::before {
    background:
        radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.18) 0 7%, transparent 8%),
        radial-gradient(circle at 72% 28%, rgba(255, 255, 255, 0.12) 0 7%, transparent 8%),
        linear-gradient(180deg, rgba(103, 232, 249, 0.94), rgba(8, 145, 178, 0.84));
    border-radius: 44%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.snake-entity-food::before {
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 248, 200, 0.95) 0 10%, transparent 11%),
        radial-gradient(circle at 50% 54%, rgba(255, 246, 173, 0.98) 0 26%, rgba(245, 158, 11, 0.88) 45%, rgba(180, 83, 9, 0.84) 68%),
        linear-gradient(180deg, rgba(180, 83, 9, 0.92), rgba(120, 53, 15, 0.9));
    border-radius: 38% 38% 46% 46%;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.32);
}

.snake-cell-food-pop::before {
    animation: snakeFoodPulse 0.24s ease-out;
}

.pong-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(186, 230, 253, 0.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.26), transparent 24%),
        linear-gradient(180deg, rgba(28, 58, 92, 0.98), rgba(14, 30, 56, 0.98));
}

.pong-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.24), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.pong-topbar,
.pong-mode-switch,
.pong-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.pong-topbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pong-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pong-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #115e59;
    margin-bottom: 4px;
}

.pong-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: #111827;
}

.pong-help {
    margin: 0 0 10px;
    text-align: center;
    color: #e0f2fe !important;
    font-size: 0.84rem;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(8, 47, 73, 0.42);
}

.pong-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.pong-mode-button {
    min-width: 128px;
    background: rgba(240, 249, 255, 0.82);
    color: #0f172a;
    border: 1px solid rgba(125, 211, 252, 0.78);
    box-shadow: 0 12px 24px -22px rgba(8, 47, 73, 0.56);
}

.pong-mode-button:hover {
    background: rgba(8, 47, 73, 0.88);
    color: #f8fafc;
    border-color: rgba(125, 211, 252, 0.82);
    box-shadow: 0 16px 28px -22px rgba(8, 47, 73, 0.72);
    filter: none;
}

.pong-mode-button.is-active {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(14, 165, 233, 0.9));
    color: white;
    border-color: rgba(186, 230, 253, 0.45);
    box-shadow: 0 18px 30px -24px rgba(14, 116, 144, 0.66);
}

.pong-mode-button.is-active:hover {
    filter: none;
}

.pong-table {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.pong-table.is-menu-open > :not(.pong-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.pong-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.pong-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.pong-menu-overlay.hidden {
    display: none;
}

.pong-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.pong-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(186, 230, 253, 0.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.26), transparent 24%),
        linear-gradient(180deg, rgba(28, 58, 92, 0.98), rgba(14, 30, 56, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.pong-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #a5f3fc;
}

.pong-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #f8fafc;
}

.pong-menu-text {
    margin: 0;
    color: #dbeafe !important;
    opacity: 1;
    font-weight: 600;
    line-height: 1.45;
}

.pong-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.pong-board {
    width: calc(100% - 12px);
    aspect-ratio: 1.92 / 1;
    margin: 12px auto 0;
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 14%),
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.12), transparent 12%),
        radial-gradient(circle at 32% 64%, rgba(255, 255, 255, 0.05), transparent 14%),
        linear-gradient(180deg, rgba(14, 116, 144, 0.28), rgba(8, 47, 73, 0.42) 42%, rgba(15, 23, 42, 0.97));
    border: 2px solid rgba(186, 230, 253, 0.72);
    box-shadow:
        0 20px 44px -30px rgba(8, 47, 73, 0.9),
        0 0 0 1px rgba(125, 211, 252, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pong-countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 3;
    font-size: clamp(3.8rem, 11vw, 6.8rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: rgba(240, 249, 255, 0.96);
    text-shadow: 0 0 22px rgba(56, 189, 248, 0.34);
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.02) 48%, transparent 72%);
    pointer-events: none;
}

.pong-countdown:not(.hidden) {
    animation: pongCountdownReveal 0.52s cubic-bezier(0.2, 0.9, 0.22, 1);
}

@keyframes pongMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.pong-center-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.72), rgba(125, 211, 252, 0.52));
    opacity: 0.78;
    box-shadow: 0 0 14px rgba(125, 211, 252, 0.14);
}

.pong-paddle,
.pong-ball {
    position: absolute;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.pong-paddle {
    width: 24px;
    height: 104px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 116, 144, 0.98), rgba(8, 47, 73, 0.9));
    border: 2px solid rgba(224, 242, 254, 0.82);
    box-shadow: 0 0 20px rgba(8, 47, 73, 0.22);
}

.pong-paddle-ai {
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.98), rgba(6, 95, 70, 0.9));
    border-color: rgba(167, 243, 208, 0.82);
    box-shadow: 0 0 20px rgba(8, 47, 73, 0.24);
}

.pong-ball {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(125, 211, 252, 0.9), rgba(2, 132, 199, 0.94) 38%, rgba(8, 47, 73, 0.98) 74%);
    border: 2px solid rgba(240, 249, 255, 0.92);
    box-shadow: 0 0 22px rgba(8, 47, 73, 0.34);
}

@keyframes pongCountdownReveal {
    0% {
        opacity: 0;
        transform: scale(0.62);
        filter: blur(10px);
    }

    55% {
        opacity: 1;
        transform: scale(1.06);
        filter: blur(0);
    }

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

.sudoku-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.sudoku-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 220px));
    gap: 8px;
    justify-content: center;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.sudoku-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sudoku-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.sudoku-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    color: var(--primary-color);
}

.sudoku-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(59, 130, 246, 0.8));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 18px 34px -24px rgba(34, 197, 94, 0.62);
}

.sudoku-face-secondary {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(96, 165, 250, 0.8));
    box-shadow: 0 18px 34px -24px rgba(59, 130, 246, 0.62);
}

.sudoku-help {
    margin: 0 0 10px;
    text-align: center;
    color: #dbeafe;
    font-size: 0.84rem;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(15, 23, 42, 0.42);
    position: relative;
    z-index: 1;
}

.sudoku-table {
    position: relative;
    z-index: 1;
    width: min(100%, min(58vh, 540px));
    margin: 0 auto;
    overflow: hidden;
    border-radius: 22px;
    box-shadow:
        0 28px 48px -34px rgba(15, 23, 42, 0.9),
        0 0 0 1px rgba(191, 219, 254, 0.1);
}

.sudoku-table.is-menu-open > :not(.sudoku-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.sudoku-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.sudoku-menu-overlay.hidden {
    display: none;
}

.sudoku-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.sudoku-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.sudoku-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(253, 224, 71, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(147, 197, 253, 0.18), transparent 22%),
        radial-gradient(circle at 28% 78%, rgba(191, 219, 254, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(30, 64, 175, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.sudoku-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fde68a;
}

.sudoku-menu-title {
    margin: 0;
    font-size: 1.9rem;
    color: #f8fafc;
}

.sudoku-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.sudoku-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.sudoku-board {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 3px;
    border-radius: 20px;
    background:
        radial-gradient(circle at top, rgba(253, 224, 71, 0.1), transparent 42%),
        linear-gradient(180deg, rgba(96, 165, 250, 0.1), rgba(15, 23, 42, 0.22)),
        rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(147, 197, 253, 0.18);
}

.sudoku-cell {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.12));
    color: var(--text-color);
    font-size: clamp(0.92rem, 1.85vw, 1.45rem);
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0;
    user-select: none;
}

.sudoku-cell:hover {
    filter: brightness(1.06);
}

.sudoku-cell.is-prefilled {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.42), rgba(14, 116, 144, 0.24));
    border-color: rgba(125, 211, 252, 0.18);
    color: #f8fafc;
}

.sudoku-cell.is-selected {
    border-color: rgba(125, 211, 252, 0.68);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.5), 0 0 0 2px rgba(125, 211, 252, 0.18);
}

.sudoku-cell.is-matching-value {
    background: linear-gradient(180deg, rgba(30, 64, 175, 0.58), rgba(30, 58, 138, 0.4));
    border-color: rgba(147, 197, 253, 0.52);
    color: #f8fbff;
}

.sudoku-cell.is-prefilled.is-matching-value {
    background: linear-gradient(180deg, rgba(23, 37, 84, 0.84), rgba(30, 64, 175, 0.5));
    color: #f8fafc;
}

.sudoku-cell.is-related {
    background: linear-gradient(180deg, rgba(45, 212, 191, 0.2), rgba(14, 116, 144, 0.13));
}

.sudoku-cell.is-prefilled.is-related {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.46), rgba(20, 184, 166, 0.22));
}

.sudoku-cell.is-conflict {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.34), rgba(153, 27, 27, 0.2));
    border-color: rgba(248, 113, 113, 0.32);
    color: #fff1f2;
}

.sudoku-cell.is-prefilled.is-conflict {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.5), rgba(69, 10, 10, 0.4));
}

.sudoku-cell.is-solved {
    animation: sudokuSolvedPulse 0.4s ease;
}

.sudoku-cell.is-correct {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.34), rgba(21, 128, 61, 0.2));
    border-color: rgba(74, 222, 128, 0.38);
    animation: sudokuCorrectPulse 0.28s ease;
}

.sudoku-cell.is-wrong {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.42), rgba(153, 27, 27, 0.24));
    border-color: rgba(248, 113, 113, 0.48);
    animation: sudokuWrongPulse 0.28s ease;
}

.sudoku-cell.is-border-right {
    margin-right: 6px;
}

.sudoku-cell.is-border-bottom {
    margin-bottom: 6px;
}

.games-placeholder-card {
    text-align: center;
}

.game-2048-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 243, 176, 0.18), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(96, 165, 250, 0.18), transparent 24%),
        radial-gradient(circle at 28% 74%, rgba(251, 191, 36, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(29, 41, 74, 0.98), rgba(15, 23, 42, 0.98));
}

.game-2048-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.1), transparent 18%),
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.06), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 34%);
}

.game-2048-topbar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.game-2048-counter-block {
    padding: 10px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top, rgba(255, 243, 176, 0.16), transparent 46%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94));
    border: 1px solid rgba(251, 191, 36, 0.22);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 16px 28px -24px rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(10px);
}

.game-2048-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fcd34d;
    margin-bottom: 4px;
}

.game-2048-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: #f8fafc;
}

.game-2048-face {
    display: none;
}

.game-2048-help {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    text-align: center;
    color: #e2e8f0;
    font-size: 0.84rem;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(15, 23, 42, 0.34);
}

.game-2048-table {
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.game-2048-table.is-menu-open > :not(.game-2048-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.game-2048-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px;
    background: rgba(15, 23, 42, 0.16);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.game-2048-menu-overlay.hidden {
    display: none;
}

.game-2048-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.game-2048-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 243, 176, 0.18), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(96, 165, 250, 0.18), transparent 24%),
        radial-gradient(circle at 28% 74%, rgba(251, 191, 36, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(29, 41, 74, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.game-2048-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fde68a;
}

.game-2048-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #f8fafc;
}

.game-2048-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.game-2048-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.game-2048-board {
    --game-2048-gap: 10px;
    --game-2048-padding: 10px;
    width: min(100%, min(58vh, 560px));
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: var(--game-2048-padding);
    border-radius: 20px;
    position: relative;
    touch-action: none;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(251, 191, 36, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(99, 102, 241, 0.1), rgba(15, 23, 42, 0.22)),
        rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(99, 102, 241, 0.16);
}

.game-2048-background,
.game-2048-tiles {
    position: absolute;
    inset: var(--game-2048-padding);
}

.game-2048-background {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--game-2048-gap);
}

.game-2048-tiles {
    pointer-events: none;
}

.game-2048-cell,
.game-2048-tile {
    border-radius: 18px;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: clamp(1.05rem, 2.2vw, 1.7rem);
    line-height: 1;
    color: white;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    min-width: 0;
    min-height: 0;
    transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
    will-change: transform;
}

.game-2048-empty {
    background: rgba(15, 23, 42, 0.46);
}

.game-2048-tile {
    position: absolute;
    aspect-ratio: auto;
    transition: transform 0.12s ease-out, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.game-2048-cell-small {
    font-size: clamp(0.9rem, 1.7vw, 1.35rem);
}

.game-2048-cell-xsmall {
    font-size: clamp(0.72rem, 1.35vw, 1.05rem);
    letter-spacing: -0.03em;
}

.game-2048-cell-fresh {
    animation: game2048TilePop 0.16s ease-out;
}

.game-2048-value-2 { background: linear-gradient(180deg, #bfdbfe, #93c5fd); color: #0f172a; }
.game-2048-value-4 { background: linear-gradient(180deg, #93c5fd, #60a5fa); color: #0f172a; }
.game-2048-value-8 { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.game-2048-value-16 { background: linear-gradient(180deg, #3b82f6, #2563eb); }
.game-2048-value-32 { background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.game-2048-value-64 { background: linear-gradient(180deg, #1d4ed8, #1e40af); }
.game-2048-value-128 { background: linear-gradient(180deg, #1e40af, #1e3a8a); }
.game-2048-value-256 { background: linear-gradient(180deg, #1e3a8a, #172554); }
.game-2048-value-512 { background: linear-gradient(180deg, #172554, #14213d); }
.game-2048-value-1024 { background: linear-gradient(180deg, #14213d, #0f172a); }
.game-2048-value-2048 { background: linear-gradient(180deg, #0f172a, #070b16); }

.aim-topbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.aim-card {
    overflow: hidden;
}

.aim-counter-block {
    padding: 9px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aim-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.aim-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: var(--primary-color);
}

.aim-face {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.96), rgba(37, 99, 235, 0.88));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 18px 34px -24px rgba(37, 99, 235, 0.72);
}

.aim-help {
    margin: 0 0 8px;
    text-align: center;
    color: var(--muted-text);
    font-size: 0.8rem;
}

.aim-duration-switch {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 10px;
    flex-wrap: wrap;
}

.aim-duration-button {
    min-width: 76px;
    border-radius: 999px;
    padding: 8px 14px;
}

.aim-duration-button.is-active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.94), rgba(37, 99, 235, 0.88));
    color: white;
    border-color: rgba(191, 219, 254, 0.24);
    box-shadow: 0 16px 28px -24px rgba(37, 99, 235, 0.54);
}

.memory-topbar,
.tictactoe-topbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tictactoe-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 243, 176, 0.14), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(96, 165, 250, 0.18), transparent 24%),
        radial-gradient(circle at 28% 74%, rgba(249, 115, 22, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(26, 35, 64, 0.98), rgba(12, 18, 36, 0.98));
}

.tictactoe-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,0.08), transparent 18%),
        radial-gradient(circle at 82% 22%, rgba(255,255,255,0.05), transparent 18%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 34%);
}

.tictactoe-topbar,
.tictactoe-help,
.tictactoe-mode-switch,
.tictactoe-table,
.tictactoe-board {
    position: relative;
    z-index: 1;
}

.memory-counter-block,
.tictactoe-counter-block {
    padding: 10px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top, rgba(251, 191, 36, 0.14), transparent 44%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.94));
    border: 1px solid rgba(249, 115, 22, 0.2);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 16px 28px -24px rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(10px);
}

.memory-counter-label,
.tictactoe-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fdba74;
    margin-bottom: 4px;
}

.memory-counter-value,
.tictactoe-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    color: #f8fafc;
}

.memory-face,
.tictactoe-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.memory-face {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.92), rgba(59, 130, 246, 0.82));
    box-shadow: 0 18px 34px -24px rgba(16, 185, 129, 0.62);
}

.tictactoe-face {
    display: none;
}

.memory-help,
.tictactoe-help,
.battleship-help {
    margin: 0 0 10px;
    text-align: center;
    color: #e2e8f0;
    font-size: 0.84rem;
}

.tictactoe-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.tictactoe-mode-button {
    min-width: 128px;
    background: rgba(15, 23, 42, 0.62);
    color: #e2e8f0;
    border: 1px solid rgba(96, 165, 250, 0.22);
}

.tictactoe-mode-button.is-active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.96), rgba(59, 130, 246, 0.88));
    color: white;
    border-color: rgba(191, 219, 254, 0.22);
    box-shadow: 0 16px 28px -24px rgba(249, 115, 22, 0.56);
}

.tictactoe-table {
    margin-top: 12px;
}

.tictactoe-table.is-menu-open > :not(.tictactoe-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.tictactoe-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 28px;
    background: rgba(15, 23, 42, 0.16);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.tictactoe-menu-overlay.hidden {
    display: none;
}

.tictactoe-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.tictactoe-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 243, 176, 0.14), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(96, 165, 250, 0.18), transparent 24%),
        radial-gradient(circle at 28% 74%, rgba(249, 115, 22, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(26, 35, 64, 0.98), rgba(12, 18, 36, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.tictactoe-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fdba74;
}

.tictactoe-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #f8fafc;
}

.tictactoe-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.tictactoe-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.battleship-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.battleship-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.battleship-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.battleship-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    color: var(--primary-color);
}

.battleship-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.92), rgba(249, 115, 22, 0.82));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 18px 34px -24px rgba(14, 165, 233, 0.62);
}

.battleship-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.battleship-board-shell {
    text-align: center;
    padding: 14px 12px 16px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 40%),
        radial-gradient(circle at bottom right, rgba(249, 115, 22, 0.12), transparent 36%),
        rgba(15, 23, 42, 0.44);
    border: 1px solid rgba(125, 211, 252, 0.14);
}

.battleship-board {
    width: min(100%, 350px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.18), transparent 14%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.14), transparent 12%),
        linear-gradient(180deg, rgba(56, 189, 248, 0.2), rgba(8, 47, 73, 0.34)),
        rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.battleship-cell {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.16), transparent 18%),
        linear-gradient(180deg, rgba(14, 165, 233, 0.34), rgba(8, 47, 73, 0.42));
    border: 1px solid rgba(125, 211, 252, 0.18);
    color: white;
    font-weight: 800;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.battleship-cell.has-ship {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.18), transparent 18%),
        linear-gradient(180deg, rgba(45, 212, 191, 0.28), rgba(8, 47, 73, 0.42));
}

.battleship-cell.is-hit {
    background:
        radial-gradient(circle at center, rgba(251, 191, 36, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(248, 113, 113, 0.5), rgba(127, 29, 29, 0.32));
}

.battleship-cell.is-miss {
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.14), transparent 32%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.3), rgba(8, 47, 73, 0.28));
}

.battleship-cell.is-miss::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(224, 242, 254, 0.92);
    box-shadow: 0 0 10px rgba(224, 242, 254, 0.18);
    display: block;
    margin: auto;
}

.battleship-ship {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9px;
    position: relative;
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.98), rgba(120, 53, 15, 0.96));
    box-shadow:
        inset 0 0 0 1px rgba(255, 248, 220, 0.16),
        0 8px 12px -10px rgba(15, 23, 42, 0.72);
}

.battleship-ship::before {
    content: '';
    position: absolute;
    inset: 22% 18%;
    border-radius: 999px;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(92, 51, 23, 0.34) 16% 20%, transparent 20% 42%, rgba(92, 51, 23, 0.34) 42% 46%, transparent 46% 68%, rgba(92, 51, 23, 0.34) 68% 72%, transparent 72% 100%),
        linear-gradient(180deg, rgba(255, 248, 220, 0.22), rgba(15, 23, 42, 0.12));
}

.battleship-ship.is-single {
    border-radius: 50%;
}

.battleship-ship.is-head-horizontal {
    border-radius: 999px 8px 8px 999px;
}

.battleship-ship.is-tail-horizontal {
    border-radius: 8px 999px 999px 8px;
}

.battleship-ship.is-body-horizontal {
    border-radius: 8px;
}

.battleship-ship.is-head-vertical {
    border-radius: 999px 999px 8px 8px;
}

.battleship-ship.is-tail-vertical {
    border-radius: 8px 8px 999px 999px;
}

.battleship-ship.is-body-vertical {
    border-radius: 8px;
}

.battleship-cell.is-hit .battleship-ship {
    background:
        radial-gradient(circle at center, rgba(248, 113, 113, 0.92) 0 24%, rgba(127, 29, 29, 0.82) 25% 54%, rgba(100, 16, 16, 0.92) 55% 100%),
        linear-gradient(180deg, rgba(245, 158, 11, 0.76), rgba(120, 53, 15, 0.78));
}

.battleship-cell.is-hit .battleship-ship::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(45deg, transparent 45%, rgba(255, 241, 242, 0.96) 45% 55%, transparent 55%),
        linear-gradient(135deg, transparent 45%, rgba(255, 241, 242, 0.96) 45% 55%, transparent 55%);
}

.tetris-topbar,
.pacman-topbar,
.solitaire-topbar,
.connect4-topbar,
.rhythm-topbar,
.flappy-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.tetris-counter-block,
.pacman-counter-block,
.solitaire-counter-block,
.connect4-counter-block,
.rhythm-counter-block,
.flappy-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tetris-counter-label,
.pacman-counter-label,
.solitaire-counter-label,
.connect4-counter-label,
.rhythm-counter-label,
.flappy-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.tetris-counter-value,
.pacman-counter-value,
.solitaire-counter-value,
.connect4-counter-value,
.rhythm-counter-value,
.flappy-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    color: var(--primary-color);
}

.tetris-face,
.pacman-face,
.solitaire-face,
.connect4-face,
.rhythm-face,
.flappy-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.tetris-face {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.92), rgba(168, 85, 247, 0.82));
    box-shadow: 0 18px 34px -24px rgba(59, 130, 246, 0.62);
}

.pacman-face {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.92), rgba(234, 88, 12, 0.84));
    box-shadow: 0 18px 34px -24px rgba(250, 204, 21, 0.46);
}

.solitaire-face {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.92), rgba(37, 99, 235, 0.82));
    box-shadow: 0 18px 34px -24px rgba(5, 150, 105, 0.52);
}

.connect4-face {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(251, 191, 36, 0.88));
    box-shadow: 0 18px 34px -24px rgba(37, 99, 235, 0.54);
}

.rhythm-topbar {
    grid-template-columns: repeat(5, minmax(100px, 1fr));
}

.rhythm-face {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.96), rgba(249, 115, 22, 0.88));
    box-shadow: 0 18px 34px -24px rgba(14, 165, 233, 0.54);
}

.tetris-help,
.pacman-help,
.solitaire-help,
.connect4-help,
.rhythm-help,
.flappy-help {
    margin: 0 0 14px;
    text-align: center;
    color: var(--muted-text);
}

.connect4-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.connect4-mode-button,
.chess-mode-button,
.checkers-mode-button {
    min-width: 128px;
}

.connect4-mode-button.is-active,
.chess-mode-button.is-active,
.checkers-mode-button.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(251, 191, 36, 0.88));
    color: white;
    border-color: rgba(191, 219, 254, 0.24);
    box-shadow: 0 16px 28px -24px rgba(37, 99, 235, 0.54);
}

.chess-mode-switch,
.checkers-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.chess-card {
    position: relative;
    width: min(100%, 860px);
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 10%, rgba(255,255,255,0.16), transparent 22%),
        radial-gradient(circle at 84% 18%, rgba(184, 221, 244, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(184, 221, 244, 0.98), rgba(19, 95, 143, 0.97));
}

.chess-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,0.12), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.1), transparent 40%);
}

.chess-topbar,
.chess-help,
.chess-mode-switch {
    padding-inline: 16px;
}

.chess-topbar,
.chess-mode-switch,
.chess-help {
    position: relative;
    z-index: 1;
}

.chess-topbar {
    width: 100%;
    padding-inline: 0;
    margin-bottom: 12px;
    grid-template-columns: repeat(2, minmax(150px, 180px));
    justify-content: center;
}

.chess-counter-block {
    width: 180px;
    background: rgba(240, 249, 255, 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(125, 211, 252, 0.72),
        0 12px 24px -22px rgba(8, 47, 73, 0.6);
    border: 0;
    backdrop-filter: blur(8px);
}

.chess-counter-label {
    color: #0f766e;
}

.chess-counter-value {
    color: #0f172a !important;
}

.chess-mode-switch {
    gap: 12px;
}

.chess-mode-button {
    min-width: 144px;
    background: rgba(240, 249, 255, 0.82);
    color: #f8fafc !important;
    border: 1px solid rgba(125, 211, 252, 0.78);
    box-shadow: 0 12px 24px -22px rgba(8, 47, 73, 0.56);
}

.chess-mode-button:hover {
    background: rgba(8, 47, 73, 0.88);
    color: #f8fafc !important;
    border-color: rgba(125, 211, 252, 0.82);
    box-shadow: 0 16px 28px -22px rgba(8, 47, 73, 0.72);
    filter: none;
}

.chess-mode-button.is-active {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(14, 165, 233, 0.9));
    color: #f8fafc;
    border-color: rgba(186, 230, 253, 0.45);
    box-shadow: 0 18px 30px -24px rgba(14, 116, 144, 0.66);
}

.chess-mode-button.is-active:hover {
    filter: none;
}

.chess-help {
    color: #374151 !important;
    font-weight: 600;
}

.chess-table {
    position: relative;
    z-index: 1;
    margin-top: -8px;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.chess-table.is-menu-open > :not(.chess-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.chess-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.chess-menu-overlay.is-entering {
    animation: chessMenuFadeIn 260ms ease;
}

.chess-menu-overlay.hidden {
    display: none;
}

.chess-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.chess-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 36%),
        radial-gradient(circle at 84% 18%, rgba(184, 221, 244, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(184, 221, 244, 0.98), rgba(19, 95, 143, 0.97));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.chess-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.chess-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.chess-menu-text {
    margin: 0;
    color: #374151 !important;
    opacity: 1;
    font-weight: 600;
    line-height: 1.45;
}

.chess-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes chessMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.connect4-board {
    --connect4-padding: 12px;
    width: min(100%, 540px);
    margin: 0 auto;
    padding: var(--connect4-padding);
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    position: relative;
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(191, 219, 254, 0.16), transparent 38%),
        linear-gradient(180deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.32)),
        rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.connect4-cell {
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    padding: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.92) 0 36%, transparent 37%),
        linear-gradient(180deg, rgba(96, 165, 250, 0.28), rgba(29, 78, 216, 0.18));
    border: 1px solid rgba(148, 163, 184, 0.12);
    position: relative;
    overflow: hidden;
}

.connect4-cell:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
}

.connect4-cell.is-player {
    --connect4-fill: linear-gradient(180deg, #fb7185, #be123c);
}

.connect4-cell.is-ai {
    --connect4-fill: linear-gradient(180deg, #38bdf8, #1d4ed8);
}

.connect4-cell.is-player::before,
.connect4-cell.is-ai::before {
    content: '';
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 248, 220, 0.98) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(255, 220, 120, 0.22) 0 56%, transparent 57%),
        var(--connect4-fill);
    box-shadow:
        inset 0 -8px 10px rgba(15, 23, 42, 0.18),
        inset 0 0 0 2px rgba(255, 243, 176, 0.24),
        0 8px 14px -10px rgba(15, 23, 42, 0.64);
}

.connect4-cell.is-player::after,
.connect4-cell.is-ai::after {
    content: '☠';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 248, 220, 0.98);
    font-size: 1rem;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(15, 23, 42, 0.18),
        0 0 8px rgba(15, 23, 42, 0.24);
}

.connect4-cell.is-drop-target::before,
.connect4-cell.is-drop-target::after {
    opacity: 0;
}

.connect4-drop-piece {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    animation: connect4ColumnDrop 360ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.connect4-drop-piece::before {
    content: '';
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 248, 220, 0.98) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(255, 220, 120, 0.22) 0 56%, transparent 57%),
        var(--connect4-fill);
    box-shadow:
        inset 0 -8px 10px rgba(15, 23, 42, 0.18),
        inset 0 0 0 2px rgba(255, 243, 176, 0.24),
        0 8px 14px -10px rgba(15, 23, 42, 0.64);
}

.connect4-drop-piece.is-player {
    --connect4-fill: linear-gradient(180deg, #fb7185, #be123c);
}

.connect4-drop-piece.is-ai {
    --connect4-fill: linear-gradient(180deg, #38bdf8, #1d4ed8);
}

.connect4-drop-piece-skull {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 248, 220, 0.98);
    font-size: 1rem;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(15, 23, 42, 0.18),
        0 0 8px rgba(15, 23, 42, 0.24);
}

.connect4-cell.is-winning {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22), 0 0 18px rgba(251, 191, 36, 0.24);
}

.connect4-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
}

.connect4-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 14%, rgba(125, 211, 252, 0.24), transparent 18%),
        radial-gradient(circle at 86% 16%, rgba(2, 132, 199, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.connect4-topbar,
.connect4-mode-switch,
.connect4-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.connect4-topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 8px auto 12px;
}

.connect4-counter-block {
    width: 180px;
    min-height: 60px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.connect4-counter-label {
    color: #0f766e;
}

.connect4-counter-value {
    color: #111827;
}

.connect4-help {
    margin: 0 0 10px;
    text-align: center;
    color: #374151 !important;
    font-weight: 600;
}

.connect4-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.connect4-mode-button {
    min-width: 128px;
    background: rgba(240, 249, 255, 0.82);
    color: #0f172a;
    border: 1px solid rgba(125, 211, 252, 0.78);
    box-shadow: 0 12px 24px -22px rgba(8, 47, 73, 0.56);
}

.connect4-mode-button:hover {
    background: rgba(8, 47, 73, 0.88);
    color: #f8fafc;
    border-color: rgba(125, 211, 252, 0.82);
    box-shadow: 0 16px 28px -22px rgba(8, 47, 73, 0.72);
    filter: none;
}

.connect4-mode-button.is-active {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(14, 165, 233, 0.9));
    color: white;
    border-color: rgba(186, 230, 253, 0.45);
    box-shadow: 0 18px 30px -24px rgba(14, 116, 144, 0.66);
}

.connect4-mode-button.is-active:hover {
    filter: none;
}

.connect4-table {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.connect4-table.is-menu-open > :not(.connect4-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.connect4-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.connect4-menu-overlay.is-entering {
    animation: connect4MenuFadeIn 260ms ease;
}

.connect4-menu-overlay.hidden {
    display: none;
}

.connect4-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.connect4-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 36%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.connect4-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.connect4-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.connect4-menu-text {
    margin: 0;
    color: #374151 !important;
    font-weight: 600;
    line-height: 1.45;
}

.connect4-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.connect4-board {
    width: min(100%, 620px);
    margin: 0 auto;
    padding: 14px;
    border-radius: 26px 26px 22px 22px;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18), transparent 18%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.12), transparent 16%),
        radial-gradient(circle at 50% 120%, rgba(8, 47, 73, 0.72), transparent 42%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 18px, rgba(15,23,42,0.05) 18px 36px),
        linear-gradient(180deg, rgba(186, 230, 253, 0.2), transparent 22%),
        linear-gradient(135deg, #082637, #0c4664 28%, #11739a 56%, #0a3552);
    border: 1px solid rgba(56, 189, 248, 0.26);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 20px 40px -30px rgba(15, 23, 42, 0.82);
}

@keyframes connect4MenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.rhythm-board {
    --rhythm-hit-line: 84%;
    position: relative;
    width: min(100%, 700px);
    height: 460px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 12%, rgba(254, 240, 138, 0.18), transparent 16%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.94), rgba(14, 165, 233, 0.72) 46%, rgba(8, 47, 73, 0.96));
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.rhythm-lanes,
.rhythm-target-band,
.rhythm-notes,
.rhythm-pads,
.rhythm-feedback {
    position: absolute;
    inset: 0;
}

.rhythm-lanes { z-index: 2; }
.rhythm-target-band { z-index: 3; }
.rhythm-notes { z-index: 4; }
.rhythm-feedback { z-index: 5; }
.rhythm-pads { z-index: 6; }

.rhythm-lanes {
    display: grid;
    padding: 18px 16px 88px;
    gap: 12px;
}

.rhythm-lane {
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 18%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.3)),
        rgba(14, 165, 233, 0.08);
    backdrop-filter: blur(2px);
}

.rhythm-target-band {
    top: var(--rhythm-hit-line);
    bottom: auto;
    left: 24px;
    right: 24px;
    height: 44px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)),
        rgba(15, 23, 42, 0.22);
    box-shadow:
        inset 0 0 0 2px rgba(255, 248, 220, 0.18),
        0 0 20px rgba(255, 248, 220, 0.14);
}

.rhythm-target-band::before,
.rhythm-target-band::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    border-radius: 999px;
}

.rhythm-target-band::before {
    top: 7px;
    bottom: 7px;
    background: linear-gradient(180deg, rgba(254, 240, 138, 0.16), rgba(255,255,255,0.05));
}

.rhythm-target-band::after {
    top: 16px;
    bottom: 16px;
    left: 18%;
    right: 18%;
    background: rgba(254, 240, 138, 0.88);
    box-shadow: 0 0 14px rgba(254, 240, 138, 0.22);
}

.rhythm-note {
    position: absolute;
    width: min(196px, calc(33.333% - 18px));
    height: 32px;
    border-radius: 16px;
    transform: translateX(-50%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.24),
        0 0 0 1px rgba(15, 23, 42, 0.12),
        0 16px 26px -14px rgba(15, 23, 42, 0.78);
    animation: rhythmNoteFloat 0.22s ease-out;
}

.rhythm-note.lane-0 {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02)),
        linear-gradient(90deg, #4ade80, #16a34a);
}

.rhythm-note.lane-1 {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02)),
        linear-gradient(90deg, #60a5fa, #1d4ed8);
}

.rhythm-note.lane-2 {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02)),
        linear-gradient(90deg, #facc15, #f97316);
}

.rhythm-pads {
    top: auto;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: grid;
    gap: 12px;
}

.rhythm-pad {
    min-height: 52px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%),
        rgba(15, 23, 42, 0.76);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-weight: 800;
    letter-spacing: 0.12em;
    box-shadow: 0 16px 26px -24px rgba(15, 23, 42, 0.84);
}

.rhythm-pad.is-active {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 2px rgba(255, 248, 220, 0.14), 0 0 22px rgba(56, 189, 248, 0.26);
    filter: brightness(1.12);
}

.rhythm-pad.is-success {
    animation: rhythmPadSuccess 240ms ease-out;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), transparent 30%),
        linear-gradient(135deg, rgba(52, 211, 153, 0.42), rgba(14, 165, 233, 0.32)),
        rgba(15, 23, 42, 0.82);
}

.rhythm-pad.is-fail {
    animation: rhythmPadFail 240ms ease-out;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 30%),
        linear-gradient(135deg, rgba(248, 113, 113, 0.34), rgba(127, 29, 29, 0.28)),
        rgba(15, 23, 42, 0.82);
}

.rhythm-feedback {
    pointer-events: none;
}

.rhythm-burst {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.86);
    min-width: 118px;
    padding: 8px 12px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: rhythmBurstPop 620ms ease-out forwards;
    text-shadow: 0 6px 16px rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    box-shadow: 0 16px 28px -22px rgba(15, 23, 42, 0.82);
}

.rhythm-burst.is-perfect {
    color: #fef3c7;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.36), rgba(249, 115, 22, 0.22)), rgba(15, 23, 42, 0.82);
}

.rhythm-burst.is-good {
    color: #dbeafe;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.34), rgba(14, 165, 233, 0.2)), rgba(15, 23, 42, 0.82);
}

.rhythm-burst.is-miss {
    color: #fecaca;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.3), rgba(127, 29, 29, 0.24)), rgba(15, 23, 42, 0.82);
}

.rhythm-board.is-hit-flash::after,
.rhythm-board.is-miss-flash::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 7;
}

.rhythm-board.is-hit-flash::after {
    background: radial-gradient(circle at center, rgba(254,240,138,0.18), transparent 52%);
    animation: rhythmBoardFlashGood 260ms ease-out;
}

.rhythm-board.is-miss-flash::after {
    background: radial-gradient(circle at center, rgba(248,113,113,0.16), transparent 54%);
    animation: rhythmBoardFlashBad 260ms ease-out;
}

.rhythm-sky-glow,
.rhythm-moon,
.rhythm-island,
.rhythm-sea,
.rhythm-ship {
    position: absolute;
    pointer-events: none;
}

.rhythm-sky-glow {
    inset: 0;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,0.26), transparent 12%),
        radial-gradient(circle at 82% 20%, rgba(255,255,255,0.16), transparent 10%);
}

.rhythm-moon {
    right: 34px;
    top: 28px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 34%, rgba(255,255,255,0.98), rgba(254,240,138,0.92) 58%, rgba(250,204,21,0.18) 72%, transparent 73%);
    box-shadow: 0 0 36px rgba(254, 240, 138, 0.24);
}

.rhythm-island {
    bottom: 98px;
    background: linear-gradient(180deg, rgba(15,23,42,0.18), rgba(15,23,42,0.5));
}

.rhythm-island-left {
    left: -12px;
    width: 180px;
    height: 110px;
    clip-path: polygon(0 100%, 18% 62%, 34% 58%, 48% 34%, 64% 42%, 78% 18%, 100% 100%);
}

.rhythm-island-right {
    right: -18px;
    width: 220px;
    height: 124px;
    clip-path: polygon(0 100%, 12% 58%, 28% 52%, 46% 26%, 64% 34%, 78% 16%, 92% 28%, 100% 100%);
}

.rhythm-sea {
    left: 0;
    right: 0;
    bottom: 0;
    height: 118px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), transparent 18%),
        repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, rgba(14,165,233,0.38), rgba(8,47,73,0.92));
}

.rhythm-ship {
    left: 50%;
    bottom: 84px;
    width: 112px;
    height: 82px;
    transform: translateX(-50%);
}

.rhythm-ship::before,
.rhythm-ship::after {
    content: '';
    position: absolute;
}

.rhythm-ship::before {
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 26px;
    border-radius: 18px 18px 10px 10px;
    background: linear-gradient(180deg, #f59e0b, #7c2d12);
}

.rhythm-ship::after {
    left: 54px;
    top: 6px;
    width: 6px;
    height: 46px;
    background: rgba(255,248,220,0.92);
    box-shadow:
        18px 12px 0 -2px rgba(248,250,252,0.9),
        -20px 16px 0 -2px rgba(248,250,252,0.84);
}

@keyframes rhythmBurstPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -64%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -128%) scale(1.08);
    }
}

@keyframes rhythmPadSuccess {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.06); }
    100% { transform: translateY(-2px) scale(1.02); }
}

@keyframes rhythmPadFail {
    0% { transform: translateX(0) scale(1); }
    30% { transform: translateX(-4px) scale(1.01); }
    60% { transform: translateX(4px) scale(1.01); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes rhythmBoardFlashGood {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes rhythmBoardFlashBad {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes rhythmNoteFloat {
    0% {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.flappy-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.24), transparent 24%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
}

.flappy-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.26), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.2), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.flappy-card.games-panel {
    overflow: hidden;
}

.flappy-topbar,
.flappy-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.flappy-topbar {
    grid-template-columns: repeat(2, minmax(150px, 180px));
    justify-content: center;
}

.flappy-counter-block {
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.flappy-counter-label {
    color: #115e59;
}

.flappy-counter-value {
    color: #111827;
}

.flappy-help {
    color: #374151 !important;
    font-weight: 600;
    margin-bottom: 0;
}

.flappy-table {
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.flappy-table.is-menu-open > :not(.flappy-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.flappy-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.flappy-menu-overlay.is-entering {
    animation: flappyMenuFadeIn 260ms ease;
}

.flappy-menu-overlay.hidden {
    display: none;
}

.flappy-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.flappy-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 36%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.flappy-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.flappy-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.flappy-menu-text {
    margin: 0;
    color: #374151 !important;
    opacity: 1;
    font-weight: 600;
    line-height: 1.45;
}

.flappy-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes flappyMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.flappy-board {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 16px 0 0;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 14%),
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.18), transparent 12%),
        radial-gradient(circle at 32% 64%, rgba(255, 255, 255, 0.08), transparent 14%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.98), rgba(56, 189, 248, 0.86) 52%, rgba(15, 23, 42, 0.94));
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-top: 0;
}

.flappy-backdrop,
.flappy-cove,
.flappy-rock-arch,
.flappy-beach,
.flappy-palm {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.flappy-backdrop {
    bottom: 14%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.38));
}

.flappy-backdrop-far {
    left: -4%;
    width: 48%;
    height: 28%;
    clip-path: polygon(0 100%, 8% 72%, 18% 68%, 28% 44%, 40% 56%, 54% 28%, 72% 44%, 88% 18%, 100% 100%);
    opacity: 0.52;
}

.flappy-backdrop-near {
    right: -2%;
    width: 58%;
    height: 34%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.46));
    clip-path: polygon(0 100%, 10% 64%, 22% 58%, 36% 34%, 52% 46%, 68% 22%, 82% 28%, 94% 12%, 100% 100%);
    opacity: 0.68;
}

.flappy-cove {
    left: 18%;
    bottom: 14%;
    width: 30%;
    height: 18%;
    background:
        radial-gradient(circle at 48% 78%, rgba(15, 23, 42, 0.76) 0 34%, transparent 35%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.46), rgba(15, 23, 42, 0.7));
    clip-path: polygon(0 100%, 8% 44%, 20% 18%, 34% 10%, 52% 8%, 70% 16%, 84% 34%, 100% 100%);
    opacity: 0.82;
}

.flappy-rock-arch {
    right: 20%;
    bottom: 14%;
    width: 22%;
    height: 20%;
    background:
        radial-gradient(circle at 50% 76%, rgba(15, 23, 42, 0.96) 0 18%, transparent 19%),
        linear-gradient(180deg, rgba(100, 116, 139, 0.92), rgba(51, 65, 85, 0.96));
    clip-path: polygon(0 100%, 8% 46%, 18% 16%, 34% 4%, 52% 2%, 68% 12%, 84% 30%, 100% 100%, 82% 100%, 76% 58%, 64% 46%, 50% 42%, 36% 48%, 24% 62%, 18% 100%);
    opacity: 0.94;
}

.flappy-beach {
    left: 0;
    right: 0;
    bottom: 14%;
    height: 11%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 24%),
        linear-gradient(180deg, #fde68a, #f59e0b 68%, #b45309);
    clip-path: polygon(0 52%, 8% 44%, 18% 40%, 30% 46%, 42% 58%, 54% 64%, 66% 60%, 78% 48%, 88% 42%, 94% 46%, 97% 58%, 99% 76%, 100% 100%, 0 100%);
}

.flappy-beach::before {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    top: -20%;
    height: 56%;
    background:
        radial-gradient(circle at 14% 88%, rgba(253, 230, 138, 0.98) 0 34%, transparent 35%),
        radial-gradient(circle at 34% 78%, rgba(253, 230, 138, 0.98) 0 28%, transparent 29%),
        radial-gradient(circle at 52% 94%, rgba(253, 230, 138, 0.98) 0 32%, transparent 33%),
        radial-gradient(circle at 72% 82%, rgba(253, 230, 138, 0.98) 0 30%, transparent 31%),
        radial-gradient(circle at 90% 88%, rgba(253, 230, 138, 0.98) 0 34%, transparent 35%);
    opacity: 0.92;
}

.flappy-palm {
    bottom: 14%;
    width: 54px;
    height: 130px;
}

.flappy-palm::before,
.flappy-palm::after {
    content: '';
    position: absolute;
}

.flappy-palm::before {
    left: 22px;
    bottom: 0;
    width: 10px;
    height: 86px;
    background: linear-gradient(180deg, #92400e, #78350f);
    border-radius: 999px;
    transform: skew(-6deg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.flappy-palm::after {
    left: -2px;
    top: 10px;
    width: 58px;
    height: 58px;
    background:
        linear-gradient(24deg, transparent 44%, #16a34a 44% 54%, transparent 54%) center / 100% 100% no-repeat,
        linear-gradient(156deg, transparent 44%, #22c55e 44% 54%, transparent 54%) center / 100% 100% no-repeat,
        linear-gradient(90deg, transparent 44%, #15803d 44% 54%, transparent 54%) center / 100% 100% no-repeat,
        linear-gradient(0deg, transparent 44%, #4ade80 44% 54%, transparent 54%) center / 100% 100% no-repeat;
    border-radius: 50%;
}

.flappy-palm-left {
    left: 44px;
    transform: scale(0.92);
}

.flappy-palm-right {
    right: 58px;
    transform: scale(1.04);
}

.flappy-bird {
    position: absolute;
    width: 52px;
    height: 40px;
    border-radius: 58% 42% 46% 54% / 44% 46% 54% 56%;
    background:
        radial-gradient(circle at 64% 34%, rgba(15, 23, 42, 0.98) 0 8%, transparent 9%),
        radial-gradient(circle at 58% 74%, rgba(255, 255, 255, 0.18), transparent 20%),
        linear-gradient(180deg, #ef4444, #b91c1c 64%, #f59e0b 64% 100%);
    box-shadow:
        inset -10px 0 0 rgba(14, 165, 233, 0.26),
        0 10px 18px -12px rgba(15, 23, 42, 0.74);
    transform-origin: center;
}

.flappy-bird::before,
.flappy-bird::after {
    content: '';
    position: absolute;
}

.flappy-bird::before {
    right: -10px;
    top: 14px;
    width: 18px;
    height: 10px;
    background: linear-gradient(180deg, #facc15, #f97316);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.flappy-bird::after {
    left: 6px;
    top: -6px;
    width: 16px;
    height: 14px;
    background: linear-gradient(180deg, #1e293b, #020617);
    border-radius: 8px 8px 2px 2px;
    box-shadow:
        6px 4px 0 -4px rgba(255, 255, 255, 0.18),
        2px 12px 0 -5px rgba(245, 158, 11, 0.96);
}

.flappy-pipe {
    position: absolute;
    width: 86px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(56, 189, 248, 0.16), transparent 16%, transparent 84%, rgba(56, 189, 248, 0.16)),
        linear-gradient(180deg, rgba(226, 232, 240, 0.98), rgba(148, 163, 184, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.flappy-pipe-top {
    border-radius: 0 0 18px 18px;
}

.flappy-pipe-bottom {
    border-radius: 18px 18px 0 0;
}

.flappy-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 16%),
        linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(15, 23, 42, 0.12)),
        linear-gradient(180deg, #14b8a6, #0f766e 42%, #134e4a);
}

.flappy-splash {
    position: absolute;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.96) 0 24%, rgba(186, 230, 253, 0.88) 25% 62%, rgba(14, 165, 233, 0.12) 63% 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 8px 16px -10px rgba(8, 47, 73, 0.64);
    pointer-events: none;
    animation: flappy-splash-pop 620ms ease-out forwards;
    animation-delay: var(--flappy-splash-delay, 0ms);
}

@keyframes flappy-splash-pop {
    0% {
        opacity: 0.65;
        transform: translate(-50%, -46%) scale(0.55);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--flappy-splash-dx, 0px)), calc(-50% + var(--flappy-splash-dy, -18px))) scale(0.72);
    }
}

.flappy-cloud {
    position: absolute;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    filter: blur(0.2px);
    will-change: transform;
}

.flappy-cloud::before,
.flappy-cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.62);
    border-radius: 50%;
}

.flappy-cloud-a {
    width: 78px;
    top: 44px;
    left: 54px;
}

.flappy-cloud-a::before {
    width: 24px;
    height: 24px;
    left: 10px;
    top: -12px;
}

.flappy-cloud-a::after {
    width: 30px;
    height: 30px;
    right: 12px;
    top: -16px;
}

.flappy-cloud-b {
    width: 62px;
    top: 86px;
    right: 78px;
    opacity: 0.82;
}

.flappy-cloud-b::before {
    width: 22px;
    height: 22px;
    left: 8px;
    top: -10px;
}

.flappy-cloud-b::after {
    width: 26px;
    height: 26px;
    right: 8px;
    top: -14px;
}

.tetris-board {
    width: min(100%, 320px);
    aspect-ratio: 10 / 18;
    margin: 0 auto;
    padding: 8px;
    touch-action: none;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.24)),
        rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.tetris-cell {
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.tetris-cell.is-filled {
    background:
        linear-gradient(180deg, rgba(255, 248, 220, 0.18), transparent 32%),
        linear-gradient(135deg, rgba(120, 53, 15, 0.28), rgba(69, 26, 3, 0.08)),
        var(--tetris-color);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 0 2px rgba(120, 53, 15, 0.34);
}

.tetris-cell.is-filled::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background:
        linear-gradient(45deg, transparent 42%, rgba(245, 158, 11, 0.22) 42% 48%, transparent 48%) center / 100% 100% no-repeat,
        linear-gradient(-45deg, transparent 42%, rgba(245, 158, 11, 0.22) 42% 48%, transparent 48%) center / 100% 100% no-repeat,
        linear-gradient(180deg, transparent 46%, rgba(69, 26, 3, 0.18) 46% 54%, transparent 54%) center / 100% 100% no-repeat,
        linear-gradient(90deg, transparent 46%, rgba(69, 26, 3, 0.18) 46% 54%, transparent 54%) center / 100% 100% no-repeat;
    opacity: 0.95;
    pointer-events: none;
}

.pacman-board {
    --pacman-cols: 13;
    --pacman-gap: 4px;
    --pacman-padding: 10px;
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 0;
    touch-action: none;
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.18), transparent 40%),
        rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(59, 130, 246, 0.18);
}

.pacman-grid {
    position: absolute;
    inset: 0;
    padding: var(--pacman-padding);
    display: grid;
    grid-template-columns: repeat(var(--pacman-cols), minmax(0, 1fr));
    gap: var(--pacman-gap);
}

.pacman-overlay {
    position: absolute;
    inset: var(--pacman-padding);
    pointer-events: none;
}

.pacman-countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
    font-size: clamp(3.8rem, 11vw, 6.4rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: rgba(254, 240, 138, 0.98);
    text-shadow: 0 0 22px rgba(250, 204, 21, 0.28);
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.04) 48%, transparent 72%);
    pointer-events: none;
}

.pacman-countdown:not(.hidden) {
    animation: pongCountdownReveal 0.52s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.pacman-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.42);
}

.pacman-cell-wall {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.72), rgba(30, 64, 175, 0.92));
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.08);
}

.pacman-pellet,
.pacman-hero,
.pacman-ghost {
    position: absolute;
    left: 0;
    top: 0;
}

.pacman-pellet {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: rgba(254, 240, 138, 0.96);
}

.pacman-hero {
    transform: translate(var(--pacman-x, 0), var(--pacman-y, 0)) rotate(var(--pacman-rotation, 0deg));
    border-radius: 50%;
    transition: transform 0.21s linear;
    background:
        conic-gradient(from 30deg, #facc15 0 310deg, transparent 310deg 360deg);
}

.pacman-ghost {
    transform: translate(var(--pacman-x, 0), var(--pacman-y, 0));
    transition: transform 0.21s linear;
    border-radius: 50% 50% 30% 30%;
}

.pacman-ghost::before,
.pacman-ghost::after {
    content: '';
    position: absolute;
    top: 24%;
    width: 14%;
    height: 14%;
    border-radius: 50%;
    background: white;
}

.pacman-ghost::before {
    left: 26%;
}

.pacman-ghost::after {
    right: 26%;
}

.pacman-ghost.ghost-a {
    background: linear-gradient(180deg, #f87171, #991b1b);
}

.pacman-ghost.ghost-b {
    background: linear-gradient(180deg, #60a5fa, #1d4ed8);
}

.pacman-ghost.ghost-c {
    background: linear-gradient(180deg, #c084fc, #7c3aed);
}

.solitaire-layout {
    display: grid;
    gap: 14px;
}

.solitaire-top-row {
    display: grid;
    grid-template-columns: var(--solitaire-column-width) var(--solitaire-column-width) 1fr;
    gap: 12px;
    align-items: start;
}

.solitaire-slot,
.solitaire-foundations {
    min-height: calc(var(--solitaire-card-width) + 12px);
}

.solitaire-slot {
    width: var(--solitaire-column-width);
}

.solitaire-foundations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--solitaire-column-width)));
    gap: 10px;
    justify-content: end;
}

.solitaire-tableau {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, var(--solitaire-column-width)));
    gap: 10px;
    justify-content: space-between;
}

.solitaire-column {
    position: relative;
    min-height: 376px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px dashed rgba(148, 163, 184, 0.16);
    padding: 6px;
}

.solitaire-playing-card,
.solitaire-playing-card-back,
.solitaire-playing-card-placeholder {
    width: var(--solitaire-card-width);
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.solitaire-playing-card,
.solitaire-playing-card-back {
    position: absolute;
    left: 6px;
}

.solitaire-playing-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.94));
    color: #0f172a;
    box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.8);
}

.solitaire-playing-card.red {
    color: #be123c;
}

.solitaire-playing-card.black {
    color: #0f172a;
}

.solitaire-playing-card.is-hidden,
.solitaire-playing-card-back {
    background: url("assets/branding/logo-baie-cartoon.svg") center / 100% 100% no-repeat;
    color: white;
    letter-spacing: 0.12em;
    overflow: hidden;
}

.card-back-emblem {
    display: block;
    width: 68%;
    height: 68%;
    background: url("assets/branding/logo-baie-cartoon.svg") center / contain no-repeat;
    filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.28));
}

.solitaire-playing-card.is-hidden .card-back-emblem,
.solitaire-playing-card-back .card-back-emblem {
    width: 100%;
    height: 100%;
    background: none;
    filter: none;
}

.solitaire-playing-card.is-selected {
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.42), 0 12px 26px -18px rgba(250, 204, 21, 0.72);
    transform: translateY(-3px);
}

.solitaire-playing-card-placeholder {
    background: rgba(15, 23, 42, 0.42);
    border: 1px dashed rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.72);
}

.solitaire-stock .solitaire-playing-card-back,
.solitaire-stock .solitaire-playing-card-placeholder,
.solitaire-waste .solitaire-playing-card,
.solitaire-waste .solitaire-playing-card-placeholder,
.solitaire-foundations .solitaire-playing-card,
.solitaire-foundations .solitaire-playing-card-placeholder {
    position: static;
    justify-self: center;
}

.foundation-spades,
.foundation-clubs {
    color: rgba(226, 232, 240, 0.78);
}

.foundation-hearts,
.foundation-diamonds {
    color: rgba(251, 113, 133, 0.84);
}

.flowfree-topbar,
.magicsort-topbar,
.mentalmath-topbar,
.candycrush-topbar,
.harborrun-topbar,
.stacker-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.flowfree-counter-block,
.magicsort-counter-block,
.mentalmath-counter-block,
.candycrush-counter-block,
.harborrun-counter-block,
.stacker-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flowfree-counter-label,
.magicsort-counter-label,
.mentalmath-counter-label,
.candycrush-counter-label,
.harborrun-counter-label,
.stacker-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.flowfree-counter-value,
.magicsort-counter-value,
.mentalmath-counter-value,
.candycrush-counter-value,
.harborrun-counter-value,
.stacker-counter-value {
    font-size: clamp(1.05rem, 2.4vw, 1.55rem);
    color: var(--primary-color);
}

.flowfree-face,
.magicsort-face,
.mentalmath-face,
.candycrush-face,
.harborrun-face,
.stacker-face {
    width: 100%;
    min-height: 60px;
    border-radius: 16px;
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.flowfree-face {
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.94), rgba(37, 99, 235, 0.88));
    box-shadow: 0 18px 34px -24px rgba(45, 212, 191, 0.56);
}

.magicsort-face {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.94), rgba(14, 165, 233, 0.88));
    box-shadow: 0 18px 34px -24px rgba(192, 132, 252, 0.56);
}

.mentalmath-face {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.94), rgba(20, 184, 166, 0.88));
    box-shadow: 0 18px 34px -24px rgba(37, 99, 235, 0.56);
}

.candycrush-face {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.94), rgba(59, 130, 246, 0.88));
    box-shadow: 0 18px 34px -24px rgba(236, 72, 153, 0.56);
}

.harborrun-face {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.94), rgba(249, 115, 22, 0.88));
    box-shadow: 0 18px 34px -24px rgba(14, 165, 233, 0.56);
}

.stacker-face {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.94), rgba(20, 184, 166, 0.88));
    box-shadow: 0 18px 34px -24px rgba(251, 191, 36, 0.56);
}

.flowfree-help,
.magicsort-help,
.mentalmath-help,
.candycrush-help,
.harborrun-help,
.stacker-help {
    margin: 0 0 14px;
    text-align: center;
    color: var(--muted-text);
}

.flowfree-board {
    width: min(100%, 560px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(60, 24, 8, 0.32) 0 6%, transparent 6% 94%, rgba(60, 24, 8, 0.32) 94% 100%),
        repeating-linear-gradient(90deg, rgba(88, 40, 16, 0.38) 0 44px, rgba(52, 24, 10, 0.58) 44px 48px, rgba(36, 18, 9, 0.38) 48px 92px),
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.26)),
        linear-gradient(180deg, #4a2b16, #2f1b0f 58%, #160c06);
    border: 1px solid rgba(251, 191, 36, 0.18);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.04),
        0 20px 36px -24px rgba(15, 23, 42, 0.82);
    touch-action: none;
}

.flowfree-cell {
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 16px;
    position: relative;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.06), transparent 18%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.28)),
        rgba(59, 35, 20, 0.62);
    box-shadow:
        inset 0 0 0 1px rgba(251, 191, 36, 0.08),
        inset 0 -10px 14px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: box-shadow 0.14s ease, background 0.18s ease;
    will-change: box-shadow;
}

.flowfree-cell:hover {
    transform: none;
    filter: none;
}

.flowfree-cell::before,
.flowfree-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    transition: transform 0.14s ease, opacity 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.flowfree-cell::before {
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 34%;
    height: 34%;
    border-radius: 999px;
    background: var(--flow-color, transparent);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.24),
        0 0 0 7px rgba(15, 23, 42, 0.34),
        0 0 18px color-mix(in srgb, var(--flow-color, transparent) 60%, transparent),
        0 8px 16px -10px rgba(15, 23, 42, 0.72);
    opacity: 0.92;
}

.flowfree-cell.is-anchor:hover::before {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.26),
        0 0 0 7px rgba(15, 23, 42, 0.34),
        0 0 22px color-mix(in srgb, var(--flow-color, transparent) 72%, transparent),
        0 10px 18px -10px rgba(15, 23, 42, 0.72);
}

.flowfree-cell.is-filled::after {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04)) center top / 20px calc((var(--flow-top) * 50%) + 10px) no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04)) right center / calc((var(--flow-right) * 50%) + 10px) 20px no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04)) center bottom / 20px calc((var(--flow-bottom) * 50%) + 10px) no-repeat,
        linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04)) left center / calc((var(--flow-left) * 50%) + 10px) 20px no-repeat,
        linear-gradient(90deg, color-mix(in srgb, var(--flow-color) 52%, #271308), color-mix(in srgb, var(--flow-color) 96%, white) 48%, color-mix(in srgb, var(--flow-color) 46%, #2b160b)) center top / 18px calc(var(--flow-top) * 50%) no-repeat,
        linear-gradient(0deg, color-mix(in srgb, var(--flow-color) 52%, #271308), color-mix(in srgb, var(--flow-color) 96%, white) 48%, color-mix(in srgb, var(--flow-color) 46%, #2b160b)) right center / calc(var(--flow-right) * 50%) 18px no-repeat,
        linear-gradient(90deg, color-mix(in srgb, var(--flow-color) 52%, #271308), color-mix(in srgb, var(--flow-color) 96%, white) 48%, color-mix(in srgb, var(--flow-color) 46%, #2b160b)) center bottom / 18px calc(var(--flow-bottom) * 50%) no-repeat,
        linear-gradient(0deg, color-mix(in srgb, var(--flow-color) 52%, #271308), color-mix(in srgb, var(--flow-color) 96%, white) 48%, color-mix(in srgb, var(--flow-color) 46%, #2b160b)) left center / calc(var(--flow-left) * 50%) 18px no-repeat,
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 244, 214, 0.48) 3px 5px, rgba(70, 37, 20, 0.2) 5px 8px, rgba(255, 255, 255, 0) 8px 12px) center top / 18px calc(var(--flow-top) * 50%) no-repeat,
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 244, 214, 0.48) 3px 5px, rgba(70, 37, 20, 0.2) 5px 8px, rgba(255, 255, 255, 0) 8px 12px) right center / calc(var(--flow-right) * 50%) 18px no-repeat,
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 244, 214, 0.48) 3px 5px, rgba(70, 37, 20, 0.2) 5px 8px, rgba(255, 255, 255, 0) 8px 12px) center bottom / 18px calc(var(--flow-bottom) * 50%) no-repeat,
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 0 3px, rgba(255, 244, 214, 0.48) 3px 5px, rgba(70, 37, 20, 0.2) 5px 8px, rgba(255, 255, 255, 0) 8px 12px) left center / calc(var(--flow-left) * 50%) 18px no-repeat,
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.24) 0 5%, transparent 6%) center top / 22px calc(var(--flow-top) * 50%) no-repeat,
        radial-gradient(circle at 76% 50%, rgba(255, 255, 255, 0.2) 0 5%, transparent 6%) right center / calc(var(--flow-right) * 50%) 22px no-repeat,
        radial-gradient(circle at 50% 76%, rgba(255, 255, 255, 0.22) 0 5%, transparent 6%) center bottom / 22px calc(var(--flow-bottom) * 50%) no-repeat,
        radial-gradient(circle at 24% 50%, rgba(255, 255, 255, 0.2) 0 5%, transparent 6%) left center / calc(var(--flow-left) * 50%) 22px no-repeat,
        radial-gradient(circle at 32% 18%, rgba(44, 22, 11, 0.54) 0 2%, transparent 3%) center top / 24px calc(var(--flow-top) * 50%) no-repeat,
        radial-gradient(circle at 68% 58%, rgba(44, 22, 11, 0.52) 0 2%, transparent 3%) right center / calc(var(--flow-right) * 50%) 24px no-repeat,
        radial-gradient(circle at 58% 78%, rgba(44, 22, 11, 0.54) 0 2%, transparent 3%) center bottom / 24px calc(var(--flow-bottom) * 50%) no-repeat,
        radial-gradient(circle at 18% 42%, rgba(44, 22, 11, 0.52) 0 2%, transparent 3%) left center / calc(var(--flow-left) * 50%) 24px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(245, 222, 179, 0.72) 10px 11px, transparent 11px 19px, rgba(69, 37, 20, 0.64) 19px 20px) center top / 18px calc(var(--flow-top) * 50%) no-repeat,
        repeating-linear-gradient(0deg, transparent 0 10px, rgba(245, 222, 179, 0.72) 10px 11px, transparent 11px 19px, rgba(69, 37, 20, 0.64) 19px 20px) right center / calc(var(--flow-right) * 50%) 18px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(245, 222, 179, 0.72) 10px 11px, transparent 11px 19px, rgba(69, 37, 20, 0.64) 19px 20px) center bottom / 18px calc(var(--flow-bottom) * 50%) no-repeat,
        repeating-linear-gradient(0deg, transparent 0 10px, rgba(245, 222, 179, 0.72) 10px 11px, transparent 11px 19px, rgba(69, 37, 20, 0.64) 19px 20px) left center / calc(var(--flow-left) * 50%) 18px no-repeat,
        radial-gradient(circle at 18% 14%, rgba(250, 235, 215, 0.8) 0 1.4%, transparent 1.6%) center top / 26px calc(var(--flow-top) * 50%) no-repeat,
        radial-gradient(circle at 84% 20%, rgba(250, 235, 215, 0.8) 0 1.4%, transparent 1.6%) right center / calc(var(--flow-right) * 50%) 26px no-repeat,
        radial-gradient(circle at 72% 84%, rgba(250, 235, 215, 0.8) 0 1.4%, transparent 1.6%) center bottom / 26px calc(var(--flow-bottom) * 50%) no-repeat,
        radial-gradient(circle at 16% 74%, rgba(250, 235, 215, 0.8) 0 1.4%, transparent 1.6%) left center / calc(var(--flow-left) * 50%) 26px no-repeat,
        radial-gradient(circle at center, #f3e3bf 0 10%, #8b5a2b 11% 16%, transparent 17%);
    opacity: 0.98;
    filter: drop-shadow(0 3px 3px rgba(18, 10, 4, 0.24));
}

.flowfree-cell.is-anchor::before {
    opacity: 1;
}

.flowfree-cell.is-filled:not(.is-anchor)::before {
    width: 14%;
    height: 14%;
    background: #f3e3bf;
    box-shadow:
        0 0 0 2px #8b5a2b,
        0 0 0 4px rgba(15, 23, 42, 0.22),
        0 0 10px color-mix(in srgb, var(--flow-color, transparent) 45%, transparent);
}

.flowfree-cell.is-selected {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.flowfree-cell.is-spawning::after {
    animation: flowfree-rope-spawn 180ms cubic-bezier(0.18, 0.8, 0.28, 1) forwards;
}

.flowfree-cell.is-spawning::before {
    animation: flowfree-nail-spawn 180ms cubic-bezier(0.18, 0.8, 0.28, 1) forwards;
}

.flowfree-cell.is-despawning::after {
    animation: flowfree-rope-despawn 220ms ease-out forwards;
}

.flowfree-cell.is-despawning::before {
    animation: flowfree-nail-despawn 220ms ease-out forwards;
}

@keyframes flowfree-rope-spawn {
    0% {
        opacity: 0;
        transform: scale(0.38);
        filter: drop-shadow(0 0 0 rgba(18, 10, 4, 0));
    }

    60% {
        opacity: 1;
        transform: scale(1.08);
        filter: drop-shadow(0 5px 4px rgba(18, 10, 4, 0.28));
    }

    100% {
        opacity: 0.98;
        transform: scale(1);
        filter: drop-shadow(0 3px 3px rgba(18, 10, 4, 0.24));
    }
}

@keyframes flowfree-nail-spawn {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.25);
    }

    65% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.14);
    }

    100% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes flowfree-rope-despawn {
    0% {
        opacity: 0.98;
        transform: scale(1);
        filter: drop-shadow(0 3px 3px rgba(18, 10, 4, 0.24));
    }

    65% {
        opacity: 0.5;
        transform: scale(0.88);
        filter: drop-shadow(0 1px 1px rgba(18, 10, 4, 0.12));
    }

    100% {
        opacity: 0;
        transform: scale(0.42);
        filter: none;
    }
}

@keyframes flowfree-nail-despawn {
    0% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35);
    }
}

.magicsort-board {
    width: min(100%, 620px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 14px;
    align-items: end;
    align-content: center;
}

.magicsort-card {
    overflow: hidden;
}

.magicsort-tube {
    padding: 8px 8px 10px;
    border-radius: 22px;
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(192, 132, 252, 0.18);
    min-height: 218px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.magicsort-tube-button {
    width: 62px;
    height: 172px;
    padding: 5px;
    border-radius: 18px 18px 24px 24px;
    border: 2px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.3));
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 5px;
    cursor: pointer;
}

.magicsort-tube.is-selected .magicsort-tube-button {
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.18);
    transform: translateY(-4px);
}

.magicsort-layer {
    width: 100%;
    min-height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}

.mentalmath-stage {
    width: 100%;
    margin: 12px 0 0;
}

.mentalmath-question-card .feedback {
    margin: 14px 0 0;
    text-align: center;
}

.mentalmath-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(186, 230, 253, 0.14), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.24), transparent 24%),
        radial-gradient(circle at 28% 68%, rgba(125, 211, 252, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(25, 55, 96, 0.98), rgba(11, 27, 55, 0.98));
}

.mentalmath-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.2), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
}

.mentalmath-topbar,
.mentalmath-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.mentalmath-topbar {
    grid-template-columns: repeat(2, minmax(150px, 180px));
    justify-content: center;
}

.mentalmath-counter-block {
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.mentalmath-counter-label {
    color: #0f766e;
}

.mentalmath-counter-value {
    color: #111827;
}

.mentalmath-help {
    margin: 0 0 10px;
    text-align: center;
    color: #e0f2fe !important;
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(8, 47, 73, 0.36);
}

.mentalmath-table {
    position: relative;
    z-index: 1;
    width: min(100%, 620px);
    margin: 12px auto 0;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.mentalmath-table.is-menu-open > :not(.mentalmath-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.mentalmath-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.mentalmath-menu-overlay.is-entering {
    animation: mentalmathMenuFadeIn 260ms ease;
}

.mentalmath-menu-overlay.hidden {
    display: none;
}

.mentalmath-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.mentalmath-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 12%, rgba(186, 230, 253, 0.14), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.24), transparent 24%),
        radial-gradient(circle at 28% 68%, rgba(125, 211, 252, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(25, 55, 96, 0.98), rgba(11, 27, 55, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.mentalmath-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #a5f3fc;
}

.mentalmath-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #f8fafc;
}

.mentalmath-menu-text {
    margin: 0;
    color: #dbeafe !important;
    font-weight: 600;
    line-height: 1.45;
}

.mentalmath-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes mentalmathMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.mentalmath-question-card {
    padding: 28px 24px;
    border-radius: 24px 24px 22px 22px;
    text-align: center;
    background:
        radial-gradient(circle at top, rgba(186, 230, 253, 0.12), transparent 38%),
        linear-gradient(180deg, rgba(20, 41, 72, 0.96), rgba(11, 25, 48, 0.94));
    border: 0;
    box-shadow:
        0 20px 44px -30px rgba(8, 47, 73, 0.62),
        inset 0 0 0 1px rgba(186, 230, 253, 0.18);
}

.mentalmath-label {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.76rem;
    color: #a5f3fc;
}

.mentalmath-question {
    margin: 0 0 18px;
    font-size: clamp(2rem, 7vw, 3.4rem);
    color: #f8fafc;
}

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

.mentalmath-form input {
    min-height: 56px;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.92);
    color: #0f172a;
    border: 1px solid rgba(125, 211, 252, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.mentalmath-keypad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.62), rgba(125, 211, 252, 0.52));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.46),
        0 16px 26px -24px rgba(8, 47, 73, 0.34);
}

.mentalmath-key {
    min-height: 58px;
    border-radius: 18px;
    background: rgba(240, 249, 255, 0.92);
    color: #0f172a;
    border: 1px solid rgba(125, 211, 252, 0.78);
    box-shadow: 0 12px 24px -22px rgba(8, 47, 73, 0.42);
    font-size: 1.12rem;
    font-weight: 800;
}

.mentalmath-key:hover {
    background: rgba(224, 242, 254, 0.98);
    color: #0f172a;
    filter: none;
}

.mentalmath-key:disabled {
    opacity: 0.55;
    cursor: default;
}

.mentalmath-key-action {
    background: rgba(186, 230, 253, 0.94);
}

.mentalmath-key-clear {
    grid-row: span 2;
}

.mentalmath-key-zero {
    grid-column: span 3;
}

.mentalmath-submit-button {
    min-height: 58px;
    border-radius: 18px;
    align-self: stretch;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(2, 132, 199, 0.9));
    box-shadow: 0 18px 30px -24px rgba(14, 116, 144, 0.62);
}

.candycrush-board {
    width: min(100%, 520px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    border-radius: 24px;
    background:
        radial-gradient(circle at top, rgba(244, 114, 182, 0.16), transparent 40%),
        linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(15, 23, 42, 0.2)),
        rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(244, 114, 182, 0.18);
}

.candycrush-cell {
    aspect-ratio: 1 / 1;
    border: none;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.48);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    cursor: grab;
    transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.candycrush-cell:hover {
    transform: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(251, 191, 36, 0.08);
}

.candycrush-cell::before {
    content: '';
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, rgba(255, 248, 220, 0.98) 0 12%, transparent 13%),
        radial-gradient(circle at 50% 50%, rgba(255, 220, 120, 0.22) 0 56%, transparent 57%),
        var(--candy-fill, rgba(255, 255, 255, 0.14));
    box-shadow:
        inset 0 -8px 10px rgba(15, 23, 42, 0.18),
        inset 0 0 0 2px rgba(255, 243, 176, 0.24),
        0 8px 14px -10px rgba(15, 23, 42, 0.64);
    transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.candycrush-cell::after {
    content: '☠';
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
    color: rgba(255, 248, 220, 0.98);
    font-size: 1rem;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(15, 23, 42, 0.18),
        0 0 8px rgba(15, 23, 42, 0.24);
    transition: transform 180ms ease, opacity 180ms ease;
}

.candycrush-cell.is-selected {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 0 3px rgba(244, 114, 182, 0.18);
}

.candycrush-cell.is-bouncing {
    animation: candyBounce 180ms ease;
}

.candycrush-cell.is-crushing {
    opacity: 1;
}

.candycrush-cell.is-crushing::before,
.candycrush-cell.is-crushing::after {
    transform: scale(0.52) rotate(10deg);
    opacity: 0;
}

.candycrush-cell.is-falling::before,
.candycrush-cell.is-falling::after {
    animation: candyFallIn 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
}

.candy-hit-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 248, 220, 0.95) 0 28%, rgba(251, 191, 36, 0.78) 29% 68%, transparent 69%);
    opacity: 0;
    pointer-events: none;
    animation: candyHitParticle 0.32s ease-out forwards;
}

.candy-hit-particle-a { --candy-particle-x: -18px; --candy-particle-y: -20px; }
.candy-hit-particle-b { --candy-particle-x: 16px; --candy-particle-y: -14px; }
.candy-hit-particle-c { --candy-particle-x: -14px; --candy-particle-y: 18px; }
.candy-hit-particle-d { --candy-particle-x: 20px; --candy-particle-y: 14px; }
.candy-hit-particle-e { --candy-particle-x: 0px; --candy-particle-y: -24px; }

.harborrun-board {
    position: relative;
    width: min(100%, 420px);
    height: 540px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.16), transparent 12%),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.12), transparent 10%),
        linear-gradient(180deg, #7dd3fc, #2563eb 26%, #1d4ed8 52%, #0f172a);
    border: 1px solid rgba(125, 211, 252, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 20px 36px -24px rgba(15, 23, 42, 0.8);
}

.harborrun-board::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, rgba(15, 23, 42, 0.06) 18% 82%, transparent 82%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(90deg, transparent 0 68px, rgba(255, 255, 255, 0.04) 68px 90px, transparent 90px 150px),
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 8%),
        radial-gradient(circle at 74% 58%, rgba(255, 255, 255, 0.06), transparent 7%);
    pointer-events: none;
}

.harborrun-board::after {
    content: '';
    position: absolute;
    inset: -18% 0 0;
    background:
        radial-gradient(ellipse at 12% 22%, rgba(255, 255, 255, 0.2) 0 7%, transparent 8%),
        radial-gradient(ellipse at 42% 48%, rgba(255, 255, 255, 0.18) 0 6%, transparent 7%),
        radial-gradient(ellipse at 76% 18%, rgba(255, 255, 255, 0.18) 0 6%, transparent 7%),
        radial-gradient(ellipse at 84% 64%, rgba(255, 255, 255, 0.14) 0 5%, transparent 6%),
        repeating-linear-gradient(180deg, transparent 0 30px, rgba(15, 118, 110, 0.12) 30px 34px, transparent 34px 68px);
    background-size: 100% 160%;
    opacity: 0.72;
    mix-blend-mode: screen;
    pointer-events: none;
}

.harborrun-backdrop,
.harborrun-waves,
.harborrun-foam {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    will-change: background-position;
}

.harborrun-backdrop {
    top: 0;
    bottom: 0;
    background-repeat: repeat-y;
    opacity: 0.8;
}

.harborrun-backdrop-far {
    background:
        radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.14) 0 4%, transparent 5%),
        radial-gradient(circle at 74% 28%, rgba(255, 255, 255, 0.12) 0 3%, transparent 4%),
        linear-gradient(180deg, rgba(14, 116, 144, 0.22), transparent 18%, rgba(8, 47, 73, 0.16) 48%, transparent 76%);
    background-size: 100% 180px;
}

.harborrun-backdrop-mid {
    background:
        radial-gradient(ellipse at 18% 26%, rgba(255, 255, 255, 0.16) 0 6%, transparent 7%),
        radial-gradient(ellipse at 64% 18%, rgba(255, 255, 255, 0.12) 0 5%, transparent 6%),
        radial-gradient(ellipse at 78% 54%, rgba(255, 255, 255, 0.14) 0 6%, transparent 7%),
        repeating-linear-gradient(180deg, transparent 0 28px, rgba(255, 255, 255, 0.09) 28px 31px, transparent 31px 66px);
    background-size: 100% 210px;
    opacity: 0.68;
}

.harborrun-waves-near {
    top: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 14% 18%, rgba(255, 255, 255, 0.16) 0 5%, transparent 6%),
        radial-gradient(ellipse at 38% 44%, rgba(255, 255, 255, 0.14) 0 6%, transparent 7%),
        radial-gradient(ellipse at 72% 34%, rgba(255, 255, 255, 0.16) 0 5%, transparent 6%),
        radial-gradient(ellipse at 86% 72%, rgba(255, 255, 255, 0.12) 0 5%, transparent 6%),
        repeating-linear-gradient(180deg, transparent 0 22px, rgba(186, 230, 253, 0.12) 22px 24px, transparent 24px 48px);
    background-size: 100% 160px;
    opacity: 0.72;
}

.harborrun-foam {
    top: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.22) 0 2.2%, transparent 2.6%),
        radial-gradient(circle at 44% 48%, rgba(255, 255, 255, 0.18) 0 2%, transparent 2.4%),
        radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.22) 0 2.1%, transparent 2.5%),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.16) 0 1.8%, transparent 2.2%);
    background-size: 100% 140px;
    opacity: 0.6;
    mix-blend-mode: screen;
}

.harborrun-player,
.harborrun-obstacle {
    position: absolute;
    width: 22%;
    left: 0;
    transform: translateX(-50%);
}

.harborrun-player {
    height: 82px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.94) 0 7%, transparent 8%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 18%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.36), transparent 40%),
        linear-gradient(180deg, #f59e0b, #7c2d12 70%);
    bottom: 18px;
    border-radius: 48% 48% 30% 30% / 24% 24% 76% 76%;
    box-shadow: 0 16px 26px -18px rgba(15, 23, 42, 0.88);
    overflow: hidden;
}

.harborrun-player::before,
.harborrun-player::after,
.harborrun-obstacle::before,
.harborrun-obstacle::after {
    content: '';
    position: absolute;
}

.harborrun-player::before {
    left: 50%;
    top: 18px;
    width: 8px;
    height: 28px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #e2e8f0, #94a3b8);
    border-radius: 999px;
}

.harborrun-player::after {
    left: 50%;
    top: 20px;
    width: 22px;
    height: 18px;
    transform: translateX(-20%);
    background: linear-gradient(180deg, #f8fafc, #cbd5e1);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0.92;
}

.harborrun-obstacle {
    height: 78px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(180deg, var(--vehicle-top, #facc15), var(--vehicle-bottom, #92400e));
    border-radius: 44% 44% 28% 28% / 24% 24% 76% 76%;
    box-shadow: 0 16px 26px -18px rgba(15, 23, 42, 0.88);
    overflow: hidden;
}

.harborrun-obstacle.type-ship {
    --vehicle-top: #38bdf8;
    --vehicle-bottom: #1d4ed8;
}

.harborrun-obstacle.type-wreck {
    --vehicle-top: #94a3b8;
    --vehicle-bottom: #475569;
}

.harborrun-obstacle.type-rock {
    --vehicle-top: #94a3b8;
    --vehicle-bottom: #334155;
    border-radius: 42% 58% 48% 52% / 52% 44% 56% 48%;
}

.harborrun-obstacle.type-ship::before,
.harborrun-obstacle.type-wreck::before {
    left: 50%;
    top: 14px;
    width: 7px;
    height: 24px;
    transform: translateX(-50%);
    background: rgba(226, 232, 240, 0.82);
    border-radius: 999px;
}

.harborrun-obstacle.type-ship::after,
.harborrun-obstacle.type-wreck::after {
    left: 50%;
    top: 16px;
    width: 18px;
    height: 15px;
    transform: translateX(-16%);
    background: rgba(241, 245, 249, 0.88);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.harborrun-obstacle.type-rock::before {
    inset: 16px 12px 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), transparent 30%),
        radial-gradient(circle at 66% 68%, rgba(15, 23, 42, 0.22), transparent 28%),
        rgba(15, 23, 42, 0.22);
}

.harborrun-player,
.harborrun-obstacle.type-ship,
.harborrun-obstacle.type-wreck {
    background-size: 100% 100%;
}

.harborrun-player {
    background-image:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.94) 0 7%, transparent 8%),
        linear-gradient(90deg, transparent 0 18%, rgba(120, 53, 15, 0.28) 18% 22%, transparent 22% 42%, rgba(120, 53, 15, 0.28) 42% 46%, transparent 46% 66%, rgba(120, 53, 15, 0.28) 66% 70%, transparent 70% 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 18%),
        linear-gradient(180deg, rgba(120, 53, 15, 0.36), transparent 40%),
        linear-gradient(180deg, #f59e0b, #7c2d12 70%);
}

.harborrun-obstacle.type-ship {
    background-image:
        linear-gradient(90deg, transparent 0 18%, rgba(186, 230, 253, 0.24) 18% 22%, transparent 22% 42%, rgba(186, 230, 253, 0.24) 42% 46%, transparent 46% 66%, rgba(186, 230, 253, 0.24) 66% 70%, transparent 70% 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 24%),
        linear-gradient(180deg, var(--vehicle-top, #38bdf8), var(--vehicle-bottom, #1d4ed8));
}

.harborrun-obstacle.type-wreck {
    background-image:
        linear-gradient(90deg, transparent 0 16%, rgba(226, 232, 240, 0.16) 16% 22%, transparent 22% 42%, rgba(226, 232, 240, 0.16) 42% 48%, transparent 48% 68%, rgba(226, 232, 240, 0.16) 68% 74%, transparent 74% 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 24%),
        linear-gradient(180deg, var(--vehicle-top, #94a3b8), var(--vehicle-bottom, #475569));
}


.stacker-board {
    position: relative;
    width: min(100%, 500px);
    height: 560px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 12%),
        radial-gradient(circle at 76% 16%, rgba(255, 255, 255, 0.14), transparent 10%),
        linear-gradient(180deg, rgba(125, 211, 252, 0.94), rgba(56, 189, 248, 0.82) 48%, rgba(15, 23, 42, 0.92));
    border: 1px solid rgba(251, 191, 36, 0.18);
}

.stacker-backdrop,
.stacker-cloud {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.stacker-cloud {
    width: 96px;
    height: 34px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    opacity: 0.72;
    filter: drop-shadow(0 8px 10px rgba(148, 163, 184, 0.14));
}

.stacker-cloud::before,
.stacker-cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
}

.stacker-cloud-a {
    left: 10%;
    top: 8%;
    transform: scale(0.82);
}

.stacker-cloud-a::before {
    width: 34px;
    height: 34px;
    left: 12px;
    top: -12px;
}

.stacker-cloud-a::after {
    width: 46px;
    height: 46px;
    right: 16px;
    top: -18px;
}

.stacker-cloud-b {
    right: 12%;
    top: 14%;
    transform: scale(0.68);
    opacity: 0.64;
}

.stacker-cloud-b::before {
    width: 32px;
    height: 32px;
    left: 14px;
    top: -10px;
}

.stacker-cloud-b::after {
    width: 42px;
    height: 42px;
    right: 14px;
    top: -16px;
}

.stacker-backdrop {
    bottom: 68px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.4));
}

.stacker-backdrop-far {
    left: -4%;
    width: 48%;
    height: 25%;
    clip-path: polygon(0 100%, 8% 72%, 18% 68%, 28% 44%, 40% 56%, 54% 28%, 72% 44%, 88% 18%, 100% 100%);
    opacity: 0.54;
}

.stacker-backdrop-near {
    right: -2%;
    width: 58%;
    height: 31%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.46));
    clip-path: polygon(0 100%, 10% 64%, 22% 58%, 36% 34%, 52% 46%, 68% 22%, 82% 28%, 94% 12%, 100% 100%);
    opacity: 0.7;
}

.stacker-layer,
.stacker-current {
    position: absolute;
    height: 26px;
    border-radius: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 14px 26px -20px rgba(15, 23, 42, 0.92);
    overflow: hidden;
    z-index: 3;
}

.stacker-layer,
.stacker-current,
.stacker-fragment {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.12)),
        linear-gradient(90deg, transparent 0 10%, rgba(73, 42, 18, 0.34) 10% 12%, transparent 12% 31%, rgba(73, 42, 18, 0.34) 31% 33%, transparent 33% 54%, rgba(73, 42, 18, 0.34) 54% 56%, transparent 56% 77%, rgba(73, 42, 18, 0.34) 77% 79%, transparent 79% 100%),
        linear-gradient(180deg, rgba(255, 248, 220, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(92, 51, 23, 0.34), transparent 68%),
        linear-gradient(90deg, var(--stack-left, #d4a15d), var(--stack-right, #8b5a2b));
    border: 1px solid rgba(83, 45, 18, 0.46);
}

.stacker-fragment {
    position: absolute;
    height: 26px;
    border-radius: 0;
    transform: translateX(-50%) translateX(var(--stack-fragment-x, 0px)) rotate(var(--stack-fragment-rotation, 0deg));
    transform-origin: center center;
    box-shadow: 0 16px 26px -20px rgba(15, 23, 42, 0.92);
    z-index: 4;
}

.stacker-layer::before,
.stacker-current::before,
.stacker-fragment::before,
.stacker-layer::after,
.stacker-current::after,
.stacker-fragment::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.stacker-layer::before,
.stacker-current::before,
.stacker-fragment::before {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 4px, rgba(73, 42, 18, 0.06) 4px 8px),
        repeating-linear-gradient(180deg, transparent 0 9px, rgba(73, 42, 18, 0.16) 9px 11px, transparent 11px 26px);
    opacity: 0.75;
}

.stacker-layer::after,
.stacker-current::after,
.stacker-fragment::after {
    inset: 4px 8px;
    border-radius: 0;
    background:
        radial-gradient(circle at 14% 50%, rgba(84, 45, 19, 0.72) 0 1.6px, transparent 1.8px),
        radial-gradient(circle at 86% 50%, rgba(84, 45, 19, 0.72) 0 1.6px, transparent 1.8px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 18%, transparent 82%, rgba(15, 23, 42, 0.12));
    opacity: 0.88;
}

.stacker-waterline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 92px;
    background:
        radial-gradient(circle at 14% 80%, rgba(245, 158, 11, 0.3), transparent 18%),
        radial-gradient(circle at 34% 70%, rgba(253, 224, 71, 0.22), transparent 16%),
        radial-gradient(circle at 58% 78%, rgba(234, 179, 8, 0.22), transparent 18%),
        radial-gradient(circle at 82% 76%, rgba(245, 158, 11, 0.28), transparent 17%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%),
        linear-gradient(180deg, #fde68a 0 36%, #f59e0b 60%, #b45309 100%);
}

@media (max-width: 980px) {
    .multiplayer-entry-fields,
    .multiplayer-entry-fields-join {
        grid-template-columns: 1fr;
    }

    .games-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(100%, 520px);
    }

    .solitaire-top-row {
        grid-template-columns: repeat(2, minmax(0, var(--solitaire-column-width)));
    }

    .solitaire-foundations {
        grid-column: 1 / -1;
        justify-content: start;
    }

    .solitaire-tableau {
        grid-template-columns: repeat(4, minmax(0, var(--solitaire-column-width)));
        justify-content: start;
    }
}

@keyframes candyBounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.88);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 600px) {
    .solitaire-card {
        --solitaire-card-width: 78px;
    }

    .games-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 340px);
    }

    .game-home-art {
        width: 54px;
        height: 54px;
    }

    .tetris-topbar,
    .pacman-topbar,
    .solitaire-topbar,
    .connect4-topbar,
    .rhythm-topbar,
    .flappy-topbar,
    .flowfree-topbar,
    .magicsort-topbar,
    .mentalmath-topbar,
    .candycrush-topbar,
    .harborrun-topbar,
    .stacker-topbar {
        grid-template-columns: 1fr;
    }

    .solitaire-foundations {
        grid-template-columns: repeat(2, minmax(0, var(--solitaire-column-width)));
    }

    .solitaire-tableau {
        grid-template-columns: repeat(2, minmax(0, var(--solitaire-column-width)));
        justify-content: start;
    }

    .solitaire-column {
        min-height: 320px;
    }
}

.memory-board {
    width: min(100%, 584px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
}

.memory-card-tile {
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 20px;
    background: transparent;
    padding: 0;
    perspective: 1200px;
    overflow: hidden;
}

.memory-card-tile:hover {
    transform: none;
}

.memory-card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    will-change: transform;
}

.memory-card-tile.is-revealing .memory-card-inner {
    animation: memoryCardFlipReveal 0.34s cubic-bezier(0.22, 0.72, 0.18, 1);
}

.memory-card-tile.is-returning .memory-card-inner {
    animation: memoryCardFlipHide 0.34s cubic-bezier(0.22, 0.72, 0.18, 1);
}

.memory-card-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    transition: opacity 0.09s ease;
}

.memory-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.98), rgba(96, 165, 250, 0.96));
}

.memory-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.18), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.2), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 40%);
}

.memory-topbar,
.memory-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.memory-topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 8px auto 12px;
}

.memory-counter-block {
    width: 180px;
    min-height: 60px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.memory-counter-label {
    color: #0f766e;
}

.memory-counter-value {
    color: #111827;
    white-space: nowrap;
}

.memory-help {
    margin: 0 0 10px;
    text-align: center;
    color: #374151 !important;
    font-weight: 600;
}

.memory-table {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.memory-table.is-menu-open > :not(.memory-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.memory-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.memory-menu-overlay.is-entering {
    animation: memoryMenuFadeIn 260ms ease;
}

.memory-menu-overlay.hidden {
    display: none;
}

.memory-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.memory-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 36%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.98), rgba(96, 165, 250, 0.96));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.memory-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.memory-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.memory-menu-text {
    margin: 0;
    color: #374151 !important;
    font-weight: 600;
    line-height: 1.45;
}

.memory-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.memory-board {
    width: min(100%, 584px);
    margin: 0 auto;
    padding: 0 0 2px;
}

@keyframes memoryMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.memory-card-front {
    opacity: 0;
    transform: rotateY(180deg);
    background:
        linear-gradient(180deg, rgba(16, 185, 129, 0.22), rgba(37, 99, 235, 0.18)),
        rgba(15, 23, 42, 0.74);
    border: 1px solid rgba(110, 231, 183, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.memory-card-back {
    opacity: 1;
    background: url("assets/branding/logo-baie-cartoon.svg") center / 100% 100% no-repeat;
    border: 1px solid rgba(125, 211, 252, 0.2);
    overflow: hidden;
}

.memory-card-back .card-back-emblem {
    width: 100%;
    height: 100%;
    background: none;
    filter: none;
}

.memory-card-tile.is-revealed .memory-card-front {
    opacity: 1;
    transition-delay: 0.16s;
}

.memory-card-tile.is-revealed .memory-card-back {
    opacity: 0;
    transition-delay: 0s;
}

.memory-card-tile:not(.is-revealed) .memory-card-front {
    transition-delay: 0s;
}

.memory-card-tile:not(.is-revealed) .memory-card-back {
    transition-delay: 0.16s;
}

.memory-card-tile.is-matched .memory-card-front {
    box-shadow: 0 0 0 2px rgba(110, 231, 183, 0.26), 0 0 22px rgba(16, 185, 129, 0.16);
}

@keyframes memoryCardFlipReveal {
    0% {
        transform: scaleX(1);
    }

    45% {
        transform: scaleX(0.16);
    }

    55% {
        transform: scaleX(0.16);
    }

    100% {
        transform: scaleX(1);
    }
}

@keyframes memoryCardFlipHide {
    0% {
        transform: scaleX(1);
    }

    45% {
        transform: scaleX(0.16);
    }

    55% {
        transform: scaleX(0.16);
    }

    100% {
        transform: scaleX(1);
    }
}

.tictactoe-board {
    width: min(100%, 520px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.18), transparent 14%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.1), transparent 12%),
        linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(249, 115, 22, 0.1)),
        rgba(15, 23, 42, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 22px 40px -32px rgba(15, 23, 42, 0.86);
}

.tictactoe-cell {
    position: relative;
    border-radius: 22px;
    background:
        radial-gradient(circle at 26% 22%, rgba(255,255,255,0.14), transparent 18%),
        linear-gradient(180deg, rgba(99, 102, 241, 0.16), rgba(59, 130, 246, 0.08)),
        rgba(15, 23, 42, 0.76);
    border: 1px solid rgba(191, 219, 254, 0.12);
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.tictactoe-cell span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: clamp(2.15rem, 7vw, 3.7rem);
    line-height: 1;
    font-weight: 900;
    transform: translateY(-1px);
}

.tictactoe-cell.is-anchor {
    color: #f8d266;
    background:
        radial-gradient(circle at 50% 38%, rgba(248, 250, 252, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(180, 83, 9, 0.2), rgba(99, 102, 241, 0.08)),
        rgba(15, 23, 42, 0.78);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.tictactoe-cell.is-anchor span {
    text-shadow: 0 0 18px rgba(245, 158, 11, 0.16);
}

.tictactoe-cell.is-skull {
    color: #d9f3ff;
    background:
        radial-gradient(circle at 50% 40%, rgba(186, 230, 253, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(8, 47, 73, 0.28), rgba(59, 130, 246, 0.06)),
        rgba(15, 23, 42, 0.82);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
}

.tictactoe-cell.is-skull span {
    text-shadow: 0 0 18px rgba(125, 211, 252, 0.16);
}

.aim-board {
    position: relative;
    width: min(100%, min(54vh, 520px));
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 7px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 14%, rgba(125, 211, 252, 0.2), transparent 18%),
        radial-gradient(circle at 84% 20%, rgba(45, 212, 191, 0.14), transparent 17%),
        linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.26)),
        rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(99, 102, 241, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.aim-board::before,
.aim-board::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aim-board::before {
    background:
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.08) 0 2%, transparent 2.5%),
        radial-gradient(circle at 72% 36%, rgba(255, 255, 255, 0.06) 0 2%, transparent 2.5%),
        radial-gradient(circle at 48% 72%, rgba(255, 255, 255, 0.07) 0 2.2%, transparent 2.8%);
    opacity: 0.9;
}

.aim-board::after {
    background:
        radial-gradient(ellipse at 50% 106%, rgba(255, 255, 255, 0.08) 0 24%, transparent 25%),
        radial-gradient(ellipse at 28% 104%, rgba(255, 255, 255, 0.045) 0 18%, transparent 19%),
        radial-gradient(ellipse at 74% 102%, rgba(255, 255, 255, 0.045) 0 16%, transparent 17%);
    opacity: 0.38;
}

.aim-board.is-rumbling {
    animation: boardRumble 0.24s ease;
}

.aim-board.is-splashing::before {
    animation: aimBoardSplash 0.28s ease;
}

.aim-cell {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background:
        linear-gradient(180deg, rgba(125, 211, 252, 0.08), rgba(29, 78, 216, 0.06)),
        rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(2px);
    padding: 0;
    overflow: hidden;
}

.aim-cell:hover {
    transform: translateY(0);
    filter: brightness(1.06);
}

.aim-cell::after {
    content: '';
    position: absolute;
    inset: auto 14% 14% 14%;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22), transparent 72%);
    opacity: 0.5;
}

.aim-target {
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 30%, rgba(186, 230, 253, 0.18) 0 10%, transparent 11%),
        radial-gradient(circle at 62% 38%, rgba(125, 211, 252, 0.1) 0 8%, transparent 9%),
        radial-gradient(circle at 42% 62%, rgba(15, 23, 42, 0.22) 0 11%, transparent 12%),
        radial-gradient(circle at 58% 56%, rgba(15, 23, 42, 0.2) 0 9%, transparent 10%),
        radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.12), rgba(59, 130, 246, 0.1) 14%, rgba(30, 64, 175, 0.9) 38%, rgba(23, 37, 84, 0.98) 70%, rgba(15, 23, 42, 1) 100%);
    box-shadow:
        0 0 0 2px rgba(17, 24, 39, 0.18),
        0 10px 18px -12px rgba(15, 23, 42, 0.68);
    animation: aimTargetPulse 1.1s ease-in-out infinite;
    z-index: 1;
}

.aim-target.is-spawning {
    animation: aimTargetSpawn 0.28s ease, aimTargetPulse 1.1s ease-in-out 0.28s infinite;
}

.aim-target.is-dispersing {
    animation: aimTargetDisperse 0.3s ease forwards;
}

.aim-target::before,
.aim-target::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    inset: -32%;
    z-index: -1;
}

.aim-target::before {
    background:
        repeating-conic-gradient(
            from 4deg,
            rgba(15, 23, 42, 0.98) 0deg 5deg,
            transparent 5deg 17deg
        );
    -webkit-mask: radial-gradient(circle, transparent 0 50%, #000 50.5% 100%);
    mask: radial-gradient(circle, transparent 0 50%, #000 50.5% 100%);
    opacity: 0.98;
}

.aim-target::after {
    inset: 6%;
    background:
        radial-gradient(circle at 24% 28%, rgba(191, 219, 254, 0.34) 0 9%, transparent 10%),
        radial-gradient(circle at 68% 30%, rgba(30, 64, 175, 0.32) 0 10%, transparent 11%),
        radial-gradient(circle at 34% 70%, rgba(15, 23, 42, 0.26) 0 8%, transparent 9%),
        radial-gradient(circle at 72% 66%, rgba(15, 23, 42, 0.24) 0 9%, transparent 10%),
        radial-gradient(circle at 48% 48%, rgba(96, 165, 250, 0.14) 0 68%, transparent 69%);
    opacity: 0.95;
    z-index: 2;
}

.aim-cell-has-target::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 72%;
    width: 44%;
    height: 12%;
    transform: translateX(-50%);
    border-radius: 999px;
    border-top: 2px solid rgba(255, 255, 255, 0.18);
    opacity: 0.36;
}

.aim-hit-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(191, 219, 254, 0.95) 0 28%, rgba(59, 130, 246, 0.72) 29% 68%, transparent 69%);
    opacity: 0;
    pointer-events: none;
    animation: aimHitParticle 0.32s ease-out forwards;
}

.aim-hit-particle-a { --aim-particle-x: -18px; --aim-particle-y: -20px; }
.aim-hit-particle-b { --aim-particle-x: 16px; --aim-particle-y: -14px; }
.aim-hit-particle-c { --aim-particle-x: -14px; --aim-particle-y: 18px; }
.aim-hit-particle-d { --aim-particle-x: 20px; --aim-particle-y: 14px; }
.aim-hit-particle-e { --aim-particle-x: 0px; --aim-particle-y: -24px; }

@keyframes aimTargetPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes aimTargetDisperse {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(0.6);
        filter: blur(4px);
    }
}

@keyframes aimHitParticle {
    0% {
        opacity: 0.92;
        transform: translate(0, 0) scale(0.8);
    }

    100% {
        opacity: 0;
        transform: translate(var(--aim-particle-x), var(--aim-particle-y)) scale(0.2);
    }
}

@keyframes aimTargetSpawn {
    0% {
        opacity: 0;
        transform: scale(0.35);
        filter: blur(5px);
    }

    70% {
        opacity: 1;
        transform: scale(1.08);
        filter: blur(0);
    }

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

@keyframes aimBoardSplash {
    0% {
        opacity: 0.4;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.18);
    }

    100% {
        opacity: 0.9;
        filter: brightness(1);
    }
}

#gameOverModal {
    pointer-events: none;
}

#gameOverModal .modal-backdrop {
    display: none;
}

#gameOverModal .game-over-card {
    pointer-events: auto;
    box-shadow: 0 24px 45px -30px rgba(15, 23, 42, 0.75);
}

.eyebrow,
.section-tag {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
    color: var(--primary-color);
    margin: 0 0 14px;
    font-weight: 700;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    margin-bottom: 14px;
}

h2 {
    font-size: 1.3rem;
    margin-bottom: 0;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.intro,
.card p,
.manage-item-copy p,
.brand-copy p {
    color: var(--muted-text);
    line-height: 1.6;
}

.brand-copy .eyebrow {
    margin-bottom: 4px;
}

.brand-copy h2 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.15;
}

.login-form,
.management-form {
    margin-top: 28px;
    display: grid;
    gap: 14px;
    text-align: left;
}

.field-label {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 14px;
    color: var(--text-color);
    padding: 15px 16px;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
    resize: vertical;
    min-height: 120px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

button {
    border: none;
    cursor: pointer;
    font-size: 1rem;
    touch-action: manipulation;
    transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.primary-button,
.nav-button.is-active {
    background-color: var(--primary-color);
    color: white;
}

.primary-button,
.secondary-button,
.danger-button {
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 700;
}

.secondary-button {
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-color);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.danger-button {
    background: rgba(248, 113, 113, 0.14);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.multiplayer-button-success {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.96), rgba(34, 197, 94, 0.92));
    color: #f0fdf4;
    border: 1px solid rgba(167, 243, 208, 0.26);
    box-shadow: 0 14px 28px -18px rgba(16, 185, 129, 0.55);
}

.multiplayer-button-success:hover,
.multiplayer-button-success:focus-visible {
    filter: brightness(1.06);
    border-color: rgba(187, 247, 208, 0.42);
}

.multiplayer-button-danger {
    background: rgba(127, 29, 29, 0.28);
    color: #fee2e2;
    border: 1px solid rgba(248, 113, 113, 0.42);
    box-shadow: 0 14px 28px -20px rgba(248, 113, 113, 0.4);
}

.multiplayer-button-danger:hover,
.multiplayer-button-danger:focus-visible {
    filter: brightness(1.06);
    border-color: rgba(252, 165, 165, 0.56);
}

.feedback {
    min-height: 24px;
    margin-bottom: 0;
    font-weight: 600;
}

.feedback-success {
    color: var(--success-color);
}

.feedback-error {
    color: var(--error-color);
}

.nav-tabs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-button {
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-color);
    border: 1px solid rgba(99, 102, 241, 0.18);
    font-weight: 600;
}

.panel {
    display: none;
    height: 100%;
    overflow: hidden;
}

.panel-active {
    display: block;
    animation: fadeInUp 0.45s ease;
}

.hero,
.info-card,
.section-header-card,
.form-card,
.manage-list-card {
    padding: 28px;
    background: rgba(6, 10, 20, 0.98);
}

.hero {
    margin-bottom: 20px;
}

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

#dashboardSection {
    display: none;
}

#dashboardSection.panel-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card h4 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.section-header-card {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 16px;
    padding: 18px 22px;
}

.catalog-tools {
    width: min(320px, 100%);
}

.section-header-card h3 {
    margin-bottom: 4px;
}

.section-header-card .section-tag {
    margin-bottom: 8px;
}

.section-header-card p {
    margin-bottom: 0;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    align-items: start;
}

.movie-card {
    position: relative;
}

.movie-poster-shell {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 18px 38px -28px var(--shadow-color);
}

.movie-poster {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: rgba(30, 41, 59, 0.6);
}

.movie-card-body {
    margin-top: 12px;
    padding: 18px;
    border-radius: 22px;
}

.movie-card-body h4 {
    min-height: 52px;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.88);
    color: var(--text-color);
    font-weight: 700;
    white-space: nowrap;
}

.rating-badge-floating {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.95);
}

.movie-meta {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.movie-meta p,
.movie-comment {
    margin-bottom: 0;
}

.import-source {
    margin: 10px 0 0;
    color: rgba(226, 232, 240, 0.8);
    font-size: 0.95rem;
}

.management-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.86fr);
    gap: 16px;
    height: 100%;
    align-items: start;
}

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

.field-group {
    min-width: 0;
}

.form-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.manage-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(99, 102, 241, 0.12);
}

.manage-item-copy h4 {
    margin-bottom: 6px;
}

.manage-item-copy p {
    margin-bottom: 0;
}

.manage-item-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.manage-action {
    padding: 10px 14px;
    border-radius: 12px;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
}

#legalNoticeModal .modal-backdrop {
    opacity: 0;
    transition: opacity 180ms ease;
}

.modal-card {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    padding: 28px;
}

#legalNoticeModal .modal-card {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 220ms ease, transform 220ms ease;
}

#legalNoticeModal.modal-visible .modal-backdrop {
    opacity: 1;
}

#legalNoticeModal.modal-visible .modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.legal-notice-card {
    width: min(760px, 100%);
    min-height: min(620px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    padding: clamp(18px, 2.4vh, 28px);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
}

.legal-notice-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 4px 0 0;
    align-content: start;
}

.legal-notice-content p {
    margin: 0;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.42);
    border: 1px solid rgba(99, 102, 241, 0.12);
    line-height: 1.45;
    font-size: clamp(0.83rem, 1.35vh, 0.96rem);
 }

.legal-notice-content p:first-child {
    grid-column: 1 / -1;
    padding: 10px 14px;
    text-align: center;
}

.legal-notice-card .section-tag {
    margin-bottom: 0;
}

.legal-notice-card h3 {
    margin-bottom: 0;
    font-size: clamp(1.45rem, 2.6vh, 1.8rem);
}

.legal-notice-card .form-actions {
    margin-top: 2px;
    justify-content: flex-end;
}

.legal-placeholder {
    color: #fcd34d;
    font-weight: 700;
}

@media (max-width: 720px), (max-height: 760px) {
    .legal-notice-card {
        width: min(680px, 100%);
        min-height: auto;
        max-height: calc(100vh - 24px);
        padding: 18px;
        gap: 8px;
    }

    .legal-notice-content {
        gap: 10px 12px;
    }

    .legal-notice-content p {
        padding: 10px 12px;
        font-size: clamp(0.77rem, 1.18vh, 0.88rem);
        line-height: 1.32;
    }
}

@media (max-width: 640px) {
    .legal-notice-content {
        grid-template-columns: 1fr;
    }

    .legal-notice-content p:first-child {
        grid-column: auto;
    }
}

.empty-state {
    text-align: center;
    color: var(--muted-text);
    margin-top: 24px;
}

.form-card,
.manage-list-card {
    padding: 24px;
}

.management-form {
    margin-top: 18px;
    gap: 12px;
}

.management-form textarea {
    min-height: 96px;
}

#catalogSection.panel-active {
    overflow-y: auto;
    padding-right: 6px;
}

#catalogSection.panel-active::-webkit-scrollbar {
    width: 10px;
}

#catalogSection.panel-active::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 999px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(24px);
    }
}

@keyframes revealCell {
    0% {
        transform: scale(0.98);
        filter: brightness(1.08);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes revealParticleA {
    0% {
        opacity: 0.95;
        transform: translate(0, 0) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-11px, -10px) scale(1.1);
    }
}

@keyframes revealParticleB {
    0% {
        opacity: 0.95;
        transform: translate(0, 0) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(12px, -8px) scale(1);
    }
}

@keyframes revealParticleC {
    0% {
        opacity: 0.9;
        transform: translate(0, 0) scale(0.75);
    }
    100% {
        opacity: 0;
        transform: translate(-8px, 11px) scale(1);
    }
}

@keyframes revealParticleD {
    0% {
        opacity: 0.9;
        transform: translate(0, 0) scale(0.75);
    }
    100% {
        opacity: 0;
        transform: translate(10px, 10px) scale(0.95);
    }
}

@keyframes mineBlast {
    0% {
        transform: scale(0.9);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(248, 113, 113, 0);
    }
    55% {
        transform: scale(1.12);
        filter: brightness(1.3);
        box-shadow: 0 0 26px rgba(248, 113, 113, 0.38);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 18px rgba(248, 113, 113, 0.18);
    }
}

@keyframes boardShake {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-10px);
    }
    30% {
        transform: translateX(9px);
    }
    45% {
        transform: translateX(-7px);
    }
    60% {
        transform: translateX(6px);
    }
    75% {
        transform: translateX(-3px);
    }
}

@keyframes boardRumble {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(1px);
    }
    75% {
        transform: translateY(-1px);
    }
}

@keyframes flagPulse {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes gameOverPop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    65% {
        opacity: 1;
        transform: translateY(-2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes snakeFoodPulse {
    0% {
        transform: scale(0.78);
        filter: brightness(1.35);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes game2048TilePop {
    0% {
        opacity: 0.6;
        filter: brightness(1.18);
    }
    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes candyFallIn {
    0% {
        transform: translateY(-18px) scale(0.92);
        opacity: 0.2;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes connect4DropIn {
    0% {
        transform: translateY(calc((var(--connect4-drop-rows, 1) * -100%) - (var(--connect4-drop-rows, 1) * 8px))) scale(0.96);
        opacity: 0.34;
    }
    72% {
        transform: translateY(4px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes connect4ColumnDrop {
    0% {
        transform: translateY(calc(var(--connect4-drop-distance, 0px) * -1));
    }
    78% {
        transform: translateY(6px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes candyHitParticle {
    0% {
        opacity: 0.92;
        transform: translate(0, 0) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(var(--candy-particle-x), var(--candy-particle-y)) scale(0.2);
    }
}

@keyframes sudokuSolvedPulse {
    0% {
        transform: scale(0.94);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes sudokuCorrectPulse {
    0% {
        transform: scale(0.92);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes sudokuWrongPulse {
    0%, 100% {
        transform: translateX(0);
    }
    30% {
        transform: translateX(-2px);
    }
    60% {
        transform: translateX(2px);
    }
}

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

    .site-ads {
        display: none;
    }

    .site-header-inner,
    .section-header-card,
    .management-layout,
    .games-layout,
    .math-tool-grid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .brand-mark,
    .nav-tabs {
        justify-content: center;
    }

    .page-actions {
        top: 12px;
        right: 10px;
        gap: 8px;
    }

    .brand-copy {
        text-align: center;
    }

    .catalog-grid,
    .panel-grid,
    .form-grid,
    .service-grid {
        grid-template-columns: 1fr;
    }

    .games-layout {
        height: min(740px, calc(100vh - 72px));
    }

    .math-layout {
        height: min(740px, calc(100vh - 72px));
    }

    .music-layout {
        height: min(740px, calc(100vh - 72px));
    }
}

@media (max-width: 600px) {
    .app-shell {
        width: min(100% - 20px, 1320px);
        padding: 20px 0;
        align-items: flex-start;
    }

    .app-view {
        padding-top: 128px;
    }

    #gamesView {
        padding-top: 128px;
    }

    #mathView {
        padding-top: 128px;
    }

    #musicView {
        padding-top: 128px;
    }

    .login-card,
    .services-shell,
    .hero,
    .info-card,
    .section-header-card,
    .form-card,
    .manage-list-card,
    .modal-card {
        padding: 22px;
    }

    .service-home-card {
        padding: 30px 22px;
    }

    .minesweeper-card {
        padding: 16px;
    }

    .minesweeper-card,
    .snake-card,
    .pong-card,
    .sudoku-card,
    .game-2048-card,
    .aim-card,
    .memory-card,
    .tictactoe-card,
    .battleship-card,
    .tetris-card,
    .pacman-card,
    .solitaire-card,
    .connect4-card,
    .rhythm-card,
    .flappy-card,
    .flowfree-card,
    .magicsort-card,
    .mentalmath-card,
    .candycrush-card,
    .harborrun-card,
    .stacker-card,
    .math-panel,
    .music-panel {
        min-height: auto;
    }

    .piano-topbar {
        grid-template-columns: 1fr;
    }

    .piano-stage {
        padding: 16px;
    }

    .piano-keyboard {
        overflow-x: auto;
    }

    .piano-white-keys {
        min-width: 1220px;
    }

    .piano-black-keys {
        width: 1220px;
        left: 14px;
        right: auto;
    }


    .site-header-inner {
        width: min(100% - 20px, 1320px);
        min-height: 108px;
        padding: 12px 0;
    }

    .section-header-card {
        padding: 16px 18px;
    }

    .nav-tabs {
        width: 100%;
    }

    .nav-button {
        flex: 1 1 calc(50% - 12px);
        text-align: center;
    }

    .manage-item,
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .manage-item-actions {
        justify-content: stretch;
    }

    .minesweeper-topbar {
        grid-template-columns: 1fr;
    }

    .snake-topbar {
        grid-template-columns: 1fr;
    }

    .pong-topbar {
        grid-template-columns: 1fr;
    }

    .sudoku-topbar {
        grid-template-columns: 1fr;
    }

    .game-2048-topbar {
        grid-template-columns: 1fr;
    }

    .aim-topbar {
        grid-template-columns: 1fr;
    }

    .memory-topbar,
    .tictactoe-topbar,
    .battleship-topbar {
        grid-template-columns: 1fr;
    }

    .battleship-layout {
        grid-template-columns: 1fr;
    }

    .calculator-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .math-panel {
        padding: 22px;
    }

    .minesweeper-board {
        gap: 4px;
        padding: 8px;
        width: min(100%, min(52vh, 400px));
    }

    .snake-board {
        --snake-gap: 3px;
        --snake-padding: 6px;
        width: min(100%, min(52vh, 400px));
    }

    .pong-board {
        width: min(100%, 420px);
    }

    .sudoku-board {
        gap: 4px;
        padding: 8px;
        width: min(100%, min(52vh, 400px));
    }

    .game-2048-board {
        --game-2048-gap: 8px;
        --game-2048-padding: 8px;
        width: min(100%, min(52vh, 400px));
    }

    .flowfree-board,
    .candycrush-board,
    .harborrun-board,
    .stacker-board {
        width: min(100%, 100%);
    }

    .magicsort-board {
        grid-template-columns: repeat(3, minmax(76px, 1fr));
    }

    .mentalmath-form {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 430px) and (pointer: coarse) {
    body {
        min-height: 100dvh;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .background-glow {
        width: 220px;
        height: 220px;
        filter: blur(72px);
    }

    .site-header {
        padding-top: env(safe-area-inset-top, 0);
    }

    .site-header-inner {
        width: min(100% - 20px, 420px);
        min-height: auto;
        padding: 10px 0 12px;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .brand-mark {
        position: static;
        transform: none;
        max-width: none;
        justify-content: center;
        gap: 12px;
    }

    .brand-logo {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }

    .brand-copy {
        text-align: left;
    }

    .brand-copy .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    .brand-copy h2 {
        font-size: 1.08rem;
        line-height: 1.02;
        margin: 0;
        max-width: 170px;
    }

    .nav-tabs {
        width: 100%;
        justify-content: stretch;
        gap: 8px;
    }

    .nav-button {
        min-height: 46px;
        padding: 10px 10px;
        font-size: 0.9rem;
        border-radius: 16px;
        flex: 1 1 calc(50% - 8px);
    }

    .page-actions {
        top: calc(10px + env(safe-area-inset-top, 0));
        right: 10px;
        bottom: auto;
        left: auto;
        display: flex;
        gap: 8px;
        z-index: 80;
    }

    .services-legal-button {
        top: calc(10px + env(safe-area-inset-top, 0));
        left: 10px;
        z-index: 80;
    }

    .page-action-button {
        justify-content: center;
        min-height: 42px;
        padding-inline: 12px;
        border-radius: 16px;
        font-size: 0.94rem;
    }

    #pageBackButton {
        max-width: 156px;
    }

    #logoutButton {
        min-width: 42px;
        width: 42px;
        padding-inline: 0;
        flex: 0 0 42px;
    }

    #logoutButton span:last-child {
        display: none;
    }

    .app-shell {
        width: min(100% - 16px, 430px);
        min-height: auto;
        height: auto;
        padding: calc(14px + env(safe-area-inset-top, 0)) 0 calc(18px + env(safe-area-inset-bottom, 0));
        display: block;
    }

    .app-view,
    #gamesView,
    #mathView,
    #musicView {
        height: auto;
        min-height: auto;
        padding-top: 154px;
        overflow: visible;
    }

    #loginView {
        min-height: calc(100dvh - 36px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
        display: grid;
        align-items: center;
    }

    #servicesView {
        min-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 24px);
        padding-top: 0;
    }

    #servicesView.view-active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .view-active {
        overflow: visible;
    }

    .login-card,
    .services-shell,
    .service-home-card,
    .hero,
    .info-card,
    .section-header-card,
    .form-card,
    .manage-list-card,
    .modal-card {
        padding: 18px;
        border-radius: 22px;
    }

    .services-copy {
        margin-bottom: 14px;
        transform: none;
    }

    .services-shell {
        display: grid;
        align-content: center;
        justify-items: center;
        min-height: auto;
        width: 100%;
        margin: 0 auto;
        padding: 0 0 6px;
    }

    .services-copy h1 {
        font-size: clamp(2rem, 11vw, 2.8rem);
        line-height: 0.96;
    }

    .services-copy .intro {
        font-size: 0.98rem;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .service-card {
        padding: 8px 8px 10px;
        gap: 8px;
    }

    .service-card-art {
        width: min(100%, 146px);
        border-radius: 22px;
        padding: 12px;
    }

    .service-card-title {
        font-size: 1.14rem;
    }

    .service-card-subtitle {
        font-size: 0.82rem;
    }

    .section-header-card,
    .service-home-card,
    .games-home-card,
    .math-panel,
    .music-panel {
        width: 100%;
    }

    .section-header-card h3 {
        font-size: 1.3rem;
    }

    .section-header-card p {
        font-size: 0.95rem;
    }

    .games-layout,
    .math-layout,
    .music-layout {
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
    }

    .games-filters-card {
        position: static;
        margin-bottom: 16px;
        padding: 16px 14px 18px;
    }

    .games-panel.games-panel-active {
        height: auto;
    }

    .games-home-card {
        padding: 16px 14px 18px;
        overflow: visible;
    }

    .games-home-copy {
        margin-bottom: 16px;
    }

    .games-home-copy h3 {
        font-size: 1.32rem;
    }

    .games-home-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .game-home-tile {
        min-height: 132px;
        aspect-ratio: auto;
        border-radius: 20px;
        padding: 12px 8px;
        gap: 6px;
    }

    .game-home-art {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .game-home-title {
        font-size: 0.92rem;
        line-height: 1.15;
    }

    .multiplayer-lobby-card {
        width: 100%;
        margin-bottom: 16px;
        padding: 14px 12px;
        border-radius: 24px;
    }

    .multiplayer-lobby-copy h4 {
        font-size: 1.22rem;
    }

    .multiplayer-lobby-copy p,
    .multiplayer-lobby-status,
    .multiplayer-entry-panel-copy p:last-child {
        font-size: 0.93rem;
    }

    .multiplayer-entry-switch {
        gap: 8px;
        margin-top: 14px;
    }

    .multiplayer-entry-button {
        min-height: 46px;
        border-radius: 16px;
        font-size: 0.95rem;
    }

    .multiplayer-entry-panel {
        padding: 10px;
        border-radius: 18px;
    }

    .multiplayer-entry-fields,
    .multiplayer-entry-fields-join,
    .multiplayer-entry-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .multiplayer-entry-actions {
        gap: 8px;
        align-items: stretch;
    }

    .multiplayer-room-inline {
        width: 100%;
        min-width: 0;
    }

    .multiplayer-lobby-field input,
    .multiplayer-lobby-field select,
    .primary-button,
    .secondary-button {
        min-height: 46px;
    }

    .multiplayer-lobby-player-list {
        gap: 6px;
    }

    .multiplayer-lobby-player-pill {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .card {
        border-radius: 22px;
    }

    .minesweeper-card,
    .snake-card,
    .pong-card,
    .sudoku-card,
    .game-2048-card,
    .aim-card,
    .memory-card,
    .tictactoe-card,
    .battleship-card,
    .tetris-card,
    .pacman-card,
    .solitaire-card,
    .connect4-card,
    .rhythm-card,
    .flappy-card,
    .flowfree-card,
    .magicsort-card,
    .mentalmath-card,
    .candycrush-card,
    .harborrun-card,
    .stacker-card,
    .coinclicker-card,
    .chess-card,
    .checkers-card,
    .airhockey-card,
    .reaction-card,
    .baieberry-card,
    .breakout-card {
        padding: 14px 12px 16px;
        min-height: auto;
        overflow: visible;
    }

    .breakout-card {
        overflow: hidden;
    }

    .minesweeper-topbar,
    .snake-topbar,
    .pong-topbar,
    .sudoku-topbar,
    .game-2048-topbar,
    .aim-topbar,
    .memory-topbar,
    .tictactoe-topbar,
    .battleship-topbar,
    .tetris-topbar,
    .pacman-topbar,
    .solitaire-topbar,
    .connect4-topbar,
    .rhythm-topbar,
    .flappy-topbar,
    .flowfree-topbar,
    .magicsort-topbar,
    .mentalmath-topbar,
    .candycrush-topbar,
    .harborrun-topbar,
    .stacker-topbar,
    .coinclicker-topbar,
    .chess-topbar,
    .checkers-topbar,
    .airhockey-topbar,
    .reaction-topbar,
    .baieberry-topbar,
    .breakout-topbar {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 10px;
    }

    .pong-mode-switch,
    .chess-mode-switch,
    .checkers-mode-switch,
    .airhockey-mode-switch {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .minesweeper-board,
    .snake-board,
    .sudoku-board,
    .game-2048-board,
    .aim-board,
    .memory-board,
    .tictactoe-board,
    .connect4-board,
    .chess-board,
    .checkers-board,
    .pong-board,
    .airhockey-board,
    .breakout-canvas,
    .baieberry-stage {
        width: 100%;
        max-width: 100%;
    }

    .pong-board {
        width: 100%;
        min-height: 210px;
    }

    .airhockey-board {
        width: 100%;
        min-height: 220px;
    }

    .chess-board,
    .checkers-board {
        gap: 2px;
    }

    .chess-cell,
    .checkers-cell {
        border-radius: 10px;
    }

    .chess-piece {
        font-size: clamp(1.25rem, 7vw, 1.7rem);
    }

    .checkers-piece {
        width: 68%;
        height: 68%;
    }

    .connect4-board {
        gap: 6px;
        padding: 8px;
    }

    .tictactoe-board {
        gap: 8px;
        padding: 6px;
    }

    .memory-board {
        gap: 7px;
    }

    .battleship-layout,
    .coinclicker-layout,
    .math-tool-grid,
    .converter-row,
    .panel-grid,
    .catalog-grid,
    .management-layout {
        grid-template-columns: 1fr;
    }

    .modal-card {
        width: min(100%, 360px);
    }
}

@media screen and (max-width: 430px) and (pointer: coarse) and (orientation: portrait) {
    .app-shell {
        padding-top: calc(10px + env(safe-area-inset-top, 0));
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    }

    .site-header-inner {
        width: min(100% - 18px, 420px);
    }

    #servicesView {
        min-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 12px);
    }

    .services-copy {
        margin-bottom: 10px;
    }

    .services-copy .eyebrow {
        margin-bottom: 6px;
    }

    .services-copy .intro {
        margin-top: 8px;
    }

    .service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .games-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.coinclicker-card,
.chess-card,
.checkers-card,
.airhockey-card,
.reaction-card,
.baieberry-card,
.breakout-card {
    min-height: 100%;
}

.breakout-card {
    position: relative;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(100%, 760px);
    min-height: 0;
    height: 100%;
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
}

.breakout-card.games-panel {
    height: 100%;
}

.breakout-card.games-panel-active {
    display: grid;
}

.breakout-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.24), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.coinclicker-topbar,
.checkers-topbar,
.airhockey-topbar,
.reaction-topbar,
.baieberry-topbar,
.breakout-topbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 180px));
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.chess-topbar {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto 12px;
}

.minesweeper-topbar,
.snake-topbar,
.pong-topbar,
.sudoku-topbar,
.game-2048-topbar,
.aim-topbar,
.memory-topbar,
.tictactoe-topbar,
.battleship-topbar,
.tetris-topbar,
.pacman-topbar,
.solitaire-topbar,
.connect4-topbar,
.rhythm-topbar,
.flappy-topbar,
.flowfree-topbar,
.magicsort-topbar,
.mentalmath-topbar,
.candycrush-topbar,
.harborrun-topbar,
.stacker-topbar,
.coinclicker-topbar,
.chess-topbar,
.checkers-topbar,
.airhockey-topbar,
.reaction-topbar,
.baieberry-topbar,
.breakout-topbar {
    margin-top: 8px;
}

.coinclicker-counter-block,
.chess-counter-block,
.checkers-counter-block,
.airhockey-counter-block,
.reaction-counter-block,
.baieberry-counter-block,
.breakout-counter-block {
    padding: 10px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-align: center;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coinclicker-counter-label,
.chess-counter-label,
.checkers-counter-label,
.airhockey-counter-label,
.reaction-counter-label,
.baieberry-counter-label,
.breakout-counter-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-text);
    margin-bottom: 4px;
}

.coinclicker-counter-value,
.checkers-counter-value,
.airhockey-counter-value,
.reaction-counter-value,
.baieberry-counter-value,
.breakout-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: var(--primary-color);
}

.chess-counter-value {
    font-size: clamp(1.15rem, 2.6vw, 1.65rem);
    color: #f8fafc !important;
}

#chessTurnDisplay,
#chessStatusDisplay {
    color: #f8fafc !important;
}

.coinclicker-face,
.chess-face,
.checkers-face,
.airhockey-face,
.reaction-face,
.baieberry-face,
.breakout-face {
    width: 100%;
    min-height: 60px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(251, 191, 36, 0.82));
    color: white;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 18px 34px -24px rgba(245, 158, 11, 0.72);
}

.coinclicker-layout {
    display: grid;
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: min(100%, 720px);
    margin: 0 auto;
}

.coinclicker-mint {
    display: grid;
    gap: 14px;
    justify-items: center;
}

.coin-clicker-button {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    aspect-ratio: 1;
    width: min(100%, 236px);
    border-radius: 50%;
    border: 2px solid rgba(133, 77, 14, 0.55);
    color: #082f49;
    cursor: pointer;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 251, 235, 0.96) 0 9%, rgba(255, 255, 255, 0.24) 10% 18%, transparent 19%),
        radial-gradient(circle at 50% 50%, #fcd34d 0 52%, #f59e0b 68%, #b45309 100%);
    box-shadow:
        inset 0 0 0 6px rgba(250, 204, 21, 0.46),
        inset 0 10px 18px rgba(255,255,255,0.28),
        0 18px 32px rgba(15,23,42,0.28);
    overflow: hidden;
}

.coin-clicker-button:active {
    transform: scale(0.98);
}

.coin-clicker-rim {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 2px dashed rgba(120, 53, 15, 0.52);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.coin-clicker-skull {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 8vw, 4.4rem);
    line-height: 1;
    color: rgba(120, 53, 15, 0.9);
    text-shadow: 0 2px 0 rgba(255,255,255,0.28);
}

.coin-clicker-title,
.coin-clicker-subtitle {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.coin-clicker-title {
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.coin-clicker-subtitle {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(8, 47, 73, 0.84);
}

.coinclicker-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 236px);
}

.coinclicker-stat-card {
    padding: 12px;
    border-radius: 16px;
    text-align: center;
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(245, 158, 11, 0.18);
}

.coinclicker-stat-label,
.coinclicker-upgrade-meta {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-text);
}

.coinclicker-stat-value,
.coinclicker-upgrade-bonus,
.coinclicker-upgrade-title {
    display: block;
}

.coinclicker-stat-value {
    margin-top: 4px;
    color: #fcd34d;
    font-size: 1.15rem;
    font-weight: 900;
}

.coinclicker-shop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.coinclicker-upgrade {
    display: grid;
    gap: 6px;
    min-height: 118px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.45);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.coinclicker-upgrade-title {
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
}

.coinclicker-upgrade-bonus {
    color: #fcd34d;
    font-size: 0.92rem;
}

.coinclicker-upgrade-meta {
    margin-top: auto;
}

.coinclicker-upgrade.is-disabled {
    opacity: 0.55;
}

.chess-board,
.checkers-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    width: min(100%, 540px);
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 26px 26px 22px 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
}

.checkers-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.22), transparent 24%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
}

.checkers-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.24), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(2, 132, 199, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.checkers-topbar,
.checkers-mode-switch,
.checkers-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.checkers-topbar {
    grid-template-columns: repeat(2, minmax(150px, 180px));
    justify-content: center;
}

.checkers-counter-block {
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.checkers-counter-label {
    color: #0f766e;
}

.checkers-counter-value {
    color: #111827;
}

.checkers-help {
    margin: 0 0 10px;
    text-align: center;
    color: #374151 !important;
    font-weight: 600;
}

.checkers-mode-switch {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
}

.checkers-mode-button {
    min-width: 128px;
    background: rgba(240, 249, 255, 0.82);
    color: #0f172a;
    border: 1px solid rgba(125, 211, 252, 0.78);
    box-shadow: 0 12px 24px -22px rgba(8, 47, 73, 0.56);
}

.checkers-mode-button:hover {
    background: rgba(8, 47, 73, 0.88);
    color: #f8fafc;
    border-color: rgba(125, 211, 252, 0.82);
    box-shadow: 0 16px 28px -22px rgba(8, 47, 73, 0.72);
    filter: none;
}

.checkers-mode-button.is-active {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.96), rgba(14, 165, 233, 0.9));
    color: white;
    border-color: rgba(186, 230, 253, 0.45);
    box-shadow: 0 18px 30px -24px rgba(14, 116, 144, 0.66);
}

.checkers-mode-button.is-active:hover {
    filter: none;
}

.checkers-table {
    position: relative;
    z-index: 1;
    margin-top: -5px;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.checkers-table.is-menu-open > :not(.checkers-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.checkers-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.checkers-menu-overlay.is-entering {
    animation: checkersMenuFadeIn 260ms ease;
}

.checkers-menu-overlay.hidden {
    display: none;
}

.checkers-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.checkers-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 36%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.checkers-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.checkers-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.checkers-menu-text {
    margin: 0;
    color: #374151 !important;
    font-weight: 600;
    line-height: 1.45;
}

.checkers-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes checkersMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.chess-board {
    position: relative;
    padding: 14px;
    margin-top: -2px;
    border: 1px solid rgba(59, 130, 246, 0.24);
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.22), transparent 18%),
        radial-gradient(circle at 74% 22%, rgba(255, 255, 255, 0.1), transparent 16%),
        radial-gradient(circle at 50% 120%, rgba(8, 47, 73, 0.52), transparent 42%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 18px, rgba(15,23,42,0.04) 18px 36px),
        linear-gradient(180deg, rgba(186, 230, 253, 0.18), transparent 20%),
        linear-gradient(135deg, #0b2f49, #134e6f 24%, #1e7496 50%, #14556f 74%, #0e3b50);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 46px -34px rgba(15, 23, 42, 0.78);
}

.checkers-board {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(56, 189, 248, 0.26);
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.18), transparent 18%),
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.12), transparent 16%),
        radial-gradient(circle at 50% 120%, rgba(8, 47, 73, 0.72), transparent 42%),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 18px, rgba(15,23,42,0.05) 18px 36px),
        linear-gradient(180deg, rgba(186, 230, 253, 0.2), transparent 22%),
        linear-gradient(135deg, #082637, #0c4664 28%, #11739a 56%, #0a3552);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 20px 40px -30px rgba(15, 23, 42, 0.82);
}

.chess-board::before,
.checkers-board::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 18px 18px 14px 14px;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,0.08), transparent 12%),
        radial-gradient(circle at 82% 24%, rgba(255,255,255,0.06), transparent 12%),
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 30%, transparent 70%, rgba(15,23,42,0.12)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
}

.chess-board.is-check {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(248, 113, 113, 0.2),
        0 20px 40px -30px rgba(15, 23, 42, 0.84),
        0 0 28px rgba(248, 113, 113, 0.14);
}

.chess-board.is-checkmate {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(250, 204, 21, 0.22),
        0 20px 40px -30px rgba(15, 23, 42, 0.84),
        0 0 34px rgba(250, 204, 21, 0.18);
}

.chess-cell,
.checkers-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.chess-cell:hover,
.chess-cell:focus-visible,
.checkers-cell:hover,
.checkers-cell:focus-visible {
    transform: none;
    filter: none;
}

.chess-cell.is-light {
    background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,0.22), transparent 18%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 54%),
        linear-gradient(180deg, #b8ddf4, #78b9e6 72%, #3e7fb4);
}

.chess-cell.is-dark {
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.12), transparent 18%),
        linear-gradient(180deg, #135f8f, #0d4568 68%, #08263d);
}

.checkers-cell.is-light {
    background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,0.18), transparent 18%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 54%),
        linear-gradient(180deg, #a9d5f2, #6dafe0 72%, #356e9f);
}

.checkers-cell.is-dark {
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.1), transparent 18%),
        linear-gradient(180deg, #116a96, #0d4c6d 68%, #08283c);
}

.chess-cell.is-selected,
.checkers-cell.is-selected {
    box-shadow: inset 0 0 0 4px rgba(250, 204, 21, 0.95);
}

.chess-cell.is-capture-hit,
.checkers-cell.is-capture-hit {
    animation: boardCaptureFlash 320ms ease-out;
}

.chess-cell.is-check-king {
    animation: chessKingInCheck 820ms ease-in-out infinite;
}

.chess-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 42%),
        linear-gradient(315deg, rgba(15, 23, 42, 0.08), transparent 48%);
    pointer-events: none;
}

.chess-coordinate {
    position: absolute;
    position: absolute;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 1;
}

.chess-coordinate-rank {
    top: 6px;
    left: 7px;
    color: rgba(15, 23, 42, 0.65);
}

.chess-cell.is-dark .chess-coordinate-rank {
    color: rgba(254, 249, 195, 0.86);
}

.chess-coordinate-file {
    right: 7px;
    bottom: 6px;
    color: rgba(15, 23, 42, 0.7);
}

.chess-cell.is-dark .chess-coordinate-file {
    color: rgba(254, 249, 195, 0.88);
}

.chess-cell.is-move::after,
.checkers-cell.is-move::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.95);
    position: absolute;
}

.chess-piece {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    display: inline-grid;
    place-items: center;
    line-height: 1;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    font-weight: 600;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 1px rgba(8, 47, 73, 0.18),
        0 8px 12px rgba(15, 23, 42, 0.22);
    will-change: transform, opacity, filter;
}

.chess-piece-white {
    color: #f8fafc;
    text-shadow:
        -0.6px 0 rgba(8, 47, 73, 0.72),
        0.6px 0 rgba(8, 47, 73, 0.72),
        0 -0.6px rgba(8, 47, 73, 0.72),
        0 0.6px rgba(8, 47, 73, 0.72),
        0 1px 0 rgba(255, 255, 255, 0.35),
        0 2px 3px rgba(8, 47, 73, 0.62),
        0 8px 12px rgba(15, 23, 42, 0.22);
}

.chess-piece-black {
    color: #08263d;
    text-shadow:
        -0.6px 0 rgba(255, 248, 220, 0.52),
        0.6px 0 rgba(255, 248, 220, 0.52),
        0 -0.6px rgba(255, 248, 220, 0.52),
        0 0.6px rgba(255, 248, 220, 0.52),
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 3px rgba(15, 23, 42, 0.38),
        0 8px 12px rgba(15, 23, 42, 0.28);
}

.checkers-piece {
    width: 62%;
    height: 62%;
    position: relative;
    border-radius: 50%;
    box-shadow:
        inset 0 6px 10px rgba(255,255,255,0.2),
        inset 0 -5px 10px rgba(15, 23, 42, 0.18),
        0 4px 10px rgba(15,23,42,0.3);
    will-change: transform, opacity, filter;
}

.checkers-piece.is-red {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.28), transparent 16%),
        radial-gradient(circle at 36% 34%, #fb7185, #e11d48 64%, #881337 100%);
}

.checkers-piece.is-black {
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.18), transparent 16%),
        radial-gradient(circle at 36% 34%, #64748b, #0f172a 66%, #020617 100%);
}

.checkers-piece::before,
.checkers-piece::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.checkers-piece::before {
    inset: 14%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(15, 23, 42, 0.06));
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.14),
        inset 0 -8px 12px rgba(15, 23, 42, 0.16);
}

.checkers-piece::after {
    inset: 6%;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.checkers-piece.is-king::after {
    content: '⚓';
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-weight: 900;
    color: #f8fafc;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4);
}

.checkers-piece.is-king::after {
    content: '♛';
    font-size: 1rem;
}

.chess-piece.is-moving,
.checkers-piece.is-moving {
    animation: boardPieceMove 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chess-piece.is-knight-move {
    animation: boardKnightMove 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.checkers-piece.is-king::after {
    content: '\265B';
    inset: 0;
    border: none;
    font-size: 1rem;
}

.chess-piece.is-capture-move,
.checkers-piece.is-capture-move {
    animation: boardPieceCapture 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes boardPieceMove {
    0% {
        transform: translate(calc(var(--move-x, 0) * 100%), calc(var(--move-y, 0) * 100%)) scale(0.96);
        opacity: 0.82;
    }
    68% {
        transform: translate(0, 0) scale(1.06);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

@keyframes boardPieceCapture {
    0% {
        transform: translate(calc(var(--move-x, 0) * 100%), calc(var(--move-y, 0) * 100%)) scale(0.92);
        opacity: 0.84;
        filter: saturate(0.9);
    }
    55% {
        transform: translate(0, 0) scale(1.12);
        opacity: 1;
        filter: saturate(1.25);
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        filter: none;
    }
}

@keyframes boardKnightMove {
    0% {
        transform: translate(calc(var(--move-x, 0) * 100%), calc(var(--move-y, 0) * 100%)) scale(0.96);
        opacity: 0.82;
    }
    42% {
        transform: translate(calc(var(--move-mid-x, 0) * 100%), calc(var(--move-mid-y, 0) * 100%)) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
}

@keyframes boardCaptureFlash {
    0% {
        box-shadow: inset 0 0 0 0 rgba(248, 113, 113, 0), 0 0 0 rgba(248, 113, 113, 0);
    }
    40% {
        box-shadow: inset 0 0 0 4px rgba(248, 113, 113, 0.62), 0 0 18px rgba(248, 113, 113, 0.24);
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(248, 113, 113, 0), 0 0 0 rgba(248, 113, 113, 0);
    }
}

@keyframes chessKingInCheck {
    0%,
    100% {
        box-shadow: inset 0 0 0 0 rgba(248, 113, 113, 0), 0 0 0 rgba(248, 113, 113, 0);
    }
    50% {
        box-shadow: inset 0 0 0 4px rgba(248, 113, 113, 0.82), 0 0 18px rgba(248, 113, 113, 0.24);
    }
}

.board-capture-particle {
    position: absolute;
    left: var(--particle-origin-x, 50%);
    top: var(--particle-origin-y, 50%);
    width: var(--particle-size, 6px);
    height: var(--particle-size, 6px);
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: boardCaptureParticle 420ms ease-out forwards;
    animation-delay: var(--particle-delay, 0ms);
    z-index: 5;
}

.board-capture-particle.is-light {
    background: radial-gradient(circle, #f8fafc 0 28%, #fde68a 52%, rgba(255,255,255,0) 72%);
    box-shadow: 0 0 10px rgba(255, 244, 184, 0.55);
}

.board-capture-particle.is-dark {
    background: radial-gradient(circle, #cbd5e1 0 28%, #64748b 52%, rgba(255,255,255,0) 72%);
    box-shadow: 0 0 10px rgba(100, 116, 139, 0.45);
}

.board-capture-particle.is-red {
    background: radial-gradient(circle, #fecdd3 0 28%, #fb7185 52%, rgba(255,255,255,0) 72%);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.42);
}

@keyframes boardCaptureParticle {
    0% {
        transform: translate(-50%, -50%) scale(0.55);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--particle-x, 0px)), calc(-50% + var(--particle-y, 0px))) scale(0.08);
        opacity: 0;
    }
}

.airhockey-mode-switch {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.airhockey-card {
    position: relative;
    width: min(100%, 760px);
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 16%, rgba(254, 240, 138, 0.14), transparent 16%),
        radial-gradient(circle at 84% 18%, rgba(125, 211, 252, 0.18), transparent 18%),
        linear-gradient(180deg, rgba(21, 94, 117, 0.96), rgba(8, 47, 73, 0.98));
}

.airhockey-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.1), transparent 10%),
        radial-gradient(circle at 86% 22%, rgba(255, 255, 255, 0.08), transparent 12%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 24%, transparent 76%, rgba(8,47,73,0.16));
}

.airhockey-board {
    position: relative;
    width: min(100%, 880px);
    margin: 0 auto;
    aspect-ratio: 2 / 1;
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,0.55) 49.4% 50.6%, transparent 50.6%),
        radial-gradient(circle at center, transparent 0 82px, rgba(255,255,255,0.34) 82px 86px, transparent 86px),
        radial-gradient(circle at 20% 18%, rgba(255,255,255,0.26) 0 10%, transparent 11%),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,0.18) 0 12%, transparent 13%),
        radial-gradient(circle at 38% 76%, rgba(255,255,255,0.14) 0 11%, transparent 12%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.96), rgba(125, 211, 252, 0.95) 34%, rgba(56, 189, 248, 0.9) 68%, rgba(14, 116, 144, 0.92));
    border: 1px solid rgba(186, 230, 253, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 18px 36px -26px rgba(8, 47, 73, 0.6);
}

.airhockey-board.is-menu-open > :not(.airhockey-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.airhockey-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.airhockey-menu-overlay.hidden {
    display: none;
}

.airhockey-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.airhockey-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.airhockey-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(254, 240, 138, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(21, 94, 117, 0.98), rgba(8, 47, 73, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.airhockey-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fef08a;
}

.airhockey-menu-title {
    margin: 0;
    font-size: 1.9rem;
    color: #f8fafc;
}

.airhockey-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.airhockey-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.airhockey-board::before,
.airhockey-board::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.airhockey-board::before {
    background:
        radial-gradient(circle at 16% 22%, rgba(255,255,255,0.14) 0 3%, transparent 4%),
        radial-gradient(circle at 34% 68%, rgba(255,255,255,0.1) 0 4%, transparent 5%),
        radial-gradient(circle at 62% 26%, rgba(255,255,255,0.12) 0 3%, transparent 4%),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,0.1) 0 4%, transparent 5%),
        radial-gradient(circle at 48% 52%, rgba(255,255,255,0.08) 0 6%, transparent 7%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 24%, transparent 76%, rgba(8,47,73,0.08));
    mix-blend-mode: screen;
}

.airhockey-board::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.22), transparent 22%, transparent 78%, rgba(8,47,73,0.18)),
        linear-gradient(90deg, rgba(255,255,255,0.14), transparent 14%, transparent 86%, rgba(255,255,255,0.12));
}

.airhockey-countdown {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 4;
    font-size: clamp(3.8rem, 11vw, 6.8rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: rgba(240, 249, 255, 0.96);
    text-shadow: 0 0 22px rgba(56, 189, 248, 0.34);
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.02) 48%, transparent 72%);
    pointer-events: none;
}

.airhockey-goal {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 48%;
    transform: translateY(-50%);
    border-radius: 14px;
    border: 2px solid rgba(240, 249, 255, 0.9);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06)),
        rgba(14, 116, 144, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0 18px rgba(255,255,255,0.16);
    pointer-events: none;
    z-index: 1;
}

.airhockey-goal-left {
    left: 0;
    border-left: 0;
    border-radius: 0 14px 14px 0;
    border-color: rgba(254, 202, 202, 0.95);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        rgba(239, 68, 68, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px rgba(239, 68, 68, 0.2);
}

.airhockey-goal-right {
    right: 0;
    border-right: 0;
    border-radius: 14px 0 0 14px;
    border-color: rgba(191, 219, 254, 0.95);
    background:
        linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)),
        rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px rgba(59, 130, 246, 0.22);
}

.airhockey-paddle,
.airhockey-puck {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.airhockey-paddle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 24%, transparent 25%);
    box-shadow: 0 10px 18px -10px rgba(15, 23, 42, 0.8);
}

.airhockey-paddle-left {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 24%, transparent 25%),
        radial-gradient(circle at 50% 50%, #fb7185, #dc2626 70%, #7f1d1d 100%);
}

.airhockey-paddle-right {
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.92), rgba(255,255,255,0.18) 24%, transparent 25%),
        radial-gradient(circle at 50% 50%, #60a5fa, #2563eb 70%, #1e3a8a 100%);
}

.airhockey-paddle::before,
.airhockey-paddle::after {
    content: '';
    position: absolute;
}

.airhockey-paddle::before {
    inset: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.28);
}

.airhockey-paddle::after {
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
}

.airhockey-puck {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f8fafc, #cbd5e1 42%, #0f172a 100%);
    box-shadow: 0 12px 20px -14px rgba(15, 23, 42, 0.9);
}

.reaction-lantern {
    width: min(100%, 360px);
    aspect-ratio: 0.8;
    margin: 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 30px;
    border: 0;
    cursor: pointer;
    background:
        radial-gradient(circle at 50% 8%, rgba(255,255,255,0.12), transparent 14%),
        radial-gradient(circle at 50% 88%, rgba(15, 23, 42, 0.12), transparent 18%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.01));
    box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.74);
    transition: transform 160ms ease, filter 160ms ease;
    z-index: 1;
}

.reaction-card {
    position: relative;
    width: min(100%, 860px);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(251, 191, 36, 0.14), transparent 16%),
        radial-gradient(circle at 84% 18%, rgba(125, 211, 252, 0.16), transparent 18%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.96), rgba(15, 23, 42, 0.99));
}

.reaction-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 24%, rgba(255,255,255,0.1), transparent 10%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,0.08), transparent 12%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 24%, transparent 76%, rgba(15,23,42,0.16));
}

.reaction-topbar {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    width: fit-content;
    margin: 8px auto 12px;
}

.reaction-counter-block {
    min-width: 168px;
    padding: 12px 14px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.16), transparent 58%),
        linear-gradient(180deg, rgba(69, 26, 3, 0.92), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 16px 28px -24px rgba(15, 23, 42, 0.7);
}

.reaction-counter-label {
    color: rgba(254, 240, 138, 0.84);
}

.reaction-counter-value {
    color: #fb923c;
    text-shadow: 0 0 14px rgba(251, 146, 60, 0.16);
}

.reaction-table {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    min-height: 580px;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 22px 26px;
    border-radius: 36px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(25, 34, 48, 0.96), rgba(15, 23, 42, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 24px 44px -34px rgba(15, 23, 42, 0.88);
}

.reaction-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
}

.reaction-backdrop-mast,
.reaction-backdrop-rope,
.reaction-backdrop-flag,
.reaction-backdrop-barrel,
.reaction-backdrop-crate,
.reaction-backdrop-hook {
    position: absolute;
}

.reaction-backdrop-mast {
    left: 50%;
    top: 18px;
    bottom: 102px;
    width: 18px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(134, 78, 30, 0.92), rgba(68, 36, 17, 0.98));
    box-shadow: inset 2px 0 0 rgba(255,255,255,0.08), inset -2px 0 0 rgba(15, 23, 42, 0.26);
}

.reaction-backdrop-rope {
    top: 56px;
    width: 3px;
    height: 160px;
    background: repeating-linear-gradient(180deg, rgba(191, 149, 103, 0.85) 0 8px, rgba(111, 78, 55, 0.9) 8px 16px);
    opacity: 0.78;
}

.reaction-backdrop-rope-left {
    left: calc(50% - 116px);
    transform: rotate(11deg);
}

.reaction-backdrop-rope-right {
    right: calc(50% - 116px);
    transform: rotate(-11deg);
}

.reaction-backdrop-flag {
    top: 70px;
    right: 78px;
    width: 104px;
    height: 62px;
    border-radius: 12px 18px 16px 10px;
    background:
        radial-gradient(circle at 68% 48%, rgba(255,255,255,0.08), transparent 12%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.68), rgba(15, 23, 42, 0.92));
    clip-path: polygon(0 0, 92% 0, 100% 50%, 88% 100%, 0 100%, 8% 54%);
    opacity: 0.38;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.reaction-backdrop-barrel,
.reaction-backdrop-crate {
    bottom: 36px;
    background: linear-gradient(180deg, rgba(51, 30, 17, 0.82), rgba(22, 18, 17, 0.94));
    opacity: 0.72;
}

.reaction-backdrop-barrel {
    width: 70px;
    height: 90px;
    border-radius: 22px 22px 18px 18px;
    box-shadow: inset 0 0 0 2px rgba(110, 68, 33, 0.7), inset 0 16px 0 rgba(15, 23, 42, 0.2), inset 0 -16px 0 rgba(15, 23, 42, 0.28);
}

.reaction-backdrop-barrel::before,
.reaction-backdrop-barrel::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 7px;
    border-radius: 999px;
    background: rgba(71, 85, 105, 0.18);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08);
}

.reaction-backdrop-barrel::before {
    top: 20px;
}

.reaction-backdrop-barrel::after {
    bottom: 20px;
}

.reaction-backdrop-barrel-left {
    left: 34px;
    transform: rotate(-6deg);
}

.reaction-backdrop-barrel-right {
    right: 32px;
    transform: rotate(8deg);
}

.reaction-backdrop-crate {
    left: 112px;
    width: 88px;
    height: 76px;
    border-radius: 12px;
    transform: rotate(-7deg);
    box-shadow: inset 0 0 0 2px rgba(111, 78, 55, 0.54), inset 0 18px 0 rgba(15, 23, 42, 0.18);
}

.reaction-backdrop-crate::before,
.reaction-backdrop-crate::after {
    content: '';
    position: absolute;
}

.reaction-backdrop-crate::before {
    inset: 10px;
    border-top: 2px solid rgba(148, 100, 65, 0.44);
    border-bottom: 2px solid rgba(148, 100, 65, 0.44);
}

.reaction-backdrop-crate::after {
    inset: 0;
    background:
        linear-gradient(45deg, transparent 47%, rgba(148, 100, 65, 0.34) 47% 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, rgba(148, 100, 65, 0.34) 47% 53%, transparent 53%);
}

.reaction-backdrop-hook {
    top: 126px;
    left: 90px;
    width: 54px;
    height: 84px;
    border: 6px solid rgba(148, 163, 184, 0.18);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 0 0 36px 0;
    transform: rotate(18deg);
    opacity: 0.42;
}

.reaction-table::before,
.reaction-table::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.reaction-table::before {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 24%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), transparent 72%, rgba(15, 23, 42, 0.3));
    opacity: 0.82;
}

.reaction-table::after {
    inset: auto 24px 18px;
    height: 86px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(30, 41, 59, 0.22), rgba(15, 23, 42, 0.12) 68%, transparent 100%);
    transform: translateY(8px);
    opacity: 0.42;
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.reaction-table.is-armed::after {
    opacity: 0.85;
    transform: translateY(2px) scale(1.03);
}

.reaction-table.is-armed::before {
    opacity: 0.9;
}

.reaction-table.is-lit::before {
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 244, 166, 0.22), transparent 20%),
        radial-gradient(circle at 50% 54%, rgba(255, 208, 84, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%);
    opacity: 1;
}

.reaction-table.is-lit::after {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
}

.reaction-table.is-menu-open > :not(.reaction-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.reaction-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 22px;
    border-radius: 30px;
    background: rgba(15, 23, 42, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.reaction-menu-overlay.hidden {
    display: none;
}

.reaction-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.reaction-menu-overlay.is-entering {
    animation: pongMenuFadeIn 260ms ease;
}

.reaction-menu-card {
    width: min(100%, 360px);
    padding: 24px 22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 14% 18%, rgba(251, 191, 36, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(51, 65, 85, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.reaction-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fde68a;
}

.reaction-menu-title {
    margin: 0;
    font-size: 1.9rem;
    color: #f8fafc;
}

.reaction-menu-text {
    margin: 0;
    color: #e2e8f0 !important;
    font-weight: 600;
    line-height: 1.45;
}

.reaction-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.reaction-table.is-armed .reaction-lantern {
    transform: translateY(-2px) scale(1.01);
}

.reaction-table.is-lit .reaction-lantern {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 0 26px rgba(251, 191, 36, 0.28));
}

.reaction-table.is-extinguishing .reaction-lantern {
    animation: reactionLanternSnuff 360ms ease-out;
}

.reaction-lantern::before {
    content: '';
    position: absolute;
    inset: 44px 20px 14px;
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 46%, rgba(2, 6, 23, 0.54), rgba(2, 6, 23, 0.3) 34%, rgba(2, 6, 23, 0.1) 58%, transparent 76%);
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.reaction-lantern::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 122px;
    width: 126px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(120, 53, 15, 0.08)),
        linear-gradient(90deg, rgba(74, 44, 18, 0.96), rgba(180, 83, 9, 0.92) 50%, rgba(74, 44, 18, 0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 10px -10px rgba(15, 23, 42, 0.8);
}

.reaction-lantern-handle {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 96px;
    height: 52px;
    border: 6px solid rgba(120, 53, 15, 0.94);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    transform: translateX(-50%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.12),
        0 4px 10px -8px rgba(15, 23, 42, 0.7);
}

.reaction-lantern-chain {
    position: absolute;
    top: 48px;
    left: 50%;
    width: 18px;
    height: 42px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: repeating-linear-gradient(180deg, rgba(174, 127, 53, 0.96) 0 8px, rgba(92, 51, 23, 0.96) 8px 16px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.reaction-lantern-cap,
.reaction-lantern-base {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 162px;
    background:
        linear-gradient(180deg, #fcd34d, #b45309 42%, #4a2c12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 8px 16px -14px rgba(15, 23, 42, 0.72);
}

.reaction-lantern-cap {
    top: 78px;
    height: 32px;
    border-radius: 20px 20px 12px 12px;
}

.reaction-lantern-base {
    bottom: 24px;
    height: 30px;
    border-radius: 12px 12px 22px 22px;
}

.reaction-lantern-vent {
    position: absolute;
    top: 88px;
    left: 50%;
    width: 110px;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, rgba(74, 44, 18, 0.94) 0 10px, rgba(180, 83, 9, 0.92) 10px 18px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.reaction-lantern-frame {
    position: absolute;
    top: 106px;
    left: 50%;
    width: 206px;
    height: 238px;
    transform: translateX(-50%);
    border-radius: 36px 36px 28px 28px;
    background:
        linear-gradient(90deg, rgba(74, 44, 18, 0.98), rgba(180, 83, 9, 0.88) 14%, rgba(180, 83, 9, 0.88) 86%, rgba(74, 44, 18, 0.98)),
        linear-gradient(180deg, rgba(92, 51, 23, 0.96), rgba(161, 98, 7, 0.86) 18%, rgba(146, 64, 14, 0.88) 82%, rgba(74, 44, 18, 0.96));
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,0.08),
        0 22px 30px -24px rgba(15, 23, 42, 0.72);
}

.reaction-lantern-crossbar {
    position: absolute;
    left: 30px;
    right: 30px;
    height: 12px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
        linear-gradient(90deg, rgba(74, 44, 18, 0.98), rgba(180, 83, 9, 0.92) 50%, rgba(74, 44, 18, 0.98));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.reaction-lantern-crossbar-top {
    top: 26px;
}

.reaction-lantern-crossbar-bottom {
    bottom: 26px;
}

.reaction-lantern-frame::before {
    content: '';
    position: absolute;
    inset: 18px 20px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 248, 220, 0.12), rgba(56, 189, 248, 0.04)),
        radial-gradient(circle at 50% 24%, rgba(255,255,255,0.12), transparent 28%);
    border: 1px solid rgba(251, 191, 36, 0.16);
}

.reaction-lantern-frame::after {
    content: '';
    position: absolute;
    inset: 24px 32px;
    background:
        linear-gradient(58deg, transparent 47%, rgba(74, 44, 18, 0.75) 47% 53%, transparent 53%),
        linear-gradient(122deg, transparent 47%, rgba(74, 44, 18, 0.75) 47% 53%, transparent 53%);
    opacity: 0.85;
}

.reaction-lantern-pane {
    position: absolute;
    top: 24px;
    bottom: 24px;
    width: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.96), rgba(74, 44, 18, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.reaction-lantern-pane-left {
    left: 56px;
}

.reaction-lantern-pane-right {
    right: 56px;
}

.reaction-lantern-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 122px;
    height: 122px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 50% 46%, rgba(250, 204, 21, 0.22), rgba(245, 158, 11, 0.08) 38%, rgba(15, 23, 42, 0.02) 68%, transparent 70%);
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.12);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.reaction-lantern-flame {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 90px;
    transform: translate(-50%, -52%);
    border-radius: 58% 42% 48% 52% / 68% 64% 36% 32%;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.98), rgba(255,255,255,0.2) 18%, transparent 19%),
        linear-gradient(180deg, rgba(254, 240, 138, 0.98), rgba(245, 158, 11, 0.96) 48%, rgba(220, 38, 38, 0.82) 88%);
    clip-path: polygon(50% 0, 64% 10%, 74% 28%, 86% 42%, 80% 64%, 66% 86%, 50% 100%, 34% 84%, 20% 62%, 16% 40%, 28% 20%);
    opacity: 0.24;
    filter: blur(0.2px);
    transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.reaction-lantern-rivet {
    position: absolute;
    top: 192px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.84), rgba(251, 191, 36, 0.74) 36%, rgba(120, 53, 15, 0.96) 100%);
    box-shadow: 0 0 0 2px rgba(74, 44, 18, 0.42);
}

.reaction-lantern-rivet-left {
    left: calc(50% - 116px);
}

.reaction-lantern-rivet-right {
    right: calc(50% - 116px);
}

.reaction-lantern.is-armed .reaction-lantern-core {
    background:
        radial-gradient(circle at 50% 46%, rgba(96, 165, 250, 0.3), rgba(59, 130, 246, 0.12) 38%, rgba(15, 23, 42, 0.02) 68%, transparent 70%);
    box-shadow: 0 0 32px rgba(56, 189, 248, 0.24);
    transform: translate(-50%, -50%) scale(1.04);
}

.reaction-lantern.is-armed::before {
    background:
        radial-gradient(circle at 50% 46%, rgba(15, 23, 42, 0.32), rgba(15, 23, 42, 0.16) 34%, rgba(56, 189, 248, 0.08) 58%, transparent 76%);
}

.reaction-lantern.is-lit .reaction-lantern-core {
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,0.96), rgba(250, 204, 21, 0.78) 22%, rgba(245, 158, 11, 0.44) 46%, rgba(220, 38, 38, 0.12) 66%, transparent 74%);
    box-shadow: 0 0 54px rgba(250, 204, 21, 0.58), 0 0 94px rgba(245, 158, 11, 0.24);
    transform: translate(-50%, -50%) scale(1.08);
}

.reaction-lantern.is-lit .reaction-lantern-flame {
    opacity: 1;
    transform: translate(-50%, -54%) scale(1.08);
    box-shadow: 0 0 26px rgba(250, 204, 21, 0.54), 0 0 40px rgba(239, 68, 68, 0.18);
}

.reaction-lantern.is-lit::before {
    opacity: 0.12;
    transform: scale(0.92);
    background:
        radial-gradient(circle at 50% 46%, rgba(250, 204, 21, 0.16), rgba(245, 158, 11, 0.08) 34%, transparent 70%);
}

.reaction-table.is-extinguishing .reaction-lantern::before {
    animation: reactionLanternSmoke 420ms ease-out;
}

.reaction-table.is-extinguishing .reaction-lantern-core {
    animation: reactionLanternCoreOut 420ms ease-out forwards;
}

.reaction-table.is-extinguishing .reaction-lantern-flame {
    animation: reactionLanternFlameOut 420ms ease-out forwards;
}

.reaction-table.is-extinguishing::before {
    animation: reactionLanternSceneFade 420ms ease-out forwards;
}

.reaction-table.is-extinguishing::after {
    animation: reactionLanternGlowDrop 420ms ease-out forwards;
}

@keyframes reactionLanternSnuff {
    0% {
        transform: translateY(-6px) scale(1.04);
    }
    24% {
        transform: translateY(-10px) rotate(-2deg) scale(1.06);
    }
    58% {
        transform: translateY(-2px) rotate(2deg) scale(0.98);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes reactionLanternFlameOut {
    0% {
        opacity: 1;
        transform: translate(-50%, -54%) scale(1.08);
        filter: blur(0.2px);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -68%) scale(0.92, 1.18);
    }
    54% {
        opacity: 0.22;
        transform: translate(-50%, -78%) scale(0.62, 0.84);
        filter: blur(1.2px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -86%) scale(0.28, 0.5);
        filter: blur(2px);
    }
}

@keyframes reactionLanternCoreOut {
    0% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 54px rgba(250, 204, 21, 0.58), 0 0 94px rgba(245, 158, 11, 0.24);
    }
    22% {
        transform: translate(-50%, -50%) scale(1.12);
        box-shadow: 0 0 68px rgba(255, 244, 166, 0.72), 0 0 120px rgba(245, 158, 11, 0.28);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.82);
        box-shadow: 0 0 0 rgba(0,0,0,0);
        background: radial-gradient(circle at 50% 46%, rgba(71, 85, 105, 0.22), rgba(15, 23, 42, 0.08) 42%, transparent 72%);
    }
}

@keyframes reactionLanternSmoke {
    0% {
        opacity: 0.12;
        transform: scale(0.92);
    }
    45% {
        opacity: 0.3;
        transform: translateY(-12px) scale(1.08);
    }
    100% {
        opacity: 0;
        transform: translateY(-24px) scale(1.22);
    }
}

@keyframes reactionLanternGlowDrop {
    0% {
        opacity: 1;
        transform: translateY(-2px) scale(1.08);
    }
    100% {
        opacity: 0.24;
        transform: translateY(10px) scale(0.92);
    }
}

@keyframes reactionLanternSceneFade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

.baieberry-stage {
    position: relative;
    width: min(100%, 360px);
    margin: 0 auto;
}

.baieberry-canvas,
.breakout-canvas {
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.65);
}

.breakout-canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 16px 0 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 24px 24px 22px 22px;
    box-shadow:
        0 20px 44px -30px rgba(8, 47, 73, 0.9),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.coinclicker-help,
.chess-help,
.checkers-help,
.airhockey-help,
.reaction-help,
.baieberry-help,
.breakout-help {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.baieberry-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 360px);
    margin: 14px auto 0;
}

.baieberry-meta-card {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
}

.baieberry-meta-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
}

.baieberry-meta-value {
    color: #f8fafc;
    font-size: 0.95rem;
}

.baieberry-drop-guide {
    position: absolute;
    top: 10px;
    left: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.18) 24%, transparent 25%),
        radial-gradient(circle at 50% 50%, var(--baieberry-guide-color, #60a5fa), rgba(15,23,42,0.72) 100%);
    box-shadow: 0 10px 18px -14px rgba(15, 23, 42, 0.72);
    border: 2px solid rgba(255,255,255,0.26);
    pointer-events: none;
    z-index: 3;
}

.baieberry-drop-line {
    position: absolute;
    top: 44px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.92) 10%,
            rgba(255, 255, 255, 0.92) 90%,
            rgba(255, 255, 255, 0) 100%
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.96) 0 8px,
            rgba(255, 255, 255, 0.18) 8px 16px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0.14) 100%
        );
    mask: linear-gradient(180deg, transparent 0, black 8%, black 92%, transparent 100%);
    -webkit-mask: linear-gradient(180deg, transparent 0, black 8%, black 92%, transparent 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 16px rgba(255, 255, 255, 0.18),
        0 0 26px rgba(96, 165, 250, 0.12);
    opacity: 0.92;
    transition: opacity 240ms ease;
    transform-origin: top center;
    pointer-events: none;
    z-index: 2;
}

.baieberry-drop-line::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.8) 0 3px,
        transparent 3px 16px
    );
    opacity: 0.7;
}

.baieberry-stage {
    transition: transform 110ms ease;
}

.baieberry-card {
    position: relative;
    width: min(100%, 760px);
    padding: 16px 0 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.98) 0%, rgba(20, 184, 166, 0.96) 100%);
}

.baieberry-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 255, 255, 0.16), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(14, 165, 233, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.1), transparent 40%);
}

.baieberry-card.games-panel {
    overflow: hidden;
}

.baieberry-topbar,
.baieberry-help,
.baieberry-layout {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.baieberry-topbar {
    grid-template-columns: repeat(3, minmax(132px, 172px));
    justify-content: center;
}

.baieberry-counter-block {
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.92);
    border: 0;
}

.baieberry-counter-label {
    color: #1d4ed8;
}

.baieberry-counter-value {
    color: #111827;
}

.baieberry-counter-block-preview {
    gap: 4px;
}

.baieberry-next-preview {
    --baieberry-preview-color: #60a5fa;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.18) 24%, transparent 25%),
        radial-gradient(circle at 50% 50%, var(--baieberry-preview-color), rgba(15,23,42,0.72) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.32),
        0 10px 18px -14px rgba(15, 23, 42, 0.72);
}

.baieberry-help {
    color: #374151 !important;
    font-weight: 600;
    margin-bottom: 0;
}

.baieberry-layout {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.baieberry-table {
    position: relative;
    z-index: 1;
    width: min(100%, 444px);
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    border-radius: 24px 24px 22px 22px;
}

.baieberry-card.is-menu-open .baieberry-layout {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.baieberry-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(30, 64, 175, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.baieberry-menu-overlay.is-entering {
    animation: baieberryMenuFadeIn 260ms ease;
}

.baieberry-menu-overlay.hidden {
    display: none;
}

.baieberry-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.baieberry-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(56, 189, 248, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(147, 197, 253, 0.98) 0%, rgba(20, 184, 166, 0.96) 100%);
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.baieberry-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #1d4ed8;
}

.baieberry-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.baieberry-menu-text {
    margin: 0;
    color: #374151 !important;
    font-weight: 600;
    line-height: 1.45;
}

.baieberry-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@keyframes baieberryMenuFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.baieberry-stage {
    width: 100%;
    margin: 12px 0 0;
}

.baieberry-canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 24px 24px 22px 22px;
    box-shadow:
        0 20px 44px -30px rgba(30, 64, 175, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

@media (max-width: 760px) {
    .baieberry-table {
        width: min(100%, 444px);
        margin-left: auto;
        margin-right: auto;
    }
}

.game-home-art-airhockey::before,
.game-home-art-airhockey::after,
.game-home-art-baieberry::before,
.game-home-art-baieberry::after,
.game-home-art-breakout::before,
.game-home-art-breakout::after,
.game-home-art-chess::before,
.game-home-art-chess::after,
.game-home-art-coinclicker::before,
.game-home-art-coinclicker::after,
.game-home-art-checkers::before,
.game-home-art-checkers::after,
.game-home-art-reaction::before,
.game-home-art-reaction::after {
    content: '';
    position: absolute;
}

.game-home-art-airhockey,
.game-home-art-coinclicker,
.game-home-art-chess,
.game-home-art-checkers,
.game-home-art-reaction,
.game-home-art-baieberry,
.game-home-art-breakout {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.game-home-art-airhockey {
    background-image: url("assets/games/game-airhockey.svg");
}

.game-home-art-airhockey::before {
    content: none;
}

.game-home-art-airhockey::after {
    content: none;
}

.game-home-art-coinclicker {
    background-image: url("assets/games/game-coinclicker.svg");
}

.game-home-art-coinclicker::before {
    content: none;
}

.game-home-art-coinclicker::after {
    content: none;
}

.game-home-art-chess {
    background-image: url("assets/games/game-chess-knight.svg");
}

.game-home-art-chess::before {
    content: none;
}

.game-home-art-chess::after {
    content: none;
}

.game-home-art-checkers {
    background-image: url("assets/games/game-checkers.svg");
}

.game-home-art-checkers::before {
    content: none;
}

.game-home-art-checkers::after {
    content: none;
}

.game-home-art-reaction {
    background-image: url("assets/games/game-reaction.svg");
}

.game-home-art-reaction::before {
    content: none;
}

.game-home-art-reaction::after,
.game-home-art-baieberry::after,
.game-home-art-breakout::after {
    content: none;
}

.game-home-art-baieberry {
    background-image: url("assets/games/game-baieberry.svg");
}

.game-home-art-baieberry::before {
    content: none;
}

.game-home-art-breakout {
    background-image: url("assets/games/game-break-it.svg");
}

.game-home-art-breakout::before {
    content: none;
}

@media (max-width: 600px) {
    .coinclicker-topbar,
    .chess-topbar,
    .checkers-topbar,
    .airhockey-topbar,
    .reaction-topbar,
    .baieberry-topbar,
    .breakout-topbar {
        grid-template-columns: 1fr;
    }

    .coinclicker-layout {
        grid-template-columns: 1fr;
    }

    .coinclicker-shop {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 430px) and (pointer: coarse) {
    .chess-piece-white {
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc;
        -webkit-text-stroke: 1px rgba(8, 47, 73, 0.88);
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.42),
            0 2px 4px rgba(8, 47, 73, 0.68),
            0 8px 12px rgba(15, 23, 42, 0.22);
    }

    .chess-piece-black {
        color: #08263d !important;
        -webkit-text-fill-color: #08263d;
        -webkit-text-stroke: 0.7px rgba(255, 248, 220, 0.42);
    }
}

.game-home-art-blockblast {
    background: url("assets/games/game-blockline.svg") center / cover no-repeat;
}

.game-home-art-blockblast::before {
    content: none;
}

.game-home-art-uno {
    background: url("assets/games/game-buno.svg") center / cover no-repeat;
}

.game-home-art-uno::before {
    content: none;
}

.blockblast-card,
.uno-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.16), transparent 34%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.94));
}

.blockblast-card {
    color: #111827;
}

.blockblast-card::before,
.uno-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.18), transparent 18%),
        radial-gradient(circle at 84% 18%, rgba(250, 204, 21, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,0.12), transparent 40%);
}

.blockblast-topbar,
.uno-topbar {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.blockblast-counter-block,
.uno-counter-block {
    display: grid;
    gap: 4px;
    padding: 14px 18px;
    min-width: 112px;
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
}

.blockblast-counter-label,
.uno-counter-label,
.blockblast-sidebar-label,
.uno-status-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #115e59;
}

.blockblast-counter-value,
.uno-counter-value,
.uno-status-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #111827;
}

.blockblast-face,
.uno-face,
.game-menu-primary-button {
    border: 0;
    border-radius: 999px;
    padding: 14px 24px;
    font-weight: 800;
    color: #f8fafc;
    cursor: pointer;
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    box-shadow: 0 16px 28px -20px rgba(8, 47, 73, 0.82);
}

.game-menu-secondary-button {
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 700;
    background: rgba(15, 23, 42, 0.7);
    color: var(--text-color);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

.blockblast-help,
.uno-help,
#unoHelpText,
#unoMenuText {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    color: #374151 !important;
    opacity: 1;
    font-weight: 600;
}

.blockblast-shell {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    align-items: start;
}

.blockblast-board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    padding: 18px;
    touch-action: none;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(12, 74, 110, 0.94), rgba(14, 116, 144, 0.92) 52%, rgba(8, 145, 178, 0.88)),
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 36%);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.22), 0 22px 40px -30px rgba(8, 47, 73, 0.92);
}

.blockblast-cell {
    aspect-ratio: 1;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15, 23, 42, 0.12)),
        rgba(3, 105, 161, 0.34);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.12);
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.blockblast-cell:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), 0 12px 18px -16px rgba(255,255,255,0.32);
}

.blockblast-cell.is-filled {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 12px 20px -16px rgba(15, 23, 42, 0.8);
}

.blockblast-cell.is-clearing {
    animation: blockBlastClear 220ms ease forwards;
}

.blockblast-cell.is-preview-valid {
    box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.95), 0 0 0 1px rgba(255,255,255,0.18);
    filter: brightness(1.08);
}

.blockblast-cell.is-preview-invalid {
    box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.94);
    filter: saturate(0.84);
}

.blockblast-cell.is-sun,
.blockblast-piece-cell.is-sun {
    background: linear-gradient(180deg, #facc15, #f59e0b);
}

.blockblast-cell.is-lagoon,
.blockblast-piece-cell.is-lagoon {
    background: linear-gradient(180deg, #67e8f9, #0ea5e9);
}

.blockblast-cell.is-gold,
.blockblast-piece-cell.is-gold {
    background: linear-gradient(180deg, #fde68a, #f59e0b);
}

.blockblast-cell.is-reef,
.blockblast-piece-cell.is-reef {
    background: linear-gradient(180deg, #86efac, #14b8a6);
}

.blockblast-cell.is-sand,
.blockblast-piece-cell.is-sand {
    background: linear-gradient(180deg, #fdba74, #fb7185);
}

.blockblast-cell.is-coral,
.blockblast-piece-cell.is-coral {
    background: linear-gradient(180deg, #fda4af, #ef4444);
}

.blockblast-sidebar {
    display: grid;
    gap: 16px;
}

.blockblast-sidebar-card {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255,255,255,0.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45);
}

.blockblast-sidebar-text {
    margin: 12px 0 0;
    color: #374151 !important;
}

.blockblast-pieces {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

.blockblast-piece,
.blockblast-piece-slot {
    min-height: 88px;
    border-radius: 20px;
}

.blockblast-piece {
    border: 0;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    padding: 14px;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(var(--piece-columns, 1), 22px);
    grid-template-rows: repeat(var(--piece-rows, 1), 22px);
    gap: 6px;
    background: rgba(224, 242, 254, 0.86);
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.28);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.blockblast-piece.is-selected {
    transform: translateY(-2px) scale(1.01);
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.38), 0 18px 26px -24px rgba(8, 47, 73, 0.88);
}

.breakout-topbar,
.breakout-help {
    position: relative;
    z-index: 1;
    padding-inline: 16px;
}

.breakout-topbar {
    grid-template-columns: repeat(2, minmax(150px, 180px));
    justify-content: center;
}

.breakout-counter-block {
    background: rgba(255,255,255,0.86);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.92);
    border: 0;
}

.breakout-counter-label {
    color: #115e59;
}

.breakout-counter-value {
    color: #111827;
}

.breakout-face {
    background: linear-gradient(135deg, #0f766e, #0ea5e9);
    box-shadow: 0 16px 28px -20px rgba(8, 47, 73, 0.82);
}

.breakout-help {
    color: #374151 !important;
    font-weight: 600;
    margin-bottom: 0;
}

.breakout-table {
    position: relative;
    z-index: 1;
    margin-top: 12px;
}

.breakout-table.is-menu-open > :not(.breakout-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.breakout-menu-overlay {
    position: absolute;
    inset: 16px 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    border-radius: 24px 24px 22px 22px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.breakout-menu-overlay.hidden {
    display: none;
}

.breakout-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.breakout-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 36%),
        linear-gradient(180deg, rgba(186, 230, 253, 0.98), rgba(125, 211, 252, 0.96));
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.breakout-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.breakout-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.breakout-menu-text {
    margin: 0;
    color: #374151 !important;
    opacity: 1;
    font-weight: 600;
    line-height: 1.45;
}

.breakout-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.blockblast-piece-cell {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}

.blockblast-piece-slot.is-empty {
    background: rgba(186, 230, 253, 0.24);
    box-shadow: inset 0 0 0 1px dashed rgba(14, 116, 144, 0.22);
}

@keyframes blockBlastClear {
    0% {
        transform: scale(1);
        filter: brightness(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.52);
        filter: brightness(1.6);
        opacity: 0.1;
    }
}

.uno-mode-switch {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.uno-table {
    position: relative;
    z-index: 1;
    margin-top: 12px;
    min-height: 620px;
    padding: 18px 28px 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 24%),
        linear-gradient(180deg, rgba(8, 47, 73, 0.98), rgba(15, 118, 110, 0.95) 56%, rgba(6, 78, 59, 0.94));
    box-shadow: inset 0 0 0 1px rgba(186,230,253,0.08), 0 22px 42px -34px rgba(15, 23, 42, 0.96);
    display: flex;
    flex-direction: column;
}

.uno-table.is-menu-open > :not(.uno-menu-overlay) {
    filter: blur(7px) saturate(0.86);
    pointer-events: none;
    user-select: none;
}

.uno-menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(8, 47, 73, 0.18);
    opacity: 1;
    transition: opacity 260ms ease, transform 260ms ease;
}

.uno-menu-overlay.hidden {
    display: none;
}

.uno-menu-overlay.is-closing {
    opacity: 0;
    transform: scale(1.02);
}

.pong-menu-overlay,
.game-2048-menu-overlay,
.memory-menu-overlay,
.tictactoe-menu-overlay,
.connect4-menu-overlay,
.flappy-menu-overlay,
.mentalmath-menu-overlay,
.chess-menu-overlay,
.checkers-menu-overlay,
.baieberry-menu-overlay,
.breakout-menu-overlay,
.uno-menu-overlay {
    pointer-events: none;
}

.pong-menu-card,
.game-2048-menu-card,
.memory-menu-card,
.tictactoe-menu-card,
.connect4-menu-card,
.flappy-menu-card,
.mentalmath-menu-card,
.chess-menu-card,
.checkers-menu-card,
.baieberry-menu-card,
.breakout-menu-card,
.uno-menu-card {
    pointer-events: auto;
}

.pong-table,
.game-2048-table,
.memory-table,
.tictactoe-table,
.connect4-table,
.flappy-table,
.mentalmath-table,
.chess-table,
.checkers-table,
.baieberry-table,
.breakout-table,
.uno-table {
    overflow: visible;
}

.uno-menu-card {
    width: min(100%, 420px);
    padding: 26px 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.94);
    display: grid;
    gap: 14px;
    text-align: center;
}

.uno-menu-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
}

.uno-menu-title {
    margin: 0;
    font-size: 2rem;
    color: #0f172a;
}

.uno-menu-text {
    margin: 0;
    color: #374151 !important;
    opacity: 1;
    font-weight: 600;
    line-height: 1.45;
}

.uno-menu-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.uno-opponents-top {
    display: flex;
    justify-content: center;
    min-height: 88px;
    margin-bottom: 6px;
}

.uno-opponents-side {
    position: absolute;
    top: 104px;
    bottom: 130px;
    width: 92px;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.uno-opponents-side.is-left {
    left: 12px;
    justify-content: flex-start;
}

.uno-opponents-side.is-right {
    right: 12px;
    justify-content: flex-end;
}

.uno-opponent {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.uno-opponent.is-active .uno-opponent-head {
    background: rgba(250, 204, 21, 0.16);
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.28);
}

.uno-opponent-head {
    padding: 8px 12px;
    border-radius: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.24);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.1);
    white-space: nowrap;
}

.uno-opponent-name {
    color: #e0f2fe;
    font-size: 0.84rem;
    font-weight: 700;
}

.uno-opponent-count {
    color: #fef3c7;
    font-size: 0.95rem;
}

.uno-opponent-cards {
    position: relative;
    display: flex;
}

.uno-opponent-cards.is-top .uno-opponent-back-shell + .uno-opponent-back-shell {
    margin-left: -52px;
}

.uno-opponent-back-shell.is-opponent-drawn {
    animation: unoOpponentDrawIn 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uno-opponent-cards.is-side {
    flex-direction: column;
}

.uno-opponent-cards.is-side .uno-opponent-back-shell + .uno-opponent-back-shell {
    margin-top: -92px;
}

.uno-center-table {
    margin-top: 10px;
    display: grid;
    gap: 24px;
    grid-template-columns: 138px 138px minmax(150px, 190px);
    justify-content: center;
    align-items: center;
    min-height: 220px;
}

.uno-draw-pile,
.uno-discard-pile {
    min-height: 168px;
    border-radius: 22px;
    display: grid;
    place-items: center;
}

.uno-draw-pile {
    border: 0;
    cursor: pointer;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
    grid-template-rows: auto auto auto;
    gap: 8px;
}

.uno-draw-stack {
    position: relative;
    width: 82px;
    height: 108px;
    display: block;
}

.uno-draw-stack::before,
.uno-draw-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
        linear-gradient(135deg, #1e3a8a, #0f172a);
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.12);
}

.uno-draw-stack::before {
    transform: rotate(-6deg) translate(-7px, 6px);
    opacity: 0.84;
}

.uno-draw-stack::after {
    background:
        url("assets/branding/logo-baie-cartoon.svg") center / 64% 64% no-repeat,
        linear-gradient(135deg, #1e3a8a, #0f172a);
    box-shadow:
        inset 0 0 0 1px rgba(191, 219, 254, 0.12),
        0 14px 24px -20px rgba(15, 23, 42, 0.9);
}

.uno-draw-label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #e0f2fe;
}

.uno-draw-pile.is-pulse {
    animation: unoPilePulse 1.1s ease-in-out infinite;
}

.uno-status-card {
    min-height: 168px;
    padding: 16px 14px;
    border-radius: 22px;
    background: rgba(15,23,42,0.24);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.1);
    color: #f8fafc;
    display: grid;
    gap: 8px;
    align-content: center;
}

.uno-status-label {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
}

.uno-status-value {
    color: #f8fafc;
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
}

.uno-status-value.is-red {
    color: #fecaca;
}

.uno-status-value.is-yellow {
    color: #fde68a;
}

.uno-status-value.is-green {
    color: #bbf7d0;
}

.uno-status-value.is-blue {
    color: #bfdbfe;
}

.uno-event-banner {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 18px;
    color: #fefce8;
    background: rgba(15, 23, 42, 0.32);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.08);
    display: grid;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uno-event-banner.is-pop {
    animation: unoEventPop 320ms ease;
}

.uno-hand {
    margin-top: auto;
    display: flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-top: 4px;
    padding-bottom: 0;
    overflow: visible;
}

.uno-hand .uno-card-face + .uno-card-face {
    margin-left: -18px;
}

.uno-hand .uno-card-face {
    transform: translateY(0) scale(1);
}

.uno-card-face {
    position: relative;
    width: 98px;
    height: 144px;
    border: 0;
    border-radius: 22px;
    cursor: default;
    color: #f8fafc;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 18px 26px -20px rgba(15, 23, 42, 0.92);
    transition: transform 160ms ease, box-shadow 160ms ease;
    backface-visibility: hidden;
    transform-origin: center bottom;
    will-change: transform, box-shadow;
}

.uno-card-face::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 999px;
    background: rgba(255,248,220,0.14);
    transform: rotate(-18deg) scale(0.92);
    box-shadow: inset 0 0 0 1px rgba(255,248,220,0.14);
}

.uno-card-face.is-compact {
    pointer-events: none;
}

.uno-card-face.is-playable {
    cursor: pointer;
    transform: translateY(0);
}

.uno-hand .uno-card-face:hover {
    transform: translateY(-18px) scale(1.03);
    box-shadow: 0 28px 38px -24px rgba(15, 23, 42, 1);
    z-index: 6;
}

.uno-card-face.is-playable {
    cursor: pointer;
}

.uno-card-face.is-played {
    animation: unoCardPlay 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uno-card-face.is-drawn {
    animation: unoCardDraw 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uno-card-face.is-back {
    background:
        linear-gradient(135deg, #1e3a8a, #0f172a);
}

.uno-card-face.is-back::before {
    inset: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%),
        radial-gradient(circle at center, rgba(250, 204, 21, 0.12), transparent 62%);
    box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.12);
}

.uno-card-face.is-back-compact {
    width: 72px;
    height: 108px;
    border-radius: 18px;
}

.uno-card-back-mark {
    position: relative;
    z-index: 1;
    width: 72%;
    height: 72%;
    display: block;
    background: url("assets/branding/logo-baie-cartoon.svg") center / contain no-repeat;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.36));
}

.uno-card-face.is-red {
    background: linear-gradient(180deg, #ef4444, #991b1b);
}

.uno-card-face.is-yellow {
    color: #78350f;
    background: linear-gradient(180deg, #facc15, #d97706);
}

.uno-card-face.is-green {
    background: linear-gradient(180deg, #22c55e, #166534);
}

.uno-card-face.is-blue {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

.uno-card-face.is-wild {
    background: conic-gradient(from 180deg, #ef4444, #facc15, #22c55e, #3b82f6, #ef4444);
}

.uno-card-corner,
.uno-card-center {
    position: relative;
    z-index: 1;
    font-weight: 900;
}

.uno-card-corner {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 0.9rem;
}

.uno-card-center {
    font-size: 1.55rem;
    letter-spacing: 0.04em;
}

.uno-card-wild-icon {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    transform: rotate(-12deg);
}

.uno-card-wild-icon.is-draw4::after {
    content: '+4';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    color: #f8fafc;
    text-shadow: 0 2px 6px rgba(15, 23, 42, 0.55);
}

.uno-card-wild-dot {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.uno-card-wild-dot.is-red {
    background: #ef4444;
}

.uno-card-wild-dot.is-yellow {
    background: #facc15;
}

.uno-card-wild-dot.is-green {
    background: #22c55e;
}

.uno-card-wild-dot.is-blue {
    background: #3b82f6;
}

.uno-card-subtitle {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 248, 220, 0.92);
}

.uno-card-face.is-yellow .uno-card-subtitle {
    color: rgba(120, 53, 15, 0.92);
}

.uno-color-picker {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.uno-color-picker.is-waiting {
    opacity: 0.62;
    filter: saturate(0.82);
    pointer-events: none;
}

.uno-color-choice {
    border: 0;
    border-radius: 999px;
    padding: 12px 20px;
    font-weight: 800;
    cursor: pointer;
    color: #f8fafc;
    box-shadow: 0 14px 22px -18px rgba(15, 23, 42, 0.92);
}

.uno-color-choice.is-red {
    background: #dc2626;
}

.uno-color-choice.is-yellow {
    color: #78350f;
    background: #facc15;
}

.uno-color-choice.is-green {
    background: #16a34a;
}

.uno-color-choice.is-blue {
    background: #2563eb;
}

.uno-empty-hand {
    color: #e0f2fe;
}

.uno-card-travel {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
}

.uno-card-travel.is-active {
    opacity: 1;
}

.uno-card-travel .uno-card-face {
    box-shadow: 0 28px 40px -24px rgba(15, 23, 42, 0.95);
}

.uno-card-travel.is-active .uno-card-face {
    animation: unoCardGlide 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


@keyframes unoCardPlay {
    0% {
        transform: translateY(16px) scale(0.92);
        opacity: 0.3;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes unoCardDraw {
    0% {
        transform: translateY(22px) scale(0.9);
        opacity: 0;
    }
    70% {
        transform: translateY(-4px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes unoCardGlide {
    0% {
        transform: translate3d(0, 0, 0) scale(0.92) rotate(-8deg);
        opacity: 0.2;
    }
    12% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--uno-travel-x), var(--uno-travel-y), 0) scale(1) rotate(0deg);
        opacity: 0.96;
    }
}

@keyframes unoOpponentDrawIn {
    0% {
        transform: translateY(-14px) scale(0.9);
        opacity: 0.2;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes unoPilePulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
    }
    50% {
        transform: translateY(-2px);
        box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.24), 0 16px 26px -22px rgba(250, 204, 21, 0.6);
    }
}

@keyframes unoEventPop {
    0% {
        transform: translateY(8px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (max-width: 960px) {
    .uno-opponents-side {
        display: none;
    }

    .blockblast-shell {
        grid-template-columns: 1fr;
    }

    .uno-center-table {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .uno-draw-pile,
    .uno-discard-pile {
        min-height: 156px;
    }
}