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

body{
    background:linear-gradient(135deg,#0a0f1e,#0c1222);
    font-family:'Courier New','VT323',monospace;
    padding:2rem 1.5rem;
    min-height:100vh
}

.container{max-width:1400px;margin:0 auto}

.header{text-align:center;margin-bottom:2rem}
.header h1{color:#facc15;font-size:2rem;letter-spacing:4px;text-shadow:4px 4px 0 #7c2d12;margin-bottom:.5rem}
.header p{color:#86efac;font-weight:bold;font-size:.9rem}

.click-hint{
    background:#1a1e2c;
    display:inline-block;
    padding:.3rem 1rem;
    border-radius:40px;
    margin-top:1rem;
    font-size:.7rem;
    color:#facc15;
    border:1px solid #2ecc71
}

.form-section{
    background:#1a1e2ccc;
    padding:1.5rem;
    border-radius:28px;
    margin-bottom:2rem;
    border:1px solid #2ecc7155;
    max-width:1000px;
    margin-left:auto;
    margin-right:auto;
    backdrop-filter:blur(4px)
}

.form-row{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    align-items:flex-end
}

.form-group{flex:1;min-width:180px}
.form-group label{display:block;color:#86efac;font-size:.75rem;margin-bottom:.3rem;font-weight:bold}
.form-group input{
    width:100%;
    padding:.7rem 1rem;
    border-radius:16px;
    border:2px solid #2ecc71;
    background:#0f1320;
    color:#fff;
    font-family:monospace;
    font-size:.85rem;
    transition:all .2s
}
.form-group input:focus{
    outline:none;
    border-color:#facc15;
    box-shadow:0 0 0 3px #facc1533;
    background:#1a1e2c
}

.button-wrapper{
    display:flex;
    justify-content:center;
    margin-top:1.5rem;
    width:100%
}
.form-section button{
    background:linear-gradient(135deg,#2ecc71,#27ae60);
    color:#0a0f1e;
    border:none;
    padding:.8rem 2.5rem;
    border-radius:50px;
    font-weight:bold;
    cursor:pointer;
    font-family:monospace;
    font-size:1rem;
    letter-spacing:2px;
    text-transform:uppercase;
    min-width:180px;
    text-align:center
}
.form-section button:hover{background:linear-gradient(135deg,#facc15,#e6b800)}

.pokemon-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:1.5rem;
    margin-bottom:2rem
}

.pokemon-card-link{text-decoration:none;transition:transform .2s}
.pokemon-card-link:hover{transform:translateY(-5px)}

.pokemon-card{
    background:#1a1e2c;
    border-radius:28px;
    padding:1.2rem;
    border:2px solid #2ecc71;
    box-shadow:6px 6px 0 #0b0e16;
    transition:all .2s;
    height:100%
}
.pokemon-card:hover{border-color:#facc15;box-shadow:4px 4px 0 #0b0e16}

.pixel-art{
    background:#0f1320;
    border-radius:20px;
    text-align:center;
    padding:1rem;
    margin-bottom:1rem;
    border:1px solid #2ecc71aa
}
.pixel-art img{width:120px;height:auto;image-rendering:pixelated}

.pokemon-name{
    display:inline-block;
    background:#2d2d44;
    padding:.3rem 1rem;
    border-radius:40px;
    font-size:1.2rem;
    font-weight:bold;
    color:#ffdf9c;
    border:1px solid #ffcd4a;
    text-align:center;
    width:100%;
    margin-bottom:.8rem
}

.types-area{text-align:center;margin-bottom:1rem}
.type-badge{
    display:inline-block;
    background:#0e2a2e;
    padding:.2rem .8rem;
    border-radius:32px;
    margin:.2rem;
    font-weight:bold;
    color:#b7f0b1;
    font-size:.75rem;
    border-left:2px solid #2ecc71
}

.matchup-section{margin-top:.5rem}
.matchup-title{
    font-weight:bold;
    font-size:.7rem;
    margin-top:.8rem;
    margin-bottom:.4rem;
    color:#facc15;
    border-left:3px solid #2ecc71;
    padding-left:6px
}

.badge-list{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.2rem}
.type-tag{
    background:#262c3f;
    padding:3px 8px;
    border-radius:16px;
    font-size:.65rem;
    font-weight:bold;
    color:#e2e8f0;
    border:1px solid #4b5563
}
.type-strong{background:#1e5631;border-color:#8bffae;color:#e2ffe8}
.type-weak{background:#6b1e2a;border-color:#ff8a8a;color:#ffe0e0}
.type-immune{background:#2a2a5e;border-color:#8a8aff;color:#e0e0ff}

.footer{
    text-align:center;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:2px dashed #2ecc7155;
    color:#7f9caf;
    font-size:.75rem
}

@media (max-width:768px){
    body{padding:1rem}
    .pokemon-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
    .header h1{font-size:1.5rem}
    .pixel-art img{width:100px}
    .pokemon-name{font-size:1rem}
    .form-row{flex-direction:column;gap:.8rem}
    .button-wrapper{margin-top:1rem}
    .form-section button{width:100%;min-width:unset}
}

@media (max-width:480px){
    .pokemon-grid{grid-template-columns:1fr}
    .form-section{padding:1rem}
}