/* ============================================
   PORYGON TRAIL: KANTO EXPEDITION
   Game Boy inspired CSS
   ============================================ */

:root {
    --gb-darkest: #0f380f;
    --gb-dark: #306230;
    --gb-light: #8bac0f;
    --gb-lightest: #9bbc0f;
    --gb-bg: #7b8c2a;
    --gb-white: #c4cfa1;
    --gb-shadow: #0a2a0a;
    --gb-danger: #d3392a;
    --gb-danger-light: #ffb84d;
    --font-size-sm: 8px;
    --font-size-md: 10px;
    --font-size-lg: 14px;
    --font-size-xl: 18px;
}

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

body {
    background: #2a2a2a;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Press Start 2P', monospace;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

#game-wrapper {
    background: #8b8b73;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.1);
    position: relative;
}

#game-wrapper::before {
    content: 'PORYGON TRAIL';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: #5a5a4a;
    letter-spacing: 2px;
}

#game-screen {
    width: 640px;
    height: 576px;
    background: var(--gb-lightest);
    border: 4px solid var(--gb-darkest);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 20px rgba(15, 56, 15, 0.3);
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ============================================
   SCREEN BASE
   ============================================ */

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
    color: var(--gb-darkest);
    animation: screenFadeIn 0.3s ease-out;
}

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

/* Screen wipe-in for dramatic screens */
.encounter-screen,
.event-screen,
.gym-screen {
    animation: screenSlideIn 0.35s ease-out;
}

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

.gameover-screen {
    animation: screenShake 0.4s ease-out;
}

@keyframes screenShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.victory-screen {
    animation: victoryIn 0.6s ease-out;
}

@keyframes victoryIn {
    from { opacity: 0; transform: scale(0.9); }
    50% { transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/* ============================================
   PANELS & BOXES
   ============================================ */

.panel {
    border: 3px solid var(--gb-darkest);
    background: var(--gb-lightest);
    padding: 12px;
    margin-bottom: 8px;
}

.panel-dark {
    background: var(--gb-light);
}

.panel-header {
    font-size: var(--font-size-md);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--gb-darkest);
}

.text-box {
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 12px 16px;
    font-size: var(--font-size-sm);
    line-height: 2;
    min-height: 60px;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    font-family: 'Press Start 2P', monospace;
    font-size: var(--font-size-sm);
    background: var(--gb-light);
    color: var(--gb-darkest);
    border: 3px solid var(--gb-darkest);
    padding: 10px 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
    line-height: 1.4;
}

.btn:hover {
    background: var(--gb-darkest);
    color: var(--gb-lightest);
}

.btn:active {
    transform: scale(0.96);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: var(--gb-light);
    color: var(--gb-darkest);
}

.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-wide {
    width: 100%;
    text-align: center;
}

.btn-small {
    font-size: 7px;
    padding: 6px 10px;
}

.btn-confirm-danger {
    background: var(--gb-danger) !important;
    color: var(--gb-white) !important;
    border-color: var(--gb-shadow) !important;
    animation: btn-danger-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes btn-danger-pulse {
    from { box-shadow: 0 0 0 0 var(--gb-danger-light); }
    to { box-shadow: 0 0 0 3px var(--gb-danger-light); }
}

.travel-continue-wrap {
    padding: 8px 0 4px;
}

.btn-continue-main {
    font-size: 11px;
    padding: 14px 20px;
    letter-spacing: 2px;
}

/* ============================================
   TITLE SCREEN
   ============================================ */

.title-screen {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.title-logo {
    font-size: var(--font-size-xl);
    line-height: 1.8;
    color: var(--gb-darkest);
    text-shadow: 2px 2px 0 var(--gb-dark);
    margin-bottom: 8px;
}

.title-subtitle {
    font-size: var(--font-size-sm);
    color: var(--gb-dark);
    margin-bottom: 24px;
}

.title-art {
    font-size: 6px;
    line-height: 1.2;
    color: var(--gb-dark);
    white-space: pre;
    margin-bottom: 16px;
}

.title-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 280px;
}

.blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ============================================
   STARTER SCREEN
   ============================================ */

.starter-screen {
    justify-content: space-between;
}

.starter-choices {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.starter-card {
    border: 3px solid var(--gb-darkest);
    background: var(--gb-light);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    width: 180px;
    transition: all 0.15s;
}

.starter-card:hover {
    background: var(--gb-darkest);
    color: var(--gb-lightest);
}

.starter-card.selected {
    background: var(--gb-darkest);
    color: var(--gb-lightest);
    box-shadow: 0 0 0 3px var(--gb-light);
}

.starter-sprite {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    margin: 8px auto;
    display: block;
}

.starter-name {
    font-size: var(--font-size-md);
    margin-bottom: 6px;
}

.starter-bonus {
    font-size: 6px;
    line-height: 1.8;
    color: var(--gb-dark);
}

.starter-card:hover .starter-bonus,
.starter-card.selected .starter-bonus {
    color: var(--gb-light);
}

.name-input-area {
    text-align: center;
    margin: 12px 0;
}

.name-input {
    font-family: 'Press Start 2P', monospace;
    font-size: var(--font-size-md);
    background: var(--gb-white);
    color: var(--gb-darkest);
    border: 3px solid var(--gb-darkest);
    padding: 8px 12px;
    text-align: center;
    text-transform: uppercase;
    width: 200px;
    outline: none;
}

.name-input:focus {
    box-shadow: 0 0 0 2px var(--gb-dark);
}

/* ============================================
   TRAVEL SCREEN
   ============================================ */

.travel-screen {
    gap: 4px;
    padding: 8px;
    position: relative;
}

.travel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    padding: 6px 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-light);
}

.btn-map {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    background: var(--gb-light);
    color: var(--gb-darkest);
    border: 3px solid var(--gb-darkest);
    padding: 6px 10px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.1s;
}

.btn-map:hover {
    background: var(--gb-darkest);
    color: var(--gb-lightest);
}

.btn-map:active {
    transform: scale(0.96);
}

.travel-scene {
    height: 140px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.scene-terrain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.scene-sky {
    flex: 1;
    background: var(--gb-lightest);
}

.scene-ground {
    height: 44px;
    background: var(--gb-dark);
    position: relative;
    overflow: visible;
}

.scene-path {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--gb-light);
    border-top: 2px solid var(--gb-darkest);
    border-bottom: 2px solid var(--gb-darkest);
}

.scene-location-name {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Press Start 2P', monospace;
    font-size: var(--font-size-sm);
    color: var(--gb-darkest);
    background: var(--gb-lightest);
    padding: 4px 8px;
    border: 2px solid var(--gb-darkest);
    white-space: nowrap;
    z-index: 5;
}

/* Pixel Art Scene Elements */
.pixel-scene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--gb-dark);
    overflow: hidden;
}

.pixel-cloud {
    position: absolute;
    color: var(--gb-light);
    font-size: 7px;
    animation: cloudDrift 15s linear infinite;
}

@keyframes cloudDrift {
    from { transform: translateX(0); }
    to { transform: translateX(30px); }
}

.pixel-house {
    position: absolute;
    bottom: 5px;
    font-size: 10px;
    line-height: 1.1;
    color: var(--gb-darkest);
    text-align: center;
}

.pixel-building {
    position: absolute;
    bottom: 5px;
    font-size: 8px;
    line-height: 1.2;
    color: var(--gb-darkest);
    text-align: center;
}

.pixel-tree {
    position: absolute;
    bottom: 5px;
    font-size: 12px;
    line-height: 1;
    color: var(--gb-dark);
    text-align: center;
}

.pixel-stalactite {
    position: absolute;
    top: 0;
    font-size: 10px;
    color: var(--gb-dark);
}

.pixel-rock {
    position: absolute;
    font-size: 10px;
    color: var(--gb-dark);
}

.pixel-glow {
    position: absolute;
    font-size: 14px;
    color: var(--gb-light);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.pixel-wave {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 8px;
    color: var(--gb-dark);
    text-align: center;
    animation: waveBob 3s ease-in-out infinite;
}

.pixel-wave:nth-child(odd) {
    animation-delay: -1.5s;
}

@keyframes waveBob {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.pixel-island {
    position: absolute;
    font-size: 10px;
    color: var(--gb-darkest);
}

.pixel-mountain {
    position: absolute;
    bottom: 5px;
    font-size: 10px;
    line-height: 1;
    color: var(--gb-darkest);
    text-align: center;
}

.pixel-grass {
    position: absolute;
    font-size: 8px;
    color: var(--gb-dark);
}

.cave-scene .pixel-scene,
.cave-scene {
    background: var(--gb-darkest);
}

/* Party walking on path */
.scene-trainer {
    position: absolute;
    top: -6px;
    font-size: 10px;
    color: var(--gb-darkest);
    animation: trainerWalk 3s ease-in-out infinite;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    left: 8%;
    transition: left 0.5s ease;
}

@keyframes trainerWalk {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(8px); }
    100% { transform: translateX(0); }
}

/* Lead Pokemon sprite on path (legacy) */
.lead-pokemon-sprite {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    filter: brightness(0.8) sepia(1) hue-rotate(70deg) saturate(3);
    position: relative;
    top: -8px;
}

/* Trainer (Red) pixel sprite — Gen 1 Red/Blue overworld walking-down frame */
.trail-trainer-sprite {
    width: 22px;
    height: 26px;
    position: relative;
    flex-shrink: 0;
    z-index: 4;
    image-rendering: pixelated;
    animation: trailBounce 1.2s ease-in-out infinite;
    background: transparent;
    margin-right: 2px;
}

.trail-trainer-sprite::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    /* Gen 1 Red overworld sprite — walking down, 11x13 grid at 2px/pixel
       Matches the original RB sprite: cap, hair, face, jacket, legs
       GB palette: darkest=outline/hair, dark=cap/jacket, light=skin, white=lightest */
    box-shadow:
        /* Row 0: cap top */
        6px 0 var(--gb-darkest), 8px 0 var(--gb-darkest), 10px 0 var(--gb-darkest), 12px 0 var(--gb-darkest),
        /* Row 1: cap body */
        4px 2px var(--gb-darkest), 6px 2px var(--gb-dark), 8px 2px var(--gb-dark), 10px 2px var(--gb-dark), 12px 2px var(--gb-dark), 14px 2px var(--gb-darkest),
        /* Row 2: cap brim — wide */
        2px 4px var(--gb-darkest), 4px 4px var(--gb-dark), 6px 4px var(--gb-dark), 8px 4px var(--gb-darkest), 10px 4px var(--gb-dark), 12px 4px var(--gb-dark), 14px 4px var(--gb-dark), 16px 4px var(--gb-darkest),
        /* Row 3: hair + forehead */
        2px 6px var(--gb-darkest), 4px 6px var(--gb-darkest), 6px 6px var(--gb-light), 8px 6px var(--gb-light), 10px 6px var(--gb-light), 12px 6px var(--gb-light), 14px 6px var(--gb-darkest), 16px 6px var(--gb-darkest),
        /* Row 4: face — eyes */
        2px 8px var(--gb-darkest), 4px 8px var(--gb-light), 6px 8px var(--gb-darkest), 8px 8px var(--gb-light), 10px 8px var(--gb-light), 12px 8px var(--gb-darkest), 14px 8px var(--gb-light), 16px 8px var(--gb-darkest),
        /* Row 5: face — mouth */
        4px 10px var(--gb-darkest), 6px 10px var(--gb-light), 8px 10px var(--gb-light), 10px 10px var(--gb-dark), 12px 10px var(--gb-light), 14px 10px var(--gb-darkest),
        /* Row 6: neck/collar */
        4px 12px var(--gb-darkest), 6px 12px var(--gb-darkest), 8px 12px var(--gb-darkest), 10px 12px var(--gb-darkest), 12px 12px var(--gb-darkest), 14px 12px var(--gb-darkest),
        /* Row 7: jacket top */
        2px 14px var(--gb-darkest), 4px 14px var(--gb-darkest), 6px 14px var(--gb-darkest), 8px 14px var(--gb-darkest), 10px 14px var(--gb-darkest), 12px 14px var(--gb-darkest), 14px 14px var(--gb-darkest), 16px 14px var(--gb-darkest),
        /* Row 8: jacket + arms */
        0px 16px var(--gb-light), 2px 16px var(--gb-darkest), 4px 16px var(--gb-darkest), 6px 16px var(--gb-darkest), 8px 16px var(--gb-darkest), 10px 16px var(--gb-darkest), 12px 16px var(--gb-darkest), 14px 16px var(--gb-darkest), 16px 16px var(--gb-darkest), 18px 16px var(--gb-light),
        /* Row 9: lower jacket */
        4px 18px var(--gb-darkest), 6px 18px var(--gb-dark), 8px 18px var(--gb-dark), 10px 18px var(--gb-dark), 12px 18px var(--gb-dark), 14px 18px var(--gb-darkest),
        /* Row 10: legs top */
        4px 20px var(--gb-darkest), 6px 20px var(--gb-dark), 8px 20px var(--gb-darkest), 10px 20px var(--gb-dark), 12px 20px var(--gb-dark), 14px 20px var(--gb-darkest),
        /* Row 11: legs */
        4px 22px var(--gb-darkest), 6px 22px var(--gb-dark), 8px 22px var(--gb-darkest), 10px 22px var(--gb-darkest), 12px 22px var(--gb-dark), 14px 22px var(--gb-darkest),
        /* Row 12: feet */
        2px 24px var(--gb-darkest), 4px 24px var(--gb-darkest), 6px 24px var(--gb-darkest), 12px 24px var(--gb-darkest), 14px 24px var(--gb-darkest), 16px 24px var(--gb-darkest);
}

/* Party parade — base sprite styles */
.trail-pokemon-sprite {
    image-rendering: pixelated;
    filter: brightness(0.8) sepia(1) hue-rotate(70deg) saturate(3);
    position: relative;
    animation: trailBounce 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Size classes based on actual Pokemon dimensions */
.trail-pokemon-sprite.poke-size-s {
    width: 12px;
    height: 12px;
}

.trail-pokemon-sprite.poke-size-m {
    width: 18px;
    height: 18px;
}

.trail-pokemon-sprite.poke-size-l {
    width: 24px;
    height: 24px;
    z-index: 2;
}

/* Leader gets a subtle glow to stand out */
.trail-pokemon-sprite:first-child {
    z-index: 3;
}

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

/* ===== ADDITIONAL SCENE ELEMENTS ===== */

.pixel-fence {
    position: absolute;
    font-size: 6px;
    color: var(--gb-dark);
    letter-spacing: 1px;
}

.pixel-npc {
    position: absolute;
    font-size: 8px;
    color: var(--gb-darkest);
}

.pixel-fossil {
    position: absolute;
    color: var(--gb-dark);
    opacity: 0.7;
}

.pixel-bridge {
    position: absolute;
    font-size: 7px;
    color: var(--gb-darkest);
}

.pixel-waterfall {
    position: absolute;
    font-size: 6px;
    color: var(--gb-dark);
    line-height: 0.8;
    animation: waterfallFlow 1s steps(2) infinite;
}

@keyframes waterfallFlow {
    0%   { transform: translateY(0); opacity: 0.8; }
    50%  { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 0.8; }
}

.pixel-seagull {
    position: absolute;
    font-size: 8px;
    color: var(--gb-dark);
    animation: seagullFly 6s linear infinite;
}

@keyframes seagullFly {
    0%   { transform: translateX(0) translateY(0); }
    50%  { transform: translateX(15px) translateY(-5px); }
    100% { transform: translateX(30px) translateY(0); }
}

.pixel-crane {
    position: absolute;
    font-size: 7px;
    color: var(--gb-darkest);
}

.pixel-ship {
    position: absolute;
    font-size: 7px;
    line-height: 1.1;
    color: var(--gb-darkest);
    text-align: center;
}

.pixel-dock {
    position: absolute;
    font-size: 6px;
    color: var(--gb-dark);
}

.pixel-gravestone {
    position: absolute;
    font-size: 10px;
    color: var(--gb-dark);
}

.pixel-ghost {
    position: absolute;
    font-size: 8px;
    color: var(--gb-light);
    line-height: 1;
    text-align: center;
    animation: ghostFloat 4s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes ghostFloat {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%      { transform: translateY(-8px); opacity: 0.8; }
}

.pixel-fog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(48, 98, 48, 0.2);
    animation: fogPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fogPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.6; }
}

.pixel-flower {
    position: absolute;
    color: var(--gb-light);
    animation: flowerSway 3s ease-in-out infinite;
}

@keyframes flowerSway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(5deg); }
}

.pixel-helicopter {
    position: absolute;
    font-size: 6px;
    color: var(--gb-dark);
    animation: helicopterFly 8s linear infinite;
}

@keyframes helicopterFly {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

.pixel-gate {
    position: absolute;
    font-size: 7px;
    line-height: 1.2;
    color: var(--gb-darkest);
    text-align: center;
}

.pixel-icicle {
    position: absolute;
    font-size: 10px;
    color: var(--gb-light);
}

.pixel-ice {
    position: absolute;
    color: var(--gb-light);
}

.pixel-bird {
    position: absolute;
    color: var(--gb-light);
    animation: glow 3s ease-in-out infinite;
}

.pixel-snow-particle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.pixel-smoke {
    position: absolute;
    font-size: 7px;
    color: var(--gb-dark);
    opacity: 0.6;
    animation: smokeRise 4s ease-out infinite;
}

@keyframes smokeRise {
    0%   { transform: translateY(0); opacity: 0.6; }
    100% { transform: translateY(-15px); opacity: 0; }
}

.pixel-volcano {
    position: absolute;
    font-size: 10px;
    line-height: 1;
    color: var(--gb-darkest);
    text-align: center;
}

.cinnabar-glow {
    animation: cinnabarGlow 2s ease-in-out infinite !important;
}

@keyframes cinnabarGlow {
    0%, 100% { opacity: 0.4; color: var(--gb-light); }
    50%      { opacity: 1; color: var(--gb-lightest); }
}

.pixel-stairs {
    position: absolute;
    font-size: 6px;
    color: var(--gb-dark);
}

.pixel-torch {
    position: absolute;
    font-size: 8px;
    color: var(--gb-light);
    animation: glow 1.5s ease-in-out infinite;
}

/* Lavender Town scene override */
.lavender-scene {
    background: var(--gb-dark) !important;
}

/* ===== TIME-OF-DAY OVERLAYS ===== */

.time-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 4;
    transition: background 0.5s;
}

.travel-scene[data-time="morning"] .time-overlay {
    background: rgba(155, 188, 15, 0.08);
}

.travel-scene[data-time="day"] .time-overlay {
    background: none;
}

.travel-scene[data-time="evening"] .time-overlay {
    background: rgba(48, 98, 48, 0.15);
}

.travel-scene[data-time="night"] .time-overlay {
    background: rgba(15, 56, 15, 0.25);
}

/* Stars at night */
.time-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40px;
    pointer-events: none;
    z-index: 2;
}

.time-star {
    position: absolute;
    font-size: 8px;
    color: var(--gb-light);
    animation: twinkle 2s ease-in-out infinite;
}

.time-star:nth-child(odd) {
    animation-delay: -1s;
}

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

/* Morning sun */
.time-sun {
    position: absolute;
    font-size: 14px;
    color: var(--gb-lightest);
    animation: glow 3s ease-in-out infinite;
    z-index: 2;
}

/* ===== WEATHER OVERLAYS ===== */

.weather-rain, .weather-fog, .weather-wind, .weather-snow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

/* Rain */
.weather-drop {
    position: absolute;
    top: -10px;
    font-size: 7px;
    color: var(--gb-dark);
    opacity: 0.6;
    animation: rainDrop 0.8s linear infinite;
}

@keyframes rainDrop {
    0%   { transform: translateY(-10px); opacity: 0.6; }
    100% { transform: translateY(150px); opacity: 0; }
}

/* Fog */
.fog-layer {
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    background: rgba(139, 172, 15, 0.15);
    border-radius: 50%;
}

.fog-layer-1 {
    animation: fogDrift1 8s ease-in-out infinite;
}

.fog-layer-2 {
    animation: fogDrift2 12s ease-in-out infinite;
    opacity: 0.7;
    top: 20%;
}

@keyframes fogDrift1 {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(15px); }
}

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

/* Wind */
.weather-gust {
    position: absolute;
    left: 110%;
    font-size: 7px;
    color: var(--gb-dark);
    opacity: 0.5;
    animation: windBlow 2s linear infinite;
}

@keyframes windBlow {
    0%   { transform: translateX(0); opacity: 0.5; }
    100% { transform: translateX(-250px); opacity: 0; }
}

/* Snow */
.weather-flake {
    position: absolute;
    top: -10px;
    font-size: 7px;
    color: var(--gb-light);
    opacity: 0.7;
    animation: snowFall 3s ease-in-out infinite;
}

@keyframes snowFall {
    0%   { transform: translateY(-10px) translateX(0); opacity: 0.7; }
    50%  { transform: translateY(70px) translateX(8px); opacity: 0.9; }
    100% { transform: translateY(150px) translateX(-3px); opacity: 0; }
}

.travel-progress {
    padding: 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-light);
}

.progress-bar-container {
    height: 16px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    position: relative;
    margin: 4px 0;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gb-darkest);
    transition: width 0.3s ease;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
    margin-top: 2px;
}

.travel-resources {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    font-size: 7px;
}

.resource-item {
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 4px 6px;
    text-align: center;
    line-height: 1.6;
}

.resource-label {
    color: var(--gb-dark);
    font-size: 6px;
}

.resource-value {
    font-size: var(--font-size-sm);
}

.resource-value.low {
    color: #0f380f;
    animation: blink 0.5s step-end infinite;
}

.travel-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* ---- Travel Party HP Panel ---- */
.travel-party-hp {
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 50px;
    max-height: 120px;
    overflow-y: auto;
}

.travel-party-member {
    display: flex;
    align-items: center;
    gap: 4px;
    width: calc(33.33% - 6px);
    padding: 2px 0;
}

.travel-party-member.critical {
    animation: critical-pulse 1.2s ease-in-out infinite;
}

@keyframes critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.travel-party-sprite {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    filter: grayscale(30%) sepia(40%) hue-rotate(50deg) saturate(0.6);
    flex-shrink: 0;
}

.travel-party-info {
    flex: 1;
    min-width: 0;
}

.travel-party-name {
    font-size: 7px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.travel-hp-bar {
    width: 75%;
    height: 5px;
    background: var(--gb-dark);
    border: 1px solid var(--gb-darkest);
    margin: 2px 0;
}

.travel-hp-fill {
    height: 100%;
    background: var(--gb-light);
    transition: width 0.3s ease;
}

.travel-hp-fill.mid {
    background: var(--gb-bg);
}

.travel-hp-fill.low {
    background: var(--gb-darkest);
}

.travel-hp-text {
    font-size: 7px;
    font-weight: bold;
    color: var(--gb-dark);
}

.battle-stars {
    color: var(--gb-darkest);
    font-size: 7px;
    letter-spacing: -0.5px;
}

/* ---- Pokemon Profile Popup ---- */
.pokemon-profile-popup {
    background: var(--gb-white);
    border: 3px solid var(--gb-darkest);
    padding: 10px;
    width: 90%;
    max-width: 280px;
    font-size: 8px;
}

.profile-header {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--gb-dark);
}

.profile-sprite {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.profile-header-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--gb-darkest);
}

.profile-types {
    font-size: 7px;
    color: var(--gb-dark);
    margin-bottom: 3px;
}

.profile-hp-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-hp-bar {
    flex: 1;
    height: 6px;
    background: var(--gb-dark);
    border: 1px solid var(--gb-darkest);
}

.profile-hp-fill {
    height: 100%;
    background: var(--gb-light);
    transition: width 0.3s ease;
}
.profile-hp-fill.mid { background: var(--gb-bg); }
.profile-hp-fill.low { background: var(--gb-darkest); }

.profile-hp-text {
    font-size: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.profile-status {
    font-size: 7px;
    color: var(--gb-darkest);
    font-weight: bold;
}

.profile-section {
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gb-light);
}

.profile-row {
    margin: 2px 0;
    font-size: 7px;
    line-height: 1.4;
}

.profile-label {
    font-weight: bold;
    color: var(--gb-darkest);
}

.profile-desc {
    color: var(--gb-dark);
    font-style: italic;
}

.profile-hint {
    color: var(--gb-dark);
    font-size: 6px;
    font-style: italic;
}

.profile-stars {
    font-size: 9px;
    letter-spacing: 0;
}

.profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 8px;
}

.profile-action-btn {
    font-size: 6px !important;
    padding: 4px 2px !important;
    text-align: center;
}

.profile-danger-btn {
    color: var(--gb-darkest) !important;
    border: 2px solid var(--gb-darkest) !important;
}

.profile-danger-btn.btn-confirm-danger {
    color: var(--gb-white) !important;
    border-color: var(--gb-shadow) !important;
}

/* ---- Day Recap Popup ---- */
.day-recap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 56, 15, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: recap-fadein 0.15s ease-out;
}

@keyframes recap-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.day-recap-popup {
    background: var(--gb-white);
    border: 3px solid var(--gb-darkest);
    padding: 10px 14px;
    max-width: 85%;
    max-height: 70%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 4px 4px 0 var(--gb-shadow);
}

.day-recap-title {
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--gb-dark);
}

.day-recap-body {
    font-size: 7px;
    line-height: 1.8;
    max-height: 120px;
    overflow-y: auto;
}

.recap-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--gb-light);
}

.recap-line:last-child {
    border-bottom: none;
}

.recap-next {
    margin-top: 6px;
    padding: 4px;
    font-weight: bold;
    font-size: 7px;
    text-align: center;
    background: var(--gb-light);
    border: 1px solid var(--gb-dark);
}

.day-recap-btn {
    align-self: center;
    margin-top: 4px;
}

/* Legacy log entry (used by other screens) */
.log-entry {
    padding: 2px 0;
    border-bottom: 1px solid var(--gb-light);
}

.log-entry:last-child {
    border-bottom: none;
}

/* ============================================
   PACE SELECTOR
   ============================================ */

.pace-selector {
    display: flex;
    gap: 4px;
}

.pace-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 8px 12px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    cursor: pointer;
    color: var(--gb-darkest);
    flex: 1;
}

.pace-btn.active {
    background: var(--gb-darkest);
    color: var(--gb-lightest);
}

.pace-btn:hover:not(.active) {
    background: var(--gb-light);
}

/* ============================================
   ENCOUNTER SCREEN
   ============================================ */

.encounter-screen {
    justify-content: space-between;
    text-align: center;
}

.encounter-header {
    font-size: var(--font-size-md);
    padding: 8px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-light);
}

.encounter-sprite-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
}

.encounter-sprite {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    animation: encounterAppear 0.5s ease-out;
}

@keyframes encounterAppear {
    from { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    to { transform: scale(1); opacity: 1; }
}

.encounter-info {
    font-size: var(--font-size-sm);
    padding: 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-light);
}

.encounter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ============================================
   EVENT SCREEN
   ============================================ */

.event-screen {
    justify-content: space-between;
}

.event-title {
    font-size: var(--font-size-md);
    text-align: center;
    padding: 8px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-light);
}

.event-narrative {
    flex: 1;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 16px;
    font-size: 9px;
    line-height: 2.2;
    overflow-y: auto;
}

.event-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ============================================
   INVENTORY SCREEN
   ============================================ */

.inventory-screen {
    gap: 8px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}

.inventory-item {
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.item-name {
    font-size: 7px;
}

.item-count {
    font-size: var(--font-size-md);
    min-width: 30px;
    text-align: right;
}

/* ============================================
   PARTY SCREEN
   ============================================ */

.party-screen {
    gap: 6px;
}

.party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}

.party-slot {
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.party-slot.empty {
    background: var(--gb-light);
    opacity: 0.5;
    justify-content: center;
}

.party-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

.party-info {
    font-size: 7px;
    line-height: 1.8;
    flex: 1;
}

.party-pokemon-name {
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}

.hp-bar {
    width: 100%;
    height: 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    margin-top: 2px;
}

.hp-bar-fill {
    height: 100%;
    background: var(--gb-darkest);
    transition: width 0.3s;
}

.hp-bar-fill.low {
    background: var(--gb-dark);
    animation: blink 1s step-end infinite;
}

.status-poisoned { color: #306230; }
.status-paralyzed { color: #0f380f; }
.status-fainted {
    opacity: 0.5;
}

/* ============================================
   SHOP SCREEN
   ============================================ */

.shop-screen {
    gap: 6px;
}

.shop-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.shop-item {
    border: 2px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.shop-item-info {
    flex: 1;
}

.shop-item-name {
    font-size: var(--font-size-sm);
}

.shop-item-desc {
    font-size: 6px;
    color: var(--gb-dark);
    margin-top: 2px;
}

.shop-item-price {
    font-size: var(--font-size-sm);
    margin-right: 12px;
}

.money-display {
    font-size: var(--font-size-sm);
    text-align: right;
    padding: 6px 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-light);
}

/* ============================================
   GYM SCREEN
   ============================================ */

.gym-screen {
    justify-content: space-between;
    text-align: center;
}

.gym-leader-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
}

.gym-battle-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 12px;
}

.gym-battle-sprites {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    gap: 16px;
    width: 100%;
}

.gym-leader-portrait,
.gym-opponent-pokemon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.gym-portrait-label {
    font-size: 9px;
    font-weight: bold;
}

.gym-leader-name {
    font-size: var(--font-size-lg);
}

.gym-badge-name {
    font-size: var(--font-size-sm);
    color: var(--gb-dark);
}

.gym-challenge-text {
    font-size: var(--font-size-sm);
    line-height: 2;
    padding: 0 24px;
    max-width: 500px;
}

/* ============================================
   GAME OVER / VICTORY SCREENS
   ============================================ */

.gameover-screen,
.victory-screen {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.gameover-title {
    font-size: var(--font-size-xl);
    color: var(--gb-darkest);
    text-shadow: 2px 2px 0 var(--gb-dark);
}

.victory-title {
    font-size: var(--font-size-xl);
    color: var(--gb-darkest);
    text-shadow: 2px 2px 0 var(--gb-dark);
    animation: victoryPulse 1s ease-in-out infinite;
}

@keyframes victoryPulse {
    50% { transform: scale(1.05); }
}

.score-breakdown {
    text-align: left;
    font-size: var(--font-size-sm);
    line-height: 2.5;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 16px;
    width: 100%;
    max-width: 500px;
}

.score-total {
    font-size: var(--font-size-lg);
    text-align: center;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 2px solid var(--gb-darkest);
}

/* Memorial (Game Over) */
.memorial-section {
    width: 100%;
    max-width: 500px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 12px;
}

.memorial-label {
    font-size: 8px;
    text-align: center;
    margin-bottom: 8px;
    color: var(--gb-dark);
}

.memorial-pokemon-grid {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.memorial-pokemon {
    text-align: center;
    padding: 4px;
}

.memorial-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    filter: grayscale(50%);
}

.memorial-name {
    font-size: 6px;
    margin-top: 2px;
    color: var(--gb-dark);
}

.hall-of-fame-team {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.hof-pokemon {
    text-align: center;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-white);
    padding: 8px;
}

.hof-sprite {
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
}

.hof-name {
    font-size: 7px;
    margin-top: 4px;
}

/* ============================================
   POTION PICKER POPUP
   ============================================ */

.potion-picker {
    text-align: left;
}

.potion-pokemon-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.potion-target-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 2px solid var(--gb-darkest);
    background: var(--gb-lightest);
    cursor: pointer;
    font-family: inherit;
    font-size: 7px;
    text-align: left;
}

.potion-target-btn:hover {
    background: var(--gb-white);
    border-color: var(--gb-dark);
}

.potion-target-sprite {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.potion-target-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.potion-result {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 4px 0;
}

.potion-result-sprite {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
}

.potion-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 7px;
}

/* ============================================
   LEADERBOARD SCREEN
   ============================================ */

.leaderboard-screen {
    gap: 8px;
}

.leaderboard-title {
    font-size: var(--font-size-lg);
    text-align: center;
    padding: 8px;
    border: 3px solid var(--gb-darkest);
    background: var(--gb-light);
}

.leaderboard-table {
    flex: 1;
    overflow-y: auto;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 30px 1fr 80px 60px;
    gap: 8px;
    padding: 8px;
    font-size: 7px;
    border-bottom: 2px solid var(--gb-dark);
    align-items: center;
}

.leaderboard-row.no-badges {
    grid-template-columns: 30px 1fr 80px;
}

.leaderboard-row.header {
    font-size: var(--font-size-sm);
    background: var(--gb-light);
    border-bottom: 3px solid var(--gb-darkest);
}

.leaderboard-row:nth-child(even):not(.header) {
    background: var(--gb-white);
}

.rank-1 { color: var(--gb-darkest); font-weight: bold; }

.leaderboard-row.in-progress { opacity: 0.7; font-style: italic; }

.leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 3px solid var(--gb-darkest);
}

.leaderboard-tab {
    padding: 6px 2px;
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    background: var(--gb-white);
    color: var(--gb-dark);
    border: none;
    border-right: 2px solid var(--gb-darkest);
    border-bottom: 2px solid var(--gb-darkest);
    cursor: pointer;
    transition: background 0.15s;
}

.leaderboard-tab:nth-child(3n) {
    border-right: none;
}

.leaderboard-tab:nth-child(n+4) {
    border-bottom: none;
}

.leaderboard-tab.active {
    background: var(--gb-light);
    color: var(--gb-darkest);
    font-weight: bold;
}

.leaderboard-tab:hover:not(.active) {
    background: var(--gb-bg);
}

/* ============================================
   RECORDS SCREEN
   ============================================ */

.records-screen {
    padding: 8px;
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.record-row {
    background: var(--gb-light);
    padding: 5px 6px;
    border-bottom: 1px solid var(--gb-dark);
}

.record-row:nth-child(even) {
    background: var(--gb-bg);
}

.record-label {
    font-size: 6px;
    color: var(--gb-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.record-value {
    font-size: 8px;
    font-weight: bold;
    color: var(--gb-darkest);
    margin-top: 1px;
}

.record-sub {
    font-size: 5px;
    color: var(--gb-dark);
    margin-top: 1px;
    opacity: 0.8;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-4 { gap: 4px; }
.hidden { display: none !important; }

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--gb-darkest);
    animation: typing 2s steps(40), blinkCaret 0.5s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCaret {
    50% { border-color: transparent; }
}

/* Typewriter effect for narrative text */
.typewriter-text .char {
    opacity: 0;
    animation: charAppear 0.03s forwards;
}

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

/* Resource flash when value changes */
.resource-flash {
    animation: resourceFlash 0.4s ease-out;
}

@keyframes resourceFlash {
    0% { background: var(--gb-darkest); color: var(--gb-lightest); }
    100% { background: var(--gb-white); color: var(--gb-darkest); }
}

/* Catch ball shake animation */
.ball-shake {
    animation: ballShake 0.6s ease-in-out;
    display: inline-block;
}

@keyframes ballShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
}

/* Catch success sparkle */
.catch-sparkle {
    animation: sparkle 0.8s ease-out;
    display: inline-block;
}

@keyframes sparkle {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Damage flash for Pokemon */
.damage-flash {
    animation: dmgFlash 0.3s step-end 2;
}

@keyframes dmgFlash {
    50% { opacity: 0.2; }
}

/* Gym badge earned pop */
.badge-earned {
    animation: badgePop 0.5s ease-out;
    display: inline-block;
}

@keyframes badgePop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gb-light);
}

::-webkit-scrollbar-thumb {
    background: var(--gb-darkest);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 700px) {
    #game-wrapper {
        padding: 8px;
        border-radius: 0;
    }

    #game-screen {
        width: 100vw;
        height: 100vh;
        border: none;
    }

    #game-wrapper::before {
        display: none;
    }
}

/* ===== POKÉDEX SCREEN ===== */
.pokedex-screen {
    overflow-y: auto;
    max-height: 100%;
}

.pokedex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 3px;
    padding: 0 4px;
    max-height: 320px;
    overflow-y: auto;
}

.pokedex-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3px 2px;
    border: 1px solid var(--gb-dark);
    background: var(--gb-lightest);
    position: relative;
}

.pokedex-entry.unknown {
    opacity: 0.3;
    background: var(--gb-dark);
}

.pokedex-entry.seen {
    opacity: 0.7;
    background: var(--gb-light);
}

.pokedex-entry.caught {
    background: var(--gb-lightest);
}

.pokedex-entry.champion {
    background: var(--gb-lightest);
    border-color: var(--gb-darkest);
    border-width: 2px;
    box-shadow: 0 0 4px var(--gb-dark);
}

.pokedex-sprite {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    filter: brightness(0.8) sepia(1) hue-rotate(70deg) saturate(3);
}

.pokedex-entry.champion .pokedex-sprite {
    filter: none;
    /* Champions show in full color - stand out */
}

.pokedex-sprite-unknown {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--gb-light);
}

.pokedex-entry-name {
    font-size: 5px;
    text-align: center;
    line-height: 1.1;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.pokedex-entry-num {
    font-size: 5px;
    opacity: 0.6;
}

.pokedex-entry-status {
    font-size: 7px;
    position: absolute;
    top: 1px;
    right: 2px;
}