/* Gamepad Design Improvements - Authentic GameBoy Appearance */
/* Version 2.0 - Enhanced responsive design and visual polish */

/* ========================================
   ROOT VIEWPORT AND CONTAINER IMPROVEMENTS
   ======================================== */

/* Main gameboy container - better centering and sizing */
.dmg-gameboy.svelte-i2avrx {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important; /* Dynamic viewport height for mobile */
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* GameBoy body - responsive sizing with better constraints */
.gb-body.svelte-i2avrx {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: auto !important;
    margin: auto !important;
    padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: clamp(1rem, 2.5vw, 1.5rem) !important;
}

/* ========================================
   SCREEN SECTION IMPROVEMENTS
   ======================================== */

/* Screen section - better spacing */
.gb-screen-section.svelte-i2avrx {
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* Screen area - improved depth and sizing */
.gb-screen-area.svelte-i2avrx {
    background: linear-gradient(145deg, #7a7a7a, #636363) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) clamp(0.5rem, 1.5vw, 1rem) !important;
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3) !important;
}

/* Screen bezel - deeper and more authentic */
.gb-screen-bezel.svelte-i2avrx {
    background: linear-gradient(135deg, #2a2a3a 0%, #1f1f2a 50%, #1a1a2a 100%) !important;
    border-radius: 6px !important;
    padding: clamp(0.5rem, 1.5vw, 1rem) !important;
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.9),
        inset 0 0 0 2px rgba(0, 0, 0, 0.95) !important;
}

/* Screen glass - better aspect ratio handling and glow */
.gb-screen-glass.svelte-i2avrx {
    background: linear-gradient(135deg, #0f380f 0%, #0c2f0c 50%, #0a2d0a 100%) !important;
    border-radius: 3px !important;
    aspect-ratio: 160 / 144 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.7),
        inset 0 0 20px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(155, 189, 15, 0.3) !important;
}

/* Canvas improvements - better scaling */
.gb-canvas.svelte-i2avrx,
#gameCanvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
    -ms-interpolation-mode: nearest-neighbor !important;
}

/* ========================================
   BRANDING IMPROVEMENTS
   ======================================== */

/* Branding section - better spacing */
.gb-branding.svelte-i2avrx {
    text-align: center !important;
    margin-bottom: 0 !important;
    padding: clamp(0.5rem, 1.5vw, 1rem) 0 !important;
}

/* Nintendo text - enhanced */
.nintendo-text.svelte-i2avrx {
    font-size: clamp(18px, 4vw, 24px) !important;
    color: #6a6a6a !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3),
        0 2px 3px rgba(0, 0, 0, 0.25) !important;
    margin-bottom: 0.25rem !important;
}

/* Game Boy text - enhanced */
.game-boy-text.svelte-i2avrx {
    font-size: clamp(13px, 3vw, 16px) !important;
    color: #5a5a6a !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 2px rgba(0, 0, 0, 0.3),
        0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   CONTROLS LAYOUT IMPROVEMENTS
   ======================================== */

/* Controls grid - better responsive layout */
.gb-controls.svelte-i2avrx {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: clamp(1rem, 3vw, 2rem) !important;
    align-items: center !important;
    width: 100% !important;
    padding: clamp(0.5rem, 2vw, 1rem) 0 !important;
}

/* ========================================
   D-PAD IMPROVEMENTS
   ======================================== */

/* D-Pad container - better positioning */
.dpad-section,
.dpad.svelte-i2avrx {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* D-Pad - responsive sizing */
.dpad.svelte-i2avrx {
    width: clamp(90px, 20vw, 120px) !important;
    height: clamp(90px, 20vw, 120px) !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    grid-template-rows: 1fr 1fr 1fr !important;
    gap: 0 !important;
}

/* D-Pad buttons - More realistic appearance */
.dpad-btn.svelte-i2avrx,
.dpad-button.svelte-zfyaeq {
    background: linear-gradient(145deg, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%) !important;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
}

.dpad-btn.svelte-i2avrx:hover,
.dpad-button.svelte-zfyaeq:hover {
    background: linear-gradient(145deg, #404040 0%, #303030 50%, #202020 100%) !important;
}

.dpad-btn.svelte-i2avrx:active,
.dpad-button.svelte-zfyaeq:active,
.dpad-btn.btn-pressed,
.dpad-button.btn-pressed {
    background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 50%, #000000 100%) !important;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(2px) !important;
}

/* D-Pad center - deeper recess */
.dpad-center.svelte-i2avrx,
.dpad-center.svelte-zfyaeq {
    background: radial-gradient(circle, #0a0a0a, #000000) !important;
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.9),
        inset 0 0 0 2px rgba(0, 0, 0, 0.5) !important;
}

/* D-Pad directional indicators - more visible */
.dpad-cross.svelte-i2avrx {
    background: #4a4a4a !important;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   A/B BUTTONS IMPROVEMENTS
   ======================================== */

/* A/B section - better positioning and sizing */
.ab-section.svelte-i2avrx,
.ab-buttons.svelte-zfyaeq {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.6rem, 1.5vw, 1rem) !important;
    justify-content: center !important;
    align-items: flex-end !important;
    transform: rotate(-5deg) !important;
}

/* A/B buttons - responsive sizing */
.ab-btn.svelte-i2avrx,
.action-button.svelte-zfyaeq {
    width: clamp(52px, 12vw, 68px) !important;
    height: clamp(52px, 12vw, 68px) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* A Button - vibrant and glossy like real GameBoy */
.ab-btn.btn-a.svelte-i2avrx,
.action-button.button-a.svelte-zfyaeq {
    background: radial-gradient(circle at 35% 35%,
        #ff5577 0%,
        #e63954 40%,
        #c92a47 70%,
        #9b1d3d 100%) !important;
    border: 3px solid rgba(0, 0, 0, 0.4) !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4) !important;
}

.ab-btn.btn-a.svelte-i2avrx:hover,
.action-button.button-a.svelte-zfyaeq:hover {
    filter: brightness(1.1) !important;
}

.ab-btn.btn-a.svelte-i2avrx:active,
.action-button.button-a.svelte-zfyaeq:active,
.ab-btn.btn-a.btn-pressed,
.action-button.button-a.btn-pressed {
    background: radial-gradient(circle at 35% 35%, 
        #e63954 0%, 
        #c92a47 40%, 
        #9b1d3d 70%, 
        #7a1530 100%) !important;
    box-shadow: 
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(3px) scale(0.96) !important;
}

/* B Button - vibrant purple */
.ab-btn.btn-b.svelte-i2avrx,
.action-button.button-b.svelte-zfyaeq {
    background: radial-gradient(circle at 35% 35%,
        #b77dd1 0%,
        #9b6aaf 40%,
        #7d4a8f 70%,
        #5d3a6f 100%) !important;
    border: 3px solid rgba(0, 0, 0, 0.4) !important;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.4) !important;
}

.ab-btn.btn-b.svelte-i2avrx:hover,
.action-button.button-b.svelte-zfyaeq:hover {
    filter: brightness(1.1) !important;
}

.ab-btn.btn-b.svelte-i2avrx:active,
.action-button.button-b.svelte-zfyaeq:active,
.ab-btn.btn-b.btn-pressed,
.action-button.button-b.btn-pressed {
    background: radial-gradient(circle at 35% 35%, 
        #9b6aaf 0%, 
        #7d4a8f 40%, 
        #5d3a6f 70%, 
        #4a2d5a 100%) !important;
    box-shadow: 
        inset 0 3px 10px rgba(0, 0, 0, 0.7),
        0 2px 4px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(3px) scale(0.96) !important;
}

/* Button letters - more prominent with depth */
.btn-letter.svelte-i2avrx,
.button-label.svelte-zfyaeq {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: clamp(16px, 3.5vw, 20px) !important;
    font-weight: 900 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 4px rgba(255, 255, 255, 0.2) !important;
    transform: rotate(10deg) !important;
}

/* ========================================
   CENTER CONTROLS (START/SELECT/SPEAKER)
   ======================================== */

/* Center controls - better alignment */
.center-controls.svelte-i2avrx {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.5rem, 1.5vw, 0.75rem) !important;
}

/* START/SELECT container */
.start-select-container.svelte-zfyaeq {
    display: flex !important;
    gap: clamp(0.75rem, 2vw, 1rem) !important;
}

/* START/SELECT buttons - More realistic pill shape */
.small-btn.svelte-i2avrx,
.start-select-btn.svelte-zfyaeq {
    background: linear-gradient(145deg,
        #6a6a6a 0%,
        #5a5a5a 40%,
        #4a4a4a 70%,
        #3a3a3a 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(1rem, 3vw, 1.5rem) !important;
    min-width: clamp(80px, 18vw, 100px) !important;
    min-height: clamp(32px, 8vw, 44px) !important;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 3px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
}

.small-btn.svelte-i2avrx:hover,
.start-select-btn.svelte-zfyaeq:hover {
    background: linear-gradient(145deg, 
        #707070 0%, 
        #606060 40%, 
        #505050 70%, 
        #404040 100%) !important;
}

.small-btn.svelte-i2avrx:active,
.start-select-btn.svelte-zfyaeq:active,
.small-btn.btn-pressed,
.start-select-btn.btn-pressed {
    background: linear-gradient(145deg, 
        #4a4a4a 0%, 
        #3a3a3a 40%, 
        #2a2a2a 70%, 
        #1a1a1a 100%) !important;
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(2px) !important;
}

/* Button labels - better contrast */
.btn-label.svelte-i2avrx,
.start-select-btn.svelte-zfyaeq span {
    color: #888 !important;
    font-size: clamp(9px, 2vw, 11px) !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15),
        0 -1px 0 rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   SPEAKER AND POWER INDICATOR
   ======================================== */

/* Speaker grille - better visibility */
.speaker-grille.svelte-i2avrx {
    margin-top: clamp(0.25rem, 1vw, 0.5rem) !important;
}

/* Speaker holes */
.speaker-holes.svelte-i2avrx {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: clamp(2px, 0.5vw, 4px) !important;
}

/* Speaker hole - more visible */
.hole.svelte-i2avrx {
    width: clamp(4px, 1vw, 6px) !important;
    height: clamp(4px, 1vw, 6px) !important;
    background: #3a3a3a !important;
    border-radius: 50% !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.9),
        0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Power indicator - better positioning */
.gb-power-indicator.svelte-i2avrx {
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.4rem, 1vw, 0.6rem) !important;
    margin-top: clamp(0.4rem, 1vw, 0.6rem) !important;
    padding-left: clamp(0.2rem, 0.5vw, 0.4rem) !important;
}

/* Power LED */
.power-led.svelte-i2avrx {
    width: clamp(7px, 1.5vw, 10px) !important;
    height: clamp(7px, 1.5vw, 10px) !important;
    border-radius: 50% !important;
    background: #3a1a1a !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.3s ease !important;
}

/* Power LED - brighter when on */
.power-led.led-on.svelte-i2avrx {
    background: radial-gradient(circle,
        #ff4444 0%,
        #ff0000 40%,
        #aa0000 100%) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 100, 100, 0.4),
        0 0 8px rgba(255, 0, 0, 0.6),
        0 0 12px rgba(255, 0, 0, 0.4) !important;
}

/* Power label */
.power-label.svelte-i2avrx {
    font-size: clamp(5px, 1.2vw, 7px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #4a4a6a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   GAMEBOY BODY STYLING
   ======================================== */

/* GameBoy body - more authentic gradient */
.gb-body.svelte-i2avrx {
    background: linear-gradient(135deg,
        #d0d0d0 0%,
        #c4c4c4 20%,
        #b0b0b0 50%,
        #a0a0a0 80%,
        #949494 100%) !important;
    position: relative !important;
    border-radius: 8px 8px 12px 12px !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Add subtle texture to GameBoy body */
.gb-body.svelte-i2avrx::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50% !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 100%) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.gb-body.svelte-i2avrx::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        ) !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    z-index: 0 !important;
}

/* Ensure all child elements are above pseudo-elements */
.gb-body.svelte-i2avrx > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   RESPONSIVE MEDIA QUERIES
   ======================================== */

/* Large Desktop - 1200px and up */
@media (min-width: 1200px) {
    .gb-body.svelte-i2avrx {
        max-width: 520px !important;
    }
}

/* Desktop - 769px to 1199px */
@media (min-width: 769px) and (max-width: 1199px) {
    .gb-body.svelte-i2avrx {
        max-width: 480px !important;
    }
}

/* Tablet landscape - 641px to 768px */
@media (min-width: 641px) and (max-width: 768px) {
    .gb-body.svelte-i2avrx {
        max-width: 440px !important;
        padding: 1.5rem 2rem 2rem !important;
    }

    .gb-controls.svelte-i2avrx {
        gap: 1.25rem !important;
    }
}

/* Tablet portrait and large phones - 481px to 640px */
@media (min-width: 481px) and (max-width: 640px) {
    .gb-body.svelte-i2avrx {
        max-width: 420px !important;
        padding: 1.25rem 1.75rem 1.75rem !important;
    }

    .gb-controls.svelte-i2avrx {
        gap: 1rem !important;
    }
}

/* Small phones - 320px to 480px */
@media (max-width: 480px) {
    .dmg-gameboy.svelte-i2avrx {
        padding: 0.5rem !important;
    }

    .gb-body.svelte-i2avrx {
        max-width: 100% !important;
        padding: 1rem 1.25rem 1.5rem !important;
    }

    .gb-controls.svelte-i2avrx {
        gap: 0.75rem !important;
    }

    .gb-branding.svelte-i2avrx {
        padding: 0.5rem 0 !important;
    }
}

/* Very small phones - 320px and below */
@media (max-width: 320px) {
    .gb-body.svelte-i2avrx {
        padding: 0.75rem 1rem 1.25rem !important;
    }

    .gb-controls.svelte-i2avrx {
        gap: 0.5rem !important;
    }
}

/* Landscape mode optimizations for mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .dmg-gameboy.svelte-i2avrx {
        min-height: auto !important;
        padding: 0.5rem !important;
    }

    .gb-body.svelte-i2avrx {
        max-width: 90vw !important;
        max-height: 95vh !important;
        padding: 0.75rem 1rem 1rem !important;
        gap: 0.5rem !important;
    }

    .gb-screen-area.svelte-i2avrx {
        padding: 0.5rem !important;
    }

    .gb-branding.svelte-i2avrx {
        padding: 0.25rem 0 !important;
        margin-bottom: 0 !important;
    }

    .nintendo-text.svelte-i2avrx {
        font-size: 16px !important;
    }

    .game-boy-text.svelte-i2avrx {
        font-size: 11px !important;
    }

    .gb-controls.svelte-i2avrx {
        gap: 0.75rem !important;
        padding: 0.25rem 0 !important;
    }

    .dpad.svelte-i2avrx {
        width: clamp(70px, 15vw, 90px) !important;
        height: clamp(70px, 15vw, 90px) !important;
    }

    .ab-btn.svelte-i2avrx,
    .action-button.svelte-zfyaeq {
        width: clamp(42px, 10vw, 56px) !important;
        height: clamp(42px, 10vw, 56px) !important;
    }

    .small-btn.svelte-i2avrx,
    .start-select-btn.svelte-zfyaeq {
        min-width: 70px !important;
        min-height: 28px !important;
        padding: 0.4rem 0.8rem !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Ensure crisp rendering on all displays */
.dpad-btn.svelte-i2avrx,
.dpad-button.svelte-zfyaeq,
.ab-btn.svelte-i2avrx,
.action-button.svelte-zfyaeq,
.small-btn.svelte-i2avrx,
.start-select-btn.svelte-zfyaeq {
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent text selection on controls */
.gb-controls.svelte-i2avrx,
.gb-controls.svelte-i2avrx *,
.gameboy-controls.svelte-zfyaeq,
.gameboy-controls.svelte-zfyaeq * {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Better touch targets for accessibility */
.dpad-btn.svelte-i2avrx,
.dpad-button.svelte-zfyaeq,
.ab-btn.svelte-i2avrx,
.action-button.svelte-zfyaeq,
.small-btn.svelte-i2avrx,
.start-select-btn.svelte-zfyaeq {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Smooth scrolling for the main container */
.dmg-gameboy.svelte-i2avrx {
    scroll-behavior: smooth !important;
}

/* Optimize rendering performance */
.gb-screen-glass.svelte-i2avrx,
.gb-canvas.svelte-i2avrx,
#gameCanvas {
    will-change: contents !important;
    transform: translateZ(0) !important;
}

/* ========================================
   DOT MATRIX AND LABELS
   ======================================== */

/* Dot matrix text - better visibility */
.dot-matrix-text.svelte-i2avrx {
    font-size: clamp(6px, 1.2vw, 8px) !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: #4a4a6a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Screen label - better positioning */
.gb-screen-label.svelte-i2avrx {
    margin-bottom: clamp(0.3rem, 1vw, 0.5rem) !important;
    text-align: left !important;
}

/* ========================================
   ADDITIONAL POLISH
   ======================================== */

/* Trademark symbol */
.tm.svelte-i2avrx {
    font-size: clamp(6px, 1.5vw, 8px) !important;
    vertical-align: super !important;
    margin-left: 2px !important;
}

/* Screen message (when no game loaded) */
.screen-message.svelte-i2avrx {
    font-size: clamp(11px, 2.5vw, 14px) !important;
    padding: 1rem !important;
    text-align: center !important;
}

/* Hidden canvas */
.gb-canvas.hidden.svelte-i2avrx {
    visibility: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
}