:root {
    /* GLOBAL TYPES */
    --type-grass: #78c850;
    --type-poison: #a040a0;
    --type-fire: #f08030;
    --type-water: #6890f0;
    --type-bug: #a8b820;
    --type-normal: #a8a878;
    --type-electric: #f8d030;
    --type-ground: #e0c068;
    --type-fairy: #ee99ac;
    --type-fighting: #c03028;
    --type-psychic: #f85888;
    --type-rock: #b8a038;
    --type-ghost: #705898;
    --type-ice: #98d8d8;
    --type-dragon: #7038f8;
    --type-steel: #b8b8d0;
    --type-dark: #705848;
    --type-flying: #a890f0;

    /* DEFAULT THEME (Modern Red) */
    --theme-primary: #dc0a2d;
    --theme-primary-dark: #8b0000;
    --theme-accent: #ffcc00;
    --theme-bg: #1a1a2e;
    --theme-bg-pattern: radial-gradient(#2a2a3e 15%, transparent 16%);
    --theme-card-back: #1f2029;
    --theme-card-front: #fff;
    --theme-card-border: #d8d8d8;
    --theme-text-main: #fff;
    --theme-text-muted: #6e7c85;
    --theme-footer-bg: #2C2E38;
    --theme-pill-bg: rgba(30, 35, 50, 0.8);
    --theme-pill-border: #333;
    --theme-pill-text: #aaa;
    --theme-input-bg: #fff;
    --theme-input-text: #000;
    --theme-input-shadow: #d9d9d9;
    --theme-btn-text: #fff;
    --theme-box-shadow: rgba(0, 0, 0, 0.2);
    --theme-mode-bg: rgba(0, 0, 0, 0.2);
    --theme-mode-border: rgba(255, 255, 255, 0.1);

    /* Logic Variables */
    --font-main: 'Roboto', sans-serif;
    --filter-sprite: none;
    --card-radius: 20px;
    --card-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    --svg-fill: #232323;
    --svg-stroke: #232323;
}

/* GAMEBOY THEME (DMG-01 Green) */
[data-theme="gameboy"] {
    --theme-primary: #306230;
    --theme-primary-dark: #0f380f;
    --theme-accent: #0f380f;
    --theme-bg: #9bbc0f;
    --theme-bg-pattern: none;
    --theme-card-back: #8bac0f;
    --theme-card-front: #9bbc0f;
    --theme-card-border: #0f380f;
    --theme-text-main: #0f380f;
    --theme-text-muted: #306230;
    --theme-footer-bg: #0f380f;
    --theme-pill-bg: #8bac0f;
    --theme-pill-border: #0f380f;
    --theme-pill-text: #0f380f;
    --theme-input-bg: #9bbc0f;
    --theme-input-text: #0f380f;
    --theme-input-shadow: #306230;
    --theme-btn-text: #9bbc0f;
    --theme-box-shadow: none;
    --theme-mode-bg: #8bac0f;
    --theme-mode-border: #0f380f;

    /* Retro Overrides */
    --font-main: 'Press Start 2P', cursive;
    --filter-sprite: grayscale(100%) brightness(0.9) sepia(1) hue-rotate(50deg) saturate(3) contrast(1.2);
    --card-radius: 5px;
    --card-shadow: 10px 10px 0 #0f380f;
    --svg-fill: #0f380f;
    --svg-stroke: #0f380f;
}

/* GAMEBOY COLOR THEME (Atomic Purple) */
[data-theme="gbc"] {
    --theme-primary: #5e35b1;
    --theme-primary-dark: #311b92;
    --theme-accent: #fbc02d;
    --theme-bg: #121212;
    --theme-card-back: #263238;
    --theme-text-muted: #b0bec5;
    --theme-footer-bg: #000000;
    --font-main: 'Press Start 2P', cursive;
}

/* =========================================
           GLOBAL STYLES
           ========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: var(--theme-bg);
    background-image: var(--theme-bg-pattern);
    background-size: 20px 20px;
    font-family: var(--font-main);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background 0.3s ease;
    color: var(--theme-text-main);
}

#pokedex-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-items: center;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --- Header --- */
.pokedex-header {
    width: 100%;
    background-color: var(--theme-primary);
    padding: 15px 20px;
    box-shadow: 0 4px 6px var(--theme-box-shadow);
    z-index: 1000;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.3s ease;
}

.header-content {
    width: 100%;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.uk-title {
    margin: 0;
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
}

.pokeball-icon {
    width: 28px;
    height: 28px;
}

.theme-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

[data-theme="gameboy"] .theme-btn {
    color: #0f380f;
}

[data-theme="gameboy"] .theme-icon {
    filter: none;
}

[data-theme="gameboy"] .pokeball-icon path {
    fill: #306230;
}

[data-theme="gameboy"] .pokeball-icon circle[fill="#fff"] {
    fill: #9bbc0f;
}

[data-theme="gameboy"] .pokeball-icon rect {
    fill: #0f380f;
}

[data-theme="gameboy"] .pokeball-icon circle[stroke="#232323"] {
    stroke: #0f380f;
}

/* --- CONTACT FORM (Global Style) --- */
#contact-container {
    width: 90%;
    max-width: 400px;
    margin: 20px auto;
    background: var(--theme-pill-bg);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--theme-pill-border);
    text-align: center;

    /* --- FORCE VERTICAL STACK (ALL SCREENS) --- */
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: stretch;
    /* Stretches inputs to full width */
}

.contact-title {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    color: var(--theme-accent);
    margin-top: 0;
    margin-bottom: 5px;
    /* Reduced margin since gap handles it */
    text-transform: uppercase;
}

/* Ensure inputs fill the space */
.contact-input,
.contact-msg {
    width: 100% !important;
    margin: 0 !important;
    /* Reset margins, let gap handle it */
    box-sizing: border-box;
    font-size: 11px;
}

.contact-msg {
    height: 200px;
    resize: none;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
}

/* Theme override for Gameboy */
[data-theme="gameboy"] .contact-title {
    color: #0f380f;
}

/* --- MODE TABS --- */
.mode-nav-container {
    width: 100%;
    display: flex;
    justify-content: center;

    /* 1. SOLID BACKGROUND (Covers the dots) */
    background-color: #050509;
    /* Matches your theme dark blue */
    /* OR use Black: background-color: #000000; */

    padding: 10px 0;

    /* 2. VISIBLE BOTTOM LINE */
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    /* Bright white line */

    /* 3. LAYERING (Ensures it sits on top) */
    position: relative;
    z-index: 900;
}

[data-theme="gameboy"] .mode-nav-container {
    border-bottom: 2px solid #0f380f;
}

.mode-tabs {
    display: flex;
    gap: 20px;
}

.mode-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-main);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    transition: all 0.2s;
}

[data-theme="gameboy"] .mode-btn {
    color: #306230;
    border-color: #306230;
}

.mode-btn:hover {
    border-color: var(--theme-accent);
    color: var(--theme-accent);
}

.mode-btn.active-mode {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="gameboy"] .mode-btn.active-mode {
    background: #0f380f;
    border-color: #0f380f;
    color: #9bbc0f;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
}


/* --- Dropdowns --- */
.dropdown {
    position: relative;
}

.theme-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.dropbtn {
    background-color: var(--theme-primary-dark);
    color: white;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-main);
    white-space: nowrap;
    transition: background-color 0.3s;
}

.gen-badge {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    background-color: #f8f8f8;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    border: 2px solid var(--theme-primary-dark);
}

.dropdown-content label,
.dropdown-content div {
    display: block;
    padding: 12px 15px;
    cursor: pointer;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    font-family: 'Roboto', sans-serif;
}

.dropdown-content label:hover,
.dropdown-content div:hover {
    background-color: #ffebee;
}

.show {
    display: block;
}

/* --- Main Content --- */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 100%;
    gap: 20px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* =========================================
       POKEDEX BACKGROUND (Dynamic SVG)
        ========================================= */

.poke-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    /* Dark radial background */
    background: radial-gradient(circle at center, #1a1a2e 0%, #000 100%);
}

.tech-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Subtle Grid Pattern */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
}

/* The SVG Container */
.tech-svg {
    position: absolute;
    left: 0;
    width: 100%;
    /* Spans full width */
    height: 100px;
    /* Tall enough for the jump */
    pointer-events: none;
    will-change: transform;
}

/* The Path Line itself */
.tech-path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: square;
    /* Sharp edges */
    /* DEFAULT: Cyan Glow */
    stroke: #00ffff;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.8));
}

/* Gameboy Theme Overrides */
[data-theme="gameboy"] .poke-bg-decor {
    background: #9bbc0f;
}

[data-theme="gameboy"] .tech-grid {
    background-image:
        linear-gradient(rgba(15, 56, 15, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 56, 15, 0.1) 1px, transparent 1px);
}

[data-theme="gameboy"] .tech-path {
    stroke: #0f380f;
    /* Dark Green */
    filter: none;
    opacity: 0.6;
}


/* =========================================
        WIDTH CONTROLS
        ========================================= */

.nav-buttons,
.scene-wrapper,
.hardcore-controls,
.mode-explanations {
    width: 85vw;
    max-width: 450px;
}

.top-controls-container {
    width: 95vw;
    max-width: 600px;
    /* Wider for the row */
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.toggles-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.stats-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}

.stat-pill {
    background-color: var(--theme-pill-bg);
    border: 1px solid var(--theme-pill-border);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: var(--theme-pill-text);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-pill #poke-id-display,
.stat-pill #total-count {
    color: var(--theme-text-main);
    font-weight: bold;
}

/* Mute Button */
.mute-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 0 10px;
    display: flex;
    align-items: center;
    color: var(--theme-text-main);
    opacity: 0.7;
    border-left: 1px solid var(--theme-pill-text);
    transition: opacity 0.2s;
}

.mute-btn:hover {
    opacity: 1;
}

.mute-btn svg {
    width: 16px;
    height: 16px;
}

/* Streak Counter */
.streak-pill {
    background: linear-gradient(135deg, #2e7d32, #43a047);
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 0 #1b5e20;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out;
    display: none;
    border: 2px solid #66bb6a;
}

[data-theme="gameboy"] .streak-pill {
    background: #8bac0f;
    color: #0f380f;
    border: 2px solid #0f380f;
    box-shadow: 2px 2px 0 #0f380f;
    text-shadow: none;
}

.streak-warm {
    background: linear-gradient(135deg, #bf360c, #f57c00);
    border-color: #ffb74d;
    box-shadow: 0 4px 0 #a83109;
}

.streak-hot {
    background: linear-gradient(135deg, #b71c1c, #ff5722);
    border-color: #ff8a65;
    box-shadow: 0 4px 0 #8e0000, 0 0 20px 5px #ff5722;
    animation: pulse-fire 1.2s infinite alternate ease-in-out;
}

@keyframes pulse-fire {
    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.05);
        filter: brightness(1.2);
        box-shadow: 0 4px 0 #8e0000, 0 0 25px 8px #ff5722;
    }
}

/* Toggles */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--theme-pill-bg);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid var(--theme-pill-border);
    position: relative;
    color: var(--theme-text-main);
}

/* Helper to hide logic for specific modes */
.only-flash-mode {
    /* Handled in JS via display property, but good to have class hook */
}

.toggle-label {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: .4s;
    border-radius: 34px;
}

[data-theme="gameboy"] .slider {
    background-color: #306230;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

[data-theme="gameboy"] .slider:before {
    background-color: #9bbc0f;
}

input:checked+.slider {
    background-color: #5780c1;
}

[data-theme="gameboy"] input:checked+.slider {
    background-color: #0f380f;
}

input:checked+.slider:before {
    transform: translateX(16px);
    background-color: white;
}

[data-theme="gameboy"] input:checked+.slider:before {
    background-color: #9bbc0f;
}

#hardcore-toggle:checked+.slider {
    background-color: #ff5722;
}

#silhouette-toggle:checked+.slider {
    background-color: #614ad3;
}

/* --- Tooltip --- */
.tooltip {
    visibility: hidden;
    background-color: #fff;
    color: #333;
    border-radius: 8px;
    padding: 8px;
    position: absolute;
    z-index: 9999;
    top: 150%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
    font-size: 11px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    border: 2px solid #333;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.tooltip.show-tip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: tip-wiggle 3s infinite ease-in-out;
}

.tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
}

.oak-sprite {
    width: 45px;
    height: 45px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    flex-shrink: 0;
}

.tooltip-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.tooltip-text span {
    color: #555;
    font-size: 9px;
    font-weight: normal;
}

.tooltip-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff5722;
    border: 2px solid #fff;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tooltip-close:hover {
    background: #d32f2f;
    transform: scale(1.1);
}

@keyframes tip-wiggle {

    0%,
    100% {
        transform: translateX(-50%) rotate(0deg);
    }

    5% {
        transform: translateX(-50%) rotate(-3deg);
    }

    10% {
        transform: translateX(-50%) rotate(3deg);
    }

    15% {
        transform: translateX(-50%) rotate(0deg);
    }
}

/* --- Hardcore Controls --- */
.hardcore-controls {
    display: none;
    flex-direction: column;
    gap: 12px;
    position: relative;
    cursor: text;
}

.input-row {
    display: flex;
    justify-content: center;
    /* Centers the button horizontally */
    width: 100%;
    /* Ensures the container spans full width */
    margin-top: 10px;
    /* Adds a little breathing room from the boxes */
}

.hc-input {
    flex: 1;
    padding: 12px 15px;
    border-radius: 12px;
    border: none;
    font-family: var(--font-main);
    font-size: 16px;
    outline: none;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-shadow: 0 4px 0 var(--theme-input-shadow);
    border: 2px solid transparent;
}

[data-theme="gameboy"] .hc-input {
    border-color: #306230;
}

.shake {
    animation: shake 0.5s;
    border: 2px solid var(--theme-primary);
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-5px);
    }

    40%,
    80% {
        transform: translateX(5px);
    }
}

/* GUESS BUTTON (Styled like Let's Battle, but smaller) */
.hc-submit {
    /* Base Colors & Font */
    background: #DC0A2D;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    /* Smaller text */
    text-transform: uppercase;

    /* Sizing */
    border: none;
    padding: 12px 15px;
    /* Compact padding */
    border-radius: 8px;
    cursor: pointer;

    /* Retro 3D Borders & Shadows */
    border: 3px solid #FF6262;
    box-shadow: inset 0 0 0 0 #725AC1, 4px 4px 0 0 #725AC1;
    /* Scaled down shadow */
    margin-top: -20px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Prevents squashing in flex row */
}

/* Hover Effect (Purple Fill + Red Shadow) */
.hc-submit:hover {
    color: white;
    box-shadow: inset 0 -50px 0 0 #725AC1, 4px 4px 0 0 #FF6262;
    transform: translate(-1px, -1px);
}

/* Active/Pressed Effect */
.hc-submit:active {
    transform: translate(2px, 2px);
    box-shadow: inset 0 -50px 0 0 #725AC1, 0px 0px 0 0 #FF6262;
}

.skip-link {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
    transition: color 0.2s;
}

[data-theme="gameboy"] .skip-link {
    color: #0f380f;
}

.skip-link:hover {
    color: var(--theme-text-main);
}

/* --- Mode Explanations --- */
.mode-explanations {
    text-align: left;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    background-color: var(--theme-mode-bg);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--theme-mode-border);
    margin-top: 10px;
}

[data-theme="gameboy"] .mode-explanations {
    color: #0f380f;
}

[data-theme="gameboy"] .mode-explanations h4,
[data-theme="gameboy"] .mode-explanations strong {
    color: #0f380f;
}

.mode-explanations h4 {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

.mode-explanations p {
    margin: 4px 0;
    display: flex;
    gap: 8px;
}

.mode-explanations strong {
    color: #fff;
    min-width: 70px;
}

/* --- Footer --- */
.pokedex-footer {
    background-color: var(--theme-footer-bg);
    width: 100%;
    padding: 20px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    box-sizing: border-box;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

[data-theme="gameboy"] .pokedex-footer {
    color: #8bac0f;
    border-top: 2px solid #0f380f;
}

.pokedex-footer p {
    margin: 6px 0;
}

.footer-link {
    color: var(--theme-accent);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- SEO SECTION STYLES --- */
.seo-content {
    max-width: 650px;
    margin: 50px auto;
    color: #b3b3b3;
    font-size: 15px;
    line-height: 1.7;
    font-family: 'Roboto', sans-serif;
    text-align: left;
    /* Ensure text isn't centered weirdly */
    width: 90%;
    /* <--- FIX: Takes up 90% of screen on mobile */
}

.seo-content h2 {
    color: white;
    font-size: 20px;
    border-bottom: 2px solid #dc0a2d;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

.seo-content p {
    margin-bottom: 20px;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .seo-content {
        margin: 30px auto;
        /* Reduce vertical gap on mobile */
        font-size: 14px;
        /* Slightly smaller text for better fit */
        width: 95%;
        /* Use even more width on very small phones */
    }
}

/* --- 3D Scene --- */
/* REDUCED MARGIN TO 25px */
.scene-wrapper {
    position: relative;
    height: 350px !important;
    transform: translateZ(0);
    margin-bottom: 25px;
}

.scene {
    width: 100%;
    height: 100%;
    perspective: 1200px;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas: "card";
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    cursor: pointer;
}

.card.is-flipped {
    transform: rotateY(180deg);
}

.card-face {
    grid-area: card;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--card-radius);
    box-sizing: border-box;
    box-shadow: var(--card-shadow);
}

/* Front */
.card-front {
    background-color: var(--theme-card-front);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 8px solid var(--theme-card-border);
    z-index: 2;
    transform: rotateY(0deg);
}

.card-front.silhouette-bg {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 40%),
        repeating-conic-gradient(from 0deg, #62cbf5 0deg 10deg, #184c85 10deg 20deg);
    border: 8px solid #19285b;
}

.card-front img {
    width: 85%;
    height: auto;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
    transition: filter 0.5s ease;
    z-index: 2;
}

[data-theme="gameboy"] .card-front img {
    filter: var(--filter-sprite) !important;
}

.silhouette {
    filter: brightness(0) contrast(200%) !important;
}

.tap-hint {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #ccc;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

[data-theme="gameboy"] .tap-hint {
    color: #0f380f;
    font-family: var(--font-main);
    font-size: 8px;
}

/* Back */
.card-back {
    background-color: var(--theme-card-back);
    transform: rotateY(180deg);
    border: 8px solid var(--theme-accent);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--theme-text-main);
    font-family: 'Press Start 2P', cursive;
}

.back-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-right-col {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pixel-id {
    color: var(--theme-accent);
    font-size: 14px;
}

.cry-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #4da6ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

[data-theme="gameboy"] .cry-label {
    color: #0f380f;
}

.cry-label:hover {
    color: var(--theme-text-main);
    transform: scale(1.05);
}

.cry-label svg {
    width: 14px;
    height: 14px;
}

.type-dot {
    width: 20px;
    height: 20px;
    background-color: #4da6ff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(77, 166, 255, 0.5);
}

[data-theme="gameboy"] .type-dot {
    background-color: #0f380f !important;
    box-shadow: none;
    border: 2px solid #306230;
}

.back-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pixel-name {
    font-size: 18px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    word-break: break-word;
}

.yellow-divider {
    width: 40px;
    height: 4px;
    background-color: var(--theme-accent);
}

.back-footer {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

[data-theme="gameboy"] .back-footer {
    border-color: #0f380f;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-label {
    font-family: var(--font-main);
    font-size: 9px;
    color: var(--theme-text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.footer-val {
    font-size: 9px;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Navigation */
.nav-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.nav-btn {
    flex: 1;
    border: none;
    padding: 12px 0;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s, box-shadow 0.1s;
}

.prev-btn {
    background-color: var(--theme-card-front);
    color: #000;
    box-shadow: 0 5px 0 #d9d9d9;
    margin-bottom: 5px;
}

[data-theme="gameboy"] .prev-btn {
    background-color: #8bac0f;
    color: #0f380f;
    box-shadow: 0 5px 0 #0f380f;
    border: 2px solid #0f380f;
}

.prev-btn:active {
    transform: translateY(5px);
    box-shadow: none;
}

.next-btn {
    background-color: var(--theme-primary);
    color: var(--theme-btn-text);
    box-shadow: 0 5px 0 var(--theme-primary-dark);
    margin-bottom: 5px;
}

.next-btn:active {
    transform: translateY(5px);
    box-shadow: none;
}

/* =========================================
   DUEL MODE BUTTON - ELECTRIFYING UPGRADE (V2)
   ========================================= */

/* 1. Base Button Styling */
#btn-mode-duel {
    position: relative;
    border: none !important;
    /* Remove standard border */
    background: transparent !important;
    color: #fff;
    z-index: 1;
    overflow: hidden;
    /* Clips the giant rotating background to the button shape */
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    font-weight: 900;
    letter-spacing: 1px;
}

/* 2. The Rotating Layer (Spark + Grey Base) */
#btn-mode-duel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400%;
    height: 400%;

    /* --- UPDATED GRADIENT (LONGER TRAIL) --- */
    background-image: conic-gradient(transparent 0deg,
            transparent 180deg,
            /* Changed from 280deg to 180deg (Longer start) */
            #ff0000 300deg,
            /* Adjusted red midpoint */
            #ffcc00 360deg
            /* Gold Head */
        );

    background-color: rgba(255, 255, 255, 0.3);
    /* The Grey Border Base */

    transform: translate(-50%, -50%);
    animation: spin-spark 4s linear infinite;
    z-index: -2;
}

/* 3. The Inner Background (The Mask) */
#btn-mode-duel::after {
    content: '';
    position: absolute;
    inset: 3px;
    /* Border Thickness */
    background: #050509;
    /* Matches your mode-nav-container background */
    border-radius: 6px;
    z-index: -1;
    transition: background 0.3s;
}

/* 4. Animation */
@keyframes spin-spark {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 5. Hover Effects */
#btn-mode-duel:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.8);
}

#btn-mode-duel:hover::before {
    animation-duration: 1.5s;
    /* Speed up! */
}

/* 6. Active State - Updated with Gradient */
#btn-mode-duel.active-mode {
    box-shadow: 0 0 20px rgba(220, 10, 45, 0.6);
    /* Matched to your red #DC0A2D */
    color: #fff;
    /* Do NOT add a background here, or it covers the spark border! */
}

#btn-mode-duel.active-mode::after {
    /* The Gradient goes here */
    background: linear-gradient(180deg, #DC0A2D, #a90722);
}

.keyboard-hint {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    text-align: center;
}

[data-theme="gameboy"] .keyboard-hint {
    color: #0f380f;
}

/* =========================================
        KEYBOARD HINTS (Desktop Only)
        ========================================= */
.key-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    font-weight: bold;
    margin-right: 8px;
    /* Space between key and label */
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    color: #eee;
    opacity: 0.8;
}

/* Hide hints on Mobile */
@media (max-width: 768px) {
    .key-hint {
        display: none !important;
    }
}

/* Keeps the spacing but hides the element visually */
.ghost-hint {
    visibility: hidden;
    opacity: 0;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--theme-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
    display: none;
    z-index: 5;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Desktop */
@media (min-width: 768px) {
    .scene-wrapper {
        height: 460px !important;
    }

    .uk-title {
        font-size: 1.4rem;
    }

    .pokeball-icon {
        width: 36px;
        height: 36px;
    }

    .dropbtn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .gen-badge {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .pixel-name {
        font-size: 26px;
    }

    .pixel-id {
        font-size: 16px;
    }

    .footer-label,
    .footer-val {
        font-size: 11px;
    }

    .nav-btn {
        font-size: 18px;
        padding: 15px 0;
    }

    .stat-pill {
        font-size: 16px;
    }

    .tap-hint {
        font-size: 13px;
    }

    .cry-label {
        font-size: 12px;
    }

    .battle-field {
        gap: 40px;
    }
}

/* ----------------------------------------------------------------
           BATTLE ARENA STYLES
           ---------------------------------------------------------------- */
.battle-arena {
    display: flex;
    /* Hidden by default */
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

/* HIDE FLASH CARD UI BY DEFAULT (Prevents Flicker) */
#flashcard-arena,
#flashcard-stats,
.only-flash-mode,
#nav-buttons,
#kb-hint {
    display: none;
}

.battle-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 3 Columns: Left side, Auto Center, Right side */
    align-items: center;
    /* Vertically Center */

    width: 90vw;
    max-width: 600px;
    background: var(--theme-pill-bg);
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--theme-pill-border);
}

/* --- COIN FLIP OVERLAY --- */
.coin-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 3000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.coin-message {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    margin-top: 30px;

    /* BLACK BOX STYLING */
    background: rgba(0, 0, 0, 0.9);
    padding: 15px 30px;
    border-radius: 12px;
    border: 3px solid #333;
    /* Default border, changed by JS */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);

    text-align: center;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    line-height: 1.5;
    text-transform: uppercase;
    min-width: 200px;
}

.coin {
    width: 160px;
    /* Fixed Width */
    height: 160px;
    /* Fixed Height */
    position: relative;
    transform-style: preserve-3d;
    flex-shrink: 0;
    /* PREVENT SQUASHING */
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.3), 0 0 20px rgba(0, 0, 0, 0.5);
    border: 4px solid #b8860b;
    background-color: #ffd700;
}

/* --- FRONT: PIKACHU (Host) --- */
.coin-front {
    transform: rotateX(0deg);
    background: #FFD700;
    /* Gold */
}

/* 8-BIT PIKACHU FACE (CSS Box Shadow Trick) */
.pixel-pikachu {
    width: 10px;
    height: 10px;
    background: transparent;
    box-shadow:
        /* Ears */
        -30px -40px 0 #000, 30px -40px 0 #000,
        -30px -30px 0 #F4D03F, 30px -30px 0 #F4D03F,

        /* Face Shape */
        -20px -20px 0 #F4D03F, -10px -20px 0 #F4D03F, 0 -20px 0 #F4D03F, 10px -20px 0 #F4D03F, 20px -20px 0 #F4D03F,
        -30px -10px 0 #F4D03F, -20px -10px 0 #F4D03F, -10px -10px 0 #F4D03F, 0 -10px 0 #F4D03F, 10px -10px 0 #F4D03F, 20px -10px 0 #F4D03F, 30px -10px 0 #F4D03F,

        /* Eyes (Black) & Cheeks (Red) */
        -20px 0 0 #000, 20px 0 0 #000,
        -30px 10px 0 #E74C3C, 30px 10px 0 #E74C3C,

        /* Nose & Mouth */
        0 0 0 #000, 0 10px 0 #000, -10px 10px 0 #F4D03F, 10px 10px 0 #F4D03F;

    transform: scale(1.5);
    /* Scale up the pixel art */
}

/* --- BACK: POKEBALL (Guest) --- */
.coin-back {
    transform: rotateX(180deg);
    background: #f2f2f2;
    border-color: #555;

    /* CSS Radial Gradient Pokeball */
    background:
        radial-gradient(circle at 50% 50%, #fff 15%, #232323 16%, #232323 22%, transparent 23%),
        linear-gradient(to bottom, #FF0000 46%, #232323 46%, #232323 54%, #fff 54%);
}

/* ANIMATIONS (Same as before) */
@keyframes spin-heads {
    0% {
        transform: rotateX(0);
    }

    100% {
        transform: rotateX(1800deg);
    }
}

@keyframes spin-tails {
    0% {
        transform: rotateX(0);
    }

    100% {
        transform: rotateX(1980deg);
    }
}

.anim-heads {
    animation: spin-heads 3s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

.anim-tails {
    animation: spin-tails 3s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

/* Container for the timer and its label */
.timer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    /* Space between text and number */
}

/* --- ROUND COUNTER --- */
.round-counter {
    background-color: var(--theme-pill-bg);
    /* Dark semi-transparent background */
    border: 1px solid var(--theme-pill-border);
    color: #fff;
    /* Gold/Yellow text */
    padding: 8px 24px;
    border-radius: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: -6px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;

    /* Ensure it starts invisible/neutral if needed, but standard block is fine */
}

/* The Bump Animation */
.round-counter.pulse {
    /* REMOVED static colors here so it reverts to white after animation */
    animation: round-bump 0.6s ease-in-out;
}

@keyframes round-bump {
    0% {
        transform: scale(1);
        color: #fff;
        border-color: var(--theme-pill-border);
    }

    50% {
        transform: scale(1.03);
        /* Larger bump (1.05 was too subtle) */
        color: #67D0C1;
        /* Change to Teal */
        border-color: #67D0C1;
        box-shadow: 0 0 15px rgba(103, 208, 193, 0.5);
        /* Add a glow */
    }

    100% {
        transform: scale(1);
        color: #fff;
        /* Return to White */
        border-color: var(--theme-pill-border);
    }
}

.score-box {
    text-align: center;
}

.score-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--theme-pill-text);
    display: block;
}

.score-val {
    font-size: 18px;
    font-weight: 900;
    color: var(--theme-text-main);

    /* --- REQUIRED FOR SCALE ANIMATION --- */
    display: inline-block;
    /* ----------------------------------------- */

    transition: color 0.3s;
    /* Smooth color transition */
}

/* =========================================
        SCORE ANIMATIONS
        ========================================= */

@keyframes score-grow {
    0% {
        transform: scale(1);
        color: #fff;
    }

    50% {
        transform: scale(2.5);
        color: #4caf50;
        text-shadow: 0 0 20px #4caf50;
    }

    100% {
        transform: scale(1);
        color: #fff;
    }
}

@keyframes score-shrink {
    0% {
        transform: scale(1);
        color: #fff;
    }

    50% {
        transform: scale(0.8);
        color: #f44336;
        text-shadow: 0 0 20px #f44336;
    }

    100% {
        transform: scale(1);
        color: #fff;
    }
}

.score-win {
    animation: score-grow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.score-loss {
    animation: score-shrink 0.4s ease-out forwards;
}

/* --- BATTLE ACTION BAR --- */
.action-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 600px;
    height: 50px;
    /* Shorter than scoreboard */
    margin-top: -17px;
    margin-bottom: -10px;
    gap: 15px;
    z-index: 5;
}

/* --- FLASHY SKIP BUTTON (Cosmic Style) --- */
.action-btn {
    position: relative;
    padding: 10px 24px;
    font-family: 'Press Start 2P', cursive;
    font-size: 9px;
    color: white;
    background: #222;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: visible;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    /* Gradient Border Trick */
    z-index: 1;
}

.action-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff, #ff00cc);
    background-size: 400%;
    z-index: -1;
    border-radius: 10px;
    animation: glowing-border 20s linear infinite;
}

.action-btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgb(0, 0, 0, 0.6);
    /* Inner dark background */
    border-radius: 6px;
    z-index: -1;
}

.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.6);
    color: #fff;
    text-shadow: 0 0 5px #00ccff;
}

.action-btn:hover::before {
    filter: blur(5px);
    /* Glow effect */
}

@keyframes glowing-border {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

/* --- DISABLED STATE (Fixed for Tooltips) --- */
.action-btn.disabled {
    /* REMOVED: opacity: 0.5; (This was making the tooltip transparent too!) */
    cursor: not-allowed;
    filter: grayscale(100%);
    /* Keeps the greyed-out look */
    pointer-events: auto;
    /* Essential: Allows the mouse to trigger the hover */
    transform: none !important;
    box-shadow: none !important;

    /* Dim the text color instead of the whole element */
    color: rgba(255, 255, 255, 0.5);
}

/* Dim the background layers independently */
.action-btn.disabled::before,
.action-btn.disabled::after {
    opacity: 0.5;
}

/* --- TOOLTIP ON HOVER --- */
.action-btn .btn-tooltip {
    visibility: hidden;
    width: 200px;
    background-color: #202334;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    border: 2px solid #FF6262;
    pointer-events: none;
    text-shadow: none;
}

.action-btn:hover .btn-tooltip {
    visibility: visible;
    opacity: 1;
}

/* --- HYPER BEAM VISUALS (Consolidated Fix) --- */

/* 1. The Earthquake Shake (Applied to Main Card) */
.earthquake {
    /* Use !important to override any winner/loser idle animations */
    animation: earthquake 0.1s linear infinite !important;
}

@keyframes earthquake {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-3px, 3px);
    }

    50% {
        transform: translate(3px, -3px);
    }

    75% {
        transform: translate(-3px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* 2. The Attacker's Glow Container */
.hyper-beam-cast {
    position: relative;
    z-index: 100 !important;

    /* FIX: Force content to be visible, overriding the winner-anim clipping */
    overflow: visible !important;
}

/* FIX: Hide the 'Silver Sheen' from the winner animation 
   because we un-cropped the container. */
.hyper-beam-cast::after {
    display: none !important;
}

/* 3. The Neon Pulse (Border Flash) */
.hyper-beam-cast .b-card-face {
    border-color: #fff !important;
    box-shadow: 0 0 20px #00ccff, 0 0 50px #00ccff;
    animation: beam-pulse 0.1s infinite alternate;
}

/* 4. The "Pure Energy" Look (Image Flash) */
.hyper-beam-cast .b-img {
    filter: brightness(1.3) drop-shadow(0 0 15px #00ccff);
    animation: energy-surge 0.1s infinite alternate;
}

/* 5. THE AURA (Moved to .b-card-inner to fix corners) */
.hyper-beam-cast .b-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Fill the card exactly */
    width: 100%;
    height: 100%;

    /* FORCE Rounded Corners */
    border-radius: var(--card-radius, 20px);

    /* The Glow Spread */
    box-shadow:
        0 0 20px 10px rgba(255, 255, 255, 0.9),
        0 0 40px 30px #00ccff,
        0 0 100px 60px rgba(0, 204, 255, 0.5);

    background: transparent;

    /* Push it behind the card content */
    transform: translateZ(-50px);

    /* Animation */
    animation: aura-pulse 0.1s infinite alternate;

    z-index: -1;
    pointer-events: none;
}

/* 6. Animations */
@keyframes beam-pulse {
    from {
        border-color: #00ccff;
        box-shadow: 0 0 20px #00ccff;
    }

    to {
        border-color: #fff;
        box-shadow: 0 0 50px #fff, 0 0 100px #00ccff;
    }
}

@keyframes energy-surge {
    from {
        transform: scale(1);
        filter: brightness(1.3) drop-shadow(0 0 10px #00ccff);
    }

    to {
        transform: scale(1.02);
        filter: brightness(2.0) drop-shadow(0 0 25px #fff);
    }
}

@keyframes aura-pulse {
    from {
        opacity: 0.8;
        transform: translateZ(-50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateZ(-50px) scale(1.05);
    }
}


/* --- DODGE ANIMATION (High Speed Sidestep) --- */
.dodge-anim {
    animation: dodge-move 0.5s ease-out forwards;
}

@keyframes dodge-move {
    0% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }

    20% {
        /* Slide Left + Speed Blur */
        transform: translateX(-60px) skewX(-15deg);
        opacity: 0.7;
        filter: blur(2px);
    }

    40% {
        /* Slide Right (Overcorrection) */
        transform: translateX(40px) skewX(10deg);
        opacity: 0.7;
        filter: blur(2px);
    }

    60% {
        /* Stabilize */
        transform: translateX(-10px);
        opacity: 0.9;
        filter: blur(0);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* --- GROWTH ABILITY VISUALS --- */
/* 1. The Trigger Animation (Faster Flow + Glow) */
/* Define the custom property for rotation */
@property --growth-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* --- GROWTH ABILITY VISUALS --- */

/* 1. The Trigger Animation (Rotating Conic Gradient + Glow) */
.growth-trigger {
    position: relative;
    overflow: visible !important;
    z-index: 10;
}

.growth-trigger::before {
    content: '';
    position: absolute;
    /* Negative inset creates the border thickness (4px visible) */
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;

    /* THE ROTATING GRADIENT */
    /* Replaced 'transparent' with Dark Green (#1a4d1a) */
    background: conic-gradient(from var(--growth-angle),
            #205e20 0%,
            /* Dark Green Base */
            #2f8e2f 10%,
            /* Dark Green Base */
            #32cd32 40%,
            /* Trail */
            #ccff00 50%,
            /* Bright Head */
            #32cd32 60%,
            /* Trail */
            #32cd32 90%
            /* Dark Green Base */
        );

    border-radius: var(--card-radius);
    z-index: -1;
    /* Behind the card */

    /* NEON GLOW */
    box-shadow: 0 0 15px rgba(50, 205, 50, 0.8),
        0 0 30px rgba(50, 205, 50, 0.8);

    /* ANIMATION SPEED: 0.8s (Fast Spin) */
    animation: growth-spin 0.8s linear infinite;
}

/* Rotate the angle from 0 to 360 degrees */
@keyframes growth-spin {
    to {
        --growth-angle: 360deg;
    }
}

.growth-effect {
    animation: growth-surge 1.5s infinite ease-in-out !important;
}

/* Stat Boost Text Indicator */
.stat-boosted .s-val {
    color: #76ff03;
    text-shadow: 0 0 5px rgba(118, 255, 3, 0.5);
}

.stat-boosted .s-val::after {
    content: ' ▲';
    font-size: 8px;
    vertical-align: middle;
}


/* --- BATON PASS ANIMATIONS --- */
@keyframes baton-out {
    0% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(-120%) skewX(-20deg);
        opacity: 0;
    }
}

@keyframes baton-in {
    0% {
        transform: translateX(120%) skewX(20deg);
        opacity: 0;
    }

    100% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }
}

.baton-exit {
    animation: baton-out 0.4s ease-in forwards;
}

.baton-enter {
    animation: baton-in 0.4s ease-out forwards;
}

/* Green "Tech" Style for Baton Button */
#btn-baton::before {
    background: linear-gradient(45deg, #00ff00, #ccff00, #00ff99, #00ff00);
}

.battle-timer {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    width: 50px;
    text-align: center;
}

.timer-warning {
    color: #ff5722;
    animation: pulse-red 0.5s infinite;
}

@keyframes pulse-red {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.battle-field {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
    perspective: 1000px;
    flex-wrap: wrap;
    transition: filter 0.3s;
}

.battle-preview {
    /* Added brightness(40%) to make it significantly darker */
    filter: grayscale(100%) brightness(50%) opacity(1);
    pointer-events: none;
}

/* Battle Start Overlay */
.battle-start-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    text-align: center;
    width: 100%;
}

/* "Dangerous Otter" Style + Solid Retro Shadow */
.start-btn {
    position: relative;
    display: inline-block;
    padding: 15px 30px;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    /* Base text color (purple) */
    background: #DC0A2D;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid #FF6262;
    /* Slightly thicker border */
    border-radius: 10px;
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;
    /* First shadow: The inset fill effect (hidden initially)
       Second shadow: The solid retro drop shadow (6px offset, 0 blur)
    */
    box-shadow: inset 0 0 0 0 #725AC1, 6px 6px 0 0 #725AC1;
}

.start-btn:hover {
    color: white;
    /* Fill the button with purple, keep the red shadow */
    box-shadow: inset 0 -100px 0 0 #725AC1, 6px 6px 0 0 #FF6262;
    /* Slight pop up effect */
    transform: translate(-2px, -2px);
}

.start-btn:active {
    /* Press button down to meet the shadow */
    transform: translate(4px, 4px);
    /* Hide the red shadow to simulate being pressed flat */
    box-shadow: inset 0 -100px 0 0 #725AC1, 0px 0px 0 0 #FF6262;
}

.start-controls {
    display: inline-flex;
    flex-direction: column;
    gap: 0px;
    /* Creates the space between box and button */
    align-items: stretch;
    /* Forces both to be the same width */
}

/* Deck Size Selector Styles */
.deck-selector {
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ds-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #ccc;
    margin: 0 0 10px 0;
    text-transform: uppercase;
}

/* Add this to your CSS */
.ds-info {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    /* Slightly smaller than the label */
    color: #4caf50;
    /* Retro Green to show it's a "Good" stat */
    margin: -5px 0 12px 0;
    /* Pull it up closer to the label */
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}

.ds-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.ds-btn {
    background: transparent;
    border: 2px solid #555;
    color: #888;
    padding: 8px 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.ds-btn:hover {
    border-color: #fff;
    color: #fff;
}

.ds-btn.active {
    background-color: var(--theme-primary);
    /* Uses your red/green theme */
    border-color: var(--theme-primary);
    color: #fff;
    box-shadow: 0 0 10px var(--theme-primary);
    transform: scale(1.1);
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10px);
    }
}

/* --- TILE WIPE ANIMATION (Safe) --- */
.battle-transition-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* Hidden default */
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
    z-index: 100;
    pointer-events: none;
}

.t-tile {
    background: transparent;
    transition: background-color 0.05s;
}

.t-tile.active {
    background-color: #000;
}

/* Battle Card */
.b-card {
    width: 45vw;
    max-width: 300px;
    height: 480px;
    perspective: 1000px;
    /* Essential for 3D effect */
    background: transparent;
    /* Container is invisible */
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

.b-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Snappy bounce */
    transform-style: preserve-3d;
}

/* Class to rotate the card (Show Back) */
.b-card.flipped .b-card-inner {
    transform: rotateY(180deg);
}

/* Instant reset for new rounds (No Animation) */
.b-card.no-anim .b-card-inner {
    transition: none !important;
}

[data-theme="gameboy"] .b-card {
    background: var(--theme-card-front);
    border-color: #0f380f;
    box-shadow: 5px 5px 0 #0f380f;
}

/* FRONT FACE (Stats & Image) */
.b-card-front {
    background: var(--theme-card-front);
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    transform: rotateY(0deg);
    /* Front is 0 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* BACK FACE (Pokeball Pattern) */
.b-card-back {
    background: var(--theme-card-back);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 10px, transparent 10px, transparent 20px);
    transform: rotateY(180deg);
    /* Back is 180 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* SHARED FACE STYLES */
.b-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Hides the back when flipped */
    border-radius: var(--card-radius);
    border: 6px solid var(--theme-card-border);
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Theme overrides */
[data-theme="gameboy"] .b-card-face {
    border-color: #0f380f;
    box-shadow: 5px 5px 0 #0f380f;
}

[data-theme="gameboy"] .b-card-front {
    background: var(--theme-card-front);
}

.b-card-back svg {
    width: 60px;
    height: 60px;
    opacity: 0.2;
    fill: var(--theme-text-main);
}

/* Card Back Icon Styling */
.b-back-icon {
    width: 60px;
    height: 60px;
    opacity: 0.8;
    /* Low opacity to blend with background */
    object-fit: contain;
    filter: grayscale(100%);
    /* Optional: Makes it grey to fit the dark theme */
}

.hidden {
    display: none !important;
}

/* Battle Card Content */
.b-img-container {
    width: 110%;
    height: 180px;
    /* Reduced height to fit stats */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.00);
    border-radius: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Don't squash image too much */
}

.b-img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.b-name {
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #333;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    line-height: 1.4;
    flex-shrink: 0;
}

[data-theme="gameboy"] .b-name {
    color: #0f380f;
}

.stat-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    justify-content: center;
}

/* Hardcore Masking */
.stat-list.masked .s-val {
    font-size: 0;
}

.stat-list.masked .s-val::after {
    content: '???';
    font-size: 12px;
}

.stat-list.disabled {
    opacity: 0.5;
    /* Make it look faded */
    pointer-events: none;
    /* Kills all clicks immediately */
    filter: grayscale(100%);
    /* Removes color */
}

.stat-list.disabled .stat-row {
    background: #222 !important;
    /* Force dark background */
    border-color: #333 !important;
    cursor: default;
    transform: none !important;
    /* No movement */
}

/* Kill the Shine Animation when disabled */
.stat-list.disabled .stat-row::before {
    display: none;
}

/* Updated Stat Row (With Shine Animation) */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2c3e50;
    /* Dark slate */
    color: #fff;
    /* White text */
    padding: 8px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    border: 2px solid transparent;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* For shine effect */
}

[data-theme="gameboy"] .stat-row {
    background: #0f380f;
    color: #9bbc0f;
    border: 1px solid #0f380f;
}

/* 1. Desktop Hover (Mouse Only) */
/* This ensures the red background NEVER sticks on mobile */
@media (hover: hover) {
    .stat-row.selectable:hover {
        background: #FF6262;
        color: #fff;
    }
}

/* 2. Mobile Touch Feedback */
/* This gives a quick flash of red when TAPPING, but disappears immediately */
.stat-row.selectable:active {
    background: #FF6262;
    color: #fff;
    transform: scale(0.98);
    /* Adds a nice little 'press' effect */
}

/* NEW SHINE ANIMATION */
.stat-row.selectable::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: all 0.6s;
}

.stat-row.selectable:hover::before {
    left: 100%;
}

/* Selected State */
.stat-row.selected {
    background: var(--theme-primary);
    color: #fff;
    border-color: var(--theme-primary-dark);
}

[data-theme="gameboy"] .stat-row.selected {
    background: #8bac0f;
    color: #0f380f;
}

.s-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.s-val {
    font-size: 12px;
    font-weight: 900;
}

.b-msg {
    width: 90vw;
    max-width: 600px;
    text-align: center;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    line-height: 1.5;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* =========================================
        BATTLE LOADER (Pixel Block Construction)
        ========================================= */
.b-img-container {
    position: relative;
}

/* The Container for the Grid */
.b-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    /* 8px * 8 columns */
    height: 64px;
    /* 8px * 8 rows */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 0;
    z-index: 5;
    /* Optional: Slight rotation to look dynamic */
    /* transform: translate(-50%, -50%) rotate(-10deg); */
}

/* Individual Pixels */
.b-pix {
    width: 100%;
    height: 100%;
    border-radius: 1px;

    /* NEW: Black Border for visibility */
    border: 1px solid #232323;
    box-sizing: border-box;
    /* Ensures border fits inside the square */

    transform: scale(0);
    animation: build-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite;
    animation-direction: alternate-reverse;

    /* Removed the old soft shadow, the border is cleaner */
    /* box-shadow: 1px 1px 0 rgba(0,0,0,0.1); */
}

/* Pixel Colors */
.p-red {
    background-color: #dc0a2d;
}

.p-black {
    background-color: #232323;
}

.p-white {
    background-color: #ffffff;
}

.p-trans {
    background-color: transparent;
    box-shadow: none;
}

/* The Pop-in Animation */
@keyframes build-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.b-img {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.b-img.loading {
    opacity: 0;
}

/* =========================================
        BATTLE BANNER STYLES
        ========================================= */

/* Player Wins: Green + Silver Sheen */
.msg-win {
    background-color: #4caf50 !important;
    /* Green */
    border-color: #81c784 !important;
    /* Lighter Green Border */
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* The Silver Sheen Effect for Banner */
.msg-win::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.1) 70%,
            transparent 100%);
    transform: skewX(-20deg);
    animation: shine-sweep 1s infinite linear;
    pointer-events: none;
}

/* CPU Wins: Red Background */
.msg-loss {
    background-color: #f44336 !important;
    /* Red */
    border-color: #e57373 !important;
    /* Lighter Red Border */
}

[data-theme="gameboy"] .b-msg {
    background: #8bac0f;
    color: #0f380f;
    border: 2px solid #0f380f;
}

/* Restart Battle Button */
.restart-battle-btn {
    background: #DC0A2D;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-main);
    margin-top: 10px;
    font-size: 12px;
    transition: all 0.2s;
}

.restart-battle-btn:hover {
    background: #DC0A2D;
    border: 2px solid var(--theme-accent);
    color: #fff;
}

[data-theme="gameboy"] .restart-battle-btn {
    color: #0f380f;
    border-color: #0f380f;
}


/* WINNER: Green Border + Golden Shine */
/* =========================================
        WINNER / LOSER ANIMATIONS
        ========================================= */

/* =========================================
   WINNER / LOSER ANIMATIONS (FIXED)
   ========================================= */

/* 1. Base State: Border Colors (Targeting the Faces) */
/* FIX: We must target .b-card-face because the parent .b-card has no border */
.winner-anim .b-card-face {
    border-color: #4caf50 !important;
    /* Green */
}

.loser-anim .b-card-face {
    border-color: #f44336 !important;
    /* Red */
}

/* 2. Player Specific Animations (Only #p-card moves/shines) */

/* Player Winner: Golden Pulse + Shine Sweep */
#p-card.winner-anim {
    position: relative;
    animation: silver-pulse 0.6s 1 forwards;
    overflow: hidden;
    /* Crops the sheen */
}

/* The Sheen Effect */
#p-card.winner-anim::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;

    /* Silver/White Shine Gradient */
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.1) 70%,
            transparent 100%);

    transform: skewX(-20deg);
    animation: shine-sweep 0.6s 1 linear;
    pointer-events: none;

    /* FIX: Z-Index must be higher than .b-card-inner (which is 5) */
    z-index: 10;
}

/* Player Loser: Impact Shake + Filter */
#p-card.loser-anim {
    animation: hit-shake 0.5s cubic-bezier(.16, .07, .19, .20) both;
    filter: grayscale(0.5) sepia(0) hue-rotate(-0deg) saturate(3);
}

@keyframes silver-pulse {
    0% {
        box-shadow: 0 0 15px rgba(192, 192, 192, 0.3), inset 0 0 10px rgba(192, 192, 192, 0.1);
        transform: scale(1);
    }

    50% {
        /* Peak of the pulse */
        box-shadow: 0 0 35px rgba(255, 255, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.4);
        transform: scale(1.05);
    }

    100% {
        /* Return to normal state */
        box-shadow: none;
        transform: scale(1);
    }
}

@keyframes shine-sweep {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes hit-shake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0) skewX(2deg);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0) skewX(-2deg);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-8px, 0, 0) skewX(4deg);
    }

    40%,
    60% {
        transform: translate3d(8px, 0, 0) skewX(-4deg);
    }
}

.loser-anim {
    filter: grayscale(100%);
    opacity: 0.6;
}

@keyframes win-glow {
    from {
        box-shadow: 0 0 10px #4caf50;
    }

    to {
        box-shadow: 0 0 25px #4caf50;
    }
}

/* End Game Overlay */
.battle-field.end-dimmed .b-card {
    filter: grayscale(100%) brightness(0.3);
    /* Dark & Grey */
    transition: filter 1s ease;
}

.end-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;

    /* Use Flex to center, but allow scrolling if screen is tiny */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.85);
    /* Darken bg slightly to help focus */
    padding: 0px;
    overflow-y: auto;
    /* Safety scroll for very small screens */
}

.end-img-wrapper {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    /* PREVENT SHRINKING */

    width: 100%;
    max-width: 800px;

    display: flex;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* FORCE MARGIN */
    margin: 0 auto 25px auto !important;

    background: transparent;
}

.end-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    /* Removes invisible bottom margin */
}

.wipe-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* 10 Columns */
    grid-template-rows: repeat(5, 1fr);
    /* 5 Rows */
    pointer-events: none;
}

.wipe-cell {
    background-color: #010102;
    /* Matches your background grey */
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Smooth fade for each block */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Subtle grid line */
}

.wipe-cell.cleared {
    opacity: 0;
}

/* 1. Base Button Style */
.end-btn {
    position: relative;
    z-index: 100;
    width: 100%;
    max-width: 350px;
    padding: 15px 0;
    text-align: center;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    background: #DC0A2D;
    cursor: pointer;
    border: 3px solid #FF6262;
    border-radius: 10px;
    font-family: 'Press Start 2P', cursive;
    text-transform: uppercase;

    /* Base Shadow (Retro 3D look) */
    box-shadow: inset 0 0 0 0 #725AC1, 6px 6px 0 0 #725AC1;

    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    flex-shrink: 0;

    /* HIDDEN STATE (Default) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.95);
    /* Start slightly smaller for pop-in effect */

    /* Hint to browser to optimize rendering */
    will-change: transform, opacity;

    /* TRANSITIONS */
    transition: opacity 0.5s ease,
        transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        /* Bouncy pop */
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}

/* 2. The "Show" State */
.end-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    /* Pop to normal size */
}

/* 3. Hover Effects - RESTRICTED TO VISIBLE STATE */
/* This prevents the "Ghost Hover" issue */
@media (hover: hover) {
    .end-btn.is-visible:hover {
        color: white;
        box-shadow: inset 0 -100px 0 0 #725AC1, 6px 6px 0 0 #FF6262;
        transform: translate(-2px, -2px) scale(1.02);
    }
}

/* 4. Active/Click State - RESTRICTED TO VISIBLE STATE */
.end-btn.is-visible:active {
    transform: translate(4px, 4px) scale(1);
    box-shadow: inset 0 -100px 0 0 #725AC1, 0px 0px 0 0 #FF6262;
}

@keyframes sheen-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    /* Expands slightly (2%) */
}

@keyframes pop-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================================
   HANGMAN / MASTER MODE GLOBAL STYLES
   ========================================= */

#hangman-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 5px 0 20px 0;
    /* Reduced top margin to bring it closer to lives */
    width: 100%;
}

.h-slot {
    width: 30px;
    height: 40px;

    /* VISUAL BOX STYLE: White Box */
    background: #ffffff;
    border: 2px solid #ccc;
    /* Clean grey border */
    border-radius: 4px;
    box-shadow: 0 4px 0 #bbb;
    /* 3D depth */

    /* TEXT HANDLING */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;

    /* HIDDEN BY DEFAULT (Text is black but hidden) */
    color: transparent !important;
    text-transform: uppercase;
    transition: all 0.2s;
    cursor: default;
    flex-shrink: 0;
}

/* REVEALED STATE: Show Black Text */
.h-slot.revealed {
    color: #222 !important;
    border-color: #fff;
    transform: translateY(4px);
    /* Push down effect */
    box-shadow: none;
    /* Flatten shadow */
    animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* SOLVED STATE (Green) */
.h-slot.solved {
    background: #4caf50 !important;
    color: #fff !important;
    border-color: #388e3c;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Gameboy Theme Override */
[data-theme="gameboy"] .h-slot {
    background: #9bbc0f;
    border-color: #0f380f;
    box-shadow: 3px 3px 0 #0f380f;
}

[data-theme="gameboy"] .h-slot.revealed {
    color: #0f380f !important;
    box-shadow: none;
}

/* --- PIXEL HEART LIVES --- */
#hangman-lives {
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    gap: 15px;
    /* Space between hearts */
    margin-bottom: -5px;
    margin-top: -25px;
    /* Very close to the boxes */
    height: 30px;
    /* Reserved height */
}

/* Pure CSS Pixel Heart (drawn using box-shadow on a 1px dot) */
.pixel-heart {
    position: relative;
    width: 4px;
    height: 4px;
    /* The "Pixel" size */
    margin-right: 16px;
    /* Space for the shadow to draw */
    margin-bottom: 16px;
    background: transparent;

    /* 5x5 Heart Matrix Drawing */
    box-shadow:
        4px 0 #ff3333, 12px 0 #ff3333,
        0 4px #ff3333, 4px 4px #ff3333, 8px 4px #ff3333, 12px 4px #ff3333, 16px 4px #ff3333,
        0 8px #ff3333, 4px 8px #ff3333, 8px 8px #ff3333, 12px 8px #ff3333, 16px 8px #ff3333,
        4px 12px #ff3333, 8px 12px #ff3333, 12px 12px #ff3333,
        8px 16px #ff3333;

    animation: heartbeat var(--beat-spd, 1.5s) infinite;
    transform-origin: center;
}

/* Empty Heart (Greyed out) */
.pixel-heart.lost {
    opacity: 0.3;
    filter: grayscale(100%);
    animation: none;
}

/* Heartbeat Animation */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    15% {
        transform: scale(1.1);
    }

    30% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}

/* --- BOXES AS INPUT (Hidden Input Field) --- */
#guess-input {
    /* Hide the input visually, but keep it focusable for keyboards */
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    /* Let clicks pass through to the container */
}

/* Make the grid look interactive */
#hangman-grid {
    cursor: text;
}

/* --- ACTIVE INPUT CURSOR --- */
.h-slot.active-input {
    border-color: #dcb450 !important;
    /* Green Focus */
    background: #f1f8e9;
    /* Very subtle green tint */
    transform: scale(1.1);
    /* Pop out slightly */
    z-index: 2;

    /* NEW: Pulsing Glow Animation */
    animation: cursor-pulse 1.5s infinite ease-in-out;
}

@keyframes cursor-pulse {
    0% {
        box-shadow: 0 0 5px rgba(200, 147, 25, 0.4);
        border-color: #dcb450;
    }

    50% {
        /* Brighter and wider glow */
        box-shadow: 0 0 15px rgba(200, 147, 25, 0.8);
        border-color: #dcb450;
        /* Brighter Green */
    }

    100% {
        box-shadow: 0 0 5px rgba(200, 147, 25, 0.4);
        border-color: #dcb450;
    }
}

/* Ensure pending (draft) letters look distinct from locked ones */
.h-slot.pending {
    color: #555 !important;
    border-color: #aaa;
    background: #fff;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
}

/* --- TICKING TEXT CURSOR (CARET) --- */

/* 1. Base Cursor Style (Hidden by default) */
.h-slot.active-input::after {
    content: '';
    display: none;
    /* Hidden unless focused */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 1px;
    height: 22px;
    /* Height of the cursor line */
    background-color: #424242;
    /* Dark Grey Cursor */
    border-radius: 2px;
    z-index: 10;

    /* The Blink Animation */
    animation: caret-blink 1.0s step-end infinite;
}

/* 2. Show Cursor ONLY when Grid is Focused (Typing Active) */
.hangman-grid.typing-active .h-slot.active-input::after {
    display: block;
}

/* 3. Animation Keyframes */
@keyframes caret-blink {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 0;
    }
}

/* 4. Gameboy Theme Override */
[data-theme="gameboy"] .h-slot.active-input::after {
    background-color: #0f380f;
    /* Dark Green Cursor */
}

/* --- DISABLED SPECIALS STYLE --- */
.action-btn.specials-disabled {
    border: 2px solid #f44336 !important;
    /* Bright Red Border */
    color: #f44336 !important;
    /* Red Text */
    background: #222 !important;
    /* Dark Background */
    box-shadow: none !important;
    filter: none !important;
    /* Override grayscale filter */
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hide the animated rainbow border when disabled */
.action-btn.specials-disabled::before {
    display: none !important;
}

/* =========================================
MOBILE LAYOUT OPTIMIZATIONS (GRID VERSION)
========================================= */

@media (max-width: 768px) {

    .b-card {
        display: block;
        width: 95%;
        max-width: 500px;
        height: 260px;
    }

    /* Grid layout moves to the FRONT FACE */
    .b-card-front {
        display: grid;
        padding: 5px;
        gap: 8px;
        grid-template-columns: 30% 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "img stats"
            "name stats";
    }

    /* 2. Map Elements to Grid Areas */
    .b-img-container {
        grid-area: img;
        width: 100%;
        height: 100%;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .b-img {
        height: 90%;
        width: 100%;
        object-fit: contain;
    }

    .b-name {
        grid-area: name;
        font-size: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        /* Added slight bottom margin */
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        align-self: start;
    }

    /* 3. Taller Stats Configuration */
    .stat-list {
        grid-area: stats;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Distribute evenly */
        gap: 4px;
    }

    .stat-row {
        flex: 1;
        padding: 0 12px;
        font-size: 10px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        /* Prevent wrapping on narrow screens */
    }

    .s-label {
        font-size: 9px;
    }

    /* Slightly larger for readability */
    .s-val {
        font-size: 11px;
    }

    /* 4. Overlay Adjustments */
    .battle-start-overlay {
        width: 90%;
    }

    /* FIX: Keep the background full width, but shrink the content wrapper */
    .end-overlay {
        width: 100%;
        height: 100%;
    }

    .end-overlay .end-img-wrapper {
        width: 90%;
        /* This adds the margins to the image instead of the background */
    }

    /* Adjust Card Back to cover the grid properly */
    .b-card-back {
        z-index: 20;
    }

    .b-back-icon {
        width: 50px;
        /* Slightly larger icon for the bigger card */
        height: 50px;
    }

    /* --- FIX 1: FORCE CARD CONTENT ON TOP OF AURA --- */
    .b-card {
        transform-style: preserve-3d;
        /* Ensure 3D space is respected */
    }

    .b-card-inner {
        position: relative;
        z-index: 5;
        /* Force content above the z-index: -1 aura */
        transform-style: preserve-3d;
        background: transparent;
        /* Ensure no background blocks the z-index logic */
    }
}