@font-face{
    font-family:"DM Sans";
    src:url("Assets/fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}


@font-face{
    font-family:"Exo 2";
    src:url("Assets/fonts/Exo2-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Google Sans";
    src:url("Assets/fonts/GoogleSans-VariableFont_GRAD,opsz,wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Inter";
    src:url("Assets/fonts/InterVariable.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"JetBrains Mono";
    src:url("Assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Lora";
    src:url("Assets/fonts/Lora-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Manrope";
    src:url("Assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Montserrat";
    src:url("Assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Nunito";
    src:url("Assets/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Orbitron";
    src:url("Assets/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Oswald";
    src:url("Assets/fonts/Oswald-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Outfit";
    src:url("Assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Plus Jakarta Sans";
    src:url("Assets/fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Roboto";
    src:url("Assets/fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Rubik";
    src:url("Assets/fonts/Rubik-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Sora";
    src:url("Assets/fonts/Sora-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Space Grotesk";
    src:url("Assets/fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family:"Urbanist";
    src:url("Assets/fonts/Urbanist-VariableFont_wght.ttf") format("truetype");
    font-weight:100 1000;
    font-style:normal;
    font-display:swap;
}

:root{
    --accent-color:#3380b3;
    --accent-color-rgb:51,128,179;
    --glow-intensity:0.28;
    /* Edit this one value to resize every hub game icon. */
    --hub-game-icon-size:200px;
    --app-bg:#111;
    --panel-bg:#151515;
    --card-bg:#1d1d1d;
    --control-bg:#242424;
    --control-hover-bg:#253342;
    --text-color:#fff;
    --muted-text:#cfcfcf;
    --custom-background-color:#111111;
    --custom-background-color-rgb:17,17,17;
    --background-detail-color:#3380b3;
    --background-detail-color-rgb:51,128,179;
    --background-effect-color:#111111;
    --background-effect-color-rgb:17,17,17;
    --app-font:Arial, sans-serif;
}

html{
    -webkit-tap-highlight-color:transparent;
}

body{
    margin:0;
    background:var(--app-bg);
    color:var(--text-color);
    font-family:var(--app-font);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    user-select:none;
    overflow:hidden;
    padding:28px;
    box-sizing:border-box;
}

button,
.modeCard,
.cell,
.sequenceAdvancedCell,
.chimpAdvancedCell,
.backgroundPreviewCard,
.customColorPickerButton,
.customPickerCloseButton,
.customPickerConfirmButton,
.customColorResetButton{
    -webkit-tap-highlight-color:transparent;
}

button:focus:not(:focus-visible),
.modeCard:focus:not(:focus-visible),
.cell:focus:not(:focus-visible),
.sequenceAdvancedCell:focus:not(:focus-visible),
.chimpAdvancedCell:focus:not(:focus-visible){
    outline:none;
}

.logoFontLocked,
.gameLogoFont{
    font-family:Arial, sans-serif !important;
}

button,
input,
select,
textarea{
    font-family:var(--app-font);
}

#mainMenu,
#game,
#statsPanel,
#leaderboardPanel,
#settingsPanel,
#streakPanel,
#gameModalPanel{
    font-family:var(--app-font);
}

body.theme-amoled{
    --app-bg:#050505;
    --panel-bg:#080808;
    --card-bg:#111;
    --control-bg:#171717;
    --control-hover-bg:#202a32;
}

body.theme-neon{
    --app-bg:#0d0f13;
    --panel-bg:#12151b;
    --card-bg:#191d25;
    --control-bg:#202633;
    --control-hover-bg:#26394a;
}

body.theme-neon .modeCard:hover{
    box-shadow:0 0 28px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.35));
}

body.theme-soft{
    --app-bg:#171717;
    --panel-bg:#1d1d1d;
    --card-bg:#252525;
    --control-bg:#303030;
    --control-hover-bg:#35404a;
    --muted-text:#d7d7d7;
}

body.theme-glass{
    --app-bg:#101317;
    --panel-bg:rgba(21,21,21,0.78);
    --card-bg:rgba(31,31,31,0.72);
    --control-bg:rgba(38,38,38,0.72);
    --control-hover-bg:rgba(45,60,74,0.78);
}

body.theme-glass #statsPanel,
body.theme-glass #leaderboardPanel,
body.theme-glass #settingsPanel,
body.theme-glass #streakPanel,
body.theme-glass #gameModalPanel{
    backdrop-filter:blur(16px);
    border-color:rgba(255,255,255,0.16);
}

body.theme-midnight{
    --app-bg:#080b16;
    --panel-bg:#101421;
    --card-bg:#171b2a;
    --control-bg:#20263a;
    --control-hover-bg:rgba(var(--accent-color-rgb),0.18);
    --muted-text:#d6d9e6;
}

body.theme-midnight #statsPanel,
body.theme-midnight #leaderboardPanel,
body.theme-midnight #settingsPanel,
body.theme-midnight #streakPanel,
body.theme-midnight #gameModalPanel{
    border-color:rgba(133,180,255,0.18);
    box-shadow:0 24px 80px rgba(0,0,0,0.5);
}

body.bg-default{
    --app-bg:var(--custom-background-color);
    background:var(--custom-background-color);
}

body.bg-neon-grid{
    --app-bg:#090d11;
    background:
        linear-gradient(rgba(var(--accent-color-rgb),0.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.32) 1px, transparent 1px),
        var(--app-bg);
    background-size:42px 42px, 42px 42px, auto;
    background-repeat:repeat, repeat, no-repeat;
}

body.bg-minimal-dots{
    --app-bg:#101112;
    background:
        radial-gradient(circle, rgba(var(--accent-color-rgb),0.52) 1px, transparent 1.6px),
        var(--app-bg);
    background-size:28px 28px;
}

body.density-compact #mainMenu{
    gap:16px;
}

body.density-compact .modeCard{
    padding-top:14px;
}

body.density-compact #statsPanel,
body.density-compact #leaderboardPanel,
body.density-compact #settingsPanel,
body.density-compact #streakPanel,
body.density-compact #gameModalPanel{
    padding:22px;
}

body.density-compact #settingsPanel{
    width:min(1520px, calc(100vw - 40px));
    overflow-x:hidden;
}

body.density-compact #settingsContent,
body.density-compact #streakContent,
body.density-compact #leaderboardContent,
body.density-compact #statsCards{
    gap:10px;
}

body.density-compact #settingsContent{
    min-width:0;
    overflow-x:clip;
}

body.density-compact .settingsGroup,
body.density-compact .settingsDanger,
body.density-compact .statsCard,
body.density-compact .statsSummaryCard,
body.density-compact .statsGameCard,
body.density-compact .leaderboardLocalCard,
body.density-compact .streakSummary,
body.density-compact .streakStatus{
    padding:13px;
}

body.density-compact .settingsAppearanceSection .settingsMasonry{
    grid-template-columns:minmax(320px, 1fr) 140px 140px;
}

#title{
    font-size:clamp(46px, 6vw, 76px);
    line-height:1;
    margin:0 0 28px;
    text-align:center;

    transform:translateY(-60px);
}

#mainMenu{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;
    width:100%;
    max-width:1180px;
    justify-content:center;
}

.modeCard{
    width:100%;
    height:clamp(222px, 30vh, 286px);
    background:var(--card-bg);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
    padding-top:18px;
    box-sizing:border-box;
}

#classicCard{
    grid-column:1;
    grid-row:1;
}

#sequenceCard{
    grid-column:2;
    grid-row:1;
}

#chimpCard{
    grid-column:3;
    grid-row:1;
}

#numberCard{
    grid-column:4;
    grid-row:1;
}

#advancedCard{
    grid-column:1;
    grid-row:2;
}

#sequenceAdvancedCard{
    grid-column:2;
    grid-row:2;
}

#chimpAdvancedCard{
    grid-column:3;
    grid-row:2;
}

#verbalCard{
    grid-column:4;
    grid-row:2;
}


.modeCard:hover,
.modeCard:focus-visible{
    transform:scale(1.05);
    box-shadow:0 0 28px rgba(var(--accent-color-rgb),var(--glow-intensity));
}

.modeCard:focus-visible{
    outline:2px solid rgba(var(--accent-color-rgb),0.82);
    outline-offset:4px;
}

@media (hover:none), (pointer:coarse){
    button,
    .modeCard,
    .cell,
    .sequenceAdvancedCell,
    .chimpAdvancedCell{
        transition-duration:80ms;
    }

    button:focus,
    .modeCard:focus,
    .cell:focus,
    .sequenceAdvancedCell:focus,
    .chimpAdvancedCell:focus{
        outline:none;
    }

    .modeCard:hover,
    button:hover{
        transform:none;
    }

    .modeCard:active{
        transform:scale(0.985);
        box-shadow:0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.82));
    }

    button:active{
        transform:scale(0.97);
    }

    .cell:active,
    .sequenceAdvancedCell.visible:active,
    .chimpAdvancedCell.visible:active{
        transform:scale(0.94);
    }

    .sequenceAdvancedCell.replayActive:active,
    .cell.replayActive:active{
        transform:none;
    }

    body.theme-glass #statsPanel,
    body.theme-glass #leaderboardPanel,
    body.theme-glass #settingsPanel,
    body.theme-glass #streakPanel,
    body.theme-glass #gameModalPanel{
        backdrop-filter:none;
    }

    .active{
        box-shadow:0 0 14px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.82));
    }

    .sequenceAdvancedCell.replayActive,
    .cell.replayActive{
        filter:none;
        box-shadow:0 0 20px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.7));
    }
}

#game{
    display:flex;
    flex-direction:column;
    align-items:center;
}

button{
    margin-top:20px;
    padding:15px 30px;
    border:none;
    border-radius:12px;
    background:var(--accent-color);
    color:white;
    cursor:pointer;
    font-size:18px;
    box-shadow:0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.7));
}

button:disabled{
    opacity:0.62;
    cursor:default;
}

#leaderboardButton,
#streakButton,
#statsButton,
#settingsButton{
    position:fixed;
    top:18px;
    z-index:20;
    width:58px;
    height:58px;
    margin:0;
    padding:0;
    border-radius:14px;
    background:rgba(11,14,20,0.94);
    border:1px solid rgba(255,255,255,0.08);
    color:rgba(244,247,252,0.64);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    backdrop-filter:blur(18px);
    box-shadow:0 14px 28px rgba(0,0,0,0.24);
    transition:
        border-color 0.22s ease,
        color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

#leaderboardButton::before,
#streakButton::before,
#statsButton::before,
#settingsButton::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    box-shadow:none;
}

.hubUtilityGlyph{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
}

.assetIcon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:100%;
    height:100%;
    position:relative;
    background:transparent;
    overflow:visible;
    isolation:isolate;
    transform:translateZ(0);
}

.assetIcon::before,
.assetIcon::after{
    content:"";
    position:absolute;
    inset:0;
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
    transition:
        opacity 180ms ease,
        transform 220ms ease,
        filter 220ms ease;
}

.assetIcon::before{
    -webkit-mask-image:var(--asset-icon-default);
    mask-image:var(--asset-icon-default);
    opacity:1;
    transform:scale(1);
}

.assetIcon::after{
    -webkit-mask-image:var(--asset-icon-active, var(--asset-icon-default));
    mask-image:var(--asset-icon-active, var(--asset-icon-default));
    opacity:0;
    transform:scale(0.82) translateY(2px);
    filter:drop-shadow(0 0 0 rgba(var(--accent-color-rgb),0));
}

button:hover .assetIcon::before,
button:focus-visible .assetIcon::before,
button.active .assetIcon::before,
button.selected .assetIcon::before,
button[aria-pressed="true"] .assetIcon::before,
button[aria-expanded="true"] .assetIcon::before,
.settingsSideItem:hover .assetIcon::before,
.settingsSideItem:focus-visible .assetIcon::before,
.settingsSideItem.selected .assetIcon::before,
.statsTab:hover .assetIcon::before,
.statsTab:focus-visible .assetIcon::before,
.statsTab.selected .assetIcon::before,
.statsSummaryCard:hover .assetIcon::before,
.statsSummaryCard:focus-visible .assetIcon::before,
.statsSummaryCard[aria-expanded="true"] .assetIcon::before{
    opacity:0;
    transform:scale(1.08) translateY(-2px);
}

button:hover .assetIcon::after,
button:focus-visible .assetIcon::after,
button.active .assetIcon::after,
button.selected .assetIcon::after,
button[aria-pressed="true"] .assetIcon::after,
button[aria-expanded="true"] .assetIcon::after,
.settingsSideItem:hover .assetIcon::after,
.settingsSideItem:focus-visible .assetIcon::after,
.settingsSideItem.selected .assetIcon::after,
.statsTab:hover .assetIcon::after,
.statsTab:focus-visible .assetIcon::after,
.statsTab.selected .assetIcon::after,
.statsSummaryCard:hover .assetIcon::after,
.statsSummaryCard:focus-visible .assetIcon::after,
.statsSummaryCard[aria-expanded="true"] .assetIcon::after{
    opacity:1;
    transform:scale(1) translateY(0);
    filter:
        drop-shadow(0 0 6px rgba(var(--accent-color-rgb),0.34))
        drop-shadow(0 0 14px rgba(var(--accent-color-rgb),0.22));
}

.assetGameIcon::after{
    display:none;
}

.assetIcon-settings{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/SettingsICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/SettingsICON-2.svg");
}

.assetIcon-statistics{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/StatisticsICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/StatisticsICON-2.svg");
}

.assetIcon-streak{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/StreakICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/StreakICON-2.svg");
}

.assetIcon-appearance{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/AppearanceICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/AppearanceICON-2.svg");
}

.assetIcon-typography{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/TipographyICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/TipographyICON-2.svg");
}

.settingsSideItem .assetIcon-typography::before{
    opacity:0.9;
    filter:drop-shadow(0 0 4px rgba(var(--accent-color-rgb),0.18));
}

.settingsSideItem:hover .assetIcon-typography::before,
.settingsSideItem:focus-visible .assetIcon-typography::before,
.settingsSideItem.selected .assetIcon-typography::before{
    opacity:0;
}

.settingsSideItem .assetIcon-typography::after{
    transform:scale(0.9) translateY(1px);
}

.settingsSideItem .assetIcon-typography{
    scale:1.14;
}

.assetIcon-data{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/DataICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/DataICON-2.svg");
}

.assetIcon-leaderboard,
.assetIcon-trophy{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/Leaderboard-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/LeaderboardICON-2.svg");
}

.assetIcon-controller,
.assetIcon-controllerPrimary{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/ControllerICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/ControllerICON-2.svg");
}

.assetIcon-timePlayed,
.assetIcon-timePlayedPrimary{
    --asset-icon-default:url("Assets/Icons/Inactive (1)/TimePlayedICON-1.svg");
    --asset-icon-active:url("Assets/Icons/Active (2)/TimePlayedICON-2.svg");
}

.assetIcon-visual{
    --asset-icon-default:url("Assets/Icons/Games/VisualMemoryICON.svg");
}

.assetIcon-visualAdvanced{
    --asset-icon-default:url("Assets/Icons/Games/VisualMemoryAdvancedICON.svg");
}

.assetIcon-sequence{
    --asset-icon-default:url("Assets/Icons/Games/SequenceMemoryICON.svg");
}

.assetIcon-sequenceAdvanced{
    --asset-icon-default:url("Assets/Icons/Games/SequenceMemoryAdvancedICON.svg");
}

.assetIcon-chimp{
    --asset-icon-default:url("Assets/Icons/Games/ChimpTestICON.svg");
}

.assetIcon-chimpAdvanced{
    --asset-icon-default:url("Assets/Icons/Games/ChimpTestAdvancedICON.svg");
}

.hubUtilityGlyph.assetIcon,
.streakFlame.assetIcon{
    display:block;
}

#mobileActionsToggle{
    display:none;
}

#leaderboardButton{
    left:18px;
    width:58px;
    min-width:58px;
    height:58px;
    border-radius:14px;
}

#leaderboardButton.leaderboardButtonInactive,
#leaderboardButton:disabled{
    cursor:default;
    opacity:1;
    filter:none;
}

.leaderboardGlyph{
    width:34px;
    height:34px;
    filter:none;
}

#streakButton{
    right:162px;
    width:108px;
    min-width:108px;
    color:rgba(244,247,252,0.52);
}

.streakButtonShell{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    height:100%;
    padding:0 14px;
    box-sizing:border-box;
}

.streakFlame{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:26px;
    height:26px;
    color:inherit;
    transition:color 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}

.streakDivider{
    width:1px;
    height:32px;
    flex:none;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
}

.streakText{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    color:currentColor;
    font-size:21px;
    font-weight:600;
    line-height:1;
    letter-spacing:0.01em;
    font-variant-numeric:tabular-nums;
}

#streakButton.active{
    opacity:1;
    border-color:rgba(var(--accent-color-rgb),0.42);
    color:#f8fbff;
    box-shadow:
        0 0 24px rgba(var(--accent-color-rgb),calc(0.18 + var(--glow-intensity) * 0.28)),
        0 14px 28px rgba(0,0,0,0.28);
}

#streakButton.active .streakFlame{
    color:var(--accent-color);
    filter:
        drop-shadow(0 0 8px rgba(var(--accent-color-rgb),0.52))
        drop-shadow(0 0 18px rgba(var(--accent-color-rgb),0.34));
}

#streakButton.streakPending .streakFlame{
    color:inherit;
    filter:none;
}

#statsButton{
    right:90px;
}

#statsButton .hubUtilityGlyph{
    width:33px;
    height:33px;
}

#settingsButton{
    right:18px;
}

#settingsButton .hubUtilityGlyph{
    width:33px;
    height:33px;
    transform:translateY(-1px);
}

#streakButton .streakFlame{
    width:32px;
    height:32px;
}

#settingsButton svg{
    overflow:visible;
}

#leaderboardButton:hover,
#leaderboardButton:focus-visible,
#streakButton:hover,
#streakButton:focus-visible,
#statsButton:hover,
#statsButton:focus-visible,
#settingsButton:hover,
#settingsButton:focus-visible,
#mobileActionsToggle:hover{
    background:rgba(11,14,20,0.98);
    border-color:rgba(var(--accent-color-rgb),0.46);
    color:#f8fbff;
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.14),
        0 0 28px rgba(var(--accent-color-rgb),calc(0.16 + var(--glow-intensity) * 0.24)),
        0 16px 30px rgba(0,0,0,0.3);
    transform:translateY(-1px);
}

#leaderboardButton.leaderboardButtonInactive:hover,
#leaderboardButton:disabled:hover{
    background:rgba(11,14,20,0.94);
    box-shadow:0 14px 28px rgba(0,0,0,0.24);
}

button:hover:not(#leaderboardButton):not(#streakButton):not(#statsButton):not(#settingsButton):not(#mobileActionsToggle):not(#gameModalCloseButton):not(#leaderboardCloseButton):not(#statsCloseButton):not(#settingsCloseButton):not(#streakCloseButton):not(#leaderboardFullscreenButton):not(#statsFullscreenButton):not(#settingsFullscreenButton):not(#streakFullscreenButton),
button:focus-visible:not(#leaderboardButton):not(#streakButton):not(#statsButton):not(#settingsButton):not(#mobileActionsToggle):not(#gameModalCloseButton):not(#leaderboardCloseButton):not(#statsCloseButton):not(#settingsCloseButton):not(#streakCloseButton):not(#leaderboardFullscreenButton):not(#statsFullscreenButton):not(#settingsFullscreenButton):not(#streakFullscreenButton){
    box-shadow:0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.05));
}

#statsOverlay,
#leaderboardOverlay,
#settingsOverlay,
#streakOverlay,
#gameModalOverlay{
    position:fixed;
    inset:0;
    z-index:50;
    display:none;
    align-items:center;
    justify-content:center;
    padding:26px;
    box-sizing:border-box;
    background:rgba(0,0,0,0.72);
    pointer-events:none;
    visibility:hidden;
}

#statsOverlay.open,
#leaderboardOverlay.open,
#settingsOverlay.open,
#streakOverlay.open,
#gameModalOverlay.open{
    display:flex;
    pointer-events:auto;
    visibility:visible;
}

#statsOverlay.fullscreen,
#leaderboardOverlay.fullscreen,
#settingsOverlay.fullscreen,
#streakOverlay.fullscreen{
    padding:
        calc(10px + env(safe-area-inset-top))
        calc(10px + env(safe-area-inset-right))
        calc(10px + env(safe-area-inset-bottom))
        calc(10px + env(safe-area-inset-left));
}

#statsPanel,
#leaderboardPanel,
#settingsPanel,
#streakPanel,
#gameModalPanel{
    position:relative;
    width:min(1040px, 94vw);
    max-height:min(780px, 88vh);
    overflow:auto;
    border-radius:16px;
    background:var(--panel-bg);
    border:1px solid rgba(var(--accent-color-rgb),0.36);
    box-shadow:0 24px 80px rgba(0,0,0,0.45);
    padding:28px;
    box-sizing:border-box;
    scrollbar-width:thin;
    scrollbar-color:var(--accent-color) transparent;
}

#statsPanel::-webkit-scrollbar,
#leaderboardPanel::-webkit-scrollbar,
#settingsPanel::-webkit-scrollbar,
#streakPanel::-webkit-scrollbar,
#gameModalPanel::-webkit-scrollbar{
    width:8px;
}

#statsPanel::-webkit-scrollbar-track,
#leaderboardPanel::-webkit-scrollbar-track,
#settingsPanel::-webkit-scrollbar-track,
#streakPanel::-webkit-scrollbar-track,
#gameModalPanel::-webkit-scrollbar-track{
    background:transparent;
}

#statsPanel::-webkit-scrollbar-thumb,
#leaderboardPanel::-webkit-scrollbar-thumb,
#settingsPanel::-webkit-scrollbar-thumb,
#streakPanel::-webkit-scrollbar-thumb,
#gameModalPanel::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:var(--accent-color);
}

#statsPanel::-webkit-scrollbar-thumb:hover,
#leaderboardPanel::-webkit-scrollbar-thumb:hover,
#settingsPanel::-webkit-scrollbar-thumb:hover,
#streakPanel::-webkit-scrollbar-thumb:hover,
#gameModalPanel::-webkit-scrollbar-thumb:hover{
    background:rgba(var(--accent-color-rgb),0.86);
}

#settingsPanel{
    width:min(640px, 94vw);
}

#statsPanel{
    width:min(1120px, 96vw);
    max-height:min(860px, 90vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-color-rgb),0.15), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 26%),
        var(--panel-bg);
    border-color:rgba(var(--accent-color-rgb),0.3);
}

#leaderboardPanel{
    width:min(1180px, 96vw);
    max-height:min(860px, 92vh);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.07), transparent 30%),
        var(--panel-bg);
    border-color:rgba(var(--accent-color-rgb),0.3);
}

#statsOverlay.fullscreen #statsPanel,
#leaderboardOverlay.fullscreen #leaderboardPanel,
#settingsOverlay.fullscreen #settingsPanel,
#streakOverlay.fullscreen #streakPanel{
    width:100%;
    max-width:none;
    height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius:12px;
}

#settingsOverlay.fullscreen #settingsPanel,
#streakOverlay.fullscreen #streakPanel{
    width:100%;
}

#statsOverlay.fullscreen #statsPanel{
    width:100%;
}

#streakPanel{
    width:min(460px, 94vw);
}

#gameModalPanel{
    width:min(600px, 92vw);
    min-height:min(690px, 78vh);
    max-height:min(690px, 78vh);
    padding:22px 30px 26px;
    border-radius:30px;
    border:1px solid var(--settings-border-strong);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
        var(--settings-panel-surface);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.045) inset,
        0 0 32px var(--settings-panel-glow),
        0 28px 86px rgba(0,0,0,0.54);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
    animation:gameModalIn 0.18s ease-out;
    overflow:hidden;
}

#statsCloseButton,
#leaderboardCloseButton,
#settingsCloseButton,
#streakCloseButton,
#gameModalCloseButton{
    position:absolute;
    top:14px;
    right:14px;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(236,244,255,0.88);
    font-size:32px;
    line-height:1;
    box-shadow:none;
    text-shadow:none;
    filter:none;
}

#statsCloseButton:hover,
#statsCloseButton:focus-visible,
#leaderboardCloseButton:hover,
#leaderboardCloseButton:focus-visible,
#settingsCloseButton:hover,
#settingsCloseButton:focus-visible,
#streakCloseButton:hover,
#streakCloseButton:focus-visible,
#leaderboardFullscreenButton:hover,
#leaderboardFullscreenButton:focus-visible,
#statsFullscreenButton:hover,
#statsFullscreenButton:focus-visible,
#settingsFullscreenButton:hover,
#settingsFullscreenButton:focus-visible,
#streakFullscreenButton:hover,
#streakFullscreenButton:focus-visible,
#gameModalCloseButton:hover,
#gameModalCloseButton:focus-visible{
    background:transparent;
    border-color:transparent;
    color:#ffffff;
    box-shadow:none;
    text-shadow:none;
    filter:
        drop-shadow(0 0 5px rgba(var(--accent-color-rgb),0.42))
        drop-shadow(0 0 10px rgba(var(--accent-color-rgb),0.2));
    transform:none;
    outline:none;
}

#gameModalCloseButton{
    display:flex;
    align-items:center;
    justify-content:center;
    top:18px;
    right:18px;
    z-index:2;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(236,244,255,0.92);
    font-size:32px;
    font-weight:300;
    line-height:32px;
    box-shadow:none;
    transition:none;
}

.utilityFullscreenButton{
    position:absolute;
    top:14px;
    right:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(236,244,255,0.88);
    font-size:25px;
    line-height:1;
    box-shadow:none;
    text-shadow:none;
    filter:none;
}

#statsTitle,
#leaderboardTitle,
#settingsTitle,
#streakTitle,
#gameModalTitle{
    margin:0 0 22px;
    padding:0 84px;
    box-sizing:border-box;
    text-align:center;
    font-size:34px;
    line-height:1.1;
    overflow-wrap:anywhere;
}

#gameModalTitle{
    margin:38px 30px 12px;
    max-width:none;
    padding:0;
    color:#f6f8fb;
    font-size:clamp(34px, 3.8vw, 58px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:0;
    text-wrap:nowrap;
    white-space:nowrap;
    overflow-wrap:normal;
}

#statsTitle{
    margin-bottom:26px;
}

#leaderboardTitle{
    margin-bottom:18px;
}

#leaderboardPanel{
    width:min(880px, 94vw);
    max-height:min(88vh, 920px);
    padding:24px 24px 28px;
    background:rgba(10,14,20,0.98);
}

.leaderboardImageFrame{
    width:100%;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    overflow:hidden;
    background:#0a0f16;
    box-shadow:0 18px 40px rgba(0,0,0,0.3);
}

#leaderboardImage{
    display:block;
    width:100%;
    height:auto;
}

#gameModalIcon{
    position:relative;
    z-index:0;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:4px;
    pointer-events:none;
}

#gameModalIcon *{
    pointer-events:none;
}

#gameModalIcon .assetGameIcon,
#gameModalIcon .codedIcon{
    filter:none !important;
    box-shadow:none !important;
}

#gameModalIcon .assetGameIcon{
    color:var(--accent-color);
}

#gameModalDescription{
    max-width:460px;
    margin:16px 0 0;
    color:rgba(228,233,240,0.7);
    font-size:clamp(18px, 1.5vw, 24px);
    line-height:1.42;
    text-wrap:balance;
}

#gameModalPanel.gameModalAdvanced #gameModalTitle{
    margin-top:-18px;
}

#gameModalPanel.gameModalAdvanced #gameModalDescription{
    margin-top:0;
}

#gameModalStartButton{
    min-width:220px;
    min-height:68px;
    margin-top:auto;
    padding:0 28px;
    border:1px solid rgba(var(--accent-color-rgb),0.92);
    border-radius:24px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.96), rgba(var(--accent-color-rgb),0.62));
    color:#f7fbff;
    font-size:clamp(22px, 1.7vw, 32px);
    font-weight:700;
    line-height:1;
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.18),
        0 0 32px rgba(var(--accent-color-rgb),0.34),
        0 16px 40px rgba(0,0,0,0.3);
}

#gameModalStartButton:hover,
#gameModalStartButton:focus-visible{
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),1), rgba(var(--accent-color-rgb),0.74));
    border-color:rgba(var(--accent-color-rgb),1);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.24),
        0 0 40px rgba(var(--accent-color-rgb),0.42),
        0 18px 44px rgba(0,0,0,0.34);
}

@keyframes gameModalIn{
    from{
        opacity:0;
        transform:translateY(8px) scale(0.98);
    }

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

body.reduced-motion #gameModalPanel{
    animation:none;
}

#statsCards{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    gap:22px;
    overflow:hidden;
}

.statsTabs{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:min(460px, 100%);
    margin:0 auto;
    padding:0;
    border:1px solid rgba(var(--accent-color-rgb),0.24);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
        rgba(0,0,0,0.12);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 14px 34px rgba(0,0,0,0.18);
}

.statsTab{
    position:relative;
    min-height:44px;
    margin:0;
    padding:0 18px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--muted-text);
    font-size:15px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:none;
}

.statsTab + .statsTab::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:1px;
    background:rgba(255,255,255,0.12);
}

.statsTab:hover,
.statsTab:focus-visible{
    background:rgba(var(--accent-color-rgb),0.06);
    box-shadow:none;
}

.statsTab.selected{
    color:#fff;
    background:rgba(var(--accent-color-rgb),0.08);
    box-shadow:inset 0 -2px 0 var(--accent-color);
}

.statsTabIcon{
    width:20px;
    height:20px;
    color:var(--accent-color);
    font-size:15px;
    line-height:1;
}

.statsTab[data-stats-tab="allGames"] .statsTabIcon .assetIcon{
    scale:1.22;
}

.statsTabPanel{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    gap:24px;
    overflow:hidden;
}

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

.statsSummaryCard{
    min-height:150px;
    padding:20px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:14px;
    border:1px solid rgba(var(--accent-color-rgb),0.18);
    border-radius:12px;
    background:
        radial-gradient(circle at 18% 0%, rgba(var(--accent-color-rgb),0.18), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.018)),
        var(--card-bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 18px 42px rgba(0,0,0,0.2);
}

.statsSummaryLabel{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#dfe8f8;
    font-size:15px;
    font-weight:850;
    line-height:1.2;
}

.statsSummaryIcon{
    width:42px;
    height:42px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),0.13);
    box-shadow:0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.28));
}

.statsSummaryCard strong{
    color:#fff;
    font-size:clamp(30px, 3.4vw, 48px);
    line-height:0.92;
    font-weight:900;
    letter-spacing:0;
}

.statsSummaryCard small{
    color:var(--accent-color);
    font-size:14px;
    font-weight:800;
    line-height:1.25;
}

.statsGameSection{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:
        radial-gradient(circle at 6% 0%, rgba(var(--accent-color-rgb),0.1), transparent 30%),
        rgba(255,255,255,0.025);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

.statsSectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.statsSectionHeader h3{
    margin:0;
    color:#fff;
    font-size:23px;
    line-height:1.15;
}

.statsSectionHeader p{
    margin:5px 0 0;
    color:var(--muted-text);
    font-size:13px;
    line-height:1.3;
}

.statsGameList{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.statsAllGamesView{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    gap:14px;
}

.statsAllGamesHeader{
    position:sticky;
    top:0;
    z-index:2;
    align-items:flex-start;
    justify-content:flex-start;
    padding:4px 4px 10px;
    background:
        linear-gradient(180deg, rgba(24,24,24,0.96), rgba(24,24,24,0.78) 72%, transparent);
    backdrop-filter:blur(3px);
}

.statsAllGamesView .statsGameListFull{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    flex:1;
    min-height:0;
    gap:14px;
    padding-right:8px;
    overflow-y:auto;
    overflow-x:hidden;
}

.statsAllGamesView .statsGameCard{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    min-height:174px;
    padding:16px 18px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    background:
        linear-gradient(135deg, rgba(var(--accent-color-rgb),0.08), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 52%),
        var(--card-bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        0 12px 28px rgba(0,0,0,0.16);
}

.statsAllGamesView .statsGameIdentity{
    display:grid;
    grid-template-columns:58px minmax(0, 1fr);
    align-items:center;
    gap:14px;
    min-width:0;
}

.statsAllGamesView .statsGameMetrics{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
}

.statsAllGamesView .statsGameStat{
    min-height:60px;
}

.statsAllGamesView .statsGameToday{
    font-size:12px;
    line-height:1.15;
}

@media (max-width:1380px){
    .statsAllGamesView .statsGameMetrics{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:980px){
    .statsAllGamesView .statsGameMetrics{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.statsGameIdentity{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}

.statsGameIdentity h4{
    margin:0;
    min-width:0;
    color:#fff;
    font-size:17px;
    line-height:1.2;
    font-weight:850;
    overflow-wrap:anywhere;
}

.statsGameIcon{
    width:58px;
    height:58px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:
        radial-gradient(circle at 50% 20%, rgba(var(--accent-color-rgb),0.26), transparent 60%),
        rgba(var(--accent-color-rgb),0.1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.26));
}

.statsGameIcon .codedIcon,
.statsGameIcon .assetGameIcon{
    width:52px;
    height:52px;
    min-height:52px;
    box-shadow:none;
}

.statsGameIcon .codedIconText span{
    font-size:clamp(15px, 1.35vw, 23px);
}

.statsGameIcon .codedPatternLabel{
    font-size:clamp(10px, 0.95vw, 15px);
}

.statsGameIcon .codedIconCell{
    font-size:clamp(9px, 0.9vw, 15px);
}

.statsGameStat{
    min-width:0;
    min-height:64px;
    padding:10px 11px;
    border:1px solid rgba(255,255,255,0.055);
    border-radius:10px;
    background:rgba(255,255,255,0.028);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.statsGameStat span{
    color:var(--muted-text);
    font-size:13px;
    line-height:1.2;
    white-space:normal;
    overflow-wrap:anywhere;
}

.statsGameStat strong{
    color:var(--accent-color);
    font-size:18px;
    line-height:1.1;
    font-weight:900;
}

.statsGameStatValueRow{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-height:1.2em;
}

.statsGameStat small{
    min-height:1.2em;
    color:rgba(255,255,255,0.58);
    font-size:12px;
    line-height:1.2;
}

.statsGameStat.inline-detail .statsGameToday{
    min-height:0;
    white-space:nowrap;
}

.statsProgressTrack{
    display:block;
    width:100%;
    height:5px;
    margin-top:3px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,0.12);
}

.statsProgressTrack b{
    display:block;
    width:var(--stats-progress);
    height:100%;
    border-radius:inherit;
    background:var(--accent-color);
    box-shadow:0 0 14px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.78));
}

.statsEmptyState{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:86px;
    padding:18px 20px;
    border:1px dashed rgba(var(--accent-color-rgb),0.34);
    border-radius:12px;
    background:rgba(var(--accent-color-rgb),0.06);
}

.statsEmptyState strong{
    color:#fff;
    font-size:17px;
}

.statsEmptyState span{
    color:var(--muted-text);
    font-size:13px;
    font-weight:800;
}

@media (max-width:900px){
    .statsSummaryGrid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

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

    .statsGameIdentity{
        grid-column:1 / -1;
    }

    .statsGameStat{
        padding-left:0;
        border-left:0;
    }
}

#leaderboardContent{
    display:flex;
    flex-direction:column;
    gap:16px;
}

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

.leaderboardSummaryCard{
    position:relative;
    min-width:0;
    padding:18px 20px;
    border:1px solid rgba(var(--accent-color-rgb),0.24);
    border-radius:12px;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--accent-color-rgb),0.2), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
        var(--card-bg);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 44px rgba(0,0,0,0.18);
    overflow:hidden;
}

.leaderboardSummaryCard::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:rgba(var(--accent-color-rgb),0.68);
    opacity:0.78;
}

.leaderboardSummaryCard.pink::before{
    background:#ff5aa8;
}

.leaderboardSummaryCard.purple::before{
    background:#9b6cff;
}

.leaderboardSummaryCard.blue::before{
    background:#45c4ff;
}

.leaderboardSummaryCard.green::before{
    background:#53dc72;
}

.leaderboardSummaryCard span,
.leaderboardNotice span,
.leaderboardFilters span,
.leaderboardSnapshotHeader span,
.leaderboardStreakPanel span,
.leaderboardSnapshotCard dt{
    color:var(--muted-text);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    text-transform:uppercase;
    letter-spacing:0;
}

.leaderboardSummaryCard strong{
    display:block;
    margin-top:8px;
    color:#fff;
    font-size:clamp(22px, 2.2vw, 32px);
    font-weight:900;
    line-height:1;
    overflow-wrap:anywhere;
}

.leaderboardSummaryCard small{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,0.74);
    font-size:13px;
    line-height:1.2;
}

.leaderboardNotice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    border-radius:10px;
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.12), rgba(255,255,255,0.035));
    border:1px solid rgba(var(--accent-color-rgb),0.18);
}

.leaderboardNotice strong{
    color:rgba(255,255,255,0.9);
    font-size:14px;
}

.leaderboardNotice em{
    color:var(--muted-text);
    font-size:12px;
    font-style:normal;
    font-weight:700;
}

.leaderboardControls{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-top:2px;
}

.leaderboardTabList{
    display:flex;
    flex-wrap:nowrap;
    min-width:0;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,0.025);
}

.leaderboardTab{
    min-width:0;
}

.leaderboardTab{
    margin:0;
    padding:12px 18px;
    border:0;
    border-right:1px solid rgba(255,255,255,0.075);
    border-radius:0;
    background:transparent;
    color:#cfcfcf;
    box-shadow:none;
    font-size:14px;
    line-height:1;
}

.leaderboardTab:last-child{
    border-right:0;
}

.leaderboardTab.selected{
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),0.22), var(--card-bg));
    color:#fff;
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.56),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.26));
}

.leaderboardFilters{
    display:grid;
    grid-template-columns:minmax(160px, 1fr);
    gap:10px;
    width:min(210px, 100%);
}

.leaderboardFilters label{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.leaderboardFilters select{
    width:100%;
    min-height:40px;
    padding:0 34px 0 12px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:var(--control-bg);
    color:#fff;
    font-size:14px;
}

.leaderboardGameChips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.leaderboardGameChip{
    margin:0;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    color:rgba(255,255,255,0.78);
    box-shadow:none;
    font-size:13px;
    font-weight:800;
    line-height:1;
}

.leaderboardGameChip.selected{
    color:#fff;
    border-color:rgba(var(--accent-color-rgb),0.62);
    background:rgba(var(--accent-color-rgb),0.18);
    box-shadow:0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.22));
}

.leaderboardDeviceHint{
    align-self:flex-start;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.045);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--muted-text);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.leaderboardTableWrap{
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.09);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 32%),
        var(--card-bg);
    box-shadow:0 20px 60px rgba(0,0,0,0.16);
}

.leaderboardTable{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.leaderboardTable th,
.leaderboardTable td{
    padding:13px 14px;
    border-bottom:1px solid rgba(255,255,255,0.055);
    text-align:left;
    line-height:1.25;
    overflow-wrap:anywhere;
}

.leaderboardTable th{
    color:var(--muted-text);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0;
    background:rgba(255,255,255,0.035);
}

.leaderboardTable th:first-child,
.leaderboardTable td:first-child{
    width:60px;
    text-align:center;
}

.leaderboardTable th:nth-child(3),
.leaderboardTable td:nth-child(3){
    width:22%;
}

.leaderboardTable th:nth-child(4),
.leaderboardTable td:nth-child(4){
    width:16%;
}

.leaderboardTable th:nth-child(5),
.leaderboardTable td:nth-child(5){
    width:15%;
}

.leaderboardTable tr:last-child td{
    border-bottom:0;
}

.leaderboardTable td{
    color:#f4f4f4;
    font-size:15px;
}

.leaderboardTable td span{
    display:block;
    color:#fff;
    font-weight:800;
}

.leaderboardTable td small{
    display:block;
    margin-top:3px;
    color:var(--muted-text);
    font-size:12px;
}

.leaderboardLocalRow{
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.28), rgba(var(--accent-color-rgb),0.07));
    box-shadow:inset 3px 0 0 var(--accent-color);
}

.leaderboardLocalRow td{
    border-color:rgba(var(--accent-color-rgb),0.22);
}

.leaderboardRankLocal{
    color:var(--accent-color);
    font-weight:900;
}

.leaderboardStreakPanel,
.leaderboardSnapshotPanel{
    padding:16px;
    border:1px solid rgba(var(--accent-color-rgb),0.2);
    border-radius:12px;
    background:
        radial-gradient(circle at 6% 0%, rgba(var(--accent-color-rgb),0.12), transparent 28%),
        var(--card-bg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

.leaderboardStreakPanel{
    display:grid;
    grid-template-columns:minmax(190px, 0.75fr) minmax(0, 1.6fr);
    gap:16px;
    align-items:center;
}

.leaderboardStreakPanel strong,
.leaderboardSnapshotHeader strong{
    display:block;
    margin-top:5px;
    color:#fff;
    font-size:17px;
}

.leaderboardStreakPanel dl{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin:0;
}

.leaderboardStreakPanel dl div{
    padding:12px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px;
    background:rgba(255,255,255,0.035);
}

.leaderboardStreakPanel dt,
.leaderboardStreakPanel dd,
.leaderboardSnapshotCard dt,
.leaderboardSnapshotCard dd{
    margin:0;
}

.leaderboardStreakPanel dd{
    margin-top:6px;
    color:#fff;
    font-size:22px;
    font-weight:900;
}

.leaderboardSnapshotPanel.compact{
    padding:14px;
}

.leaderboardSnapshotHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.leaderboardSnapshotHeader small{
    color:var(--muted-text);
    font-size:12px;
}

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

.leaderboardSnapshotGrid.compact{
    grid-template-columns:repeat(5, minmax(0, 1fr));
}

.leaderboardSnapshotCard{
    min-width:0;
    padding:13px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:rgba(255,255,255,0.035);
}

.leaderboardSnapshotIdentity{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    margin-bottom:12px;
}

.leaderboardGameIcon{
    display:grid;
    place-items:center;
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(var(--accent-color-rgb),0.14);
    border:1px solid rgba(var(--accent-color-rgb),0.16);
    overflow:hidden;
}

.leaderboardGameIcon .codedIcon{
    width:30px;
    height:30px;
    border-radius:3px;
}

.leaderboardGameIcon .codedIconGrid{
    gap:5%;
}

.leaderboardGameIcon .codedIconCell,
.leaderboardGameIcon .codedPatternLabel,
.leaderboardGameIcon .codedIconText span{
    font-size:9px;
    line-height:1;
}

.leaderboardSnapshotIdentity h3{
    min-width:0;
    margin:0;
    color:#fff;
    font-size:14px;
    line-height:1.15;
    overflow-wrap:anywhere;
}

.leaderboardSnapshotCard dl{
    display:grid;
    gap:8px;
    margin:0 0 12px;
}

.leaderboardSnapshotCard dd{
    margin-top:2px;
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.leaderboardComparisonBars{
    display:grid;
    gap:5px;
}

.leaderboardComparisonBars i{
    display:block;
    height:5px;
    min-width:0;
    border-radius:999px;
}

.leaderboardComparisonBars .global{
    background:rgba(255,255,255,0.28);
}

.leaderboardComparisonBars .local{
    background:var(--accent-color);
    box-shadow:0 0 14px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.36));
}

.leaderboardComparisonBars .top{
    background:rgba(255,255,255,0.56);
}

/* Exact dashboard-style leaderboard */
#leaderboardPanel{
    width:min(1435px, calc(100vw - 16px));
    max-width:min(1435px, calc(100vw - 28px));
    max-height:calc(100vh - 16px);
    padding:26px 32px 18px;
    border-color:var(--settings-border-strong);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 34%),
        var(--settings-panel-surface);
    box-shadow:
        0 0 32px var(--settings-panel-glow),
        0 22px 68px rgba(0,0,0,0.42);
}

#leaderboardTitle{
    margin-bottom:12px;
    font-size:clamp(36px, 4vw, 48px);
}

#leaderboardContent{
    gap:12px;
}

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

.leaderboardHeroCard{
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    align-items:center;
    gap:16px;
    height:116px;
    min-height:0;
    padding:12px 26px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.026), transparent 46%),
        var(--settings-section-surface);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 14px 34px rgba(0,0,0,0.16);
}

.leaderboardHeroIcon{
    display:grid;
    place-items:center;
    width:62px;
    height:62px;
    border:1px solid rgba(var(--accent-color-rgb),0.5);
    border-radius:50%;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
    color:var(--accent-color);
    font-size:34px;
    box-shadow:0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.3));
}

.leaderboardHeroCard.purple .leaderboardHeroIcon{
    color:var(--accent-color);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
    box-shadow:0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.3));
}

.leaderboardHeroCard.cyan .leaderboardHeroIcon{
    color:var(--accent-color);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
}

.leaderboardHeroCard.green .leaderboardHeroIcon{
    color:var(--accent-color);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
}

.leaderboardHeroCard span{
    color:#f6f8ff;
    font-size:15px;
    line-height:1.2;
}

.leaderboardHeroCard strong{
    display:block;
    margin-top:6px;
    color:#f7faff;
    font-size:clamp(24px, 2vw, 34px);
    font-weight:900;
    line-height:0.95;
    overflow-wrap:anywhere;
}

.leaderboardHeroCard strong small{
    color:rgba(255,255,255,0.68);
    font-size:0.58em;
    font-weight:700;
}

.leaderboardHeroCard small{
    display:block;
    margin-top:7px;
    color:var(--accent-color);
    font-size:13px;
    font-weight:800;
}

.leaderboardGamePanel{
    display:grid;
    grid-template-columns:repeat(9, minmax(0, 1fr));
    gap:8px;
    padding:10px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
}

.leaderboardGameTile{
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    align-items:center;
    justify-items:center;
    gap:8px;
    min-height:82px;
    margin:0;
    padding:10px 8px;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 45%),
        var(--settings-control-surface-strong);
    color:#eef4ff;
    box-shadow:none;
    font-size:12px;
    font-weight:800;
    line-height:1.15;
    text-align:center;
}

.leaderboardAllGamesTile{
    width:auto;
    min-height:82px;
}

.leaderboardGameTile.selected{
    border-color:var(--accent-color);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.26), rgba(22,37,54,0.76)),
        var(--settings-control-surface-strong);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.24),
        0 0 20px rgba(var(--accent-color-rgb),0.28);
}

.leaderboardGameTile.disabled{
    opacity:0.5;
    cursor:not-allowed;
}

.leaderboardGameTileIcon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
    color:var(--game-color);
    overflow:hidden;
}

.leaderboardGameTileIcon .codedIcon{
    width:29px;
    height:29px;
    border-radius:4px;
}

.leaderboardScopePanel{
    grid-template-columns:1fr;
    min-height:102px;
}

.leaderboardScopeCard{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:78px;
    padding:14px 18px;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:var(--settings-control-surface);
    color:#eef4ff;
    text-align:left;
}

.leaderboardScopeCard > span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:none;
    border-radius:10px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
    color:var(--accent-color);
    font-size:22px;
}

.leaderboardScopeCard strong{
    display:block;
    color:#fff;
    font-size:17px;
    line-height:1.15;
}

.leaderboardScopeCard p{
    margin:4px 0 0;
    color:var(--settings-muted);
    font-size:13px;
    line-height:1.35;
}

.leaderboardGameTileIcon .codedIconCell,
.leaderboardGameTileIcon .codedPatternLabel,
.leaderboardGameTileIcon .codedIconText span{
    font-size:9px;
    line-height:1;
}

.leaderboardDashboardRow{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 430px;
    gap:14px;
    align-items:start;
}

.leaderboardLeftControls{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

.leaderboardTabShell{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:max-content;
    max-width:100%;
}

.leaderboardTabList{
    display:inline-flex;
    max-width:100%;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:var(--settings-control-surface);
    overflow:hidden;
}

.leaderboardTab{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 20px;
    border-right:1px solid var(--settings-border);
    color:#e7ecf5;
    font-weight:800;
}

.leaderboardTab.featured{
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.09), transparent 60%),
        var(--settings-control-surface);
}

.leaderboardTab span{
    color:var(--accent-color);
}

.leaderboardTab.selected{
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),0.26), rgba(22,37,54,0.76));
    color:#fff;
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.32),
        0 0 16px rgba(var(--accent-color-rgb),0.16);
}

.leaderboardSegmentPanel{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:8px 14px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:var(--settings-section-surface);
}

.leaderboardSegmentRow{
    display:grid;
    grid-template-columns:66px minmax(0, 1fr);
    align-items:center;
    gap:10px;
}

.leaderboardSegmentRow strong{
    color:#fff;
    font-size:14px;
}

.leaderboardSegmentGroup{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(82px, 1fr);
    overflow:hidden;
    border:1px solid var(--settings-border);
    border-radius:9px;
}

.leaderboardSegment{
    min-height:36px;
    margin:0;
    padding:0 12px;
    border:0;
    border-right:1px solid var(--settings-border);
    border-radius:0;
    background:var(--settings-control-surface-strong);
    color:#dbe8ff;
    box-shadow:none;
    font-size:13px;
}

.leaderboardSegment:last-child{
    border-right:0;
}

.leaderboardSegment.selected{
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),0.26), rgba(22,37,54,0.76));
    color:#fff;
    box-shadow:inset 0 0 0 1px var(--accent-color);
}

.leaderboardPassiveScope{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:36px;
    padding:0 12px;
    border:1px solid var(--settings-border);
    border-radius:8px;
    background:var(--settings-control-surface-strong);
}

.leaderboardPassiveScope strong{
    color:#fff;
    font-size:14px;
}

.leaderboardPassiveScope span{
    color:var(--settings-muted);
    font-size:13px;
}

.leaderboardIncompletePanel{
    display:grid;
    place-items:center;
    min-height:274px;
    padding:28px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
    box-shadow:0 16px 44px rgba(0,0,0,0.16);
}

.leaderboardIncompleteMessage{
    max-width:420px;
    text-align:center;
    color:#d7e6fb;
}

.leaderboardIncompleteMessage > span{
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    margin:0 auto 14px;
    border:1px solid rgba(var(--accent-color-rgb),0.52);
    border-radius:50%;
    color:var(--accent-color);
    font-size:26px;
    background:rgba(var(--accent-color-rgb),0.12);
    box-shadow:0 0 24px rgba(var(--accent-color-rgb),0.18);
}

.leaderboardIncompleteMessage h3{
    margin:0;
    color:#fff;
    font-size:24px;
    line-height:1.1;
}

.leaderboardIncompleteMessage p{
    margin:9px 0 0;
    color:var(--settings-muted);
    font-size:15px;
    line-height:1.35;
}

.leaderboardUpcomingPanel{
    display:grid;
    place-items:center;
    min-height:420px;
    padding:18px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-color-rgb),0.14), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
}

.leaderboardUpcomingPanel .leaderboardIncompleteMessage{
    max-width:520px;
}

.leaderboardBottomGrid{
    display:grid;
    grid-template-columns:minmax(0, 1.65fr) minmax(390px, 0.95fr);
    gap:12px;
    align-items:stretch;
}

.leaderboardTrendOnlyGrid,
.leaderboardStreakOnlyGrid{
    grid-template-columns:1fr;
}

.leaderboardAverageFocus{
    display:grid;
    grid-template-columns:minmax(330px, 0.42fr) minmax(0, 1fr);
    grid-template-rows:auto auto auto;
    gap:12px;
    align-items:stretch;
}

.leaderboardAverageLead,
.leaderboardAverageBreakdown,
.leaderboardTrendPanel{
    padding:11px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
}

.leaderboardAverageTrendCard{
    grid-row:2;
    grid-column:2;
    min-width:0;
}

.leaderboardAverageTrendCard .leaderboardTrendPanel{
    height:100%;
}

.leaderboardAverageRankingCard{
    grid-row:1;
    grid-column:1 / -1;
    padding:11px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
}

.leaderboardAverageLead,
.leaderboardAverageBreakdown{
    display:flex;
    flex-direction:column;
}

.leaderboardAverageLead{
    grid-row:2;
    grid-column:1;
    min-height:246px;
    padding:18px;
    justify-content:space-between;
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--accent-color-rgb),0.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 44%),
        var(--settings-section-surface);
}

.leaderboardAverageLeadHeader{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.leaderboardAverageLeadHeader > span{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    flex:none;
    border:1px solid rgba(var(--accent-color-rgb),0.44);
    border-radius:12px;
    background:rgba(var(--accent-color-rgb),0.12);
    color:var(--accent-color);
    font-size:24px;
}

.leaderboardAverageLeadHeader strong{
    display:block;
    color:#fff;
    font-size:21px;
    line-height:1.1;
}

.leaderboardAverageLeadHeader p,
.leaderboardAverageLeadNote{
    margin:4px 0 0;
    color:var(--settings-muted);
    font-size:13px;
    line-height:1.35;
}

.leaderboardAverageLeadValue{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin:22px 0 14px;
}

.leaderboardAverageLeadValue strong{
    color:#fff;
    font-size:clamp(48px, 5vw, 72px);
    font-weight:900;
    line-height:0.9;
}

.leaderboardAverageLeadValue span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(255,255,255,0.055);
    color:var(--settings-muted);
    font-size:12px;
    font-weight:900;
}

.leaderboardAverageLeadValue span.qualified{
    border-color:rgba(var(--accent-color-rgb),0.5);
    background:rgba(var(--accent-color-rgb),0.14);
    color:var(--accent-color);
}

.leaderboardAverageQualification{
    padding:12px;
    border:1px solid var(--settings-border);
    border-radius:10px;
    background:var(--settings-control-surface);
}

.leaderboardAverageQualification > div{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.leaderboardAverageQualification span{
    color:var(--settings-muted);
    font-size:12px;
    font-weight:800;
}

.leaderboardAverageQualification strong{
    color:#fff;
    font-size:12px;
    text-align:right;
}

.leaderboardAverageQualification i{
    display:block;
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
}

.leaderboardAverageQualification b{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent-color);
    box-shadow:0 0 12px rgba(var(--accent-color-rgb),0.42);
}

.leaderboardAverageBreakdown{
    grid-row:3;
    grid-column:1 / -1;
    min-height:248px;
}

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

.leaderboardAverageBreakdownItem{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
        "icon name"
        "icon value";
    align-items:center;
    column-gap:10px;
    min-width:0;
    padding:9px;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:var(--settings-control-surface);
}

.leaderboardAverageBreakdownItem .leaderboardGameTileIcon{
    grid-area:icon;
    width:34px;
    height:34px;
}

.leaderboardAverageBreakdownItem strong{
    grid-area:name;
    min-width:0;
    color:#fff;
    font-size:12px;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.leaderboardAverageBreakdownItem em{
    grid-area:value;
    color:var(--settings-muted);
    font-size:12px;
    font-style:normal;
    font-weight:900;
}

.leaderboardAverageBreakdownItem.complete em{
    color:var(--game-color);
}

.leaderboardRankingPanel{
    padding:11px;
    border:1px solid var(--settings-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
        var(--settings-section-surface);
}

.leaderboardRankingTable{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--settings-border);
    border-radius:10px;
    background:var(--settings-control-surface);
}

.leaderboardRankingHeader,
.leaderboardRankingRow{
    display:grid;
    grid-template-columns:72px minmax(0, 1fr) 140px 130px;
    align-items:center;
    gap:12px;
}

.leaderboardRankingHeader{
    flex:none;
    min-height:36px;
    padding:0 14px;
    background:rgba(255,255,255,0.04);
    color:var(--settings-muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

.leaderboardRankingBody{
    max-height:520px;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--accent-color) transparent;
    overscroll-behavior:contain;
}

.leaderboardRankingBody::-webkit-scrollbar{
    width:8px;
}

.leaderboardRankingBody::-webkit-scrollbar-track{
    background:transparent;
}

.leaderboardRankingBody::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:var(--accent-color);
}

.leaderboardRankingRow{
    min-height:48px;
    padding:0 14px;
    border-top:1px solid rgba(255,255,255,0.065);
    color:#fff;
}

.leaderboardRankingRow.local{
    position:relative;
    border-color:rgba(var(--accent-color-rgb),0.45);
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.18), transparent 46%),
        rgba(var(--accent-color-rgb),0.065);
    box-shadow:
        inset 3px 0 0 var(--accent-color),
        inset -3px 0 0 rgba(var(--accent-color-rgb),0.55);
}

.leaderboardRankingRow.local::before,
.leaderboardRankingRow.local::after{
    content:"";
    position:absolute;
    top:8px;
    bottom:8px;
    width:1px;
    background:var(--accent-color);
    box-shadow:0 0 14px rgba(var(--accent-color-rgb),0.65);
}

.leaderboardRankingRow.local::before{
    left:0;
}

.leaderboardRankingRow.local::after{
    right:0;
}

.leaderboardRankingRow.stickyClone{
    border:1px solid rgba(var(--accent-color-rgb),0.48);
    border-radius:10px;
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.24), rgba(0,0,0,0.12)),
        var(--settings-control-surface-strong);
    box-shadow:
        0 -10px 24px rgba(0,0,0,0.28),
        0 0 18px rgba(var(--accent-color-rgb),0.18);
}

.leaderboardRankingRank{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    border:1px solid rgba(var(--accent-color-rgb),0.34);
    border-radius:50%;
    background:rgba(var(--accent-color-rgb),0.1);
    color:var(--accent-color);
    font-size:13px;
    font-weight:900;
}

.leaderboardRankingPlayer{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.leaderboardRankingPlayer i{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:none;
    border-radius:9px;
    background:rgba(var(--accent-color-rgb),0.12);
    color:var(--accent-color);
    font-size:11px;
    font-style:normal;
    font-weight:900;
}

.leaderboardRankingPlayer strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
}

.leaderboardRankingPlayer em{
    display:inline-flex;
    flex:none;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(var(--accent-color-rgb),0.22);
    color:var(--accent-color);
    font-size:11px;
    font-style:normal;
    font-weight:900;
}

.leaderboardRankingMetric{
    color:#fff;
    font-size:16px;
    font-weight:900;
}

.leaderboardRankingDevice{
    color:var(--settings-muted);
    font-size:13px;
    font-weight:800;
}

.leaderboardRankingTable.compact .leaderboardRankingHeader,
.leaderboardRankingTable.compact .leaderboardRankingRow{
    grid-template-columns:58px minmax(0, 1fr) 116px 104px;
}

.leaderboardRankingTable.compact .leaderboardRankingBody{
    max-height:430px;
}

.leaderboardLocalSticky{
    display:block;
    padding:8px;
    border-top:1px solid var(--settings-border);
    background:
        linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.28) 22%),
        var(--settings-control-surface);
}

.leaderboardLocalSticky.hidden{
    display:none;
}

.leaderboardEmptyRanking{
    display:grid;
    place-items:center;
    min-height:160px;
    padding:18px;
    border:1px solid var(--settings-border);
    border-radius:10px;
    background:var(--settings-control-surface);
    color:var(--settings-muted);
    text-align:center;
}

.leaderboardEmptyRanking span{
    color:var(--accent-color);
    font-size:28px;
}

.leaderboardEmptyRanking strong{
    margin-top:8px;
    color:#fff;
    font-size:16px;
}

.leaderboardEmptyRanking p{
    margin:4px 0 0;
    font-size:13px;
}

.leaderboardPanelTitle{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:8px;
}

.leaderboardPanelTitle > span{
    color:var(--accent-color);
    font-size:25px;
    line-height:1;
}

.leaderboardPanelTitle h3{
    margin:0;
    color:#fff;
    font-size:19px;
}

.leaderboardPanelTitle p{
    margin:2px 0 0;
    color:var(--settings-muted);
    font-size:13px;
}

.leaderboardInsightColumn{
    display:flex;
    flex-direction:column;
    gap:12px;
    height:100%;
}

.leaderboardTrendPanel{
    min-height:218px;
}

.leaderboardTrendPanel.large{
    min-height:100%;
    display:flex;
    flex-direction:column;
}

.leaderboardTrendPanel.large .leaderboardTrendChart{
    flex:1;
    height:420px;
    min-height:360px;
    max-height:520px;
    padding-top:22px;
}

.leaderboardTrendOnlyGrid .leaderboardTrendPanel.large .leaderboardTrendChart{
    height:360px;
    min-height:320px;
    max-height:460px;
}

.leaderboardTrendChart{
    position:relative;
    height:126px;
    padding:36px 20px 34px 62px;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-color) 18%, transparent), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent),
        var(--settings-control-surface);
    overflow:hidden;
}

.leaderboardTrendChart svg{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
    z-index:1;
}

.leaderboardTrendGrid{
    fill:none;
    stroke:rgba(255,255,255,0.09);
    stroke-width:0.8;
    vector-effect:non-scaling-stroke;
}

.leaderboardTrendArea{
    fill:url(#leaderboardTrendAreaGradient);
}

.leaderboardTrendRange{
    fill:none;
    stroke:rgba(255,255,255,0.16);
    stroke-dasharray:3 4;
    stroke-width:0.85;
    vector-effect:non-scaling-stroke;
}

.leaderboardTrendRange.high{
    stroke:rgba(255,255,255,0.3);
    stroke-dasharray:1 6;
}

.leaderboardTrendRange.average{
    stroke:color-mix(in srgb, var(--game-color) 68%, white);
    stroke-dasharray:7 6;
    stroke-width:1.2;
}

.leaderboardTrendRange.low{
    stroke:rgba(255,255,255,0.16);
    stroke-dasharray:2 5;
}

.leaderboardTrendRange.user{
    stroke:#fff;
    stroke-dasharray:1 5;
    stroke-width:1.35;
    filter:drop-shadow(0 0 5px rgba(255,255,255,0.35));
}

.leaderboardTrendLine{
    fill:none;
    stroke:color-mix(in srgb, var(--game-color) 74%, white);
    stroke-width:3.1;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 7px color-mix(in srgb, var(--game-color) 55%, transparent));
    vector-effect:non-scaling-stroke;
}

.leaderboardTrendMarkers{
    position:absolute;
    inset:36px 20px 34px 62px;
    z-index:2;
    pointer-events:none;
}

.leaderboardTrendMarker{
    position:absolute;
    width:7px;
    height:7px;
    border:2px solid color-mix(in srgb, var(--game-color) 76%, white);
    border-radius:50%;
    background:var(--settings-control-surface);
    box-shadow:0 0 8px color-mix(in srgb, var(--game-color) 50%, transparent);
    transform:translate(-50%, -50%);
}

.leaderboardTrendMarker.peak{
    width:9px;
    height:9px;
    border-color:#fff;
    background:color-mix(in srgb, var(--game-color) 55%, white);
}

.leaderboardTrendMarker.low{
    border-color:rgba(255,255,255,0.78);
    background:var(--settings-control-surface);
}

.leaderboardTrendYAxis{
    position:absolute;
    top:36px;
    bottom:34px;
    left:10px;
    z-index:2;
    width:42px;
    pointer-events:none;
}

.leaderboardTrendYAxis span{
    position:absolute;
    left:0;
    transform:translateY(-50%);
    color:rgba(255,255,255,0.58);
    font-size:11px;
    font-weight:900;
    line-height:1;
    text-align:right;
}

.leaderboardTrendUserBadge{
    position:absolute;
    right:16px;
    z-index:3;
    transform:translateY(-50%);
    padding:3px 8px;
    border:1px solid rgba(255,255,255,0.34);
    border-radius:999px;
    background:rgba(0,0,0,0.52);
    color:#fff;
    font-size:10px;
    font-weight:900;
    pointer-events:none;
}

.leaderboardFallbackIcon{
    color:currentColor;
    font-size:22px;
}

.settingsGroup,
.settingsDanger{
    margin:0;
    padding:16px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:12px;
    background:var(--card-bg);
}

.settingsGroup legend,
.settingsDanger h3{
    padding:0;
    margin:0 0 12px;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.backgroundPreviewGroup{
    overflow:hidden;
}

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

.backgroundPreviewCard{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    min-height:112px;
    margin:0;
    padding:8px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:10px;
    background:var(--control-bg);
    color:#f2f2f2;
    text-align:left;
    cursor:pointer;
    box-shadow:none;
    box-sizing:border-box;
    overflow:hidden;
}

.backgroundPreviewCard:hover,
.backgroundPreviewCard:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.34);
    background:rgba(var(--accent-color-rgb),0.08);
    outline:none;
}

.backgroundPreviewCard.selected{
    border-color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),0.1);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.24),
        0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.42));
}

.backgroundPreviewCardPlaceholder{
    cursor:default;
}

.backgroundPreviewCardPlaceholder:hover,
.backgroundPreviewCardPlaceholder:focus-visible{
    border-color:rgba(255,255,255,0.08);
    background:var(--control-bg);
    outline:none;
    box-shadow:none;
}

.backgroundPreviewSurface{
    position:relative;
    display:block;
    flex:1;
    min-height:68px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,0.08);
    background:#0d1012;
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
}

.backgroundPreviewLabel{
    display:block;
    min-height:16px;
    color:#e8e8e8;
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
}

.preview-neon-grid{
    position:relative;
    background:#090d11;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-color-rgb),0.1);
}

.preview-neon-grid::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(var(--accent-color-rgb),0.38) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.38) 1px, transparent 1px);
    background-size:18px 18px, 18px 18px;
    background-repeat:repeat, repeat;
    opacity:1;
}

.preview-minimal-dots{
    position:relative;
    background:#101112;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-color-rgb),0.08);
}

.preview-minimal-dots::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle, rgba(var(--accent-color-rgb),0.88) 1.3px, transparent 2px);
    background-size:13px 13px;
    background-repeat:repeat;
    opacity:1;
}

.customColorField{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
}

.customColorPickerButton{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border:1px solid rgba(var(--accent-color-rgb),0.5);
    border-radius:999px;
    background:var(--control-bg);
    cursor:pointer;
    box-sizing:border-box;
    box-shadow:0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.35));
}

.customColorPickerButton:hover,
.customColorPickerButton:focus,
.customColorPickerButton:focus-within{
    border-color:var(--accent-color);
    box-shadow:
        0 0 0 3px rgba(var(--accent-color-rgb),0.16),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.65));
    outline:none;
}

.customColorPickerButton.is-active{
    border-color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),0.12);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.34),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.7));
}

.customColorField input[type="text"]{
    flex:1;
    min-width:0;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,0.11);
    border-radius:10px;
    background:var(--control-bg);
    color:#fff;
    font:inherit;
    outline:none;
    box-sizing:border-box;
}

.customColorField input[type="text"]:focus{
    border-color:var(--accent-color);
    box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),0.18);
}

.customColorField input[type="text"].invalid{
    border-color:#ff5f5f;
    box-shadow:0 0 0 3px rgba(255,95,95,0.14);
}

.customColorPreview{
    display:block;
    width:26px;
    height:26px;
    border-radius:999px;
    background:var(--custom-picker-color);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.2),
        0 0 0 1px rgba(255,255,255,0.16);
}

.customColorResetButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.1);
    background:var(--control-bg);
    color:var(--muted-text);
    line-height:0;
    box-shadow:none;
}

.resetIcon{
    display:block;
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.customColorResetButton:hover,
.customColorResetButton:focus-visible{
    color:#fff;
    border-color:var(--accent-color);
    background:rgba(var(--accent-color-rgb),0.1);
    box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),0.14);
    outline:none;
}

.customColorPopover{
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    z-index:35;
    width:min(380px, calc(100vw - 32px));
    min-width:min(100%, 320px);
    padding:20px;
    border:1px solid rgba(var(--accent-color-rgb),0.44);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.08), transparent 46%),
        var(--panel-bg);
    box-shadow:
        0 18px 46px rgba(0,0,0,0.42),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.42));
    box-sizing:border-box;
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--accent-color) transparent;
}

.customColorPopover::-webkit-scrollbar{
    width:8px;
}

.customColorPopover::-webkit-scrollbar-track{
    background:transparent;
}

.customColorPopover::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:var(--accent-color);
}

.customColorPopover.openAbove{
    top:auto;
    bottom:calc(100% + 8px);
}

.customColorPopover[hidden]{
    display:none;
}

.customPickerHeader{
    display:grid;
    grid-template-columns:32px 1fr 34px;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.customPickerPreview{
    width:30px;
    height:30px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.18);
    background:var(--custom-picker-color);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
}

.customPickerCloseButton{
    display:flex;
    position:relative;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    margin:-20px 0 0 0;
    right:-10px;
    padding:0;
    border:0 !important;
    border-radius:0;
    background:transparent !important;
    color:rgba(236,244,255,0.92);
    font-size:32px;
    font-weight:300;
    line-height:32px;
    box-shadow:none !important;
    padding:0 !important;
    text-shadow:
        0 0 6px rgba(var(--accent-color-rgb),0.34),
        0 0 14px rgba(var(--accent-color-rgb),0.18);
    transition:none;
}

.customPickerCloseButton:hover,
.customPickerCloseButton:focus-visible{
    background:transparent !important;
    border-color:transparent !important;
    color:#ffffff;
    box-shadow:none !important;
    text-shadow:
        0 0 8px rgba(var(--accent-color-rgb),0.55),
        0 0 18px rgba(var(--accent-color-rgb),0.32);
    outline:none;
}

.customColorSpectrum{
    position:relative;
    width:100%;
    height:144px;
    margin:0 0 12px;
    padding:0;
    border:0;
    border-radius:12px;
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent),
        var(--picker-hue-color, #3380b3);
    box-shadow:0 0 0 1px rgba(255,255,255,0.12);
    cursor:crosshair;
    overflow:hidden;
    touch-action:none;
    box-sizing:border-box;
}

.customColorSpectrum:hover,
.customColorSpectrum:focus-visible{
    box-shadow:
        0 0 0 1px var(--accent-color),
        0 0 0 3px rgba(var(--accent-color-rgb),0.14);
    outline:none;
}

.customColorSpectrumHandle{
    position:absolute;
    --handle-x:1;
    --handle-y:0;
    left:clamp(10px, calc(var(--handle-x) * 100%), calc(100% - 10px));
    top:clamp(10px, calc(var(--handle-y) * 100%), calc(100% - 10px));
    width:18px;
    height:18px;
    border:2px solid #fff;
    border-radius:999px;
    background:var(--custom-picker-color);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 0 12px rgba(0,0,0,0.35);
    transform:translate(-50%, -50%);
    pointer-events:none;
}

.customHueControl,
.customPickerInputs label{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin:0;
    color:var(--muted-text);
    font-size:13px;
}

.customHueControl{
    display:grid;
    grid-template-columns:38px minmax(0, 1fr);
    align-items:center;
    margin-bottom:12px;
}

.customHueControl input[type="range"]{
    width:100%;
    height:14px;
    margin:0;
    appearance:none;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    background:linear-gradient(
        to right,
        #ff3030,
        #ffff2e,
        #35ff35,
        #32ffff,
        #4444ff,
        #ff35ff,
        #ff3030
    );
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16);
    cursor:pointer;
    touch-action:none;
}

.customHueControl input[type="range"]::-webkit-slider-runnable-track{
    height:12px;
    border-radius:999px;
    background:transparent;
}

.customHueControl input[type="range"]::-webkit-slider-thumb{
    appearance:none;
    width:18px;
    height:18px;
    margin-top:-3px;
    border:2px solid #fff;
    border-radius:999px;
    background:var(--custom-picker-color);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.62),
        0 0 10px rgba(0,0,0,0.34);
}

.customHueControl input[type="range"]::-moz-range-track{
    height:12px;
    border-radius:999px;
    background:transparent;
}

.customHueControl input[type="range"]::-moz-range-thumb{
    width:16px;
    height:16px;
    border:2px solid #fff;
    border-radius:999px;
    background:var(--custom-picker-color);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.62),
        0 0 10px rgba(0,0,0,0.34);
}

.customPickerInputs{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.customPickerInputs > label{
    display:grid;
    grid-template-columns:34px minmax(0, 1fr);
    align-items:center;
    gap:6px;
}

.customPickerCompare{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin:0 0 12px;
}

.customPickerCompareCard{
    display:grid;
    grid-template-columns:28px minmax(0, 1fr);
    align-items:center;
    gap:6px 10px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,0.07);
    border-radius:10px;
    background:rgba(13,20,31,0.42);
}

.customPickerCompareCard > span:first-child{
    grid-column:1 / -1;
    color:rgba(220,230,243,0.62);
    font-size:10px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.customPickerCompareCardActive{
    border-color:rgba(255,255,255,0.1);
    background:rgba(13,20,31,0.56);
}

.customPickerCompareSwatch{
    width:28px;
    height:28px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,0.12);
    background:var(--custom-picker-color);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}

.customPickerCompareCard strong{
    color:rgba(245,248,255,0.9);
    font-size:13px;
    font-weight:650;
    line-height:1.15;
    overflow-wrap:anywhere;
}

.customColorPopover input[type="text"],
.customColorPopover input[type="number"]{
    width:100%;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:var(--control-bg);
    color:#fff;
    font:inherit;
    outline:none;
    box-sizing:border-box;
}

.customColorPopover input[type="number"]{
    appearance:textfield;
}

.customColorPopover input[type="number"]::-webkit-outer-spin-button,
.customColorPopover input[type="number"]::-webkit-inner-spin-button{
    margin:0;
    appearance:none;
}

.customPickerActions{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin-top:12px;
}

.customPickerConfirmButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:1;
    height:42px;
    min-height:42px;
    margin:0;
    padding:9px 16px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;
    background:var(--control-bg);
    color:#f2f6fd;
    font:inherit;
    font-weight:700;
    box-shadow:none;
    box-sizing:border-box;
}

.customPickerConfirmButton:disabled{
    opacity:0.6;
    cursor:default;
    box-shadow:none;
    color:rgba(242,246,253,0.6);
}

.customPickerResetIconButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0;
    line-height:0;
    box-sizing:border-box;
}

.customPickerResetIconButton .resetIcon{
    width:18px;
    height:18px;
    margin:0;
    transform:translateY(-1px);
}

.customColorPopover input[type="text"]:focus,
.customHueControl input[type="range"]:focus-visible,
.customPickerConfirmButton:hover,
.customPickerConfirmButton:focus-visible,
.customPickerResetIconButton:hover,
.customPickerResetIconButton:focus-visible{
    border-color:var(--accent-color);
    box-shadow:0 0 0 3px rgba(var(--accent-color-rgb),0.16);
    outline:none;
}

.customPickerConfirmButton:hover:not(:disabled),
.customPickerConfirmButton:focus-visible:not(:disabled){
    color:#fff;
    background:rgba(var(--accent-color-rgb),0.08);
    box-shadow:
        0 0 0 3px rgba(var(--accent-color-rgb),0.16),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.24));
}

.settingsHint{
    margin:8px 0 0;
    color:var(--muted-text);
    font-size:13px;
    line-height:1.4;
}

.settingsSwatch{
    width:14px;
    height:14px;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(255,255,255,0.18);
}

.customColorPickerButton .customColorPreview{
    width:26px;
    height:26px;
    border-radius:999px;
}

.settingsDanger p,
#settingsConfirmArea p{
    margin:0 0 12px;
    color:#cfcfcf;
    line-height:1.45;
}

#resetLocalDataButton,
#confirmResetButton{
    background:#8f2d2d;
}

#settingsConfirmArea{
    margin-top:0;
}

.settingsConfirmActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.settingsConfirmActions button{
    margin-top:0;
    padding:11px 16px;
    font-size:15px;
}

#streakContent{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.streakSummary,
.streakStatus{
    padding:16px;
    border-radius:12px;
    background:#1d1d1d;
    border:1px solid rgba(255,255,255,0.07);
}

.streakSummary p,
.streakStatus p{
    margin:0;
    color:#f2f2f2;
    line-height:1.5;
}

.streakSummary p + p{
    margin-top:8px;
}

.streakSummary span{
    color:#cfcfcf;
}

.streakStatus strong{
    display:block;
    margin-bottom:6px;
    color:var(--accent-color);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0;
}

.streakStatus.completed{
    border-color:rgba(var(--accent-color-rgb),0.42);
    box-shadow:0 0 20px rgba(var(--accent-color-rgb),0.12);
}

.streakStatus.pending{
    opacity:0.82;
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after{
    animation:none !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
}

#screenFeedback{
    position:fixed;
    inset:0;
    z-index:45;
    pointer-events:none;
    opacity:0;
    border-radius:0;
    box-sizing:border-box;
    will-change:opacity;
}

#screenFeedback.screenFeedback.correct{
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--accent-color-rgb),0.13), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%);
    box-shadow:inset 0 0 0 0 rgba(var(--accent-color-rgb),0);
    animation:screenFeedbackSuccess 0.34s ease-out;
}

#screenFeedback.screenFeedback.wrong{
    background:
        radial-gradient(circle at 50% 50%, rgba(255,95,95,0.11), transparent 36%),
        linear-gradient(180deg, rgba(255,95,95,0.055), transparent 46%);
    animation:screenFeedbackError 0.3s ease-out;
}

.lifeHeart{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--accent-color);
    width:1.22em;
    height:1.22em;
    font-size:1.24em;
    line-height:1;
    margin:0 2px;
    text-shadow:0 0 12px var(--accent-color);
    filter:drop-shadow(0 0 9px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.15)));
    vertical-align:-0.16em;
}

.lifeHeart svg{
    display:block;
    width:100%;
    height:100%;
    fill:currentColor;
}

@keyframes screenFeedbackFade{
    0%{
        opacity:0;
    }
    24%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}

@keyframes screenFeedbackSuccess{
    0%{
        opacity:0;
        box-shadow:inset 0 0 0 0 rgba(var(--accent-color-rgb),0);
    }
    34%{
        opacity:0.78;
        box-shadow:inset 0 0 0 2px rgba(var(--accent-color-rgb),0.24);
    }
    100%{
        opacity:0;
        box-shadow:inset 0 0 0 10px rgba(var(--accent-color-rgb),0);
    }
}

@keyframes screenFeedbackError{
    0%{
        opacity:0;
        box-shadow:inset 0 0 0 0 rgba(255,95,95,0);
    }
    36%{
        opacity:0.72;
        box-shadow:inset 0 0 0 2px rgba(255,95,95,0.22);
    }
    100%{
        opacity:0;
        box-shadow:inset 0 0 0 8px rgba(255,95,95,0);
    }
}

#grid{
    display:grid;
    gap:12px;
    margin-top:20px;
    contain:layout;
}

#game.chimpGame #grid{
    margin-top:0;
}

#game.sequenceGame,
#game.chimpGame{
    width:100%;
    min-height:calc(100vh - 56px);
    justify-content:center;
    box-sizing:border-box;
}

#game.sequenceGame #scoreText,
#game.chimpGame #scoreText,
#game.sequenceGame #advancedPatterns,
#game.sequenceGame #targetPattern,
#game.chimpGame #advancedPatterns,
#game.chimpGame #targetPattern,
#game.sequenceGame #continueButton,
#game.chimpGame #continueButton,
#game.sequenceGame #replayPatternButton,
#game.chimpGame #replayPatternButton,
#game.sequenceGame #checkButton,
#game.chimpGame #checkButton{
    display:none !important;
}

#game.sequenceGame #countdown,
#game.chimpGame #countdown{
    display:none;
    min-height:0;
    height:0;
    margin:0;
}

#game.sequenceGame #result,
#game.chimpGame #result{
    display:none;
}

.cell{
    width:80px;
    height:80px;
    background:#333;
    border-radius:8px;
    cursor:pointer;
    user-select:none;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    contain:layout paint;
    transition:
        background-color 60ms ease,
        transform 60ms ease,
        box-shadow 80ms ease;
}

.cell.chimpCell{
    width:100px;
    height:100px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(42px, 9vw, 58px);
    font-weight:700;
    line-height:1;
}

.cell.chimpCell span{
    color:#fff;
    opacity:0;
    transition:none;
}

.cell.chimpCell.showing span{
    opacity:1;
}

.cell.chimpCell.cleared{
    background:var(--accent-color);
    cursor:default;
}

.cell.chimpCell:active{
    transform:scale(0.96);
}

.cell.dead{
    background:#171717;
    cursor:default;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
}

.active{
    background:var(--accent-color);
    box-shadow:0 0 22px rgba(var(--accent-color-rgb),var(--glow-intensity));
}

#countdown{
    height:50px;
}

#levelText,
#livesText{
    position:static;
    margin:0;
    line-height:1;
    letter-spacing:0;
}

.gameHud{
    position:fixed;
    left:20px;
    top:20px;
    z-index:4;
    display:none;
    flex-direction:column;
    gap:18px;
    width:min(284px, calc(100vw - 40px));
    padding:18px 20px 16px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.01)),
        rgba(15,18,22,0.84);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.34),
        inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter:blur(18px) saturate(115%);
    -webkit-backdrop-filter:blur(18px) saturate(115%);
    color:#f4f8ff;
    transform:translateX(0);
    transition:transform 0.26s ease;
    overflow:hidden;
}

.gameHudContent{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.gameHudToggleButton{
    position:absolute;
    top:10px;
    right:12px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin:0;
    padding:0;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.05);
    color:#f4f8ff;
    box-shadow:none;
}

.gameHudToggleButton:hover{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.12);
}

.gameHudToggleButton:active{
    transform:translateY(1px);
}

.gameHudToggleIcon{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    font-size:28px;
    font-weight:700;
    line-height:0.78;
    transform:translateY(-2px);
    transform-origin:center;
}

.gameHudToggleIcon svg{
    display:block;
    width:100%;
    height:100%;
    fill:currentColor;
}

.gameHudToggleIcon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.gameHudCollapsed{
    transform:translateX(calc(-100% + 48px));
}

.gameHudCollapsed .gameHudContent{
    opacity:0;
    pointer-events:none;
}

.gameHudTop{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items:start;
    gap:18px;
}

.gameHudSection{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

.gameHudLabel{
    color:rgba(244,248,255,0.54);
    font-size:18px;
    font-weight:800;
    line-height:1;
    letter-spacing:0.04em;
}

#levelText{
    font-size:64px;
    font-weight:900;
    color:#f4f8ff;
}

#livesText{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    min-height:64px;
    color:#f4f8ff;
}

#livesText .lifeHeart{
    width:1.34em;
    height:1.34em;
    margin:0;
    font-size:1.42em;
}

.gameHudDivider{
    align-self:stretch;
    width:1px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    box-shadow:0 0 0 1px rgba(0,0,0,0.12);
}

#backToHubButton{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    height:38px;
    margin:0;
    padding:0 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.045);
    color:rgba(244,248,255,0.84);
    box-shadow:none;
    font-size:14px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    transition:background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

#backToHubButton:hover{
    background:rgba(255,255,255,0.075);
    border-color:rgba(255,255,255,0.14);
}

#backToHubButton:active{
    transform:translateY(1px);
}

#game.advancedGame .gameHud,
#game.sequenceAdvancedGame .gameHud,
#game.chimpAdvancedGame .gameHud{
    top:auto;
    bottom:22px;
    left:50%;
    width:min(calc(100vw - 348px), 1332px);
    padding:18px 26px 16px;
    border-radius:20px;
    transform:translateX(-50%);
}

#game.advancedGame .gameHudToggleButton,
#game.sequenceAdvancedGame .gameHudToggleButton,
#game.chimpAdvancedGame .gameHudToggleButton{
    display:none;
}

#game.advancedGame .gameHudContent,
#game.sequenceAdvancedGame .gameHudContent,
#game.chimpAdvancedGame .gameHudContent{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"top button";
    align-items:center;
    gap:20px;
}

#game.advancedGame .gameHudTop,
#game.sequenceAdvancedGame .gameHudTop,
#game.chimpAdvancedGame .gameHudTop{
    grid-area:top;
    display:grid;
    grid-template-columns:minmax(150px, auto) minmax(0, 1fr);
    align-items:center;
    gap:clamp(28px, 5vw, 92px);
    min-width:0;
}

#game.advancedGame .gameHudLevel,
#game.sequenceAdvancedGame .gameHudLevel,
#game.chimpAdvancedGame .gameHudLevel{
    justify-self:start;
    align-items:center;
}

#game.advancedGame .gameHudLives,
#game.sequenceAdvancedGame .gameHudLives,
#game.chimpAdvancedGame .gameHudLives{
    justify-self:center;
    align-items:center;
}

#game.advancedGame .gameHudDivider,
#game.sequenceAdvancedGame .gameHudDivider,
#game.chimpAdvancedGame .gameHudDivider{
    display:none;
}

#game.advancedGame #backToHubButton,
#game.sequenceAdvancedGame #backToHubButton,
#game.chimpAdvancedGame #backToHubButton{
    grid-area:button;
    width:min(188px, 17vw);
    height:58px;
    padding:0 18px;
    border-radius:14px;
    font-size:16px;
    align-self:center;
}

#game.advancedGame #levelText,
#game.sequenceAdvancedGame #levelText,
#game.chimpAdvancedGame #levelText{
    font-size:52px;
    transform:translateX(2px);
}

#game.advancedGame #livesText,
#game.sequenceAdvancedGame #livesText,
#game.chimpAdvancedGame #livesText{
    min-height:52px;
    gap:8px;
    justify-content:center;
    transform:translateX(-4px);
}

#game.advancedGame #livesText .lifeHeart,
#game.sequenceAdvancedGame #livesText .lifeHeart,
#game.chimpAdvancedGame #livesText .lifeHeart{
    width:1.18em;
    height:1.18em;
}

#game.visualMemoryGame{
    width:100%;
    min-height:calc(100vh - 56px);
    justify-content:center;
    box-sizing:border-box;
}

#game.advancedGame{
    position:relative;
    width:100%;
    min-height:calc(100vh - 56px);
    justify-content:flex-start;
    align-items:center;
    gap:20px;
    padding:24px 42px 120px;
    box-sizing:border-box;
}

#game.advancedGame,
#game.sequenceAdvancedGame,
#game.chimpAdvancedGame{
    padding-bottom:calc(160px + env(safe-area-inset-bottom));
}

#game.visualMemoryGame #countdown,
#game.visualMemoryGame #advancedPatterns,
#game.visualMemoryGame #targetPattern,
#game.visualMemoryGame #continueButton,
#game.visualMemoryGame #replayPatternButton,
#game.visualMemoryGame #checkButton{
    display:none !important;
}

#game.visualMemoryGame #grid{
    margin-top:0;
}

#game.visualMemoryGame #result{
    display:none;
}

#game.advancedGame #advancedPatterns{
    min-height:160px;
    gap:75px;
    margin:0;
    position:absolute;
    left:50%;
    top:var(--advanced-preview-top, clamp(176px, 25vh, 316px));
    transform:translateX(-50%);
}

#game.advancedGame .advancedGamePattern{
    gap:18px;
}

#game.advancedGame .patternLetter{
    font-size:clamp(50px, 5vw, 72px);
    line-height:1;
}

#game.advancedGame .patternGrid{
    gap:10px;
}

#game.advancedGame .patternCell{
    width:84px;
    height:84px;
    border-radius:8px;
}

#game.advancedGame #targetPattern{
    display:none;
    font-size:clamp(24px, 2.5vw, 34px);
}

#game.advancedGame #continueButton,
#game.advancedGame #checkButton{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    align-self:center;
    min-width:148px;
    min-height:54px;
    margin:0;
    padding:0 24px;
}

#game.advancedGame #continueButton{
    top:clamp(560px, 64vh, 700px);
}

#game.advancedGame #grid{
    margin:0;
    position:absolute;
    left:50%;
    top:var(--advanced-answer-grid-top, clamp(294px, 40vh, 444px));
    transform:translateX(-50%);
}

#game.advancedGame.advancedAnswerPhase #targetPattern{
    display:block;
    position:absolute;
    left:50%;
    top:var(--advanced-answer-target-top, clamp(206px, 28vh, 304px));
    transform:translateX(-50%);
    margin:0;
}

#game.advancedGame.advancedAnswerPhase #grid{
    top:var(--advanced-answer-grid-top, clamp(262px, 35vh, 404px));
}

#game.advancedGame.advancedAnswerPhase #checkButton{
    top:clamp(556px, 64vh, 700px);
}

.memoryTimerLine{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    height:2px;
    background:rgba(255,255,255,0.16);
    border-radius:999px;
    overflow:hidden;
    z-index:4;
    pointer-events:none;
}

.memoryTimerLine span{
    display:block;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.86);
    border-radius:inherit;
    transform-origin:left center;
    transition-property:transform;
    transition-timing-function:linear;
}

#grid.runOverOverlay{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:100%;
    margin:0;
    padding:20px;
    box-sizing:border-box;
}

.runOverCard{
    display:flex;
    flex-direction:column;
    width:min(520px, calc(100vw - 40px));
    padding:24px 26px 22px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,0.09);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.01)),
        rgba(15,18,22,0.92);
    box-shadow:
        0 26px 60px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.03);
    box-sizing:border-box;
}

.runOverHeader{
    display:flex;
    align-items:center;
    gap:14px;
    color:rgba(244,248,255,0.56);
    font-size:14px;
    font-weight:700;
    letter-spacing:0.34em;
    text-transform:uppercase;
}

.runOverHeaderIcon{
    width:28px;
    height:28px;
    flex:none;
    color:var(--accent-color);
    filter:drop-shadow(0 0 12px rgba(var(--accent-color-rgb),0.18));
}

.runOverHeaderRule{
    width:100%;
    height:1px;
    margin:18px 0 0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.runOverTitle{
    margin:30px 0 0;
    color:#f4f8ff;
    font-size:clamp(42px, 5vw, 60px);
    font-weight:400;
    line-height:1.05;
    text-align:center;
}

.runOverValue{
    margin-top:10px;
    color:var(--accent-color);
    font-size:clamp(74px, 10vw, 118px);
    font-weight:700;
    line-height:0.94;
    text-align:center;
    text-shadow:0 0 24px rgba(var(--accent-color-rgb),0.18);
}

.runOverMetricLabelRow{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:24px;
}

.runOverMetricRule{
    flex:1;
    height:1px;
    background:rgba(255,255,255,0.08);
}

.runOverMetricLabel{
    color:rgba(244,248,255,0.56);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    white-space:nowrap;
}

.runOverBestMetric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:22px;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.035);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
}

.runOverBestLabel{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:rgba(244,248,255,0.56);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.runOverBestLabel::before{
    content:"";
    width:22px;
    height:22px;
    flex:none;
    background:
        center / contain no-repeat
        url("Assets/Icons/More/BestLevelICON.svg");
    box-sizing:border-box;
    filter:drop-shadow(0 0 6px rgba(var(--accent-color-rgb),0.22));
}

.runOverBestValue{
    color:var(--accent-color);
    font-size:24px;
    font-weight:700;
    line-height:1;
}

.runOverActions{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px;
}

.runOverButton{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    min-height:62px;
    margin:0;
    padding:0 20px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04);
    box-shadow:none;
    color:#f4f8ff;
    font-size:18px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
}

.runOverButtonPrimary{
    border-color:rgba(var(--accent-color-rgb),0.52);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--accent-color);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.08),
        0 16px 28px rgba(var(--accent-color-rgb),0.18);
}

.runOverButtonSecondary{
    color:rgba(244,248,255,0.9);
}

.runOverButtonIcon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex:none;
}

.runOverButtonIcon svg{
    display:block;
    width:100%;
    height:100%;
    fill:currentColor;
}

.runOverButtonIcon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.runOverButtonLabel{
    min-width:0;
}

#grid.advancedLifeLossScreen{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:min(90vw, 420px);
    min-height:300px;
    margin:0;
    text-align:center;
}

.advancedLifeLossScreen{
    padding:28px;
    border-radius:20px;
    background:rgba(18,22,28,0.94);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 22px 46px rgba(0,0,0,0.3);
    box-sizing:border-box;
}

.advancedLifeLossScreen h2{
    margin:0 0 8px;
    font-size:clamp(34px, 5vw, 54px);
    line-height:1.05;
}

.advancedLifeLossScreen p{
    margin:0;
    color:#e8e8e8;
    font-size:20px;
}

.advancedLifeLossScreen button{
    margin-top:18px;
}

.advancedLifeLossHeartsMetric{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.advancedLifeLossHearts{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.advancedLifeLossHearts .lifeHeart{
    margin:0;
}

.gameOverActions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:12px;
}

.gameOverActions button{
    margin-top:0;
    min-width:138px;
}

#game.sequenceGame .cell{
    width:112px;
    height:112px;
}

#game.sequenceGame .cell.sequenceCell{
    border-radius:16px;
}

#game.sequenceGame .cell.sequenceSimpleActive{
    background:var(--accent-color);
    transform:scale(1.02);
    box-shadow:none;
}

#game.gameOverMode,
#game.advancedLifeLossMode{
    position:fixed;
    inset:0;
    width:100vw;
    min-height:100vh;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    z-index:15;
}

#game.gameOverMode #grid.runOverOverlay,
#game.advancedLifeLossMode #grid.advancedLifeLossScreen{
    position:fixed;
    inset:0;
    margin:0;
}

#game.advancedLifeLossMode #grid.advancedLifeLossScreen{
    left:50%;
    top:50%;
    transform:translate(-50%, -60%);
}

.cardBottom{
    width:100%;
    min-height:64px;
    background:var(--accent-color);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:auto;
}

.cardBottom h2{
    font-size:clamp(18px, 1.45vw, 22px);
    line-height:1.15;
    text-align:center;
    padding:8px 14px;
    margin:0;
}

.cardIcon{
    flex:1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px 16px;
    box-sizing:border-box;
}

.gameIconMount{
    min-height:0;
}

.gameIconMount[data-game-icon="visual"],
.gameIconMount[data-game-icon="sequence"],
.gameIconMount[data-game-icon="chimp"]{
    --hub-game-icon-size:min(100%, clamp(88px, 13vw, 200px));
}

.gameIconMount[data-game-icon="visualAdvanced"],
.gameIconMount[data-game-icon="sequenceAdvanced"],
.gameIconMount[data-game-icon="chimpAdvanced"]{
    --hub-game-icon-size:min(100%, clamp(100px, 14.5vw, 240px));
}

.gameIconMount .assetGameIcon,
.gameIconMount .codedIcon{
    width:var(--hub-game-icon-size) !important;
    height:var(--hub-game-icon-size) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    display:block;
    flex:none;
    filter:none !important;
    box-shadow:none !important;
    transform:none !important;
}

.assetGameIcon{
    aspect-ratio:1 / 1;
    color:rgba(var(--accent-color-rgb),0.88);
    filter:
        drop-shadow(0 0 12px rgba(var(--accent-color-rgb),0.22))
        drop-shadow(0 0 22px rgba(var(--accent-color-rgb),0.12));
}

.assetGameIcon-visual{
    filter:none;
}

.assetGameIcon-sequence{
    filter:none;
}

.assetGameIcon-chimp{
    filter:none;
}

.assetGameIcon-number,
.assetGameIcon-word{
    filter:none;
}

.codedIcon{
    --coded-cell-color:#444;
    width:min(84%, 190px);
    aspect-ratio:1 / 1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:none;
    overflow:hidden;
    border-radius:4px;
    background:transparent;
    box-sizing:border-box;
    font-kerning:normal;
    text-rendering:geometricPrecision;
}

.codedIcon,
.codedIconCell,
.codedPatternLabel,
.codedIconText span,
.patternLetter{
    font-family:Arial, sans-serif !important;
}

.codedIconCell,
#numberCard .codedIconText span,
#verbalCard .codedIconText span,
#advancedCard .codedPatternLabel,
#gameModalIcon .codedIconType-number span,
#gameModalIcon .codedIconType-word span,
#gameModalIcon .codedIconType-visualAdvanced .codedPatternLabel{
    font-family:"Noto Sans", Arial, sans-serif !important;
}

#gameModalIcon .gameModalTinyIcon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:3260px;
    height:360px;
    overflow:visible;
    transform:none;
}

#gameModalIcon .gameModalTinyIcon .assetGameIcon,
#gameModalIcon .gameModalTinyIcon .codedIcon{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    transform:none !important;
}

#gameModalIcon .gameModalTinyIcon svg{
    width:100% !important;
    height:100% !important;
    display:block !important;
    flex:none !important;
}

#gameModalIcon .gameModalTinyIcon .codedIconCell,
#gameModalIcon .gameModalTinyIcon .codedPatternLabel,
#gameModalIcon .gameModalTinyIcon .codedIconText span{
    font-size:inherit !important;
}

#chimpAdvancedCard .codedIconGridLogo{
    width:min(88%, 198px);
}

#advancedCard .codedIconAdvanced{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:max-content;
    align-content:center;
    align-items:start;
    justify-items:center;
    width:min(94%, 214px);
    gap:0 8%;
    padding:5% 2% 7%;
}

#advancedCard .codedPattern{
    width:100%;
    gap:9%;
}

#advancedCard .codedPattern:nth-child(2){
    margin-top:22%;
}

#advancedCard .codedPattern:nth-child(3){
    margin-top:0;
}

#advancedCard .codedPatternLabel{
    font-size:clamp(19px, 1.45vw, 26px);
}

#advancedCard .codedPattern .codedIconGrid{
    width:100%;
    gap:6%;
}

#classicCard .codedIcon4x4 .codedIconGrid{
    width:88%;
    height:88%;
    gap:4.6%;
}

#sequenceCard .codedIcon3x3 .codedIconGrid{
    width:70%;
    height:70%;
    gap:6%;
}

#sequenceAdvancedCard .codedIconGridLogo{
    width:min(92%, 206px);
}

#sequenceAdvancedCard .codedIcon6x3 .codedIconGrid{
    width:93%;
    height:47%;
    gap:4.8% 2.6%;
    transform:translateY(-1%);
}

#sequenceAdvancedCard .codedIcon6x3 .codedIconCell{
    border-radius:14%;
    font-size:clamp(12px, 1.25vw, 22px);
}

#chimpCard .codedIcon3x3 .codedIconGrid{
    width:78%;
    height:78%;
}

#chimpAdvancedCard .codedIcon6x3 .codedIconGrid{
    width:95%;
    height:48%;
    transform:translateY(-1%);
}

#chimpAdvancedCard .codedIcon6x3 .codedIconCell{
    font-size:clamp(23px, 0.98vw, 17px);
    line-height:1;
}

#numberCard .codedIconText,
#verbalCard .codedIconText{
    width:min(82%, 184px);
}

#numberCard .codedIconText span{
    font-size:clamp(30px, 3vw, 54px);
}

#verbalCard .codedIconText{
    width:min(90%, 194px);
    gap:8%;
}

#verbalCard .codedIconText span{
    max-width:100%;
    overflow:hidden;
    color:#fff;
    font-size:clamp(28px, 2.85vw, 48px);
    line-height:0.92;
    white-space:nowrap;
}

#verbalCard .codedIconText i{
    width:58%;
}

.cell.pressed{
    background:#2a2a2a;
    transform:scale(0.97);
    box-shadow:none;
}

#advancedPatterns{
    display:flex;
    gap:32px;
    align-items:flex-start;
    justify-content:center;
    min-height:120px;
}

.advancedGamePattern{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.patternLetter{
    font-size:32px;
    font-weight:bold;
}

.patternGrid{
    display:grid;
    gap:6px;
}

.patternCell{
    width:45px;
    height:45px;
    background:#333;
    border-radius:6px;
}

.patternActive{
    background:var(--accent-color);
}

.sequenceAdvancedGrid{
    width:min(calc(100vw - 84px), 1180px);
    height:min(70vh, 590px);
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    grid-template-rows:repeat(5, 1fr);
    gap:clamp(8px, 1.35vw, 18px);
    margin-top:0;
    padding:clamp(8px, 2vh, 22px) 0;
    box-sizing:border-box;
}

.sequenceAdvancedCell{
    min-width:0;
    min-height:0;
    border-radius:10px;
    background:transparent;
    border:1px solid transparent;
    opacity:1;
    cursor:default;
    user-select:none;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    contain:layout paint;
    transition:none;
}

.sequenceAdvancedCell:nth-child(10n + 2),
.sequenceAdvancedCell:nth-child(10n + 4),
.sequenceAdvancedCell:nth-child(10n + 6),
.sequenceAdvancedCell:nth-child(10n + 8),
.sequenceAdvancedCell:nth-child(10n + 10){
    transform:translateY(clamp(7px, 1.8vh, 18px));
}

.sequenceAdvancedCell.visible{
    background:var(--accent-color);
    border-color:rgba(var(--accent-color-rgb),0.2);
    opacity:1;
    cursor:pointer;
    box-shadow:0 0 0 rgba(var(--accent-color-rgb),0);
}

.sequenceAdvancedCell.replayActive,
.cell.replayActive{
    background:var(--accent-color);
    opacity:1;
    transform:translateY(-2px);
    box-shadow:none;
}

.sequenceAdvancedCell.replayActive{
    outline:2px solid rgba(255,255,255,0.9);
    outline-offset:2px;
}

.sequenceAdvancedCell:nth-child(10n + 2).replayActive,
.sequenceAdvancedCell:nth-child(10n + 4).replayActive,
.sequenceAdvancedCell:nth-child(10n + 6).replayActive,
.sequenceAdvancedCell:nth-child(10n + 8).replayActive,
.sequenceAdvancedCell:nth-child(10n + 10).replayActive{
    transform:translateY(clamp(7px, 1.8vh, 18px));
}

body.reduced-motion .sequenceAdvancedCell.replayActive{
    outline:2px solid rgba(255,255,255,0.95);
    box-shadow:none;
    filter:none;
}

#game.sequenceAdvancedGame,
#game.chimpAdvancedGame{
    width:100%;
    min-height:calc(100vh - 56px);
    justify-content:flex-start;
    box-sizing:border-box;
}

#game.sequenceAdvancedGame{
    min-height:100vh;
    padding:24px 42px 96px;
    justify-content:center;
}

#game.sequenceAdvancedGame #countdown,
#game.sequenceAdvancedGame #advancedPatterns,
#game.sequenceAdvancedGame #targetPattern,
#game.chimpAdvancedGame #countdown,
#game.chimpAdvancedGame #advancedPatterns,
#game.chimpAdvancedGame #targetPattern{
    display:none;
    min-height:0;
    height:0;
    margin:0;
}

#game.sequenceAdvancedGame #result{
    display:none;
    min-height:0;
    height:0;
    margin:0;
}

#replayPatternButton{
    margin-top:34px;
}

#game.sequenceAdvancedGame #replayPatternButton{
    margin-top:50px;
    order:1;
}

#game.sequenceAdvancedGame .sequenceAdvancedGrid{
    margin-top:-250px;
}

#game.chimpAdvancedGame{
    padding:58px 150px 28px;
}

#game.chimpAdvancedGame #continueButton{
    order:2;
    position:fixed;
    left:50%;
    top:calc(52% + 112px);
    transform:translateX(-50%);
    z-index:6;
}

#game.chimpAdvancedGame #result{
    order:1;
}

.chimpAdvancedGrid{
    width:min(calc(100vw - 300px), 1180px, calc(75vh * 2));
    aspect-ratio:2 / 1;
    height:auto;
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    grid-template-rows:repeat(5, 1fr);
    gap:18px;
    margin-top:0;
}

.chimpAdvancedCell{
    min-width:0;
    min-height:0;
    border-radius:14px;
    background:transparent;
    border:1px solid transparent;
    cursor:default;
    user-select:none;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    contain:layout paint;
    transition:
        background-color 60ms ease,
        transform 60ms ease,
        box-shadow 80ms ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(30px, 3.8vw, 54px);
    font-weight:700;
    line-height:1;
}

.chimpAdvancedCell.visible{
    background:var(--accent-color);
    border-color:rgba(var(--accent-color-rgb),0.2);
    cursor:pointer;
}

.chimpAdvancedCell.hiddenNumber span{
    opacity:0;
}

.chimpAdvancedCell span{
    opacity:1;
}

.chimpAdvancedMessage,
.wordMemoryMessage,
.centerAnnouncement{
    position:fixed;
    left:50%;
    top:52%;
    transform:translate(-50%, -50%);
    width:min(90vw, 720px);
    z-index:5;
    pointer-events:none;
    min-height:120px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0;
    text-align:center;
}

.chimpAdvancedMessage span,
.wordMemoryMessage span,
.centerAnnouncement{
    font-size:clamp(34px, 5vw, 64px);
    font-weight:700;
}

.chimpAdvancedMessage small,
.wordMemoryMessage small{
    font-size:clamp(18px, 2vw, 26px);
    color:#f2f2f2;
}

#game:not(.chimpAdvancedGame):not(.numberMemoryGame):not(.wordMemoryGame) #result:not(:empty){
    position:fixed;
    left:50%;
    top:52%;
    transform:translate(-50%, -50%);
    width:min(90vw, 640px);
    min-height:0;
    margin:0;
    text-align:center;
    z-index:5;
    pointer-events:none;
    font-size:clamp(28px, 4vw, 48px);
    font-weight:700;
}

#game.memoryFocusGame{
    position:fixed;
    inset:0;
    z-index:4;
    width:100vw;
    min-height:100dvh;
    max-height:100dvh;
    padding:0;
    overflow:hidden;
    background:transparent;
}

#game.memoryFocusGame .gameHud,
#game.memoryFocusGame #scoreText,
#game.memoryFocusGame #livesText,
#game.memoryFocusGame #countdown,
#game.memoryFocusGame #advancedPatterns,
#game.memoryFocusGame #continueButton,
#game.memoryFocusGame #replayPatternButton,
#game.memoryFocusGame #checkButton,
#game.memoryFocusGame #result,
#game.memoryFocusGame #grid,
#game.memoryFocusGame #targetPattern{
    display:none !important;
}

.memoryFocusShell{
    position:fixed;
    inset:0;
    z-index:12;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:28px 40px calc(34px + env(safe-area-inset-bottom));
    box-sizing:border-box;
    pointer-events:none;
}

.memoryFocusShell[hidden]{
    display:none !important;
}

.memoryFocusTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.memoryFocusBackButton,
.memoryFocusStatCard{
    height:108px;
    border:1px solid rgba(176,198,224,0.15);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(14,17,24,0.88), rgba(10,12,17,0.9));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.02),
        0 18px 42px rgba(0,0,0,0.26);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.memoryFocusBackButton{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:min(176px, 16vw);
    padding:0 12px;
    color:#f4f8ff;
    font-size:18px;
    font-weight:500;
    letter-spacing:0.015em;
    pointer-events:auto;
    cursor:pointer;
}

.memoryFocusBackButton:hover{
    border-color:rgba(var(--accent-color-rgb),0.4);
}

.memoryFocusBackIcon{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    color:#f4f8ff;
}

.memoryFocusBackIcon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.memoryFocusBackLabel{
    white-space:nowrap;
    text-align:center;
}

.memoryFocusStats{
    display:flex;
    align-items:stretch;
    gap:14px;
}

.memoryFocusStatCard{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto;
    align-items:center;
    row-gap:8px;
    min-width:0;
    padding:12px 18px 14px;
    box-sizing:border-box;
    pointer-events:auto;
}

.memoryFocusLivesCard{
    width:224px;
    color:var(--accent-color);
}

.memoryFocusScoreCard{
    width:176px;
}

.memoryFocusStatLabel{
    color:rgba(239,244,255,0.56);
    font-size:14px;
    font-weight:500;
    line-height:1;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.memoryFocusHearts{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
}

.memoryFocusHearts .lifeHeart{
    width:40px;
    height:40px;
    color:currentColor;
    filter:none;
}

.memoryFocusHearts .lifeHeart svg{
    fill:currentColor;
    stroke:none;
}

.memoryFocusStatValue{
    align-self:center;
    justify-self:end;
    color:#f8fbff;
    font-size:42px;
    font-weight:500;
    line-height:0.92;
    text-shadow:0 0 18px rgba(255,255,255,0.1);
}

.memoryFocusCenter{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:108px;
    min-height:0;
    padding:44px 0 0;
}

.memoryFocusPanel{
    width:min(860px, calc(100vw - 180px));
    min-height:min(50vh, 580px);
    padding:72px 92px 60px;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:34px;
    pointer-events:auto;
    transition:border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.memoryFocusPanelBody{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
}

.memoryFocusPanelFooter{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.memoryFocusDisplay{
    color:#fbfdff;
    text-align:center;
    line-height:0.88;
    transition:color 0.16s ease, transform 0.16s ease;
}

.memoryFocusDisplay-number{
    font-family:var(--app-font);
    font-size:clamp(88px, 10vw, 140px);
    font-weight:720;
    letter-spacing:-0.05em;
}

.memoryFocusDisplay-word{
    width:100%;
    font-size:clamp(64px, 7vw, 126px);
    font-weight:520;
    letter-spacing:-0.04em;
    line-height:0.96;
    overflow-wrap:anywhere;
    margin-top:12px;
    text-transform:uppercase;
}

.memoryFocusShell[data-feedback="correct"] .memoryFocusDisplay-word{
    color:#61d98c;
}

.memoryFocusShell[data-feedback="wrong"] .memoryFocusDisplay-word{
    color:#ff6f7b;
}

.memoryFocusMeter{
    position:relative;
    width:min(100%, 360px);
    height:10px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(90,100,118,0.34);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.44);
}

.numberMemoryMeter{
    margin:0 auto;
    margin-top:-48px;
}

.memoryFocusMeterFill{
    width:100%;
    height:100%;
    border-radius:inherit;
    transform-origin:left center;
    background:linear-gradient(90deg, #1f8be9 0%, #2fa1ff 100%);
    box-shadow:
        0 0 18px rgba(47,161,255,0.34),
        inset 0 0 0 1px rgba(255,255,255,0.08);
}

.memoryFocusInputWrap{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.numberMemoryInputCard{
    width:min(100%, 640px);
    min-height:104px;
    padding:18px 28px;
    border:1px solid rgba(176,198,224,0.14);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(14,17,24,0.9), rgba(10,12,17,0.86));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.02),
        0 18px 42px rgba(0,0,0,0.26);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
}

.memoryFocusAnswerInput{
    font-family:var(--app-font);
    width:min(100%, 420px);
    padding:0;
    border:0;
    background:transparent;
    color:#fbfdff;
    text-align:center;
    font-size:clamp(64px, 8vw, 112px);
    font-weight:720;
    letter-spacing:-0.02em;
    caret-color:#2fa1ff;
    outline:none;
}

.numberMemoryInputCard .memoryFocusAnswerInput{
    transform:translateX(18px);
}

.memoryFocusActions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
}

.memoryFocusChoiceButton{
    flex:0 0 auto;
    width:180px;
    min-height:74px;
    margin:0;
    padding-inline:12px;
    border:1px solid rgba(173,192,214,0.16);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(15,18,26,0.92), rgba(10,13,18,0.88));
    color:#edf4ff;
    font-size:20px;
    font-weight:500;
    letter-spacing:0.22em;
    text-transform:uppercase;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
}

.memoryFocusChoiceButton:hover{
    border-color:rgba(var(--accent-color-rgb),0.48);
    color:#fff;
}

.numberMemoryActionRow{
    display:flex;
    justify-content:center;
}

.numberMemoryPrimaryButton{
    min-width:148px;
    max-width:188px;
    min-height:52px;
    font-size:14px;
    letter-spacing:0.14em;
}

.memoryFocusCaptionRow{
    width:min(640px, calc(100vw - 72px));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-top:136px;
}

.memoryFocusCaptionRule{
    flex:1;
    height:1px;
    max-width:148px;
    background:linear-gradient(90deg, rgba(var(--accent-color-rgb),0), rgba(var(--accent-color-rgb),0.44), rgba(var(--accent-color-rgb),0));
}

.memoryFocusCaption{
    margin:0;
    color:rgba(255,255,255,0.46);
    font-size:18px;
    font-weight:500;
    letter-spacing:0.34em;
    text-transform:uppercase;
    text-align:center;
}

.memoryFocusCaptionRow[hidden]{
    display:none !important;
}

@media (max-width:1100px) and (orientation:portrait){
    body{
        overflow:auto;
        overflow-x:hidden;
        justify-content:flex-start;
        padding:18px 18px 28px;
        box-sizing:border-box;
    }

    #mainMenu{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:clamp(14px, 2.4vw, 22px);
        width:min(100%, 760px);
        max-width:760px;
        margin-top:76px;
        padding-bottom:18px;
    }

    #leaderboardButton,
    #streakButton,
    #statsButton,
    #settingsButton{
        top:clamp(12px, 2.4vw, 22px);
        width:clamp(50px, 5.4vw, 58px);
        height:clamp(50px, 5.4vw, 58px);
        border-radius:13px;
        font-size:clamp(17px, 2vw, 19px);
    }

    #leaderboardButton{
        left:clamp(12px, 2.4vw, 22px);
        width:clamp(50px, 5.4vw, 58px);
        min-width:clamp(50px, 5.4vw, 58px);
    }

    #streakButton{
        right:calc(clamp(12px, 2.4vw, 22px) + clamp(50px, 5.4vw, 58px) * 2 + 32px);
        width:clamp(98px, 9.5vw, 108px);
        min-width:clamp(98px, 9.5vw, 108px);
        font-size:clamp(15px, 1.9vw, 17px);
    }

    #statsButton{
        right:calc(clamp(12px, 2.4vw, 22px) + clamp(50px, 5.4vw, 58px) + 16px);
    }

    #settingsButton{
        right:clamp(12px, 2.4vw, 22px);
    }

    #statsOverlay,
    #leaderboardOverlay,
    #settingsOverlay,
    #streakOverlay,
    #gameModalOverlay{
        padding:14px;
        align-items:flex-start;
    }

    #statsPanel,
    #leaderboardPanel,
    #settingsPanel,
    #streakPanel,
    #gameModalPanel{
        width:100%;
        max-height:calc(100vh - 28px);
        padding:24px 16px 18px;
        border-radius:14px;
    }

    #statsTitle,
    #leaderboardTitle,
    #settingsTitle,
    #streakTitle,
    #gameModalTitle{
        font-size:28px;
        margin-bottom:18px;
    }

    #gameModalTitle{
        margin:0 38px;
    }

    #gameModalIcon{
        min-height:40px;
        margin-top:8px;
    }

    #gameModalDescription{
        max-width:300px;
        font-size:16px;
    }

    #statsCards{
        gap:18px;
    }

    #statsTitle{
        padding:0 92px;
        width:100%;
        text-align:center;
    }

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

    .statsGameCard{
        grid-template-columns:minmax(220px, 1fr) repeat(2, minmax(110px, 0.55fr));
        gap:12px;
    }

    .statsGameStat:nth-child(4){
        border-left-color:transparent;
    }

    .leaderboardLocalCard{
        grid-template-columns:1fr;
    }

    .leaderboardLocalCard dl{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .leaderboardControls{
        align-items:stretch;
        flex-direction:column;
    }

    .leaderboardFilters{
        width:100%;
    }

    .leaderboardTableWrap{
        overflow:visible;
        background:transparent;
        border:0;
    }

    .leaderboardTable,
    .leaderboardTable thead,
    .leaderboardTable tbody,
    .leaderboardTable tr,
    .leaderboardTable th,
    .leaderboardTable td{
        display:block;
    }

    .leaderboardTable thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }

    .leaderboardTable tr{
        margin-bottom:10px;
        border:1px solid rgba(255,255,255,0.07);
        border-radius:12px;
        background:var(--card-bg);
        overflow:hidden;
    }

    .leaderboardTable td,
    .leaderboardTable td:first-child,
    .leaderboardTable td:nth-child(3),
    .leaderboardTable td:nth-child(4),
    .leaderboardTable td:nth-child(5){
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        width:auto;
        min-height:40px;
        padding:10px 12px;
        text-align:right;
    }

    .leaderboardTable td::before{
        content:attr(data-label);
        flex:none;
        max-width:42%;
        color:var(--muted-text);
        font-size:12px;
        font-weight:800;
        text-align:left;
        text-transform:uppercase;
    }

    .leaderboardTable td span,
    .leaderboardTable td small{
        text-align:right;
    }

    .backgroundPreviewGrid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .backgroundPreviewCard{
        min-height:104px;
    }

    .backgroundPreviewSurface{
        min-height:62px;
    }

    .customColorField{
        display:grid;
        grid-template-columns:42px minmax(0, 1fr) 42px;
        align-items:center;
    }

    .customColorPopover{
        width:min(360px, calc(100vw - 24px));
        min-width:0;
        max-width:calc(100vw - 24px);
    }

    #classicCard,
    #sequenceCard,
    #chimpCard,
    #numberCard,
    #advancedCard,
    #sequenceAdvancedCard,
    #chimpAdvancedCard,
    #verbalCard{
        grid-column:auto;
        grid-row:auto;
    }

    .modeCard{
        width:100%;
        max-width:none;
        height:clamp(170px, 19vh, 240px);
        padding-top:clamp(12px, 1.7vh, 18px);
        border-radius:14px;
    }

    #title{
        position:fixed;
        top:clamp(14px, 2.4vw, 23px);
        left:50%;
        z-index:19;
        width:max-content;
        max-width:min(46vw, 420px);
        font-size:clamp(30px, 4.4vw, 48px);
        line-height:1;
        margin:0;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        transform:translateX(-50%);
    }

    .cardBottom{
        min-height:54px;
    }

    .cardBottom h2{
        font-size:15px;
        padding:6px 8px;
    }

    .cardIcon{
        padding:0 8px 8px;
    }

    .codedIcon{
        width:min(84%, 132px);
    }

    .codedIconCell{
        font-size:28px;
    }

    .codedIcon6x3 .codedIconCell{
        font-size:24px;
    }

    #sequenceAdvancedCard .codedIcon6x3 .codedIconCell{
        font-size:clamp(16px, 4vw, 20px);
        line-height:1;
    }

    .codedPatternLabel{
        font-size:34px;
    }

    .codedIconText span{
        font-size:42px;
    }

    .sequenceAdvancedGrid{
        width:min(100%, 680px);
        height:min(68vh, 520px);
        gap:8px;
    }

    #game.sequenceAdvancedGame,
    #game.chimpAdvancedGame{
        min-height:calc(100vh - 36px);
        padding:82px 14px 24px;
    }

    #game.sequenceAdvancedGame{
        min-height:100vh;
        padding:18px 14px 84px;
    }

    .chimpAdvancedGrid{
        width:min(100%, 680px, calc(68vh * 2));
        height:auto;
        gap:8px;
    }

    .chimpAdvancedCell{
        border-radius:9px;
    }
}

@media (max-width:520px) and (orientation:portrait){
    body{
        padding:12px 12px 24px;
    }

    #title{
        top:60px;
        max-width:calc(100vw - 24px);
        font-size:clamp(26px, 8vw, 34px);
    }

    #leaderboardButton,
    #streakButton,
    #statsButton,
    #settingsButton{
        top:12px;
        width:48px;
        height:48px;
        min-width:48px;
        padding:0;
    }

    #leaderboardButton{
        left:12px;
    }

    #streakButton{
        right:102px;
        width:88px;
        min-width:88px;
        overflow:hidden;
        white-space:nowrap;
    }

    #statsButton{
        right:57px;
    }

    #settingsButton{
        right:12px;
    }

    #mainMenu{
        width:min(100%, 380px);
        margin-top:92px;
        gap:12px;
    }

    .modeCard{
        height:clamp(156px, 24vh, 178px);
        border-radius:12px;
    }

    .cardBottom h2{
        font-size:14px;
    }
}

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

@media (max-width:640px) and (orientation:portrait){
    html,
    body{
        width:100%;
        min-height:100dvh;
        max-height:100dvh;
        -webkit-text-size-adjust:none;
        text-size-adjust:none;
    }

    body{
        align-items:stretch;
        justify-content:flex-start;
        overflow:hidden;
        overscroll-behavior:none;
        padding:
            calc(22px + env(safe-area-inset-top))
            14px
            calc(96px + env(safe-area-inset-bottom));
    }

    body::after{
        content:none;
    }

    body.mobileHubActions::after{
        content:"";
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:18;
        height:calc(78px + env(safe-area-inset-bottom));
        background:rgba(28,28,28,0.98);
        border-top:1px solid rgba(255,255,255,0.08);
        box-shadow:0 -12px 26px rgba(0,0,0,0.24);
        pointer-events:none;
    }

    #leaderboardButton,
    #streakButton,
    #statsButton,
    #settingsButton,
    #mobileActionsToggle{
        top:auto;
        bottom:calc(14px + env(safe-area-inset-bottom));
        width:56px;
        height:56px;
        min-width:56px;
        min-height:56px;
        border-radius:11px;
        font-size:22px;
        z-index:20;
        background:#101010;
        border-color:rgba(var(--accent-color-rgb),0.84);
    }

    #leaderboardButton,
    #streakButton,
    #statsButton,
    #settingsButton{
        width:72px;
        min-width:72px;
        max-width:72px;
        padding:0;
    }

    #settingsButton{
        left:calc(87.5vw - 35px);
        right:auto;
    }

    #statsButton{
        left:calc(62.5vw - 35px);
        right:auto;
    }

    #leaderboardButton{
        left:calc(37.5vw - 35px);
        right:auto;
    }

    #streakButton{
        left:calc(12.5vw - 36px);
        right:auto;
        width:108px;
        min-width:108px;
        max-width:108px;
        overflow:hidden;
        white-space:nowrap;
    }

    #mobileActionsToggle{
        display:block;
        visibility:hidden;
        pointer-events:none;
    }

    #streakButton .streakFlame{
        width:28px;
        height:28px;
    }

    #streakButton .streakButtonShell{
        gap:10px;
        padding:0 10px;
    }

    #streakButton .streakDivider{
        height:30px;
    }

    #streakButton .streakText{
        display:flex;
        font-size:24px;
    }

    #leaderboardButton,
    #streakButton,
    #statsButton{
        opacity:1;
        pointer-events:auto;
        transform:none;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease,
            background-color 0.18s ease;
    }

    body.mobileActionsOpen #leaderboardButton,
    body.mobileActionsOpen #streakButton,
    body.mobileActionsOpen #statsButton{
        opacity:1;
        pointer-events:auto;
        transform:none;
    }

    body.mobileActionsOpen #streakButton:not(.active){
        opacity:0.78;
    }

    #title{
        position:fixed;
        top:calc(24px + env(safe-area-inset-top));
        left:50%;
        right:auto;
        z-index:19;
        width:max-content;
        max-width:calc(100vw - 28px);
        margin:0;
        font-size:clamp(30px, 8.8vw, 44px) !important;
        line-height:0.94;
        text-align:center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:clip;
        transform:translateX(-50%);
    }

    button,
    .modeCard,
    .cell,
    .sequenceAdvancedCell,
    .chimpAdvancedCell,
    .leaderboardTab,
    .backgroundPreviewCard,
    .customColorPickerButton,
    .customPickerCloseButton,
    .customPickerConfirmButton,
    .customColorResetButton{
        touch-action:manipulation;
        -webkit-user-select:none;
        user-select:none;
    }

    .cell,
    .sequenceAdvancedCell,
    .chimpAdvancedCell{
        transition:none !important;
        box-shadow:none;
        will-change:auto;
    }

    .active,
    .sequenceAdvancedCell.replayActive,
    .chimpAdvancedCell.visible,
    .chimpAdvancedCell.hiddenNumber{
        box-shadow:none !important;
    }

    button:hover,
    button:focus-visible,
    #leaderboardButton:hover,
    #streakButton:hover,
    #statsButton:hover,
    #settingsButton:hover,
    #mobileActionsToggle:hover,
    .leaderboardTab:hover,
    .customColorPickerButton:hover,
    .customColorResetButton:hover,
    .customPickerCloseButton:hover,
    .customPickerConfirmButton:hover{
        box-shadow:none;
    }

    #mainMenu{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-rows:repeat(4, minmax(0, 1fr));
        width:100%;
        max-width:560px;
        height:calc(100dvh - 224px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        gap:14px;
        margin:36px auto 0;
        padding:0;
        box-sizing:border-box;
    }

    #classicCard,
    #sequenceCard,
    #chimpCard,
    #numberCard,
    #advancedCard,
    #sequenceAdvancedCard,
    #chimpAdvancedCard,
    #verbalCard{
        grid-column:auto;
        grid-row:auto;
    }

    #classicCard{ order:1; }
    #sequenceCard{ order:2; }
    #advancedCard{ order:3; }
    #sequenceAdvancedCard{ order:4; }
    #chimpCard{ order:5; }
    #chimpAdvancedCard{ order:6; }
    #numberCard{ order:7; }
    #verbalCard{ order:8; }

    .modeCard{
        height:100%;
        min-height:0;
        flex-direction:column;
        align-items:center;
        padding-top:clamp(9px, 1.4dvh, 14px);
        border-radius:14px;
    }

    body.density-compact #mainMenu{
        height:calc(100dvh - 224px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        gap:12px;
        margin-top:36px;
        padding-left:0;
        padding-right:0;
    }

    body.density-compact .modeCard{
        height:100%;
        min-height:0;
        padding-top:8px;
    }

    body.density-compact .cardBottom{
        min-height:46px;
    }

    body.density-compact .cardBottom h2{
        font-size:clamp(12px, 3.55vw, 15px);
    }

    body.density-compact .codedIcon,
    body.density-compact #advancedCard .codedIconAdvanced,
    body.density-compact #sequenceAdvancedCard .codedIconGridLogo,
    body.density-compact #chimpAdvancedCard .codedIconGridLogo,
    body.density-compact #numberCard .codedIconText,
    body.density-compact #verbalCard .codedIconText{
        width:min(78%, 92px, 19dvh);
    }

    .modeCard:hover{
        transform:none;
    }

    .cardIcon{
        flex:1 1 auto;
        width:100%;
        min-height:0;
        height:auto;
        overflow:hidden;
        padding:6px 10px 8px;
    }

    .cardBottom{
        flex:0 0 auto;
        width:100%;
        min-height:clamp(46px, 6.7dvh, 56px);
        margin-top:0;
        justify-content:center;
        padding:0 10px;
        box-sizing:border-box;
        overflow:hidden;
    }

    .cardBottom h2{
        width:100%;
        padding:0;
        font-size:clamp(13px, 3.7vw, 16px) !important;
        line-height:1.08;
        text-align:center;
        overflow-wrap:normal;
        word-break:normal;
        hyphens:none;
    }

    .codedIcon,
    #advancedCard .codedIconAdvanced,
    #sequenceAdvancedCard .codedIconGridLogo,
    #chimpAdvancedCard .codedIconGridLogo,
    #numberCard .codedIconText,
    #verbalCard .codedIconText{
        width:min(82%, 108px, 22dvh);
        max-height:100%;
    }

    .codedIconCell,
    .codedIcon6x3 .codedIconCell,
    #sequenceAdvancedCard .codedIcon6x3 .codedIconCell,
    #chimpAdvancedCard .codedIcon6x3 .codedIconCell{
        font-size:clamp(12px, 4.2vw, 20px);
    }

    .codedPatternLabel{
        font-size:clamp(20px, 6.2vw, 30px);
    }

    .codedIconText span,
    #verbalCard .codedIconText span{
        font-size:clamp(24px, 7.2vw, 34px);
        line-height:0.92;
    }

    #advancedCard .codedPatternLabel{
        font-size:clamp(14px, 4vw, 18px);
    }

    #advancedCard .codedIconAdvanced{
        width:min(94%, 134px, 28dvh);
    }

    #advancedCard .codedPattern .codedIconGrid{
        width:100%;
        gap:5.5%;
    }

    #sequenceAdvancedCard .codedIconGridLogo{
        width:min(94%, 120px, 25dvh);
    }

    #sequenceAdvancedCard .codedIcon6x3 .codedIconGrid{
        width:94%;
        height:49%;
    }

    #chimpAdvancedCard .codedIconGridLogo{
        width:min(94%, 120px, 25dvh);
    }

    #chimpAdvancedCard .codedIcon6x3 .codedIconGrid{
        width:95%;
        height:50%;
    }

    #chimpAdvancedCard .codedIcon6x3 .codedIconCell{
        font-size:clamp(9px, 3vw, 14px);
    }

    #numberCard .codedIconText span{
        font-size:clamp(22px, 6.4vw, 32px) !important;
        letter-spacing:0;
    }

    #verbalCard .codedIconText span{
        font-size:clamp(20px, 5.8vw, 29px) !important;
        letter-spacing:0;
    }

    .codedIconCell,
    #numberCard .codedIconText span,
    #verbalCard .codedIconText span,
    #advancedCard .codedPatternLabel,
    #gameModalIcon .codedIconType-number span,
    #gameModalIcon .codedIconType-word span,
    #gameModalIcon .codedIconType-visualAdvanced .codedPatternLabel,
    #gameModalIcon .codedIconType-chimp .codedIconCell,
    #gameModalIcon .codedIconType-chimpAdvanced .codedIconCell{
        font-family:"Noto Sans", Arial, sans-serif !important;
    }

    #game{
        width:100%;
        min-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow:hidden;
        padding:
            calc(132px + env(safe-area-inset-top))
            12px
            calc(14px + env(safe-area-inset-bottom));
        box-sizing:border-box;
        align-items:center;
        justify-content:center;
    }

    #game.visualMemoryGame,
    #game.advancedGame,
    #game.sequenceGame,
    #game.chimpGame,
    #game.numberMemoryGame:not(.memoryFocusGame),
    #game.wordMemoryGame:not(.memoryFocusGame){
        width:100%;
        min-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding:
            calc(218px + env(safe-area-inset-top))
            12px
            calc(14px + env(safe-area-inset-bottom));
        justify-content:center;
    }

    #game.chimpGame{
        padding-top:calc(248px + env(safe-area-inset-top));
    }

    #game.numberMemoryGame:not(.memoryFocusGame),
    #game.wordMemoryGame:not(.memoryFocusGame){
        padding:
            calc(44px + env(safe-area-inset-top))
            12px
            calc(28px + env(safe-area-inset-bottom));
    }

    #game.memoryFocusGame{
        min-height:100dvh;
        max-height:100dvh;
    }

    .memoryFocusShell{
        padding:
            calc(10px + env(safe-area-inset-top))
            16px
            calc(24px + env(safe-area-inset-bottom));
    }

    .memoryFocusTop{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .memoryFocusBackButton{
        width:100%;
        height:96px;
        padding:0 16px;
        border-radius:16px;
        font-size:16px;
    }

    .memoryFocusBackIcon{
        width:28px;
        height:28px;
    }

    .memoryFocusStats{
        gap:10px;
    }

    .memoryFocusStatCard{
        height:96px;
        padding:10px 14px 12px;
        border-radius:16px;
    }

    .memoryFocusLivesCard,
    .memoryFocusScoreCard{
        width:auto;
    }

    .memoryFocusStatLabel{
        font-size:12px;
    }

    .memoryFocusHearts{
        gap:10px;
    }

    .memoryFocusHearts .lifeHeart{
        width:30px;
        height:30px;
    }

    .memoryFocusStatValue{
        font-size:34px;
    }

    .memoryFocusCenter{
        justify-content:flex-start;
        gap:68px;
        padding-top:20px;
    }

    .memoryFocusPanel{
        width:100%;
        min-height:min(46vh, 500px);
        padding:34px 18px 22px;
        gap:22px;
    }

    .memoryFocusDisplay-number{
        font-size:clamp(76px, 18vw, 108px);
    }

    .memoryFocusDisplay-word{
        font-size:clamp(48px, 10vw, 76px);
        margin-top:8px;
    }

    .memoryFocusMeter{
        width:min(100%, 280px);
        height:8px;
    }

    .numberMemoryMeter{
        margin-top:-34px;
    }

    .memoryFocusAnswerInput{
        width:100%;
        font-size:clamp(54px, 14vw, 88px);
    }

    .numberMemoryInputCard .memoryFocusAnswerInput{
        transform:translateX(12px);
    }

    .numberMemoryInputCard{
        width:100%;
        min-height:88px;
        padding:14px 18px;
        border-radius:18px;
    }

    .memoryFocusActions{
        gap:4px;
    }

    .memoryFocusChoiceButton{
        width:140px;
        min-height:62px;
        border-radius:15px;
        font-size:16px;
        letter-spacing:0.18em;
        padding-inline:10px;
    }

    .numberMemoryPrimaryButton{
        min-width:148px;
        min-height:52px;
        font-size:14px;
    }

    .memoryFocusCaptionRow{
        width:min(100%, 480px);
        gap:14px;
        margin-top:102px;
    }

    .memoryFocusCaption{
        font-size:13px;
        letter-spacing:0.24em;
    }

    .memoryFocusCaptionRule{
        max-width:92px;
    }

    .gameHud{
        left:12px;
        top:calc(58px + env(safe-area-inset-top));
        width:calc(100vw - 24px);
        padding:16px 16px 14px;
        gap:14px;
        border-radius:14px;
    }

    .gameHudCollapsed{
        transform:translateX(calc(-100% + 48px));
    }

    .gameHudToggleButton{
        top:9px;
        right:10px;
        width:30px;
        height:30px;
        border-radius:9px;
    }

    .gameHudToggleIcon{
        width:16px;
        height:16px;
    }

    .gameHudTop{
        gap:12px;
    }

    .gameHudLabel{
        font-size:13px;
    }

    #levelText{
        font-size:clamp(42px, 12vw, 58px);
    }

    #livesText{
        min-height:44px;
        gap:4px;
    }

    #livesText .lifeHeart{
        width:1.22em;
        height:1.22em;
        font-size:1.22em;
    }

    #backToHubButton{
        height:32px;
        font-size:13px;
    }

    #game.advancedGame .gameHud,
    #game.sequenceAdvancedGame .gameHud,
    #game.chimpAdvancedGame .gameHud{
        left:12px;
        bottom:12px;
        width:calc(100vw - 24px);
        padding:14px 14px 12px;
        border-radius:14px;
        transform:none;
    }

    #game.advancedGame .gameHudContent,
    #game.sequenceAdvancedGame .gameHudContent,
    #game.chimpAdvancedGame .gameHudContent{
        gap:14px;
    }

    #game.advancedGame .gameHudTop,
    #game.sequenceAdvancedGame .gameHudTop,
    #game.chimpAdvancedGame .gameHudTop{
        gap:14px;
    }

    #game.advancedGame .gameHudLabel,
    #game.sequenceAdvancedGame .gameHudLabel,
    #game.chimpAdvancedGame .gameHudLabel{
        font-size:12px;
    }

    #game.advancedGame #levelText,
    #game.sequenceAdvancedGame #levelText,
    #game.chimpAdvancedGame #levelText{
        font-size:clamp(36px, 11vw, 46px);
        transform:translateX(2px);
    }

    #game.advancedGame #livesText,
    #game.sequenceAdvancedGame #livesText,
    #game.chimpAdvancedGame #livesText{
        min-height:38px;
        gap:5px;
        transform:translateX(-3px);
    }

    #game.advancedGame #livesText .lifeHeart,
    #game.sequenceAdvancedGame #livesText .lifeHeart,
    #game.chimpAdvancedGame #livesText .lifeHeart{
        width:1.12em;
        height:1.12em;
    }

    #game.advancedGame #backToHubButton,
    #game.sequenceAdvancedGame #backToHubButton,
    #game.chimpAdvancedGame #backToHubButton{
        width:min(160px, 34vw);
        height:38px;
        padding:0 14px;
        font-size:13px;
    }

    #grid{
        max-width:100%;
        max-inline-size:calc(100vw - 24px);
        margin-top:0;
    }

    .cell{
        border-radius:8px;
    }

    .cell.chimpCell,
    #game.sequenceGame .cell.sequenceCell{
        border-radius:13px;
    }

    #advancedPatterns{
        width:100%;
        max-width:360px;
        min-height:0;
        flex-wrap:wrap;
        gap:14px;
        margin:0 auto 4px;
    }

    .advancedGamePattern{
        gap:6px;
    }

    .patternLetter{
        font-size:26px;
    }

    #targetPattern{
        max-width:100%;
        margin:10px 0 0;
        font-size:22px;
        line-height:1.12;
        text-align:center;
    }

    button{
        min-height:44px;
        margin-top:16px;
        padding:12px 20px;
        border-radius:11px;
        font-size:16px;
    }

    #checkButton,
    #continueButton,
    #replayPatternButton{
        max-width:100%;
        white-space:normal;
    }

    #game.sequenceAdvancedGame,
    #game.chimpAdvancedGame{
        width:100%;
        min-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow:hidden;
        padding:
            calc(54px + env(safe-area-inset-top))
            12px
            calc(130px + env(safe-area-inset-bottom));
        justify-content:center;
    }

    .sequenceAdvancedGrid,
    .chimpAdvancedGrid{
        width:min(100%, 360px);
        height:min(calc(100dvh - 248px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 620px);
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        grid-template-rows:repeat(10, minmax(0, 1fr));
        gap:7px;
        aspect-ratio:auto;
        margin:0 auto;
        padding:0;
    }

    #game.chimpAdvancedGame{
        padding:
            calc(64px + env(safe-area-inset-top))
            12px
            calc(86px + env(safe-area-inset-bottom));
    }

    .chimpAdvancedGrid{
        height:min(calc(100dvh - 168px), 680px);
    }

    .sequenceAdvancedCell,
    .sequenceAdvancedCell:nth-child(10n + 2),
    .sequenceAdvancedCell:nth-child(10n + 4),
    .sequenceAdvancedCell:nth-child(10n + 6),
    .sequenceAdvancedCell:nth-child(10n + 8),
    .sequenceAdvancedCell:nth-child(10n + 10){
        transform:none;
        border-radius:8px;
    }

    .sequenceAdvancedCell.replayActive,
    .sequenceAdvancedCell:nth-child(10n + 2).replayActive,
    .sequenceAdvancedCell:nth-child(10n + 4).replayActive,
    .sequenceAdvancedCell:nth-child(10n + 6).replayActive,
    .sequenceAdvancedCell:nth-child(10n + 8).replayActive,
    .sequenceAdvancedCell:nth-child(10n + 10).replayActive{
        transform:none;
    }

    .chimpAdvancedCell{
        border-radius:8px;
        font-size:clamp(22px, 8vw, 38px);
    }

    #game.sequenceAdvancedGame #replayPatternButton{
        position:fixed;
        left:50%;
        bottom:calc(64px + env(safe-area-inset-bottom));
        z-index:6;
        margin:0;
        width:min(220px, calc(100vw - 64px));
        min-width:0;
        transform:translateX(-50%);
    }

    .chimpAdvancedMessage,
    .wordMemoryMessage,
    .centerAnnouncement{
        width:calc(100vw - 24px);
        min-height:96px;
        top:50%;
        gap:8px;
    }

    .chimpAdvancedMessage span,
    .wordMemoryMessage span,
    .centerAnnouncement{
        font-size:clamp(30px, 9vw, 44px);
    }

    .chimpAdvancedMessage small,
    .wordMemoryMessage small{
        font-size:clamp(16px, 4.6vw, 20px);
    }

    #game.chimpAdvancedGame #continueButton{
        top:auto;
        bottom:calc(22px + env(safe-area-inset-bottom));
    }

    .runOverCard{
        width:calc(100vw - 24px);
        padding:20px 16px 18px;
        border-radius:16px;
    }

    #grid.advancedLifeLossScreen{
        width:calc(100vw - 24px);
        min-height:260px;
    }

    .advancedLifeLossScreen{
        padding:22px 16px;
        border-radius:16px;
    }

    .advancedLifeLossScreen h2{
        font-size:clamp(30px, 10vw, 42px);
    }

    .advancedLifeLossScreen p{
        font-size:18px;
    }

    .runOverHeader{
        gap:10px;
        font-size:12px;
        letter-spacing:0.22em;
    }

    .runOverHeaderIcon{
        width:24px;
        height:24px;
    }

    .runOverTitle{
        margin-top:24px;
        font-size:clamp(30px, 10vw, 42px);
    }

    .runOverValue{
        font-size:clamp(60px, 16vw, 88px);
    }

    .runOverBestMetric{
        margin-top:18px;
        padding:12px 14px;
        border-radius:14px;
    }

    .runOverBestLabel,
    .runOverMetricLabel{
        font-size:12px;
    }

    .runOverBestValue{
        font-size:20px;
    }

    .runOverButton{
        min-height:54px;
        border-radius:14px;
        font-size:16px;
    }

    .runOverActions{
        gap:10px;
        margin-top:18px;
    }

    .gameOverActions{
        width:100%;
        gap:10px;
    }

    .gameOverActions button{
        flex:1;
        min-width:130px;
    }

    #statsOverlay,
    #leaderboardOverlay,
    #settingsOverlay,
    #streakOverlay,
    #gameModalOverlay{
        padding:
            calc(16px + env(safe-area-inset-top))
            14px
            calc(16px + env(safe-area-inset-bottom));
        align-items:center;
    }

    #statsPanel,
    #leaderboardPanel,
    #settingsPanel,
    #streakPanel{
        width:min(430px, calc(100vw - 28px));
        max-height:min(68dvh, 600px);
        padding:18px 14px 16px;
        border-radius:14px;
        overflow:auto;
        overscroll-behavior:contain;
        font-size:14px;
        box-shadow:0 14px 36px rgba(0,0,0,0.38);
    }

    #statsPanel{
        max-height:min(82dvh, 720px);
    }

    #leaderboardPanel{
        width:min(460px, calc(100vw - 28px));
        max-height:min(72dvh, 640px);
    }

    #gameModalPanel{
        width:min(100%, 360px);
        min-height:0;
        max-height:calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        padding:16px 14px 18px;
        border-radius:20px;
        overflow:hidden;
        overscroll-behavior:contain;
        font-size:14px;
    }

    #statsTitle,
    #leaderboardTitle,
    #settingsTitle,
    #streakTitle{
        padding:0;
        width:calc(100% - 104px);
        font-size:clamp(23px, 5.8vw, 28px) !important;
        line-height:1.05;
        margin-bottom:14px;
        min-height:38px;
        text-align:left;
        overflow-wrap:normal;
    }

    #statsTitle{
        width:100%;
        padding:0 92px;
        text-align:center;
    }

    #statsCloseButton,
    #leaderboardCloseButton,
    #settingsCloseButton,
    #streakCloseButton{
        top:12px;
        right:12px;
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
        border:0;
        border-radius:0;
        font-size:24px;
        background:transparent;
        color:rgba(236,244,255,0.88);
        font-family:Arial, sans-serif;
        box-shadow:none;
    }

    #gameModalCloseButton{
        top:16px;
        right:16px;
        width:34px;
        height:34px;
        min-width:34px;
        min-height:34px;
        border:0;
        border-radius:0;
        background:transparent;
        color:rgba(236,244,255,0.92);
        font-size:30px;
        line-height:30px;
        box-shadow:none;
    }

    .utilityFullscreenButton{
        display:flex;
        top:12px;
        right:56px;
        width:38px;
        height:38px;
        min-width:38px;
        min-height:38px;
        border-radius:10px;
        background:var(--control-bg);
        font-family:Arial, sans-serif;
        font-size:18px;
        box-shadow:none;
    }

    #statsPanel,
    #leaderboardPanel,
    #settingsPanel,
    #streakPanel,
    #gameModalPanel,
    .statsCard,
    .statsSummaryCard,
    .statsGameCard,
    .leaderboardLocalCard,
    .backgroundPreviewCard,
    .settingsGroup,
    .settingsDanger,
    .streakSummary,
    .streakStatus{
        contain:layout paint;
    }

    #statsCards{
        gap:16px;
    }

    .statsTabs{
        width:100%;
        border-radius:11px;
    }

    .statsTab{
        min-height:38px;
        padding:0 8px;
        gap:6px;
        font-size:clamp(12px, 3.2vw, 14px) !important;
    }

    .statsTabIcon{
        font-size:13px;
    }

    .statsTabPanel{
        gap:20px;
    }

    .statsSummaryGrid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .statsSummaryCard{
        min-height:126px;
        padding:15px;
        gap:10px;
        border-radius:12px;
    }

    .statsSummaryLabel{
        font-size:14px;
    }

    .statsSummaryIcon{
        width:30px;
        height:30px;
        border-radius:8px;
    }

    .statsSummaryCard strong{
        font-size:clamp(31px, 11vw, 44px);
    }

    .statsGameSection{
        gap:10px;
    }

    .statsSectionHeader h3{
        font-size:20px;
    }

    .statsGameList{
        gap:9px;
    }

    .statsGameCard{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:12px 8px;
        min-height:0;
        padding:12px;
        border-radius:12px;
    }

    .statsGameIdentity{
        grid-column:1 / -1;
        gap:10px;
    }

    .statsGameIdentity h4{
        font-size:15px;
        overflow-wrap:normal;
    }

    .statsGameIcon{
        width:48px;
        height:48px;
        border-radius:10px;
    }

    .statsGameIcon .codedIcon{
        width:43px;
        height:43px;
        min-height:43px;
        border-radius:9px;
    }

    .statsGameStat{
        min-height:54px;
        padding:9px 10px;
        border-left:0;
        border-radius:10px;
        background:rgba(255,255,255,0.035);
    }

    .statsGameStat span{
        font-size:12px;
        white-space:normal;
    }

    .statsGameStat strong{
        font-size:18px;
    }

    .statsGameListCompact .statsGameToday{
        display:none;
    }

    .settingsGroup legend,
    .settingsDanger h3{
        font-size:clamp(16px, 4.4vw, 19px) !important;
        line-height:1.1;
    }

    .settingsGroup,
    .settingsDanger{
        padding:12px;
        border-radius:10px;
    }

    .backgroundPreviewCard.selected,
    .leaderboardTab.selected{
        box-shadow:none;
    }

    .backgroundPreviewGrid{
        gap:8px;
    }

    .backgroundPreviewCard{
        min-height:92px;
        padding:7px;
    }

    .backgroundPreviewSurface{
        min-height:54px;
    }

    #gameModalTitle{
        margin:10px 24px 14px;
        max-width:290px;
        font-size:clamp(24px, 7.2vw, 36px);
        line-height:1.04;
    }

    #gameModalIcon{
        min-height:40px;
        margin-top:2px;
        overflow:hidden;
    }

    #gameModalDescription{
        max-width:min(100%, 320px);
        margin-top:0;
        font-size:clamp(15px, 4.2vw, 19px);
        line-height:1.42;
    }

    #gameModalStartButton{
        min-width:min(100%, 190px);
        min-height:54px;
        margin-top:auto;
        padding:0 20px;
        border-radius:20px;
        font-size:clamp(18px, 5.8vw, 24px);
    }

    .customPickerCompare{
        grid-template-columns:1fr;
    }

    #screenFeedback.screenFeedback.correct{
        background:
            radial-gradient(circle at 50% 48%, rgba(var(--accent-color-rgb),0.1), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,0.025), transparent 44%);
        animation:screenFeedbackSuccessMobile 0.26s ease-out;
    }

    #screenFeedback.screenFeedback.wrong{
        background:
            radial-gradient(circle at 50% 48%, rgba(255,95,95,0.09), transparent 40%),
            linear-gradient(180deg, rgba(255,95,95,0.035), transparent 48%);
        animation:screenFeedbackErrorMobile 0.24s ease-out;
    }

    .lifeHeart{
        text-shadow:none;
        filter:none;
    }

    .active{
        box-shadow:none;
    }

}

@keyframes screenFeedbackSuccessMobile{
    0%{
        opacity:0;
        box-shadow:inset 0 0 0 0 rgba(var(--accent-color-rgb),0);
    }
    42%{
        opacity:0.54;
        box-shadow:inset 0 0 0 1px rgba(var(--accent-color-rgb),0.2);
    }
    100%{
        opacity:0;
        box-shadow:inset 0 0 0 6px rgba(var(--accent-color-rgb),0);
    }
}

@keyframes screenFeedbackErrorMobile{
    0%{
        opacity:0;
        box-shadow:inset 0 0 0 0 rgba(255,95,95,0);
    }
    42%{
        opacity:0.5;
        box-shadow:inset 0 0 0 1px rgba(255,95,95,0.18);
    }
    100%{
        opacity:0;
        box-shadow:inset 0 0 0 5px rgba(255,95,95,0);
    }
}

@media (max-width:360px) and (orientation:portrait){
    #mainMenu{
        height:calc(100dvh - 214px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin-top:32px;
        gap:10px;
    }

    .modeCard{
        height:100%;
        min-height:0;
    }

    .cardBottom{
        padding:0 12px;
    }

    .leaderboardLocalCard dl,
    .leaderboardFilters{
        grid-template-columns:1fr;
    }

    .cardBottom h2{
        font-size:clamp(12px, 3.75vw, 14px);
    }

    .codedIcon,
    #advancedCard .codedIconAdvanced,
    #sequenceAdvancedCard .codedIconGridLogo,
    #chimpAdvancedCard .codedIconGridLogo,
    #numberCard .codedIconText,
    #verbalCard .codedIconText{
        width:min(82%, 86px, 21dvh);
    }

    #advancedCard .codedIconAdvanced,
    #sequenceAdvancedCard .codedIconGridLogo,
    #chimpAdvancedCard .codedIconGridLogo{
        width:min(94%, 96px, 24dvh);
    }

    .sequenceAdvancedGrid,
    .chimpAdvancedGrid{
        gap:5px;
    }
}

@media (min-width:641px) and (max-width:760px) and (orientation:portrait){
    html,
    body{
        -webkit-text-size-adjust:none;
        text-size-adjust:none;
    }

    #title{
        left:50%;
        max-width:calc(100vw - 150px);
        font-size:clamp(24px, 5vw, 34px) !important;
        overflow:hidden;
        text-overflow:clip;
        transform:translateX(-50%);
    }

    .cardBottom h2{
        font-size:clamp(14px, 2.65vw, 18px) !important;
        line-height:1.08;
    }

    #numberCard .codedIconText span{
        font-size:clamp(34px, 5.4vw, 44px) !important;
    }

    #verbalCard .codedIconText span{
        font-size:clamp(32px, 5vw, 42px) !important;
    }

    #statsTitle,
    #leaderboardTitle,
    #settingsTitle,
    #streakTitle{
        font-size:clamp(28px, 5vw, 36px) !important;
        line-height:1.05;
        padding:0;
        width:calc(100% - 112px);
        min-height:40px;
        text-align:left;
        overflow-wrap:normal;
    }

    #statsTitle{
        width:100%;
        padding:0 104px;
        text-align:center;
    }

    .utilityFullscreenButton{
        display:flex;
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
        top:14px;
        right:62px;
        box-shadow:none;
    }

    #statsCloseButton,
    #leaderboardCloseButton,
    #settingsCloseButton,
    #streakCloseButton{
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
        top:14px;
        right:14px;
        box-shadow:none;
    }

    .settingsGroup legend,
    .settingsDanger h3{
        font-size:clamp(18px, 3.6vw, 24px) !important;
        line-height:1.1;
    }

}

/* Settings layout. */
#settingsOverlay{
    padding:42px;
    background:radial-gradient(circle at 50% -18%, rgba(var(--accent-color-rgb),0.24), transparent 38%), radial-gradient(circle at 100% 50%, rgba(var(--accent-color-rgb),0.13), transparent 30%), rgba(1,7,14,0.82);
    backdrop-filter:blur(5px);
}

#settingsPanel{
    width:min(1360px, calc(100vw - 80px));
    max-height:min(1000px, calc(100dvh - 80px));
    padding:28px 28px 24px;
    border-radius:14px;
    border:1px solid rgba(var(--accent-color-rgb),0.86);
    background:linear-gradient(180deg, rgba(255,255,255,0.045), transparent 20%), radial-gradient(circle at 18% 0%, rgba(var(--accent-color-rgb),0.16), transparent 34%), rgba(11,18,29,0.94);
    box-shadow:0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 36px rgba(var(--accent-color-rgb),0.34), 0 30px 90px rgba(0,0,0,0.62);
    overflow:auto;
}

#settingsTitle{
    margin:0 92px 18px 20px;
    padding:0;
    width:auto;
    min-height:40px;
    text-align:left;
    color:#f6f8fc;
    font-size:34px !important;
    font-weight:800;
}

#settingsCloseButton,#settingsFullscreenButton{
    top:8px;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    border:1px solid rgba(169,195,223,0.2);
    border-radius:10px;
    background:rgba(28,40,57,0.78);
    color:#ecf4ff;
    box-shadow:0 0 0 1px rgba(255,255,255,0.035) inset;
}

#settingsCloseButton{right:8px;font-size:30px;}
#settingsFullscreenButton{right:52px;font-size:21px;}

@media (min-width:1101px){
    #settingsHeader{
        position:sticky;
        top:-28px;
        z-index:6;
        min-height:84px;
        margin:-28px -28px 24px;
        padding:28px 28px 16px;
        box-sizing:border-box;
        border-bottom:1px solid rgba(153,184,219,0.13);
        background:
            linear-gradient(180deg, rgba(11,18,29,0.98), rgba(11,18,29,0.9)),
            radial-gradient(circle at 18% 0%, rgba(var(--accent-color-rgb),0.18), transparent 34%);
        backdrop-filter:blur(12px);
    }

    #settingsHeader #settingsTitle{
        margin:0 120px 0 20px;
    }
}
#settingsContent{position:relative;display:grid;grid-template-columns:232px minmax(0, 1fr);gap:24px;min-height:760px;}
.settingsSidebar{display:flex;flex-direction:column;gap:12px;min-height:100%;padding:16px;border:1px solid rgba(153,184,219,0.16);border-radius:10px;background:linear-gradient(180deg, rgba(24,38,58,0.72), rgba(8,15,25,0.62));}
.settingsSideItem{display:grid;grid-template-columns:36px minmax(0, 1fr);align-items:start;gap:12px;width:100%;min-height:82px;margin:0;padding:16px 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:#f5f8ff;text-align:left;box-shadow:none;}
.settingsSideItem.selected{border-color:rgba(var(--accent-color-rgb),0.84);background:linear-gradient(135deg, rgba(var(--accent-color-rgb),0.26), rgba(34,52,75,0.46));box-shadow:4px 0 0 var(--accent-color) inset, 0 0 26px rgba(var(--accent-color-rgb),0.28);}
.settingsSideItem strong{display:block;margin:1px 0 6px;font-size:17px;font-weight:650;}
.settingsSideItem small{display:block;color:#b9c2d1;font-size:14px;line-height:1.35;}
.settingsSideIcon,.settingsSection h3 span,.settingsGroup legend span,.settingsFieldTitle span{display:inline-flex;align-items:center;justify-content:center;flex:none;}
.settingsSideIcon{width:30px;height:30px;color:var(--accent-color);}
.settingsSideIcon svg,.settingsSection h3 svg,.settingsGroup legend svg,.settingsFieldTitle svg,#resetLocalDataButton svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.settingsSideIcon .assetIcon,
.settingsSection h3 .assetIcon,
.settingsGroup legend .assetIcon,
.settingsFieldTitle .assetIcon{
    width:100%;
    height:100%;
}
.settingsAutoSaveNote{display:flex;gap:12px;margin-top:auto;padding:14px 16px;border:1px solid rgba(153,184,219,0.13);border-radius:8px;background:rgba(23,35,51,0.48);color:#aeb8c8;font-size:14px;line-height:1.35;}
.settingsAutoSaveNote span{display:grid;place-items:center;flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;background:var(--accent-color);color:#07111e;font-size:12px;font-weight:900;}
.settingsAutoSaveNote p{margin:0;}
.settingsDashboard{display:flex;flex-direction:column;gap:12px;min-width:0;}
.settingsSection{padding:18px 20px 12px;border:1px solid rgba(141,169,201,0.15);border-radius:12px;background:linear-gradient(180deg, rgba(22,34,51,0.72), rgba(10,17,27,0.68));}
.settingsSection h3{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:#4aa8ff;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.settingsSection h3 span{width:19px;height:19px;}
.settingsSection h3 .assetIcon{width:24px;height:24px;}
.settingsSection h3 .assetIcon::before,
.settingsSection h3 .assetIcon::after{
    transform:scale(1.18);
}
.settingsGeneralGrid{display:grid;grid-template-columns:1fr 1.25fr 1.65fr;gap:20px;}
.settingsMasonry{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);gap:10px 14px;}
.settingsGroup,.settingsDanger{padding:14px 16px;border:1px solid rgba(151,177,207,0.13);border-radius:9px;background:rgba(12,19,30,0.66);}
.settingsGroup legend,.settingsFieldTitle{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:0;color:#f3f7ff;font-size:14px !important;font-weight:750;line-height:1.2;}
.settingsGroup legend span,.settingsFieldTitle span{width:18px;height:18px;color:#b8c4d4;}
.settingsGroup legend .assetIcon,
.settingsFieldTitle .assetIcon{
    width:22px;
    height:22px;
}
.settingsGroup legend .assetIcon::before,
.settingsGroup legend .assetIcon::after,
.settingsFieldTitle .assetIcon::before,
.settingsFieldTitle .assetIcon::after{
    transform:scale(1.14);
}
.settingsSegmentControl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78px, 1fr);gap:7px;width:max-content;max-width:100%;}
.settingsSegmentOption{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border:1px solid rgba(145,171,200,0.14);border-radius:7px;background:linear-gradient(180deg, rgba(34,45,61,0.74), rgba(20,29,42,0.74));color:#e7ecf5;font-size:15px;cursor:pointer;box-sizing:border-box;}
.settingsSegmentOption input,.settingsSwatchOption input{position:absolute;opacity:0;pointer-events:none;}
.settingsSegmentOption::before{content:"";width:18px;height:18px;margin-right:12px;border:2px solid #aeb8c5;border-radius:50%;box-sizing:border-box;}
.settingsSegmentOption:has(input:checked)::before{border-color:var(--accent-color);box-shadow:inset 0 0 0 4px rgba(15,24,36,1), 0 0 12px rgba(var(--accent-color-rgb),0.7);background:var(--accent-color);}
.settingsSegmentOption:has(input:checked){border-color:var(--accent-color);background:linear-gradient(180deg, rgba(var(--accent-color-rgb),0.26), rgba(22,37,54,0.76));box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.26) inset;}
.settingsLanguageGroup{display:block;}
.settingsSelectShell{position:relative;display:flex;align-items:center;height:42px;border:1px solid rgba(151,177,207,0.26);border-radius:8px;background:rgba(12,18,28,0.72);overflow:hidden;}
.settingsLanguageFlag{display:grid;place-items:center;width:48px;font-size:22px;}
#settingsLanguageSelect{flex:1;min-width:0;height:100%;padding:0 42px 0 0;border:0;background:transparent;color:#f7f9fd;font-size:17px;outline:none;appearance:none;}
.settingsSelectShell::after{content:"⌄";position:absolute;right:14px;top:50%;color:#dce6f3;font-size:22px;transform:translateY(-56%);pointer-events:none;}
.settingsSwatchRow{display:flex;align-items:center;gap:18px;min-height:42px;}
.settingsSwatchOption{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer;}
.settingsSwatchOption span{width:34px;height:34px;border-radius:50%;background:var(--swatch-color);box-shadow:0 7px 18px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.2);}
.settingsSwatchOption:has(input:checked){outline:2px solid var(--accent-color);box-shadow:0 0 18px rgba(var(--accent-color-rgb),0.65);}
.settingsAddColorButton{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;margin:0;padding:0;border:1px solid rgba(157,181,209,0.28);border-radius:50%;background:rgba(23,32,46,0.8);color:#c8d3e3;font-size:25px;opacity:.8;box-shadow:none;}
.customColorField{gap:12px;}
.customColorPickerButton{width:44px;height:44px;}
.customColorPreview{width:32px;height:32px;}
.customColorField input[type="text"]{height:40px;border-radius:7px;background:rgba(13,20,31,0.76);font-size:16px;}
.customColorResetButton{width:38px;height:38px;border-radius:8px;background:rgba(18,27,40,0.78);}
.settingsHint{margin:7px 0 0 64px;color:#aeb8c8;font-size:12px;}
.backgroundPreviewGroup{margin-top:10px;}
.backgroundPreviewGrid{grid-template-columns:repeat(6, minmax(0, 1fr));gap:14px;}
.backgroundPreviewCard{min-height:96px;padding:0;border-radius:7px;background:transparent;border:0;text-align:center;}
.backgroundPreviewSurface{min-height:72px;border-radius:7px;border:1px solid rgba(147,174,207,0.2);}
.backgroundPreviewCard.selected .backgroundPreviewSurface{border-color:var(--accent-color);box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.25), 0 0 20px rgba(var(--accent-color-rgb),0.48);}
.backgroundPreviewCard.selected::after{content:"✓";position:absolute;right:10px;top:38px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-color);color:#fff;font-size:20px;font-weight:900;box-shadow:0 8px 16px rgba(0,0,0,0.28);}
.backgroundPreviewLabel{margin-top:4px;color:#d9e0ec;font-size:13px;font-weight:500;}
.settingsDangerWrap{position:relative;margin-top:10px;}
.settingsDanger{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:14px;min-height:72px;border-color:rgba(255,71,82,0.78);background:linear-gradient(90deg, rgba(120,25,34,0.38), rgba(38,18,26,0.52));}
.settingsDangerCopy{display:flex;align-items:center;gap:18px;}
.settingsDangerIcon{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:6px;background:#ff4b5b;color:#3a050b;font-weight:900;}
.settingsDanger h3{margin:0 0 8px;color:#ff515c;font-size:14px !important;letter-spacing:.04em;}
.settingsDanger p,#settingsConfirmMessage p{margin:0;color:#c7b7bd;font-size:13px;}
#resetLocalDataButton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:184px;min-height:45px;margin:0;padding:0 20px;border:1px solid rgba(255,83,91,0.9);border-radius:8px;background:linear-gradient(180deg, #c8323c, #a8212b);color:#fff;font-size:15px;font-weight:800;}
#resetLocalDataButton[hidden]{display:none;}
#resetLocalDataButton svg{width:18px;height:18px;}
#settingsConfirmMessage{position:absolute;right:0;bottom:calc(100% + 8px);max-width:320px;text-align:left;pointer-events:none;}
#settingsConfirmMessage:empty{display:none;}
#settingsConfirmArea{justify-self:end;}
#settingsConfirmArea:empty{display:none;}
.settingsConfirmActions{display:flex;align-items:center;gap:10px;}
#settingsOverlay.fullscreen #settingsPanel{width:100%;height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));}

@media (max-width:1100px){
    #settingsPanel{width:min(960px, calc(100vw - 36px));}
    #settingsContent{grid-template-columns:1fr;min-height:0;}
    .settingsSidebar{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));min-height:0;}
    .settingsAutoSaveNote{display:none;}
    .settingsGeneralGrid,.settingsMasonry{grid-template-columns:1fr;}
    .backgroundPreviewGrid{grid-template-columns:repeat(3, minmax(0, 1fr));}
}

@media (max-width:640px){
    #settingsOverlay{padding:12px;}
    #settingsPanel{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px 14px;}
    #settingsTitle{margin:0 100px 16px 2px;font-size:28px !important;}
    #settingsCloseButton,#settingsFullscreenButton{top:6px;width:38px;height:38px;min-width:38px;min-height:38px;}
    #settingsCloseButton{right:6px;}
    #settingsFullscreenButton{right:44px;}
    .settingsSidebar{display:flex;padding:10px;}
    .settingsSideItem{min-height:64px;padding:12px;}
    .settingsSection{padding:14px 12px;}
    .settingsSegmentControl{grid-auto-flow:row;grid-template-columns:repeat(2, minmax(0, 1fr));width:100%;}
    .settingsAccentGroup .settingsSwatchRow{gap:10px;flex-wrap:wrap;}
    .backgroundPreviewGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .settingsDanger{grid-template-columns:1fr;}
    #resetLocalDataButton{width:100%;}
    #settingsConfirmMessage{right:0;left:0;bottom:calc(100% + 8px);max-width:none;}
    #settingsConfirmArea{justify-self:stretch;}
}

/* Settings theme tokens. */
body{
    --settings-overlay-scrim:rgba(0,0,0,0.72);
    --settings-panel-surface:var(--panel-bg);
    --settings-panel-glow:rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.82));
    --settings-sidebar-surface:rgba(18,18,18,0.76);
    --settings-section-surface:var(--card-bg);
    --settings-control-surface:var(--control-bg);
    --settings-control-surface-strong:#242424;
    --settings-border:rgba(255,255,255,0.08);
    --settings-border-strong:rgba(var(--accent-color-rgb),0.38);
    --settings-muted:var(--muted-text);
}

body.theme-soft{
    --settings-overlay-scrim:rgba(0,0,0,0.58);
    --settings-panel-surface:#1d1d1d;
    --settings-sidebar-surface:rgba(37,37,37,0.82);
    --settings-section-surface:#252525;
    --settings-control-surface:#303030;
    --settings-control-surface-strong:#353535;
}

body.theme-amoled{
    --settings-overlay-scrim:rgba(0,0,0,0.86);
    --settings-panel-surface:#080808;
    --settings-sidebar-surface:rgba(10,10,10,0.9);
    --settings-section-surface:#111;
    --settings-control-surface:#171717;
    --settings-control-surface-strong:#202020;
    --settings-border:rgba(255,255,255,0.06);
}

body.theme-glass{
    --settings-overlay-scrim:rgba(0,0,0,0.54);
    --settings-panel-surface:rgba(21,21,21,0.78);
    --settings-sidebar-surface:rgba(31,31,31,0.48);
    --settings-section-surface:rgba(31,31,31,0.58);
    --settings-control-surface:rgba(38,38,38,0.66);
    --settings-control-surface-strong:rgba(45,45,45,0.72);
    --settings-border:rgba(255,255,255,0.14);
}

body.theme-neon{
    --settings-overlay-scrim:rgba(4,6,10,0.8);
    --settings-panel-surface:#12151b;
    --settings-sidebar-surface:rgba(25,29,37,0.78);
    --settings-section-surface:#191d25;
    --settings-control-surface:#202633;
    --settings-control-surface-strong:#26394a;
    --settings-panel-glow:rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.42));
}

body.theme-midnight{
    --settings-overlay-scrim:rgba(3,5,12,0.78);
    --settings-panel-surface:#101421;
    --settings-sidebar-surface:rgba(23,27,42,0.78);
    --settings-section-surface:#171b2a;
    --settings-control-surface:#20263a;
    --settings-control-surface-strong:#26314f;
    --settings-border:rgba(133,180,255,0.14);
}

#settingsOverlay{
    padding:24px;
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.36)), transparent 36%),
        var(--settings-overlay-scrim);
}

#statsOverlay,
#leaderboardOverlay,
#streakOverlay,
#gameModalOverlay{
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.36)), transparent 36%),
        var(--settings-overlay-scrim);
    backdrop-filter:blur(5px);
}

#settingsPanel{
    width:min(1480px, calc(100vw - 48px));
    max-height:calc(100dvh - 48px);
    padding:30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
        var(--settings-panel-surface);
    border-color:var(--settings-border-strong);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.045) inset,
        0 0 32px var(--settings-panel-glow),
        0 28px 86px rgba(0,0,0,0.54);
}

#settingsContent{
    grid-template-columns:250px minmax(0, 1fr);
    gap:26px;
    min-height:0;
    zoom:1;
}

.settingsSidebar{
    background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 30%), var(--settings-sidebar-surface);
    border-color:var(--settings-border);
}

.settingsSection{
    background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%), var(--settings-section-surface);
    border-color:var(--settings-border);
}

.settingsGroup,
.settingsDanger{
    background:var(--settings-control-surface);
    border-color:var(--settings-border);
}

.settingsSegmentOption{
    background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 45%), var(--settings-control-surface-strong);
    border-color:var(--settings-border);
}

.settingsSelectShell,
.customColorField input[type="text"],
.customColorResetButton,
.settingsLanguagePopover{
    background:var(--settings-control-surface);
    border-color:var(--settings-border);
}

.settingsSideItem small,
.settingsHint,
.settingsAutoSaveNote{
    color:var(--settings-muted);
}

.settingsLanguagePopover{
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.07), transparent 42%),
        var(--settings-panel-surface);
}

@media (min-width:1001px){
    #settingsContent{
        zoom:1;
    }
}

@media (max-width:1100px){
    #settingsPanel{
        width:min(980px, calc(100vw - 28px));
        max-height:calc(100dvh - 28px);
    }
}

@media (max-width:640px){
    #settingsOverlay{
        padding:12px;
    }

    #settingsPanel{
        width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
        padding:18px 14px;
    }
}
/* Settings navigation. */
#settingsTitle{margin:0 92px 18px 0;min-height:34px;}
#settingsCloseButton,#settingsFullscreenButton{top:14px;width:44px;height:44px;min-width:44px;min-height:44px;border:0;border-radius:0;background:transparent;color:rgba(236,244,255,0.88);line-height:1;box-shadow:none;text-shadow:none;filter:none;}
#settingsCloseButton{right:8px;font-size:31px;}
#settingsFullscreenButton{right:46px;font-size:24px;}
#settingsContent{align-items:start;grid-template-columns:250px minmax(0, 1fr);min-height:0;}
.settingsSidebar{position:sticky;top:0;align-self:start;max-height:calc(100dvh - 112px);min-height:0;}
.settingsSidebarInner{display:flex;flex-direction:column;gap:12px;min-height:100%;}
.settingsSideItem:hover,.settingsSideItem:focus-visible{border-color:rgba(var(--accent-color-rgb),0.44);background:rgba(var(--accent-color-rgb),0.08);}
.settingsSection{scroll-margin-top:18px;}
.settingsGeneralGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
.settingsGeneralGrid .settingsLanguageGroup{grid-column:1 / -1;}
.settingsMasonry{grid-template-columns:repeat(3, minmax(0, 1fr));margin-bottom:14px;}
.settingsThemeGroup,.backgroundPreviewGroup,.settingsTypographyGroup{margin-top:14px;}
.settingsThemeGrid,.settingsTypographyGrid,.backgroundPreviewGrid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px;}
.themePreviewCard,.backgroundPreviewCard,.settingsTypographyOption{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--settings-border);border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.035), transparent 48%), var(--settings-control-surface-strong);color:#eef4ff;cursor:pointer;box-sizing:border-box;}
.themePreviewCard input,.settingsTypographyOption input{position:absolute;opacity:0;pointer-events:none;}
.themePreviewCard,.backgroundPreviewCard{gap:9px;min-height:0;padding:10px;text-align:center;box-shadow:none;overflow:visible;}
.themePreviewSurface{display:grid;grid-template-columns:1.1fr 0.9fr;grid-template-rows:1fr 1fr;gap:5px;min-height:74px;padding:8px;border:1px solid rgba(147,174,207,0.2);border-radius:7px;background:#111923;}
.backgroundPreviewSurface{display:block;flex:none;min-height:74px;padding:0;border:1px solid rgba(147,174,207,0.2);border-radius:7px;background:#111923;box-shadow:none;}
.themePreviewSurface span{min-width:0;border-radius:5px;background:rgba(255,255,255,0.14);}
.themePreviewSurface span:first-child{grid-row:1 / -1;background:linear-gradient(160deg, rgba(var(--accent-color-rgb),0.84), rgba(var(--accent-color-rgb),0.24));}
.themePreviewSurface span:nth-child(2){background:rgba(255,255,255,0.2);}
.themePreviewSurface span:nth-child(3){background:rgba(255,255,255,0.09);}
.themePreviewCard[data-theme-preview="soft"] .themePreviewSurface{background:#252525;}
.themePreviewCard[data-theme-preview="amoled"] .themePreviewSurface{background:#030303;}
.themePreviewCard[data-theme-preview="glass"] .themePreviewSurface{background:linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));backdrop-filter:blur(3px);}
.themePreviewCard[data-theme-preview="neon"] .themePreviewSurface{background:radial-gradient(circle at 20% 20%, rgba(var(--accent-color-rgb),0.35), transparent 35%), #080d14;}
.themePreviewCard[data-theme-preview="midnight"] .themePreviewSurface{background:#101421;}
.themePreviewLabel,.backgroundPreviewLabel{display:block;color:#d9e0ec;font-size:13px;font-weight:650;text-align:center;}
.themePreviewCard.selected,.themePreviewCard:has(input:checked),.backgroundPreviewCard.selected,.settingsTypographyOption.selected,.settingsTypographyOption:has(input:checked){border-color:var(--accent-color);box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.24), 0 0 20px rgba(var(--accent-color-rgb),0.38);}
.themePreviewCard.selected .themePreviewSurface,.themePreviewCard:has(input:checked) .themePreviewSurface,.backgroundPreviewCard.selected .backgroundPreviewSurface{border-color:var(--accent-color);}
.themePreviewCard.selected::after,.themePreviewCard:has(input:checked)::after,.backgroundPreviewCard.selected::after{content:"✓";position:absolute;right:9px;top:9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-color);color:#fff;font-size:16px;font-weight:900;box-shadow:0 8px 16px rgba(0,0,0,0.28);}
.settingsTypographyGrid{grid-template-columns:repeat(4, minmax(0, 1fr));}
.settingsTypographyOption{gap:6px;min-height:86px;padding:14px;}
.settingsTypographyName{overflow:hidden;color:#f5f8ff;font-size:14px;font-weight:800;text-overflow:ellipsis;white-space:nowrap;}
.settingsTypographySample{color:#bfc9d8;font-family:var(--preview-font) !important;font-size:18px;line-height:1.25;}
.backgroundPreviewCard{position:relative;}
.settingsDanger{margin-top:0;border-color:rgba(255,83,91,0.74);background:linear-gradient(90deg, rgba(120,25,34,0.38), rgba(38,18,26,0.6));}
.settingsDanger h3{color:#ff636d;}
@media (max-width:1100px){
    #settingsContent{grid-template-columns:1fr;}
    .settingsSidebar{position:sticky;top:0;z-index:2;max-height:none;}
    .settingsSidebarInner{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;}
    .settingsMasonry,.settingsGeneralGrid,.settingsThemeGrid,.settingsTypographyGrid,.backgroundPreviewGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
    #settingsTitle{margin-right:92px;}
    #settingsCloseButton,#settingsFullscreenButton{top:6px;width:44px;height:44px;min-width:44px;min-height:44px;}
    #settingsCloseButton{right:6px;}
    #settingsFullscreenButton{right:42px;}
    .settingsSidebarInner{grid-template-columns:1fr;}
    .settingsMasonry,.settingsGeneralGrid,.settingsThemeGrid,.settingsTypographyGrid,.backgroundPreviewGrid{grid-template-columns:1fr;}
}
/* Settings controls. */
.settingsSegmentOption,
.themePreviewCard,
.backgroundPreviewCard,
.settingsTypographyOption{
    background:var(--settings-control-surface-strong);
    box-shadow:none;
}

.settingsSegmentOption:hover,
.settingsSegmentOption:focus-visible,
.themePreviewCard:hover,
.themePreviewCard:focus-within,
.backgroundPreviewCard:hover,
.backgroundPreviewCard:focus-visible,
.settingsTypographyOption:hover,
.settingsTypographyOption:focus-within{
    border-color:rgba(var(--accent-color-rgb),0.48);
    background:var(--settings-control-surface);
    box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.12);
}

.settingsSegmentOption:has(input:checked),
.themePreviewCard.selected,
.themePreviewCard:has(input:checked),
.backgroundPreviewCard.selected,
.settingsTypographyOption.selected,
.settingsTypographyOption:has(input:checked){
    background:rgba(var(--accent-color-rgb),0.16);
    border-color:var(--accent-color);
    box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.22);
}

.settingsMasonry{
    grid-template-columns:minmax(220px, 1.1fr) minmax(104px, 0.48fr) minmax(104px, 0.48fr);
    align-items:stretch;
}

.settingsAppearanceSection .customColorField{
    display:grid;
    grid-template-columns:44px 40px;
    justify-content:start;
    align-items:center;
    gap:12px;
    min-height:44px;
}

.settingsAppearanceSection .customColorField > input[type="text"]{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
}

.settingsAppearanceSection .customColorField .customColorPopover input[type="text"]{
    position:static;
    width:100%;
    height:auto;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,0.11);
    opacity:1;
    pointer-events:auto;
}

.settingsAppearanceSection #customAccentColorMessage,
.settingsAppearanceSection #customBackgroundColorMessage{
    display:none;
}

.settingsLanguagePopover{
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    z-index:45;
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
    max-height:min(386px, calc(100dvh - 160px));
    padding:8px;
    border:1px solid rgba(var(--accent-color-rgb),0.34);
    border-radius:10px;
    overflow:auto;
    border-color:rgba(var(--accent-color-rgb),0.34);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.22)), transparent 46%),
        var(--settings-panel-surface);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.08) inset,
        0 16px 36px rgba(0,0,0,0.34),
        0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.44));
}

.settingsLanguagePicker{
    position:relative;
    display:block;
    width:100%;
}

.settingsLanguagePopover[hidden]{
    display:none;
}

.settingsLanguageOption{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    min-height:42px;
    margin:0;
    padding:9px 12px;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#f5f8ff;
    font-size:16px;
    box-shadow:none;
}

.settingsLanguageOption:hover,
.settingsLanguageOption:focus-visible{
    background:rgba(var(--accent-color-rgb),0.12);
    border-color:rgba(var(--accent-color-rgb),0.34);
}

.settingsLanguageOption.selected{
    background:rgba(var(--accent-color-rgb),0.2);
    border-color:rgba(var(--accent-color-rgb),0.58);
    box-shadow:none;
}

.settingsLanguageGroup .settingsSelectShell{
    width:100%;
    height:42px;
    margin:0;
    padding:0 14px 0 12px;
    border:1px solid var(--settings-border);
    border-radius:8px;
    background:var(--settings-control-surface);
    color:#f5f8ff;
    box-shadow:none;
}

.settingsLanguageGroup .settingsSelectShell:hover,
.settingsLanguageGroup .settingsSelectShell:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.48);
    background:var(--settings-control-surface);
    box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.12);
}

.settingsLanguageGroup .settingsSelectShell::after{
    display:none;
}

.settingsLanguageName{
    flex:1;
    min-width:0;
    text-align:left;
}

.settingsLanguageChevron{
    margin-left:auto;
    color:#dce6f3;
    transform:translateY(-4px);
}

.preview-default{
    background:
        radial-gradient(circle at 28% 24%, rgba(var(--background-detail-color-rgb),0.25), transparent 34%),
        linear-gradient(135deg, #111827, #070b12);
}

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

@media (max-width:640px){
    .settingsMasonry{
        grid-template-columns:1fr;
    }
}
/* Settings responsive layout. */
#settingsContent{grid-template-columns:250px minmax(0, 1fr);}
.settingsSidebar{display:block !important;position:sticky;top:0;}
.settingsSidebarInner{display:flex;flex-direction:column;width:100%;}
.settingsSideItem{width:100%;min-width:0;}
.settingsAppearanceSection .settingsMasonry{grid-template-columns:minmax(360px, 1fr) 148px 148px;align-items:stretch;gap:14px;}
.settingsAppearanceSection .settingsGroup{min-width:0;}
.settingsAppearanceSection .settingsGroup legend,.settingsAppearanceSection .settingsFieldTitle{white-space:nowrap;}
.settingsAccentGroup{max-width:760px;}
.settingsAccentGroup .settingsSwatchRow{align-content:flex-start;gap:11px;max-width:100%;}
.settingsSwatchRow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}
.settingsSwatchOption{
    position:relative;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
}
.settingsSwatchOption span{
    width:34px;
    height:34px;
    border-radius:999px;
}
.settingsSwatchOption.delete-mode::before{
    content:"";
    position:absolute;
    inset:4px;
    z-index:1;
    border-radius:999px;
    background:rgba(255,63,76,0.72);
    opacity:0;
    transition:opacity 0.14s ease;
}
.settingsSwatchOption.delete-mode::after{
    content:"×";
    position:absolute;
    inset:4px;
    z-index:2;
    display:grid;
    place-items:center;
    color:#fff;
    font-family:Arial, sans-serif;
    font-size:25px;
    font-weight:700;
    line-height:1;
    opacity:1;
    transform:translateY(-1px);
    transition:opacity 0.14s ease;
}
.settingsSwatchOption.delete-mode:hover::before,
.settingsSwatchOption.delete-mode:focus-visible::before{
    opacity:1;
}
.settingsSwatchOption:hover,
.settingsSwatchOption:focus-visible{
    background:rgba(var(--accent-color-rgb),0.08);
    box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.18);
}
.settingsAddColorButton,
.settingsDeleteColorButton{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    margin:0;
    padding:0;
    border:1px solid rgba(157,181,209,0.28);
    border-radius:999px;
    background:rgba(23,32,46,0.8);
    color:#c8d3e3;
    box-shadow:none;
}
.settingsAddColorButton{
    font-size:25px;
}
.settingsDeleteColorButton svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.35;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.settingsDeleteColorButton.active,
.settingsDeleteColorButton:hover,
.settingsDeleteColorButton:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.56);
    background:rgba(var(--accent-color-rgb),0.12);
    color:#fff;
}

.settingsDeleteColorButton.active{
    border-color:rgba(255,83,91,0.78);
    background:rgba(120,25,34,0.42);
    color:#ff737c;
}
.settingsSwatchOption.dragging{opacity:.45;}
.settingsSwatchOption.drag-over{outline:2px solid var(--accent-color);outline-offset:4px;}
.settingsAppearanceSection .customColorField{grid-template-columns:40px 34px;gap:10px;}
.settingsAppearanceSection .customColorPickerButton{width:40px;height:40px;}
.settingsAppearanceSection .customColorResetButton{width:34px;min-width:34px;height:34px;min-height:34px;}
@media (max-width:1100px){
    .settingsSidebar{display:block !important;max-height:none;}
    .settingsSidebarInner{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));}
    .settingsSideItem{grid-template-columns:28px minmax(0, 1fr);min-height:72px;padding:12px 10px;}
    .settingsSideItem strong,.settingsSideItem small{overflow:hidden;text-overflow:ellipsis;}
    .settingsAppearanceSection .settingsMasonry{grid-template-columns:minmax(300px, 1fr) minmax(144px, 0.42fr) minmax(144px, 0.42fr);}
}
@media (max-width:760px){
    .settingsSidebarInner{grid-template-columns:repeat(2, minmax(0, 1fr));}
    .settingsAppearanceSection .settingsMasonry{grid-template-columns:1fr;}
    .settingsAccentGroup{max-width:none;}
}
/* Settings responsive sidebar. */
@media (max-width:1100px){
    #settingsContent{grid-template-columns:1fr;}
    .settingsSidebar{width:100%;}
    .settingsSidebarInner{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));}
}
@media (max-width:760px){
    .settingsSidebarInner{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* Desktop settings header. */
@media (min-width:1101px){
    #settingsPanel{
        --settings-sticky-header-space:86px;
    }

    #settingsHeader{
        position:sticky;
        top:-30px;
        z-index:20;
        display:flex;
        align-items:center;
        min-height:var(--settings-sticky-header-space);
        margin:-30px -30px 26px;
        padding:30px 30px 16px;
        border-bottom:1px solid var(--settings-border);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
            var(--settings-panel-surface);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.035) inset,
            0 14px 24px rgba(0,0,0,0.24);
        backdrop-filter:blur(14px);
    }

    body.theme-glass #settingsHeader{
        background:
            linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
            var(--settings-panel-surface);
    }

    body.theme-neon #settingsHeader{
        box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            0 14px 24px rgba(0,0,0,0.28),
            0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.16));
    }

    #settingsHeader #settingsTitle{
        flex:1;
        margin:0 120px 0 20px;
    }

    #settingsHeader #settingsCloseButton,
    #settingsHeader #settingsFullscreenButton{
        top:10px;
    }

    .settingsSidebar{
        top:calc(var(--settings-sticky-header-space) + 8px);
        max-height:calc(100dvh - 150px);
    }
}

.settingsSideItem.selected,
.settingsSegmentOption:has(input:checked),
.themePreviewCard.selected,
.themePreviewCard:has(input:checked),
.backgroundPreviewCard.selected,
.settingsTypographyOption.selected,
.settingsTypographyOption:has(input:checked),
.settingsLanguageOption.selected{
    border-color:var(--accent-color);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.34) inset,
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.95));
}

.settingsSideItem.selected{
    box-shadow:
        4px 0 0 var(--accent-color) inset,
        0 0 0 1px rgba(var(--accent-color-rgb),0.22) inset,
        0 0 28px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.05));
}

.settingsSwatchOption.selected,
.settingsSwatchOption:has(input:checked){
    box-shadow:
        0 0 0 2px var(--accent-color),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.1));
}

.backgroundPreviewCard.selected .backgroundPreviewSurface,
.backgroundPreviewCard:has(input:checked) .backgroundPreviewSurface{
    border-color:var(--accent-color);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.34),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.05));
}

.settingsSegmentOption:has(input:checked)::before{
    border-color:var(--accent-color);
    background:var(--accent-color);
    box-shadow:0 0 14px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 1.2));
}

/* Statistics desktop polish, matched to the Settings surface tokens. */
.statsAverageSummaryButton{
    width:100%;
    margin:0;
    text-align:left;
    appearance:none;
}

.statsAveragePanel{
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:hidden;
}

.statsAveragePanel .statsSectionHeader,
.statsAveragePanel .statsAverageHero{
    flex:none;
}

.statsAverageModeGrid{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
    overflow-y:auto;
    padding-right:4px;
}

.statsAverageHero,
.statsAverageModeCard{
    box-sizing:border-box;
    border:1px solid var(--settings-border);
    border-radius:9px;
    background:var(--settings-control-surface);
}

.statsAverageHero{
    display:grid;
    gap:6px;
    padding:16px 18px;
}

.statsAverageHero span,
.statsAverageModeCard small{
    color:var(--settings-muted);
    font-size:13px;
    line-height:1.25;
}

.statsAverageHero strong{
    color:#fff;
    font-size:34px;
    line-height:1;
    font-weight:900;
}

.statsAverageHero small{
    color:var(--accent-color);
    font-size:13px;
    font-weight:800;
}

.statsAverageModeCard{
    display:grid;
    gap:8px;
    min-width:0;
    padding:12px;
}

.statsAverageModeIdentity{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.statsAverageModeIdentity h4{
    margin:0;
    min-width:0;
    color:#fff;
    font-size:14px;
    line-height:1.2;
    font-weight:850;
    overflow-wrap:anywhere;
}

.statsAverageModeIcon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    overflow:hidden;
    border-radius:8px;
    background:rgba(var(--accent-color-rgb),0.1);
}

.statsAverageModeIcon .codedIcon,
.statsAverageModeIcon .assetGameIcon{
    width:36px;
    height:36px;
    min-height:36px;
    box-shadow:none;
}

.statsAverageModeIcon .codedIconText span{
    font-size:13px;
}

.statsAverageModeIcon .codedPatternLabel,
.statsAverageModeIcon .codedIconCell{
    font-size:8px;
}

.statsAverageModeCard strong{
    color:var(--accent-color);
    font-size:24px;
    line-height:1;
    font-weight:900;
}

@media (min-width:901px){
    #statsOverlay{
        padding:24px;
        background:
            radial-gradient(circle at 50% -12%, rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.36)), transparent 36%),
            var(--settings-overlay-scrim);
    }

    #statsPanel{
        --stats-sticky-header-space:132px;
        width:min(1240px, calc(100vw - 48px));
        min-height:min(730px, calc(100dvh - 48px));
        max-height:calc(100dvh - 48px);
        padding:30px;
        border-radius:14px;
        border-color:var(--settings-border-strong);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
            var(--settings-panel-surface);
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.045) inset,
            0 0 32px var(--settings-panel-glow),
            0 28px 86px rgba(0,0,0,0.54);
    }

    #statsOverlay.fullscreen #statsPanel{
        min-height:0;
    }

    #statsOverlay.fullscreen #statsCards{
        min-height:calc(100% - var(--stats-sticky-header-space) - 26px);
    }

    #statsOverlay.fullscreen .statsTabPanel{
        flex:1;
        min-height:0;
    }

    #statsOverlay.fullscreen .statsOverviewGrid{
        flex:1;
        align-items:stretch;
    }

    #statsOverlay.fullscreen .statsOverviewContent{
        flex:1;
    }

    #statsOverlay.fullscreen .statsRecentSection,
    #statsOverlay.fullscreen .statsDailySection{
        height:clamp(420px, calc(100dvh - 430px), 520px);
    }

    #statsOverlay.fullscreen .statsTipBar{
        min-height:64px;
    }

    #statsHeader{
        position:sticky;
        top:-30px;
        z-index:20;
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        align-items:center;
        min-height:var(--stats-sticky-header-space);
        margin:-30px -30px 26px;
        padding:30px 30px 16px;
        box-sizing:border-box;
        border-bottom:1px solid var(--settings-border);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
            var(--settings-panel-surface);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.035) inset,
            0 14px 24px rgba(0,0,0,0.24);
        backdrop-filter:blur(14px);
    }

    body.theme-glass #statsHeader{
        background:
            linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
            var(--settings-panel-surface);
    }

    body.theme-neon #statsHeader{
        box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            0 14px 24px rgba(0,0,0,0.28),
            0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.16));
    }

    #statsTitle{
        margin:0 120px 16px 0;
        padding:0;
        width:auto;
        min-height:34px;
        color:#f6f8fc;
        text-align:left;
        font-size:34px !important;
        font-weight:800;
    }

    #statsCloseButton,
    #statsFullscreenButton{
        top:0px;
        width:46px;
        height:46px;
        min-width:46px;
        min-height:46px;
        border:0;
        border-radius:0;
        background:transparent;
        color:rgba(236,244,255,0.88);
        line-height:1;
        box-shadow:none;
        text-shadow:none;
        filter:none;
    }

    #statsCloseButton{
        right:4px;
        font-size:32px;
    }

    #statsFullscreenButton{
        right:44px;
        font-size:25px;
    }

    #statsCards{
        gap:16px;
    }

    .statsTabs{
        width:min(540px, 100%);
        margin:0 auto;
        padding:0;
        border-color:var(--settings-border-strong);
        border-radius:10px;
        background:var(--settings-control-surface);
        box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.1) inset;
    }

    .statsTab{
        min-height:48px;
        border:0;
        border-radius:0;
        background:transparent;
        color:#e7ecf5;
        box-shadow:none;
    }

    .statsTab:hover,
    .statsTab:focus-visible{
        background:rgba(var(--accent-color-rgb),0.06);
        box-shadow:none;
    }

    .statsTab.selected{
        background:rgba(var(--accent-color-rgb),0.08);
        box-shadow:inset 0 -2px 0 var(--accent-color);
    }

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

    .statsSummaryCard{
        min-height:146px;
        padding:18px 20px;
        border-color:var(--settings-border);
        border-radius:9px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.025), transparent 45%),
            var(--settings-control-surface-strong);
        box-shadow:none;
    }

    .statsSummaryCard[data-stats-action]:hover,
    .statsSummaryCard[data-stats-action]:focus-visible{
        border-color:rgba(var(--accent-color-rgb),0.48);
        background:var(--settings-control-surface);
        box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.12);
    }

    .statsAverageSummaryButton{
        color:inherit;
        cursor:pointer;
    }

    .statsAverageSummaryButton[aria-expanded="true"]{
        border-color:var(--accent-color);
        background:rgba(var(--accent-color-rgb),0.16);
        box-shadow:0 0 0 1px rgba(var(--accent-color-rgb),0.22);
    }

    .statsGameSection{
        border-color:var(--settings-border);
        border-radius:12px;
        background:
            linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%),
            var(--settings-section-surface);
        box-shadow:none;
    }

    .statsGameCard{
        grid-template-columns:minmax(210px, 1.15fr) repeat(5, minmax(98px, 0.56fr));
        border-color:var(--settings-border);
        border-radius:9px;
        background:
            linear-gradient(90deg, rgba(var(--accent-color-rgb),0.08), transparent 32%),
            var(--settings-control-surface-strong);
        box-shadow:none;
    }

    .statsGameStat{
        border-color:var(--settings-border);
        border-radius:8px;
        background:var(--settings-control-surface);
    }

    .statsRecentSection{
        min-height:242px;
    }

    .statsRecentSection .statsEmptyState{
        min-height:138px;
    }

    .statsAverageModeGrid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    .statsAverageHero,
    .statsAverageModeCard{
        background:var(--settings-control-surface);
    }
}

/* Statistics dashboard. */
#statsHeader{
    position:relative;
}

.statsHeaderIntro{
    display:flex;
    align-items:center;
    gap:22px;
    min-width:0;
}

.statsHeaderIcon{
    display:grid;
    place-items:center;
    flex:none;
    width:82px;
    height:82px;
    border:1px solid rgba(var(--accent-color-rgb),0.58);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.24), rgba(var(--accent-color-rgb),0.08)),
        var(--settings-control-surface);
    color:var(--accent-color);
    box-shadow:0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.48));
}

.statsHeaderIcon svg,
.statsHeaderIcon .assetIcon{
    width:46px;
    height:46px;
}

.statsHeaderCopy{
    min-width:0;
}

#statsSubtitle{
    margin:6px 0 0;
    color:var(--settings-muted);
    font-size:18px;
    line-height:1.25;
}

#statsTabsMount{
    min-width:0;
}

.statsPanelCard{
    box-sizing:border-box;
    border:1px solid var(--settings-border);
    border-radius:14px;
    background:
        linear-gradient(135deg, rgba(var(--accent-color-rgb),0.08), transparent 44%),
        linear-gradient(180deg, rgba(255,255,255,0.028), transparent 46%),
        var(--settings-section-surface);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.035) inset,
        0 18px 42px rgba(0,0,0,0.18);
}

.statsOverviewGrid{
    display:grid;
    grid-template-columns:minmax(0, 1.18fr) minmax(0, 0.98fr);
    flex:1;
    min-height:0;
    gap:20px;
    align-items:stretch;
}

.statsOverviewContent{
    display:flex;
    flex:1;
    min-height:0;
}

.statsOverviewContent > .statsOverviewGrid,
.statsOverviewContent > .statsAveragePanel{
    flex:1;
    min-height:0;
    width:100%;
}

.statsSectionHeader{
    justify-content:flex-start;
}

.statsRecentSection .statsSectionHeader{
    justify-content:space-between;
}

.statsSectionTitle{
    display:flex;
    align-items:center;
    min-width:0;
    gap:14px;
}

.statsSectionIcon{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    color:var(--accent-color);
}

.statsSectionIcon svg,
.statsSectionIcon .assetIcon,
.statsSummaryIcon svg,
.statsSummaryIcon .assetIcon,
.statsSummaryWatermark svg,
.statsSummaryWatermark .assetIcon,
.statsTipBar svg,
.statsTipBar .assetIcon,
.statsPlayNowButton svg,
.statsPlayNowButton .assetIcon,
.statsEmptyIcon svg,
.statsEmptyIcon .assetIcon,
.statsTabIcon svg,
.statsTabIcon .assetIcon{
    width:100%;
    height:100%;
}

.statsHeaderIcon .assetIcon,
.statsSectionIcon .assetIcon,
.statsSummaryIcon .assetIcon,
.statsTabIcon .assetIcon,
.statsEmptyIcon .assetIcon,
.statsPlayNowButton .assetIcon,
.statsTipBar .assetIcon{
    scale:1.12;
}

.statsRecentSection,
.statsDailySection{
    height:438px;
    min-height:0;
    padding:22px;
}

.statsRecentSection{
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.statsRecentSessionList{
    flex:1;
    min-height:0;
    margin-top:14px;
    padding:0 8px 10px 0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--accent-color) transparent;
}

.statsGameSectionFull{
    min-height:0;
}

.statsGameSectionFull .statsGameListFull{
    min-height:0;
    overflow-y:auto;
}



.statsRecentSessionList::-webkit-scrollbar{
    width:8px;
}

.statsRecentSessionList::-webkit-scrollbar-track{
    background:transparent;
}

.statsRecentSessionList::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:var(--accent-color);
}

.statsRecentSessionCard{
    flex:0 0 auto;
    position:relative;
    border:1px solid rgba(255,255,255,0.11);
    border-radius:12px;
    padding:10px 12px 9px;
    background:
        linear-gradient(135deg, rgba(var(--accent-color-rgb),0.13), transparent 46%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 48%),
        rgba(255,255,255,0.02);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 12px 24px rgba(0,0,0,0.17);
    overflow:hidden;
}

.statsRecentSessionCard.is-new-record{
    border-color:rgba(var(--accent-color-rgb),0.52);
    background:
        linear-gradient(135deg, rgba(var(--accent-color-rgb),0.24), rgba(var(--accent-color-rgb),0.08) 32%, transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.075), transparent 48%),
        rgba(var(--accent-color-rgb),0.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.12),
        inset 0 0 calc(18px + 18px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.08 + var(--glow-intensity) * 0.16)),
        0 0 0 1px rgba(var(--accent-color-rgb),0.22),
        0 0 calc(12px + 20px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.12 + var(--glow-intensity) * 0.32)),
        0 12px 24px rgba(0,0,0,0.2);
}

.statsRecentSessionCard.is-new-record::before,
.statsRecentSessionCard.is-new-record::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:1;
}

.statsRecentSessionCard.is-new-record::before{
    border:1px solid rgba(var(--accent-color-rgb),0.18);
    box-shadow:
        inset 0 0 calc(8px + 10px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.08 + var(--glow-intensity) * 0.18)),
        0 0 calc(8px + 14px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.08 + var(--glow-intensity) * 0.2));
}

.statsRecentSessionCard.is-new-record::after{
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.1), transparent 34%, rgba(var(--accent-color-rgb),0.07)),
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.08), transparent 24%, transparent 76%, rgba(var(--accent-color-rgb),0.08));
}

.statsRecentSessionTop{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.statsRecentSessionIdentity{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.statsRecentSessionIcon{
    width:46px;
    height:46px;
    flex:none;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(var(--accent-color-rgb),0.28), transparent 58%),
        rgba(var(--accent-color-rgb),0.09);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 10px 18px rgba(0,0,0,0.2);
}

.statsRecentSessionIcon .codedIcon,
.statsRecentSessionIcon .assetGameIcon{
    width:40px;
    height:40px;
    min-height:40px;
    box-shadow:none;
}

.statsRecentSessionText{
    min-width:0;
}

.statsRecentSessionText h4{
    margin:0;
    color:#fbfdff;
    font-size:16px;
    line-height:1.12;
    font-weight:850;
}

.statsRecentSessionText p{
    margin:3px 0 0;
    color:var(--settings-muted);
    font-size:12px;
    line-height:1.2;
}

.statsRecentSessionResult{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    flex:none;
    min-width:188px;
    text-align:right;
}

.statsRecentSessionScore{
    min-width:78px;
}

.statsRecentSessionScore small{
    display:block;
    color:rgba(255,255,255,0.7);
    font-size:10px;
    line-height:1.1;
    text-transform:uppercase;
    letter-spacing:0.9px;
}

.statsRecentSessionPhase{
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,0.5);
    font-size:10px;
    line-height:1.1;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.statsRecentSessionScore strong{
    display:block;
    margin-top:2px;
    color:var(--accent-color);
    font-size:30px;
    line-height:0.95;
    font-weight:900;
}

.statsRecentSessionPlayed{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:100px;
    padding-left:12px;
    border-left:1px solid rgba(255,255,255,0.11);
    color:rgba(255,255,255,0.68);
}

.statsRecentSessionPlayed span{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:none;
    color:var(--accent-color);
}

.statsRecentSessionPlayed svg{
    width:100%;
    height:100%;
}

.statsRecentSessionPlayed .assetIcon{
    width:100%;
    height:100%;
}

.statsRecentSessionPlayed b{
    color:rgba(255,255,255,0.72);
    font-size:13px;
    line-height:1;
    font-weight:750;
    white-space:nowrap;
}

.statsRecentRecordOverlay{
    position:absolute;
    inset:50% auto auto 50%;
    transform:translate(-50%, -50%);
    z-index:2;
    pointer-events:none;
    padding:5px 13px;
    border:1px solid rgba(var(--accent-color-rgb),0.54);
    border-radius:999px;
    background:rgba(9, 15, 24, 0.74);
    color:#f7fbff;
    font-size:11px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.85px;
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.14),
        0 0 calc(8px + 14px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.1 + var(--glow-intensity) * 0.24));
    text-shadow:0 0 calc(5px + 8px * var(--glow-intensity)) rgba(var(--accent-color-rgb),calc(0.16 + var(--glow-intensity) * 0.18));
}

.statsRecentSessionBottom{
    margin-top:7px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--settings-muted);
    font-size:12px;
    line-height:1.2;
}

.statsRecentSessionBottom strong{
    color:#e8eef9;
}

.statsRecentSessionProgress{
    display:block;
    width:100%;
    height:6px;
    margin-top:7px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
}

.statsRecentSessionProgress b{
    display:block;
    width:var(--stats-session-progress);
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, rgba(var(--accent-color-rgb),0.56), var(--accent-color));
    box-shadow:0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.55));
}

.statsRecentEmptyState{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:324px;
    margin-top:20px;
    padding:30px;
    border:1px dashed rgba(156,181,208,0.2);
    border-radius:12px;
    color:#eef4ff;
    text-align:center;
    box-sizing:border-box;
}

.statsEmptyIcon{
    display:grid;
    place-items:center;
    width:86px;
    height:86px;
    margin-bottom:22px;
    border:1px solid var(--settings-border);
    border-radius:50%;
    background:rgba(255,255,255,0.045);
    color:#bfc9d8;
}

.statsEmptyIcon svg{
    width:58px;
    height:58px;
}

.statsEmptyIcon .assetIcon{
    width:58px;
    height:58px;
}

.statsRecentEmptyState strong,
.statsDailyEmptyState strong{
    color:#f5f8ff;
    font-size:20px;
    line-height:1.25;
}

.statsRecentEmptyState p,
.statsDailyEmptyState p{
    margin:8px 0 0;
    color:var(--settings-muted);
    font-size:16px;
    line-height:1.35;
}

.statsPlayNowButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:188px;
    min-height:48px;
    margin:28px 0 0;
    padding:0 24px;
    border:1px solid rgba(var(--accent-color-rgb),0.72);
    border-radius:8px;
    background:var(--accent-color);
    color:#fff;
    font-size:16px;
    font-weight:800;
    box-shadow:0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.7));
}

.statsPlayNowButton span{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
}

.statsDailyChart{
    position:relative;
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    gap:14px;
    min-height:294px;
    margin-top:28px;
}

.statsChartYAxis{
    display:grid;
    grid-template-rows:repeat(5, 1fr);
    align-items:center;
    color:var(--settings-muted);
    font-size:16px;
    line-height:1;
    text-align:right;
}

.statsChartPlot{
    position:relative;
    min-width:0;
    min-height:294px;
    padding-bottom:34px;
}

.statsChartGridLines{
    position:absolute;
    inset:0 0 34px;
    background:
        repeating-linear-gradient(to bottom, rgba(156,181,208,0.17) 0 1px, transparent 1px 25%),
        repeating-linear-gradient(to right, rgba(156,181,208,0.15) 0 1px, transparent 1px 16.66%);
    opacity:0.86;
    mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.statsChartBars{
    position:absolute;
    inset:0 0 0;
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.statsChartDay{
    display:grid;
    grid-template-rows:minmax(0, 1fr) 24px;
    align-items:end;
    justify-items:center;
    min-width:0;
    height:100%;
}

.statsChartBar{
    display:block;
    width:28px;
    min-height:0;
    border-radius:999px 999px 4px 4px;
    background:linear-gradient(180deg, var(--accent-color), rgba(var(--accent-color-rgb),0.38));
    box-shadow:0 0 16px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.52));
}

.statsDailyChart:not(.hasData) .statsChartBar{
    display:none;
}

.statsChartDay small{
    align-self:end;
    color:var(--settings-muted);
    font-size:16px;
    line-height:1;
}

.statsDailyEmptyState{
    position:absolute;
    inset:34px 20px 58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    pointer-events:none;
}

.statsDailyEmptyState .statsEmptyIcon{
    width:84px;
    height:84px;
    margin-bottom:18px;
}

.statsTipBar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:54px;
    padding:0 18px;
    border-radius:8px;
    background:
        linear-gradient(90deg, transparent, rgba(var(--accent-color-rgb),0.08), transparent),
        var(--settings-section-surface);
    color:var(--settings-muted);
    box-sizing:border-box;
}

.statsTipBar span{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    color:var(--accent-color);
}

.statsTipBar p{
    margin:0;
    font-size:16px;
    line-height:1.3;
}

.statsTipBar strong{
    color:var(--accent-color);
}

.statsGameMetrics{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:10px;
}

.statsGameIdentity p{
    margin:5px 0 0;
    color:var(--settings-muted);
    font-size:13px;
    line-height:1.3;
}

@media (min-width:901px){
    #statsPanel{
        --stats-sticky-header-space:146px;
        width:min(1480px, calc(100vw - 48px));
        min-height:min(860px, calc(100dvh - 48px));
        padding:30px 36px 24px;
    }

    #statsHeader{
        position:sticky;
        top:-30px;
        z-index:30;
        display:grid;
        grid-template-columns:minmax(300px, 1fr) minmax(360px, 444px) minmax(130px, 1fr);
        align-items:center;
        gap:24px;
        min-height:var(--stats-sticky-header-space);
        margin:-30px -36px 28px;
        padding:30px 36px 22px;
        border-bottom:1px solid var(--settings-border);
        background:
            linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
            var(--settings-panel-surface);
        box-shadow:
            0 1px 0 rgba(255,255,255,0.035) inset,
            0 14px 24px rgba(0,0,0,0.24);
        backdrop-filter:blur(14px);
    }

    body.theme-glass #statsHeader{
        background:
            linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
            var(--settings-panel-surface);
    }

    body.theme-neon #statsHeader{
        box-shadow:
            0 1px 0 rgba(255,255,255,0.04) inset,
            0 14px 24px rgba(0,0,0,0.28),
            0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.16));
    }

    #statsTitle{
        margin:0;
        padding:0;
        min-height:0;
        color:#f6f8fc;
        font-size:38px !important;
        line-height:1.05;
        text-align:left;
    }

    #statsTabsMount{
        grid-column:2;
    }

    #statsCloseButton,
    #statsFullscreenButton{
        top:0px;
    }

    #statsCloseButton{
        right:2px;
    }

    #statsFullscreenButton{
        right:42px;
    }

    .statsTabs{
        width:100%;
        min-height:56px;
        margin:0;
        padding:0;
        border-radius:11px;
    }

    .statsTab{
        min-height:48px;
        gap:12px;
        font-size:16px;
    }

    .statsTabIcon{
        display:grid;
        place-items:center;
        width:26px;
        height:26px;
        font-size:0;
    }

    .statsTab[data-stats-tab="allGames"] .statsTabIcon .assetIcon{
        scale:1.28;
    }

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

    .statsSummaryCard{
        position:relative;
        height:204px;
        min-height:0;
        overflow:hidden;
        padding:24px;
        border-radius:14px;
        text-align:left;
    }

    .statsSummaryLabel{
        display:grid;
        grid-template-columns:56px minmax(0, 1fr);
        gap:16px;
        align-items:center;
        font-size:16px;
    }

    .statsSummaryIcon{
        width:52px;
        height:52px;
        border-radius:50%;
        background:var(--accent-color);
        color:#fff;
    }

    .statsSummaryIcon svg,
    .statsSummaryIcon .assetIcon{
        width:30px;
        height:30px;
    }

    .statsSummaryIcon .assetIcon{
        scale:1.16;
    }

    .statsSummaryCard strong{
        display:block;
        margin-top:22px;
        font-size:40px;
        line-height:1;
    }

    .statsSummaryCard small{
        display:block;
        margin-top:10px;
        color:#d7e2f2;
        font-size:16px;
        font-weight:500;
    }

    .statsSummaryWatermark{
        position:absolute;
        right:22px;
        bottom:26px;
        width:86px;
        height:86px;
        color:rgba(255,255,255,0.055);
        pointer-events:none;
    }

    .statsSummaryWatermark svg,
    .statsSummaryWatermark .assetIcon{
        width:100%;
        height:100%;
    }

    #statsCards,
    .statsTabPanel{
        gap:22px;
    }

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

    .statsGameListCompact{
        gap:14px;
        margin-top:18px;
    }

    .statsGameCard{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        min-height:0;
        padding:18px;
        border-radius:12px;
    }

    .statsGameIdentity{
        gap:14px;
    }

    .statsGameIcon{
        width:54px;
        height:54px;
        border-radius:12px;
    }

    .statsGameIdentity h4{
        font-size:17px;
    }

    .statsGameStat{
        min-height:80px;
        padding:12px;
        border-left:1px solid var(--settings-border);
    }
}

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

    .statsGameMetrics{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .statsRecentSessionTop{
        align-items:flex-start;
    }

    .statsRecentSessionIcon{
        width:42px;
        height:42px;
        border-radius:11px;
    }

    .statsRecentSessionIcon .codedIcon,
    .statsRecentSessionIcon .assetGameIcon{
        width:34px;
        height:34px;
        min-height:34px;
    }

    .statsRecentSessionText h4{
        font-size:18px;
    }

    .statsRecentSessionText p{
        font-size:13px;
    }

    .statsRecentSessionResult{
        min-width:174px;
        gap:10px;
    }

    .statsRecentSessionScore strong{
        font-size:28px;
    }

    .statsRecentSessionPlayed{
        min-width:88px;
        padding-left:10px;
    }

    .statsRecentSessionPlayed b{
        font-size:12px;
    }

    .statsRecentSessionBottom{
        font-size:12px;
    }
}

@media (max-width:900px){
    #statsHeader{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:14px;
        margin-bottom:16px;
    }

    .statsHeaderIntro{
        padding-right:92px;
    }

    .statsHeaderIcon{
        width:50px;
        height:50px;
        border-radius:12px;
    }

    #statsSubtitle{
        font-size:14px;
    }

    .statsOverviewGrid,
    .statsGameListFull{
        grid-template-columns:1fr;
    }

    .statsRecentSection,
    .statsDailySection{
        min-height:0;
        padding:14px;
    }

    .statsRecentEmptyState{
        min-height:240px;
        padding:22px 14px;
    }

    .statsGameMetrics{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* Daily streak modal. */
#streakPanel{
    width:min(860px, calc(100vw - 48px));
    min-height:min(660px, calc(100dvh - 52px));
    max-height:min(760px, calc(100dvh - 52px));
    padding:30px 76px 38px;
    border-radius:22px;
    border:1px solid var(--settings-border-strong);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 22%),
        var(--settings-panel-surface);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.045) inset,
        0 0 32px var(--settings-panel-glow),
        0 28px 86px rgba(0,0,0,0.54);
    overflow:auto;
}

#streakTitle{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    min-height:46px;
    margin:0 92px 24px;
    padding:0;
    color:#f7f9ff;
    font-size:38px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:0;
    text-align:center;
    text-shadow:0 2px 18px rgba(0,0,0,0.34);
    overflow-wrap:normal;
}

#streakTitle::before{
    content:none;
}

#streakCloseButton,
#streakFullscreenButton{
    display:grid;
    place-items:center;
    top:4px;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(236,244,255,0.88);
    line-height:1;
    box-shadow:none;
    text-shadow:none;
    filter:none;
}

#streakFullscreenButton{
    right:40px;
    font-size:26px;
}

#streakCloseButton{
    right:5px;
    font-size:34px;
    font-weight:400;
}

#streakContent{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
}

.streakHeroRing{
    position:relative;
    display:grid;
    place-items:center;
    width:260px;
    height:260px;
    margin:4px auto 22px;
    border-radius:50%;
    isolation:isolate;
}

.streakHeroRing::before{
    content:"";
    position:absolute;
    inset:0;
    border:5px solid rgba(var(--accent-color-rgb),0.96);
    border-radius:50%;
    box-shadow:
        0 0 34px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.9)),
        0 0 76px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.48));
}

.streakHeroRing::after{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,0.045), transparent 34%),
        rgba(8,16,28,0.28);
    box-shadow:0 0 34px rgba(0,0,0,0.22) inset;
}

.streakHeroRing.isInactive::before{
    border-color:rgba(255,255,255,0.18);
    box-shadow:
        0 0 16px rgba(255,255,255,0.05),
        0 0 36px rgba(0,0,0,0.18);
}

.streakHeroRing.isInactive::after{
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,0.02), transparent 34%),
        rgba(8,16,28,0.2);
}

.streakHeroRingInner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.streakHeroRingInner strong{
    display:block;
    color:#fff;
    font-size:82px;
    font-weight:900;
    line-height:0.9;
    text-shadow:0 3px 20px rgba(0,0,0,0.38);
}

.streakHeroRingInner span{
    display:block;
    margin-top:18px;
    color:var(--settings-muted);
    font-size:28px;
    font-weight:600;
    line-height:1;
}

.streakDetailRows{
    width:min(675px, 100%);
    border-top:1px solid rgba(255,255,255,0.1);
}

.streakDetailRow{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:22px;
    min-height:68px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    color:var(--settings-muted);
    font-size:23px;
    line-height:1.2;
}

.streakDetailRow span,
.streakDetailRow strong{
    min-width:0;
}

.streakDetailRow strong{
    color:#f8f9ff;
    font-size:23px;
    font-weight:800;
    text-align:right;
}

.streakInfoBox{
    display:grid;
    grid-template-columns:58px minmax(0, 1fr);
    align-items:center;
    gap:22px;
    width:min(675px, 100%);
    min-height:96px;
    margin-top:14px;
    padding:18px 30px;
    border:1px solid rgba(var(--accent-color-rgb),0.74);
    border-radius:10px;
    background:rgba(var(--accent-color-rgb),0.06);
    box-shadow:
        0 0 20px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.24)),
        0 1px 0 rgba(255,255,255,0.04) inset;
    box-sizing:border-box;
}

.streakInfoIcon{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:3px solid var(--accent-color);
    border-radius:50%;
    color:var(--accent-color);
    font-size:25px;
    font-weight:900;
    font-family:Arial, sans-serif;
    line-height:1;
    box-shadow:0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.45));
}

.streakInfoBox p{
    margin:0;
    color:#e9edf7;
    font-size:23px;
    font-weight:500;
    line-height:1.45;
}

#streakOverlay.fullscreen #streakPanel{
    width:100%;
    min-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

#streakOverlay.fullscreen #streakContent{
    min-height:calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    justify-content:center;
}

@media (max-width:900px){
    #streakPanel{
        width:min(430px, calc(100vw - 28px));
        min-height:0;
        max-height:min(78dvh, 680px);
        padding:20px 14px 18px;
        border-radius:14px;
    }

    #streakTitle{
        justify-content:flex-start;
        gap:10px;
        width:calc(100% - 112px);
        min-height:40px;
        margin:0 0 18px;
        font-size:clamp(28px, 5vw, 36px) !important;
        line-height:1.05;
        text-align:left;
    }

    #streakTitle::before{
        content:none;
    }

    #streakCloseButton,
    #streakFullscreenButton{
        top:8px;
        width:48px;
        height:48px;
        min-width:48px;
        min-height:48px;
        border-radius:10px;
        box-shadow:none;
    }

    #streakFullscreenButton{
        right:38px;
        font-size:22px;
    }

    #streakCloseButton{
        right:-8px;
        font-size:34px;
    }

    .streakHeroRing{
        width:220px;
        height:220px;
        margin:4px auto 20px;
    }

    .streakHeroRingInner strong{
        font-size:70px;
    }

    .streakHeroRingInner span{
        margin-top:14px;
        font-size:24px;
    }

    .streakDetailRow{
        min-height:58px;
        gap:14px;
        font-size:18px;
    }

    .streakDetailRow strong{
        font-size:18px;
    }

    .streakInfoBox{
        grid-template-columns:42px minmax(0, 1fr);
        gap:14px;
        min-height:0;
        padding:14px;
    }

    .streakInfoIcon{
        width:34px;
        height:34px;
        border-width:2px;
        font-size:20px;
    }

    .streakInfoBox p{
        font-size:17px;
    }
}

/* Main lobby layout refresh. */
.lobbyHeader{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:17;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    height:112px;
    padding:12px 280px 10px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
        rgba(11,14,20,0.9);
    box-sizing:border-box;
    backdrop-filter:blur(18px);
}

body.gameplay-active #lobbyHeader{
    display:none !important;
}

.lobbyHeader #title{
    position:static !important;
    width:auto;
    max-width:100%;
    margin:0;
    color:#f7f8fb;
    font-size:42px;
    font-weight:800;
    line-height:1;
    letter-spacing:0;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transform:none !important;
}

#lobbySubtitle{
    max-width:100%;
    margin:14px 0 0;
    color:rgba(232,238,247,0.68);
    font-size:18px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:0;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hubEmojiGlyph{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    font-size:22px;
    line-height:1;
    filter:saturate(0.88) brightness(1.05);
}

#leaderboardButton.leaderboardButtonInactive,
#leaderboardButton:disabled{
    opacity:0.72;
    filter:none;
}

#mainMenu{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;
    width:min(calc(100vw - 56px), 1252px);
    max-width:1252px;
    margin:150px auto 0;
}

.modeCard{
    position:relative;
    height:auto;
    min-height:0;
    aspect-ratio:1.06 / 1;
    padding-top:0;
    border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;
    background:rgba(17,22,28,0.96);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 18px 38px rgba(0,0,0,0.2);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.modeCard:hover,
.modeCard:focus-visible{
    transform:translateY(-2px);
    border-color:rgba(var(--accent-color-rgb),0.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.55)),
        0 22px 42px rgba(0,0,0,0.26);
}

.cardIcon{
    min-height:0;
    padding:24px 26px 18px;
}

.cardBottom{
    min-height:62px;
    justify-content:flex-start;
    padding:0 24px;
    background:var(--accent-color);
    box-sizing:border-box;
}

.cardBottom::after{
    content:none;
}

.cardBottom h2{
    min-width:0;
    padding:0;
    font-size:19px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:0;
    text-align:left;
}

.codedIcon{
    width:min(70%, 154px);
}

#advancedCard .codedIconAdvanced,
#sequenceAdvancedCard .codedIconGridLogo,
#chimpAdvancedCard .codedIconGridLogo{
    width:min(78%, 172px);
}

#numberCard .codedIconText,
#verbalCard .codedIconText{
    width:min(70%, 168px);
}

@media (max-width:1100px) and (orientation:portrait){
    .lobbyHeader{
        height:118px;
        padding:16px 156px 12px;
    }

    .lobbyHeader #title{
        font-size:34px !important;
    }

    #lobbySubtitle{
        margin-top:10px;
        font-size:15px;
    }

    #mainMenu{
        width:min(100%, 760px);
        max-width:760px;
        margin:142px auto 0;
        gap:16px;
    }

    .modeCard{
        aspect-ratio:1.08 / 1;
        border-radius:10px;
    }

    .cardIcon{
        padding:18px 18px 12px;
    }
}

@media (max-width:980px) and (orientation:portrait){
    #streakButton{
        right:auto;
        left:calc(
            clamp(12px, 2.4vw, 22px) +
            clamp(50px, 5.4vw, 58px) +
            12px
        );
    }
}

@media (max-width:640px) and (orientation:portrait){
    .lobbyHeader{
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        z-index:19;
        height:auto;
        min-height:94px;
        width:100%;
        padding:0 4px 14px;
        border-bottom:0;
        background:transparent;
        backdrop-filter:none;
    }

    .lobbyHeader #title{
        max-width:100%;
        font-size:32px !important;
        line-height:1;
        text-overflow:ellipsis;
    }

    #lobbySubtitle{
        margin-top:9px;
        font-size:14px;
        white-space:normal;
    }

    #mainMenu{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        grid-template-rows:repeat(4, minmax(0, 1fr));
        width:100%;
        max-width:560px;
        height:calc(100dvh - 318px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin:0 auto;
        gap:12px;
        padding:0;
        box-sizing:border-box;
    }

    .modeCard{
        height:100%;
        aspect-ratio:auto;
        border-radius:10px;
    }

    .cardIcon{
        padding:8px 10px 8px;
    }

    .cardBottom{
        min-height:48px;
        padding:0 12px;
    }

    .cardBottom h2{
        font-size:clamp(13px, 3.8vw, 16px) !important;
        line-height:1.08;
    }

    .codedIcon,
    #advancedCard .codedIconAdvanced,
    #sequenceAdvancedCard .codedIconGridLogo,
    #chimpAdvancedCard .codedIconGridLogo,
    #numberCard .codedIconText,
    #verbalCard .codedIconText{
        width:min(76%, 104px, 21dvh);
    }

    .codedIconCell{
        border-radius:4px;
    }
}

@media (max-width:360px) and (orientation:portrait){
    .lobbyHeader{
        min-height:86px;
        padding-bottom:10px;
    }

    .lobbyHeader #title{
        font-size:28px !important;
    }

    #lobbySubtitle{
        font-size:12px;
    }

    #mainMenu{
        height:calc(100dvh - 298px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin-top:0;
        gap:10px;
    }
}

/* Leaderboard dashboard refresh */
#leaderboardOverlay{
    padding:24px;
    background:
        radial-gradient(circle at 50% -12%, rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.36)), transparent 36%),
        var(--settings-overlay-scrim);
}

#leaderboardPanel{
    --lb-panel-surface:var(--settings-panel-surface);
    --lb-section-surface:var(--settings-section-surface);
    --lb-control-surface:var(--settings-control-surface);
    --lb-control-surface-strong:var(--settings-control-surface-strong);
    --lb-border:var(--settings-border);
    --lb-border-strong:var(--settings-border-strong);
    --lb-muted:var(--settings-muted);
    --lb-text:#eef4ff;
    --lb-text-strong:#f7fbff;
    width:min(1740px, calc(100vw - 28px));
    max-width:min(1740px, calc(100vw - 28px));
    height:calc(100dvh - 48px);
    max-height:calc(100dvh - 48px);
    padding:24px 28px 20px;
    border-radius:18px;
    border:1px solid var(--lb-border-strong);
    background:
        radial-gradient(circle at 50% -10%, rgba(var(--accent-color-rgb),0.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 26%),
        var(--lb-panel-surface);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        0 0 32px var(--settings-panel-glow),
        0 28px 86px rgba(0,0,0,0.54);
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

#leaderboardPanel.leaderboardPanelLocked{
    width:min(940px, calc(100vw - 28px));
    max-width:min(940px, calc(100vw - 28px));
    height:auto;
    max-height:calc(100dvh - 48px);
}

#leaderboardPanel.leaderboardPanelLocked #leaderboardFullscreenButton{
    display:none;
}

#leaderboardPanel.leaderboardPanelLocked #leaderboardCloseButton{
    display:flex;
    align-items:center;
    justify-content:center;
    top:18px;
    right:18px;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(236,244,255,0.92);
    font-size:34px;
    font-weight:300;
    line-height:32px;
    box-shadow:none !important;
    text-shadow:none;
    transition:none;
    transform:none;
}


#leaderboardOverlay.fullscreen #leaderboardPanel{
    width:100%;
    max-width:none;
    min-height:0;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

#leaderboardHeader{
    position:relative;
    z-index:10;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    gap:12px 18px;
    margin:-24px -28px 16px;
    padding:22px 28px 14px;
    border-bottom:1px solid var(--lb-border);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
        var(--lb-panel-surface);
    backdrop-filter:blur(14px);
}

body.theme-glass #leaderboardHeader{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
        var(--lb-panel-surface);
}

body.theme-neon #leaderboardHeader{
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 14px 24px rgba(0,0,0,0.28),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.16));
}

.lb-headerIntro{
    display:flex;
    align-items:flex-start;
    gap:16px;
    min-width:0;
}

.lb-headerIcon{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    flex:none;
    border:1px solid rgba(var(--accent-color-rgb),0.34);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.22), rgba(var(--accent-color-rgb),0.12)),
        rgba(18,26,38,0.92);
    color:var(--accent-color);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.18),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.22));
}

.lb-headerIcon svg,
.lb-modeIcon svg,
.lb-summaryIcon svg,
.lb-tableEmptyIcon svg,
.lb-headerIcon .assetIcon,
.lb-modeIcon .assetIcon,
.lb-summaryIcon .assetIcon,
.lb-tableEmptyIcon .assetIcon{
    width:34px;
    height:34px;
}

.lb-headerCopy{
    min-width:0;
}

.leaderboardNoticeText{
    margin:0 0 4px;
    color:#f3d45c;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

#leaderboardTitle{
    margin:0;
    padding:0;
    color:var(--lb-text-strong);
    text-align:left;
    font-size:clamp(34px, 3vw, 44px);
    font-weight:800;
}

#leaderboardSubtitle{
    margin:4px 0 0;
    color:var(--lb-muted);
    font-size:15px;
    line-height:1.35;
}

#leaderboardCloseButton,
#leaderboardFullscreenButton{
    color:var(--lb-text);
}

#leaderboardCloseButton{
    right:10px;
    top:10px;
}

#leaderboardFullscreenButton{
    right:54px;
    top:10px;
}

#leaderboardContent{
    display:flex;
    flex-direction:column;
    gap:12px;
    flex:1;
    min-height:0;
}

#leaderboardPanel.leaderboardPanelLocked #leaderboardContent{
    justify-content:center;
}

.lb-unlockScreen{
    display:grid;
    gap:18px;
    width:100%;
    max-width:860px;
    margin:0 auto;
}

.lb-unlockHero,
.lb-unlockProgressCard,
.lb-unlockModeGrid,
.lb-unlockReadyCard{
    border:1px solid var(--lb-border);
    border-radius:18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 32%),
        var(--lb-section-surface);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 42px rgba(0,0,0,0.15);
}

.lb-unlockHero{
    display:grid;
    grid-template-columns:58px minmax(0, 1fr);
    align-items:center;
    gap:16px;
    padding:18px;
}

.lb-unlockHeroCopy strong{
    display:block;
    color:var(--lb-text-strong);
    font-size:26px;
    font-weight:800;
}

.lb-unlockHeroCopy p{
    margin:6px 0 0;
    color:var(--lb-muted);
    font-size:14px;
    line-height:1.45;
}

.lb-unlockProgressCard{
    padding:18px;
}

.lb-unlockProgressHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
    color:var(--lb-text);
}

.lb-unlockProgressHeader span{
    font-size:14px;
    font-weight:700;
}

.lb-unlockProgressHeader strong{
    font-size:24px;
    font-weight:800;
    color:var(--lb-text-strong);
}

.lb-unlockProgressBar{
    height:12px;
    border-radius:999px;
    overflow:hidden;
    background:var(--lb-control-surface);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
}

.lb-unlockProgressFill{
    display:block;
    height:100%;
    border-radius:inherit;
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.96), rgba(var(--accent-color-rgb),0.78));
    box-shadow:0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.9));
}

.lb-unlockProgressCaption{
    margin:10px 0 0;
    color:var(--lb-muted);
    font-size:13px;
    line-height:1.35;
}

.lb-unlockReadyCard{
    display:grid;
    place-items:center;
    gap:12px;
    padding:28px 24px;
    text-align:center;
}

.lb-unlockReadyCard strong{
    color:var(--lb-text-strong);
    font-size:22px;
    font-weight:800;
}

.lb-unlockReadyCard p{
    max-width:460px;
    margin:0;
    color:var(--lb-muted);
    font-size:14px;
    line-height:1.45;
}

.lb-unlockActionButton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-width:260px;
    min-height:52px;
    margin-top:4px;
    padding:0 22px;
    border:1px solid rgba(var(--accent-color-rgb),0.46);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.22), rgba(var(--accent-color-rgb),0.1)),
        var(--lb-control-surface);
    color:var(--lb-text-strong);
    font-size:15px;
    font-weight:800;
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.1) inset,
        0 14px 28px rgba(0,0,0,0.16);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        opacity 0.18s ease;
}

.lb-unlockActionButton svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.lb-unlockActionButton:hover,
.lb-unlockActionButton:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.7);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.12) inset,
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.5));
    transform:translateY(-1px);
}

.lb-unlockActionButton.is-unlocking{
    transform:scale(0.985);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.14) inset,
        0 0 32px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.82));
}

.lb-unlockActionButton:disabled{
    cursor:default;
}

.lb-unlockModeGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:18px;
}

.lb-unlockModeItem{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid var(--lb-border);
    border-radius:14px;
    background:var(--lb-control-surface);
    color:var(--lb-text);
    text-align:left;
}

.lb-unlockModeItem.pending{
    cursor:pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.lb-unlockModeItem.pending:hover,
.lb-unlockModeItem.pending:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.32);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.1), rgba(var(--accent-color-rgb),0.05)),
        var(--lb-control-surface);
    box-shadow:0 0 22px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.34));
    transform:translateY(-1px);
}

.lb-unlockModeItem.done{
    border-color:rgba(var(--accent-color-rgb),0.68);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.28), rgba(var(--accent-color-rgb),0.14)),
        var(--lb-control-surface);
    box-shadow:
        0 0 0 1px rgba(var(--accent-color-rgb),0.16) inset,
        inset 0 0 22px rgba(var(--accent-color-rgb),0.12),
        0 0 30px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.72));
    cursor:default;
}

.lb-unlockModeItem.done .lb-unlockModeIcon{
    border-color:rgba(var(--accent-color-rgb),0.44);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.32), rgba(var(--accent-color-rgb),0.16)),
        rgba(18,26,38,0.92);
    color:var(--accent-color);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.14),
        0 0 18px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.42));
}

.lb-unlockModeItem.done .lb-unlockModeCopy small{
    color:rgba(236,244,255,0.88);
    font-weight:700;
}

.lb-unlockModeIcon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    flex:none;
    border:1px solid rgba(var(--accent-color-rgb),0.22);
    border-radius:12px;
    background:rgba(var(--accent-color-rgb),0.08);
    color:#eef6ff;
}

.lb-unlockModeIcon svg{
    width:20px;
    height:20px;
}

.lb-unlockModeIcon .assetGameIcon,
.lb-modeIcon .assetGameIcon{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    color:currentColor;
    filter:none;
}

.lb-unlockModeCopy{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.lb-unlockModeCopy strong{
    color:var(--lb-text-strong);
    font-size:13px;
    font-weight:700;
    line-height:1.3;
}

.lb-unlockModeCopy small{
    margin-top:4px;
    color:var(--lb-muted);
    font-size:12px;
}

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

.lb-modeButton{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:62px;
    margin:0;
    padding:12px 14px;
    border:1px solid var(--lb-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 46%),
        var(--lb-control-surface-strong);
    color:var(--lb-text);
    box-shadow:none;
    text-align:left;
}

.lb-modeButton.selected{
    border-color:rgba(var(--accent-color-rgb),0.8);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.24), rgba(var(--accent-color-rgb),0.08)),
        var(--lb-control-surface-strong);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.32),
        0 0 26px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.22));
}

.lb-modeButton:hover,
.lb-modeButton:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.55);
}

.lb-modeButton.disabled{
    opacity:0.48;
    cursor:default;
    pointer-events:none;
    box-shadow:none !important;
}

.lb-modeButton.disabled:hover,
.lb-modeButton.disabled:focus-visible{
    border-color:var(--lb-border);
    box-shadow:none !important;
    transform:none;
}

.lb-modeIcon{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:none;
    border:1px solid rgba(var(--accent-color-rgb),0.24);
    border-radius:10px;
    background:rgba(var(--accent-color-rgb),0.08);
    color:var(--lb-text);
}

.lb-modeLabel{
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1.25;
}

.lb-summaryGrid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}

.lb-summaryCard{
    display:grid;
    grid-template-columns:62px minmax(0, 1fr);
    align-items:center;
    gap:14px;
    min-height:96px;
    margin:0;
    padding:12px 14px;
    border:1px solid var(--lb-border);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
        var(--lb-control-surface-strong);
    color:var(--lb-text);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 16px 34px rgba(0,0,0,0.16);
    text-align:left;
}

.lb-summaryCard.interactive:hover,
.lb-summaryCard.interactive:focus-visible{
    border-color:rgba(var(--accent-color-rgb),0.52);
}

.lb-summaryCard.selected{
    border-color:rgba(var(--accent-color-rgb),0.84);
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.18), rgba(var(--accent-color-rgb),0.04)),
        var(--lb-control-surface-strong);
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.22),
        0 0 24px rgba(var(--accent-color-rgb),calc(var(--glow-intensity) * 0.18));
}

.lb-summaryCard.static{
    cursor:default;
}

.lb-deviceSelectorCard{
    grid-template-columns:minmax(0, 1fr);
    align-items:stretch;
    gap:0;
    padding:0;
    overflow:hidden;
}

.lb-summaryCard:disabled{
    opacity:1;
}

.lb-summaryIcon{
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    border:1px solid rgba(var(--accent-color-rgb),0.24);
    border-radius:14px;
    background:
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.34), rgba(var(--accent-color-rgb),0.2)),
        rgba(18,26,38,0.92);
    color:var(--accent-color);
}

.lb-summaryIcon-streak svg{
    width:30px;
    height:30px;
}

.lb-summaryCopy{
    min-width:0;
}

.lb-summaryLabel{
    display:block;
    color:var(--lb-text);
    font-size:13px;
    line-height:1.2;
}

.lb-summaryCopy strong{
    display:block;
    margin-top:4px;
    color:var(--lb-text-strong);
    font-size:clamp(18px, 1.9vw, 28px);
    font-weight:800;
    line-height:1;
}

.lb-summaryCopy small{
    display:block;
    margin-top:6px;
    color:var(--lb-muted);
    font-size:12px;
    line-height:1.25;
}

.lb-mainGrid{
    display:grid;
    grid-template-columns:minmax(0, 1.12fr) minmax(430px, 0.98fr);
    gap:12px;
    min-height:0;
    flex:1;
}

.lb-surface{
    min-width:0;
    padding:16px;
    border:1px solid var(--lb-border);
    border-radius:16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.022), transparent 32%),
        var(--lb-section-surface);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 18px 42px rgba(0,0,0,0.15);
}

.lb-tableSurface,
.lb-chartSurface{
    min-height:0;
}

.lb-tableSurface{
    display:flex;
    flex-direction:column;
}

.lb-tableHeader{
    margin-bottom:10px;
}

.lb-tableTitleRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.lb-tableToolbar{
    display:none;
}

.lb-deviceTabs{
    display:inline-grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(90px, 1fr);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    overflow:hidden;
    background:rgba(255,255,255,0.03);
}

.lb-deviceTabsSummary{
    width:100%;
    grid-auto-columns:1fr;
}

.lb-deviceViewPicker{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    min-height:108px;
    overflow:hidden;
    background:transparent;
}

.lb-deviceViewOption{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:108px;
    margin:0;
    padding:14px 16px;
    border:0;
    border-right:1px solid var(--lb-border);
    border-radius:0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.03), transparent 62%),
        transparent;
    color:var(--lb-text);
    box-shadow:none;
    text-align:center;
    transition:
        background 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.lb-deviceViewOption:last-child{
    border-right:0;
}

.lb-deviceViewOption:hover,
.lb-deviceViewOption:focus-visible{
    color:var(--lb-text-strong);
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-color-rgb),0.12), transparent 62%),
        rgba(255,255,255,0.02);
}

.lb-deviceViewOption.selected{
    color:var(--lb-text-strong);
    background:
        radial-gradient(circle at 30% 20%, rgba(var(--accent-color-rgb),0.2), transparent 58%),
        linear-gradient(180deg, rgba(var(--accent-color-rgb),0.14), rgba(var(--accent-color-rgb),0.05));
    box-shadow:
        inset 0 0 0 1px rgba(var(--accent-color-rgb),0.1),
        0 0 30px rgba(var(--accent-color-rgb),0.08);
}

.lb-deviceViewIcon{
    display:grid;
    place-items:center;
    color:currentColor;
}

.lb-deviceViewIcon svg{
    width:58px;
    height:58px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.lb-deviceTab{
    min-height:38px;
    margin:0;
    padding:0 14px;
    border:0;
    border-right:1px solid var(--lb-border);
    border-radius:0;
    background:transparent;
    color:var(--lb-text);
    box-shadow:none;
    font-size:13px;
    font-weight:700;
}

.lb-deviceTab:last-child{
    border-right:0;
}

.lb-deviceTab.selected{
    background:linear-gradient(180deg, rgba(var(--accent-color-rgb),0.24), var(--lb-control-surface-strong));
    color:var(--lb-text-strong);
}

.lb-playerCount{
    color:rgba(220,230,242,0.74);
    font-size:13px;
    font-weight:700;
}

.lb-activePlayersInline{
    display:grid;
    justify-items:end;
    gap:2px;
    padding-top:1px;
    white-space:nowrap;
}

.lb-activePlayersLabel{
    color:var(--lb-muted);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-weight:700;
}

.lb-activePlayersValue{
    color:var(--lb-text-strong);
    font-size:22px;
    line-height:1;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.lb-activePlayersCaption{
    color:var(--lb-muted);
    font-size:11px;
    letter-spacing:0.03em;
}

.lb-tableTitleBlock h3,
.lb-chartHeader h3{
    margin:0;
    color:var(--lb-text-strong);
    font-size:17px;
    font-weight:800;
}

.lb-tableTitleBlock p,
.lb-chartHeader p{
    margin:4px 0 0;
    color:var(--lb-muted);
    font-size:12px;
    line-height:1.35;
}

.lb-chartHeader p span{
    color:var(--accent-color);
}

.lb-tableShell{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    border:1px solid var(--lb-border);
    border-radius:14px;
    overflow:hidden;
    background:var(--lb-control-surface);
}

.lb-tableHead{
    display:grid;
    grid-template-columns:var(--lb-table-columns);
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:0 14px;
    border-bottom:1px solid var(--lb-border);
    color:var(--lb-text);
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.lb-tableBody{
    display:flex;
    flex-direction:column;
    min-height:0;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    padding:0;
    scrollbar-width:thin;
    scrollbar-color:var(--accent-color) transparent;
}

.lb-tableBody::-webkit-scrollbar{
    width:8px;
}

.lb-tableBody::-webkit-scrollbar-track{
    background:transparent;
}

.lb-tableBody::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:var(--accent-color);
}

.lb-tableRow{
    display:grid;
    grid-template-columns:var(--lb-table-columns);
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 12px;
    border-top:1px solid var(--lb-border);
    color:var(--lb-text);
    font-variant-numeric:tabular-nums;
}

.lb-tableRow.topRank{
    background:linear-gradient(90deg, rgba(var(--accent-color-rgb),0.1), transparent 55%);
}

.lb-tableRow.isUserRow{
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.18), rgba(var(--accent-color-rgb),0.06) 42%, transparent 82%);
    box-shadow:
        inset 3px 0 0 var(--accent-color),
        inset -1px 0 0 rgba(var(--accent-color-rgb),0.3);
}

.lb-rankCell{
    color:var(--lb-text-strong);
    font-weight:800;
    text-align:center;
}

.lb-metricCell{
    display:block;
    text-align:center;
}

.lb-playerCell{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.lb-playerAvatar{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:none;
    border:1px solid rgba(var(--accent-color-rgb),0.28);
    border-radius:50%;
    background:rgba(var(--accent-color-rgb),0.12);
    color:var(--lb-text);
    font-size:12px;
    font-weight:800;
}

.lb-playerIdentity{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.lb-playerIdentity strong{
    color:var(--lb-text-strong);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.lb-playerIdentity small{
    display:none;
}

.lb-tableHead{
    gap:10px;
    min-height:40px;
    padding:0 12px;
    font-size:11px;
}

.lb-tableStickyOverlay{
    position:absolute;
    left:0;
    right:0;
    z-index:5;
    display:none;
    pointer-events:none;
}

.lb-tableStickyOverlay.anchorTop{
    top:40px;
}

.lb-tableStickyOverlay.anchorBottom{
    bottom:0;
}

.lb-tableStickyUserRow{
    pointer-events:auto;
    border-top:1px solid rgba(var(--accent-color-rgb),0.36);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
        var(--lb-control-surface-strong);
    box-shadow:
        0 -10px 24px rgba(0,0,0,0.32),
        0 0 0 1px rgba(var(--accent-color-rgb),0.3) inset;
}

.lb-tableStickyUserRow.isUserRow{
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.2), rgba(var(--accent-color-rgb),0.08) 42%, transparent 82%),
        var(--lb-control-surface-strong);
    box-shadow:
        inset 3px 0 0 var(--accent-color),
        inset -1px 0 0 rgba(var(--accent-color-rgb),0.42),
        0 10px 28px rgba(0,0,0,0.34),
        0 0 0 1px rgba(var(--accent-color-rgb),0.3);
}

.lb-tableStickyOverlay.anchorTop .lb-tableStickyUserRow{
    box-shadow:
        0 10px 24px rgba(0,0,0,0.32),
        0 0 0 1px rgba(var(--accent-color-rgb),0.24) inset;
}

.lb-tableStickyOverlay.anchorBottom .lb-tableStickyUserRow{
    box-shadow:
        0 -10px 24px rgba(0,0,0,0.32),
        0 0 0 1px rgba(var(--accent-color-rgb),0.24) inset;
}

.lb-streakCell{
    color:var(--accent-color);
    font-weight:800;
}

.lb-tableEmpty{
    display:grid;
    justify-items:center;
    gap:10px;
    max-width:360px;
    margin:auto;
    padding:22px;
    text-align:center;
}

.lb-lockedState,
.lb-chartLocked{
    margin:auto;
}

.lb-chartLocked{
    display:grid;
    justify-items:center;
    gap:10px;
    height:100%;
    min-height:320px;
    text-align:center;
}

.lb-chartLocked strong{
    color:var(--lb-text-strong);
    font-size:18px;
}

.lb-chartLocked p{
    margin:0;
    max-width:420px;
    color:rgba(220,230,242,0.72);
    font-size:14px;
    line-height:1.4;
}

.lb-chartLocked small{
    color:rgba(220,230,242,0.58);
    font-size:12px;
}

.lb-tableEmptyIcon{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border:1px solid rgba(var(--accent-color-rgb),0.28);
    border-radius:18px;
    background:rgba(var(--accent-color-rgb),0.08);
    color:var(--accent-color);
}

.lb-tableEmpty strong{
    color:var(--lb-text-strong);
    font-size:18px;
}

.lb-tableEmpty p{
    margin:0;
    color:var(--lb-muted);
    font-size:14px;
    line-height:1.4;
}

.lb-chartSurface{
    display:flex;
    flex-direction:column;
}

.lb-chartHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}

.lb-chartHeaderActions{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.lb-chartMetricBadge{
    padding:8px 10px;
    border:1px solid rgba(var(--accent-color-rgb),0.18);
    border-radius:12px;
    background:var(--lb-control-surface);
    text-align:right;
}

.lb-chartMetricBadge span,
.lb-chartLegendValue span{
    display:block;
    color:var(--lb-muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
}

.lb-chartMetricBadge strong,
.lb-chartLegendValue strong{
    display:block;
    margin-top:3px;
    color:var(--lb-text-strong);
    font-size:15px;
}

.lb-chartShell{
    position:relative;
    flex:0 0 auto;
    min-height:0;
}

.lb-chartSvg{
    display:block;
    width:100%;
    height:auto;
    max-height:350px;
    overflow:visible;
}

.lb-gridLine{
    stroke:rgba(255,255,255,0.12);
    stroke-width:1;
    stroke-dasharray:3 5;
}

.lb-gridLineVertical{
    stroke:rgba(255,255,255,0.09);
}

.lb-gridLabel,
.lb-xLabel{
    fill:rgba(221,231,244,0.82);
    font-size:12px;
    font-family:var(--app-font);
}

.lb-chartPath{
    fill:none;
    stroke:var(--accent-color);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 12px rgba(var(--accent-color-rgb),0.28));
}

.lb-chartArea{
    fill:url(#lbChartAreaGradient);
}

.lb-chartPoint{
    fill:var(--accent-color);
    stroke:rgba(255,255,255,0.82);
    stroke-width:2;
}

.lb-chartUserPoint{
    fill:var(--lb-text-strong);
    stroke:var(--accent-color);
    stroke-width:2;
}

.lb-chartValueLabel{
    fill:#dfeeff;
    font-size:12px;
    font-weight:700;
    font-family:var(--app-font);
}

.lb-chartValueLabel.avg{
    fill:var(--accent-color);
}

.lb-chartValueLabel.muted{
    fill:rgba(221,231,244,0.72);
}

.lb-chartReferenceLine{
    stroke-width:1.5;
    stroke-dasharray:5 5;
}

.lb-chartReferenceLine.avg{
    stroke:rgba(var(--accent-color-rgb),0.72);
}

.lb-chartReferenceLine.user{
    stroke:rgba(255,255,255,0.42);
}

.lb-chartReferenceLabel{
    font-size:12px;
    font-weight:700;
    font-family:var(--app-font);
}

.lb-chartReferenceLabel.avg{
    fill:var(--accent-color);
}

.lb-chartReferenceLabel.user{
    fill:rgba(236,244,255,0.86);
}

.lb-percentileCard{
    margin-top:25px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,0.08);
}

.lb-percentileHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.lb-percentileHeader strong{
    color:var(--lb-text-strong);
    font-size:14px;
    font-weight:700;
}

.lb-percentileHeader span{
    color:var(--lb-muted);
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.lb-percentileBarTrack{
    position:relative;
    width:calc(100% + 12px);
    margin-left:-6px;
    height:40px;
    overflow:hidden;
    border:1px solid var(--lb-border);
    border-radius:12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
        var(--lb-control-surface);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.035);
}

.lb-percentileBarFill{
    display:block;
    height:100%;
    border-radius:11px;
    background:
        linear-gradient(90deg, rgba(var(--accent-color-rgb),0.94), rgba(var(--accent-color-rgb),0.76));
    box-shadow:
        0 0 18px rgba(var(--accent-color-rgb),0.22),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

.lb-percentileBarValue{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    color:var(--lb-text-strong);
    font-size:15px;
    font-weight:800;
    letter-spacing:0.02em;
    text-shadow:0 1px 1px rgba(0,0,0,0.35);
}

.lb-percentileHint{
    margin:10px 0 0;
    color:var(--lb-muted);
    font-size:13px;
    line-height:1.5;
    letter-spacing:0.01em;
}

.lb-percentileMeta{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-top:5px;
}

.lb-percentileMeta span{
    color:var(--lb-muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.lb-percentileMetaValue{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.lb-percentileMeta strong{
    color:var(--lb-text-strong);
    font-size:17px;
    line-height:1;
}

.lb-percentileMetaValue small{
    color:var(--lb-muted);
    font-size:11px;
    font-weight:500;
    line-height:1.35;
    letter-spacing:0.01em;
    text-align:right;
    max-width:220px;
}

@media (max-width:1380px){
    .lb-modeStrip{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }

    .lb-summaryGrid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .lb-mainGrid{
        grid-template-columns:1fr;
    }
}

@media (max-width:900px){
    #leaderboardOverlay{
        padding:14px;
    }

    #leaderboardPanel{
        width:calc(100vw - 28px);
        max-width:calc(100vw - 28px);
        height:calc(100dvh - 28px);
        max-height:calc(100dvh - 28px);
        padding:18px 14px;
    }

    #leaderboardHeader{
        grid-template-columns:minmax(0, 1fr);
        margin:-18px -14px 18px;
        padding:18px 14px 16px;
    }

    #leaderboardCloseButton{
        right:8px;
        top:8px;
    }

    #leaderboardFullscreenButton{
        right:48px;
        top:8px;
    }

    .lb-headerMeta{
        padding-right:0;
    }

    #leaderboardUpdatedAt{
        text-align:left;
    }

    .lb-modeStrip,
    .lb-summaryGrid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .lb-summaryCard{
        grid-template-columns:56px minmax(0, 1fr);
        min-height:88px;
        gap:14px;
    }

    .lb-summaryIcon{
        width:54px;
        height:54px;
        border-radius:14px;
    }

    .lb-tableBody{
        min-height:0;
    }

    .lb-tableToolbar{
        display:none;
    }

    .lb-tableTitleRow{
        flex-direction:column;
        align-items:flex-start;
    }

    .lb-chartHeader{
        flex-direction:column;
    }

    .lb-chartHeaderActions{
        width:auto;
        justify-content:flex-start;
    }
}

@media (max-width:640px){
    #leaderboardPanel{
        overflow:auto;
        height:auto;
    }

    .lb-modeStrip,
    .lb-summaryGrid,
    .lb-unlockModeGrid{
        grid-template-columns:1fr;
    }

    .lb-modeButton{
        min-height:62px;
    }

    .lb-tableHead{
        display:none;
    }

    .lb-tableRow{
        grid-template-columns:1fr;
        gap:6px;
        padding:14px;
    }

    .lb-rankCell{
        text-align:left;
    }

    .lb-playerCell{
        margin-bottom:2px;
    }

    .lb-chartMetricBadge{
        display:none;
    }

    .lb-chartSvg{
        min-height:300px;
    }

    .lb-deviceTabs{
        width:100%;
        grid-auto-columns:1fr;
    }

    .lb-tableToolbar{
        align-items:flex-start;
    }
}