@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@600;700;800&display=swap');

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

:root {
  --bg:     #0b1020;
  --panel:  rgba(14, 22, 44, 0.72);
  --panel-2: rgba(14, 22, 44, 0.5);
  --line:   rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.28);
  --accent: #e94560;
  --green:  #4ecca3;
  --gold:   #f5c542;
  --yellow: #f5a623;
  --red:    #e94560;
  --gray:   #445566;
  --text:   #eef1f8;
  --muted:  #9aa6bd;
  --white:  rgba(255,255,255,0.88);
  --font:   'Press Start 2P', 'Courier New', monospace;
  --body:   'Nunito', system-ui, sans-serif;
}

html, body { width: 100%; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 10px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

.hidden { display: none !important; }

/* ═══ FONDO ═══ */
#forest-bg {
  position: fixed; inset: 0; z-index: 1; display: block; overflow: hidden; pointer-events: none;
  background-image: url('assets/landscape/landscape_2.png');
  background-size: cover; background-position: center;
  animation: kenburns 40s ease-in-out infinite alternate;
}
#forest-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(233, 69, 96, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(11, 16, 32, 0.55) 0%, rgba(11, 16, 32, 0.78) 45%, rgba(11, 16, 32, 0.96) 100%);
}
@keyframes kenburns {
  0%   { background-position: 40% 50%; background-size: 108%; }
  100% { background-position: 60% 45%; background-size: 118%; }
}
#forest-bg.in-battle { background-image: none; animation: none; }
#forest-bg.in-battle::after { display: none; }
#forest-bg canvas { width: 100% !important; height: 100% !important; display: block; }

/* ═══ LANDING ═══ */
#landing-screen {
  position: relative; z-index: 3; min-height: 100dvh;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 4vw, 32px) 60px;
  display: flex; flex-direction: column; align-items: center; gap: clamp(32px,6vw,56px);
  max-width: 960px; margin: 0 auto;
}

.back-link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 800; font-size: 13px; color: var(--muted);
  padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
  backdrop-filter: blur(8px); transition: color 0.2s, border-color 0.2s;
}
.back-link:hover { color: #fff; border-color: var(--line-2); }
.back-link img { width: 22px; height: 22px; }

.landing-header { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: clamp(8px, 3vw, 24px); }
.pokeball-logo { width: clamp(72px, 14vw, 104px); height: clamp(72px, 14vw, 104px); animation: spin 8s linear infinite; filter: drop-shadow(0 10px 24px rgba(233,69,96,0.45)); }
@keyframes spin { to { transform: rotate(360deg); } }
.landing-title { font-size: clamp(16px, 4vw, 26px); color: #fff; text-shadow: 0 4px 0 rgba(233,69,96,0.9), 0 0 24px rgba(233,69,96,0.45); letter-spacing: 2px; text-align: center; line-height: 1.4; }
.landing-sub  { font-family: var(--body); font-weight: 700; font-size: clamp(13px, 2vw, 15px); color: var(--muted); text-align: center; }
.landing-sub2 { font-size: 10px; color: var(--gold); text-align: center; opacity: 0.9; }

.landing-section {
  width: 100%; padding: clamp(18px, 3vw, 28px); border-radius: 22px;
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.section-title { font-size: clamp(11px, 3vw, 14px); color: #fff; text-align: center; margin-bottom: 18px; letter-spacing: 1px; line-height: 1.6; }
.section-title::after { content: ''; display: block; width: 46px; height: 4px; border-radius: 4px; background: var(--accent); margin: 12px auto 0; }
.section-sub   { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--muted); text-align: center; margin: -6px 0 20px; }

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.step-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color 0.2s, transform 0.2s; position: relative; overflow: hidden; }
.step-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); }
.step-card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.step-num  { font-size: 9px; color: var(--accent); }
.step-icon { font-size: 24px; line-height: 1; }
.step-text { font-family: var(--body); font-weight: 600; font-size: 13px; color: #cfd6e6; line-height: 1.5; }
.step-text b { color: #fff; font-weight: 800; }

.vs-center-label { font-size: clamp(14px, 4vw, 22px); color: var(--accent); text-shadow: 0 0 14px var(--accent); align-self: center; flex-shrink: 0; }

/* ═══ SELECTION SLOTS ═══ */
#selection-row { display: flex; gap: 12px; justify-content: center; align-items: stretch; margin-bottom: 14px; }
.selection-slot { flex: 1; max-width: 220px; min-height: 140px; border: 2px solid var(--line); border-radius: 16px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: border-color 0.2s, box-shadow 0.2s; background: rgba(8, 14, 30, 0.55); }
.selection-slot.slot-active { border-color: var(--accent); animation: pulseSlot 1.5s ease-in-out infinite; }
@keyframes pulseSlot { 0%,100%{box-shadow:0 0 8px rgba(233,69,96,0.2)} 50%{box-shadow:0 0 22px rgba(233,69,96,0.5)} }
.selection-slot.slot-filled { border-color: var(--green); }
.slot-label   { font-size: 7px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.slot-empty   { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.slot-q       { font-size: 30px; color: rgba(255,255,255,0.18); }
.slot-hint    { font-family: var(--body); font-weight: 700; font-size: 12px; color: var(--muted); text-align: center; }
.slot-loading { font-family: var(--body); font-weight: 700; font-size: 12px; color: var(--muted); text-align: center; padding: 20px 0; animation: float 1s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.slot-sprite { image-rendering: pixelated; width: clamp(56px,12vw,76px); height: clamp(56px,12vw,76px); animation: float 2s ease-in-out infinite; }
.slot-name   { font-size: clamp(6px,1.5vw,8px); color:#fff; text-transform:uppercase; text-align:center; line-height: 1.5; }
.slot-types  { display:flex; gap:3px; flex-wrap:wrap; justify-content:center; }
.slot-stats-mini { width:100%; display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.mini-stat-row { display:flex; align-items:center; gap:4px; }
.mini-sl { font-size:5px; color:var(--muted); width:22px; flex-shrink:0; }
.mini-sb { flex:1; height:5px; background:rgba(0,0,0,0.4); border:1px solid var(--line); border-radius: 3px; overflow: hidden; }
.mini-sf { height:100%; transition:width 0.4s ease; }
.slot-change { font-family:var(--font); font-size:7px; color:#fff; background:var(--accent); border:2px solid var(--accent); border-radius: 8px; padding:7px 14px; cursor:pointer; text-transform:uppercase; margin-top:6px; transition:opacity 0.15s, transform 0.1s; }
.slot-change:hover { opacity:0.85; transform:scale(1.04); }

#step-indicator { font-family: var(--body); font-weight: 700; text-align:center; font-size: 14px; color: #dfe5f2; padding: 10px 16px; margin: 0 auto 14px; width: fit-content; border-radius: 999px; background: rgba(233,69,96,0.14); border: 1px solid rgba(233,69,96,0.35); }
#step-indicator strong { color:#fff; font-weight: 800; }

/* ═══ CATALOG ═══ */
#catalog-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.catalog-search-input { width:100%; background: rgba(8, 14, 30, 0.7); border:2px solid var(--line); border-radius: 12px; color:#fff; font-family: var(--body); font-weight: 700; font-size: 14px; padding: 11px 14px; outline:none; transition:border-color 0.2s; }
.catalog-search-input::placeholder { color: var(--muted); }
.catalog-search-input:focus { border-color:var(--accent); }
#type-filter-row { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
#type-filter-row::-webkit-scrollbar { height:4px; }
#type-filter-row::-webkit-scrollbar-thumb { background:var(--accent); border-radius: 4px; }
.tf-btn { flex-shrink:0; background: rgba(8, 14, 30, 0.7); border:1px solid var(--line); border-radius: 999px; color: var(--muted); font-family: var(--body); font-weight: 800; font-size: 12px; padding: 6px 12px; cursor:pointer; white-space:nowrap; transition:border-color 0.15s, color 0.15s, background 0.15s; }
.tf-btn:hover  { border-color:var(--line-2); color:#fff; }
.tf-btn.active { border-color:var(--accent); color:#fff; background:rgba(233,69,96,0.22); }

/* ═══ POKEMON GRID ═══ */
#pokemon-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:8px; max-height:52vh; overflow-y:auto; padding:4px 2px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
#pokemon-grid::-webkit-scrollbar { width:5px; }
#pokemon-grid::-webkit-scrollbar-thumb { background:var(--accent); border-radius:4px; }
.catalog-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 9px; border:1px solid var(--line); border-radius: 12px; cursor:pointer; transition:border-color 0.13s, transform 0.13s, box-shadow 0.13s; position:relative; }
.catalog-card:hover { border-color:var(--line-2); transform:scale(1.05); z-index:2; }
.catalog-card.cat-selected { border-color:var(--green); box-shadow:0 0 0 2px rgba(78,204,163,0.35), 0 0 14px rgba(78,204,163,0.3); }
.cc-num  { font-size:6px; color: var(--muted); }
.cc-sprite { image-rendering:pixelated; width:56px; height:56px; }
.cc-name { font-family: var(--body); font-weight: 800; font-size: 11px; color:#fff; text-align:center; line-height:1.2; }
.cc-types { display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
.cc-types .type-badge { font-size:4px; padding:1px 3px; }

.catalog-card.skeleton { pointer-events:none; border-color: var(--line); }
@keyframes shimmer { 0%{background-position:-300px 0} 100%{background-position:300px 0} }
.skel { background:linear-gradient(90deg, #131c33 25%, #1e2a48 50%, #131c33 75%); background-size:400px 100%; animation:shimmer 1.5s infinite linear; border-radius:4px; }
.skel-num    { width:28px; height:6px; }
.skel-sprite { width:56px; height:56px; border-radius:6px; }
.skel-name   { width:85%; height:8px; }
.skel-type   { width:55%; height:6px; }

.load-more-btn { display:block; margin:16px auto 0; background: transparent; border:2px solid var(--line-2); border-radius: 999px; color:#fff; font-family: var(--body); font-weight: 800; font-size: 14px; padding: 11px 22px; cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s; }
.load-more-btn:hover { border-color:var(--green); color:var(--green); }
.load-more-btn:disabled { opacity:0.45; cursor:not-allowed; }

.start-btn { display:block; margin: 16px auto 0; background:var(--accent); border:none; border-radius: 999px; color:#fff; font-family:var(--font); font-size:clamp(9px,2vw,12px); padding:16px 36px; cursor:pointer; letter-spacing:2px; text-transform:uppercase; transition:opacity 0.2s, transform 0.1s; animation:pulse 2s ease-in-out infinite; box-shadow: 0 10px 26px rgba(233,69,96,0.4); }
@keyframes pulse { 0%,100%{box-shadow:0 10px 26px rgba(233,69,96,0.4), 0 0 0 0 rgba(233,69,96,0.4)} 50%{box-shadow:0 10px 26px rgba(233,69,96,0.4), 0 0 0 10px rgba(233,69,96,0)} }
.start-btn:hover { opacity:0.9; transform:scale(1.02); }

@media (prefers-reduced-motion: reduce) {
  #forest-bg, .pokeball-logo, .selection-slot.slot-active, .start-btn, .slot-sprite { animation: none !important; }
}

/* ═══ VS SCREEN ═══ */
#vs-screen { position:fixed; inset:0; z-index:50; background:#050d15; display:flex; align-items:center; justify-content:center; animation:vsFadeIn 0.4s ease; }
@keyframes vsFadeIn { from{opacity:0} to{opacity:1} }
.vs-inner { display:flex; align-items:center; justify-content:center; gap:clamp(16px,6vw,60px); width:100%; }
.vs-side { display:flex; flex-direction:column; align-items:center; gap:10px; }
.vs-sprite { image-rendering:pixelated; width:clamp(80px,22vw,160px); height:clamp(80px,22vw,160px); }
.vs-sprite.vs-right { transform:scaleX(-1); }
.vs-name     { font-size:clamp(6px,1.8vw,10px); color:#fff; text-transform:uppercase; }
.vs-badge-big { font-size:clamp(22px,8vw,52px); color:var(--accent); text-shadow:0 0 30px var(--accent),0 0 60px var(--accent); animation:vsPulse 0.6s ease-in-out infinite alternate; }
@keyframes vsPulse { from{transform:scale(1)} to{transform:scale(1.1)} }

/* ═══ ESPERA ═══ */
#waiting-screen { position:fixed; inset:0; z-index:10; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:20px; }
.pokeball-spin { width:72px; height:72px; animation:spin 1.2s linear infinite; }
.waiting-pokemon-sprite { image-rendering:pixelated; width:100px; height:100px; animation:float 1.5s ease-in-out infinite; }
#waiting-screen h2 { font-size:12px; color:var(--accent); text-shadow:0 0 10px var(--accent); }
#waiting-screen p  { font-size:7px; color:#778899; }

/* ═══ BATALLA ═══ */
#battle-screen { position:fixed; inset:0; z-index:5; display:flex; flex-direction:column; max-width:520px; margin:0 auto; width:100%; }

#battle-arena { flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; position:relative; overflow:hidden; }

.hud-enemy { grid-column:1; grid-row:1; align-self:start; justify-self:start; margin:clamp(6px,2vw,14px) 0 0 clamp(6px,2vw,14px); }
.enemy-sprite-wrap { grid-column:2; grid-row:1; align-self:end; justify-self:center; display:flex; flex-direction:column; align-items:center; padding-bottom:4px; }
.self-sprite-wrap  { grid-column:1; grid-row:2; align-self:start; justify-self:center; display:flex; flex-direction:column; align-items:center; padding-top:4px; }
.hud-self { grid-column:2; grid-row:2; align-self:end; justify-self:end; margin:0 clamp(6px,2vw,14px) clamp(8px,2vw,16px) 0; }

.gba-hud { background:rgba(8,20,38,0.92); border:2px solid var(--white); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6), 0 2px 12px rgba(0,0,0,0.5); padding:clamp(5px,1.5vw,8px) clamp(8px,2vw,14px); min-width:clamp(130px,36vw,190px); display:flex; flex-direction:column; gap:4px; }

.hud-name-row { display:flex; justify-content:space-between; align-items:center; gap:6px; }
.hud-name  { font-size:clamp(6px,1.6vw,8px); color:#fff; letter-spacing:0.5px; text-transform:uppercase; }
.hud-level { font-size:clamp(5px,1.3vw,7px); color:#aab; white-space:nowrap; }

.hp-bar-container { display:flex; align-items:center; gap:5px; }
.hp-label  { font-size:6px; color:#4ecca3; font-weight:bold; flex-shrink:0; }
.hp-bar-bg { flex:1; height:6px; background:#0a1929; border:1px solid rgba(255,255,255,0.2); }
.hp-bar-fill { height:100%; background:var(--green); transition:width 0.4s ease, background 0.4s ease; }
.hp-bar-fill.yellow { background:var(--yellow); }
.hp-bar-fill.red    { background:var(--red); }
.hp-number { font-size:clamp(5px,1.3vw,6px); color:#cce; white-space:nowrap; }

.hud-status-row { min-height: 10px; }

/* ═══ STATUS BADGES ═══ */
#self-status-badge, #enemy-status-badge {
  font-family: var(--font);
  font-size: 5px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══ SPRITES ═══ */
.sprite-enemy { image-rendering:pixelated; width:clamp(70px,17vw,100px); height:clamp(70px,17vw,100px); animation:float 2s ease-in-out infinite; }
.sprite-self  { image-rendering:pixelated; width:clamp(96px,24vw,140px); height:clamp(96px,24vw,140px); animation:float 2.4s ease-in-out infinite; }
.sprite-enemy.shake, .sprite-self.shake { animation:shake 0.38s ease; }
.sprite-enemy.flash, .sprite-self.flash { filter:brightness(8); }
@keyframes shake { 0%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} 100%{transform:translateX(0)} }

.pedestal { width:80%; height:14px; border-radius:50%; }
.pedestal-enemy { background:radial-gradient(ellipse at 50% 40%, rgba(80,60,30,0.7) 0%, rgba(50,38,15,0.4) 55%, transparent 80%); box-shadow:0 2px 4px rgba(0,0,0,0.4); margin-top:2px; }
.pedestal-self  { background:radial-gradient(ellipse at 50% 40%, rgba(50,90,30,0.7) 0%, rgba(28,60,15,0.4) 55%, transparent 80%); box-shadow:0 2px 4px rgba(0,0,0,0.4); margin-bottom:2px; }

/* ═══ EFFECT LABEL (¡Súper efectivo! etc.) ═══ */
.effect-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(7px, 2.2vw, 10px);
  font-family: var(--font);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 8px currentColor;
  letter-spacing: 1px;
}
.effect-label.show {
  animation: effectFloat 1.5s ease-out forwards;
}
@keyframes effectFloat {
  0%   { opacity: 1; transform: translate(-50%, -50%); }
  60%  { opacity: 1; transform: translate(-50%, -80%); }
  100% { opacity: 0; transform: translate(-50%, -110%); }
}
.effect-super  { color: #F08030; }
.effect-weak   { color: #667788; }
.effect-immune { color: #445566; }
.effect-crit   { color: #FFD700; }
.effect-neutral { color: #aabbcc; }

/* ═══ PANEL DIÁLOGO ═══ */
#battle-dialog { background:rgba(6,14,28,0.97); border-top:3px solid var(--white); padding:clamp(6px,2vw,12px) clamp(8px,2.5vw,14px); display:flex; flex-direction:column; gap:6px; min-height:clamp(140px,36vh,200px); position:relative; z-index:6; }

#battle-log { min-height:36px; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.log-line { font-size:clamp(6px,1.5vw,8px); color:#ccdde8; line-height:1.6; }
.log-line.highlight { color:var(--accent); }

#dialog-bottom { display:flex; flex-direction:column; gap:5px; }
#turn-indicator { font-size:clamp(6px,1.5vw,8px); padding:3px 6px; text-align:center; }
#turn-indicator.my-turn   { color:var(--green); }
#turn-indicator.enemy-turn { color:var(--gray); }

/* ═══ BOTONES DE MOVIMIENTO — rediseñados ═══ */
#moves-container { display:grid; grid-template-columns:1fr 1fr; gap:5px; }

.move-btn {
  background: rgba(6,14,28,0.96);
  border: 2px solid #1e3a5a;
  border-left-width: 3px;
  color: #ddeeff;
  font-family: var(--font);
  font-size: clamp(5px,1.3vw,7px);
  padding: clamp(6px,1.8vw,10px) 6px;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: border-color 0.12s, filter 0.12s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.move-btn:hover:not(:disabled) { filter: brightness(1.2); border-color: #eee; }
.move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.move-btn:active:not(:disabled) { filter: brightness(0.9); }

.move-name {
  font-size: clamp(5px,1.4vw,7px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.move-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.move-type-pill {
  font-size: 4px;
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.move-pp {
  font-size: 5px;
  color: #778899;
  white-space: nowrap;
}
.move-pp.pp-low { color: #e94560; }

/* ═══ OVERLAY RESULTADO ═══ */
#result-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; animation:fadeIn 0.4s ease; }
@keyframes fadeIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
#result-text { font-size:clamp(14px,4vw,20px); text-align:center; text-shadow:0 0 24px currentColor; }
#result-text.victory { color:gold; }
#result-text.defeat  { color:var(--red); }
#result-sub { font-size:clamp(6px,1.6vw,8px); color:#99aabb; text-align:center; line-height:2; }
#close-btn { background:var(--accent); border:none; color:#fff; font-family:var(--font); font-size:clamp(7px,1.8vw,9px); padding:12px 24px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; transition:opacity 0.2s; }
#close-btn:hover { opacity:0.8; }

#rematch-btn { background:#2e8b57; border:none; color:#fff; font-family:var(--font); font-size:clamp(7px,1.8vw,9px); padding:12px 24px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; transition:opacity 0.2s; }
#rematch-btn:hover { opacity:0.8; }
#rematch-btn:disabled { opacity:0.5; cursor:default; }
#rematch-btn.hidden, #rematch-status.hidden { display:none; }
#rematch-status { font-family:var(--font); font-size:clamp(6px,1.5vw,8px); color:#eeeef5; opacity:0.7; }

/* ═══ TIPO BADGES ═══ */
.type-badge { font-size:clamp(5px,1.3vw,7px); padding:2px 6px; border-radius:2px; text-transform:uppercase; font-weight:bold; }
.type-normal   { background:#A8A878; color:#fff; }
.type-fire     { background:#F08030; color:#fff; }
.type-water    { background:#6890F0; color:#fff; }
.type-electric { background:#F8D030; color:#000; }
.type-grass    { background:#78C850; color:#fff; }
.type-ice      { background:#98D8D8; color:#000; }
.type-fighting { background:#C03028; color:#fff; }
.type-poison   { background:#A040A0; color:#fff; }
.type-ground   { background:#E0C068; color:#000; }
.type-flying   { background:#A890F0; color:#fff; }
.type-psychic  { background:#F85888; color:#fff; }
.type-bug      { background:#A8B820; color:#fff; }
.type-rock     { background:#B8A038; color:#fff; }
.type-ghost    { background:#705898; color:#fff; }
.type-dragon   { background:#7038F8; color:#fff; }
.type-dark     { background:#705848; color:#fff; }
.type-steel    { background:#B8B8D0; color:#000; }
.type-fairy    { background:#EE99AC; color:#000; }

/* ═══ RESPONSIVE ═══ */
@media (min-width: 600px) { #battle-dialog { min-height:clamp(160px,34vh,220px); } }
@media (min-width: 900px) { .steps-grid { grid-template-columns:repeat(4, 1fr); } }