/* ==========================================================================
   1. VARIABLES & CUSTOM FONTS
   ========================================================================== */

@font-face {
    font-family: "Pokemon Classic";
    src: url("../components/pokemon.woff2") format("woff2");
    font-display: swap;
}

:root {
    /* Typography */
    --font-pixel: "Pokemon Classic", sans-serif;
    --font-body: "Quicksand", sans-serif;

    /* Color Palette */
    --green-dark: #355e3b;
    --green-mid: #4f7a44;
    --green-light: #7bc96f;
    --green-active: #5ca24f;

    /* UI Surfaces */
    --card-bg: rgba(247, 243, 232, 0.62);
    --hero-bg: rgba(0, 0, 0, 0.2);

    /* Neutrals */
    --white: #ffffff;
    --text-dark: #333333;
}


/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

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

body {
    margin: 0;
    padding: 0;
    background: url("../components/background.png") repeat;
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text-dark);
}

/* Typography Headings */
.hero h1,
.card h2,
.card h3,
.card h4,
aside h2,
.pokemon-box h2 {
    font-family: var(--font-pixel);
}

aside h2,
.pokemon-box h2 {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.hero h1 {
    font-size: 2rem;
    letter-spacing: 2px;
}

/* Media Elements */
figure {
    margin: 20px 0;
}

figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

figcaption {
    margin-top: 6px;
    font-size: 0.85em;
    text-align: center;
    opacity: 0.8;
}


/* ==========================================================================
   3. LAYOUT & CONTAINERS
   ========================================================================== */

.wrap {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 1.25rem;
    align-items: start;
    width: min(1380px, 92%);
    margin: 0 auto;
    padding: 0.5rem 1rem 1rem;
}

.wrap.single {
    grid-template-columns: 1fr;
}

.left-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}


/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(1380px, 92%);
    min-height: 180px;
    margin: 1.5rem auto;
    padding: 3rem 2rem;
    overflow: hidden;

    text-align: center;
    color: var(--white);

    background: 
        linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
        url("../components/banner.png");
    background-position: center;
    background-size: cover;

    border: 3px solid var(--green-dark);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.hero a {
    padding: 0.6rem 1rem;
    background: var(--green-mid);
    color: var(--white);
    font-family: var(--font-body);
    text-decoration: none;
    border-radius: 99px;
}


/* ==========================================================================
   5. CARDS & SIDEBAR NAVIGATION
   ========================================================================== */

.card,
aside {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem 1rem;
    text-align: center;

    background: var(--card-bg);
    border: 3px solid var(--green-dark);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.card h2,
.card h3,
.card h4,
aside h2 {
    margin-top: 0;
}

.card hr,
aside hr {
    height: 3px;
    margin: 1rem 0;

    background: var(--green-dark);
    border: none;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

/* Sidebar Links */
.sidebar-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    margin-bottom: 8px;
}

.sidebar-nav a {
    display: block;
    padding: 10px 12px;
    color: var(--text-dark);
    text-decoration: none;
    border-radius: 6px;

    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-nav a:hover {
    background: var(--green-light);
    color: var(--white);
}

.sidebar-nav a:active {
    background: var(--green-active);
}

/* Pokémon Box Sprite Anchor */
.pokemon-box img {
    display: block;
    margin: 0 auto;
}


/* ==========================================================================
   6. GAME BADGES & LINKS
   ========================================================================== */

.game-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 14px 0 24px 0;
}

.game-link {
    margin-top: 10px;
    list-style: none;
}

.game-link a,
.game-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 320px;
    padding: 10px 12px;

    background: var(--green-mid);
    color: var(--white);
    font-family: var(--font-pixel);
    font-size: 0.75rem;
    text-decoration: none;
    text-align: center;

    border: 2px solid var(--green-dark);
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);

    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.game-link a {
    display: block;
    width: 100%;
}

.game-badge:hover,
.game-link a:hover {
    background: var(--green-light);
    color: var(--white);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.game-badge:active {
    background: var(--green-active);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

.game-badge:not([href]),
.game-badge[href="#"],
.game-badge.disabled {
    background-color: #8a9a86;
    color: #c0c0c0;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.game-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-top: 10px;
    padding: 0;

    list-style: none;
    text-align: center;
}


/* ==========================================================================
   7. BADGE RIBBONS & DEX CROWNS
   ========================================================================== */

/* Completion Ribbon Overlay (Top-Right) */
.game-badge.completed::after {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    width: 64px;
    height: 64px;

    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.35));
    pointer-events: none;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.game-badge.completed.gen1::after { background-image: url('../ribbon/gen1.png'); }
.game-badge.completed.gen2::after { background-image: url('../ribbon/gen2.png'); }
.game-badge.completed.gen3::after { background-image: url('../ribbon/gen3.png'); }
.game-badge.completed.gen4::after { background-image: url('../ribbon/gen4.png'); }
.game-badge.completed.gen5::after { background-image: url('../ribbon/gen5.png'); } /* Fixed file extension */
.game-badge.completed.gen6::after { background-image: url('../ribbon/gen6.png'); }
.game-badge.completed.gen7::after { background-image: url('../ribbon/gen7.png'); }
.game-badge.completed.gen8::after { background-image: url('../ribbon/gen8.png'); }
.game-badge.completed.gen9::after { background-image: url('../ribbon/gen9.png'); }

/* Pokédex Crown Icon Overlay (Top-Left) */
.game-badge.dex::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    width: 40px;
    height: 40px;

    background-image: url('../ribbon/dex.png');
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(2px 2px 0px rgba(0, 0, 0, 0.35));
    pointer-events: none;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* ==========================================================================
   8. POKÉMON PC BOX SYSTEM
   ========================================================================== */

.box-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    margin-top: 10px;
    font-family: var(--font-body);
}

.box-main-area {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

/* Dynamic 6-Column PC Grid */
.pc-box {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 60px;
    gap: 6px;
    width: 100%;
    padding: 10px;

    background-color: #a0d8a0;
    border: 3px solid var(--green-dark);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.sprite-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
}

.sprite {
    width: auto;
    max-width: 48px;
    height: auto;
    max-height: 48px;
    object-fit: contain;

    transform: scale(1.5);
    transition: transform 0.15s ease-in-out;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.sprite-slot:hover .sprite {
    z-index: 10;
    transform: scale(1.5) translateY(-4px);
}


/* ==========================================================================
   9. POKÉMON PREVIEW CARD
   ========================================================================== */

.preview-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    width: 250px;
    padding: 12px;

    background: var(--card-bg);
    border: 3px solid var(--green-dark);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6px;

    color: var(--text-dark);
    font-family: var(--font-pixel);
    font-size: 0.75rem;

    border-bottom: 2px solid var(--green-dark);
}

.preview-sprite-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;

    background: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--green-mid);
    border-radius: 2px;
}

.preview-sprite-box img {
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.preview-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
}

.preview-level {
    color: var(--text-dark);
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    text-align: center;
}

.preview-types {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.preview-row {
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    text-align: center;

    background: rgba(255, 255, 255, 0.4);
    border-left: 3px solid var(--green-mid);
    border-radius: 2px;
}

.preview-row .label {
    color: #666666;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
}

.preview-row .value {
    overflow: hidden;

    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   10. TYPE BADGES
   ========================================================================== */

.type-badge {
    padding: 3px 6px;

    color: var(--white);
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);

    border-radius: 2px;
}

.type-badge.normal   { background: #a8a878; }
.type-badge.fire     { background: #f08030; }
.type-badge.water    { background: #6890f0; }
.type-badge.grass    { background: #78c850; }
.type-badge.electric { background: #f8d030; color: #000000; text-shadow: none; }
.type-badge.ice      { background: #98d8d8; color: #000000; text-shadow: none; }
.type-badge.fighting { background: #c03028; }
.type-badge.poison   { background: #a040a0; }
.type-badge.ground   { background: #e0c068; }
.type-badge.flying   { background: #a890f0; }
.type-badge.psychic  { background: #f85888; }
.type-badge.bug      { background: #a8b820; }
.type-badge.rock     { background: #b8a038; }
.type-badge.ghost    { background: #705898; }
.type-badge.dragon   { background: #7038f8; }
.type-badge.dark     { background: #705848; }
.type-badge.steel    { background: #b8b8d0; color: #000000; text-shadow: none; }
.type-badge.fairy    { background: #ee99ac; }


/* ==========================================================================
   11. CHATTABLE EMBED & ENCOUNTER BOX
   ========================================================================== */

.enc {
    padding: 1rem;
    background: #d8efcf;
    border-radius: 10px;
}

.chattable-wrapper {
    width: 100%;
    margin-top: 1rem;
}

.chattable-card {
    width: 100%;
    padding: 0.5rem;

    background: var(--card-bg);
    border: 3px solid var(--green-dark);
    border-radius: 2px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

#chattable {
    display: block;
    width: 100%;
    height: 380px;

    background: var(--card-bg);
    border: none;
    border-radius: 2px;
}


/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 900px) {
    .wrap {
        grid-template-columns: 1fr;
    }

    .box-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .preview-card {
        width: 100%;
        max-width: 320px;
    }
}