:root {
    /* Color Palette - Adjusted for Retro Console Theme (Famicom/GameBoy Vibe) */
    --bg-color: #D3CDBF;
    /* Darker beige world background */

    /* Device Colors */
    --device-body: #EEE4CB;
    /* Classic retro plastic beige */
    --device-shadow: #A89F8B;
    --device-accent: #8B4513;
    /* Dark decorative strips */

    /* Screen Colors */
    --screen-bezel: #5D4037;
    /* Dark bezel around screen */
    --screen-bg: #E8E4CE;
    /* Softer vintage LCD beige */

    /* UI Colors */
    --pixel-orange: #E67E22;
    --pixel-yellow: #F1C40F;
    --pixel-dark: #2C3E50;
    --led-red: #FF3333;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(var(--device-shadow) 15%, transparent 16%),
        radial-gradient(var(--device-shadow) 15%, transparent 16%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    font-family: 'VT323', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* 
   Pixelated Border Mixin Concept using Box Shadows 
   Since we can't use SCSS mixins here, we manually apply the shadow chains.
*/

/* PREVENT SCROLL BARS ON BODY IF POSSIBLE */
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--pixel-orange) var(--bg-color);
}

/* =========================================
   THE HANDHELD DEVICE CONTAINER
   ========================================= */
.retro-console {
    background-color: var(--device-body);
    position: relative;
    padding: 30px 20px;
    /* Adjusted padding */
    width: 100%;
    max-width: 500px;
    margin: 20px auto;

    /* The Pixelated Outline (Chunky Border) */
    box-shadow:
        /* Inner Highlight */
        inset 4px 4px 0 rgba(255, 255, 255, 0.5),
        inset -4px -4px 0 rgba(0, 0, 0, 0.1),
        /* The "Border" - spread 0, distinct distinct steps can be simulated or just thick line */
        0 0 0 6px var(--pixel-dark),
        /* Outer Shadow */
        10px 10px 0 rgba(0, 0, 0, 0.2);

    /* Rounded Corners (Softened) */
    border-radius: 30px;
}

/* Decorative stripes on the device body */
.retro-console::before {
    content: '';
    position: absolute;
    bottom: 25px;
    right: 20px;
    width: 60px;
    height: 60px;
    /* Speaker Grills */
    background-image: linear-gradient(to bottom, var(--device-shadow) 50%, transparent 50%);
    background-size: 100% 8px;
    /* Stripes */
    transform: rotate(-15deg);
    opacity: 0.3;
    pointer-events: none;
}

/* =========================================
   THE SCREEN AREA
   ========================================= */
.console-screen-bezel {
    background-color: var(--pixel-dark);
    /* Dark grey bezel */
    padding: 20px 20px 5px 20px;
    border-radius: 20px 20px 40px 20px;
    /* Softened bezel curve */
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
    position: relative;
}

.console-screen-bezel::after {
    /* Power LED */
    content: 'BATTERY';
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%) rotate(-90deg);
    color: #555;
    font-size: 0.6rem;
    font-family: sans-serif;
    font-weight: bold;
}

.power-led {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 8px;
    height: 8px;
    background-color: #333;
    /* Off */
    border-radius: 50%;
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.power-led.on {
    background-color: var(--led-red);
    box-shadow: 0 0 5px var(--led-red);
}

.screen-glass {
    background-color: #9CAC95;
    /* Classic greenish LCD tone base */
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    /* Glare */
    padding: 4px;
    /* Inset look */
    border-radius: 6px;
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.inner-content {
    background-color: var(--screen-bg);
    /* The lighted pixels */
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #332;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

/* Scanlines on Screen Only */
.inner-content::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%);
    z-index: 5;
    background-size: 100% 4px;
    pointer-events: none;
}

/* =========================================
   TYPOGRAPHY & CONTENT
   ========================================= */
h1 {
    font-family: 'Press Start 2P', cursive;
    font-size: 1.5rem;
    color: var(--pixel-orange);
    text-shadow: 2px 2px 0px var(--pixel-yellow);
    margin: 1rem 0;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    width: 100%;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--pixel-dark);
    margin-bottom: 1rem;
    text-align: center;
}

.highlight {
    background: var(--pixel-yellow);
    color: var(--pixel-dark);
    padding: 0 2px;
}

/* TERMINAL LOG */
.terminal-log {
    width: 100%;
    height: 140px;
    background: #222;
    color: var(--pixel-orange);
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    padding: 8px;
    overflow: hidden;
    position: relative;
    border: 2px solid #555;
    margin-bottom: 1rem;
}

.log-line {
    margin-bottom: 4px;
    opacity: 0;
    animation: fadeIn 0.1s forwards;
}

/* PROGRESS BAR */
.loading-wrapper {
    width: 100%;
    margin-bottom: 1rem;
}

.loading-text {
    font-family: 'Press Start 2P';
    font-size: 0.5rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.progress-bar {
    height: 16px;
    border: 2px solid var(--pixel-dark);
    padding: 1px;
}

.progress-fill {
    height: 100%;
    background: var(--pixel-orange);
    width: 0%;
    animation: load 3s infinite steps(10);
}

/* =========================================
   CONTROLS & CONTACT AREA
   ========================================= */
.controls-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 0;
}

/* D-PAD (Decorative) */
.d-pad {
    width: 90px;
    height: 90px;
    position: relative;
}

.d-pad-h,
.d-pad-v {
    position: absolute;
    background: #444;
    border-radius: 4px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.d-pad-h {
    width: 100%;
    height: 30px;
    top: 30px;
    left: 0;
}

.d-pad-v {
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
}

.d-pad::after {
    content: '';
    /* Center circle */
    position: absolute;
    top: 35px;
    left: 35px;
    width: 20px;
    height: 20px;
    background: #3a3a3a;
    border-radius: 50%;
}

/* ACTION BUTTONS (The Contact Link) */
.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* The actual contact badge styled as "A/B Buttons" panel or a Cartridge */
.contact-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #E74C3C;
    /* A/B Button Red */
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P';
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.1s;
}

.action-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.action-btn.secondary {
    margin-top: 15px;
    /* Offset like GBA/GB */
}

/* The Label containing the email */
.contact-label-box {
    background: #b0a080;
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid #8b7d60;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-top: -10px;
    /* Overlap nicely */
}

.contact-email {
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    display: block;
}

.contact-email:hover {
    color: #E74C3C;
}

/* SELECT / START strip */
.start-select-group {
    /* Responsive Fix: Static position to avoid overlapping */
    position: static;
    transform: none;
    margin: 30px auto 0;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.ss-btn {
    width: 50px;
    height: 12px;
    background: #999;
    border-radius: 10px;
    transform: rotate(-25deg);
    border: 1px solid #777;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Footer / Branding on Device */
.nintendo-logo-fake {
    font-family: 'Press Start 2P';
    font-size: 0.7rem;
    color: #aaa;
    margin-top: 10px;
    letter-spacing: 1px;
    font-style: italic;
    opacity: 0.7;
}

/* Animations */
@keyframes load {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

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

/* Responsive */
@media (max-width: 500px) {
    .retro-console {
        width: 95%;
        padding: 20px 10px;
    }

    .console-screen-bezel {
        padding: 15px 10px;
    }

    h1 {
        font-size: 1.1rem;
    }

    .subtitle {
        font-size: 1rem;
    }
}