* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    overflow-y: auto;
    position: relative;
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: float linear infinite;
    pointer-events: none;
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10px) rotate(720deg);
        opacity: 0;
    }
}

.card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 60px 80px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: cardEntrance 1s cubic-bezier(0.16, 1, 0.3, 1);

    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-gutter: stable;
    transition: max-height 0.4s ease;
}

.card.minimized {
    max-height: 120px;
    overflow: hidden;
}

.card.visible {
    max-height: 80vh;
    overflow-y: auto;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.greeting {
    font-size: 80px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease infinite;
    letter-spacing: -2px;
    line-height: 1.1;
}

.game-icon {
    font-size: 64px;
    margin-bottom: 10px;
    display: inline-block;
    animation: bounce 2s ease infinite;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.game-icon:hover {
    transform: scale(1.2) rotate(10deg);
}

.minimize-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

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

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

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.subtitle {
    margin-top: 20px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: fadeIn 1.5s ease 0.5s both;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: inline-block;
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.divider {
    width: 120px;
    height: 3px;
    margin: 30px auto;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 2px;
}

.game-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.45s cubic-bezier(0.16, 1, 0.3, 1), margin 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.game-title {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 15px;
    font-weight: 600;
}

.game-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.game-stats span {
    font-weight: 600;
}

.game-stats .score {
    color: #4facfe;
}

.game-stats .highscore {
    color: #f093fb;
}

.game-board {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    height: 300px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#targetCanvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500/600;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-width: 500px;
    margin: 0 auto;
}

.game-board::before {
    content: 'Clique alvos, avoid bombs!';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 18px;
    pointer-events: none;
    text-align: center;
}

.target {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    animation: targetPop 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.1s;
}

.target:hover {
    transform: scale(1.2);
}

.target:active {
    transform: scale(0.9);
}

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

.target-correct {
    background: radial-gradient(circle, #4facfe, #00f2fe);
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.6);
}

.target-wrong {
    background: radial-gradient(circle, #f093fb, #764ba2);
    box-shadow: 0 0 20px rgba(240, 147, 251, 0.6);
}

.target-missed {
    animation: targetFade 0.5s ease forwards;
}

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

.target-bomb {
    background: radial-gradient(circle, #4a1020, #14060c);
    border: 2px dashed #ff5566;
}

.target-boss {
    background: radial-gradient(circle, #6a2a8a, #2a0e3e);
    border: 3px solid #ffcc00;
    box-shadow: 0 0 24px rgba(255, 204, 0, 0.5);
}

.target-hit {
    animation: targetShake 0.25s ease;
    filter: brightness(1.6);
}

.powerup {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(20, 20, 50, 0.75);
    border: 1px solid #667eea;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
    cursor: pointer;
    animation: powerupPulse 1.2s ease-in-out infinite;
    z-index: 15;
}

@keyframes powerupPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.boss-bar {
    position: absolute;
    left: 0; right: 0; top: 8px;
    display: none;
    text-align: center;
    color: #fff;
    font: 13px sans-serif;
    pointer-events: none;
    z-index: 16;
}

.boss-name {
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 85, 102, 0.8);
}

.boss-track {
    height: 10px;
    border-radius: 5px;
    background: rgba(10, 10, 30, 0.8);
    border: 1px solid #667eea;
    overflow: hidden;
    margin: 4px auto 0;
}

.boss-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff5566, #ffcc00);
    transition: width 0.2s ease;
}

.target-wrong {
    animation: targetShake 0.25s ease;
}

@keyframes targetShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.tg-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: rgba(8, 10, 30, 0.92);
    pointer-events: none;
    font: 15px/1.5 sans-serif;
}

.restart-btn {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

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

/* ============================================
   MINIMIZED: only the icon is visible
   ============================================ */
.game-section.minimized {
    position: relative;
    box-sizing: border-box;
    max-height: 150px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 26px;
    margin-bottom: 26px;
    border-top: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    text-align: center;
}

/* While minimized, only the header (icon + title) stays visible.
   !important is required: the HUD, the difficulty controls and the audio panel are
   built by the scripts with an inline style (style.cssText='display:flex;...'), and
   inline declarations would otherwise win over this rule. */
.game-section.minimized > *:not(.game-header) {
    display: none !important;
}

.game-section.minimized .game-header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1;
}

.game-section.minimized .game-icon {
    font-size: 60px;
    cursor: pointer;
}

.game-section.minimized .game-title,
.game-section.minimized .game-header h2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.75;
    margin-bottom: 0;
}

.game-section.minimized .game-icon:hover {
    transform: scale(1.25) rotate(8deg);
}

/* The icon already owns a "bounce" transform animation, so the hover
   affordance is applied to the header instead (it has no animation). */
.game-section.minimized .game-header:hover {
    transform: scale(1.08);
}

.game-section.minimized:hover {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.game-section.minimized::after {
    content: '▸ clique to open';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    font-size: 11px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

@media (max-width: 768px) {
    .card {
        padding: 40px 30px;
        margin: 20px;
    }
    .greeting {
        font-size: 48px;
    }
    .subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }
    .game-board {
        height: 200px;
    }
    .game-stats {
        gap: 20px;
    }
}

/* ============================================
   SPACE INVADERS
   ============================================ */

.game-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.game-icon {
    font-size: 56px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.game-icon:hover {
    transform: scale(1.15) rotate(5deg);
}

.game-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: 1px;
}

.si-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.si-game-canvas-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

#siCanvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500/600;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    background: #1a1a2e;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

/* The overlay is a sibling of the canvas inside .si-game-canvas-wrapper (position:
   relative), so anchor it to that wrapper with inset:0. The old `#siCanvas .overlay`
   selector never matched (a canvas can't have rendered children), leaving the overlay
   as a static flex item that spilled horizontally out of the section. */
#siOverlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

#siCanvas .overlay-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

#siScoreDisplay {
    position: static;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    pointer-events: none;
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    z-index: 2;
    width: 100%;
}

#siScoreDisplay > div {
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

#siScoreDisplay .hud-score {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

#siScoreDisplay .hud-lives {
    color: #ff3366;
    text-shadow: 0 0 10px rgba(255, 51, 102, 0.5);
}

#siScoreDisplay .hud-level {
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.overlay h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #00ff88, #ffcc00, #ff3366);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titlePulse 2s ease infinite;
    letter-spacing: 2px;
}

.overlay-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 25px 0;
}

.btn-primary {
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 255, 136, 0.6);
}

.btn-secondary {
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

.overlay-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@keyframes titlePulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.8));
    }
}

/* Arkanoid: Neon Breaker — same layout as the SI game so the overlay (sibling of
   the canvas inside the wrapper) anchors with inset:0 and the canvas scales. */
.ak-game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.ak-canvas-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

#akCanvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500/600;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    background: #101329;
    max-width: 500px;
    position: relative;
    z-index: 1;
}

#akOverlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

#akScoreDisplay {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 10px 0;
    color: white;
    font: 12px monospace;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(120, 120, 255, 0.1) 0%, transparent 50%);
    animation: glow 8s ease infinite;
    z-index: -1;
}

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

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease infinite;
    pointer-events: none;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

.ranking-block {
    display: block;
    margin: 14px auto 0;
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
}

.ranking-title {
    color: #ffd868;
    font-weight: 700;
    margin-bottom: 6px;
}

.ranking-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ranking-row {
    color: #e8ecff;
    padding: 3px 8px;
    border-radius: 6px;
    word-break: break-word;
}

.ranking-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.ranking-off {
    color: #8b93b8;
    font-style: italic;
}

/* ============================================
   NAME GATE: games hidden until a name is confirmed
   ============================================ */
.name-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 24px auto 30px;
    padding: 18px 24px;
    max-width: 360px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    text-align: center;
}

.name-gate label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 1px;
}

.name-gate input {
    display: block;
    width: 200px;
    margin: 0 auto;
    padding: 8px 12px;
    border-radius: 8px;
    background: #24243e;
    color: #fff;
    border: 1px solid #667eea;
    font: 14px sans-serif;
    box-sizing: content-box;
}

.name-gate button {
    margin-top: 6px;
    padding: 10px 26px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.name-gate button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

/* Optional Google sign-in strip, rendered above the manual name field.
   Empty when Google login is not configured, so the gate never depends on it. */
.name-gate .google-login {
    display: none;
    align-self: stretch;
    margin-bottom: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.name-gate .google-login.enabled { display: block; }
.name-gate .google-login .gwt {
    display: inline-block;
    width: 26px; height: 26px;
    margin: 0 6px;
    vertical-align: middle;
}
.name-gate .google-login .gwt-off { opacity: 0.35; filter: grayscale(1); }
/* Visible "Continue with Google" button (renderButton) inside the strip. */
.name-gate .google-login .google-btn {
    display: block;
    margin: 6px auto 0;
    text-align: center;
}
/* Once signed in, the whole login strip collapses: the profile block below takes over. */
.name-gate .google-login.signedin .google-btn { display: none; }
.name-gate .google-login.signedin #googleOneTap { display: none; }
.name-gate .google-login.signedin { display: none; }

/* When Google login is configured, the manual name field is not needed:
   identity comes from Google. Hidden via the enabled strip's siblings. */
.name-gate .google-login.enabled ~ label { display: none; }
.name-gate .google-login.enabled ~ button#confirmNameBtn { display: none; }

/* Signed-in Google profile: avatar + greeting + logout. Hidden until filled. */
.name-gate .google-profile { display: none; }
.name-gate .google-profile.on {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 14px;
    background: rgba(36, 36, 62, 0.55);
    border: 1px solid rgba(102, 126, 234, 0.45);
}
.name-gate .google-profile .google-avatar {
    display: block;
    width: 56px; height: 56px;
    margin: 0 auto 8px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #667eea;
    box-shadow: 0 3px 12px rgba(102,126,234,0.5);
}
.name-gate .google-profile #googleGreeting {
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.name-gate .google-profile #googleLogoutBtn {
    margin: 4px auto 0;
    padding: 8px 20px;
    font-size: 13px;
    background: #24243e;
    border: 1px solid #667eea;
    border-radius: 8px;
    cursor: pointer;
}

/* While the gate is pending, every game section (and its ranking block)
   is hidden, leaving only the name prompt visible. */
.card.gate-pending .game-section { display: none; }
.card.gate-pending .name-gate { display: flex; }

/* Signed in with Google: the profile card (photo + greeting + logout) is taller
   than the gate alone, so let the card grow instead of scrolling inside it. */
.card.google-signedin { max-height: none; overflow: visible; }

/* When a game is open, collapse the top chrome (greeting, icon, divider,
   subtitle, name gate) and let the card grow instead of scrolling internally.
   The page (body) scrolls instead, so the HUD stays attached right above
   the canvas and is never lost above the fold. The card's own minimizeBtn
   (.card.minimized, max-height:120px) still wins, so collapsing the whole
   card keeps working. */
.card.game-open .greeting { font-size: 30px; }
.card.game-open .icon,
.card.game-open .subtitle,
.card.game-open .divider,
.card.game-open .name-gate { display: none; }
.card.game-open { max-height: none; overflow: visible; }

/* ============================================
   MINIMIZED TILES ON SMALL SCREENS
   ============================================ */
@media (max-width: 768px) {
    .game-section.minimized {
        max-height: 132px;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-top: 18px;
        margin-bottom: 18px;
    }
    .game-section.minimized .game-icon {
        font-size: 46px;
    }
    .game-section.minimized .game-title,
    .game-section.minimized .game-header h2 {
        font-size: 14px;
    }
    .game-section.minimized::after {
        font-size: 10px;
    }
}