@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --ink: #12161c;
    --ink-panel: #1c2127;
    --ink-line: #39414c;
    --ink-text: #e6ebf2;
    --ink-muted: #8d99a8;

    --shell: #d23c33;
    --shell-dark: #8f241e;
    --shell-light: #ef5a4f;

    --screen: #cfe0c8;
    --screen-deep: #b3c7aa;
    --screen-tint: #dfeada;
    --screen-line: #a9bda1;
    --screen-ink: #2f3d2b;
    --screen-muted: #5d6f56;
    --screen-bar: #3f6b3a;

    --amber: #f2c14e;

    --display: 'Space Grotesk', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;

}

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

body {
    font-family: var(--mono);
    color: var(--ink-text);
    background-color: var(--ink);
    background-image:
        radial-gradient(120% 60% at 50% -10%, rgba(210, 60, 51, 0.22), transparent 70%),
        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: auto, 28px 28px, 28px 28px;
    min-height: 100vh;
    padding: 36px 20px 60px;
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    gap: 14px;
    position: relative;
    z-index: 9999;
}

header::before {
    content: "";
    width: 112px;
    height: 36px;
    background-image:
        radial-gradient(circle 16px at 18px 18px, #9ecdf7 0 32%, #3b7fc4 33% 68%, #10305a 69% 100%, transparent 100%),
        radial-gradient(circle 5px at 56px 18px, #ff5a52 99%, transparent 100%),
        radial-gradient(circle 5px at 74px 18px, #f2c14e 99%, transparent 100%),
        radial-gradient(circle 5px at 92px 18px, #4de08a 99%, transparent 100%);
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

header h1 {
    font-family: var(--display);
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #ffffff;
    text-shadow: 0 2px 0 var(--shell-dark);
}

.search-container {
    position: relative;
    display: inline-block;
}

.searchPokemon {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #2a3038, #1a1f25);
    border: 1px solid var(--ink-line);
    padding: 8px;
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 14px 30px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.25s ease;
}

.searchPokemon:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 18px 36px rgba(0, 0, 0, 0.6);
}

header input {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 11px 14px;
    border: 1px solid var(--screen-line);
    border-radius: 8px;
    outline: none;
    color: var(--screen-ink);
    background-color: var(--screen);
    box-shadow: inset 0 2px 5px rgba(47, 61, 43, 0.25);
    min-width: 250px;
}

header input::placeholder {
    color: rgba(47, 61, 43, 0.45);
}

header input:focus-visible {
    border-color: var(--amber);
    box-shadow:
        inset 0 2px 5px rgba(47, 61, 43, 0.25),
        0 0 0 3px rgba(242, 193, 78, 0.35);
}

header button {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    color: #ffffff;
    background: linear-gradient(180deg, var(--shell-light), var(--shell));
    box-shadow: 0 3px 0 var(--shell-dark);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
}

header button:hover {
    filter: brightness(1.06);
}

header button:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--shell-dark);
}

header button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

.suggestions-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--ink-panel);
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 999;
    list-style: none;
    padding: 4px;
    margin-top: 8px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    display: none;
}

.suggestions-list li {
    padding: 9px 12px;
    cursor: pointer;
    text-transform: capitalize;
    border-radius: 6px;
    border-left: 2px solid transparent;
    font-size: 0.86rem;
    letter-spacing: 0.03em;
    color: var(--ink-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.suggestions-list li:hover {
    background-color: #2a3038;
    border-left-color: var(--amber);
    color: var(--ink-text);
}

main {
    display: block;
    width: 100%;
}

.pkmContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.pkm-card {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    grid-template-areas:
        "sprite stats"
        "info   stats"
        "info   abilities"
        "items  evo"
        "items  forms"
        "moves  moves";
    align-content: start;
    gap: 16px;
    background-color: var(--screen);
    color: var(--screen-ink);
    border: 14px solid var(--shell);
    border-radius: 20px;
    text-align: center;
    padding: 18px;
    box-shadow:
        inset 0 0 0 2px rgba(47, 61, 43, 0.35),
        inset 0 8px 24px rgba(47, 61, 43, 0.18),
        0 0 0 3px var(--shell-dark),
        0 26px 50px rgba(0, 0, 0, 0.55);
}

.pkm-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(47, 61, 43, 0.07) 0 1px,
        transparent 1px 4px
    );
    z-index: 2;
}

.pkm-card:empty {
    display: none;
}

.pkm-card > img {
    grid-area: sprite;
}

.info-section {
    grid-area: info;
}

.pkm-section:has(.stats-list) {
    grid-area: stats;
}

.pkm-section:has(.abilities-list) {
    grid-area: abilities;
}

.pkm-section:has(.held-items-list) {
    grid-area: items;
}

.pkm-section:has(.evo-pipeline) {
    grid-area: evo;
}

.pkm-section:has(.form-list) {
    grid-area: forms;
}

.pkm-section:has(.moves-list) {
    grid-area: moves;
}

.pkm-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--screen-tint);
    border: 1px solid var(--screen-line);
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pkm-section:has(> .abilities-list:empty),
.pkm-section:has(> .stats-list:empty),
.pkm-section:has(> .held-items-list:empty),
.pkm-section:has(> .moves-list:empty),
.pkm-section:has(> .evo-pipeline:empty),
.pkm-section:has(> .form-list:empty) {
    display: none;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--screen-muted);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    margin-bottom: 16px;
}

.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgba(47, 61, 43, 0.28);
}

.pkm-card img {
    width: 100%;
    max-width: 170px;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 8px 10px rgba(47, 61, 43, 0.35));
}

.pkm-card > img {
    max-width: 100%;
    height: 100%;
    min-height: 158px;
    padding: 14px;
    background-color: var(--screen-tint);
    border: 1px solid var(--screen-line);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.info-section {
    justify-content: center;
    gap: 4px;
}

.pkm-id {
    display: inline-block;
    align-self: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--screen-muted);
    background-color: var(--screen);
    border: 1px solid var(--screen-line);
    border-radius: 4px;
    padding: 4px 12px;
    margin-bottom: 8px;
}

.pkm-name {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: var(--screen-ink);
    text-transform: capitalize;
    overflow-wrap: anywhere;
    margin-bottom: 12px;
}

.pkm-types {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pkm-types .section-title {
    flex: 1 0 100%;
    margin-bottom: 4px;
}

.pkm-height,
.pkm-weight {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--screen-muted);
}

.type-badge,
.move-badge {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(47, 61, 43, 0.4);
}

.type-badge.normal,
.move-badge.normal { background-color: #A8A77A; }
.type-badge.fire,
.move-badge.fire { background-color: #EE8130; }
.type-badge.water,
.move-badge.water { background-color: #6390F0; }
.type-badge.electric,
.move-badge.electric { background-color: #F7D02C; color: #2f3d2b; }
.type-badge.grass,
.move-badge.grass { background-color: #5CA935; }
.type-badge.ice,
.move-badge.ice { background-color: #74C8C4; color: #2f3d2b; }
.type-badge.fighting,
.move-badge.fighting { background-color: #C22E28; }
.type-badge.poison,
.move-badge.poison { background-color: #A33EA1; }
.type-badge.ground,
.move-badge.ground { background-color: #D9AE4A; color: #2f3d2b; }
.type-badge.flying,
.move-badge.flying { background-color: #8A6FE8; }
.type-badge.psychic,
.move-badge.psychic { background-color: #F95587; }
.type-badge.bug,
.move-badge.bug { background-color: #92A31A; }
.type-badge.rock,
.move-badge.rock { background-color: #B6A136; color: #2f3d2b; }
.type-badge.ghost,
.move-badge.ghost { background-color: #735797; }
.type-badge.dragon,
.move-badge.dragon { background-color: #6F35FC; }
.type-badge.dark,
.move-badge.dark { background-color: #5A4A3F; }
.type-badge.steel,
.move-badge.steel { background-color: #9C9CB5; }
.type-badge.fairy,
.move-badge.fairy { background-color: #D685AD; }

.abilities-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
}

.ability-badge,
.item-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--screen-ink);
    background-color: var(--screen);
    padding: 7px 14px;
    border-radius: 4px;
    border: 1px solid var(--screen-line);
    text-transform: capitalize;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ability-badge:hover,
.item-badge:hover {
    background-color: #ffffff;
    transform: translateY(-2px);
}

.stats-section {
    font-family: var(--mono);
}

.stats-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    font-size: 0.8rem;
}

.stat-row:last-child {
    margin-bottom: 0;
}

.stat-label {
    width: 54px;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--screen-muted);
    text-align: right;
    margin-right: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.stat-value {
    width: 34px;
    min-width: 34px;
    text-align: right;
    font-weight: 700;
    color: var(--screen-ink);
    flex-shrink: 0;
    margin-right: 12px;
}

.stat-bar-container {
    flex-grow: 1;
    background-color: var(--screen);
    height: 14px;
    border: 1px solid var(--screen-line);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(47, 61, 43, 0.25);
}

.stat-bar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--screen-bar);
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0 5px,
        var(--screen) 5px 7px
    );
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.held-items-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    flex-grow: 1;
}

.held-item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.held-item-box img {
    width: 52px;
    height: 52px;
    min-height: 0;
    max-width: none;
    object-fit: contain;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    filter: drop-shadow(0 4px 6px rgba(47, 61, 43, 0.3));
}

.moves-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 8px;
    background-color: rgba(47, 61, 43, 0.06);
    scrollbar-width: thin;
    scrollbar-color: var(--screen-line) transparent;
}

.moves-list::-webkit-scrollbar {
    width: 8px;
}

.moves-list::-webkit-scrollbar-track {
    background: transparent;
}

.moves-list::-webkit-scrollbar-thumb {
    background-color: var(--screen-line);
    border-radius: 10px;
}

.move-badge {
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.move-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 rgba(47, 61, 43, 0.35);
}

.global-tooltip {
    position: fixed;
    width: 240px;
    transform: translateX(-50px);
    background: linear-gradient(180deg, #242b34, #161a20);
    color: #f2f5f9;
    text-align: left;
    border: 1px solid var(--ink-line);
    border-left: 3px solid var(--tt-accent, var(--amber));
    border-radius: 12px;
    padding: 12px 14px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    line-height: 1.95;
    text-transform: none;
    text-shadow: none;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
    z-index: 9999;
    pointer-events: none;
}

.global-tooltip strong {
    display: inline-block;
    width: 85px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.global-tooltip br:last-child {
    display: none;
}

.global-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #161a20 transparent transparent transparent;
}

.global-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.tooltip-loading {
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
}

.evo-pipeline,
.form-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    flex-grow: 1;
}

.evo-stage,
.form-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.evo-stage:hover,
.form-stage:hover {
    transform: translateY(-4px);
}

.evo-stage img,
.form-stage img {
    width: 78px;
    height: 78px;
    min-height: 0;
    max-width: none;
    background-color: var(--screen);
    border: 1px solid var(--screen-line);
    border-radius: 10px;
    object-fit: contain;
    image-rendering: pixelated;
    padding: 8px;
    margin: 0;
    box-shadow: inset 0 2px 6px rgba(47, 61, 43, 0.18);
    filter: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.evo-stage:hover img,
.form-stage:hover img {
    border-color: var(--screen-bar);
    box-shadow: 0 6px 14px rgba(47, 61, 43, 0.28);
}

.evo-stage .evo-name,
.form-stage .form-name {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--screen-ink);
}

.evo-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--screen-muted);
    font-size: 1.1rem;
    font-weight: 700;
}

.evo-arrow .evo-trigger {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--screen-muted);
    margin-top: 6px;
    text-align: center;
    background-color: var(--screen);
    border: 1px solid var(--screen-line);
    padding: 3px 9px;
    border-radius: 4px;
}

@media (max-width: 880px) {
    .pkmContainer {
        max-width: 560px;
    }

    .pkm-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "sprite"
            "info"
            "stats"
            "abilities"
            "items"
            "moves"
            "evo"
            "forms";
    }

    .pkm-card > img {
        max-width: 220px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    body {
        padding: 24px 12px 44px;
    }

    .pkm-card {
        border-width: 9px;
        padding: 12px;
        gap: 12px;
    }

    .pkm-section {
        padding: 14px 12px 16px;
    }

    header input {
        min-width: 0;
        width: 100%;
    }

    .searchPokemon {
        width: 100%;
    }

    .search-container {
        display: block;
        width: 100%;
        max-width: 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}