:root {
    --grid-size: 4;
    --cell-size: 75px;
    --gap: 12px;
    --board-padding: 16px;

    /* Dynamic Aura Theme Colors */
    --orb-color-1: rgba(45, 27, 105, 1);
    --orb-color-2: rgba(12, 90, 110, 1);

    /* Tranquil symmetric glide — slow in, slow out, no lunge */
    --ease-fluid: cubic-bezier(0.45, 0, 0.55, 1);
    /* organic smooth glide */
    --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
    /* elegant swell without overshoot */
    --ease-bounce: cubic-bezier(0.33, 1, 0.68, 1);

    --speed-slide: 320ms;
}

@media (min-width: 480px) {
    :root {
        --cell-size: 96px;
        --gap: 16px;
        --board-padding: 20px;
    }
}

/* Narrow phones (≤ 400px / most Android budget/mid-range) */
@media (max-width: 400px) {
    :root {
        --cell-size: 70px;
        --gap: 11px;
        --board-padding: 15px;
    }
}

/* Very small phones (≤ 345px) */
@media (max-width: 345px) {
    :root {
        --cell-size: 60px;
        --gap: 9px;
        --board-padding: 12px;
    }
}

/* --- iOS & ANDROID OPTIMIZATIONS --- */

/* Fix viewport height for Android address bar */
@supports (max-height: 100dvh) {
    body {
        min-height: 100dvh;
        height: 100dvh;
    }
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ambient-orb {
        will-change: auto;
        animation: none !important;
        transition: none !important;
    }
}

/* Mobile-specific optimizations: reduce will-change and animations */
@media (max-width: 768px) {
    .ambient-layer {
        will-change: auto;
    }
    
    .ambient-orb {
        will-change: auto;
        animation-duration: 25s, 30s;
    }
    
    /* Reduce animation complexity on low-end devices (via CSS containment) */
    .ambient-layer {
        contain: strict;
    }
    
    /* Reduce box-shadow complexity on mobile for better performance */
    .tile {
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
    }
    
    /* Simplify hover/active states on mobile (touch devices don't have hover) */
    button:hover, a:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Disable backdrop-filter if media query available */
    @supports not (backdrop-filter: blur(1px)) {
        .game-overlay {
            background: rgba(0, 0, 0, 0.7) !important;
            backdrop-filter: none !important;
        }
    }
    
    /* Reduce shadow on smaller screens */
    .btn-submit-score, .btn-modal {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* Lite FX mode: preserve spectacle while reducing costly blur/shadow chains on mobile/low-end */
body.fx-lite .special-announcement {
    width: min(92vw, 560px);
}

body.fx-lite .special-announcement div {
    filter: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
}

@media (max-width: 768px) {
    .special-announcement {
        width: min(92vw, 560px);
    }

    .special-announcement div[style*="font-size:76px"] { font-size: 58px !important; }
    .special-announcement div[style*="font-size:72px"] { font-size: 54px !important; }
    .special-announcement div[style*="font-size:70px"] { font-size: 52px !important; }
    .special-announcement div[style*="font-size:68px"] { font-size: 50px !important; }
    .special-announcement div[style*="font-size:52px"] { font-size: 40px !important; }
    .special-announcement div[style*="font-size:46px"] { font-size: 36px !important; }
    .special-announcement div[style*="font-size:40px"] { font-size: 32px !important; }
    .special-announcement div[style*="font-size:32px"] { font-size: 28px !important; }
}

/* iOS-specific fixes */
@supports (-webkit-appearance: none) {
    body {
        /* Prevent double-tap zoom delay on iOS */
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    button, input {
        border-radius: 0;
    }
}

/* Android-specific touch optimization */
@media (hover: none) {
    button:active, a:active {
        background-color: rgba(255, 255, 255, 0.1);
    }
}

body {
    font-family: 'Outfit', sans-serif;
    color: #f8fafc;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    /* Prevent pull-to-refresh but allow scrolling */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: #030008;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    -moz-osx-font-smoothing: grayscale;
}

html {
    overflow-y: scroll;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    outline: none;
}

button {
    touch-action: manipulation;
    cursor: pointer;
    min-height: 48px;
}

/* 100% GPU Ambient Backgrounds */
.ambient-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #030008;
    will-change: opacity, transform;
}

.ambient-orb {
    position: absolute;
    will-change: transform, opacity;
    transition: transform 6s ease, opacity 4s ease, background 5s ease;
}

#orb-base-1 {
    width: 60vw;
    height: 60vw;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle at center, var(--orb-color-1) 0%, transparent 70%);
    opacity: 0.5;
    animation: floatOrb 18s infinite alternate ease-in-out;
}

#orb-base-2 {
    width: 70vw;
    height: 70vw;
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle at center, var(--orb-color-2) 0%, transparent 70%);
    opacity: 0.4;
    animation: floatOrb 22s infinite alternate-reverse ease-in-out;
}

#orb-combo-1 {
    width: 80vw;
    height: 80vw;
    top: -20%;
    left: -20%;
    background: radial-gradient(circle at center, rgba(225, 29, 72, 1) 0%, rgba(225, 29, 72, 0) 70%);
    opacity: 0;
    transition: opacity 2s ease, transform 3s ease;
}

#orb-combo-2 {
    width: 90vw;
    height: 90vw;
    bottom: -30%;
    right: -20%;
    background: radial-gradient(circle at center, rgba(245, 158, 11, 1) 0%, rgba(245, 158, 11, 0) 70%);
    opacity: 0;
    transition: opacity 2s ease, transform 3s ease;
}

@keyframes floatOrb {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(10%, 10%, 0) scale(1.1);
    }
}

/* Tiered Themes for Ambient Layer - Harmonized & Calming */
.ambient-layer.theme-early #orb-base-1 {
    --orb-color-1: rgba(45, 40, 80, 1);
}

/* Deep Indigo */
.ambient-layer.theme-early #orb-base-2 {
    --orb-color-2: rgba(30, 45, 70, 1);
}

.ambient-layer.theme-early-mid #orb-base-1 {
    --orb-color-1: rgba(60, 35, 90, 1);
}

/* Deep Violet */
.ambient-layer.theme-early-mid #orb-base-2 {
    --orb-color-2: rgba(45, 30, 80, 1);
}

.ambient-layer.theme-pre-mid #orb-base-1 {
    --orb-color-1: rgba(80, 30, 85, 1);
}

/* Muted Magenta */
.ambient-layer.theme-pre-mid #orb-base-2 {
    --orb-color-2: rgba(65, 25, 75, 1);
}

.ambient-layer.theme-mid #orb-base-1 {
    --orb-color-1: rgba(100, 20, 60, 1);
}

/* Darker Rose */
.ambient-layer.theme-mid #orb-base-2 {
    --orb-color-2: rgba(10, 80, 90, 1);
}

.ambient-layer.theme-end #orb-base-1 {
    --orb-color-1: rgba(130, 90, 10, 1);
}

/* Deep Amber */
.ambient-layer.theme-end #orb-base-2 {
    --orb-color-2: rgba(110, 70, 5, 1);
}

/* Pause animations when busy */
.ambient-layer.is-busy .ambient-orb {
    animation-play-state: paused !important;
}

/* Game Container  centered column, board-width */
.game-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(
        calc(var(--board-padding) * 2 + var(--cell-size) * var(--grid-size) + var(--gap) * (var(--grid-size) - 1)),
        calc(100vw - 16px)
    );
    margin: 0 auto;
    padding: 16px 0;
    contain: layout;
}

/* Mobile: push board into the natural thumb zone (lower-center of screen) */
@media (max-width: 480px) and (min-height: 700px) {
    .game-container {
        padding-top: 6vh;
    }
}

/* Header Configuration */
.game-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    /* Layer Isolation - GPU Promote */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.header-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-row-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    width: 100%;
    column-gap: 14px;
    row-gap: 0;
}

.header-row-actions > .mode-toggle {
    /* no extra margin needed; column-gap handles separation */
}

.game-title h1 {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #fff;
    line-height: 1;
    margin: 0;
}

.mode-indicator {
    margin-top: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(147, 197, 253, 0.9);
    font-weight: 700;
}

.btn-action {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.btn-action.btn-primary {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.35);
    color: rgba(165, 170, 255, 0.95);
}

.btn-action.btn-primary:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.55);
    color: #fff;
}

.btn-action:active {
    transform: scale(0.97);
}

.btn-action-main {
    width: 100%;
}

.btn-icon-action {
    width: 40px;
    min-width: 40px;
    font-size: 15px;
    padding: 0;
}

.header-utility-actions {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    gap: 8px;
    justify-content: end;
}

/* Rival Race Tracker */
.header-row-status {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.rival-tracker-container {
    width: 100%;
    height: 60px;
    /* FIXED DIMENSIONS TO PREVENT BOARD JITTER */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 14px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    will-change: transform, box-shadow, background-color;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.rival-tracker-container.overtake-pulse {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    transform: scale(1.02) translateZ(0);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

.rival-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rival-name {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rival-gap {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.rival-gap strong {
    font-weight: 900;
    font-size: 0.85rem;
    color: #fff;
}

.rival-progress-bg {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.rival-progress-fill {
    height: 100%;
    width: 0%;
    background: #64748b;
    border-radius: 4px;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease;
    box-shadow: 0 0 6px currentColor;
}

/* Scores  compact pills */
.game-scores {
    display: flex;
    gap: 8px;
}

.score-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 6px 14px;
    min-width: 64px;
    transition: transform 0.2s var(--ease-fluid);
    flex-shrink: 0;
    /* Prevent squishing */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.score-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(165, 180, 252, 0.8);
    line-height: 1;
    margin-bottom: 2px;
}

.score-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

/* Footer */
.game-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}


.overlay-title {
    font-size: 1.75rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.2em;
    margin: 0 0 8px 0;
}

.overlay-subtitle {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0 0 10px 0;
}

.overlay-score-block {
    margin-bottom: 12px;
}

.overlay-score-label {
    font-size: 10px;
    color: rgba(165, 180, 252, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.overlay-score-val {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

.overlay-best {
    font-size: 10px;
    color: rgba(148, 163, 184, 0.7);
    margin-bottom: 12px;
}

.overlay-best span {
    color: #fcd34d;
}

/* Premium Action Buttons */
.btn-premium {
    background: rgba(255, 255, 255, 0.03);
    color: #e2e8f0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 10px 18px;
    /* Simplified for performance */
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    /* Layer Isolation */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.btn-premium:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.btn-premium:active {
    transform: translateY(0) scale(0.97);
}

/* Button styles */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}

.btn-icon {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    min-height: unset;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.btn-icon:active {
    transform: scale(0.95);
}

/* The Board */
/* Obsolete animation: boardPulse now handled via Web Animations API */

.board-wrapper {
    position: relative;
    padding: 20px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    will-change: transform;
    z-index: 10;
    -webkit-user-select: none;
    user-select: none;
    /* Explicit iOS safeguard */
    touch-action: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout;
}

.score-pill.synced {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    transform: scale(1.05) translate3d(0, 0, 0);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3) !important;
}

/* The Board */

/* Kinetic Flow-State (Velocity) */
.board-wrapper.velocity-active {
    --speed-slide: 120ms !important;
}

.board {
    position: relative;
    box-sizing: border-box;
    background: hsl(260, 20%, 12%);
    border: 1px solid rgba(200, 180, 255, 0.06);
    border-radius: 28px;
    padding: var(--board-padding);
    width: calc(var(--board-padding) * 2 + var(--cell-size) * var(--grid-size) + var(--gap) * (var(--grid-size) - 1));
    height: calc(var(--board-padding) * 2 + var(--cell-size) * var(--grid-size) + var(--gap) * (var(--grid-size) - 1));
    box-shadow:
        inset 0 1px 0 rgba(200, 180, 255, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.25),
        0 20px 40px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
    transform: rotateX(var(--board-rot-x, 0deg)) rotateY(var(--board-rot-y, 0deg));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.board::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 50px rgba(244, 63, 94, 0.4), 0 0 100px rgba(244, 63, 94, 0.3);
    opacity: var(--glow-intensity, 0);
    transition: opacity 2s ease;
    pointer-events: none;
    z-index: -1;
}

.grid-bg {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), 1fr);
    gap: var(--gap);
    width: 100%;
    height: 100%;
}

.cell-empty {
    background: hsl(260, 15%, 7%);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.8),
        inset 0 0 2px rgba(0, 0, 0, 0.6);
}

.layer {
    position: absolute;
    top: var(--board-padding);
    left: var(--board-padding);
    right: var(--board-padding);
    bottom: var(--board-padding);
    pointer-events: none;
}

/* Echo Trails - GPU Only */
.echo {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    border-radius: 20px;
    z-index: 5;
    pointer-events: none;
    transform: translate3d(calc(var(--col) * (var(--cell-size) + var(--gap))), calc(var(--row) * (var(--cell-size) + var(--gap))), 0);
}

.tile {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    transform: translate3d(calc(var(--col) * (var(--cell-size) + var(--gap))), calc(var(--row) * (var(--cell-size) + var(--gap))), 0);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    z-index: 10;
    transition: transform var(--speed-slide) var(--ease-fluid), opacity var(--speed-slide) var(--ease-fluid);
    user-select: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Tile Inner  M3 tonal surface with elevation */
.tile-inner {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 1px 3px 1px rgba(0, 0, 0, 0.15);
    /* Single transform declaration — no duplicate */
    transform: translate3d(0, 0, 0) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
    /* Only animate transform — removing box-shadow transition prevents paint on every merge */
    transition: transform var(--speed-slide) var(--ease-fluid);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* High-Roller Tile Awakening (1024+) */
@keyframes awakenThrob {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Premium Slot Shimmer Effect */
@keyframes premiumShimmer {
    0% {
        transform: translateX(-150%) skewX(-15deg);
    }

    15% {
        transform: translateX(150%) skewX(-15deg);
    }

    100% {
        transform: translateX(150%) skewX(-15deg);
    }
}

.tile-inner.awakened {
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.tile-inner.awakened::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.2);
    animation: awakenThrob 2.5s infinite ease-in-out;
    pointer-events: none;
    z-index: 0;
}

.tile-inner.awakened::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: premiumShimmer 3s infinite ease-out;
}

.tile-inner.multiplier-tile {
    border: 3px solid #fcd34d;
    box-shadow:
        0 0 30px rgba(252, 211, 77, 0.8),
        0 0 60px rgba(168, 85, 247, 0.6),
        inset 0 0 20px rgba(252, 211, 77, 0.4),
        inset 0 0 40px rgba(168, 85, 247, 0.2);
    background: linear-gradient(135deg,
        rgba(252, 211, 77, 0.15) 0%,
        rgba(168, 85, 247, 0.1) 50%,
        rgba(252, 211, 77, 0.15) 100%);
    position: relative;
    overflow: hidden;
    animation: multiplierPulse 2s ease-in-out infinite;
}

.tile-inner.multiplier-tile::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(252, 211, 77, 0.8) 50%,
        transparent 70%);
    border-radius: inherit;
    animation: multiplierRotate 3s linear infinite;
    z-index: 1;
}

.tile-inner.multiplier-tile::after {
    content: '⚡';
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
    color: #fcd34d;
    text-shadow: 0 0 5px rgba(252, 211, 77, 1);
    z-index: 2;
    animation: multiplierSpark 1.5s ease-in-out infinite;
}

.tile-inner.multiplier-tile .flare {
    background: radial-gradient(circle, rgba(252, 211, 77, 0.8) 0%, rgba(168, 85, 247, 0.6) 50%, transparent 100%);
    animation: multiplierFlare 1s ease-in-out infinite alternate;
}

/* Floating sparkles around multiplier tiles */
.tile-inner.multiplier-tile .sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fcd34d;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(252, 211, 77, 1);
    animation: sparkleFloat 2s ease-in-out infinite;
}

.tile-inner:not(.multiplier-tile) .sparkle {
    display: none;
}

.tile-inner.multiplier-tile .sparkle:nth-child(4) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.tile-inner.multiplier-tile .sparkle:nth-child(5) {
    top: 80%;
    right: 15%;
    animation-delay: 0.5s;
}

.tile-inner.multiplier-tile .sparkle:nth-child(6) {
    bottom: 15%;
    left: 80%;
    animation-delay: 1s;
}

@keyframes sparkleFloat {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translateY(-8px) scale(1);
    }
}

.tile-inner.multiplier-tile .txt {
    color: #ffffff;
    font-weight: 900;
    text-shadow:
        0 0 10px rgba(252, 211, 77, 1),
        0 0 20px rgba(168, 85, 247, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 3;
    font-size: 1.1em;
    letter-spacing: 0.5px;
}

@keyframes multiplierPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 30px rgba(252, 211, 77, 0.8),
            0 0 60px rgba(168, 85, 247, 0.6),
            inset 0 0 20px rgba(252, 211, 77, 0.4),
            inset 0 0 40px rgba(168, 85, 247, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 0 40px rgba(252, 211, 77, 1),
            0 0 80px rgba(168, 85, 247, 0.8),
            inset 0 0 25px rgba(252, 211, 77, 0.5),
            inset 0 0 50px rgba(168, 85, 247, 0.3);
    }
}

@keyframes multiplierRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes multiplierSpark {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

@keyframes multiplierFlare {
    0% {
        opacity: 0.6;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.multiplier-explosion {
    pointer-events: none;
    animation: multiplierBurst 0.6s ease-out;
}

@keyframes multiplierBurst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Obsolete animation: liquidWobble now handled via Web Animations API */

/* Tile spawn - organic droplet expansion */
@keyframes tileSpawn {
    0% {
        transform: scale(0);
        opacity: 0;
        filter: blur(10px);
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
        filter: blur(0px);
    }

    100% {
        transform: scale(1);
    }
}

.tile-inner.tile-spawn {
    animation: tileSpawn 300ms var(--ease-spring) forwards;
}

/* Merge flare  the .flare div inside a tile bursts bright on merge */
@keyframes mergeFlare {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0.55;
    }

    100% {
        opacity: 0;
    }
}

.tile-inner.liquid-merge .flare {
    animation: mergeFlare 500ms ease-out forwards;
}

@media (min-width: 480px) {
    .tile-inner {
        font-size: 40px;
    }

    .text-md {
        font-size: 34px;
    }

    .text-sm {
        font-size: 28px;
    }
}

/* Tile font scaling for narrow phones */
@media (max-width: 400px) {
    .tile-inner { font-size: 28px; }
    .text-md    { font-size: 23px !important; }
    .text-sm    { font-size: 19px !important; }
}

@media (max-width: 345px) {
    .tile-inner { font-size: 23px; }
    .text-md    { font-size: 19px !important; }
    .text-sm    { font-size: 16px !important; }
}

/* M3 Tonal Color Palette */
.bg-2 {
    background: hsl(230, 20%, 22%);
}

.bg-4 {
    background: hsl(225, 22%, 28%);
}

.bg-8 {
    background: hsl(217, 60%, 50%);
}

.bg-16 {
    background: hsl(239, 70%, 60%);
}

.bg-32 {
    background: hsl(263, 70%, 58%);
}

.bg-64 {
    background: hsl(271, 76%, 62%);
}

.bg-128 {
    background: hsl(292, 75%, 60%);
}

.bg-256 {
    background: hsl(330, 75%, 55%);
}

.bg-512 {
    background: hsl(350, 80%, 55%);
}

.bg-1024 {
    background: hsl(25, 90%, 52%);
}

.bg-2048 {
    background: hsl(43, 95%, 52%);
}

.bg-4096 {
    background: hsl(160, 70%, 42%);
}

.bg-8192 {
    background: hsl(199, 85%, 50%);
}

.bg-16384 {
    background: hsl(263, 80%, 50%);
}

.bg-32768 {
    background: hsl(346, 80%, 50%);
}

.bg-65536 {
    background: hsl(0, 0%, 95%);
    color: hsl(260, 20%, 10%) !important;
    text-shadow: none;
}

/* Hardware Overlays for glow effects */
.flare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Particle Layer */
.fx-layer {
    position: absolute;
    inset: -100px;
    width: calc(100% + 200px);
    height: calc(100% + 200px);
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* Directional Speed Trails */
.speed-trail {
    position: absolute;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 4px;
    pointer-events: none;
    z-index: 90;
    transform-origin: left center;
}

.shockwave {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.6);
}

/* Zen Clear Ripple - Removed as per user request to keep sparse boards clean */

.aura-purge {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    animation: auraPurgeContainer 4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* The Ethereal Ray Layer */
.aura-purge::before {
    content: '';
    position: absolute;
    inset: -50% -50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 90deg,
            transparent 180deg,
            rgba(255, 255, 255, 0.1) 270deg,
            transparent 360deg);
    opacity: 0;
    animation: auraPurgeRays 4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* The Expansion Wave Layer */
.aura-purge::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10vmax;
    height: 10vmax;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.8) 20%, rgba(139, 92, 246, 0.3) 50%, transparent 80%);
    border-radius: 50%;
    /* Removed blur for 120Hz performance */
    opacity: 0;
    animation: auraPurgeWave 4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.siphon-orb {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9), #60a5fa 40%, #3b82f6 80%);
    box-shadow: 0 0 10px rgba(96,165,250,0.95), 0 0 22px rgba(59,130,246,0.65), 0 0 40px rgba(147,51,234,0.35);
    pointer-events: none;
    z-index: 90;
}

/* --- STELLAR ERUPTION ENHANCEMENTS --- */
.heat-ripple {
    position: absolute;
    border: 2px solid #f97316;
    border-radius: 50%;
    pointer-events: none;
    z-index: 95;
    mix-blend-mode: screen;
    box-shadow: 0 0 20px #ea580c, inset 0 0 15px #f97316;
}

.flame-beam {
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fbbf24 20%, #f97316 50%, #ea580c 80%, transparent);
    border-radius: 4px;
    pointer-events: none;
    z-index: 96;
    box-shadow: 0 0 10px #ea580c, 0 0 15px #fbbf24;
    transform-origin: left center;
}

.upgrade-x2 {
    position: absolute;
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px #f97316, 0 0 20px #ea580c;
    pointer-events: none;
    z-index: 105;
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* SINGULARITY BLACK HOLE EFFECT */
/* Legacy class kept for backward compat */
.super-gravity-vortex {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.9) 20%,
        rgba(139, 92, 246, 0.6) 50%,
        rgba(99, 102, 241, 0.3) 70%,
        transparent 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(139, 92, 246, 0.8),
        0 0 40px rgba(139, 92, 246, 0.4),
        0 0 60px rgba(139, 92, 246, 0.2);
    pointer-events: none;
    z-index: 50;
    will-change: transform, opacity;
    position: relative;
}

.super-gravity-vortex::before {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.3) 70%,
        rgba(255, 255, 255, 0.1) 90%);
    animation: eventHorizon 1.5s infinite ease-in-out;
}

.super-gravity-vortex::after {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top: 2px solid rgba(139, 92, 246, 0.8);
    border-right: 2px solid rgba(99, 102, 241, 0.6);
    animation: blackHoleSpin 0.8s infinite linear;
}

/* NEW: Richer singularity vortex — three-layer accretion disk */
.singularity-vortex {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.95) 22%,
        rgba(88,28,135,0.7) 45%,
        rgba(139,92,246,0.45) 65%,
        rgba(99,102,241,0.2) 80%,
        transparent 100%);
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.95),
        0 0 30px rgba(139,92,246,0.9),
        0 0 60px rgba(139,92,246,0.5),
        0 0 100px rgba(139,92,246,0.25);
    pointer-events: none;
    will-change: transform, opacity;
    position: relative;
}

/* Outer accretion ring — slow spin */
.singularity-vortex::before {
    content: '';
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid rgba(168,85,247,0.8);
    border-right: 3px solid rgba(139,92,246,0.5);
    border-bottom: 3px solid rgba(99,102,241,0.3);
    animation: singularityOuterRing 1.1s linear infinite;
}

/* Inner event horizon shimmer */
.singularity-vortex::after {
    content: '';
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
        rgba(255,255,255,0.15) 0%,
        rgba(168,85,247,0.2) 40%,
        transparent 70%);
    animation: eventHorizon 1.8s ease-in-out infinite;
}

@keyframes singularityOuterRing {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(1); }
}

/* SIPHON PORTAL — iridescent wormhole ring */
.siphon-portal {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255,255,255,0.3) 0%,
        rgba(96,165,250,0.4) 20%,
        rgba(59,130,246,0.25) 45%,
        rgba(147,51,234,0.15) 65%,
        transparent 80%);
    box-shadow:
        0 0 25px rgba(96,165,250,0.9),
        0 0 55px rgba(59,130,246,0.6),
        0 0 90px rgba(147,51,234,0.35),
        inset 0 0 20px rgba(96,165,250,0.4);
    pointer-events: none;
    position: relative;
    will-change: transform, opacity;
}

.siphon-portal::before {
    content: '';
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top: 4px solid rgba(96,165,250,0.9);
    border-right: 4px solid rgba(167,139,250,0.7);
    border-bottom: 4px solid rgba(59,130,246,0.5);
    animation: siphonPortalSpin 0.6s linear infinite;
}

.siphon-portal::after {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    animation: siphonPortalSpin 0.9s linear infinite reverse;
}

@keyframes siphonPortalSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* SCORE SIPHON VISUALS */
.score-siphon-zone {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(96, 199, 255, 0.25) 25%,
        rgba(83, 180, 255, 0.1) 45%,
        transparent 70%);
    box-shadow:
        0 0 30px rgba(96, 199, 255, 0.85),
        0 0 80px rgba(57, 141, 255, 0.45);
    pointer-events: none;
    z-index: 58;
    will-change: transform, opacity;
    animation: siphonPulse 0.9s ease-out forwards;
}

.score-siphon-ray {
    position: absolute;
    width: 220px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(66, 165, 245, 0.8), transparent);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    z-index: 58;
    transform-origin: left center;
    box-shadow: 0 0 14px rgba(66, 165, 245, 0.9), 0 0 30px rgba(66, 165, 245, 0.6);
    animation: siphonRay 0.7s ease-out forwards;
}

.score-siphon-label {
    position: fixed;
    left: 50vw;
    top: 40vh;
    z-index: 9999;
    color: #80d8ff;
    font-weight: 900;
    font-size: 44px;
    letter-spacing: 0.18em;
    text-shadow: 0 0 20px #8ccaff, 0 0 40px #57a8ff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
    pointer-events: none;
    animation: siphonLabel 1.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes siphonPulse {
    0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.1; }
    30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    70% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.78; }
    100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

@keyframes siphonRay {
    0% { transform: translate(0, 0) scaleX(0); opacity: 0.4; }
    40% { transform: translate(0, 0) scaleX(1.05); opacity: 1; }
    100% { transform: translate(0, 0) scaleX(0.35); opacity: 0; }
}

@keyframes siphonLabel {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
    20% { opacity: 1; transform: translate(-50%, -45%) scale(1.08); }
    60% { opacity: 1; transform: translate(-50%, -66%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -80%) scale(0.75); }
}

@keyframes eventHorizon {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@keyframes blackHoleSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gravity-pulled {
    transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1) !important;
    filter: blur(2px) contrast(1.5);
    transform-origin: center center;
}

@keyframes auraPurgeContainer {
    0% {
        opacity: 0;
        background: transparent;
    }

    10% {
        opacity: 1;
        background: rgba(255, 255, 255, 0.1);
    }

    30% {
        opacity: 0.8;
        background: rgba(255, 255, 255, 0.05);
    }

    100% {
        opacity: 0;
        background: transparent;
    }
}

@keyframes auraPurgeRays {
    0% {
        transform: rotate(0deg) scale(0.5);
        opacity: 0;
    }

    10% {
        opacity: 1;
        transform: rotate(20deg) scale(1);
    }

    100% {
        transform: rotate(180deg) scale(2);
        opacity: 0;
    }
}

@keyframes auraPurgeWave {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

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

    100% {
        transform: translate(-50%, -50%) scale(calc(12 * var(--purge-scale, 1)));
        opacity: 0;
    }
}

/* SVG Lightning Layer */
.lightning-base {
    fill: none;
    stroke: #a855f7;
    stroke-width: 6;
    opacity: 0;
}

.lightning-core {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    opacity: 0;
}

/* Watermark Combo HUD */
.combo-hud {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 40;
    opacity: 0;
    transition: opacity 220ms ease-out;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
    contain: layout paint style;
}

@keyframes floatingLiquid {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    33% {
        transform: translate3d(6px, -10px, 0) rotate(1deg);
    }

    66% {
        transform: translate3d(-6px, 8px, 0) rotate(-1deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.combo-hud.active {
    opacity: 0.72;
    animation: floatingLiquid 7s infinite ease-in-out;
}

.combo-number {
    font-size: clamp(6rem, 20vw, 10.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.09);
    transform: scale(0.9);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Overlay */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    background: rgba(3, 3, 5, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms ease;
    border-radius: 32px;
    z-index: 200;
    padding: 24px;
    overflow: hidden;
}

.overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.btn-restart {
    background: linear-gradient(135deg, #f43f5e, #8b5cf6);
    border: none;
    color: #fff;
    padding: 16px 40px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 3px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
    transition: transform 0.2s;
}

.btn-restart:active {
    transform: scale(0.95);
}

/* Tile idle breathing */
@keyframes tileBreathe {

    0%,
    100% {
        transform: translateZ(0) scale(1);
    }

    50% {
        transform: translateZ(0) scale(1.018);
    }
}


/* --- KINETIC OVERHAUL: Physics-lite Animations --- */

/* Simple scale burst for merges (Clean & Snappy) */
@keyframes tileMergePop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.tile-inner.kinetic-merge {
    animation: tileMergePop 400ms var(--ease-fluid) forwards;
}

/* --- KINETIC IMPACT: Board Rumble --- */
.board-rumble {
    animation: boardRumble 300ms cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes boardRumble {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* --- TIERED PARTICLE SYSTEM --- */

.particle-dust {
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
}

.particle-spark {
    background: #fff;
    box-shadow: 0 0 8px currentColor;
}

.particle-neon {
    height: 2px !important;
    border-radius: 4px;
    box-shadow: 0 0 12px currentColor;
}

.particle-crystal {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* --- INTERACTIVE POLISH --- */

/* Magnetic Proximity Effect */
.tile-inner {
    transition: transform var(--speed-slide) var(--ease-fluid), border-color 0.4s ease, box-shadow 0.4s ease;
}



/* Improved Score Siphon */
.score-popup-liquid {
    font-family: 'Outfit', sans-serif;
    mix-blend-mode: screen;
}

/* Modals and New UI Elements */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 3, 5, 0.75);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background: hsl(260, 20%, 15%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px 24px 24px;
    width: 92%;
    max-width: 380px;
    max-height: 88dvh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 12px, 0) scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.15), opacity 0.25s ease;
    will-change: transform, opacity;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

.btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    width: 32px;
    height: 32px;
    aspect-ratio: 1 / 1;
    min-height: unset;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.18em;
    margin: 0 0 20px 0;
    text-align: center;
    text-transform: uppercase;
}

.leaderboard-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.leaderboard-mode-tab {
    min-height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s ease;
}

.leaderboard-mode-tab:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.95);
}

.leaderboard-mode-tab.active {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.45);
    color: #dbeafe;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

@keyframes mode-toggle-glimmer {
    0%, 72%  { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
    74%      { opacity: 1; }
    88%, 100%{ transform: translateX(280%) skewX(-18deg); opacity: 0; }
}

.mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(218, 165, 32, 0.30);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 7px 0px rgba(218, 165, 32, 0.14);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Occasional glimmer sweep */
.mode-toggle::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -25%;
    width: 35%;
    height: 220%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 223, 100, 0.10) 40%,
        rgba(255, 255, 220, 0.26) 50%,
        rgba(255, 223, 100, 0.10) 60%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 10;
    animation: mode-toggle-glimmer 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Sliding active pill */
.mode-toggle::before {
    content: '';
    position: absolute;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    top: 3px;
    left: 3px;
    background: linear-gradient(160deg, rgba(120, 110, 255, 0.72) 0%, rgba(79, 99, 241, 0.82) 100%);
    border-radius: 8px;
    transition: left 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
    pointer-events: none;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 0 14px rgba(99, 102, 241, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 0;
}

.mode-toggle.mode-normal::before {
    left: calc(50%);
    background: linear-gradient(160deg, rgba(100, 116, 139, 0.65) 0%, rgba(71, 85, 105, 0.75) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 0 8px rgba(100, 116, 139, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

.mode-toggle-btn {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.mode-toggle-btn:hover {
    color: rgba(255, 255, 255, 0.55);
}

.mode-toggle-btn.active {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 0 12px rgba(165, 180, 252, 0.6);
}

.mode-icon {
    font-size: 0.65rem;
    opacity: 0.45;
    transition: opacity 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
}

.mode-toggle-btn.active .mode-icon {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(252, 211, 77, 0.9));
}

@media (max-width: 480px) {
    .header-row-top {
        align-items: flex-start;
        gap: 10px;
    }

    .game-title h1 {
        font-size: 1.55rem;
        letter-spacing: 0.13em;
    }

    .game-scores {
        gap: 6px;
    }

    .score-pill {
        min-width: 56px;
        padding: 6px 11px;
        border-radius: 12px;
    }

    .score-value {
        font-size: clamp(0.72rem, 4vw, 1.1rem);
        white-space: nowrap;
    }

    .header-row-actions {
        column-gap: 12px;
    }

    .btn-action,
    .mode-toggle {
        min-height: 44px;
    }

    .btn-action {
        padding: 0 10px;
        font-size: 0.66rem;
        letter-spacing: 0.07em;
    }

    .mode-toggle-btn {
        min-height: 40px;
        font-size: 0.66rem;
        letter-spacing: 0.07em;
    }

    .header-utility-actions {
        gap: 6px;
        grid-template-columns: repeat(4, 40px);
    }

    .btn-icon-action {
        width: 40px;
        min-width: 40px;
        font-size: 14px;
    }
}

/* Info Modal Specifics */
.info-content {
    max-width: 450px;
}

.info-scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 15px 0;
    text-align: left;
}

.info-scrollable::-webkit-scrollbar {
    width: 4px;
}

.info-scrollable::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.info-section {
    margin-bottom: 24px;
    animation: slideUpFade 0.5s ease-out forwards;
    opacity: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-section h3 {
    margin-bottom: 10px;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    color: #8b5cf6;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.info-section p {
    font-size: 0.85em;
    line-height: 1.6;
    opacity: 0.8;
}

.info-list {
    margin-top: 8px;
    padding-left: 0;
    list-style: none;
}

.info-list li {
    font-size: 0.8em;
    margin-bottom: 6px;
    padding-left: 15px;
    position: relative;
    opacity: 0.9;
}

.info-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #8b5cf6;
}

.info-section:nth-child(1) {
    animation-delay: 0.1s;
}

.info-section:nth-child(2) {
    animation-delay: 0.2s;
}

.info-section:nth-child(3) {
    animation-delay: 0.3s;
}

.leaderboard-personal {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
    /* Hidden until loaded */
}

.leaderboard-personal.active {
    display: block;
}

.leaderboard-personal .leaderboard-row {
    background: rgba(139, 92, 246, 0.15);
    /* Purple tint for player */
    border: 1px solid rgba(139, 92, 246, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 8px;
}

.leaderboard-list::-webkit-scrollbar {
    width: 6px;
}

.leaderboard-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.leaderboard-loading {
    text-align: center;
    color: rgba(165, 180, 252, 0.8);
    font-size: 0.9rem;
    padding: 20px 0;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 4px;
    border-radius: 0;
    transition: background 0.15s;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.lb-rank {
    font-weight: 700;
    color: rgba(165, 180, 252, 0.6);
    width: 28px;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.lb-name {
    flex: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.lb-score {
    font-weight: 700;
    color: rgba(252, 211, 77, 0.9);
    font-size: 0.9rem;
}

/* Rank specific colors */
.leaderboard-row[data-rank="1"] .lb-rank {
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.leaderboard-row[data-rank="2"] .lb-rank {
    color: #94a3b8;
}

.leaderboard-row[data-rank="3"] .lb-rank {
    color: #b45309;
}

/* Score Submission section */
.submit-score-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 240px;
    margin-bottom: 24px;
}

.name-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    color: #fff;
    padding: 8px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    text-align: right;
    width: 180px;
    transition: border-color 0.2s;
    /* iOS Safeguards */
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
}

.name-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 400;
}

.name-input:focus:not(:read-only) {
    border-color: rgba(99, 102, 241, 0.6);
}

.name-input:read-only {
    color: rgba(255, 255, 255, 0.5);
    border-color: transparent;
    cursor: default;
}

.btn-submit-score {
    width: 100%;
    background: rgba(99, 102, 241, 0.2);
    color: rgba(165, 170, 255, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.35);
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-top: 8px;
    min-height: unset;
}

.btn-submit-score:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(99, 102, 241, 0.55);
    color: #fff;
}

.btn-submit-score:active {
    transform: scale(0.98);
}

.btn-submit-score:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: not-allowed;
    transform: scale(1);
}

/* Secondary Action: Skip */
.btn-skip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 12px 24px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
}

.btn-skip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-skip:active {
    transform: scale(0.95);
}

.submit-success {
    color: #10b981;
    font-size: 14px;
    font-weight: 700;
    display: none;
}

/* Secondary Action: Delete Score */
.btn-delete-score {
    background: transparent;
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: rgba(244, 63, 94, 0.8);
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: -4px;
}

.btn-delete-score:hover {
    background: rgba(244, 63, 94, 0.1);
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.6);
}

.btn-delete-score:active {
    transform: scale(0.95);
}

.btn-reset-local {
    background: transparent;
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: rgba(251, 191, 36, 0.95);
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset-local:hover {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fbbf24;
}

.btn-reset-local:active {
    transform: scale(0.95);
}

/* Score panel bounce */
@keyframes scoreBounce {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.hud-panel.bounce {
    animation: scoreBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Unified Ad Container (moved below) */

/* Profile Modal Specifics */
.profile-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
    width: 100%;
    position: relative;
}

.profile-details .profile-stat:nth-child(1) { animation-delay: 0.1s; }
.profile-details .profile-stat:nth-child(2) { animation-delay: 0.2s; }
.profile-details .profile-stat:nth-child(3) { animation-delay: 0.3s; }
.profile-details .profile-stat:nth-child(4) { animation-delay: 0.4s; }
.profile-details .profile-stat:nth-child(5) { animation-delay: 0.5s; }

.profile-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.88rem;
    animation: stat-entrance 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes stat-entrance {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.name-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    padding: 8px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
    flex: 1;
    min-width: 0;
    max-width: 180px;
    /* iOS Safeguards */
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
}

.name-input:focus {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.5);
}

.name-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.profile-stat:last-child {
    border-bottom: none;
}

.profile-stat span:first-child {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-stat .stat-val {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 0.9rem;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* XP Bar Styling */
.xp-bar-bg {
    width: 100%;
    height: 8px;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
    position: relative;
}

.xp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: xp-shine 2s ease-in-out infinite;
}

@keyframes xp-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.profile-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Enhanced Button Styling for Profile Actions */
.profile-actions .btn-submit-score {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    border-radius: 12px;
    color: white;
    padding: 14px 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    position: relative;
    overflow: hidden;
}

.profile-actions .btn-submit-score::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.profile-actions .btn-submit-score:hover::before {
    left: 100%;
}

.profile-actions .btn-submit-score:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.profile-actions .btn-submit-score:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

/* Sync Status Badges */
.sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.15);
    /* Emerald tone */
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    border-radius: 999px;
    font-size: 0.85em;
    font-weight: 600;
    animation: fadeIn 0.3s ease-out;
}

.sync-badge-action {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    cursor: pointer;
    transition: all 0.2s;
}

.sync-badge-action:hover {
    background: rgba(99, 102, 241, 0.25);
    transform: scale(1.02);
}

/* ===== GAME CONTROLS BAR ===== */
.game-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px auto 20px auto;
    width: fit-content;
    max-width: 480px;
}

.btn-cta {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-cta:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
}

.btn-cta:active {
    transform: scale(0.97);
}

/* Highlight the primary action */
.btn-cta:first-child {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.35);
    color: rgba(165, 170, 255, 0.95);
}

.btn-cta:first-child:hover {
    background: rgba(99, 102, 241, 0.28);
    border-color: rgba(99, 102, 241, 0.5);
    color: #fff;
}

.btn-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 6px;
    flex-shrink: 0;
}

.btn-ghost {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    transform: scale(1.08);
}

.btn-ghost:active {
    transform: scale(0.92);
}

/* Keep btn-premium / btn-secondary for modals etc. */
.btn-premium {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s ease;
}

.btn-premium:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-secondary {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: opacity 0.2s ease;
}

.btn-secondary:hover {
    opacity: 0.88;
}

@media (max-width: 380px) {
    .btn-cta {
        padding: 0 14px;
        font-size: 0.75rem;
    }

    .btn-ghost {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}


/* Legal Content Polish */
.legal-content {
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.legal-text {
    overflow-y: auto;
    text-align: left;
    padding-right: 10px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.legal-text h3 {
    color: #fff;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 700;
}

.legal-text p {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.legal-text a {
    color: #818cf8;
    text-decoration: underline;
}

.legal-text::-webkit-scrollbar {
    width: 6px;
}

.legal-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.legal-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* DOM Object Pooling Classes */
.pooled-idle {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Site Footer  minimal legal link */
.site-footer {
    text-align: center;
    padding: 16px 0 env(safe-area-inset-bottom, 24px);
    margin-top: -8px;
}

.site-footer-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.site-footer-link:hover {
    color: rgba(255, 255, 255, 0.55);
}

/* Hide old footer row (no longer used) */
.game-footer {
    display: none;
}

/* Removed duplicate ad block and secondary actions */

body.modal-open {
    overflow: hidden;
    touch-action: none;
    position: fixed;
    width: 100%;
}

.modal-overlay {
    touch-action: none;
}

.modal-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.fx-canvas {
    position: absolute;
    inset: -50px;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
    pointer-events: none;
    z-index: 50;
}

/* Impact Effects */
@keyframes chromaticImpact {
    0% {
        filter: saturate(1) brightness(1) contrast(1);
    }

    15% {
        filter: saturate(2) brightness(1.3) contrast(1.1);
    }

    100% {
        filter: saturate(1) brightness(1) contrast(1);
    }
}

.chromatic-pulse {
    animation: chromaticImpact 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Gooey Grid Pulse */
@keyframes gooeyCascade {
    0% {
        filter: contrast(1);
    }

    50% {
        filter: contrast(1.1) saturate(1.1);
    }

    100% {
        filter: contrast(1);
    }
}

.board-wrapper.velocity-active .board {
    animation: gooeyCascade 2s infinite ease-in-out;
}

.sync-status-section {
    margin: 20px 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Inline Endgame Identity Form */
.inline-name-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 280px;
    margin: 32px auto;
    animation: slideUpFade 0.6s var(--ease-fluid) forwards;
    z-index: 10;
}

.inline-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    /* iOS Safeguards */
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
}

.inline-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
    letter-spacing: 0.05em;
}

.inline-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 25px rgba(99, 102, 241, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.btn-inline-save {
    width: 100%;
    padding: 16px;
    background: var(--accent-gradient);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
    margin-top: 8px;
}

.btn-inline-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}

.btn-inline-save:active {
    transform: translateY(0);
}

.btn-inline-save:disabled {
    opacity: 0.5;
    cursor: wait;
    transform: none;
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        max-width: none;
        padding: 24px 20px 20px;
        max-height: 90dvh;
        border-radius: 16px;
    }

    .modal-title {
        font-size: 0.7rem;
        margin-bottom: 16px;
    }

    .btn-close {
        top: 12px;
        right: 12px;
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    /* Profile Modal Mobile Enhancements */
    .profile-details {
        gap: 12px;
        margin: 16px 0;
    }

    .profile-details::before {
        width: 40px;
        height: 1px;
    }

    .profile-stat {
        padding: 11px 13px;
        font-size: 0.82rem;
    }

    .profile-stat span:first-child {
        font-size: 0.7rem;
    }

    .profile-stat .stat-val {
        font-size: 0.85rem;
    }

    .name-input {
        padding: 7px 10px;
        font-size: 0.82rem;
        max-width: 160px;
    }

    .xp-bar-bg {
        height: 6px;
    }

    .profile-actions {
        margin-top: 20px;
        gap: 10px;
    }

    .profile-actions .btn-submit-score {
        padding: 12px 16px;
        font-size: 0.8rem;
    }

    .sync-card {
        padding: 16px;
        margin: 12px 0;
    }

    .sync-card-header {
        gap: 10px;
        margin-bottom: 14px;
    }

    .sync-card-icon {
        font-size: 1.1rem;
    }

    .sync-card-header h3 {
        font-size: 0.8rem;
    }

    /* Info Modal Mobile Enhancements */
    .info-content {
        max-width: none;
    }

    .info-scrollable {
        margin: 10px 0;
    }

    .info-grid {
        gap: 12px;
    }

    .info-module {
        padding: 14px 13px;
    }

    .module-header h3 {
        font-size: 0.88rem;
    }

    .info-module p {
        font-size: 0.88rem;
    }

    .info-list li,
    .chain-row,
    .chain-label {
        font-size: 0.84rem;
    }

    .btn-restore-full,
    .btn-submit-score {
        min-height: 40px;
    }

}


/* Tablet and medium screen enhancements */
@media (max-width: 768px) and (min-width: 481px) {
    .modal-content {
        width: 90%;
        padding: 26px 22px 22px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .info-module {
        padding: 18px;
    }

    .profile-stat {
        padding: 16px 18px;
    }

    .name-input {
        max-width: 180px;
    }
}

@media (max-width: 480px) {
    .overlay {
        padding: 20px 24px;
        justify-content: center;
        overflow-y: auto;
    }

    .overlay-title {
        font-size: 1.4rem;
        margin-bottom: 4px;
        letter-spacing: 0.2em;
    }

    .overlay-subtitle {
        font-size: 0.65rem;
        margin-bottom: 8px;
    }

    .overlay-score-val {
        font-size: 2.2rem;
        margin-bottom: 2px;
    }

    .overlay-best {
        font-size: 0.8rem;
        margin-bottom: 8px;
    }

    .inline-name-form {
        margin: 8px auto;
        gap: 8px;
        width: 100%;
        max-width: 260px;
    }

    .sync-status-section {
        margin: 10px 0;
        min-height: 40px;
    }

    .inline-input {
        padding: 10px;
        font-size: 16px;
    }

    .btn-inline-save {
        padding: 12px;
        font-size: 11px;
    }

    .btn-skip {
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 8px 16px;
    }
}

.site-footer {
    padding: 24px;
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0.8;
    /* Layer Isolation */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.site-footer-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    min-height: unset;
    padding: 10px;
    transition: color 0.2s;
}

.site-footer-link:hover {
    color: rgba(255, 255, 255, 0.8);
}


@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------ */
/* KINETIC IMPACT — new visual effect rules    */
/* ------------------------------------------ */

/* Board must create an isolation stacking context so the supernova backdrop-filter
   affects tiles at z-index < 18 but NOT the hero tile at z-index 25.
   isolation:isolate ensures the overlay's backdrop-filter is scoped to the board. */
.board {
    isolation: isolate;
}

/* Board overlay combo tiers */
.combo-hud.chain-4 .combo-number {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.26) 0%, rgba(56, 189, 248, 0.02) 70%, rgba(56, 189, 248, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.combo-hud.chain-6 .combo-number {
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.3) 0%, rgba(244, 114, 182, 0.03) 70%, rgba(244, 114, 182, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.combo-hud.chain-8 .combo-number {
    background: linear-gradient(180deg, rgba(251, 146, 60, 0.34) 0%, rgba(251, 146, 60, 0.04) 70%, rgba(251, 146, 60, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.combo-hud.chain-10 .combo-number {
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.42) 0%, rgba(250, 204, 21, 0.06) 70%, rgba(250, 204, 21, 0) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Near-merge anticipation glow — tiles that can merge on the next slide */
.tile.near-merge .tile-inner {
    box-shadow:
        0 0 0 2px rgba(251, 191, 36, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.3);
    animation: nearMergePulse 1s infinite ease-in-out;
}

@keyframes nearMergePulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.85), 0 0 12px rgba(251, 191, 36, 0.4);
    }
}

/* --- ACHIEVEMENT BADGE SYSTEM --- */
.profile-badges-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    margin-top: 15px;
    text-transform: uppercase;
    display: block;
}

.profile-badges-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-chip {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    font-size: 1.4rem;
    position: relative;
    cursor: help;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-chip:hover {
    transform: scale(1.15) translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.badge-chip.locked {
    filter: grayscale(1) brightness(0.4);
    opacity: 0.3;
}

.badge-chip::after {
    content: attr(data-name);
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    color: rgba(255, 255, 255, 0.6);
}

.badge-chip:hover::after {
    opacity: 1;
}


/* --- LIGHTNING HINT --- */
#lightning-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

.lightning-arc {
    fill: none;
    stroke: #60a5fa;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px #3b82f6);
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: lightning-draw 0.5s forwards, lightning-flicker 0.15s infinite;
}

@keyframes lightning-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lightning-flicker {

    0%,
    100% {
        opacity: 1;
        stroke-width: 3;
    }

    50% {
        opacity: 0.7;
        stroke-width: 4;
    }
}

.tile-hint-pulse {
    animation: hint-pulse 1.5s infinite;
}

@keyframes hint-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
    }

    50% {
        box-shadow: 0 0 25px 8px rgba(96, 165, 250, 0.6);
    }
}

.ghost-hint-tile {
    pointer-events: none;
    z-index: 15;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- BADGE DETAIL AREA --- */
.badge-detail-area {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    backdrop-filter: blur(4px);
}

.badge-detail-placeholder {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    letter-spacing: 0.05em;
}

.badge-detail-icon {
    font-size: 2.8rem;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    flex-shrink: 0;
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
}

.badge-detail-icon.locked {
    opacity: 0.3;
    filter: grayscale(1);
}

.badge-detail-content {
    flex-grow: 1;
}

.badge-detail-name {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-detail-name.locked {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-detail-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    font-weight: 500;
}

/* --- PUBLIC PROFILE MODAL --- */
.public-profile-content {
    max-width: 380px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    text-align: center;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.public-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-rank-badge {
    width: 50px;
    height: 50px;
    background: #fbbf24;
    color: #000;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.4rem;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    flex-shrink: 0;
}

.public-profile-tier {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.public-profile-stats {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.pub-stat {
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
}

.pub-stat-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.15em;
    margin-bottom: 5px;
}

.pub-stat-val {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.public-profile-badges-section {
    text-align: left;
}

.pub-badges-header {
    font-size: 0.7rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.public-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Premium Badge Toasts */
.badge-toast {
    position: fixed;
    top: max(25px, calc(env(safe-area-inset-top, 0px) + 16px));
    right: max(16px, env(safe-area-inset-right, 16px));
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 10px 30px 10px 10px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 11000;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: translateX(120%) scale(0.8);
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: right center;
    pointer-events: none;
    max-width: min(340px, calc(100vw - 32px));
}

.badge-toast-in {
    animation: toast-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.badge-toast-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.badge-toast-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.badge-toast-title {
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #fbbf24;
    text-transform: uppercase;
    margin-bottom: 0px;
    opacity: 0.9;
}

.badge-toast-name {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.badge-toast-desc {
    display: none;
    /* Hide desc in toast for cleaner pill look */
}

@keyframes toast-in {
    0% {
        transform: translateX(120%) scale(0.8);
        opacity: 0;
    }

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

.badge-toast-out {
    animation: toast-out 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes toast-out {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(120%) scale(0.8);
        opacity: 0;
    }
}

/* Interactivity for LB rows */
.leaderboard-row {
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.08);
}

.leaderboard-row:active {
    transform: scale(0.98);
}

/* Tier Icons and Pulsing Animation */
.tier-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    font-size: 1.1em;
    vertical-align: middle;
    padding: 0 4px;
}

.tier-novice {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.tier-apprentice {
    text-shadow: 0 0 4px rgba(249, 115, 22, 0.7);
}

.tier-adept {
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.9);
}

.tier-mystic {
    text-shadow: 0 0 6px rgba(6, 182, 212, 0.9);
}

.tier-ascendant {
    text-shadow: 0 0 8px rgba(168, 85, 247, 1);
}

.tier-luminary {
    filter: drop-shadow(0 0 3px rgba(34, 211, 238, 1));
}

.tier-sovereign {
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 1));
}

.tier-legendary {
    filter: drop-shadow(0 0 5px #c084fc);
    animation: stellarPulse 3s infinite alternate;
}

.tier-swiper {
    text-shadow: 0 0 6px rgba(148, 163, 184, 0.8);
}

.tier-hoarder {
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
}

.tier-master {
    text-shadow: 0 0 10px rgba(168, 85, 247, 1);
    animation: stellarPulse 4s infinite alternate;
}

.tier-zenith {
    filter: drop-shadow(0 0 8px #fff);
    animation: zenithPulse 2s infinite;
}

.tier-transcendent {
    filter: drop-shadow(0 0 10px #fbbf24) drop-shadow(0 0 22px #a78bfa);
    animation: transcendentPulse 2.2s infinite alternate;
}

.tier-emperor {
    filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px #60a5fa);
    animation: emperorPulse 1.8s infinite;
}

.tier-eternal {
    filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 32px #f0abfc);
    animation: eternalPulse 1.4s infinite;
}

@keyframes transcendentPulse {
    0%   { filter: drop-shadow(0 0 8px #fbbf24) drop-shadow(0 0 18px #a78bfa); }
    33%  { filter: drop-shadow(0 0 12px #f472b6) drop-shadow(0 0 26px #60a5fa); }
    66%  { filter: drop-shadow(0 0 10px #34d399) drop-shadow(0 0 22px #fbbf24); }
    100% { filter: drop-shadow(0 0 14px #a78bfa) drop-shadow(0 0 28px #f472b6); }
}

@keyframes emperorPulse {
    0%,100% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #c084fc); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 38px #fbbf24); transform: scale(1.18); }
}

@keyframes eternalPulse {
    0%,100% { filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 26px rgba(251,191,36,0.9)); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 24px #fff) drop-shadow(0 0 48px rgba(255,255,255,1)); transform: scale(1.28); }
}

@keyframes zenithPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px #fff);
    }

    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 15px #fbbf24);
    }
}

@keyframes stellarPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px #c084fc);
    }

    100% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px #fbbf24);
    }
}

/* --- CUSTOM SCROLLBARS (Premium Dark) --- */
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 4px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- ONBOARDING OVERLAY (Non-Blocking Guide) --- */
@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.onboarding-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, rgba(8, 5, 22, 0.3) 100%);
    pointer-events: none;
    /* Crucial: clicks pass through */
    border-radius: inherit;
    animation: fadeInOverlay 0.8s ease forwards;
}

.onboarding-overlay.hiding {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.onboarding-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px;
}

.onboarding-swipe-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.swipe-hand {
    font-size: 2.5rem;
    animation: swipeAnimation 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    display: block;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
}

@keyframes swipeAnimation {
    0% {
        transform: translate(-20%, 0) rotate(-10deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translate(20%, 0) rotate(10deg);
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(40%, 0) rotate(15deg);
        opacity: 0;
    }
}

.onboarding-title {
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
    margin-bottom: 2px;
}

.onboarding-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    letter-spacing: 0.05em;
}

/* --- BADGE TOOLTIP (Body Anchored) --- */
.badge-tooltip {
    position: fixed;
    /* Fixed to body to avoid modal clipping */
    width: 180px;
    background: rgba(25, 20, 45, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.3);
    text-align: center;
}

.badge-tooltip-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.badge-tooltip-desc {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.73);
    line-height: 1.4;
}

.badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(25, 20, 45, 0.92);
}.badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(25, 20, 45, 0.92);
}

/* --- REDESIGNED SYNC CARD --- */
.sync-card {
    background:
        radial-gradient(140% 120% at 0% 0%, rgba(139, 92, 246, 0.16), transparent 55%),
        linear-gradient(165deg, rgba(30, 20, 56, 0.92), rgba(22, 18, 44, 0.88));
    border: 1px solid rgba(167, 139, 250, 0.26);
    border-radius: 16px;
    padding: 16px;
    margin: 14px 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
    position: relative;
    overflow: hidden;
}

.sync-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 20%, rgba(255, 255, 255, 0.05) 50%, transparent 80%);
    pointer-events: none;
}

.sync-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(167, 139, 250, 0.24);
    padding-bottom: 10px;
}

.sync-card-icon {
    font-size: 1.15rem;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.45));
}

.sync-card-header h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(244, 238, 255, 0.96);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sync-field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sync-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-field label {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sync-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sync-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #d8b4fe;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sync-mono.masked {
    -webkit-text-security: disc;
    text-security: disc;
    opacity: 0.5;
    letter-spacing: 0.3em;
}

.btn-sync-mini {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.btn-sync-mini:hover {
    background: rgba(139, 92, 246, 0.35);
    border-color: #a855f7;
    transform: translateY(-1px);
}

.sync-security-note {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    margin-top: 15px;
    line-height: 1.5;
    text-align: center;
}

.sync-restore-form {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(196, 181, 253, 0.32);
}

.restore-title {
    font-size: 0.66rem;
    font-weight: 800;
    color: rgba(196, 181, 253, 0.96);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-align: left;
}

.restore-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.modern-input {
    background: rgba(16, 12, 33, 0.76);
    border: 1px solid rgba(167, 139, 250, 0.34);
    border-radius: 10px;
    padding: 10px 12px;
    color: rgba(247, 243, 255, 0.98);
    font-size: 0.84rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.modern-input:focus {
    border-color: rgba(168, 85, 247, 0.78);
    background: rgba(20, 14, 40, 0.92);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

.btn-restore-full {
    width: 100%;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border: none;
    color: rgba(248, 250, 252, 0.98);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.72rem;
    padding: 10px 12px;
    border-radius: 10px;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-export {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: rgba(168, 85, 247, 0.16);
    border: 1px solid rgba(168, 85, 247, 0.38);
    border-radius: 8px;
    color: rgba(245, 243, 255, 0.96);
    padding: 9px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 12px;
    white-space: normal;
    text-align: center;
}

/* --- SCANNABLE INFO MODAL --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding-bottom: 8px;
}

.info-module {
    background:
        linear-gradient(155deg, rgba(36, 25, 64, 0.9), rgba(28, 20, 52, 0.66)),
        radial-gradient(100% 140% at 0% 0%, rgba(168, 85, 247, 0.16), transparent 55%);
    border: 1px solid rgba(167, 139, 250, 0.2);
    border-radius: 14px;
    padding: 18px 16px;
    position: relative;
    overflow: hidden;
    animation: module-entrance 0.5s ease-out forwards;
    opacity: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@keyframes module-entrance {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.info-module:nth-child(1) { animation-delay: 0.05s; }
.info-module:nth-child(2) { animation-delay: 0.10s; }
.info-module:nth-child(3) { animation-delay: 0.15s; }
.info-module:nth-child(4) { animation-delay: 0.20s; }
.info-module:nth-child(5) { animation-delay: 0.25s; }
.info-module:nth-child(6) { animation-delay: 0.30s; }
.info-module:nth-child(7) { animation-delay: 0.35s; }
.info-module:nth-child(8) { animation-delay: 0.40s; }

.module-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    position: relative;
}

.module-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.32);
    flex-shrink: 0;
}

.module-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(244, 238, 255, 0.98);
}

.info-module p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 12px 0;
    color: rgba(229, 220, 255, 0.9);
    font-weight: 400;
}

/* Plain bullet list used in new info modal */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.info-list li {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(222, 212, 255, 0.95);
    padding: 9px 12px;
    background: rgba(20, 14, 40, 0.5);
    border-radius: 9px;
    border-left: 3px solid rgba(168, 85, 247, 0.6);
}

.info-list.info-list-spaced li {
    padding: 11px 12px;
}

.info-sub {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    color: rgba(200, 190, 240, 0.8);
    font-weight: 400;
    line-height: 1.45;
}

/* Chain table — replaces old module-detail for combos/ranks */
.info-chain-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.chain-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(20, 14, 40, 0.5);
    border-radius: 9px;
    font-size: 0.88rem;
    color: rgba(222, 212, 255, 0.95);
    line-height: 1.4;
}

.chain-row.chain-highlight {
    background: rgba(100, 60, 180, 0.18);
    border: 1px solid rgba(167, 139, 250, 0.18);
}

/* ── Mode Toast ─────────────────────────────────────────────── */
@keyframes mode-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}
@keyframes mode-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(0.95); }
}

.mode-toast {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 9800;
    width: var(--toast-width, min(340px, calc(100vw - 20px)));
    max-width: calc(100vw - 20px);
    background: linear-gradient(155deg, rgba(22, 14, 48, 0.97), rgba(30, 20, 60, 0.97));
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05) inset;
    padding: 16px 20px 14px;
    pointer-events: auto;
    cursor: pointer;
    animation: mode-toast-in 0.26s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.mode-toast:active {
    opacity: 0.7;
    transition: opacity 0.1s;
}
.mode-toast.hiding {
    animation: mode-toast-out 0.32s ease-in forwards;
}
.mode-toast-title {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mode-toast-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mode-toast-list li {
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(220, 210, 255, 0.92);
    padding-left: 18px;
    position: relative;
}
.mode-toast-list li::before {
    content: '›';
    position: absolute;
    left: 4px;
    color: rgba(167, 139, 250, 0.7);
    font-weight: 700;
}
.mode-toast-hint {
    font-size: 0.75rem;
    color: rgba(167, 139, 250, 0.55);
    text-align: center;
    letter-spacing: 0.05em;
}

.chain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    text-align: center;
}

.chain-nice        { background: rgba(59, 130, 246, 0.22);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.chain-stellar     { background: rgba(251, 146, 60, 0.22);  color: #fdba74; border: 1px solid rgba(251,146,60,0.35); }
.chain-singularity { background: rgba(244, 63, 94, 0.22);   color: #fda4af; border: 1px solid rgba(244,63,94,0.35); }
.chain-siphon      { background: rgba(168, 85, 247, 0.25);  color: #d8b4fe; border: 1px solid rgba(168,85,247,0.4); }
.chain-legendary   { background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(239,68,68,0.22)); color: #fde68a; border: 1px solid rgba(251,146,60,0.5); }

.chain-label {
    flex: 1;
    font-size: 0.86rem;
    color: rgba(230, 220, 255, 0.92);
}

.rank-xp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(167, 139, 250, 0.25);
    flex-shrink: 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.info-module strong {
    color: rgba(248, 250, 252, 0.98);
    font-weight: 700;
}

.module-detail {
    font-size: 0.86rem;
    line-height: 1.6;
    color: rgba(222, 212, 255, 0.92);
    background: rgba(20, 14, 40, 0.56);
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 3px solid rgba(168, 85, 247, 0.78);
    margin-top: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.module-detail strong {
    color: rgba(248, 245, 255, 0.98);
    margin-right: 4px;
}

.combo-list li span {
    color: #fff;
    opacity: 0.5;
}

.special-item {
    font-size: 0.78rem;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: 8px;
    border-left: 3px solid rgba(139, 92, 246, 0.5);
    line-height: 1.5;
}

.special-item strong {
    display: block;
    color: #fff;
    margin-bottom: 4px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.tier-preview {
    display: flex;
    gap: 10px;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 12px;
    font-size: 1.1rem;
    border: 1px solid rgba(255,255,255,0.05);
}

.tier-preview span {
    filter: drop-shadow(0 0 8px currentColor);
    opacity: 0.8;
}

/* --- INFO MODAL READABILITY UPGRADE --- */
#info-modal .modal-content {
    width: min(94vw, 620px);
    max-width: 620px;
    max-height: 90dvh;
    padding: 30px 24px 22px;
}

#info-modal .modal-title {
    font-size: clamp(0.86rem, 1.6vw, 0.98rem);
    letter-spacing: 0.16em;
    color: rgba(244, 238, 255, 0.82);
    margin-bottom: 18px;
}

#info-modal .info-scrollable {
    margin: 14px 0;
    max-height: calc(90dvh - 190px);
    padding-right: 2px;
}

#info-modal .info-grid {
    gap: 16px;
    padding-bottom: 12px;
}

#info-modal .info-module {
    border-radius: 16px;
    padding: 18px 18px 16px;
    border-color: rgba(196, 181, 253, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 24px rgba(8, 4, 20, 0.35);
}

#info-modal .module-header {
    gap: 12px;
    margin-bottom: 13px;
}

#info-modal .module-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.15rem;
}

#info-modal .module-header h3 {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
}

#info-modal .info-module p {
    font-size: 0.98rem;
    line-height: 1.62;
    margin-bottom: 12px;
}

#info-modal .module-detail {
    font-size: 0.9rem;
    line-height: 1.68;
    border-left-width: 4px;
    padding: 13px 14px;
}

#info-modal .module-detail strong {
    font-weight: 800;
}

@media (max-width: 480px) {
    #info-modal .modal-content {
        width: 95%;
        max-height: 92dvh;
        padding: 22px 16px 16px;
    }

    #info-modal .modal-title {
        font-size: 0.8rem;
        letter-spacing: 0.14em;
    }

    #info-modal .info-scrollable {
        max-height: calc(92dvh - 170px);
        margin: 10px 0;
    }

    #info-modal .info-grid {
        gap: 12px;
    }

    #info-modal .info-module {
        padding: 14px;
        border-radius: 14px;
    }

    #info-modal .module-header h3 {
        font-size: 0.75rem;
    }

    #info-modal .info-module p {
        font-size: 0.92rem;
        line-height: 1.56;
    }

    #info-modal .module-detail {
        font-size: 0.86rem;
        line-height: 1.58;
        padding: 10px 11px;
    }
}

/* --- LANDSCAPE MOBILE OPTIMIZATION --- */
@media (max-height: 480px) and (orientation: landscape) {
    :root {
        --cell-size: 54px;
        --gap: 8px;
        --board-padding: 10px;
    }

    .game-container {
        gap: 4px;
        padding: 4px 0;
    }

    .game-title h1 {
        font-size: 1.1rem;
        letter-spacing: 0.1em;
    }

    /* Hide rival tracker in landscape — not enough vertical space */
    .rival-tracker-container {
        display: none;
    }

    .btn-action,
    .mode-toggle {
        min-height: 36px;
    }

    .mode-toggle-btn {
        min-height: 32px;
        font-size: 0.62rem;
    }

    .header-row-actions {
        column-gap: 10px;
    }

    .tile-inner {
        font-size: 20px;
    }

    .text-md { font-size: 17px !important; }
    .text-sm { font-size: 14px !important; }

    .site-footer {
        padding: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BONUS MODE — FEVER SYSTEM & HIGH-SPEED ADRENALINE EFFECTS
   All mobile-optimised (pointer-events:none, GPU transforms)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fever HUD pill ─── */
.fever-hud {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(220,38,38,0.92) 0%, rgba(185,28,28,0.88) 100%);
    border: 1.5px solid rgba(252,165,165,0.55);
    border-radius: 24px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.12em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
    z-index: 47;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(239,68,68,0.65), 0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

.fever-hud.visible {
    opacity: 1;
}

.fever-hud.mega {
    background: linear-gradient(135deg, rgba(161,87,3,0.95) 0%, rgba(217,119,6,0.92) 100%);
    border-color: rgba(253,230,138,0.68);
    box-shadow: 0 0 22px rgba(251,191,36,0.75), 0 2px 8px rgba(0,0,0,0.5);
    color: #1c1003;
    text-shadow: none;
}

.fever-pill-mult {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #fef08a;
    text-shadow: 0 0 6px rgba(250,204,21,0.7);
}

.fever-hud.mega .fever-pill-mult {
    color: #7c2d12;
    text-shadow: none;
}

/* pip turn indicators inside fever hud */
.fever-pip-row {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-left: 3px;
}

.fever-pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: background 250ms, box-shadow 250ms;
}

.fever-pip.lit {
    background: #fef08a;
    box-shadow: 0 0 5px rgba(250,204,21,0.85);
}

.fever-hud.mega .fever-pip.lit {
    background: #7c2d12;
    box-shadow: none;
}

/* ─── Streak counter ─── */
.streak-hud {
    position: absolute;
    top: 7px;
    left: 9px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(0,0,0,0.48);
    border: 1px solid rgba(251,146,60,0.38);
    border-radius: 12px;
    padding: 3px 7px;
    font-size: 11px;
    font-weight: 900;
    color: #fb923c;
    letter-spacing: 0.06em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 47;
    white-space: nowrap;
}

.streak-hud.visible {
    opacity: 1;
}

.streak-fire { font-size: 9px; }

/* ─── Board glow states during fever ─── */
/* Glow uses ::before with a STATIC box-shadow; only opacity animates.
   This is GPU-compositable (no per-frame repaint) unlike box-shadow animations. */
.board::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    z-index: -1;
}

@keyframes feverBoardPulse {
    0%   { opacity: 0.35; }
    100% { opacity: 0.75; }
}

@keyframes megaFeverBoardPulse {
    0%   { opacity: 0.50; }
    100% { opacity: 1.0; }
}

.board-wrapper.fever-active .board::before {
    box-shadow: 0 0 50px rgba(239,68,68,0.30), 0 0 25px rgba(251,146,60,0.25);
    animation: feverBoardPulse 1.6s ease-in-out infinite alternate;
}

.board-wrapper.mega-fever-active .board::before {
    box-shadow: 0 0 70px rgba(234,179,8,0.40), 0 0 35px rgba(251,191,36,0.35);
    animation: megaFeverBoardPulse 1.1s ease-in-out infinite alternate;
}

/* Slightly more visible combo watermark in fever */
.board-wrapper.fever-active .combo-hud.active {
    opacity: 0.86;
}

.board-wrapper.mega-fever-active .combo-hud.active {
    opacity: 0.95;
    animation: floatingLiquid 2.8s infinite ease-in-out;
}

/* ─── Combo HUD hit punch animation ─── */
@keyframes comboHitPunch {
    0%   { transform: scale(1); }
    22%  { transform: scale(1.055); }
    60%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

.combo-hud.chain-hit {
    /* Force override floatingLiquid while punch is active */
    animation: comboHitPunch 0.20s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

/* ─── Mobile tweaks ─── */
@media (max-width: 400px) {
    .fever-hud {
        font-size: 10px;
        padding: 3px 9px;
        gap: 4px;
        top: 5px;
    }
    .fever-pill-mult { font-size: 12px; }
    .streak-hud      { font-size: 10px; padding: 2px 6px; top: 5px; left: 7px; }
}

/* Keep fever HUD invisible on reduced-motion prefs */
@media (prefers-reduced-motion: reduce) {
    .board-wrapper.fever-active .board,
    .board-wrapper.mega-fever-active .board {
        animation: none !important;
        box-shadow: 0 0 30px rgba(239,68,68,0.3);
    }
}