:root {
        --bg-deep:      #0a0518;
        --bg-panel:     #1a0f3a;
        --bg-panel-2:   #241548;
        --purple:       #7a4fd0;
        --purple-light: #c088ff;
        --yellow:       #ffdd44;
        --yellow-dark:  #c99a10;
        --pink:         #f54b7a;
        --pink-dark:    #b82d58;
        --green:        #0ae0a8;
        --green-dark:   #04956f;
        --blue:         #4cc9f0;
        --blue-dark:    #1e56c4;
        --red:          #ff5a7a;
        --text-dim:     #8a8aa8;
        --text:         #ffffff;
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; image-rendering: pixelated; }

    body {
        margin: 0;
        background: #05050a;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: 'VT323', 'Courier New', monospace;
        color: var(--text);
        overflow: hidden;
    }

    #gameContainer {
        position: relative;
        width: 400px;
        height: 600px;
        background: #1a1a2e;
        box-shadow:
            0 0 0 4px #0a0a12,
            0 0 0 8px #2a2a3e,
            0 0 0 10px #0a0a12,
            0 0 60px rgba(120, 80, 220, 0.7),
            0 0 120px rgba(120, 80, 220, 0.3);
        overflow: hidden;
    }

    #gameContainer::after {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.13) 2px,
            rgba(0, 0, 0, 0.13) 3px
        );
        pointer-events: none;
        z-index: 999;
        mix-blend-mode: multiply;
    }
    #gameContainer::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
        pointer-events: none;
        z-index: 998;
    }

    canvas { width: 100%; height: 100%; display: none; image-rendering: pixelated; image-rendering: crisp-edges; }

    .screen {
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%;
        display: none; flex-direction: column; align-items: center;
        padding: 20px;
        background: var(--bg-deep);
        background-image:
            linear-gradient(rgba(120, 80, 220, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(120, 80, 220, 0.06) 1px, transparent 1px),
            radial-gradient(ellipse at 50% 0%, rgba(120, 80, 220, 0.4) 0%, transparent 60%),
            radial-gradient(ellipse at 50% 100%, rgba(245, 75, 122, 0.28) 0%, transparent 70%),
            linear-gradient(180deg, #1a0f3a 0%, #0a0518 100%);
        background-size: 20px 20px, 20px 20px, 100% 100%, 100% 100%, 100% 100%;
        overflow-y: auto; overflow-x: hidden;
    }
    .screen.active { display: flex; }

    #soundToggle {
        position: absolute; bottom: 12px; right: 12px;
        width: 34px; height: 34px;
        background: rgba(36, 21, 72, 0.9);
        border: none;
        color: var(--yellow); font-size: 16px;
        cursor: pointer; z-index: 40;
        display: flex; align-items: center; justify-content: center;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.2),
            inset 0 -2px 0 rgba(0,0,0,0.4),
            0 3px 0 #0a0a12,
            0 5px 0 rgba(0,0,0,0.6);
        transition: transform 0.08s, box-shadow 0.08s, opacity 0.2s;
        opacity: 0.65;
    }
    #soundToggle:hover { opacity: 1; }
    #soundToggle:active {
        transform: translateY(3px);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.2),
            inset 0 -2px 0 rgba(0,0,0,0.4),
            0 0 0 #0a0a12;
    }
    #soundToggle.muted { color: #6a6a8a; }

    #opponentJoinedToast {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        padding: 20px 28px;
        background: linear-gradient(180deg, #2ee89a 0%, #06a576 100%);
        border: none;
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.35),
            inset 0 -3px 0 rgba(0,0,0,0.35),
            0 0 0 3px #0a0518,
            0 0 0 6px #7bed9f,
            0 0 40px rgba(123, 237, 159, 0.9),
            6px 6px 0 #000;
        text-align: center;
        font-family: 'Press Start 2P', monospace;
        font-size: 14px; color: #fff;
        letter-spacing: 2px; text-shadow: 2px 2px 0 #000;
        z-index: 150;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
    }
    #opponentJoinedToast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    #opponentJoinedToast .big { font-size: 18px; display: block; margin-bottom: 10px; color: #fff; }
    #opponentJoinedToast .small { font-size: 10px; color: #d5ffe8; font-family: 'VT323', monospace; letter-spacing: 1px; }

    #botCommentToast {
        position: absolute; top: 180px; left: 50%;
        transform: translateX(-50%) scale(0.9);
        padding: 8px 14px;
        background: rgba(10, 5, 24, 0.95);
        box-shadow: 0 0 0 2px var(--blue), 3px 3px 0 #000;
        font-family: 'VT323', monospace; font-size: 15px;
        color: var(--blue);
        z-index: 145;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s, transform 0.3s;
        white-space: nowrap;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-title {
        position: relative; width: 100%;
        margin: 4px 0 4px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        z-index: 2; padding: 8px 0 6px;
    }
    .hero-goal {
        position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
        width: 260px; height: 120px;
        pointer-events: none; z-index: 0; opacity: 0.5;
    }
    .hero-goal svg { width: 100%; height: 100%; display: block; }
    .hero-line1, .hero-line2 {
        position: relative;
        font-family: 'Press Start 2P', monospace;
        z-index: 2; line-height: 1.15; white-space: nowrap;
    }
    .hero-line1 {
        font-size: 34px; color: var(--yellow); letter-spacing: 2px;
        text-shadow:
            2px 0 0 #7a3f00, 0 2px 0 #7a3f00, 2px 2px 0 #7a3f00,
            4px 4px 0 #000, 6px 6px 0 #000,
            0 0 24px rgba(255, 210, 63, 0.7),
            0 0 48px rgba(255, 210, 63, 0.35);
    }
    .hero-line2 {
        font-size: 16px; color: #00f5d4; margin-top: 8px; letter-spacing: 5px;
        text-shadow:
            2px 0 0 #025b44, 0 2px 0 #025b44, 2px 2px 0 #025b44,
            4px 4px 0 #000, 6px 6px 0 #000,
            0 0 20px rgba(0, 245, 212, 0.8),
            0 0 40px rgba(0, 245, 212, 0.4);
    }

    .profile-card {
        display: flex; align-items: center; gap: 10px;
        width: 90%; padding: 12px 14px; margin: 10px 0 12px;
        background:
            linear-gradient(180deg, rgba(36, 21, 72, 0.95) 0%, rgba(20, 8, 42, 0.98) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.02) 3px, rgba(255,255,255,0.02) 4px);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px rgba(120, 80, 220, 0.7),
            4px 4px 0 #000,
            0 0 20px rgba(120, 80, 220, 0.4);
        z-index: 2; cursor: pointer;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .profile-card:active {
        transform: translate(4px, 4px);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px rgba(120, 80, 220, 0.7),
            0 0 0 #000;
    }
    .profile-card .profile-flag { font-size: 26px; line-height: 1; flex-shrink: 0; filter: drop-shadow(2px 2px 0 #000); }
    .profile-card .profile-info-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .profile-card .profile-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px; color: #fff;
        letter-spacing: 1px; text-shadow: 2px 2px 0 #000;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .profile-card .profile-xp-bar {
        width: 100%; height: 6px; background: rgba(0, 0, 0, 0.6);
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.8), 0 0 0 1px #000;
        overflow: hidden; position: relative;
    }
    .profile-card .profile-xp-fill {
        height: 100%; width: 0%;
        background: linear-gradient(180deg, var(--yellow) 0%, #ff8a3d 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        transition: width 0.5s ease;
    }
    .profile-card .profile-xp-text {
        font-family: 'VT323', monospace;
        font-size: 12px; color: var(--purple-light); letter-spacing: 0.5px;
    }
    .profile-card .profile-level {
        font-family: 'Press Start 2P', monospace;
        font-size: 8px; color: var(--yellow);
        flex-shrink: 0; padding: 4px 6px;
        background: rgba(255, 210, 63, 0.12);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.2),
            0 0 0 1px rgba(255, 210, 63, 0.6);
    }

    #onlinePanel {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        margin-bottom: 10px; padding: 8px 16px;
        background: linear-gradient(180deg, rgba(36, 21, 72, 0.9) 0%, rgba(20, 8, 42, 0.98) 100%);
        border: none;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px rgba(120, 80, 220, 0.6),
            3px 3px 0 #000;
        font-family: 'VT323', monospace;
        font-size: 14px; letter-spacing: 1px; color: #c8c8d8;
        text-transform: uppercase; z-index: 2;
    }
    #onlinePanel .online-item { display: flex; align-items: center; gap: 6px; }
    #onlinePanel .online-item b {
        font-family: 'Press Start 2P', monospace;
        color: var(--yellow); font-size: 10px;
        text-shadow: 1px 1px 0 #000;
    }
    #onlinePanel .online-sep { color: var(--purple); }
    #onlinePanel .online-dot {
        display: inline-block; width: 8px; height: 8px; border-radius: 0;
        background: var(--green);
        animation: pixelPulse 2s steps(2, end) infinite;
    }
    @keyframes pixelPulse {
        0%, 100% { box-shadow: 0 0 0 0 #0ae0a8; }
        50% { box-shadow: 0 0 0 4px rgba(10, 224, 168, 0.35); }
    }

    .pixel-btn {
        position: relative;
        width: 90%; padding: 16px 12px; margin: 6px 0;
        font-family: 'Press Start 2P', monospace;
        font-size: 11px;
        letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
        border: none; cursor: pointer;
        text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
        background-image: repeating-linear-gradient(
            0deg, transparent 0px, transparent 2px,
            rgba(0, 0, 0, 0.12) 2px, rgba(0, 0, 0, 0.12) 3px
        );
        z-index: 2;
        transition: transform 0.08s, box-shadow 0.08s, filter 0.08s;
    }
    .pixel-btn:hover { filter: brightness(1.12); }
    .pixel-btn:active { transform: translateY(4px); }

    .pixel-btn.blue {
        background-color: #3a86ff;
        background-image:
            linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 48%, rgba(0,0,0,0.15) 52%, rgba(0,0,0,0.4) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.3),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 #1e56c4,
            0 8px 0 rgba(0,0,0,0.5);
    }
    .pixel-btn.blue:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 #1e56c4;
    }
    .pixel-btn.orange {
        background-color: #f77f00;
        background-image:
            linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 48%, rgba(0,0,0,0.15) 52%, rgba(0,0,0,0.4) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.35),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 #a85800,
            0 8px 0 rgba(0,0,0,0.5);
    }
    .pixel-btn.orange:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 #a85800;
    }
    .pixel-btn.purple {
        background-color: #9d4edd;
        background-image:
            linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 48%, rgba(0,0,0,0.15) 52%, rgba(0,0,0,0.4) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.3),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 #6a1fb0,
            0 8px 0 rgba(0,0,0,0.5);
    }
    .pixel-btn.purple:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 #6a1fb0;
    }
    .pixel-btn.gold {
        background-color: var(--yellow);
        color: #1a1a2e;
        text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
        background-image:
            linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 48%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.25) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 3px);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.6),
            inset 0 -3px 0 rgba(140, 100, 0, 0.4),
            0 4px 0 var(--yellow-dark),
            0 8px 0 rgba(0,0,0,0.5);
    }
    .pixel-btn.gold:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.6), inset 0 -3px 0 rgba(140, 100, 0, 0.4), 0 0 0 var(--yellow-dark);
    }
    .pixel-btn.green {
        background-color: var(--green);
        color: #0a1e18;
        text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
        background-image:
            linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 48%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.25) 100%),
            repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 3px);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.55),
            inset 0 -3px 0 rgba(0,80,50,0.4),
            0 4px 0 var(--green-dark),
            0 8px 0 rgba(0,0,0,0.5);
    }
    .pixel-btn.green:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.55), inset 0 -3px 0 rgba(0,80,50,0.4), 0 0 0 var(--green-dark);
    }

    @keyframes btnGlow {
        0%, 88%, 100% { filter: brightness(1); }
        92% { filter: brightness(1.35); }
        96% { filter: brightness(1.15); }
    }
    #btnPlay { animation: btnGlow 3.5s steps(2, end) infinite; }

    .stat-row {
        display: flex; justify-content: space-between; align-items: center;
        font-family: 'VT323', monospace;
        font-size: 16px;
        padding: 8px 0;
        position: relative;
    }
    .stat-row::after {
        content: '';
        position: absolute; bottom: 0; left: 0; right: 0;
        height: 2px;
        background-image: repeating-linear-gradient(90deg, #3a3a5e 0 4px, transparent 4px 8px);
    }
    .stat-row:last-child::after { display: none; }
    .stat-label { color: var(--text-dim); letter-spacing: 0.5px; }
    .stat-value { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff; }

    .screen-header {
        display: flex; width: 100%; justify-content: space-between; align-items: center;
        margin-bottom: 14px; z-index: 2;
    }
    .screen-header h2 {
        margin: 0;
        font-family: 'Press Start 2P', monospace;
        font-size: 13px;
        letter-spacing: 2px; color: var(--yellow);
        text-shadow: 2px 2px 0 #000, 4px 4px 0 #7a3f00;
        text-transform: uppercase;
    }
    .back-btn {
        width: 36px; height: 36px;
        font-family: 'Press Start 2P', monospace;
        font-size: 12px;
        color: #fff; background: #3a3a5e;
        border: none; cursor: pointer;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.2),
            inset 0 -2px 0 rgba(0,0,0,0.4),
            0 3px 0 #000,
            0 5px 0 rgba(0,0,0,0.6);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .back-btn:active {
        transform: translateY(3px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 0 #000;
    }

    .coin-badge {
        background: linear-gradient(180deg, #fff0a8 0%, var(--yellow) 100%);
        color: #1a1a2e;
        padding: 8px 10px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        letter-spacing: 1px;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.7),
            inset 0 -2px 0 rgba(140, 100, 0, 0.4),
            0 0 0 2px #1a1a2e,
            3px 3px 0 #000;
    }

    .country-picker { position: relative; width: 70%; margin-top: auto; margin-bottom: 6px; z-index: 2; }
    .country-current {
        display: flex; align-items: center; gap: 8px;
        width: 100%; padding: 8px 10px;
        background: linear-gradient(180deg, rgba(36, 21, 72, 0.95) 0%, rgba(20, 8, 42, 0.98) 100%);
        border: none;
        cursor: pointer;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px rgba(120, 80, 220, 0.6),
            3px 3px 0 #000;
        color: #fff;
        text-align: left;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .country-current:active {
        transform: translate(3px, 3px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.5), 0 0 0 2px rgba(120, 80, 220, 0.6);
    }
    .country-current .flag-big { font-size: 20px; line-height: 1; flex-shrink: 0; }
    .country-current .country-name {
        flex: 1;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        color: #fff;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .country-current .arrow { font-size: 10px; color: var(--yellow); flex-shrink: 0; transition: transform 0.2s; }
    .country-current.open .arrow { transform: rotate(180deg); }

    .country-list {
        display: none;
        position: absolute; bottom: calc(100% + 6px); left: 0; width: 100%;
        padding: 6px;
        background: var(--bg-deep);
        box-shadow:
            0 0 0 2px rgba(120, 80, 220, 0.7),
            0 0 20px rgba(120, 80, 220, 0.6),
            4px 4px 0 #000;
        max-height: 240px; overflow-y: auto;
        z-index: 10;
    }
    .country-list.open { display: block; }
    .flag-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; width: 100%; }
    .flag-option {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 1px; padding: 5px 2px;
        font-size: 16px; line-height: 1;
        background: var(--bg-panel);
        border: none;
        box-shadow: inset 0 0 0 1px #3a3a5e;
        cursor: pointer;
        color: #fff; min-width: 0; width: 100%; overflow: hidden;
        transition: filter 0.1s, box-shadow 0.1s;
    }
    .flag-option:hover { filter: brightness(1.2); }
    .flag-option .flag-name {
        font-family: 'VT323', monospace;
        font-size: 9px; color: var(--text-dim);
        text-align: center; text-transform: uppercase;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        width: 100%;
    }
    .flag-option.selected {
        box-shadow: inset 0 0 0 2px var(--yellow), 0 0 0 1px #000;
        background: #3a2f1e;
    }
    .flag-option.selected .flag-name { color: var(--yellow); }

    .pixel-tabs { display: flex; width: 100%; gap: 4px; margin-bottom: 12px; z-index: 2; }
    .pixel-tab {
        flex: 1; padding: 10px 4px;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        letter-spacing: 0.5px; text-transform: uppercase;
        color: var(--text-dim); background: var(--bg-panel);
        border: none;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.08),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px #3a3a5e;
        cursor: pointer;
        transition: filter 0.1s;
    }
    .pixel-tab:hover { filter: brightness(1.2); }
    .pixel-tab.active {
        background: var(--yellow);
        color: #1a1a2e;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.6),
            inset 0 -2px 0 rgba(140, 100, 0, 0.4),
            0 0 0 2px #1a1a2e;
    }

    .shop-item {
        width: 100%; padding: 12px;
        margin-bottom: 10px;
        background: linear-gradient(180deg, rgba(36, 21, 72, 0.9) 0%, rgba(20, 8, 42, 0.95) 100%);
        box-shadow: inset 0 0 0 2px #3a3a5e, 4px 4px 0 #000;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        transition: filter 0.15s;
    }
    .shop-item:hover { filter: brightness(1.08); }
    .item-emoji {
        width: 44px; height: 44px;
        background: var(--bg-deep);
        box-shadow: inset 0 0 0 2px #3a3a5e;
        display: flex; align-items: center; justify-content: center;
        font-size: 24px; flex-shrink: 0;
    }
    .item-emoji svg { width: 32px; height: 32px; display: block; }
    .item-info { flex: 1; min-width: 0; }
    .item-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 8px; color: #fff; margin-bottom: 6px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        letter-spacing: 0.5px;
    }
    .item-desc { font-family: 'VT323', monospace; font-size: 13px; color: var(--text-dim); }
    .shop-btn {
        padding: 8px 10px;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        color: #0a1e18;
        background: linear-gradient(180deg, #3ff0b8 0%, var(--green) 100%);
        border: none; cursor: pointer;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.5),
            inset 0 -2px 0 rgba(0,80,50,0.4),
            0 3px 0 var(--green-dark),
            0 5px 0 rgba(0,0,0,0.6);
        text-transform: uppercase; flex-shrink: 0;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .shop-btn:active {
        transform: translateY(3px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,80,50,0.4), 0 0 0 var(--green-dark);
    }
    .shop-btn.equipped {
        background: #57606f; color: #b0b8cc; cursor: default;
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.4), 0 3px 0 #1a1a2e;
    }
    .shop-btn.equip {
        background: linear-gradient(180deg, #fff0a8 0%, var(--yellow) 100%);
        color: #1a1a2e;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.7),
            inset 0 -2px 0 rgba(140, 100, 0, 0.4),
            0 3px 0 var(--yellow-dark),
            0 5px 0 rgba(0,0,0,0.6);
    }

    #gameUI {
        position: absolute; top: 10px; left: 0; width: 100%;
        text-align: center; pointer-events: none; padding: 0 56px;
        z-index: 3; display: none;
    }
    #status {
        display: inline-block; padding: 8px 12px;
        background: rgba(10, 5, 24, 0.92);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            0 0 0 2px var(--yellow),
            3px 3px 0 #000;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
        color: #fff;
        max-width: 100%; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis;
    }
    #timer {
        font-family: 'Press Start 2P', monospace;
        font-size: 24px;
        color: var(--pink);
        margin: 6px 0 0;
        text-shadow:
            2px 0 0 #000, 0 2px 0 #000, 2px 2px 0 #000,
            4px 4px 0 #000,
            0 0 16px rgba(245, 75, 122, 0.8);
        letter-spacing: 2px;
    }

    #scoreBar {
        display: none; position: absolute; bottom: 8px; left: 0; width: 100%;
        padding: 0 12px; text-align: center; pointer-events: auto; z-index: 5;
    }
    #superWrap {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        margin-bottom: 5px; pointer-events: auto;
    }
    #superBarBg {
        position: relative; width: 124px; height: 14px;
        background: #150e38; border: 2px solid #5a3fc0;
        box-shadow: 2px 2px 0 #000; overflow: hidden;
    }
    #superBarFill {
        height: 100%; width: 0%;
        background: linear-gradient(90deg, #ff9900, #ffdd44, #0ae0a8);
        transition: width 0.25s ease-out;
    }
    #superBarText {
        position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
        font: 7px 'Press Start 2P', monospace; color: #fff; text-shadow: 1px 1px 0 #000;
        letter-spacing: 0.5px;
    }
    #btnSuper {
        padding: 5px 8px; border: 0; cursor: pointer;
        font: 8px 'Press Start 2P', monospace; color: #8a8aa8;
        background: #2a2254; opacity: 0.6;
        box-shadow: 2px 2px 0 #000;
    }
    #btnSuper.ready {
        opacity: 1; color: #1a1000;
        background: linear-gradient(180deg, #ffe14d, #ff5a7a);
        box-shadow: 0 0 12px #ffe14d, 2px 2px 0 #000;
        animation: pulseSuper 0.7s infinite alternate;
    }
    #btnSuper.active {
        background: #0ae0a8; color: #04241a;
        box-shadow: 0 0 16px #0ae0a8;
    }
    @keyframes pulseSuper {
        from { transform: scale(1); filter: brightness(1); }
        to { transform: scale(1.08); filter: brightness(1.3); }
    }
    .rookie-banner {
        position: absolute; left: 16px; right: 16px; top: 268px;
        padding: 6px 10px;
        background: linear-gradient(135deg, #1b0d40 0%, #2a1147 100%);
        border: 2px solid #2ee6a8;
        box-shadow: 0 0 14px rgba(46,230,168,0.3), 3px 3px 0 #000;
        display: none; align-items: center; justify-content: space-between; gap: 8px;
        z-index: 8; cursor: pointer;
        box-sizing: border-box;
    }
    .rb-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
    .rb-ico { font-size: 20px; line-height: 1; flex-shrink: 0; }
    .rb-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
    .rb-text b { font: 8px 'Press Start 2P', monospace; color: #ffd22e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rb-text span { font: 14px 'VT323', monospace; color: #f1f1fa; line-height: 1.1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rb-btn {
        flex-shrink: 0; padding: 6px 8px; border: 0; cursor: pointer;
        font: 7px 'Press Start 2P', monospace; color: #06241b;
        background: #2ee6a8; box-shadow: inset 0 2px 0 #fff, 2px 2px 0 #000;
        white-space: nowrap;
    }
    .rb-btn.claim { background: #ffe14d; color: #241400; animation: pulseSuper 0.8s infinite alternate; }
    .tour-bracket { width: 100%; margin: 8px 0 12px; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; }
    .tour-stage-lbl { font: 8px 'Press Start 2P', monospace; color: #2ee6a8; margin-bottom: 2px; }
    .tour-match-row {
        display: flex; align-items: center; justify-content: space-between; gap: 6px;
        padding: 8px 10px; background: #150b36; border: 2px solid #5b4fa8;
        box-shadow: 2px 2px 0 #000; box-sizing: border-box;
    }
    .tour-match-row.sub { opacity: 0.65; font-size: 13px; background: #0f0728; border-color: #3b2e7a; }
    .tour-team { flex: 1; font: 8px 'Press Start 2P', monospace; color: #fff; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tour-team.me { color: #ffe14d; }
    .tour-vs { font: 8px 'Press Start 2P', monospace; color: #ff5a7a; padding: 0 4px; flex-shrink: 0; }
    .rookie-step-item {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 8px 10px; margin-bottom: 6px; background: #150e42; border: 1px solid #5a3fc0;
        box-shadow: 2px 2px 0 #000; box-sizing: border-box; width: 100%; text-align: left;
    }
    .rookie-step-item.done { border-color: #2ee6a8; }
    .rookie-step-item .rsi-info { flex: 1; min-width: 0; }
    .rookie-step-item .rsi-title { font: 8px 'Press Start 2P', monospace; color: #ffd22e; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .rookie-step-item .rsi-desc { font: 14px 'VT323', monospace; color: #f1f1fa; line-height: 1.1; }
    .rookie-step-item .rsi-rew { font: 13px 'VT323', monospace; color: #2ee6a8; margin-top: 2px; }
    .rookie-step-item .rsi-action { flex-shrink: 0; }
    #score {
        display: inline-block; padding: 10px 14px;
        background: rgba(10, 5, 24, 0.95);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.1),
            0 0 0 3px var(--yellow),
            4px 4px 0 #000;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px;
        color: #fff; width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #score .s-my { color: var(--green); }
    #score .s-enemy { color: var(--pink); }
    #score .s-num {
        font-family: 'Press Start 2P', monospace;
        color: var(--yellow); font-size: 11px;
        text-shadow: 1px 1px 0 #000;
    }
    #score .clickable { cursor: pointer; pointer-events: auto; }

    #searchPanel {
        display: none; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        flex-direction: column; align-items: center; gap: 14px;
        padding: 26px 34px;
        background: rgba(10, 5, 24, 0.98);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 3px var(--yellow),
            0 0 40px rgba(255, 210, 63, 0.6),
            6px 6px 0 #000;
        z-index: 20; pointer-events: auto;
    }
    #searchPanel.visible { display: flex; }
    #searchPanel .search-text {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px; letter-spacing: 1px; color: var(--yellow);
        text-align: center;
        text-shadow: 2px 2px 0 #000;
    }
    #searchPanel .search-dots { display: flex; gap: 6px; }
    #searchPanel .search-dots span {
        font-family: 'Press Start 2P', monospace;
        font-size: 16px; color: #00f5d4;
        animation: dotBlink 1.2s infinite;
    }
    #searchPanel .search-dots span:nth-child(2) { animation-delay: 0.2s; }
    #searchPanel .search-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dotBlink {
        0%, 60%, 100% { opacity: 0.3; }
        30% { opacity: 1; }
    }
    #searchPanel .search-cancel-btn {
        margin-top: 8px; padding: 14px 24px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
        color: #fff;
        background: linear-gradient(180deg, #ff6b8a 0%, var(--pink) 100%);
        border: none; cursor: pointer;
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.35),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 var(--pink-dark),
            0 8px 0 rgba(0,0,0,0.6);
        transition: transform 0.08s, box-shadow 0.08s;
    }
    #searchPanel .search-cancel-btn:active {
        transform: translateY(4px);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 var(--pink-dark);
    }

    #modePicker {
        display: none; position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        flex-direction: column; align-items: center; gap: 14px;
        padding: 24px; background: rgba(10, 5, 24, 0.98);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 3px var(--yellow),
            0 0 40px rgba(255, 210, 63, 0.6),
            6px 6px 0 #000;
        z-index: 30; pointer-events: auto; width: 320px;
    }
    #modePicker.visible { display: flex; }
    #modePicker .mode-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px; color: var(--yellow); letter-spacing: 1px;
        text-align: center; text-transform: uppercase;
        text-shadow: 2px 2px 0 #000;
        margin-bottom: 4px;
    }
    #modePicker .mode-btn {
        width: 100%; padding: 16px 12px;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        letter-spacing: 1px; text-transform: uppercase; color: #fff;
        border: none; cursor: pointer;
        text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
        transition: transform 0.08s, box-shadow 0.08s;
    }
    #modePicker .mode-btn:active { transform: translateY(4px); }
    #modePicker .mode-btn.friend {
        background-color: var(--green);
        color: #0a1e18;
        text-shadow: 2px 2px 0 rgba(255,255,255,0.4);
        background-image: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 48%, rgba(0,0,0,0.1) 52%, rgba(0,0,0,0.25) 100%);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.5),
            inset 0 -3px 0 rgba(0,80,50,0.4),
            0 4px 0 var(--green-dark),
            0 8px 0 rgba(0,0,0,0.5);
    }
    #modePicker .mode-btn.friend:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,80,50,0.4), 0 0 0 var(--green-dark);
    }
    #modePicker .mode-btn.random {
        background-color: #3a86ff;
        background-image: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 48%, rgba(0,0,0,0.15) 52%, rgba(0,0,0,0.4) 100%);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.3),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 var(--blue-dark),
            0 8px 0 rgba(0,0,0,0.5);
    }
    #modePicker .mode-btn.random:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 var(--blue-dark);
    }
    #modePicker .mode-btn.cancel {
        background: #57606f;
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.15),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 4px 0 #2a2a3e,
            0 8px 0 rgba(0,0,0,0.5);
    }
    #modePicker .mode-btn.cancel:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.15), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 #2a2a3e;
    }

    #surrenderBtn {
        position: absolute; top: 8px; right: 8px;
        width: 34px; height: 34px; padding: 0;
        font-size: 15px; line-height: 1;
        color: #fff;
        background: linear-gradient(180deg, #ff6b8a 0%, var(--pink) 100%);
        border: none; cursor: pointer;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.35),
            inset 0 -2px 0 rgba(0,0,0,0.4),
            0 3px 0 var(--pink-dark),
            0 5px 0 rgba(0,0,0,0.6);
        z-index: 10; display: none;
        align-items: center; justify-content: center;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    #surrenderBtn:active {
        transform: translateY(3px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 0 var(--pink-dark);
    }

    /* ====== КНОПКА ПАУЗЫ ====== */
    #pauseBtn {
        position: absolute; top: 8px; right: 50px;
        width: 34px; height: 34px; padding: 0;
        font-size: 15px; line-height: 1;
        color: #fff;
        background: linear-gradient(180deg, #6ec6ff 0%, #3a86ff 100%);
        border: none; cursor: pointer;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.35),
            inset 0 -2px 0 rgba(0,0,0,0.4),
            0 3px 0 #1e56c4,
            0 5px 0 rgba(0,0,0,0.6);
        z-index: 10; display: none;
        align-items: center; justify-content: center;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    #pauseBtn:active {
        transform: translateY(3px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.4), 0 0 0 #1e56c4;
    }
    #pauseBtn.disabled {
        background: #4a5570;
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.4), 0 3px 0 #1a1a2e;
        color: #b0b8cc;
    }
    #pauseBtn.has-pause::after {
        content: ''; position: absolute; top: -3px; right: -3px;
        width: 10px; height: 10px;
        background: var(--green);
        box-shadow: 0 0 0 2px #000;
        border-radius: 50%;
    }

    #pauseOverlay {
        position: absolute; inset: 0;
        background: rgba(5, 5, 10, 0.92);
        display: none; align-items: center; justify-content: center;
        z-index: 480; padding: 24px;
    }
    #pauseOverlay.active { display: flex; }
    .pause-box {
        background: var(--bg-panel-2);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--blue),
            8px 8px 0 #000,
            0 0 40px rgba(76, 201, 240, 0.5);
        padding: 26px 22px; width: 100%; max-width: 320px; text-align: center;
    }
    .pause-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 14px; letter-spacing: 2px;
        color: var(--blue);
        text-shadow: 2px 2px 0 #000, 4px 4px 0 #1e56c4;
        margin-bottom: 14px;
    }
    .pause-who {
        font-family: 'VT323', monospace; font-size: 18px;
        color: #d6d6ee; margin-bottom: 10px;
    }
    .pause-info {
        font-family: 'Press Start 2P', monospace;
        font-size: 22px; color: var(--yellow);
        text-shadow: 2px 2px 0 #000, 4px 4px 0 #7a3f00;
        margin: 10px 0 20px;
        letter-spacing: 2px;
    }
    .pause-tasks { display: none; text-align: left; margin: 4px 0 12px; }
    .pause-tasks.show { display: block; }
    .pause-tasks .hd { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ffd22e; letter-spacing: 1px; margin-bottom: 8px; text-align: center; }
    .pause-cond { font-family: 'VT323', monospace; font-size: 18px; color: #9ad7ff; text-align: center; margin: -2px 0 8px; }
    .pause-task { display: flex; gap: 8px; align-items: flex-start; font-family: 'VT323', monospace; font-size: 18px; line-height: 1.15; color: #e6e6f5; margin: 5px 0; }
    .pause-task .mk { width: 16px; flex: none; text-align: center; }
    .pause-task .tx { flex: 1; min-width: 0; }
    .pause-task .sub { display: block; font-size: 16px; color: #b7b7d8; }
    .pause-task.done { color: #7dffa8; }
    .pause-task.done .sub { color: #8ddead; }
    .pause-task.fail { color: #ff8aa0; }
    .pause-task.fail .sub { color: #e7a0b0; }
    .pause-task.lead { color: #ffe14d; }
    .pause-task.behind .sub { color: #ffb0c0; }
    .pause-legend { margin-top: 8px; font-family: 'VT323', monospace; font-size: 15px; line-height: 1.15; color: #9a94c4; }
    .pause-box { max-height: 92%; overflow-y: auto; }
    .pause-ready-status { min-height: 18px; margin: 6px 0 8px; color: var(--green); font-family: 'VT323', monospace; font-size: 15px; text-align: center; }
    .pause-resume-btn {
        width: 100%; padding: 14px 12px;
        font-family: 'Press Start 2P', monospace;
        font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
        color: #0a1e18; border: none; cursor: pointer;
        background: linear-gradient(180deg, #3ff0b8 0%, var(--green) 100%);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.5),
            inset 0 -3px 0 rgba(0,80,50,0.4),
            0 4px 0 var(--green-dark),
            0 8px 0 rgba(0,0,0,0.5);
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .pause-resume-btn:active {
        transform: translateY(4px);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,80,50,0.4), 0 0 0 var(--green-dark);
    }

    #emoteBar {
        display: none; position: absolute; inset: 0;
        pointer-events: none; z-index: 8;
    }
    #emoteBar.visible { display: block; }
    .emote-col {
        position: absolute; display: flex; flex-direction: column;
        gap: 6px; pointer-events: auto; z-index: 8;
    }
    .emote-col-left {
        left: 8px; bottom: 62px;
    }
    .emote-col-right {
        right: 8px; bottom: 62px; align-items: center;
    }
    .vip-col-lbl {
        font: 6px 'Press Start 2P', monospace; color: #ffd22e;
        text-shadow: 1px 1px 0 #000; margin-bottom: 2px; letter-spacing: 0.5px;
    }
    .emote-btn {
        width: 32px; height: 32px;
        font-size: 16px; line-height: 1;
        background: rgba(10, 5, 24, 0.88);
        border: none;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.15),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px var(--yellow),
            2px 2px 0 #000;
        cursor: pointer; padding: 0;
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.08s;
    }
    .emote-btn:active {
        transform: translate(2px, 2px);
        box-shadow: inset 0 2px 0 rgba(255,255,255,0.15), inset 0 -2px 0 rgba(0,0,0,0.5), 0 0 0 2px var(--yellow);
    }
    .emote-btn.vip-emote {
        border: none;
        background: rgba(28, 16, 4, 0.92);
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.25),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px #ffd22e,
            0 0 8px rgba(255,210,46,0.5),
            2px 2px 0 #000;
    }

    .floating-emote {
        position: absolute; font-size: 36px; pointer-events: none;
        z-index: 15; animation: floatUp 1.8s ease-out forwards;
        text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 0 0 20px rgba(255, 210, 63, 0.8);
    }
    @keyframes floatUp {
        0% { transform: translateY(0) scale(0.3); opacity: 0; }
        20% { transform: translateY(-20px) scale(1.3); opacity: 1; }
        80% { opacity: 1; }
        100% { transform: translateY(-180px) scale(1); opacity: 0; }
    }
    .floating-emote.vip-floating {
        filter: drop-shadow(0 0 12px #ffd22e);
    }

    .modal {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(5, 5, 10, 0.9);
        display: none; justify-content: center; align-items: center;
        padding: 20px; z-index: 100;
    }
    .modal.active { display: flex; }
    .modal-box {
        background: var(--bg-panel-2);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--pink),
            8px 8px 0 #000,
            0 0 40px rgba(245, 75, 122, 0.5);
        padding: 20px 16px; width: 100%; max-width: 350px; text-align: center;
        max-height: 520px; overflow-y: auto; box-sizing: border-box; scrollbar-width: thin;
    }
    .modal-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 13px; letter-spacing: 2px;
        color: var(--pink);
        text-shadow: 2px 2px 0 #000, 4px 4px 0 #5a0020;
        margin-bottom: 16px; text-transform: uppercase;
    }
    .modal-text {
        font-family: 'VT323', monospace;
        font-size: 16px; line-height: 1.5;
        color: #c8c8d8; margin-bottom: 20px;
    }
    .modal-text b { color: var(--yellow); font-weight: 400; }
    .modal-buttons { display: flex; gap: 10px; }
    .modal-btn {
        flex: 1; padding: 14px 8px;
        font-family: 'Press Start 2P', monospace;
        font-size: 8px; letter-spacing: 1px; text-transform: uppercase;
        color: #fff; border: none; cursor: pointer;
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .modal-btn:active { transform: translateY(3px); }
    .modal-btn-cancel {
        background: #57606f;
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.15),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 3px 0 #2a2a3e,
            0 6px 0 rgba(0,0,0,0.6);
    }
    .modal-btn-cancel:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.15), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 #2a2a3e;
    }
    .modal-btn-confirm {
        background: linear-gradient(180deg, #ff6b8a 0%, var(--pink) 100%);
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.35),
            inset 0 -3px 0 rgba(0,0,0,0.4),
            0 3px 0 var(--pink-dark),
            0 6px 0 rgba(0,0,0,0.6);
    }
    .modal-btn-confirm:active {
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -3px 0 rgba(0,0,0,0.4), 0 0 0 var(--pink-dark);
    }

    .result-modal {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(5, 5, 10, 0.95);
        display: none; justify-content: center; align-items: center;
        padding: 20px; z-index: 200;
    }
    .result-modal.active { display: flex; }
    .result-box {
        background: var(--bg-panel-2);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--yellow),
            8px 8px 0 #000,
            0 0 40px rgba(255, 210, 63, 0.5);
        padding: 26px 20px; width: 100%; max-width: 340px; text-align: center;
    }
    .result-box.win {
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--green),
            8px 8px 0 #000,
            0 0 40px rgba(10, 224, 168, 0.6);
    }
    .result-box.lose {
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--pink),
            8px 8px 0 #000,
            0 0 40px rgba(245, 75, 122, 0.6);
    }
    .result-box.draw {
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.1),
            0 0 0 4px var(--yellow),
            8px 8px 0 #000,
            0 0 40px rgba(255, 210, 63, 0.6);
    }
    .result-title {
        font-family: 'Press Start 2P', monospace;
        font-size: 14px; letter-spacing: 2px;
        margin-bottom: 16px; text-transform: uppercase;
        color: var(--yellow);
        text-shadow: 2px 2px 0 #000, 4px 4px 0 #7a3f00;
    }
    .result-box.win .result-title { color: var(--green); text-shadow: 2px 2px 0 #000, 4px 4px 0 #025b44; }
    .result-box.lose .result-title { color: var(--pink); text-shadow: 2px 2px 0 #000, 4px 4px 0 #5a0020; }
    .result-box.draw .result-title { color: var(--yellow); }
    .result-sub {
        font-family: 'VT323', monospace;
        font-size: 15px; color: var(--text-dim);
        margin-bottom: 20px;
    }
    .result-stat {
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
        padding: 12px 10px;
        margin: 8px 0;
        background: var(--bg-deep);
        box-shadow:
            inset 0 0 0 1px #3a3a5e,
            inset 0 2px 0 rgba(255,255,255,0.05);
        letter-spacing: 1px;
        color: #fff;
    }
    .rematch-info {
        font-family: 'VT323', monospace;
        font-size: 14px; color: var(--purple-light);
        text-align: center; margin-top: 12px;
        min-height: 16px; line-height: 1.4;
    }
    .result-btn {
        margin-top: 18px; padding: 14px 16px;
        font-family: 'Press Start 2P', monospace;
        font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
        color: #1a1a2e;
        background: linear-gradient(180deg, #fff0a8 0%, var(--yellow) 100%);
        border: none; cursor: pointer;
        box-shadow:
            inset 0 3px 0 rgba(255,255,255,0.7),
            inset 0 -3px 0 rgba(140, 100, 0, 0.4),
            0 4px 0 var(--yellow-dark),
            0 8px 0 rgba(0,0,0,0.5);
        transition: transform 0.08s, box-shadow 0.08s;
    }
    .result-btn:active {
        transform: translateY(4px);
        box-shadow: inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -3px 0 rgba(140, 100, 0, 0.4), 0 0 0 var(--yellow-dark);
    }
    .result-btn:disabled { opacity: 0.55; cursor: default; }

    .rating-row {
        display: grid; grid-template-columns: 34px 34px 1fr 42px 52px 56px; gap: 4px;
        align-items: center;
        padding: 10px 8px;
        background: var(--bg-panel);
        box-shadow: inset 0 0 0 1px #3a3a5e, 2px 2px 0 #000;
        margin-bottom: 5px;
        font-family: 'VT323', monospace;
        font-size: 15px;
        width: 100%; cursor: pointer;
        transition: filter 0.1s;
    }
    .rating-row:hover { filter: brightness(1.15); }
    .rating-row.header {
        background: var(--yellow);
        color: #1a1a2e;
        font-family: 'Press Start 2P', monospace;
        font-size: 7px;
        text-transform: uppercase;
        cursor: default;
        box-shadow: inset 0 0 0 1px #1a1a2e, 2px 2px 0 #000;
    }
    .rating-row.header:hover { filter: none; }
    .rating-row.me {
        background: #0a3d2a;
        box-shadow: inset 0 0 0 2px var(--green), 2px 2px 0 #000;
    }
    .rating-place {
        font-family: 'Press Start 2P', monospace;
        font-size: 10px;
        color: var(--yellow); text-align: center;
    }
    .rating-row.header .rating-place { color: #1a1a2e; }
    .rating-flag { text-align: center; font-size: 16px; }
    .rating-name {
        color: #fff;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rating-row.header .rating-name { color: #1a1a2e; }
    .rating-cell { text-align: center; font-family: 'Press Start 2P', monospace; font-size: 9px; }
    .rating-cell.wins { color: var(--green); }
    .rating-cell.kick { color: var(--yellow); }
    .rating-cell.save { color: var(--blue); }
    .rating-row.header .rating-cell { color: #1a1a2e; }

    .sort-buttons { display: flex; gap: 5px; width: 100%; margin-bottom: 14px; z-index: 2; }
    .sort-btn {
        flex: 1; padding: 10px 4px;
        font-family: 'Press Start 2P', monospace;
        font-size: 7px; letter-spacing: 0.5px; text-transform: uppercase;
        color: var(--text-dim); background: var(--bg-panel);
        border: none;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.08),
            inset 0 -2px 0 rgba(0,0,0,0.5),
            0 0 0 2px #3a3a5e;
        cursor: pointer;
        transition: filter 0.1s;
    }
    .sort-btn:hover { filter: brightness(1.2); }
    .sort-btn.active {
        background: var(--yellow);
        color: #1a1a2e;
        box-shadow:
            inset 0 2px 0 rgba(255,255,255,0.6),
            inset 0 -2px 0 rgba(140, 100, 0, 0.4),
            0 0 0 2px #1a1a2e;
    }

    #inviteLinkInput {
        width: 100%; padding: 10px;
        background: var(--bg-deep);
        border: none;
        box-shadow: inset 0 0 0 2px #3a3a5e;
        color: var(--yellow);
        font-family: 'VT323', monospace;
        font-size: 14px;
        text-align: center;
        margin-top: 8px;
    }

    .history-row {
        display: grid; grid-template-columns: 38px 1fr 72px 82px; gap: 6px;
        align-items: center; padding: 10px 8px;
        background: var(--bg-panel);
        box-shadow: inset 0 0 0 1px #3a3a5e, 2px 2px 0 #000;
        margin-bottom: 5px;
        font-family: 'VT323', monospace;
        font-size: 14px;
        width: 100%;
    }
    .history-row.win { box-shadow: inset 0 0 0 2px var(--green), 2px 2px 0 #000; background: #0a3d2a; }
    .history-row.lose { box-shadow: inset 0 0 0 2px var(--pink), 2px 2px 0 #000; background: #3d0a1e; }
    .history-row.draw { box-shadow: inset 0 0 0 2px var(--yellow), 2px 2px 0 #000; background: #3d3510; }
    .history-result { text-align: center; font-size: 18px; }
    .history-opponent {
        color: #fff;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        display: flex; align-items: center; gap: 4px;
    }
    .history-score {
        text-align: center; color: var(--yellow);
        font-family: 'Press Start 2P', monospace;
        font-size: 9px;
    }
    .history-coins { text-align: center; color: var(--green); font-size: 13px; }

    .profile-big-card {
        width: 90%; padding: 18px;
        background: linear-gradient(180deg, rgba(36, 21, 72, 0.95) 0%, rgba(20, 8, 42, 0.98) 100%);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,0.08),
            0 0 0 3px var(--yellow),
            6px 6px 0 #000,
            0 0 30px rgba(255, 210, 63, 0.4);
        margin-bottom: 16px; z-index: 2;
    }
    .profile-big-header {
        display: flex; align-items: center; gap: 14px;
        margin-bottom: 16px; padding-bottom: 14px;
        position: relative;
    }
    .profile-big-header::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 4px;
        background-image: repeating-linear-gradient(90deg, #3a3a5e 0 6px, transparent 6px 12px);
    }
    .profile-big-flag { font-size: 48px; filter: drop-shadow(3px 3px 0 #000); }
    .profile-big-info { flex: 1; min-width: 0; }
    .profile-big-name {
        font-family: 'Press Start 2P', monospace;
        font-size: 12px; color: #fff;
        letter-spacing: 1px; text-shadow: 2px 2px 0 #000;
        margin-bottom: 8px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .profile-big-level {
        font-family: 'VT323', monospace;
        font-size: 16px;
        color: var(--yellow);
    }

    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-deep); }
    ::-webkit-scrollbar-thumb { background: #3a3a5e; box-shadow: inset 0 0 0 1px #1a1a2e; }
    ::-webkit-scrollbar-thumb:hover { background: var(--purple); }

:root{--bg-deep:#07031a;--bg-panel:#170c38;--bg-panel-2:#221250;--purple:#8b5cf6;--purple-light:#c4a1ff;--yellow:#ffe14d;--pink:#ff4f8b;--green:#19f0b4;--blue:#52d6ff;}
.screen{background-image:radial-gradient(ellipse at 50% -10%,rgba(139,92,246,.45),transparent 60%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,16px 16px,16px 16px}
.hero-title{text-shadow:0 2px 0 #a3245a,0 4px 0 #4a0f33,0 0 22px rgba(255,79,139,.65)}
.profile-card,.shop-item,.modal-box,.result-modal,.profile-big-card{background-image:linear-gradient(180deg,rgba(196,161,255,.16),rgba(0,0,0,0) 55%,rgba(0,0,0,.25))}
.pixel-btn,.shop-btn,.result-btn,.modal-btn,.back-btn,.emote-btn,.sort-btn{background-image:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 50%,rgba(0,0,0,.22))}
.pixel-btn{text-shadow:0 2px 0 rgba(0,0,0,.35)}
#eventBanner{position:absolute;left:0;right:0;top:38%;text-align:center;pointer-events:none;opacity:0;z-index:60}
#eventBanner.show{animation:ebPop 1.9s ease-out forwards}
#eventBanner .t{font-family:'Press Start 2P',monospace;font-size:30px;line-height:1.2;letter-spacing:2px;text-shadow:3px 0 #12081f,-3px 0 #12081f,0 3px #12081f,0 -3px #12081f,0 6px 0 #12081f,0 0 28px currentColor}
#eventBanner .s{font-family:'VT323',monospace;font-size:24px;margin-top:10px;color:#fff;text-shadow:2px 2px 0 #12081f;letter-spacing:2px}
#eventBanner.goal .t{color:#ffe14d}#eventBanner.save .t{color:#52d6ff}
@keyframes ebPop{0%{opacity:0;transform:scale(.3) rotate(-5deg)}12%{opacity:1;transform:scale(1.25) rotate(3deg)}24%{transform:scale(1) rotate(0)}82%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08) translateY(-10px)}}
#nameInput{width:100%;margin:8px 0 14px;padding:10px;background:#0d0820;border:3px solid #8b5cf6;color:#fff;font-family:'Press Start 2P',monospace;font-size:12px;text-align:center;outline:none}

/* ===== v9: контраст, меню, магазин, донат ===== */
:root{--text-dim:#c4c4e0;--line:#5b4fa8}

/* --- кнопки: читаемый текст на каждом цвете --- */
.pixel-btn{text-shadow:0 2px 0 rgba(0,0,0,.45)}
.pixel-btn.blue{background-color:#2563eb}
.pixel-btn.purple{background-color:#7c3aed}
.pixel-btn.orange{color:#1a0f00;text-shadow:1px 1px 0 rgba(255,255,255,.35)}
.pixel-btn.gold,.pixel-btn.green{text-shadow:1px 1px 0 rgba(255,255,255,.3)}
.pixel-btn.big{font-size:15px;padding:20px 12px;letter-spacing:2px}
.sort-btn,.pixel-tab{color:#d6d6ee}
.sort-btn.active,.pixel-tab.active{color:#1a1a2e}
#soundToggle{opacity:.9}
#soundToggle.muted{color:#a9a9d0}

/* --- общая рамка панелей и таблиц: заметнее --- */
.shop-item,.rating-row,.history-row,.career-hall-row,.flag-option{box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000}
.rating-row.me,.career-hall-row.me{box-shadow:inset 0 0 0 2px var(--green),3px 3px 0 #000}
.history-row.win{box-shadow:inset 0 0 0 2px var(--green),3px 3px 0 #000}
.history-row.lose{box-shadow:inset 0 0 0 2px var(--pink),3px 3px 0 #000}
.history-row.draw{box-shadow:inset 0 0 0 2px var(--yellow),3px 3px 0 #000}
.stat-row::after{background-image:repeating-linear-gradient(90deg,#5b4fa8 0 4px,transparent 4px 8px)}

/* --- мелкие шрифты крупнее --- */
.stat-label{color:#d6d6ee;font-size:18px}
.profile-card .profile-xp-text{font-size:14px;color:#d9c6ff}
.profile-card .profile-level{font-size:9px}
.country-current .country-name{font-size:9px}
.flag-option .flag-name{font-size:12px;color:#d6d6ee}
.modal-btn{font-size:9px}
.sort-btn{font-size:8px}
.rating-row{font-size:17px;grid-template-columns:30px 30px 1fr 46px 56px 56px}
.rating-row.header{font-size:8px}
.rating-cell{font-size:10px}
.history-row{font-size:16px}
.history-score{font-size:10px}
.history-coins{font-size:15px}
.career-hall-stats{font-size:14px;color:#d6d6ee}
.career-hall-name{font-size:10px}

/* --- магазин --- */
.pixel-tab{font-size:7.5px;padding:10px 2px;letter-spacing:0;box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 2px var(--line)}
.pixel-tab.active{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(140,100,0,.4),0 0 0 2px #1a1a2e}
.item-name{font-size:10px;margin-bottom:7px;letter-spacing:.5px}
.item-name .lvl-tag{font-size:9px;margin-left:6px;color:#d6d6ee}
.item-desc{font-size:16px;line-height:1.1;color:#dcdcf2}
.shop-btn{font-size:9px;padding:10px 12px;min-width:86px}
.shop-btn.equipped{background:#4a5570;color:#fff;text-shadow:none}
.shop-item.locked .item-emoji{filter:grayscale(.7) brightness(.85)}
.shop-item.locked .item-name .lvl-tag{color:#ff9fbd}
.shop-item.locked .item-desc{color:#ffb3c7}

.auth-input{width:100%;margin:8px 0;padding:12px;background:#0d0820;border:3px solid #8b5cf6;color:#fff;font-family:'VT323',monospace;font-size:22px;text-align:center;outline:none}
#authTabs{width:100%;margin:18px 0 8px}
#authError{min-height:24px;margin:4px 0 8px;color:#ff8aa0;font-family:'VT323',monospace;font-size:18px;text-align:center}
#authSubmit{width:100%;margin-top:6px}
#logoutRow[hidden]{display:none !important}
.donate-entry{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;margin:0 0 12px;border:none;cursor:pointer;z-index:2;text-align:left;
  font-family:'Press Start 2P',monospace;color:#1a1a2e;
  background:linear-gradient(180deg,#ffe98a 0%,#ffc531 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(140,90,0,.45),0 0 0 2px #1a1a2e,4px 4px 0 #000;
  transition:transform .08s,box-shadow .08s}
.donate-entry:active{transform:translate(3px,3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(140,90,0,.45),0 0 0 2px #1a1a2e,0 0 0 #000}
.donate-entry .de-ico{font-size:28px;line-height:1}
.donate-entry .de-txt{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.donate-entry .de-txt b{font-size:10px;font-weight:400;letter-spacing:.5px}
.donate-entry .de-txt small{font-family:'VT323',monospace;font-size:16px;color:#3a2a00;letter-spacing:.3px}
.donate-entry .de-arrow{font-size:22px;line-height:1}

/* --- экран доната --- */
.donate-lead{width:100%;font-family:'VT323',monospace;font-size:18px;line-height:1.2;color:#e6e6f5;text-align:center;margin-bottom:16px;z-index:2}
.pack{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;margin-bottom:12px;z-index:2;
  background:linear-gradient(180deg,rgba(36,21,72,.95),rgba(20,8,42,.98));
  box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 #000}
.pack.best{box-shadow:inset 0 0 0 2px var(--yellow),4px 4px 0 #000}
.pack-ico{width:46px;font-size:30px;text-align:center;line-height:1}
.pack-info{flex:1;min-width:0}
.pack-coins{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--yellow);margin-bottom:7px}
.pack-bonus{font-family:'VT323',monospace;font-size:17px;color:#7dffd6}
.pack-tag{position:absolute;top:-9px;right:10px;padding:4px 6px;background:var(--yellow);color:#1a1a2e;font-family:'Press Start 2P',monospace;font-size:7px;box-shadow:0 0 0 2px #1a1a2e}
.pack-btn{flex-shrink:0;padding:11px 12px;border:none;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:10px;color:#1a1a2e;
  background:linear-gradient(180deg,#fff0a8,#ffe14d);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(140,100,0,.4),0 3px 0 var(--yellow-dark),0 5px 0 rgba(0,0,0,.6);
  transition:transform .08s,box-shadow .08s}
.pack-btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 0 0 var(--yellow-dark)}
.pack-btn:disabled{background:#4a5570;color:#fff;box-shadow:0 3px 0 #1a1a2e;cursor:default}
.pack.starter-card{background:linear-gradient(135deg,#2a0c1e,#150728);box-shadow:inset 0 0 0 2px #ff3b68,0 0 16px rgba(255,59,104,.35),3px 3px 0 #000}
.pack.starter-card.claimed{opacity:.6;box-shadow:inset 0 0 0 1px #4a37b0,2px 2px 0 #000}
.starter-tag{background:linear-gradient(90deg,#ff3b68,#ff7700);color:#fff;box-shadow:0 0 0 2px #000}
.starter-btn{background:linear-gradient(180deg,#ff5a7a,#e21b23);color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.6);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #8b0a16,0 5px 0 rgba(0,0,0,.6)}
.pack.vip-card{background:linear-gradient(135deg,#241804,#120d2a);box-shadow:inset 0 0 0 2px #ffd22e,0 0 18px rgba(255,210,46,.45),3px 3px 0 #000}
.pack.vip-card.active-vip{box-shadow:inset 0 0 0 2px #2ee6a8,0 0 20px rgba(46,230,168,.4),3px 3px 0 #000}
.vip-tag{background:linear-gradient(90deg,#ffe14d,#ff9900);color:#1a1000;box-shadow:0 0 0 2px #000}
.vip-btn{background:linear-gradient(180deg,#ffe14d,#f59e0b);color:#241200;text-shadow:none;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #b45309,2px 2px 0 #000}
.donate-note{width:100%;font-family:'VT323',monospace;font-size:16px;line-height:1.2;color:var(--text-dim);text-align:center;margin-top:2px;z-index:2}
.donate-note.warn{color:#ffb3c7}

/* --- главное меню --- */
#menuScreen{padding:14px 20px 14px}
#menuScreen .hero-title{margin:0 0 4px;padding:4px 0 0}
#menuScreen .hero-goal{width:230px;height:104px;top:0}
#menuScreen .hero-line1{font-size:32px}
#menuScreen .hero-line2{font-size:15px;margin-top:6px}
.menu-top{display:flex;align-items:stretch;gap:8px;width:100%;margin:8px 0 8px;z-index:2}
.menu-top .profile-card{flex:1;width:auto;min-width:0;margin:0}
.coin-pill{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:0 8px 0 10px;border:none;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:10px;color:#1a1a2e;
  background:linear-gradient(180deg,#fff0a8 0%,var(--yellow) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(140,100,0,.4),0 0 0 2px #1a1a2e,4px 4px 0 #000;
  transition:transform .08s,box-shadow .08s}
.coin-pill:active{transform:translate(3px,3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 0 0 2px #1a1a2e,0 0 0 #000}
.coin-pill .cp-ico{font-size:16px;line-height:1}
.coin-pill b{font-weight:400}
.coin-pill .cp-plus{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:#0a3d2a;color:#fff;font-size:12px;box-shadow:0 0 0 2px #1a1a2e}
#menuScreen #onlinePanel{width:100%;margin-bottom:10px;font-size:15px;color:#e6e6f5}
#menuScreen .pixel-btn{width:100%;margin:5px 0}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin:8px 0 10px;z-index:2}
.menu-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:13px 4px 11px;border:none;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;letter-spacing:.5px;
  background:var(--bg-panel-2);
  box-shadow:inset 0 0 0 2px var(--accent),inset 0 3px 0 rgba(255,255,255,.12),0 4px 0 #000;
  transition:transform .08s,box-shadow .08s,filter .08s}
.menu-tile:hover{filter:brightness(1.15)}
.menu-tile:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--accent),inset 0 3px 0 rgba(255,255,255,.12),0 1px 0 #000}
.menu-tile .mt-ico{font-size:24px;line-height:1;color:var(--accent);text-shadow:2px 2px 0 #000}
.t-orange{--accent:#ff9f2e}.t-gold{--accent:#ffe14d}.t-purple{--accent:#b98cff}
#menuScreen .country-picker{width:100%;margin-bottom:0}

/* фикс: общий background-image перебивал градиент-заливку, и у этих кнопок не оставалось цвета фона */
.shop-btn{background-color:#19f0b4;color:#06241b;font-size:10px;text-shadow:none}
.shop-btn.equip,.result-btn{background-color:#ffe14d;color:#1a1a2e}
.shop-btn.equipped{background-color:#4a5570;color:#fff}
.modal-btn-confirm{background-color:#ff4f8b}
.modal-btn-cancel{background-color:#57606f}
/* --- фикс v2: потерянные заливки и светлый текст на светлом --- */
.profile-card,.shop-item,.profile-big-card{background-color:#1d1044}
.modal-box{background-color:#241548}
#opponentJoinedToast{background-color:#087a58;background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%,rgba(0,0,0,.2));color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.55)}
#opponentJoinedToast .small{color:#eafff4}
#searchPanel .search-cancel-btn,#surrenderBtn,.modal-btn-confirm{background-color:#c92a63;background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 50%,rgba(0,0,0,.22));color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.modal-btn-cancel{color:#fff}
#onlinePanel .online-sep{color:#b79cff}
#scoreBar{bottom:24px}
#score{padding:6px 12px}
/* ===== карьера v2: звёзды, боссы, лиги ===== */
.career-sum{width:100%;padding:12px;margin-bottom:12px;z-index:2;background:#1d1044;background-image:linear-gradient(180deg,rgba(196,161,255,.16),rgba(0,0,0,0) 55%,rgba(0,0,0,.25));box-shadow:inset 0 0 0 2px var(--line),4px 4px 0 #000}
.cs-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-family:'Press Start 2P',monospace}
.cs-top .cs-lbl{font-size:9px;color:#e6e6f5}
.cs-top .cs-val{font-size:13px;color:var(--yellow);text-shadow:2px 2px 0 #000}
.cs-bar{position:relative;height:12px;background:#07031a;box-shadow:inset 0 0 0 2px #000;margin-bottom:8px}
.cs-fill{height:100%;background:linear-gradient(180deg,#fff0a8,#ffb800);box-shadow:inset 0 2px 0 rgba(255,255,255,.5)}
.cs-chests{display:flex;justify-content:space-between;font-family:'VT323',monospace;font-size:15px;color:#e6e6f5}
.cs-chest{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px}
.cs-chest .ic{font-size:20px;line-height:1}
.cs-chest.got .ic{filter:none}.cs-chest:not(.got) .ic{filter:grayscale(1) brightness(.8)}
.cs-chest.got{color:#7dffd6}
.cs-next{margin-top:8px;font-family:'VT323',monospace;font-size:16px;color:#e6e6f5;text-align:center}
.league-h{width:100%;margin:6px 0 8px;font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;letter-spacing:1px;z-index:2;display:flex;align-items:center;gap:8px}
.league-h::before,.league-h::after{content:'';flex:1;height:3px;background-image:repeating-linear-gradient(90deg,#5b4fa8 0 6px,transparent 6px 10px)}
.career-row{display:grid;grid-template-columns:26px 34px 1fr 74px;gap:8px;align-items:center;width:100%;padding:10px 10px;margin-bottom:8px;z-index:2;background:#1d1044;box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000;cursor:pointer;transition:filter .1s,transform .08s;color:#fff}
.career-row:hover{filter:brightness(1.15)}
.career-row:active{transform:translate(2px,2px)}
.career-row.done{box-shadow:inset 0 0 0 2px var(--green),3px 3px 0 #000;background:#0e3a2d}
.career-row.cur{box-shadow:inset 0 0 0 3px var(--yellow),3px 3px 0 #000;background:#2a1a5c;animation:curPulse 1.6s steps(2,end) infinite}
.career-row.boss{box-shadow:inset 0 0 0 3px #ff4f8b,3px 3px 0 #000,0 0 18px rgba(255,79,139,.55);background:#3a1040}
.career-row.boss.done{box-shadow:inset 0 0 0 3px var(--green),3px 3px 0 #000,0 0 18px rgba(25,240,180,.45);background:#0e3a2d}
.career-row.lock{cursor:default;background:#171236;filter:grayscale(.6)}
.career-row.lock:hover{filter:grayscale(.6)}
@keyframes curPulse{0%,100%{box-shadow:inset 0 0 0 3px var(--yellow),3px 3px 0 #000}50%{box-shadow:inset 0 0 0 3px #fff3a0,3px 3px 0 #000,0 0 14px rgba(255,225,77,.6)}}
.cr-num{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--yellow);text-align:center}
.cr-flag{font-size:26px;text-align:center;filter:drop-shadow(2px 2px 0 #000)}
.cr-main{min-width:0}
.cr-name{font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-sub{font-family:'VT323',monospace;font-size:15px;color:#e6e6f5;line-height:1.05}
.cr-sub b{font-weight:400;color:var(--yellow)}
.boss-tag{display:inline-block;margin-right:6px;padding:2px 5px;background:#c92a63;color:#fff;font-family:'Press Start 2P',monospace;font-size:7px;vertical-align:1px;box-shadow:0 0 0 1px #000}
.cr-right{text-align:center;font-family:'Press Start 2P',monospace}
.stars{font-size:15px;letter-spacing:1px;line-height:1;text-shadow:1px 1px 0 #000}
.stars .on{color:#ffe14d}.stars .off{color:#8f86c4}
.cr-st{margin-top:5px;font-family:'VT323',monospace;font-size:14px;color:#e6e6f5}
/* окно перед матчем */
.boss-badge{display:inline-block;margin:0 0 10px;padding:6px 10px;background:#c92a63;color:#fff;font-family:'Press Start 2P',monospace;font-size:9px;box-shadow:0 0 0 2px #000,0 0 18px rgba(255,79,139,.8)}
.boss-rule{margin:10px 0 4px;padding:10px;background:#3a1040;box-shadow:inset 0 0 0 2px #ff4f8b;font-family:'VT323',monospace;font-size:18px;line-height:1.1;color:#fff;text-align:center}
.star-rules{margin:12px 0 14px;text-align:left;font-family:'VT323',monospace;font-size:17px;line-height:1.25;color:#e6e6f5}
.star-rules div{display:flex;align-items:center;gap:8px}
.star-rules .st{color:#ffe14d;min-width:50px;letter-spacing:1px;text-shadow:1px 1px 0 #000}
/* окно после матча */
.cr-stars{display:flex;justify-content:center;gap:8px;margin:6px 0 6px;font-size:40px;line-height:1;text-shadow:3px 3px 0 #000}
.cr-stars .s{color:#8f86c4;transform:scale(.4);opacity:0}
.cr-stars .s.on{color:#ffe14d;animation:starPop .5s steps(5,end) forwards}
.cr-stars .s.off{opacity:1;transform:scale(1)}
@keyframes starPop{0%{transform:scale(.2) rotate(-30deg);opacity:0}70%{transform:scale(1.35) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.cr-gain{font-family:'Press Start 2P',monospace;font-size:9px;color:#7dffd6;margin-bottom:6px;min-height:12px}
.cr-extra{width:100%;margin-top:10px}
.cr-prize{margin-top:6px;padding:8px 10px;background:#3d3510;box-shadow:inset 0 0 0 2px var(--yellow);font-family:'VT323',monospace;font-size:18px;color:#fff;text-align:center;line-height:1.1}
.cr-hint{width:100%;margin-top:12px;padding:10px;background:#12304a;box-shadow:inset 0 0 0 2px #52d6ff;font-family:'VT323',monospace;font-size:18px;line-height:1.1;color:#fff;text-align:left}
.cr-hint b{font-weight:400;color:#52d6ff}

/* PIXEL PENALTY DUEL — MAIN MENU V3 (по эскизу). ID и JS-хуки сохранены. */
#menuScreen{position:absolute;padding:0;overflow:hidden;display:none;background:#070722}
#menuScreen.active{display:block}
body:has(.screen.active) #soundToggle{display:none!important}
#menuScreen .v3-sky{position:absolute;left:0;right:0;top:0;height:352px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,rgba(255,79,200,.35),transparent 55%),linear-gradient(180deg,#0a0a3c 0%,#1d1060 45%,#3a1470 72%,#0d0a30 100%)}
#menuScreen .v3-stars{position:absolute;left:0;top:0;width:3px;height:3px;background:#fff;
  box-shadow:40px 30px #fff,95px 70px #9fe8ff,150px 24px #fff,210px 60px #ffd1f2,265px 20px #fff,320px 52px #9fe8ff,370px 28px #fff,70px 120px #fff,340px 118px #ffd1f2,20px 90px #9fe8ff,385px 88px #fff,130px 150px #fff,290px 140px #fff}
#menuScreen .v3-light{position:absolute;top:150px;width:46px;height:58px;z-index:2;background:
  radial-gradient(circle,#fff 0 28%,transparent 30%) 0 0/15px 15px,#bff3ff;box-shadow:0 0 14px #fff,0 0 40px #52d6ff;border:3px solid #1a2060}
#menuScreen .v3-light.l{left:14px}#menuScreen .v3-light.r{right:14px}
#menuScreen .v3-stands{position:absolute;left:0;right:0;top:218px;height:50px;
  background:radial-gradient(circle,#ff5aa8 0 1.5px,transparent 2px) 0 0/8px 8px,radial-gradient(circle,#52d6ff 0 1.5px,transparent 2px) 4px 4px/8px 8px,linear-gradient(180deg,#2a1a6e,#150d46);
  border-top:3px solid #6a4bd8;box-shadow:0 -10px 30px rgba(120,80,255,.4)}
#menuScreen .v3-field{position:absolute;left:0;right:0;top:268px;bottom:0;
  background:repeating-linear-gradient(90deg,#0f9a4a 0 36px,#0b8040 36px 72px);border-top:3px solid #7dffb0}
#menuScreen .v3-goal{position:absolute;left:50%;top:232px;width:118px;height:44px;margin-left:-59px;z-index:3;
  background:linear-gradient(rgba(255,255,255,.45) 1px,transparent 1px) 0 0/8px 8px,linear-gradient(90deg,rgba(255,255,255,.45) 1px,transparent 1px) 0 0/8px 8px,rgba(10,10,40,.55);
  border:4px solid #fff;border-bottom:0;box-shadow:0 0 12px rgba(255,255,255,.5)}
#menuScreen .v3-ball{position:absolute;left:50%;top:312px;width:22px;height:22px;margin-left:-11px;z-index:6;
  background:radial-gradient(circle at 50% 50%,#10152f 0 3px,#fff 4px);border:3px solid #10152f;box-shadow:0 0 12px rgba(255,255,255,.8),0 5px 0 rgba(0,0,0,.4)}
#menuScreen .v3-fade{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,transparent,#070722)}
#menuScreen .v3-pl{position:absolute;top:246px;width:60px;height:96px;z-index:5;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6))}
#menuScreen .v3-pl.red{left:56px}#menuScreen .v3-pl.blue{right:56px}
#menuScreen .v3-pl i,#menuScreen .v3-pl b{position:absolute;display:block}
#menuScreen .v3-pl .hr{left:12px;top:0;width:36px;height:16px;background:#3a1d12}
#menuScreen .v3-pl.blue .hr{background:#d0701e}
#menuScreen .v3-pl .hd{left:14px;top:10px;width:32px;height:28px;background:#ffb98a;box-shadow:inset -6px 0 #d98a5e}
#menuScreen .v3-pl .bd{left:5px;top:38px;width:50px;height:30px;background:#d8284c;box-shadow:inset 0 -6px #9a1a38,inset 5px 0 #ff5a7a;
  font:13px/26px 'Press Start 2P',monospace;color:#fff;text-align:center;text-shadow:2px 2px 0 #000}
#menuScreen .v3-pl.blue .bd{background:#2a7cff;box-shadow:inset 0 -6px #1550b8,inset 5px 0 #5aa0ff}
#menuScreen .v3-pl .sh{left:10px;top:68px;width:40px;height:12px;background:#f4f4ff}
#menuScreen .v3-pl .lg{top:80px;width:14px;height:16px;background:#ffb98a;border-bottom:6px solid #222}
#menuScreen .v3-pl .lg.a{left:12px}#menuScreen .v3-pl .lg.b{right:12px}

#menuScreen .menu-top{position:absolute;left:10px;right:10px;width:auto;top:8px;height:46px;display:flex;gap:8px;z-index:8;margin:0}
#menuScreen .profile-card{flex:1;min-width:0;height:46px;padding:5px 8px;display:flex;align-items:center;gap:8px;border-radius:0;
  background:linear-gradient(180deg,rgba(40,24,110,.92),rgba(14,10,52,.92));box-shadow:inset 0 0 0 2px #7a4fd0,3px 3px 0 #000;cursor:pointer;position:relative}
#menuScreen .profile-card.has-unspent-skills{box-shadow:inset 0 0 0 2px #ffd22e,0 0 16px rgba(255,210,46,0.6),3px 3px 0 #000;animation:pulseCardSkills 1.2s infinite alternate}
@keyframes pulseCardSkills {
  from { filter: drop-shadow(0 0 4px #ffd22e); }
  to { filter: drop-shadow(0 0 10px #ffe14d); }
}
.skill-pts-pip{display:inline-flex;align-items:center;font:7px 'Press Start 2P',monospace;background:linear-gradient(180deg,#ffe14d,#f59e0b);color:#1a0f00;padding:2px 4px;margin-left:4px;border-radius:2px;box-shadow:0 0 8px rgba(255,225,77,.8);animation:pulseSkillPip .7s infinite alternate}
@keyframes pulseSkillPip{from{transform:scale(1)}to{transform:scale(1.12)}}
#menuScreen .profile-flag{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;background:#1a1050;border:2px solid #c088ff;border-radius:50%}
#menuScreen .profile-info-block{flex:1;min-width:0}
#menuScreen .profile-name{font:9px 'Press Start 2P',monospace;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px;display:flex;align-items:center}
#menuScreen .v3-lvlrow{display:flex;align-items:center;gap:6px}
#menuScreen .profile-level{font:7px 'Press Start 2P',monospace;padding:3px 4px;background:#ffb020;color:#2a1500;flex:none}
#menuScreen .profile-xp-bar{flex:1;height:6px;margin:0;background:#0a0830;border:1px solid #3a6aff}
#menuScreen .profile-xp-text{display:none}
#menuScreen .v3-cur{width:112px;flex:none;display:flex;flex-direction:column;gap:4px}
#menuScreen .coin-pill{height:21px;width:100%;padding:0 3px 0 6px;display:flex;align-items:center;gap:5px;background:linear-gradient(180deg,#2a2070,#150f46);color:#fff;border:0;border-radius:0;
  box-shadow:inset 0 0 0 2px #7a4fd0,2px 2px 0 #000;cursor:pointer}
#menuScreen .coin-pill .cp-ico{font-size:12px}
#menuScreen .coin-pill b{flex:1;text-align:right;font:12px 'Press Start 2P',monospace;color:#fff}
#menuScreen .coin-pill .cp-plus{width:15px;height:15px;line-height:14px;text-align:center;background:#2ee66b;color:#052a12;font:700 14px/14px 'VT323',monospace;box-shadow:inset 0 -2px rgba(0,0,0,.3)}

#menuScreen .v3-logo{position:absolute;left:0;right:0;top:56px;text-align:center;z-index:7;pointer-events:none;font-family:'Press Start 2P',monospace}
#menuScreen .v3-crown{font-size:20px;line-height:22px;filter:drop-shadow(0 0 8px #ffd02e)}
#menuScreen .v3-l1{font-size:34px;line-height:38px;color:#fff;text-shadow:3px 0 #2a6cff,-3px 0 #2a6cff,0 3px #2a6cff,0 -3px #2a6cff,3px 3px #2a6cff,-3px -3px #2a6cff,3px -3px #2a6cff,-3px 3px #2a6cff,5px 7px 0 #000,0 0 18px rgba(82,214,255,.6)}
#menuScreen .v3-l2{font-size:37px;line-height:42px;color:#ffd22e;text-shadow:3px 0 #e05a00,-3px 0 #e05a00,0 3px #e05a00,0 -3px #e05a00,3px 3px #e05a00,-3px -3px #e05a00,3px -3px #e05a00,-3px 3px #e05a00,5px 7px 0 #000,0 0 20px rgba(255,180,40,.6)}
#menuScreen .v3-l3{font-size:30px;line-height:34px;font-style:italic;color:#ff3aa8;display:inline-block;transform:skewX(-10deg);text-shadow:3px 0 #8a0a6a,-3px 0 #8a0a6a,0 3px #8a0a6a,0 -3px #8a0a6a,5px 6px 0 #000,0 0 18px rgba(255,58,168,.7)}

#menuScreen .v3-buttons{position:absolute;left:34px;right:34px;top:336px;display:flex;flex-direction:column;gap:8px;z-index:8}
#menuScreen .v3-btn{position:relative;display:block;width:100%;height:38px;min-height:38px;margin:0;padding:0 36px;border:0;border-radius:0;cursor:pointer;
  font:12px/38px 'Press Start 2P',monospace;letter-spacing:2px;text-align:center;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.45);animation:none}
#menuScreen .v3-btn .ico{position:absolute;left:12px;top:0;font-size:20px;line-height:38px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4))}
#menuScreen .v3-btn .arr{position:absolute;right:14px;top:0;font-size:26px;line-height:34px}
#menuScreen .v3-btn:active{transform:translateY(3px)}
#menuScreen .v3-play,#menuScreen .v3-career,#menuScreen .v3-shop,#menuScreen .v3-set{background:linear-gradient(180deg,#9a6aff,#5a2fd0);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.3),0 4px 0 #36188f,0 7px 0 #000,0 0 14px rgba(143,92,255,.4)}
#menuScreen .v3-btn:hover{filter:brightness(1.12)}

/* ===== ПРОФИЛЬ: СУММАРНАЯ ПЛАШКА, 3 ВКЛАДКИ И ИНВЕНТАРЬ ===== */
.profile-summary-card {
  width: 100%; padding: 10px 12px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(36, 21, 72, 0.95) 0%, rgba(20, 8, 42, 0.98) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 3px var(--yellow), 3px 3px 0 #000, 0 0 20px rgba(255, 210, 63, 0.35);
  display: flex; align-items: center; gap: 10px; z-index: 2;
}
.profile-summary-card .profile-big-flag { font-size: 38px; filter: drop-shadow(2px 2px 0 #000); }
.profile-summary-card .profile-big-info { flex: 1; min-width: 0; }
.profile-summary-card .profile-big-name { font-family: 'Press Start 2P', monospace; font-size: 10px; color: #fff; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-card .profile-big-level { font-family: 'VT323', monospace; font-size: 16px; color: var(--yellow); }
.profile-edit-btn {
  font-family: 'Press Start 2P', monospace; font-size: 8px; padding: 7px 9px;
  background: #3a2a70; color: #fff; border: 2px solid #c4a1ff; cursor: pointer; box-shadow: 2px 2px 0 #000;
}
.profile-edit-btn:active { transform: translateY(2px); }

.profile-tabs { width: 100%; margin-bottom: 12px; z-index: 2; }
.profile-tabs .pixel-tab { font-size: 8px; padding: 10px 4px; }

.inv-filter-tabs {
  display: flex; gap: 4px; width: 100%; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; z-index: 2;
}
.inv-filter-tabs::-webkit-scrollbar { display: none; }
.inv-filter-btn {
  flex-shrink: 0; padding: 6px 8px; font: 8px 'Press Start 2P', monospace;
  background: #1a0f3a; color: var(--text-dim); border: 1px solid #5a3fc0; cursor: pointer; box-shadow: 2px 2px 0 #000;
}
.inv-filter-btn.active {
  background: var(--yellow); color: #1a1a2e; border-color: var(--yellow);
}
.inv-cat-tag {
  font: 7px 'Press Start 2P', monospace; color: #a8a8cc; background: rgba(255,255,255,0.08); padding: 2px 5px; margin-left: 6px; border-radius: 2px;
}
.shop-item.inv-item { margin-bottom: 8px; width: 100%; }
.shop-item.equipped-item { box-shadow: inset 0 0 0 2px #0ae0a8, 3px 3px 0 #000; }

#menuScreen .v3-bottom{position:absolute;left:10px;right:10px;top:536px;height:34px;display:grid;grid-template-columns:1.5fr 1fr 40px;gap:6px;z-index:8}
#menuScreen .v3-daily,#menuScreen .v3-tile{height:34px;background:rgba(13,12,52,.95);box-shadow:inset 0 0 0 2px #5a3fc0,3px 3px 0 #000;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:0;color:#fff;min-width:0}
#menuScreen .v3-daily .gift{font-size:20px}
#menuScreen .v3-daily .tx{display:flex;flex-direction:column;min-width:0}
#menuScreen .v3-daily b{font:6px 'Press Start 2P',monospace;white-space:nowrap}
#menuScreen .v3-daily small{font:15px/14px 'VT323',monospace;color:#2ee6a8;margin-top:2px}
#menuScreen .v3-tile{cursor:pointer;justify-content:center;font:7px 'Press Start 2P',monospace;color:#c088ff}
#menuScreen .v3-tile .ico{font-size:17px}
#menuScreen .v3-tile.hist{padding:0}
#menuScreen .v3-tile:active{transform:translateY(2px)}

#menuScreen .v3-foot{position:absolute;left:10px;right:10px;top:574px;height:22px;display:flex;gap:6px;z-index:9}
#menuScreen .country-picker{position:relative;flex:1.3;width:auto;margin:0}
#menuScreen .country-current{height:22px;width:100%;padding:0 6px;background:rgba(13,12,52,.95);box-shadow:inset 0 0 0 2px #3a2f90,2px 2px 0 #000}
#menuScreen .country-current .flag-big{font-size:14px}
#menuScreen .country-current .country-name{font-size:6px}
#menuScreen .country-current .arrow{font-size:7px}
#menuScreen #onlinePanel .online-item{font:7px 'Press Start 2P',monospace;color:#c8c8ff;white-space:nowrap}
#menuScreen #onlinePanel .online-item b{color:#2ee6a8}
#menuScreen #onlinePanel{flex:1;width:auto;height:22px;margin:0;padding:0 8px;display:flex;align-items:center;justify-content:center;background:rgba(13,12,52,.95);box-shadow:inset 0 0 0 2px #3a2f90,2px 2px 0 #000;font-size:14px}

.v3-setrow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px;background:#120a30;box-shadow:inset 0 0 0 2px #7a4fd0,3px 3px 0 #000;font:9px 'Press Start 2P',monospace;color:#fff}
.v3-setbtn{font:9px 'Press Start 2P',monospace;padding:9px 10px;border:0;cursor:pointer;color:#052a12;background:#2ee66b;box-shadow:inset 0 -3px rgba(0,0,0,.3),2px 2px 0 #000}
.v3-setbtn.off{background:#ff5a7a;color:#fff}

/* ===== SKIN V3: единый неоновый стиль для всех экранов, окон и матча ===== */
#gameContainer .screen:not(#menuScreen){padding:14px 14px 18px;background:
 radial-gradient(ellipse at 50% -8%,rgba(255,63,154,.28),transparent 55%),
 radial-gradient(ellipse at 50% 108%,rgba(46,230,107,.14),transparent 50%),
 linear-gradient(rgba(140,100,255,.07) 1px,transparent 1px) 0 0/16px 16px,
 linear-gradient(90deg,rgba(140,100,255,.07) 1px,transparent 1px) 0 0/16px 16px,
 linear-gradient(180deg,#0b0a3a 0%,#070722 100%)}
#gameContainer .screen-header{padding:8px 10px;margin-bottom:12px;background:linear-gradient(180deg,rgba(60,36,150,.96),rgba(20,12,70,.96));box-shadow:inset 0 0 0 2px #7a4fd0,3px 3px 0 #000}
#gameContainer .screen-header h2{font-size:12px;color:#ffd22e;text-shadow:2px 2px 0 #7a2a00,0 0 12px rgba(255,210,46,.5)}
#gameContainer .back-btn{color:#fff;background:linear-gradient(180deg,#8f5cff,#5a2fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 #36188f,0 5px 0 #000}
#gameContainer .coin-badge{padding:7px 9px;background:#0a0830;color:#ffd22e;font:10px 'Press Start 2P',monospace;box-shadow:inset 0 0 0 2px #ffb800,2px 2px 0 #000}

/* панели списков */
#gameContainer .shop-item,#gameContainer .history-row,#gameContainer .rating-row,#gameContainer .career-row,#gameContainer .career-hall-row,#gameContainer .pack,#gameContainer .profile-big-card,#gameContainer .career-sum,#gameContainer .flag-option{
 background:linear-gradient(180deg,#1b1160,#0d0a3a);color:#fff;box-shadow:inset 0 0 0 2px #4a37b0,3px 3px 0 #000}
#gameContainer .rating-row.header{background:#07051f;color:#c4c4ff;box-shadow:inset 0 0 0 2px #2a2078,3px 3px 0 #000}
#gameContainer .rating-row.me,#gameContainer .career-hall-row.me,#gameContainer .history-row.win,#gameContainer .career-row.done,#gameContainer .flag-option.selected{box-shadow:inset 0 0 0 2px #2ee66b,3px 3px 0 #000}
#gameContainer .history-row.lose{box-shadow:inset 0 0 0 2px #ff3f6a,3px 3px 0 #000}
#gameContainer .history-row.draw{box-shadow:inset 0 0 0 2px #ffd22e,3px 3px 0 #000}
#gameContainer .career-row.cur,#gameContainer .pack.best{box-shadow:inset 0 0 0 2px #ffd22e,0 0 14px rgba(255,210,46,.45),3px 3px 0 #000}
#gameContainer .career-row.lock{opacity:.65}
#gameContainer .item-name,#gameContainer .rating-name,#gameContainer .history-opponent,#gameContainer .cr-name,#gameContainer .pack-coins{color:#fff}
#gameContainer .item-desc,#gameContainer .cr-sub{color:#c4c4e8}
#gameContainer .history-score,#gameContainer .history-coins,#gameContainer .pack-coins{color:#ffd22e}

/* вкладки и сортировка */
#gameContainer .pixel-tab,#gameContainer .sort-btn{background:linear-gradient(180deg,#2d2090,#1a1058);color:#d6d6ff;box-shadow:inset 0 0 0 2px #4a37b0,2px 2px 0 #000}
#gameContainer .pixel-tab.active,#gameContainer .sort-btn.active{background:linear-gradient(180deg,#ffe85c,#ffb800);color:#2a1500;text-shadow:none;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #d98300,2px 2px 0 #000}

/* кнопки действий */
#gameContainer .shop-btn,#gameContainer .pack-btn{background:linear-gradient(180deg,#ffe85c,#ffb800);color:#1a0e00;text-shadow:none;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #d98300,2px 2px 0 #000;font-family:'Press Start 2P',monospace;white-space:nowrap}
#gameContainer .shop-btn .coin-ico{font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;font-size:14px;line-height:1;margin-left:2px;vertical-align:middle;filter:drop-shadow(0 1px 0 #5a3200)}
#gameContainer .shop-btn.equip{background:linear-gradient(180deg,#5cf59a,#17b857);color:#052a12}
#gameContainer .shop-btn.equipped{background:#241a70;color:#d6d6ff;box-shadow:inset 0 0 0 2px #4a37b0}
#gameContainer .donate-entry{background:linear-gradient(180deg,#ff5aa8,#c01070);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.28),0 4px 0 #6a0a40,0 7px 0 #000}
#gameContainer .donate-entry b,#gameContainer .donate-entry .de-arrow{color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.4)}
#gameContainer .donate-entry small{color:#ffe0f0}
#gameContainer .donate-entry .de-ico{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5))}
#gameContainer .donate-lead,#gameContainer .donate-note{color:#d6d6ff}
#gameContainer .cs-fill{background:linear-gradient(90deg,#ffb800,#ffe85c)}

/* окна */
#gameContainer .modal{background:rgba(3,2,20,.9)}
#gameContainer .modal-box,#gameContainer .result-box,#gameContainer .pause-box{background:linear-gradient(180deg,#1f1478,#0c0a3a)!important;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 4px #8f5cff,8px 8px 0 #000,0 0 40px rgba(143,92,255,.55)!important}
#gameContainer .result-box.win{box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 4px #2ee66b,8px 8px 0 #000,0 0 44px rgba(46,230,107,.6)!important}
#gameContainer .result-box.lose{box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 4px #ff3f6a,8px 8px 0 #000,0 0 44px rgba(255,63,106,.55)!important}
#gameContainer .result-box.draw{box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 4px #ffd22e,8px 8px 0 #000,0 0 44px rgba(255,210,46,.5)!important}
#gameContainer .modal-title,#gameContainer .pause-title{color:#ffd22e!important;text-shadow:2px 2px 0 #7a2a00,0 0 14px rgba(255,210,46,.5)!important}
#gameContainer .modal-text,#gameContainer .pause-info{color:#e0e0ff}
#gameContainer .modal-btn,#gameContainer .result-btn{background:linear-gradient(180deg,#4a3aa8,#2a1d7a)!important;color:#fff!important;text-shadow:1px 1px 0 rgba(0,0,0,.5)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 #150c50,0 5px 0 #000!important}
#gameContainer .modal-btn-confirm,#gameContainer #resultRematchBtn,#gameContainer #crRetryBtn,#gameContainer #ciStartBtn,#gameContainer #copyLinkBtn,#gameContainer .pause-resume-btn,#gameContainer .search-cancel-btn{background:linear-gradient(180deg,#ffe85c,#ffb800)!important;color:#2a1500!important;text-shadow:none!important;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #d98300,0 3px 0 #8a5000,0 5px 0 #000!important}
#gameContainer #nameInput,#gameContainer #inviteLinkInput{background:#07051f;border:3px solid #8f5cff;color:#fff}

/* выбор режима и поиск */
#gameContainer #modePicker,#gameContainer #searchPanel{background:linear-gradient(180deg,#1f1478,#0c0a3a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 4px #8f5cff,8px 8px 0 #000,0 0 40px rgba(143,92,255,.55)}
#gameContainer #modePicker .mode-title,#gameContainer #searchPanel .search-text{color:#ffd22e;text-shadow:2px 2px 0 #7a2a00}
#gameContainer #modePicker .mode-btn.friend,#gameContainer #modePicker .mode-btn.random{background:linear-gradient(180deg,#8f5cff,#5a2fd0);color:#fff;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.3),0 4px 0 #36188f,0 7px 0 #000}
#gameContainer #modePicker .mode-btn.cancel{background:linear-gradient(180deg,#3a2f90,#241a70);color:#d6d6ff;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 4px 0 #150c50,0 7px 0 #000}

/* HUD матча */
#gameContainer #status{background:linear-gradient(180deg,#1f1478,#0c0a3a);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 0 0 2px #8f5cff,3px 3px 0 #000,0 0 14px rgba(143,92,255,.5)}
#gameContainer #score{background:linear-gradient(180deg,#1f1478,#0c0a3a);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 0 0 3px #8f5cff,4px 4px 0 #000,0 0 18px rgba(143,92,255,.5)}
#gameContainer #timer{color:#ffd22e;text-shadow:2px 0 #7a2a00,0 2px #7a2a00,2px 2px 0 #000,4px 4px 0 #000,0 0 16px rgba(255,210,46,.8)}

/* ежедневный бонус */
#menuScreen .v3-daily{cursor:pointer;border:0;border-radius:0;text-align:left;font-family:inherit;color:#fff;position:relative}
#menuScreen .v3-daily .ddot{display:none;position:absolute;right:6px;top:5px;width:9px;height:9px;background:#ff3f6a;box-shadow:0 0 0 2px #000,0 0 8px #ff3f6a}
#menuScreen .v3-daily.ready{box-shadow:inset 0 0 0 2px #ffd22e,3px 3px 0 #000,0 0 16px rgba(255,210,46,.6);animation:dReady 1s steps(2,end) infinite}
#menuScreen .v3-daily.ready .ddot{display:block}
#menuScreen .v3-daily.ready small{color:#ffd22e}
@keyframes dReady{50%{filter:brightness(1.35)}}
#dailyModal{z-index:150}
#dailyModal .dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 12px}
#dailyModal .dcell{position:relative;padding:6px 2px 5px;background:#0a0830;box-shadow:inset 0 0 0 2px #4a37b0,2px 2px 0 #000;text-align:center;color:#fff}
#dailyModal .dcell.case{grid-column:span 2}
#dailyModal .dn{font:6px 'Press Start 2P',monospace;color:#c4c4ff}
#dailyModal .di{font-size:20px;line-height:28px}
#dailyModal .dv{font:8px 'Press Start 2P',monospace;color:#ffd22e}
#dailyModal .dcell.done{box-shadow:inset 0 0 0 2px #2ee66b,2px 2px 0 #000;opacity:.8}
#dailyModal .dcell.done:after{content:'✓';position:absolute;right:3px;top:1px;color:#2ee66b;font:10px 'Press Start 2P',monospace}
#dailyModal .dcell.today{box-shadow:inset 0 0 0 2px #ffd22e,0 0 14px rgba(255,210,46,.7),2px 2px 0 #000;animation:dReady 1s steps(2,end) infinite}
#dailyModal .dtimer{font:14px 'Press Start 2P',monospace;color:#2ee6a8;margin:0 0 12px;min-height:18px}
#dailyModal .dres{font:12px/1.6 'Press Start 2P',monospace;color:#ffd22e;margin:0 0 12px;min-height:0}
#dailyModal .dres small{display:block;font:18px 'VT323',monospace;color:#fff}

/* ===== ДРУЗЬЯ И ЧАТ ===== */
#friendsScreen,#chatScreen{padding-bottom:14px}
.fr-mini{font:8px 'Press Start 2P',monospace;padding:9px 10px;border:0;cursor:pointer;color:#fff;background:linear-gradient(180deg,#8f5cff,#5a2fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.3),2px 2px 0 #000;white-space:nowrap}
.fr-mini.gold{background:linear-gradient(180deg,#ffe85c,#ffb800);color:#2a1500;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #d98300,2px 2px 0 #000}
.fr-mini.red{background:linear-gradient(180deg,#ff5a7a,#c01040)}
.fr-mini.green{background:linear-gradient(180deg,#5cf59a,#17b857);color:#052a12}
.fr-mini:active{transform:translateY(2px)}
.fr-mini:disabled{opacity:.4;cursor:default}
.fr-me{width:100%;padding:10px 12px;margin-bottom:10px;background:linear-gradient(180deg,#1b1160,#0d0a3a);box-shadow:inset 0 0 0 2px #4a37b0,3px 3px 0 #000}
.fr-me-t{font:7px 'Press Start 2P',monospace;color:#c4c4ff;margin-bottom:8px}
.fr-me-row{display:flex;align-items:center;justify-content:space-between}
.fr-me-row b{font:16px 'Press Start 2P',monospace;color:#ffd22e;letter-spacing:3px;text-shadow:2px 2px 0 #000}
.fr-add{width:100%;display:flex;gap:8px;margin-bottom:8px}
.fr-add input,.chat-input input{flex:1;min-width:0;padding:10px;background:#07051f;border:3px solid #8f5cff;color:#fff;font:10px 'Press Start 2P',monospace;outline:none;text-transform:uppercase}
.chat-input input{text-transform:none;font-size:9px}
.fr-note{width:100%;min-height:16px;margin-bottom:8px;font:15px 'VT323',monospace;color:#2ee6a8}
.fr-note.err{color:#ff7a9a}
.fr-h{width:100%;margin:10px 0 6px;font:8px 'Press Start 2P',monospace;color:#ffd22e;text-shadow:2px 2px 0 #000}
.fr-row{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:8px 10px;background:linear-gradient(180deg,#1b1160,#0d0a3a);box-shadow:inset 0 0 0 2px #4a37b0,3px 3px 0 #000;color:#fff}
.fr-row .fl{font-size:24px;filter:drop-shadow(2px 2px 0 #000)}
.fr-row .fi{flex:1;min-width:0}
.fr-row .fn{font:8px 'Press Start 2P',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-row .fs{font:14px 'VT323',monospace;color:#9a9ac8;margin-top:3px}
.fr-row.on{box-shadow:inset 0 0 0 2px #2ee66b,3px 3px 0 #000}
.fr-row.on .fs{color:#2ee6a8}
.fr-row .fb{display:flex;gap:5px}
.fr-row .fb .fr-mini{padding:7px 8px;font-size:14px;line-height:16px}
.fr-empty{width:100%;padding:16px 10px;text-align:center;font:16px 'VT323',monospace;color:#c4c4e8}
.chat-tabs{width:100%;display:flex;gap:6px;margin-bottom:8px}
.chat-tabs .pixel-tab{flex:1}
#chatScreen{display:none}
#chatScreen.active{display:flex}
#chatList{flex:1;min-height:0;width:100%;overflow-y:auto;padding:8px;margin-bottom:8px;background:rgba(5,4,26,.85);box-shadow:inset 0 0 0 2px #3a2f90}
.chat-msg{margin-bottom:7px;padding:6px 8px;background:#150e4e;box-shadow:inset 0 0 0 1px #3a2f90;color:#fff;word-break:break-word}
.chat-msg.me{background:#2a1a78;box-shadow:inset 0 0 0 1px #8f5cff;margin-left:22px}
.chat-msg .cn{font:7px 'Press Start 2P',monospace;color:#52d6ff;cursor:pointer;margin-bottom:4px}
.chat-msg.me .cn{color:#ffd22e;cursor:default}
.chat-msg .ct{font:16px/17px 'VT323',monospace;color:#fff}
.chat-sys{text-align:center;font:14px 'VT323',monospace;color:#9a9ac8;margin:6px 0}
.chat-input{width:100%;display:flex;gap:8px}
#friendInviteToast{display:none;position:absolute;left:10px;right:10px;top:10px;z-index:200;padding:10px 12px;background:linear-gradient(180deg,#1f1478,#0c0a3a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 0 3px #ffd22e,5px 5px 0 #000,0 0 24px rgba(255,210,46,.5);animation:fitIn .25s steps(4,end)}
#friendInviteToast.show{display:block}
@keyframes fitIn{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}
#friendInviteToast .fit-t{font:9px/14px 'Press Start 2P',monospace;color:#fff;margin-bottom:10px}
#friendInviteToast .fit-t b{color:#ffd22e;font-weight:400}
#friendInviteToast .fit-b{display:flex;gap:8px}
#friendInviteToast .fit-b button{flex:1;font:9px 'Press Start 2P',monospace;padding:11px 6px;border:0;cursor:pointer}
.fit-yes{background:linear-gradient(180deg,#ffe85c,#ffb800);color:#2a1500;box-shadow:inset 0 2px 0 #fff6b0,inset 0 -3px 0 #d98300,2px 2px 0 #000}
.fit-no{background:linear-gradient(180deg,#4a3aa8,#2a1d7a);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),2px 2px 0 #000}

/* нижняя панель меню: 4 иконки-плитки */
#menuScreen .v3-bottom{grid-template-columns:1fr 46px 46px 46px 46px;gap:5px;height:38px;top:532px}
#menuScreen .v3-daily,#menuScreen .v3-tile{height:38px}
#menuScreen .v3-daily{padding:0 6px;gap:5px}
#menuScreen .v3-daily .gift{font-size:17px}
#menuScreen .v3-daily b{font-size:5px}
#menuScreen .v3-tile{position:relative;flex-direction:column;gap:3px;padding:3px 0 2px;justify-content:center;font:5px 'Press Start 2P',monospace}
#menuScreen .v3-tile .ico{font-size:15px;line-height:16px}
#menuScreen .v3-tile .dot{display:none;position:absolute;right:-4px;top:-4px;min-width:14px;height:14px;padding:0 3px;background:#ff3f6a;color:#fff;font:8px/14px 'Press Start 2P',monospace;text-align:center;box-shadow:0 0 0 2px #000,0 0 10px rgba(255,63,106,.9);z-index:20;border-radius:0;pointer-events:none}
#menuScreen .v3-tile .dot.show{display:block;animation:notifPulse 1.2s steps(2,end) infinite}
@keyframes notifPulse{
    0%,100%{transform:scale(1);filter:brightness(1)}
    50%{transform:scale(1.18);filter:brightness(1.35)}
}
#menuScreen .v3-foot{top:576px}

/* ===== нижняя панель меню: 4 равные плитки, ниже бонус и онлайн ===== */
#menuScreen .v3-bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:32px 26px;gap:4px 5px;left:10px;right:10px;top:534px;height:auto;overflow:visible}
#menuScreen .v3-bottom .v3-tile{height:32px;flex-direction:row;gap:4px;padding:0 3px;justify-content:center;align-items:center;overflow:visible;min-width:0;white-space:nowrap;font:7px 'Press Start 2P',monospace;letter-spacing:0;position:relative}
#menuScreen .v3-bottom .v3-tile .ico{font-size:15px;line-height:1;flex:none}
#menuScreen .v3-bottom .v3-tile .lbl{min-width:0;overflow:hidden;white-space:nowrap;line-height:1}
#menuScreen .v3-bottom .v3-tile .dot{right:-3px;top:-5px;z-index:20}
#menuScreen .v3-row2{grid-column:1/-1;display:flex;gap:5px;min-width:0}
#menuScreen .v3-row2 .v3-daily{flex:1;min-width:0;height:26px;padding:0 6px;gap:5px;overflow:hidden}
#menuScreen .v3-row2 .v3-daily .gift{font-size:16px;flex:none}
#menuScreen .v3-row2 .v3-daily b{font-size:6px;line-height:8px;overflow:hidden;text-overflow:ellipsis}
#menuScreen .v3-row2 .v3-daily small{font-size:14px;line-height:12px;margin-top:1px}
#menuScreen .v3-row2 #onlinePanel{flex:none;width:112px;height:26px;padding:0 4px;overflow:hidden}
#menuScreen .v3-row2 #onlinePanel .online-item{font-size:7px;white-space:nowrap}

/* ===== флаг страны в настройках ===== */
#settingsScreen .set-flag{width:100%;margin-top:12px;padding:12px;background:#120a30;box-shadow:inset 0 0 0 2px #7a4fd0,3px 3px 0 #000}
#settingsScreen .set-flag-t{font:9px 'Press Start 2P',monospace;color:#fff;margin-bottom:10px}
#settingsScreen .country-picker{width:100%;margin:0}
#settingsScreen .country-current{height:38px;padding:0 10px;gap:8px}
#settingsScreen .country-current .flag-big{font-size:20px}
#settingsScreen .country-current .country-name{font-size:9px}
#settingsScreen .country-current .arrow{font-size:10px}
#settingsScreen .country-list{position:static;width:100%;margin-top:8px;max-height:none;overflow:visible;padding:6px;box-shadow:inset 0 0 0 2px #3a2f90}

/* ===== чат: корона, модерация, мини-уведомление ===== */
.chat-head{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.chat-msg .chat-head .cn{flex:1;min-width:0;margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-msg .cn.adm{color:#ffb800}
.chat-msg .cn .crown{font-size:11px;margin-right:4px;filter:drop-shadow(0 0 4px #ffd02e)}
.chat-msg .cn .vip-badge{font:7px 'Press Start 2P',monospace;color:#ffd22e;background:rgba(255,210,46,0.18);border:1px solid #ffd22e;padding:2px 4px;margin-right:4px;border-radius:2px;display:inline-block;letter-spacing:0}
.chat-emoji-bar{display:flex;align-items:center;gap:4px;overflow-x:auto;padding:4px 6px;margin-bottom:6px;background:#150e4e;box-shadow:inset 0 0 0 1px #3a2f90;scrollbar-width:none}
.chat-emoji-bar::-webkit-scrollbar{display:none}
.ce-btn{flex-shrink:0;font-size:16px;cursor:pointer;padding:2px 4px;background:rgba(255,255,255,0.06);border-radius:3px;transition:transform .08s}
.ce-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.15)}
.ce-btn:active{transform:scale(0.95)}
.ce-sep{width:1px;height:16px;background:rgba(255,255,255,0.25);margin:0 2px;flex-shrink:0}
.ce-btn.vip{background:rgba(255,210,46,0.18);border:1px solid rgba(255,210,46,0.6)}
.ce-btn.vip:hover{background:rgba(255,210,46,0.38)}
.emote-vip-group{display:flex;gap:4px;padding-left:4px;border-left:2px solid rgba(255,210,46,0.6)}
.emote-btn.vip-emote{border:1px solid #ffd22e;box-shadow:0 0 8px rgba(255,210,46,0.45),inset 0 0 4px rgba(255,210,46,0.25)}
.chat-msg .cm{flex:none;padding:3px 6px;border:0;cursor:pointer;font:11px/1 sans-serif;color:#fff;background:#3a2f90;box-shadow:2px 2px 0 #000}
.chat-msg .cm:active{transform:translateY(2px)}
#modModal{z-index:170}
#modModal .mod-btns{display:flex;flex-direction:column;gap:8px}
#modModal .mod-row{display:flex;gap:8px}
#modModal .modal-btn{padding:12px 6px}
#miniToast{display:none;position:absolute;left:14px;right:14px;top:14px;bottom:auto;z-index:10000;padding:12px 14px;text-align:center;font:9px/15px 'Press Start 2P',monospace;color:#fff;background:linear-gradient(180deg,#1f1478,#0c0a3a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 0 0 3px #2ee66b,0 8px 25px rgba(0,0,0,0.85);pointer-events:none}
#miniToast.err{box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),0 0 0 3px #ff5a7a,0 8px 25px rgba(0,0,0,0.85)}
#miniToast.show{display:block;animation:slideToastTop .25s ease-out}
@keyframes slideToastTop{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== v10: ползунок удара, навыки, установка ===== */
#shotMeter{display:none;position:absolute;left:46px;right:46px;top:290px;z-index:20;padding:10px 12px 12px;background:rgba(10,5,24,.94);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 0 0 3px #ffdd44,4px 4px 0 #000;text-align:center}
#shotMeter.show{display:block;animation:fitIn .2s steps(4,end)}
#shotMeter .sm-t{font:8px 'Press Start 2P',monospace;color:#fff;letter-spacing:1px;margin-bottom:8px;text-shadow:2px 2px 0 #000}
#shotMeter .sm-t.perfect{color:#b8ffe8}#shotMeter .sm-t.good{color:#0ae0a8}#shotMeter .sm-t.post{color:#ffb347}#shotMeter .sm-t.miss{color:#ff5a7a}
#smTrack{position:relative;height:30px;background:#5a1230;box-shadow:inset 0 0 0 2px #000;overflow:hidden}
#smTrack .sm-band{position:absolute;top:0;bottom:0;background:#c98a10}
#smTrack .sm-green{position:absolute;top:0;bottom:0;background:#0ae0a8}
#smTrack .sm-core{position:absolute;top:0;bottom:0;background:#b8ffe8}
#smTrack .sm-cursor{position:absolute;top:-2px;bottom:-2px;width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 0 2px #000,0 0 10px #fff}
#smBtn{width:100%;margin-top:10px;padding:13px 8px;border:0;cursor:pointer;font:10px 'Press Start 2P',monospace;letter-spacing:1px;color:#1a1a2e;background:#ffdd44;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(140,100,0,.4),0 3px 0 #c99a10,0 5px 0 rgba(0,0,0,.6)}
#smBtn:active{transform:translateY(3px)}
#eventBanner.post .t{color:#ffb347}#eventBanner.miss .t{color:#ff6b8a}
.sk-box{width:100%;margin-bottom:12px;padding:12px;background:#1d1044;box-shadow:inset 0 0 0 2px #7a4fd0,3px 3px 0 #000;z-index:2}
.sk-top{display:flex;align-items:center;justify-content:space-between;font:9px 'Press Start 2P',monospace;color:#fff;margin-bottom:6px}
.sk-pts{color:#ffdd44}
.sk-hint{font:15px 'VT323',monospace;color:#c4c4e0;margin-bottom:8px;line-height:1.2}
.sk-grp{font:7px 'Press Start 2P',monospace;color:#c088ff;margin:10px 0 6px}
.sk-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid rgba(122,79,208,.35)}
.sk-ic{font-size:18px;width:24px;text-align:center}
.sk-mid{flex:1;min-width:0}
.sk-name{font:8px 'Press Start 2P',monospace;color:#fff}
.sk-desc{font:14px 'VT323',monospace;color:#a9a9cc;line-height:1.1;margin-top:3px}
.sk-pips{display:flex;gap:3px;margin-top:5px}
.sk-pips i{width:14px;height:8px;background:#2f2360;box-shadow:inset 0 0 0 1px #000}
.sk-pips i.on{background:#0ae0a8}
.sk-up{flex:none;min-width:52px;padding:8px 6px;border:0;cursor:pointer;font:8px 'Press Start 2P',monospace;color:#052a12;background:#2ee66b;box-shadow:inset 0 -3px rgba(0,0,0,.3),2px 2px 0 #000}
.sk-up:disabled{background:#3b3466;color:#8a8aa8;cursor:default}
.sk-up:active:not(:disabled){transform:translateY(2px)}
.sp-line{margin-top:8px;font:9px 'Press Start 2P',monospace;color:#0ae0a8;text-shadow:2px 2px 0 #000}
#installModal .modal-text{text-align:left}

/* ===== V5: 5 плиток внизу меню, дивизионы, задания, ярлык ===== */
#menuScreen .v3-bottom{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:38px 26px;gap:4px 4px}
#menuScreen .v3-bottom .v3-tile{height:38px;flex-direction:column;gap:3px;padding:3px 0 2px;font:5px 'Press Start 2P',monospace}
#menuScreen .v3-bottom .v3-tile .ico{font-size:15px;line-height:16px}
#menuScreen .v3-bottom .v3-tile .lbl{max-width:100%;overflow:visible;text-overflow:clip}

.div-tabs{display:flex;gap:6px;width:100%;margin:2px 0 10px;z-index:2}
.div-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border:0;cursor:pointer;color:#fff;background:#1d1044;box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000;font:7px 'Press Start 2P',monospace}
.div-tab span{font-size:17px;line-height:18px}
.div-tab.done{background:#0e3a2d;box-shadow:inset 0 0 0 2px var(--green),3px 3px 0 #000}
.div-tab.active{background:#2a1a5c;box-shadow:inset 0 0 0 3px var(--yellow),3px 3px 0 #000}
.div-tab.lock{filter:grayscale(.7);opacity:.75}
.div-head{width:100%;margin:0 0 10px;padding:8px 10px;z-index:2;background:linear-gradient(180deg,#2a1a5c,#170c3d);box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000}
.div-head .dh-t{font:9px 'Press Start 2P',monospace;color:var(--yellow);text-shadow:2px 2px 0 #000}
.div-head .dh-s{margin-top:6px;font:16px 'VT323',monospace;color:#e6e6f5}
.cr-cond{display:inline-block;margin-left:6px;padding:0 4px;background:#0d0820;box-shadow:inset 0 0 0 2px #52d6ff;font-size:13px;line-height:17px;vertical-align:middle}
.ci-cond{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding:8px 10px;text-align:left;background:#0d0820;box-shadow:inset 0 0 0 2px #52d6ff;font:16px/18px 'VT323',monospace;color:#e6e6f5}
.ci-cond .cc-i{font-size:28px;line-height:1}
.ci-cond b{font:8px 'Press Start 2P',monospace;color:#52d6ff;font-weight:400}
.cr-obj{margin:10px 0 4px;text-align:left;font:17px/20px 'VT323',monospace}
.cr-obj .ok{color:#7dffd6}.cr-obj .no{color:#ff9ab5}

.inst-reward{display:block;margin-top:6px;font:6px/9px 'Press Start 2P',monospace;color:#ffd22e}
.fr-row .fs.unread{color:#ffd22e}

.wk-wrap{width:100%;z-index:2}
.wk-top{width:100%;margin-bottom:10px;padding:10px;background:linear-gradient(180deg,#2a1a5c,#170c3d);box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000}
.wk-top .t{font:9px 'Press Start 2P',monospace;color:var(--yellow);text-shadow:2px 2px 0 #000}
.wk-top .s{margin-top:7px;font:17px 'VT323',monospace;color:#e6e6f5}
.wk-prize{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:9px 10px;background:linear-gradient(180deg,#5a3a00,#2a1800);box-shadow:inset 0 0 0 3px #ffd22e,0 0 16px rgba(255,210,46,.45),3px 3px 0 #000;color:#fff;animation:curPulse 1.6s steps(2,end) infinite}
.wk-prize .pi{font-size:26px}.wk-prize .pt{flex:1;min-width:0;font:15px/17px 'VT323',monospace}.wk-prize .pt b{display:block;font:7px/11px 'Press Start 2P',monospace;color:#ffd22e;font-weight:400;margin-bottom:3px}
.wk-h{width:100%;margin:12px 0 6px;font:8px 'Press Start 2P',monospace;color:#ffd22e;text-shadow:2px 2px 0 #000}
.wk-task{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:8px 10px;background:#1d1044;box-shadow:inset 0 0 0 2px var(--line),3px 3px 0 #000;color:#fff}
.wk-task.done{background:#0e3a2d;box-shadow:inset 0 0 0 2px var(--green),3px 3px 0 #000}
.wk-task.got{opacity:.6}
.wk-task .ti{font-size:22px;filter:drop-shadow(2px 2px 0 #000)}
.wk-task .tm{flex:1;min-width:0}
.wk-task .tn{font:8px 'Press Start 2P',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-task .td{margin-top:3px;font:15px 'VT323',monospace;color:#d6d6ee}
.wk-bar{height:8px;margin-top:4px;background:#0a0620;box-shadow:inset 0 0 0 2px #3b2f80}
.wk-bar i{display:block;height:100%;background:linear-gradient(180deg,#3ff0b8,#19f0b4)}
.wk-task .tb{flex:none;min-width:58px;text-align:center;font:7px 'Press Start 2P',monospace;color:#c4c4e0}
.wk-tabs{display:flex;gap:6px;width:100%;margin-bottom:8px}
.wk-tab{flex:1;min-width:0;padding:8px 2px;border:0;cursor:pointer;color:#fff;background:#1d1044;box-shadow:inset 0 0 0 2px var(--line),2px 2px 0 #000;font:6px 'Press Start 2P',monospace}
.wk-tab.active{background:#2a1a5c;box-shadow:inset 0 0 0 3px var(--yellow),2px 2px 0 #000}
.wk-row{display:grid;grid-template-columns:30px 26px 1fr 44px;gap:6px;align-items:center;width:100%;margin-bottom:6px;padding:7px 8px;background:#170c3d;box-shadow:inset 0 0 0 2px #3b2f80,2px 2px 0 #000;color:#fff}
.wk-row.me{box-shadow:inset 0 0 0 2px var(--green),2px 2px 0 #000}
.wk-row .pl{font:8px 'Press Start 2P',monospace;text-align:center}
.wk-row .nm{font:8px 'Press Start 2P',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-row .vl{font:9px 'Press Start 2P',monospace;color:var(--yellow);text-align:right}
.wk-note{width:100%;margin:6px 0;font:16px/18px 'VT323',monospace;color:#c4c4e0}
.wk-note b{color:#ffd22e;font-weight:400}