:root {
  --bg: #0f172a;
  --card: #1e293b;
  --accent: #e3353b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --hp-green: #22c55e;
  --dialogue: #1a1a2e;
}

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

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
}

/* ========== INTRO ========== */
.intro {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.lab-bg {
  flex: 1;
  background: linear-gradient(180deg, #87ceeb 0%, #b8d4e8 40%, #e8f0f5 70%, #d4e0ea 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2rem;
  min-height: 55vh;
}

.lab-bg::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: repeating-linear-gradient(90deg, #c5d0d8 0px, #c5d0d8 40px, #b0bdc8 40px, #b0bdc8 80px);
  opacity: 0.55;
}

.oak-container { position: relative; z-index: 2; }
.oak-container img {
  width: 120px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.dialogue-box {
  background: var(--dialogue);
  border: 3px solid #3d3d5c;
  border-radius: 12px;
  margin: 0 12px 12px;
  padding: 14px 16px;
  position: relative;
  min-height: 110px;
  cursor: pointer;
}

.dialogue-box .speaker {
  position: absolute;
  top: -12px; left: 16px;
  background: var(--accent);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 6px;
}

.dialogue-text {
  font-size: 0.95rem;
  line-height: 1.45;
  padding-top: 4px;
}

.dialogue-hint {
  position: absolute;
  bottom: 8px; right: 14px;
  color: #fbbf24;
  animation: bounce 0.8s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.btn-skip {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  background: #2d2d44;
  color: #ccc;
  border: 2px solid #4a4a6a;
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 10;
}

.char-select, .name-input, .starter-select {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.85);
  z-index: 20;
  padding: 1rem;
}

.char-select.hidden,
.name-input.hidden,
.starter-select.hidden,
.dialogue-box.hidden,
.btn-skip.hidden {
  display: none !important;
}

.char-options {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.char-card {
  background: #141a2b;
  border: 3px solid #2a3350;
  border-radius: 18px;
  padding: 1.15rem 1.25rem 1rem;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
  width: 148px;
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-card img {
  width: 132px;
  height: 132px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.25));
}

/* Selección como el original: relleno ámbar en toda la tarjeta */
.char-card.selected {
  background: #3a3420;
  border-color: #e8c84a;
  box-shadow:
    0 0 0 2px rgba(232,200,74,.55),
    inset 0 0 0 1px rgba(255,230,120,.12),
    0 6px 18px rgba(0,0,0,.35);
}
.char-card:active { transform: scale(.98); }

.btn-confirm {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-confirm:not(:disabled):hover { filter: brightness(1.15); }

.name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #1e293b;
  padding: 1rem;
  border-radius: 14px;
  border: 2px solid #334155;
}

.name-row img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.name-row input {
  background: #0f172a;
  border: 2px solid #fbbf24;
  border-radius: 8px;
  color: white;
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  width: 120px;
  text-align: center;
}

.starter-title {
  color: #94a3b8;
  margin-bottom: 1.5rem;
  text-align: center;
}

.starters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.starter-card {
  background: #1e293b;
  border: 3px solid #334155;
  border-radius: 14px;
  padding: 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 100px;
  transition: all 0.2s;
}

.starter-card img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
}

.starter-card span { font-size: 0.8rem; color: var(--muted); }
.starter-card.selected {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px #fbbf24;
}

/* ========== AVENTURA / COMBATE ========== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

header h1 { font-size: 1.3rem; }
header h1 span { color: var(--accent); }
#status { font-size: 0.85rem; color: var(--muted); }

.screen {
  display: none;
  background: var(--card);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0 12px 12px;
}
.screen.active { display: block; }

button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
}
button:hover { filter: brightness(1.1); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

#battle-arena {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.side { display: flex; align-items: center; gap: 1rem; }
.side.enemy { flex-direction: row-reverse; }
.side img {
  width: 96px; height: 96px;
  object-fit: contain;
  background: #0f172a;
  border-radius: 8px;
  image-rendering: pixelated;
}
.info { flex: 1; }
.info .name { font-weight: 600; margin-bottom: 0.25rem; }
.hp-bar {
  height: 10px;
  background: #334155;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.hp-bar .fill {
  height: 100%;
  background: var(--hp-green);
  transition: width 0.3s;
}
#battle-log {
  background: #0f172a;
  border-radius: 8px;
  padding: 0.75rem;
  min-height: 80px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  max-height: 120px;
  overflow-y: auto;
}
#battle-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
#battle-actions button {
  margin: 0;
  font-size: 0.9rem;
  padding: 0.6rem;
}

/* ========== POKEDEX CARD ========== */
.pokedex-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.pokedex-card {
  background: linear-gradient(160deg, #1a2332 0%, #0f172a 100%);
  border-radius: 16px;
  border: 2px solid #334155;
  max-width: 360px;
  width: 100%;
  padding: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.pokedex-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pokedex-name {
  font-size: 1.3rem;
  font-weight: 700;
}

.pokedex-new {
  background: #eab308;
  color: #000;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.pokedex-num {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--muted);
}

.pokedex-body {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pokedex-sprite-wrap {
  background: #0f172a;
  border-radius: 12px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pokedex-sprite {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}

.pokedex-genus {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.pokedex-types {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.type-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.pokedex-stats-row {
  display: flex;
  gap: 0.5rem;
}

.stat-box {
  background: #1e293b;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  min-width: 52px;
}

.stat-box .label {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
}

.stat-box .val {
  font-weight: 700;
  font-size: 0.9rem;
}

.pokedex-caught {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.pokedex-flavor {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-bottom: 1rem;
  border-top: 1px solid #334155;
  padding-top: 0.75rem;
}

.pokedex-btn {
  width: 100%;
  background: #eab308;
  color: #000;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  padding: 0.85rem;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0;
}

.pokedex-btn:hover {
  filter: brightness(1.1);
}

/* ========== IDLE BATTLE / ROUTE ========== */
.route-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}

.route-progress {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.route-progress .bar {
  flex: 1;
  height: 6px;
  background: #334155;
  border-radius: 3px;
  overflow: hidden;
}

.route-progress .bar .fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.3s;
}

.battle-scene {
  margin: 0 12px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #5b9bd5 0%, #87ceeb 40%, #90c060 70%, #6b8e23 100%);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.75rem;
}

.battle-scene.prairie {
  background: linear-gradient(180deg, #5b9bd5 0%, #87ceeb 35%, #a8d08d 65%, #70a040 100%);
}

.battle-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 0.5rem 0.5rem;
  gap: 1rem;
}

.battle-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.battle-mon img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.battle-mon .lv {
  font-size: 0.75rem;
  background: rgba(0,0,0,0.5);
  padding: 1px 6px;
  border-radius: 4px;
}

.battle-mon .hp-mini {
  width: 60px;
  height: 6px;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}

.battle-mon .hp-mini .fill {
  height: 100%;
  background: #22c55e;
}

.damage-float {
  position: absolute;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  animation: floatUp 0.8s forwards;
  pointer-events: none;
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}

.battle-msg {
  background: rgba(255,255,255,0.92);
  color: #1a1a2e;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.5rem;
}

.speed-controls {
  display: flex;
  gap: 0.25rem;
}

.speed-controls button {
  background: #334155;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  margin: 0;
  cursor: pointer;
}

.speed-controls button.active {
  background: var(--accent);
}

.team-side {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
}

.team-slot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #1e293b;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.team-slot img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.team-slot .hp-mini {
  flex: 1;
  height: 5px;
  background: #334155;
  border-radius: 3px;
  overflow: hidden;
}

.team-slot .hp-mini .fill {
  height: 100%;
  background: #22c55e;
}

.route-footer {
  padding: 0.75rem 1rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ===== Polish: route / idle closer to original ===== */
.top-status {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.route-screen {
  min-height: 100vh;
  background: #0b1220;
  padding-bottom: 1rem;
}

.route-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.9rem;
}

.trainer-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trainer-icon {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  border-radius: 8px;
  background: #1e293b;
}

.muted { color: var(--muted); font-size: 0.85rem; }

.header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.money {
  background: #1e293b;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.route-progress {
  padding: 0.35rem 0.9rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.route-name { font-weight: 600; color: #e2e8f0; min-width: 48px; }
.route-count { min-width: 40px; text-align: right; }

.route-progress .bar {
  flex: 1;
  height: 7px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}

.route-progress .bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.35s;
}

.battle-scene {
  margin: 0 10px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  min-height: 240px;
  background-size: cover;
  background-position: center bottom;
  background-color: #5b9bd5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.scene-overlay {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem 0.25rem;
  flex: 1;
  align-items: flex-end;
}

.team-rail {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 200px;
  overflow-y: auto;
  padding: 0.2rem;
}

.rail-slot {
  background: rgba(15, 23, 42, 0.75);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
}

.rail-slot.active {
  border-color: #fbbf24;
}

.rail-slot img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.rail-slot span {
  font-size: 0.65rem;
  color: #e2e8f0;
}

.rail-hp {
  width: 40px;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  overflow: hidden;
}

.rail-hp .fill {
  height: 100%;
  background: #22c55e;
}

.battle-field {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 0.5rem 0.35rem;
  min-height: 140px;
}

.battle-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.battle-mon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45));
}

.battle-mon .lv {
  font-size: 0.75rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 1px 8px;
  border-radius: 6px;
}

.battle-mon .hp-mini {
  width: 72px;
  height: 7px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}

.battle-mon .hp-mini .fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.25s;
}

.battle-msg {
  margin: 0.4rem 0.6rem 0.6rem;
  background: rgba(255,255,255,0.94);
  color: #1a1a2e;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  text-align: center;
  font-weight: 500;
}

.route-footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 0.9rem;
}

.btn-primary {
  flex: 1;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 0;
}

.btn-secondary {
  background: #334155;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.speed-controls button {
  background: #1e293b;
  color: #cbd5e1;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  margin: 0;
  cursor: pointer;
}

.speed-controls button.active {
  background: var(--accent);
  color: #fff;
}

.damage-float {
  position: absolute;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  animation: floatUp 0.8s forwards;
  pointer-events: none;
  z-index: 5;
}

/* ===== Weather & animations ===== */
.weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.rain-drop {
  position: absolute;
  top: -10px;
  width: 2px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.85));
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  to { transform: translateY(260px); opacity: 0.3; }
}

.sun-glow {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,220,100,0.35) 0%, transparent 70%);
  animation: sunPulse 3s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.scene-hud {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 3;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 8px;
}

.mon-sprite {
  transition: transform 0.15s;
}

.anim-attack {
  animation: lunge 0.35s ease-out;
}

@keyframes lunge {
  0% { transform: translateX(0); }
  40% { transform: translateX(18px) scale(1.05); }
  100% { transform: translateX(0); }
}

.battle-mon.enemy .anim-attack {
  animation-name: lungeLeft;
}

@keyframes lungeLeft {
  0% { transform: translateX(0); }
  40% { transform: translateX(-18px) scale(1.05); }
  100% { transform: translateX(0); }
}

.anim-hit {
  animation: hitFlash 0.4s ease-out;
}

@keyframes hitFlash {
  0%, 100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); opacity: 1; }
  25% { filter: brightness(3) drop-shadow(0 0 8px #fff); opacity: 0.7; transform: translateX(4px); }
  50% { opacity: 1; transform: translateX(-3px); }
  75% { transform: translateX(2px); }
}

.anim-faint {
  animation: faintOut 0.7s forwards;
}

@keyframes faintOut {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(24px); }
}

.battle-scene.weather-rain {
  filter: saturate(0.9) brightness(0.92);
}

.battle-scene.weather-sun {
  filter: saturate(1.15) brightness(1.05);
}

/* Ensure sprites always have size */
.battle-mon img.mon-sprite {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.rail-slot img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}


/* ===== iOS-safe intro ===== */
.intro {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #0f172a;
}

.lab-bg {
  flex: 1 1 auto;
  min-height: 45vh;
  background-color: #b8d4e8;
  background-size: cover;
  background-position: center bottom;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
}

.intro-bottom {
  flex: 0 0 auto;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: #0f172a;
  position: relative;
  z-index: 30;
}

.intro-bottom.hidden { display: none !important; }

.dialogue-box {
  background: #1a1a2e;
  border: 3px solid #3d3d5c;
  border-radius: 12px;
  padding: 16px 14px 20px;
  position: relative;
  min-height: 100px;
  cursor: pointer;
  margin-bottom: 8px;
  -webkit-tap-highlight-color: transparent;
}

.btn-skip {
  position: static;
  transform: none;
  display: block;
  width: 100%;
  margin: 0 0 4px;
  background: #2d2d44;
  color: #ddd;
  border: 2px solid #4a4a6a;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 31;
}

.btn-skip.hidden { display: none !important; }

/* Battle scene background fallback */
.battle-scene {
  background-color: #6a9f3f;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
}

.xp-mini {
  width: 72px;
  height: 4px;
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.xp-mini .fill {
  height: 100%;
  background: #60a5fa;
  transition: width 0.3s;
}

/* ===== Team / Equipo ===== */
.btn-team {
  background: #334155;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}

.team-overlay, .detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.team-panel, .detail-panel {
  background: #0f172a;
  width: 100%;
  max-width: 430px;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding: 1rem 1rem 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.team-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.team-title {
  font-size: 1.15rem;
  font-weight: 700;
}

.team-avg {
  margin-left: auto;
  font-size: 0.85rem;
  color: #94a3b8;
}

.team-avg strong { color: #fbbf24; }

.team-close, .detail-x {
  background: transparent;
  border: 2px solid #475569;
  color: #e2e8f0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1rem;
  margin: 0;
  cursor: pointer;
  padding: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}

.team-card {
  background: #1e293b;
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 0.55rem;
  text-align: center;
  cursor: pointer;
  color: #fff;
  margin: 0;
}

.team-card.empty {
  opacity: 0.35;
  cursor: default;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-card img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  display: block;
  margin: 0.25rem auto;
}

.team-card-types {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 18px;
}

.team-card-types .type-badge {
  font-size: 0.6rem;
  padding: 1px 5px;
}

.team-card-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.team-card-meta {
  font-size: 0.65rem;
  color: #94a3b8;
  margin: 0.15rem 0;
}

.team-card-hp {
  height: 5px;
  background: #0f172a;
  border-radius: 3px;
  overflow: hidden;
}

.team-card-hp .fill {
  height: 100%;
  background: #22c55e;
}

.box-section { margin-top: 1.25rem; }
.box-title {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}
.box-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

/* ===== Detail ===== */
.detail-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.detail-title { font-size: 1.2rem; font-weight: 700; }
.detail-num { margin-left: auto; color: #94a3b8; font-size: 0.85rem; }

.detail-main {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.detail-sprite-wrap {
  background: #1e293b;
  border-radius: 12px;
  padding: 0.5rem;
  position: relative;
}
.detail-sprite-wrap img {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
}
.detail-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: #334155;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.detail-genus { color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.35rem; }
.detail-types { display: flex; gap: 0.3rem; margin-bottom: 0.5rem; }
.detail-boxes { display: flex; gap: 0.4rem; }
.dbox {
  background: #1e293b;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.dbox .l { display: block; font-size: 0.65rem; color: #94a3b8; }
.dbox .v { font-weight: 700; font-size: 0.9rem; }

.detail-moves { margin-bottom: 0.75rem; }
.detail-move {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #1e293b;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
}
.move-name { flex: 1; font-weight: 600; }
.move-pow { color: #94a3b8; font-size: 0.75rem; }

.detail-xp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #94a3b8;
}
.detail-xp .xp-bar {
  flex: 1;
  height: 8px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}
.detail-xp .xp-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.detail-stats-title {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.stat-row {
  display: grid;
  grid-template-columns: 70px 1fr 36px;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
}
.stat-bar {
  height: 6px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
}
.stat-bar div {
  height: 100%;
  background: #60a5fa;
}

/* Trainer send-out */
.trainer-send {
  position: absolute;
  left: 12%;
  bottom: 28%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  animation: trainerIn 0.35s ease-out;
}
.trainer-send img {
  width: 88px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.trainer-send span {
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 6px;
}
.trainer-send.out {
  animation: trainerOut 0.35s forwards;
}
@keyframes trainerIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes trainerOut {
  to { opacity: 0; transform: translateX(-20px); }
}
button.rail-slot {
  background: rgba(15, 23, 42, 0.75);
  border: 2px solid transparent;
  color: inherit;
  margin: 0;
  padding: 0.25rem;
  cursor: pointer;
}
button.rail-slot.active { border-color: #fbbf24; }

/* Sprites al suelo del escenario */
.battle-field {
  align-items: flex-end !important;
  min-height: 120px !important;
  padding-bottom: 0.15rem !important;
  padding-top: 2.5rem !important;
}

.battle-mon {
  justify-content: flex-end;
}

.battle-mon img.mon-sprite {
  width: 88px !important;
  height: 88px !important;
  margin-top: auto;
}

.scene-overlay {
  align-items: flex-end !important;
  padding-bottom: 0.15rem !important;
}

.team-rail {
  margin-bottom: 0.25rem;
}

/* Barra inferior */
.bottom-bar {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.bottom-bar .btn-team {
  flex: 1;
  max-width: 280px;
  background: #1e293b;
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.btn-release {
  width: 100%;
  margin-top: 1rem;
  background: #7f1d1d;
  color: #fecaca;
  border: 2px solid #991b1b;
  border-radius: 10px;
  padding: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.btn-release:hover {
  background: #991b1b;
}

/* ===== Team rail estilo original (6 slots visibles) ===== */
.battle-scene {
  min-height: 280px !important;
}

.scene-overlay {
  position: relative !important;
  align-items: stretch !important;
  padding: 0.4rem !important;
  flex: 1 !important;
}

.team-rail {
  position: absolute !important;
  left: 6px !important;
  top: 28px !important;
  bottom: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: 5 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 58px;
}

button.rail-slot,
.rail-slot {
  background: rgba(15, 23, 42, 0.88) !important;
  border: 2px solid #334155 !important;
  border-radius: 12px !important;
  padding: 3px 2px 2px !important;
  min-width: 54px !important;
  width: 54px !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

button.rail-slot.active,
.rail-slot.active {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 1px #fbbf24, 0 2px 8px rgba(0,0,0,0.4);
}

.rail-slot img {
  width: 36px !important;
  height: 36px !important;
  image-rendering: pixelated !important;
  display: block !important;
}

.rail-slot span {
  font-size: 0.6rem !important;
  color: #e2e8f0 !important;
  line-height: 1.1;
}

.rail-hp {
  width: 42px !important;
  height: 4px !important;
  background: #1e293b !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  order: -1; /* barra encima del sprite como original? keep below */
}

.rail-hp .fill {
  background: linear-gradient(90deg, #22c55e, #4ade80) !important;
}

.battle-field {
  margin-left: 60px !important; /* hueco para el rail */
}

/* ===== Compact rail: 6 slots + XP bajo PS ===== */
.battle-scene {
  min-height: 300px !important;
  padding-bottom: 0 !important;
}

.team-rail {
  top: 8px !important;
  bottom: 6px !important;
  left: 4px !important;
  width: 52px !important;
  gap: 3px !important;
  justify-content: flex-start !important;
}

button.rail-slot,
.rail-slot {
  width: 50px !important;
  min-width: 50px !important;
  padding: 2px 1px 3px !important;
  border-radius: 10px !important;
  gap: 0 !important;
}

.rail-slot img {
  width: 32px !important;
  height: 32px !important;
}

.rail-slot span {
  font-size: 0.55rem !important;
  margin: 0 !important;
}

.rail-hp {
  width: 40px !important;
  height: 3px !important;
  margin-top: 1px !important;
  order: 0 !important;
}

.rail-xp {
  width: 40px !important;
  height: 3px !important;
  background: #1e293b;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 1px;
}

.rail-xp .fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  transition: width 0.25s;
}

/* Sprites en el suelo (camino de tierra) */
.battle-field {
  margin-left: 54px !important;
  min-height: 150px !important;
  padding-top: 3.5rem !important;
  padding-bottom: 0 !important;
  align-items: flex-end !important;
}

.battle-mon {
  transform: translateY(8px);
}

.battle-mon img.mon-sprite {
  width: 80px !important;
  height: 80px !important;
}

.battle-mon .lv {
  margin-bottom: 0;
}

/* Mensaje FUERA del mapa, encima del botón */
.route-screen .battle-msg {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 8px 12px 0 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 2;
}

/* Quitar mensaje absoluto interno si quedara */
.battle-scene > .battle-msg {
  display: none !important;
}

/* Mapa cuadrado */
.battle-scene {
  aspect-ratio: 1 / 1 !important;
  width: calc(100% - 20px) !important;
  max-width: 420px;
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Barra clima/hora estilo original */
.scene-topbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.clock-chip,
.weather-chip {
  background: rgba(15, 23, 42, 0.72);
  color: #f1f5f9;
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-chip {
  flex: 1;
  justify-content: center;
}

.clock-icon { font-size: 0.85rem; }

/* Noche */
.battle-scene.is-night {
  filter: brightness(0.72) saturate(0.85);
}
.battle-scene.is-night::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 60, 0.28);
  pointer-events: none;
  z-index: 1;
}

.rain-drop.storm {
  height: 18px;
  background: linear-gradient(to bottom, transparent, rgba(200, 220, 255, 0.95));
}

.lightning {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.0);
  animation: bolt 3.5s infinite;
  pointer-events: none;
}
@keyframes bolt {
  0%, 92%, 100% { background: rgba(255,255,255,0); }
  93% { background: rgba(255,255,255,0.55); }
  94% { background: rgba(255,255,255,0); }
  96% { background: rgba(255,255,255,0.35); }
}

/* Speed controls can stay in header; hide old scene-hud */
.scene-hud { display: none !important; }

/* ═════════════ Barra de ruta con nodos ═════════════ */
.route-progress { display: none; } /* reemplazada por .rbar */

.rbar {
  margin: 0.15rem 10px 0.55rem;
  padding: 0.5rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #1c2030;
  border-radius: 999px;
  min-height: 46px;
}
.rbar-name { font-weight: 700; color: #8a93ad; font-size: 0.85rem; white-space: nowrap; letter-spacing: 0.02em; }
.rbar-count { font-weight: 700; color: #f7c531; font-size: 0.85rem; min-width: 38px; text-align: right; white-space: nowrap; }
.rbar-track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.rlink { flex: 1; min-width: 4px; max-width: 22px; height: 4px; border-radius: 2px; background: #2f3650; }
.rlink.done { background: #3e7f4b; }

.rnode {
  position: relative;
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.rnode img { width: 24px; height: 24px; image-rendering: pixelated; display: block; }
.rnode.done { opacity: 0.4; filter: saturate(0.6); }
.rnode.todo { opacity: 0.9; }
.rnode-dot { width: 14px; height: 14px; border-radius: 4px; background: #d94848; box-shadow: inset 0 -3px 0 #a52c2c; }
.rnode-q { font-weight: 900; font-size: 1.15rem; color: #fff; text-shadow: 0 2px 0 #00000088; }
.rnode.cur::before, .rnode.cur::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 8px;
  border: 2px solid #f1f5f9; animation: rnode-pulse 1.4s ease-in-out infinite;
}
.rnode.cur::before { left: -5px; border-right: 0; border-radius: 6px 0 0 6px; }
.rnode.cur::after  { right: -5px; border-left: 0; border-radius: 0 6px 6px 0; }
@keyframes rnode-pulse { 50% { opacity: 0.45; } }

/* ═════════════ Recompensa flotante ═════════════ */
.reward-pop {
  position: absolute; left: 50%; top: 38%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(15, 23, 42, 0.88); border: 2px solid #f7c531; border-radius: 12px;
  padding: 6px 12px; color: #fff; font-weight: 700; font-size: 0.85rem; z-index: 6;
  animation: reward-rise 1.5s ease-out forwards;
}
.reward-pop img { width: 28px; height: 28px; image-rendering: pixelated; }
@keyframes reward-rise {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}

/* ═════════════ Mochila ═════════════ */
.bag-card {
  margin: 0.7rem 10px 1.2rem;
  padding: 0.9rem 1rem 1rem;
  background: #1c2030;
  border: 2px solid #2a3150;
  border-radius: 20px;
}
.bag-head { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.bag-head h3 { margin: 0; font-size: 1.35rem; font-weight: 800; }
.bag-help {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #2f3650;
  background: #232944; color: #cbd5e1; font-weight: 800; cursor: pointer;
}
.bag-count { color: #6b7597; font-size: 0.85rem; flex: 1; }
.bag-arrow { color: #cbd5e1; }
.bag-cat { margin: 1rem 0 0.5rem; color: #7d87a8; font-weight: 700; font-size: 0.95rem; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.bag-tile {
  position: relative; aspect-ratio: 1; border-radius: 14px; border: 2px solid transparent;
  background: #262c45; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center;
}
.bag-tile.key { border-color: #9b7e2a; }
.bag-tile img { width: 60%; height: 60%; image-rendering: pixelated; }
.bag-qty { position: absolute; right: 6px; bottom: 3px; font-size: 0.72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 0 #000; }
.bag-empty { color: #7d87a8; margin: 0.8rem 0 0; font-size: 0.9rem; }

.sheet-overlay {
  position: fixed; inset: 0; background: rgba(5, 8, 20, 0.7); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  width: min(480px, 100%); background: #1c2030; border: 2px solid #3a4268;
  border-radius: 22px 22px 0 0; padding: 1.1rem 1.1rem 1.4rem; color: #e8ecf8;
}
.sheet h3 { margin: 0; font-size: 1.2rem; }
.sheet p { color: #b4bdd8; font-size: 0.92rem; line-height: 1.4; }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head img { width: 44px; height: 44px; image-rendering: pixelated; background: #262c45; border-radius: 12px; padding: 6px; }
.sheet-head small { color: #8a93ad; }
.sheet-hint { margin-bottom: 0.3rem; }
.sheet-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; margin-bottom: 0.4rem; }
.sheet-mon {
  background: #262c45; border: 2px solid transparent; border-radius: 12px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; cursor: pointer; font-size: 0.7rem;
}
.sheet-mon:hover { border-color: #f7c531; }
.sheet-mon img { width: 40px; height: 40px; image-rendering: pixelated; }
.sheet-result { min-height: 1.2em; margin: 0.4rem 0; font-weight: 700; }
.sheet-result.ok { color: #6fdc8c; } .sheet-result.err { color: #f08a8a; }
.sheet-btn {
  width: 100%; margin-top: 0.5rem; padding: 0.75rem; border-radius: 14px; border: 0;
  background: #2f3650; color: #fff; font-weight: 800; font-size: 0.95rem; cursor: pointer;
}
.sheet-btn.gold { background: #f7c531; color: #3a2a00; }

/* ═════════════ Modal «¡Bienvenido de nuevo!» ═════════════ */
.wb-overlay {
  position: fixed; inset: 0; z-index: 2000; background: rgba(5, 8, 20, 0.78);
  display: flex; align-items: center; justify-content: center; padding: 14px; overflow-y: auto;
}
.wb-card {
  width: min(460px, 100%); background: #1c2030; border: 3px solid #c9a227; border-radius: 22px;
  overflow: hidden; color: #f1f5f9; animation: wb-in 0.25s ease-out; max-height: 100%; overflow-y: auto;
}
@keyframes wb-in { from { transform: translateY(18px) scale(0.97); opacity: 0; } }
.wb-head {
  display: flex; align-items: center; gap: 12px; padding: 1.1rem 1rem;
  background: linear-gradient(135deg, #6b5a1c 0%, #2b2a2a 100%); border-bottom: 3px solid #c9a227;
}
.wb-head h2 { margin: 0; flex: 1; font-size: 1.5rem; line-height: 1.15; }
.wb-away { color: #e2dcc0; font-weight: 700; text-align: left; font-size: 0.95rem; max-width: 7.5rem; }
.wb-away small { color: #b9b08a; font-weight: 500; }
.wb-x {
  width: 42px; height: 42px; flex: none; border-radius: 10px; background: #2c2336;
  border: 2px solid #e0707f; color: #ff8a98; font-size: 1.2rem; cursor: pointer;
}
.wb-body { padding: 1rem; }
.wb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wb-stat { background: #262c45; border-radius: 12px; padding: 0.7rem 0.8rem; }
.wb-stat small { display: block; color: #a4adc7; font-weight: 600; }
.wb-stat b { font-size: 1.35rem; }
.wb-stat b.gold { color: #f7c531; }
.wb-section {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1.1rem 0 0.6rem; padding-top: 1rem; border-top: 2px solid #323a5a;
  color: #a4adc7; font-weight: 800; letter-spacing: 0.12em; font-size: 0.9rem;
}
.wb-section b { color: #cbd5e1; letter-spacing: 0; font-size: 1rem; }
.wb-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.wb-mon {
  position: relative; background: #262c45; border-radius: 14px; padding: 6px 4px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.wb-mon.ko { opacity: 0.6; }
.wb-mon img { width: 52px; height: 52px; image-rendering: pixelated; object-fit: contain; }
.wb-lv { font-size: 0.78rem; font-weight: 800; }
.wb-plus { position: absolute; top: 3px; left: 6px; color: #6fdc8c; font-weight: 800; font-size: 0.78rem; }
.wb-xp { width: 88%; height: 5px; background: #12162a; border-radius: 3px; overflow: hidden; }
.wb-xp .fill { height: 100%; background: linear-gradient(90deg, #5ad06e, #b4f04a); }
.wb-items { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-item { display: flex; align-items: center; gap: 4px; background: #262c45; border-radius: 12px; padding: 6px 10px; }
.wb-item img { width: 26px; height: 26px; image-rendering: pixelated; }
.wb-ok {
  width: 100%; margin-top: 1.2rem; padding: 0.95rem; border: 0; border-radius: 14px; cursor: pointer;
  background: #f7c531; color: #2a1d00; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.04em;
  box-shadow: 0 5px 0 #b4821a;
}
.wb-ok:active { transform: translateY(3px); box-shadow: 0 2px 0 #b4821a; }
.bag-help { display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.bag-head h3 { padding: 0; }

.dbox-nature { border: 0; background: inherit; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.nature-effect { margin-top: 0.5rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: rgba(148,163,184,0.15); font-size: 0.85rem; }
.nat-up { color: #4ade80; font-weight: 700; } .nat-down { color: #f87171; font-weight: 700; }

/* ═════════════ Mis Pokémon (lista + filtros) ═════════════ */
.coll-overlay { position: fixed; inset: 0; z-index: 70; background: #eef1f7; overflow-y: auto; color: #1f2937; }
.coll-panel { max-width: 560px; margin: 0 auto; padding: 14px 12px 40px; }
.coll-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.coll-top h2 { margin: 0; font-size: 1.25rem; } .coll-top small { color: #6b7280; font-weight: 600; }
.coll-close { color: #1f2937; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 1rem; cursor: pointer; }
.coll-select { width: 100%; height: 42px; border-radius: 12px; border: 1.5px solid #d1d5db; background: #fff; padding: 0 12px; font-weight: 600; margin-bottom: 10px; }
.coll-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.coll-chips::-webkit-scrollbar { display: none; }
.coll-nature { flex: 0 0 240px; height: 40px; border-radius: 20px; border: 1.5px solid #d1d5db; background: #fff; padding: 0 12px; font-weight: 700; }
.coll-chip { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 1.05rem; padding: 0; cursor: pointer; }
.coll-chip.active { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 2px #fff inset; }
.coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
.coll-card {
  position: relative; background: #fff; border: 2px solid #cbd5e1; border-radius: 14px; cursor: pointer;
  padding: 30px 6px 8px; display: flex; flex-direction: column; align-items: center; color: inherit; font: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.coll-card img { width: 100%; max-width: 84px; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.coll-lv { position: absolute; top: 6px; left: 6px; background: #fff; border-radius: 10px; padding: 1px 6px; font-size: .65rem; font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.coll-team { position: absolute; top: 28px; left: 8px; color: #f59e0b; font-size: .8rem; }
.coll-types { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; gap: 3px; }
.coll-type { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; }
.coll-dex { font-size: .65rem; color: #6b7280; font-weight: 700; }
.coll-name { font-size: .8rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coll-empty { grid-column: 1 / -1; text-align: center; color: #6b7280; padding: 2rem 0; }

.rnode-ok { width: 14px; height: 14px; border-radius: 4px; background: #5fbf72; box-shadow: inset 0 -3px 0 #3e8f50; }
.rnode-now { width: 20px; height: 20px; border-radius: 6px; background: #eef1fb; box-shadow: 0 0 0 3px #0f1220; }
.rnode.gym.todo, .rnode.gym.cur { }
.rnode.gym::after { content: ""; position: absolute; inset: -4px; border: 2px solid #8a7430; border-radius: 10px; pointer-events: none; }
.rnode.gym.cur::before, .rnode.gym.cur::after { animation: none; }
.rnode.done.wild img, .rnode.done.center img, .rnode.done.gym img { opacity: 1; filter: saturate(.3) brightness(.7); }
.rnode.done.wild, .rnode.done.center { opacity: .75; }
.rbar-name { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }

/* ═════════════ Pantalla previa al gimnasio ═════════════ */
.bf-card { border-color: #3a4268; }
.bf-hero { height: 130px; background-size: cover; background-position: center; position: relative; }
.bf-hero img { position: absolute; right: 8%; bottom: 0; height: 120px; image-rendering: pixelated; }
.bf-body { padding: 1rem; }
.bf-title { display: flex; align-items: center; gap: 10px; margin-bottom: 0.7rem; }
.bf-title h2 { margin: 0; font-size: 1.6rem; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bf-chip { display: inline-block; background: #262c45; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .85rem; color: #cbd5e1; margin-bottom: 4px; }
.bf-chip.green { border: 2px solid #3f7d4a; background: #1f3a2a; } .bf-chip.green b { color: #6fdc8c; }
.bf-chip.gold { border: 2px solid #8a7430; background: #3a3320; color: #e8d9a0; }
.bf-chip.blue { background: #1f2a5a; border: 2px solid #34428a; display: block; border-radius: 14px; }
.bf-head2 { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .5rem; color: #a4adc7; font-weight: 800; letter-spacing: .08em; font-size: .85rem; }
.bf-head2 small { letter-spacing: 0; font-weight: 600; color: #7d87a8; }
.bf-sec { border-top: 2px solid #323a5a; padding-top: .7rem; margin-top: .7rem; }
.bf-sec-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; letter-spacing: .08em; font-size: .85rem; color: #cbd5e1; margin-bottom: .5rem; }
.bf-now { background: #f7c531; color: #3a2a00; border-radius: 999px; padding: 2px 8px; font-size: .65rem; }
.bf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.bf-tile { position: relative; background: #12162a; border: 2px solid #3f7d4a; border-radius: 16px; padding: 4px 2px 2px; display: flex; flex-direction: column; align-items: center; }
.bf-tile:not(.own) { border-color: #2a3150; }
.bf-tile:not(.own) img { filter: brightness(0) opacity(.55); }
.bf-tile img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.bf-tile em { font-style: normal; font-size: .68rem; font-weight: 800; color: #cbd5e1; }
.bf-ball { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #3a4060; }
.bf-tile.own .bf-ball { background: #f08a3c; }
.bf-go { width: 100%; margin-top: 1.2rem; padding: .95rem; border: 0; border-radius: 14px; background: #d94848; color: #fff; font-weight: 900; font-size: 1.1rem; letter-spacing: .05em; box-shadow: 0 5px 0 #8f2a2a; cursor: pointer; }

/* Arrastrar equipo / caja */
.team-hint { margin: 0 0 .6rem; font-size: .8rem; color: #94a3b8; text-align: center; }
.team-hint.warn { color: #f08a8a; font-weight: 700; }
.team-card, .team-card * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.team-card.drag-source { opacity: .35; }
.team-card.drop-hover { outline: 3px solid #f7c531; outline-offset: -3px; transform: scale(1.03); }
.box-section.drop-hover { outline: 3px dashed #f7c531; border-radius: 14px; }
.drag-ghost { position: fixed !important; z-index: 3000; pointer-events: none; opacity: .92; transform: scale(1.08) rotate(2deg); box-shadow: 0 10px 24px rgba(0,0,0,.5); margin: 0 !important; }
.box-empty { grid-column: 1 / -1; padding: 1rem; text-align: center; color: #7d87a8; font-size: .85rem; border: 2px dashed #323a5a; border-radius: 12px; }

/* Careo con entrenadores */
.faceoff { position: absolute; inset: 0; z-index: 8; background: linear-gradient(180deg, rgba(8,12,30,.15), rgba(8,12,30,.65)); animation: fo-in .25s ease-out; }
.faceoff img { position: absolute; bottom: 52px; height: 42%; max-height: 150px; image-rendering: pixelated; object-fit: contain; }
.faceoff .fo-me { left: 18%; animation: fo-left .45s ease-out; }
.faceoff .fo-rival { right: 12%; animation: fo-right .45s ease-out; }
.fo-text { position: absolute; left: 8%; right: 8%; bottom: 12px; text-align: center; background: rgba(15,18,32,.92); border: 2px solid #f7c531; color: #fff; border-radius: 12px; padding: .5rem .6rem; font-weight: 800; font-size: .95rem; }
@keyframes fo-in { from { opacity: 0; } }
@keyframes fo-left { from { transform: translateX(-60px); opacity: 0; } }
@keyframes fo-right { from { transform: translateX(60px); opacity: 0; } }
.rival-peek { position: absolute; top: 46px; right: 8px; height: 76px; z-index: 7; image-rendering: pixelated; animation: peek-in .25s ease-out; }
.rival-peek.out { animation: peek-out .3s ease-in forwards; }
@keyframes peek-in { from { transform: translateX(80px); opacity: 0; } }
@keyframes peek-out { to { transform: translateX(80px); opacity: 0; } }

/* ═════════════ Navegación inferior y vistas ═════════════ */
#main { padding-bottom: 96px; }
.view { display: none; }
#main:not([data-view]) .view-adventure,
#main[data-view="adventure"] .view-adventure,
#main[data-view="progress"] .view-progress,
#main[data-view="dex"] .view-dex,
#main[data-view="bag"] .view-bag,
#main[data-view="nursery"] .view-nursery { display: block; }

#bottom-nav {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  max-width: 460px; margin: 0 auto; display: flex; gap: 4px; padding: 6px;
  background: rgba(21, 25, 42, .96); border: 2px solid #323a5a; border-radius: 20px; backdrop-filter: blur(6px);
}
#bottom-nav button {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 7px 2px; border: 0; border-radius: 14px; background: transparent; color: #94a3b8; cursor: pointer;
}
#bottom-nav button span { font-size: 1.25rem; line-height: 1; }
#bottom-nav button em { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
#bottom-nav button.active { background: #d94848; color: #fff; box-shadow: inset 0 -3px 0 #8f2a2a; }

/* Progreso */
.pg-card { margin: .4rem 10px 1rem; background: #1c2030; border: 2px solid #2f6f3d; border-radius: 20px; overflow: hidden; }
.pg-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem; background: linear-gradient(135deg, #2f6f3d, #1f3a2a); }
.pg-head h2 { margin: 0; font-size: 1.4rem; } .pg-head span { color: #cfe9d5; font-size: .85rem; font-weight: 700; }
.pg-region { margin: 12px; padding: 12px; border: 2px solid #e8a33a; border-radius: 16px; background: #3a1f22; display: flex; flex-direction: column; gap: 4px; }
.pg-region small { color: #cbb; } .pg-medals { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pg-medal { image-rendering: pixelated; opacity: .28; filter: grayscale(.8); } .pg-medal.got { opacity: 1; filter: none; }
.pg-sub { margin: .6rem 14px .4rem; color: #94a3b8; font-weight: 800; letter-spacing: .12em; font-size: .8rem; }
.pg-row { position: relative; margin: 8px 12px; min-height: 84px; border-radius: 14px; border: 2px solid var(--c); border-left-width: 6px; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; background: #14182a; }
.pg-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; }
.pg-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,18,32,.85), rgba(15,18,32,.35)); }
.pg-row > *:not(.pg-bg) { position: relative; z-index: 1; }
.pg-row.todo { opacity: .6; } .pg-row.current { box-shadow: 0 0 0 2px #f7c531; }
.pg-num { font-weight: 800; color: #cbd5e1; font-size: .85rem; min-width: 1.4rem; }
.pg-leader { width: 52px; height: 60px; flex: none; display: flex; align-items: flex-end; justify-content: center; }
.pg-leader img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.pg-info { flex: 1; min-width: 0; } .pg-info b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-chip { font-size: .68rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #262c45; color: #cbd5e1; }
.pg-chip.green { background: #1f3a2a; border: 1px solid #3f7d4a; color: #8be6a0; } .pg-chip.blue { background: #1f2a5a; border: 1px solid #34428a; }
.pg-chip.gold { background: #3a3320; border: 1px solid #8a7430; color: #f0dc9a; }
.pg-replay { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #3f7d4a; background: #14301f; color: #8be6a0; font-size: 1.2rem; cursor: pointer; flex: none; }
.pg-lock { font-size: 1.1rem; }

/* Cabeceras fijas y pantalla completa para Equipo / Mis Pokémon */
.team-overlay { align-items: stretch; background: #0f172a; }
.team-panel { max-height: 100vh; height: 100%; max-width: 480px; border-radius: 0; padding-top: 0; }
.team-panel-header { position: sticky; top: 0; z-index: 3; background: #0f172a; padding: .8rem 0 .6rem; margin-bottom: .4rem; }
.team-back, .coll-back { border: 2px solid #475569; background: #1e293b; color: #f1f5f9; border-radius: 12px; padding: .45rem .8rem; font-weight: 800; cursor: pointer; }

/* Mis Pokémon en oscuro */
.coll-overlay { background: #0f1220; color: #e8ecf8; z-index: 70; }
.coll-top { position: sticky; top: 0; z-index: 3; background: #0f1220; padding: .5rem 0; gap: 8px; }
.coll-top h2 { flex: 1; text-align: center; font-size: 1.1rem; } .coll-top small { color: #94a3b8; }
.coll-close { background: #1c2030; border-color: #475569; color: #e8ecf8; }
.coll-select, .coll-nature { background: #1c2030; border-color: #323a5a; color: #e8ecf8; }
.coll-chip { background: #1c2030; border-color: #323a5a; }
.coll-card { background: #1c2030; color: #e8ecf8; box-shadow: none; }
.coll-lv { background: #0f1220; color: #e8ecf8; } .coll-dex { color: #94a3b8; } .coll-empty { color: #94a3b8; }
.coll-card img { background: radial-gradient(circle, rgba(255,255,255,.07), transparent 70%); }

/* Pokédex */
.trainer-chip { cursor: pointer; }
.dx-card { margin: .4rem 10px 1rem; background: #1c1220; border: 2px solid #c0392b; border-radius: 20px; overflow: hidden; }
.dx-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: linear-gradient(135deg, #c0392b, #5a2230); }
.dx-head h2 { margin: 0; font-size: 1.4rem; } .dx-head span { font-weight: 800; font-size: .85rem; color: #ffd9d3; }
.dx-ring-wrap { display: flex; justify-content: center; padding: 18px 0 8px; }
.dx-ring { --p: 0; width: 130px; height: 130px; border-radius: 50%; background: conic-gradient(#f0a93a calc(var(--p) * 1%), #2a2f45 0); display: grid; place-items: center; }
.dx-ring > div { width: 100px; height: 100px; border-radius: 50%; background: #14111c; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dx-ring b { font-size: 1.4rem; } .dx-ring small { color: #94a3b8; }
.dx-regions { padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.dx-reg { display: grid; grid-template-columns: 60px 1fr 74px; align-items: center; gap: 10px; font-weight: 800; }
.dx-reg.lock { opacity: .5; } .dx-reg em { font-style: normal; text-align: right; font-size: .85rem; color: #cbd5e1; }
.dx-bar { height: 10px; border-radius: 6px; background: #2a2f45; overflow: hidden; } .dx-bar i { display: block; height: 100%; background: #e04b3a; }
.dx-sub { padding: 10px 14px 4px; color: #94a3b8; font-weight: 800; letter-spacing: .1em; font-size: .75rem; }
.dx-last { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 14px; } .dx-last img { width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.dx-tools { display: flex; gap: 8px; margin: 0 10px 10px; }
.dx-tools input, .dx-tools select { background: #1c2030; border: 2px solid #323a5a; color: #e8ecf8; border-radius: 12px; padding: .6rem .8rem; font: inherit; min-width: 0; }
.dx-tools input { flex: 1; }
.dx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 10px; }
.dx-cell { position: relative; aspect-ratio: 1; border-radius: 12px; background: #14182a; border: 2px solid #2a2f45; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.dx-cell.got { border-color: #7a3040; background: #231826; }
.dx-cell img { width: 78%; height: 66%; object-fit: contain; image-rendering: pixelated; }
.dx-cell.none img { filter: brightness(0) opacity(.45); } .dx-cell.seen img { filter: brightness(.25) contrast(1.2); }
.dx-cell small { font-size: .55rem; color: #94a3b8; font-weight: 700; }
.dx-ball { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(#e04b3a 50%, #fff 50%); }
.dx-empty { grid-column: 1/-1; text-align: center; color: #94a3b8; }

/* Ficha de entrenador */
.tc-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 14px; }
.tc-panel { width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: #1a1d2e; border: 2px solid #b0404a; border-radius: 20px; }
.tc-header { display: flex; align-items: center; gap: 8px; padding: .8rem; background: linear-gradient(135deg, #7a2a3a, #4a2030); position: sticky; top: 0; }
.tc-header h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.tc-tabs { display: flex; background: #12141f; border-radius: 12px; padding: 3px; }
.tc-tabs button { border: 0; background: transparent; color: #94a3b8; font-weight: 800; font-size: .7rem; padding: .45rem .6rem; border-radius: 9px; cursor: pointer; }
.tc-tabs button.on { background: #d94848; color: #fff; }
.tc-x { width: 36px; height: 36px; border-radius: 10px; border: 2px solid #e08080; background: transparent; color: #f2a0a0; cursor: pointer; }
.tc-body { padding: 14px; }
.tc-top { display: flex; gap: 12px; }
.tc-art { width: 110px; height: 130px; flex: none; background: #12141f; border-radius: 14px; display: flex; align-items: flex-end; justify-content: center; } .tc-art img { max-width: 90%; max-height: 90%; image-rendering: pixelated; }
.tc-id { flex: 1; display: flex; flex-direction: column; gap: 6px; } .tc-id h3 { margin: 0; font-size: 1.5rem; }
.tc-box { background: #232842; border-radius: 10px; padding: 7px 10px; } .tc-box.wide { margin-bottom: 4px; }
.tc-box small, .tc-stats small { display: block; color: #94a3b8; font-size: .7rem; } .tc-box b { font-size: 1rem; }
.tc-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 700; }
.tc-prog { display: flex; align-items: center; gap: 12px; margin: 12px 0; background: #232842; border-radius: 12px; padding: 10px; }
.tc-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#e04b3a calc(var(--p) * 1%), #2a2f45 0); display: grid; place-items: center; position: relative; flex: none; }
.tc-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #232842; } .tc-ring b { position: relative; font-size: .8rem; }
.tc-sub { display: flex; justify-content: space-between; margin: 14px 0 8px; color: #94a3b8; font-weight: 800; letter-spacing: .1em; font-size: .75rem; }
.tc-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tc-team div { position: relative; aspect-ratio: 1; background: #232842; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.tc-team img { width: 90%; image-rendering: pixelated; } .tc-team em { position: absolute; bottom: 1px; right: 4px; font-size: .65rem; font-style: normal; font-weight: 800; }
.tc-medals { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background: #232842; border-radius: 12px; padding: 8px; }
.tc-medals div { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #323a5a; border-radius: 8px; transform: rotate(0); font-size: 1rem; } .tc-medals .got { border-color: #e8a33a; background: #3a3320; }
.tc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tc-stats > div { background: #232842; border-radius: 10px; padding: 8px 10px; }
.tc-stats .w2 { grid-column: 1/-1; } .tc-stats b { font-size: 1.15rem; } .tc-stats em { font-style: normal; color: #94a3b8; font-size: .8rem; }

.mw-panel { text-align: center; padding: 22px 18px; border-color: #e8a33a; }
.mw-gem { font-size: 3.4rem; } .mw-panel h2 { margin: .3rem 0; } .mw-panel p { color: #cbd5e1; }
.mw-next { background: #1f3a2a; border: 2px solid #3f7d4a; border-radius: 12px; padding: 10px; color: #bff0cb !important; }
.mw-ok { margin-top: 12px; width: 100%; padding: .8rem; border: 0; border-radius: 14px; background: #d94848; color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer; }

/* Equipo + Mis Pokémon unificados */
.team-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 110px; }
.box-section { padding: 0 2px; }
.box-section .box-title { font-weight: 800; margin: 14px 0 8px; font-size: 1.05rem; }
.box-section .coll-select { width: 100%; margin-bottom: 8px; }
.box-section .coll-chips { margin-bottom: 8px; }
.box-section .coll-grid { padding: 4px 0; }
.coll-card.drag-source { opacity: .35; } .coll-card.drop-hover, .team-card.drop-hover { outline: 3px solid #f7c531; }
.coll-card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.drag-ghost.coll-card { position: fixed; z-index: 200; pointer-events: none; opacity: .92; transform: scale(1.06); margin: 0; }

/* Fuente pixel para títulos y botones */
:root { --font-display: "Press Start 2P", system-ui, sans-serif; }
h1, h2, h3, .detail-title, .team-title, .box-title, .detail-stats-title, .pg-info b, .pg-head h2, .dx-head h2, .tc-header h2,
#bottom-nav em, .money, .speed-controls button, .route-name, .coll-name, .team-card-name, .tc-sub, .dx-sub, .pg-sub, .mw-ok, .evo-btn, .wb-ok, .btn-release, .tc-tabs button, .tc-id h3 {
  font-family: var(--font-display); letter-spacing: .02em;
}

/* Familia / evoluciones */
.evo-tree { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.evo-col { display: flex; flex-direction: column; gap: 8px; flex: none; }
.evo-node { width: 104px; border-radius: 14px; background: #14182a; border: 2px dashed #323a5a; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.evo-node.cur { border: 2px solid #f7c531; background: #2c2a1f; }
.evo-node img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.evo-node.unk img { filter: brightness(0) opacity(.5); }
.evo-node b { font-family: var(--font-display); font-size: .85rem; min-height: 1em; } .evo-node small { color: #94a3b8; }
.evo-req { font-size: .68rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: #262c45; color: #94a3b8; display: inline-flex; align-items: center; gap: 3px; }
.evo-req.ok { background: #1f3a2a; color: #8be6a0; }
.evo-btn { margin-top: 2px; width: 100%; border: 0; border-radius: 10px; padding: .4rem; background: #d94848; color: #fff; font-weight: 800; cursor: pointer; font-size: .78rem; }
.evo-btn:disabled { background: #2a2f45; color: #64748b; cursor: default; }
.evo-node .evo-req img { width: 14px; height: 14px; }

/* ===== Captura: Poké Ball ===== */
.capture-ball {
  position: absolute;
  left: 22%;
  bottom: 38%;
  z-index: 20;
  width: 36px;
  height: 36px;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0;
  pointer-events: none;
}
.capture-ball img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.capture-ball.throw {
  animation: ballThrow 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes ballThrow {
  0%   { left: 22%; bottom: 30%; opacity: 0; transform: translate(-50%,0) scale(0.5) rotate(0deg); }
  15%  { opacity: 1; }
  100% { left: 68%; bottom: 42%; opacity: 1; transform: translate(-50%,0) scale(1) rotate(540deg); }
}
.capture-ball.landed {
  left: 68%;
  bottom: 42%;
  opacity: 1;
  transform: translate(-50%,0) scale(1);
  animation: none;
}
.capture-ball.wobble {
  animation: ballWobble 0.38s ease-in-out;
}
@keyframes ballWobble {
  0%, 100% { transform: translate(-50%,0) rotate(0deg); }
  25% { transform: translate(-50%,0) rotate(-18deg); }
  75% { transform: translate(-50%,0) rotate(18deg); }
}
.capture-ball.caught {
  animation: ballCatch 0.5s forwards;
}
@keyframes ballCatch {
  0% { transform: translate(-50%,0) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%,0) scale(1.25); filter: brightness(1.6); }
  100% { transform: translate(-50%,0) scale(1); filter: brightness(1); }
}
.capture-ball.broke {
  animation: ballBreak 0.45s forwards;
}
@keyframes ballBreak {
  0% { opacity: 1; transform: translate(-50%,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-20px) scale(0.6) rotate(40deg); }
}
.capture-shrink {
  animation: monShrink 0.35s forwards;
}
@keyframes monShrink {
  to { transform: scale(0.15); opacity: 0.2; }
}
.capture-stars {
  position: absolute;
  left: 68%;
  bottom: 50%;
  transform: translateX(-50%);
  z-index: 21;
  font-size: 1.2rem;
  animation: starsPop 0.7s ease-out forwards;
  pointer-events: none;
}
@keyframes starsPop {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.5); }
  40% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(1); }
}

/* ===== FX de movimientos ===== */
.move-fx {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  left: 50%;
  bottom: 40%;
  transform: translate(-50%, 0);
}
.move-fx-from-ally { animation: fxFlyRight 0.4s ease-out forwards; }
.move-fx-from-enemy { animation: fxFlyLeft 0.4s ease-out forwards; }
@keyframes fxFlyRight {
  from { left: 28%; opacity: 0.2; transform: translate(-50%,0) scale(0.4); }
  to   { left: 68%; opacity: 1; transform: translate(-50%,0) scale(1); }
}
@keyframes fxFlyLeft {
  from { left: 72%; opacity: 0.2; transform: translate(-50%,0) scale(0.4); }
  to   { left: 32%; opacity: 1; transform: translate(-50%,0) scale(1); }
}

.move-fx-fire {
  background: radial-gradient(circle, #fbbf24 0%, #ef4444 45%, transparent 70%);
  box-shadow: 0 0 18px #f97316;
}
.move-fx-water {
  background: radial-gradient(circle, #7dd3fc 0%, #2563eb 50%, transparent 70%);
  box-shadow: 0 0 16px #38bdf8;
}
.move-fx-electric {
  background: radial-gradient(circle, #fef08a 0%, #eab308 40%, transparent 70%);
  box-shadow: 0 0 20px #facc15;
}
.move-fx-grass {
  background: radial-gradient(circle, #86efac 0%, #16a34a 50%, transparent 70%);
  box-shadow: 0 0 14px #22c55e;
}
.move-fx-rayon, .move-fx-zone {
  background: radial-gradient(circle, #e9d5ff 0%, #a855f7 45%, transparent 70%);
  box-shadow: 0 0 18px #c084fc;
}
.move-fx-entaille, .move-fx-contact, .move-fx-poing, .move-fx-morsure {
  background: radial-gradient(circle, #fff 0%, #fca5a5 40%, transparent 70%);
  box-shadow: 0 0 12px #f87171;
  border-radius: 8px;
}
.move-fx-projectile {
  background: radial-gradient(circle, #d6d3d1 0%, #78716c 50%, transparent 70%);
}
.move-fx-ciel {
  background: radial-gradient(circle, #e0f2fe 0%, #38bdf8 50%, transparent 70%);
}

.fx-lunge {
  animation: lunge 0.35s ease-out;
}

/* Fuente estilo juego (pixel) */
html, body, button, input, .battle-msg, .dialogue-text, .route-name, .team-title {
  font-family: "Press Start 2P", "Courier New", monospace !important;
}
body {
  font-size: 11px;
  line-height: 1.55;
}
.battle-msg {
  font-size: 0.72rem !important;
  line-height: 1.45 !important;
}
.route-header, .trainer-chip, .btn-team, .scene-topbar {
  font-size: 0.62rem !important;
}

/* Captura: entrenador lanza la ball */
.capture-throw-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
.capture-trainer {
  position: absolute;
  left: -20%;
  bottom: 18%;
  opacity: 0;
  transition: none;
}
.capture-trainer img {
  width: 100px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.capture-trainer.in {
  animation: trainerInThrow 0.45s ease-out forwards;
}
.capture-trainer.throwing img {
  transform: rotate(-12deg) translateX(8px);
}
.capture-trainer.out {
  animation: trainerOutThrow 0.5s ease-in forwards;
}
@keyframes trainerInThrow {
  from { left: -25%; opacity: 0; }
  to { left: 10%; opacity: 1; }
}
@keyframes trainerOutThrow {
  from { left: 10%; opacity: 1; }
  to { left: -20%; opacity: 0; }
}

.capture-throw-layer .capture-ball {
  position: absolute;
  left: 22%;
  bottom: 36%;
  z-index: 21;
  width: 34px;
  height: 34px;
  opacity: 0;
}
.capture-throw-layer .capture-ball img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.capture-throw-layer .capture-ball.throw {
  animation: ballThrow 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.capture-throw-layer .capture-ball.landed {
  left: 68%;
  bottom: 42%;
  opacity: 1;
  transform: translate(-50%,0) scale(1);
  animation: none;
}
.capture-throw-layer .capture-ball.wobble {
  animation: ballWobble 0.4s ease-in-out;
}
.capture-throw-layer .capture-ball.caught {
  animation: ballCatch 0.5s forwards;
}
.capture-throw-layer .capture-ball.broke {
  animation: ballBreak 0.45s forwards;
}


/* Fuente más compacta (Press Start 2P es grande por defecto) */
html, body {
  font-size: 10px !important;
}
.weather-chip, .clock-chip, .scene-topbar {
  font-size: 0.55rem !important;
  max-width: 48% !important;
  padding: 3px 6px !important;
}
.weather-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 11rem;
}
.battle-msg {
  font-size: 0.65rem !important;
}
.btn-team, .bottom-nav, .nav-label {
  font-size: 0.55rem !important;
}
.route-header, .trainer-chip {
  font-size: 0.55rem !important;
}
.item-sprite {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
}
.bag-tile img.item-sprite {
  width: 36px;
  height: 36px;
}

/* Fondo de escena: cubrir bien, sin color verde plano si hay imagen */
.battle-scene {
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-color: #1a2332 !important; /* fallback oscuro, no verde */
}

.bag-tile .item-sprite {
  width: 36px !important;
  height: 36px !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
  display: block;
  margin: 0 auto 2px;
}
.sheet-icon .item-sprite {
  width: 44px !important;
  height: 44px !important;
  image-rendering: pixelated;
}

.bag-tile {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bag-tile .item-sprite {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  image-rendering: pixelated;
  object-fit: contain;
  background: transparent;
}

/* Evolución */
.evo-flash {
  animation: evoPulse 0.35s ease-in-out 3;
  filter: brightness(2) saturate(0.3);
}
@keyframes evoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.08); }
}

/* Centro Pokémon */
.center-heal-fx {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 40, 0.35);
  pointer-events: none;
}
.heal-beam {
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,220,255,0.55) 0%, rgba(80,160,255,0.15) 45%, transparent 70%);
  animation: healPulse 1.2s ease-in-out;
}
.heal-text {
  margin-top: -1rem;
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
}
@keyframes healPulse {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(1.2); }
}

/* Sprites laterales/frontales: ambos bandos, tamaño variable */
.battle-mon img.mon-sprite {
  width: auto !important;
  height: auto !important;
  max-width: 120px;
  max-height: 120px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Aliado mira hacia el rival */
.battle-mon.ally img.mon-sprite {
  transform: scaleX(-1);
}
.battle-mon.ally img.mon-sprite.fx-lunge,
.battle-mon.ally img.mon-sprite.anim-attack {
  /* mantiene el flip en animaciones básicas */
  transform: scaleX(-1);
}

.battle-mon {
  justify-content: flex-end;
  align-items: center;
  min-height: 100px;
}
.battle-mon img.mon-sprite {
  margin-top: auto;
}

/* Posición de los Pokémon según el fondo */
.battle-mon { transform: translateY(calc(8px - var(--mon-lift, 12px))) !important; }
.bgk-lake { --mon-lift: 46px; }
.bgk-town { --mon-lift: 2px; }
.bgk-gym-water, .bgk-gym-rock, .bgk-gym-grass, .bgk-gym-electric, .bgk-gym-poison, .bgk-gym-psychic, .bgk-gym-fire, .bgk-gym-ground { --mon-lift: 14px; }
.bgk-beach { --mon-lift: 8px; }

/* Chips del mapa: que se lea todo el texto */
.scene-topbar { flex-wrap: wrap !important; gap: 4px !important; align-items: flex-start !important; }
.clock-chip { flex: none !important; max-width: none !important; }
.weather-chip { flex: 1 1 8rem !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.25; justify-content: flex-start !important; }
.weather-chip span { white-space: normal !important; max-width: none !important; overflow: visible !important; text-overflow: clip !important; display: inline !important; }
.rbar-name { max-width: 6.2rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15; font-size: .55rem !important; word-break: break-word; }

/* Entrenador de captura: sin inclinación */
.capture-trainer.throwing img { transform: none !important; }
.capture-trainer img { transition: none; }

/* Noche: oscurece solo el fondo (no tiñe de morado a los Pokémon ni sus llamas) */
.battle-scene.is-night { filter: none !important; background-color: #5d6b99 !important; background-blend-mode: multiply !important; }
.battle-scene.is-night::after { display: none !important; }

/* Pokédex estilo original */
.dx-card { background: #1b1220 linear-gradient(rgba(255,255,255,.015) 50%, transparent 50%) 0 0/100% 4px; }
.dx-title { display: flex; align-items: center; gap: 10px; } .dx-title h2 { margin: 0; }
.dx-help { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #5a4a60; background: #2a2236; color: #e8ecf8; font-weight: 800; cursor: pointer; }
.dx-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 10px 16px 0; color: #cbd5e1; font-size: .62rem; } .dx-stats b { color: #fff; margin-left: 4px; }
.dx-tools { position: sticky; top: 0; z-index: 5; margin: 0 0 10px; padding: 8px 10px; background: rgba(13,16,28,.96); backdrop-filter: blur(6px); }
.dx-tools select { font-family: var(--font-display); font-weight: 800; border-radius: 10px; padding: .6rem .5rem; appearance: none; text-align: center; }
.dx-region-head { width: 100%; border: 0; color: inherit; cursor: pointer; text-align: left; }
.dx-caret { font-style: normal; display: inline-block; transition: transform .2s; margin-left: 6px; }
.dx-kanto.closed .dx-caret { transform: rotate(-90deg); } .dx-kanto.closed .dx-grid { display: none; }
.dx-regbar { padding: 10px 14px 0; }
.dx-grid { gap: 8px; padding: 12px; }
.dx-cell { border-radius: 14px 14px 14px 14px; background: #161a2c linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%) 0 0/100% 4px; border: 2px solid #2a3150; }
.dx-cell.got { border-color: #a8454f; background-color: #241a2a; }
.dx-cell img { width: 86%; height: 70%; object-fit: contain; image-rendering: pixelated; margin-top: 4px; }
.dx-cell.seen img { filter: brightness(.18) contrast(1.1); }
.dx-cell.none img { filter: brightness(0) opacity(.5); }
.dx-new { position: absolute; bottom: 20px; right: 2px; background: #f7c531; color: #3a2a00; font-size: .45rem; font-weight: 800; padding: 1px 4px; border-radius: 8px; font-family: var(--font-display); }

/* Variocolor + filtro de naturaleza */
.dx-shbtn { background:#1c2030; border:2px solid #323a5a; color:#8e96b8; border-radius:10px; width:44px; font-size:1.2rem; cursor:pointer; }
.dx-shbtn.on { color:#ffd84a; border-color:#ffd84a; background:#2b2a14; }
.dx-shchip { font-style:normal; font-size:.72rem; color:#ffd84a; background:#2b2a14; border:1px solid #ffd84a55; border-radius:999px; padding:2px 8px; margin-right:8px; }
.dx-cell { position:relative; }
.dx-shiny { position:absolute; top:2px; left:4px; color:#ffd84a; font-size:.8rem; text-shadow:0 0 4px #000; }
.dx-filt { position:absolute; bottom:16px; right:3px; font-size:.65rem; color:#9ad; }
.dx-pick { cursor:pointer; }
.mon-shiny { color:#ffd84a; margin-left:4px; text-shadow:0 0 4px #000; }
.np-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:12px; }
.np-box { background:#171b2b; border:2px solid #323a5a; border-radius:16px; width:100%; max-width:420px; max-height:88vh; display:flex; flex-direction:column; color:#e8ecf8; }
.np-head { display:flex; gap:10px; padding:12px; align-items:center; }
.np-head img { width:64px; height:64px; image-rendering:pixelated; }
.np-head h3 { margin:0 0 4px; } .np-head small { color:#9aa3c4; font-size:.72rem; line-height:1.25; display:block; }
.np-tools { display:flex; gap:8px; padding:0 12px 8px; }
.np-tools button, .np-foot button { background:#232944; color:#e8ecf8; border:1px solid #3a4268; border-radius:10px; padding:.5rem .9rem; font:inherit; cursor:pointer; }
.np-list { overflow:auto; padding:0 12px; flex:1; }
.np-row { display:flex; gap:10px; align-items:center; padding:.5rem .2rem; border-bottom:1px solid #232944; }
.np-row input { width:20px; height:20px; }
.np-foot { display:flex; gap:8px; justify-content:flex-end; padding:12px; }
.np-foot .ok { background:#2f7d4a; border-color:#3fa862; }

/* Nv. pegado al Pokémon (el PNG trae margen transparente abajo) */
.battle-mon { gap: 0 !important; }
.battle-mon img.mon-sprite { margin-bottom: -14px !important; }
.battle-mon .lv { position: relative; z-index: 2; }
.battle-mon .hp-mini { margin-bottom: -6px; position: relative; z-index: 2; }

/* Ficha: estadísticas estilo original */
.stat-row { grid-template-columns: 104px 40px 1fr !important; gap: .5rem !important; margin-bottom: .45rem !important; }
.stat-row .sr-l { white-space: nowrap; font-weight: 700; }
.stat-row .sr-v { font-weight: 800; text-align: left; }
.stat-row .sr-v.up { color: #6ee7a0; } .stat-row .sr-v.down { color: #f08a8a; }
.stat-bar { height: 8px !important; border-radius: 4px !important; }
.stat-bar div { border-radius: 4px; }
.stats-toggle { width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.stats-toggle .st-caret { display: inline-block; transition: transform .2s; font-style: normal; }
.stats-toggle.closed .st-caret { transform: rotate(-90deg); }
.detail-stats.collapsed { display: none; }
.hist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.hist-grid .dbox { min-width: 0; } .hist-grid .dbox .v { font-size: .8rem; overflow-wrap: anywhere; }

/* Chips del mapa en una sola línea y rail debajo de ellos */
.scene-topbar { flex-wrap: nowrap !important; }
.weather-chip, .weather-chip span { white-space: nowrap !important; font-size: .68rem !important; flex: 0 1 auto !important; }
.clock-chip { font-size: .72rem !important; }
.team-rail { top: 44px !important; }

/* Capturas en la ventana de regreso */
.wb-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.wb-cap { position: relative; background: #232944; border-radius: 12px; padding: 6px 2px; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wb-cap img { width: 52px; height: 52px; image-rendering: pixelated; }
.wb-cap .wb-cn { font-size: .62rem; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-cap small { font-size: .56rem; color: #8fe3a8; }
.wb-cap.family small, .wb-cap.filtered small, .wb-cap.fail small { color: #9aa3c4; }
.wb-cap.filtered, .wb-cap.family { opacity: .75; }
.wb-shiny { position: absolute; top: 2px; right: 4px; color: #ffd84a; font-style: normal; font-size: .8rem; text-shadow: 0 0 4px #000; }
.wb-none { color: #9aa3c4; font-size: .8rem; margin: 0 0 12px; }
.wb-cap.dim { opacity: .75; }
.wb-cap small { line-height: 1.2; padding: 0 2px; }
.wb-n { position: absolute; top: 2px; left: 4px; font-style: normal; font-size: .62rem; font-weight: 800; background: #0008; border-radius: 6px; padding: 0 4px; }

/* Ficha estilo original: borde por tipo, cabecera fija, papelera en la foto */
.detail-overlay { align-items: center !important; padding: 12px !important; }
.detail-panel { --tc: #64748b; display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden !important;
  max-height: 92vh; border-radius: 22px !important; border: 3px solid var(--tc); box-shadow: 0 0 0 1px #0008, 0 0 24px color-mix(in srgb, var(--tc) 35%, transparent); }
.detail-top { flex: none; margin: 0 !important; padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #0f172a), color-mix(in srgb, var(--tc) 18%, #0f172a)); border-bottom: 2px solid var(--tc); }
.detail-title { color: #fff; text-shadow: 0 1px 2px #0008; }
.detail-num { color: #ffffffcc !important; }
.detail-body { flex: 1; overflow-y: auto; padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.detail-sprite-wrap { overflow: hidden; }
.detail-trash { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(15,23,42,.8); color: #fca5a5; font-size: 1rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.detail-trash:active { background: #7f1d1d; }
.detail-sep { border: 0; height: 2px; background: #232a45; margin: 14px 0; }
.evo-node { height: 150px; justify-content: center; }
.evo-node .evo-btn { padding: .3rem; font-size: .7rem; }
.evo-tree { align-items: stretch; }
.evo-col { justify-content: center; }

/* Selector de naturalezas: cabe en pantallas iOS (barra del navegador) */
.np-overlay { height: 100vh; height: 100dvh; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important; align-items: center; }
.np-box { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px)); min-height: 0; overflow: hidden; }
.np-head, .np-tools, .np-foot { flex: none; }
.np-head { align-items: flex-start; }
.np-head img { flex: none; width: 64px; height: 64px; object-fit: contain; }
.np-head > div { min-width: 0; }
.np-list { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.np-foot { border-top: 1px solid #232944; }
.np-foot button { flex: 1; padding: .7rem .9rem; }
.np-info { margin-left: auto; width: 40px; padding: .5rem 0 !important; text-align: center; }
.np-tip { margin: 0 12px 8px; padding: 8px 10px; background: #1d2440; border: 1px solid #3a4268; border-radius: 10px; font-size: .78rem; line-height: 1.35; flex: none; max-height: 30vh; overflow: auto; }
.np-tip small { color: #9aa3c4; display: block; margin-top: 4px; }

/* Crianza */
.nu-wrap { padding: 0 0 100px; }
.nu-card { margin: 0 10px 12px; padding: 12px; }
.nu-card h3 { margin: 0 0 10px; font-size: 1rem; display: flex; justify-content: space-between; align-items: baseline; }
.nu-card h3 small { color: #9aa3c4; font-size: .75rem; }
.nu-pair { display: flex; align-items: center; gap: 8px; }
.nu-heart { color: #f472b6; font-size: 1.4rem; }
.nu-par { flex: 1; min-width: 0; background: #1c2030; border: 2px solid #323a5a; border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: inherit; font: inherit; }
.nu-par.empty { min-height: 128px; justify-content: center; border-style: dashed; cursor: pointer; }
.nu-par.empty span { font-size: 1.8rem; color: #9aa3c4; }
.nu-par img { width: 64px; height: 64px; image-rendering: pixelated; object-fit: contain; }
.nu-par small { color: #9aa3c4; font-size: .68rem; text-align: center; }
.nu-par button { margin-top: 4px; background: #232944; color: #e8ecf8; border: 1px solid #3a4268; border-radius: 8px; padding: .3rem .7rem; font: inherit; font-size: .72rem; cursor: pointer; }
.nu-status { margin-top: 10px; font-size: .82rem; color: #c3cae6; text-align: center; }
.nu-bar { height: 8px; background: #1e293b; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.nu-bar i { display: block; height: 100%; background: #f472b6; border-radius: 4px; transition: width 1s linear; }
.nu-none { color: #9aa3c4; font-size: .82rem; margin: 0; }
.nu-eggs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-egg { background: #1c2030; border: 2px solid #323a5a; border-radius: 14px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #e8ecf8; font: inherit; cursor: pointer; }
.nu-egg:disabled { opacity: .5; cursor: default; }
.nu-egg small { font-size: .7rem; }
.nu-incs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.nu-inc { background: #1c2030; border: 2px solid #323a5a; border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 120px; justify-content: center; }
.nu-inc.empty { border-style: dashed; color: #6b7494; }
.nu-inc b { font-size: .95rem; }
.nu-inc .nu-bar { width: 90%; }
.egg { display: block; width: 38px; height: 50px; border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%; background:
  radial-gradient(circle at 30% 30%, #fff8 0 8%, transparent 9%),
  radial-gradient(circle at 62% 62%, #5aa86a 0 9%, transparent 10%),
  radial-gradient(circle at 38% 72%, #5aa86a 0 7%, transparent 8%),
  radial-gradient(circle at 66% 34%, #5aa86a 0 6%, transparent 7%),
  #f3ecd2; box-shadow: inset -4px -6px 8px #0002, 0 2px 4px #0006; }
.egg.warm { animation: eggWiggle 1.6s ease-in-out infinite; }
@keyframes eggWiggle { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } }
.nu-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid #232944; padding: 8px 4px; color: #e8ecf8; font: inherit; text-align: left; cursor: pointer; }
.nu-opt img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.nu-opt small { display: block; color: #9aa3c4; font-size: .7rem; }
.poke-toast { position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top, 0px)); z-index: 99999; max-width: 420px; margin: 0 auto; background: #1d2440; border: 2px solid #f472b6; color: #fff; border-radius: 14px; padding: .7rem 1rem; text-align: center; font-weight: 700; font-size: .85rem; box-shadow: 0 6px 20px #0008; }

/* Crianza: bayas, bloqueos y animación de eclosión */
.nu-berries { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.nu-berry { background: #1c2030; border: 2px solid #323a5a; border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: #e8ecf8; font: inherit; cursor: pointer; }
.nu-berry:disabled { opacity: .4; cursor: default; }
.nu-berry small { font-size: .68rem; color: #9aa3c4; } .nu-berry em { font-style: normal; font-size: .66rem; color: #f472b6; font-weight: 800; }
.nu-lock { text-align: center; color: #9aa3c4; font-size: .85rem; padding: 14px 0; }
.nu-locked h3 { opacity: .7; }
.nu-inc.locked { border-style: dashed; color: #9aa3c4; font-size: 1.3rem; }
.nu-inc.locked button { background: #232944; color: #ffd84a; border: 1px solid #3a4268; border-radius: 10px; padding: .4rem .6rem; font: inherit; font-size: .72rem; cursor: pointer; line-height: 1.3; }
.nu-inc.locked small { font-size: .72rem; }
.hatch-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(5,8,18,.88); display: grid; place-items: center; }
.hatch-stage { position: relative; width: 240px; height: 260px; display: grid; place-items: center; }
.hatch-egg { width: 96px; height: 128px; animation: hatchShake .5s ease-in-out infinite; transition: opacity .2s; position: relative; }
.hatch-stage.crack .hatch-egg { animation-duration: .18s; }
.hatch-stage.crack .hatch-egg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 44%, #3b2f1a 45% 47%, transparent 48%), linear-gradient(65deg, transparent 54%, #3b2f1a 55% 57%, transparent 58%); border-radius: inherit; }
@keyframes hatchShake { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg) translateX(-3px); } 75% { transform: rotate(9deg) translateX(3px); } }
.hatch-flash { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, #fff 0, #fff0 70%); opacity: 0; pointer-events: none; }
.hatch-stage.pop .hatch-flash { animation: hatchFlash .9s ease-out forwards; }
.hatch-stage.pop .hatch-egg { opacity: 0; animation: none; }
@keyframes hatchFlash { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
.hatch-mon { position: absolute; display: none; flex-direction: column; align-items: center; color: #fff; gap: 4px; }
.hatch-stage.pop .hatch-mon { display: flex; animation: hatchPop .6s cubic-bezier(.2,1.6,.4,1) .15s both; }
.hatch-mon img { width: 120px; height: 120px; image-rendering: pixelated; object-fit: contain; }
.hatch-mon small { color: #f9a8d4; }
@keyframes hatchPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.np-list .coll-grid { padding-bottom: 8px; }
.np-list .nu-opt.coll-card { width: auto; padding: 8px 4px; border: 2px solid; border-bottom-width: 2px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.nu-held { background: #1d2440 !important; border-color: #3a4268 !important; font-size: .68rem !important; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.nu-held.on { border-color: #b9c2cc !important; color: #fff; }
.nu-nat { font-style: normal; font-size: .62rem; color: #b9c2cc; }
.coll-shbtn { flex: none; background: #2b2a14; color: #ffd84a; border: 2px solid #ffd84a66; border-radius: 12px; padding: .55rem .8rem; font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.coll-shbtn.active { background: #ffd84a; color: #1b1700; border-color: #ffd84a; }
.mon-lock { position: absolute; bottom: 6px; right: 8px; font-style: normal; font-size: .85rem; }
.mon-shiny { font-size: 1rem; }
.detail-lock { margin-left: auto; background: #232944; color: #e8ecf8; border: 1px solid #3a4268; border-radius: 999px; padding: .25rem .7rem; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.detail-lock.on { background: #3a3114; color: #ffd84a; border-color: #ffd84a; }

/* Medallas FRLG + ficha de entrenador (plantilla del original) */
.badge-px { display: inline-block; image-rendering: pixelated; flex: none; }
.badge-px.off { opacity: .35; filter: grayscale(1) brightness(.8); }
.pg-medal { opacity: 1 !important; filter: none !important; display: inline-flex; }
.mw-gem .badge-px { animation: hatchPop .7s cubic-bezier(.2,1.6,.4,1) both; filter: drop-shadow(0 0 10px #ffd84a); }
.tc-panel { border-radius: 24px; }
.tc-top { gap: 14px; align-items: flex-start; }
.tc-left { flex: none; width: 138px; }
.tc-art { position: relative; width: 138px; height: 180px; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #2a2f48 0 38%, #12141f 39%); overflow: hidden; display: block; }
.tc-art .tc-partner { position: absolute; right: -6px; bottom: 6px; width: 86%; opacity: .95; image-rendering: pixelated; }
.tc-art .tc-trainer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 96%; max-width: none; width: auto; image-rendering: pixelated; }
.tc-comp { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .74rem; font-weight: 800; color: #cfd6f0; min-width: 0; }
.tc-comp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-ball { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #f472b6 0 48%, #fff 49% 55%, #e9d5ff 56%); border: 2px solid #5b3a6e; flex: none; }
.tc-id { min-width: 0; }
.tc-name { display: flex; align-items: center; gap: 8px; }
.tc-name img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #12141f; image-rendering: pixelated; }
.tc-name h3 { font-size: 1.6rem !important; line-height: 1; overflow: hidden; text-overflow: ellipsis; }
.tc-name small { color: #9aa3c4; font-weight: 800; }
.tc-edit { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 0; background: #12141f; color: #e8ecf8; cursor: pointer; }
.tc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tc-prog { margin: 8px 0 0 !important; }
.tc-shiny { display: block; color: #ffd84a; font-size: .8rem; font-weight: 800; }
.tc-prog small { color: #ffd84a99; }
.tc-medals { background: #232842; border-radius: 14px; padding: 14px 8px 18px; display: block !important; grid-template-columns: none !important; }
.tc-mrow { display: flex; justify-content: center; gap: 22px; }
.tc-mrow.lo { margin-top: -10px; padding-left: 62px; }
.tc-medals .tc-dia { aspect-ratio: auto; width: 48px; height: 48px; transform: rotate(45deg); border: 3px solid #323a5a; border-radius: 9px; background: #1a1f35; display: grid; place-items: center; }
.tc-medals .tc-dia span { transform: rotate(-45deg); display: block; }
.tc-medals .tc-dia.got { border-color: #4a557f; background: #20284a; }
.tc-medals .tc-mrow { aspect-ratio: auto; border: 0; border-radius: 0; background: none; transform: none; display: flex; width: auto; height: auto; font-size: inherit; }
.tc-medals .tc-mrow .tc-dia { flex: none; }
.tc-mrow { gap: 26px !important; }
.tc-mrow.lo { margin-top: -6px !important; padding-left: 66px !important; }
.tc-medals .tc-dia { width: 40px !important; height: 40px !important; }
.tc-medals { padding: 18px 8px 22px !important; }

/* ── Ficha de entrenador: reverso ── */
.tc-hr { border: 0; border-top: 2px solid #2b3150; margin: 14px 0 0; }
.tc-body .tc-sub { margin: 14px 0 8px; }
.tc-stats { grid-template-columns: 1fr 1fr; }
.tc-stats > .tc-st { display: flex; align-items: center; gap: 10px; background: #232842; border-radius: 12px; padding: 10px; min-width: 0; }
.tc-st > div { min-width: 0; }
.tc-st small { display: block; color: #94a3b8; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-st b { display: block; font-size: 1.2rem; line-height: 1.15; }
.tc-st em { font-style: normal; color: #94a3b8; font-size: .85rem; }
.tc-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1rem; color: #ffd84a; }
.tc-ic.vs { color: #ffb02e; font-size: .95rem; letter-spacing: -1px; text-shadow: 2px 2px 0 #b3261e; }
.tc-ic.win { color: #7cc4ff; text-shadow: 0 0 6px #3b82f6; }
.tc-ic.raid { color: #8ad7ff; }
.tc-ic.shiny { color: #ffe27a; font-size: 1.7rem; text-shadow: 0 0 8px #ffd84a; }
.tc-ic.evo { color: #9db89f; font-size: 1.5rem; }
.tc-ic.trade { color: #b69aff; font-size: 1.3rem; }
.tc-ic.ball { background: radial-gradient(circle at 50% 50%, #fff 0 12%, #2a2f45 13% 20%, transparent 21%), linear-gradient(180deg, #ef4444 0 46%, #2a2f45 47% 53%, #f4f4f4 54%); width: 26px; height: 26px; margin: 4px; border-radius: 50%; border: 2px solid #2a2f45; }
.tc-ic.ball.ultra { background: radial-gradient(circle at 50% 50%, #fff 0 12%, #2a2f45 13% 20%, transparent 21%), linear-gradient(180deg, #3b3f55 0 46%, #2a2f45 47% 53%, #f4f4f4 54%); box-shadow: inset 0 0 0 3px #ffd84a33; }
.tc-ic.ball.master { background: radial-gradient(circle at 50% 50%, #fff 0 12%, #2a2f45 13% 20%, transparent 21%), linear-gradient(180deg, #b06bff 0 46%, #2a2f45 47% 53%, #f4f4f4 54%); }
.tc-ic.ball.legend { background: radial-gradient(circle at 50% 50%, #fff 0 12%, #2a2f45 13% 20%, transparent 21%), linear-gradient(180deg, #8b5cf6 0 46%, #2a2f45 47% 53%, #f4f4f4 54%); }
.tc-ic.egg { background: radial-gradient(ellipse at 50% 60%, #f6efc0 0 45%, #bcd98a 46% 100%); width: 22px; height: 28px; margin: 3px 6px; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; border: 2px solid #3d4a2a; }
.tc-bestimg { flex: none; width: 48px; height: 48px; margin: -6px -4px -6px -8px; image-rendering: pixelated; object-fit: contain; }
.tc-edit { font-size: 1rem; }

/* ── Envío / retirada del Pokémon ── */
.so-trainer { position: absolute; z-index: 6; width: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); animation: so-in .22s ease-out; pointer-events: none; }
.so-trainer.out { animation: so-out .16s forwards; }
@keyframes so-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes so-out { to { opacity: 0; transform: translateX(-10px); } }
.so-ball { position: absolute; left: 0; top: 0; z-index: 8; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1b1b24; background: linear-gradient(180deg, #ef4444 0 44%, #1b1b24 45% 55%, #fff 56%); pointer-events: none; box-shadow: 0 0 10px 2px #fff8; }
.so-ball.pop { opacity: 0; transition: opacity .12s; }
.tc-name h3 { font-size: 1.25rem !important; min-width: 0; }
.tc-name small { font-size: .7rem; flex: none; }
.tc-name .tc-edit { flex: none; width: 30px; height: 30px; }

/* ── Menú Actividades ── */
#main[data-view="casino"] .view-casino { display: block; }
#act-menu { position: fixed; left: 10px; right: 10px; bottom: 96px; z-index: 80; background: #181b2b; border: 2px solid #2b3150; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 40px #000a; }
#act-menu h4 { margin: 2px 6px 4px; color: #94a3b8; letter-spacing: .12em; font-size: .75rem; }
#act-menu button { display: flex; align-items: center; gap: 14px; border: 0; border-radius: 14px; background: #20243a; color: #e8ecf8; padding: 14px; font-size: 1.05rem; text-align: left; cursor: pointer; }
#act-menu button span { width: 30px; text-align: center; font-size: 1.3rem; }
#act-menu button b { flex: 1; }
#act-menu button.on { background: linear-gradient(135deg, #7a2a3a, #b0404a); width: 70%; }
#act-menu button.lock { color: #7b84a6; cursor: default; }
#act-menu button i { font-style: normal; font-size: .9rem; } #act-menu button i small { font-size: .68rem; color: #9aa3c4; }

/* ── Casino ── */
.cs-wrap { padding: 4px 2px 90px; }
.cs-top { display: flex; align-items: center; justify-content: space-between; background: #181b2b; border-radius: 18px; padding: 12px 16px; margin: 8px 0; }
.cs-q { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #323a5a; background: #20243a; color: #cfd6f0; font-weight: 900; cursor: pointer; }
.cs-fichas { color: #ffd84a; font-weight: 800; }
.cs-tabs { display: flex; background: #12141f; border: 2px solid #2b3150; border-radius: 18px; padding: 4px; margin-bottom: 12px; }
.cs-tabs button { flex: 1; border: 0; background: transparent; color: #cfd6f0; font-weight: 800; font-size: .85rem; padding: .8rem .2rem; border-radius: 14px; cursor: pointer; letter-spacing: .03em; }
.cs-tabs button.on { background: #d94848; color: #fff; box-shadow: inset 0 -3px 0 #8f2a2a; }
.cs-tabs button.lock { color: #6b7394; }
.cs-stage { background-size: cover; background-position: center; border-radius: 20px; padding: 14px 0 10px; border: 2px solid #1f2540; overflow: hidden; }
.cs-machine { position: relative; width: 86%; max-width: 380px; margin: 0 auto; background: linear-gradient(180deg, #d4413f, #a52b33); border: 4px solid #f0c24a; border-radius: 12px 12px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 8px 0 #4d1620, 0 14px 24px #000a; }
.cs-bulbs { position: absolute; inset: 3px; border-radius: 8px; pointer-events: none; background: repeating-linear-gradient(90deg, #fff6c0 0 3px, transparent 3px 16px) top / 100% 3px no-repeat, repeating-linear-gradient(90deg, #fff6c0 0 3px, transparent 3px 16px) bottom / 100% 3px no-repeat, repeating-linear-gradient(0deg, #fff6c0 0 3px, transparent 3px 16px) left / 3px 100% no-repeat, repeating-linear-gradient(0deg, #fff6c0 0 3px, transparent 3px 16px) right / 3px 100% no-repeat; animation: csblink 1.2s steps(2) infinite; }
@keyframes csblink { 50% { opacity: .45; } }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #1d1135; border: 3px solid #e6b73a; border-radius: 8px; padding: 6px 8px; margin: 6px 0 10px; }
.cs-box { background: #120a24; border: 2px solid #e6b73a; border-radius: 4px; padding: 4px 6px; min-width: 76px; }
.cs-box small { display: block; color: #cfc3ff; font-size: .5rem; letter-spacing: .12em; }
.cs-box b { color: #fff; font-size: .8rem; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.cs-title { text-align: center; color: #ffd84a; font-weight: 900; font-size: 1.35rem; letter-spacing: .04em; text-shadow: 0 2px 0 #7a2a1a; line-height: 1; }
.cs-title small { display: block; font-size: .45rem; letter-spacing: .3em; color: #cfc3ff; text-shadow: none; margin-top: 3px; }
.cs-rw { position: relative; display: flex; align-items: stretch; gap: 4px; padding-right: 18px; }
.cs-marks { position: relative; width: 16px; flex: none; }
.cs-marks i { position: absolute; left: 0; width: 16px; height: 16px; margin-top: -8px; font-style: normal; font-size: .6rem; font-weight: 900; color: #3a2a08; background: #f0c24a; border: 2px solid #3a2a08; border-radius: 3px; display: grid; place-items: center; }
.cs-reels { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); background: #f6efdc; border: 4px solid #e6b73a; border-radius: 6px; box-shadow: inset 0 0 12px #0006; }
.cs-reel { height: 190px; overflow: hidden; position: relative; border-right: 2px solid #d9cba5; }
.cs-reel:last-child { border-right: 0; }
.cs-strip { will-change: transform; }
.cs-cell { height: var(--ch, 33.3334%); display: grid; place-items: center; position: relative; }
.cs-sym { max-width: 86%; max-height: 86%; width: auto; height: 90%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
.cs-berry { display: grid; place-items: center; } .cs-berry img { width: 70%; height: auto; image-rendering: pixelated; }
b.cs-sym { height: auto; font-weight: 900; font-size: 2.4rem; color: #c1222e; text-shadow: 2px 2px 0 #4a1015; line-height: 1; }
b.cs-bar { font-size: 1.15rem; color: #ffd84a; background: #20120a; border: 3px solid #4a2a10; padding: 6px 8px; border-radius: 3px; text-shadow: none; max-width: none; }
.cs-cell.win { animation: cswin .5s steps(2) infinite; background: #ffe58a88; }
@keyframes cswin { 50% { background: #fff; } }
.cs-lever { position: absolute; right: -6px; top: 14%; width: 20px; height: 70%; cursor: pointer; }
.cs-lever u { position: absolute; left: 7px; top: 14px; width: 6px; height: 56%; background: linear-gradient(90deg, #aaa, #eee, #888); border-radius: 3px; transform-origin: top center; transition: transform .18s; }
.cs-lever i { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8d8d, #c1222e 60%, #6d0f18); transition: top .18s; }
.cs-lever.pull i { top: 40%; } .cs-lever.pull u { transform: scaleY(.45); }
.cs-ctl { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cs-auto, .cs-mult { flex: none; width: 54px; height: 54px; border-radius: 12px; border: 3px solid #222; font-weight: 900; font-size: 1.2rem; cursor: pointer; box-shadow: inset 0 -4px 0 #0005; }
.cs-auto { background: #20243a; color: #e8ecf8; } .cs-auto.on { background: #2f9e5b; animation: csspin 1s linear infinite; }
@keyframes csspin { 50% { filter: brightness(1.25); } }
.cs-mult { background: #d94848; color: #fff; }
.cs-spin { flex: 1; height: 62px; border-radius: 14px; border: 3px solid #6b4b0c; background: linear-gradient(180deg, #ffd84a, #f0a81c); color: #2a1a05; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 -5px 0 #b27a0c, 0 3px 0 #4a2f05; }
.cs-spin small { font-size: .8rem; font-weight: 800; } .cs-spin span { font-size: 1.35rem; font-weight: 900; letter-spacing: .06em; line-height: 1; }
.cs-spin:active { transform: translateY(2px); }
.cs-win { position: absolute; left: 50%; top: 42%; transform: translate(-50%, 0); background: #1d1135ee; border: 3px solid #ffd84a; color: #ffd84a; font-weight: 900; padding: 8px 14px; border-radius: 12px; font-size: 1.1rem; opacity: 0; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; z-index: 3; }
.cs-win.show { animation: cswinpop 1.6s ease-out forwards; }
@keyframes cswinpop { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.7); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }
.cs-spincoin { width: 32px; height: 32px; background-size: 192px 32px; image-rendering: pixelated; animation: coinspin .6s steps(6) infinite; }
@keyframes coinspin { to { background-position-x: -192px; } }
.cs-coin-ic { image-rendering: pixelated; vertical-align: middle; }
.cs-card { background: #181b2b; border: 2px solid #2b3150; border-radius: 22px; padding: 14px; margin-top: 14px; }
.cs-ptitle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cs-ptitle h3 { margin: 0; font-size: 1.25rem; flex: 1; } .cs-ptitle span { color: #94a3b8; font-size: .85rem; }
.cs-ptitle .cs-q { width: 32px; height: 32px; flex: none; order: 2; } .cs-ptitle span { order: 3; } .cs-ptitle h3 { flex: none; }
.cs-prize { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 14px; }
.cs-prize.top { background: #2a251b; }
.cs-pcell { width: 52px; height: 52px; background: #20243a; border-radius: 12px; display: grid; place-items: center; } .cs-pcell.top { border: 2px solid #c9a227; }
.cs-prize.top .cs-pcell { border: 2px solid #c9a227; }
.cs-pcell .cs-sym { height: 80%; font-size: 1.2rem; } .cs-pcell b.cs-bar { font-size: .55rem; padding: 3px 4px; border-width: 2px; } .cs-pcell .cs-berry img { width: 80%; }
.cs-prize > b { margin-left: auto; color: #ffd84a; font-size: 1.15rem; display: flex; align-items: center; gap: 6px; }
.cs-item { display: flex; align-items: center; gap: 14px; background: #1c2033; border: 2px solid #2b3150; border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; }
.cs-icon { position: relative; width: 78px; height: 78px; flex: none; border-radius: 18px; background: radial-gradient(circle, #252b45 0 55%, #1a1e32 56%); display: grid; place-items: center; }
.cs-icon img { max-width: 86%; max-height: 86%; image-rendering: pixelated; } .cs-icon.unk span { font-size: 1.6rem; color: #3b4263; font-weight: 900; }
.cs-icon.unk img { filter: brightness(0); opacity: .6; }
.cs-own { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #f08a3c 0 45%, #fff 46%); border: 2px solid #5a3a1a; }
.cs-iname { flex: 1; min-width: 0; } .cs-iname b { display: block; font-size: 1.15rem; } .cs-iname small { color: #94a3b8; }
.cs-buy { display: flex; align-items: center; gap: 6px; border: 3px solid #6b4b0c; background: linear-gradient(180deg, #ffd84a, #f0a81c); color: #2a1a05; border-radius: 12px; padding: 8px 12px; font-size: 1.05rem; font-weight: 900; cursor: pointer; box-shadow: inset 0 -4px 0 #b27a0c; }
.cs-buy.no { filter: saturate(.5) brightness(.8); }
.cs-item.locked { opacity: .75; } .cs-item.locked .cs-buy { background: #7a6420; border-color: #4a3a0a; color: #2a1a05; cursor: default; }
.cs-next { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; } .cs-next h3 { margin: 0; flex: 1; font-size: 1.2rem; } .cs-next span { color: #94a3b8; font-size: .85rem; }
.cs-lockmsg { text-align: center; padding: 60px 24px; color: #cfd6f0; } .cs-lockic { font-size: 3rem; }

/* Ajustes casino (iOS): carriles alineados y botones sin solaparse */
.cs-strip { height: 100%; }
.cs-cell { box-sizing: border-box; overflow: hidden; }
.cs-auto, .cs-mult { width: 58px; height: 58px; padding: 0; font-size: 1rem; white-space: nowrap; }
.cs-mult { font-size: .95rem; }
.cs-spin { height: 66px; gap: 4px; padding: 0 4px; }
.cs-spin small { line-height: 1.1; font-size: .7rem; }
.cs-spin span { line-height: 1.1; font-size: 1.15rem; }
.cs-pcell b.cs-sym { height: auto; }
.cs-cell > .cs-sym { align-self: center; justify-self: center; }

/* ── Aventura / Progreso (como el original) ── */
.pg-head { gap: 10px; justify-content: flex-start; }
.pg-head span:last-child { margin-left: auto; }
.pg-mapic { font-size: 1.6rem; }
.pg-help { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #323a5a; background: #1c2030; color: #cfd6f0; font-weight: 900; cursor: pointer; }
.pg-regions { display: flex; gap: 10px; overflow-x: auto; padding: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.pg-regions .pg-region { flex: none; width: 78%; max-width: 300px; margin: 0; scroll-snap-align: start; border-width: 3px; }
.pg-region.lock { background: #1a2235; border: 2px solid #2d3650; opacity: .75; justify-content: center; }
.pg-region.lock b { color: #8a93b0; } .pg-region.lock small { color: #6f7898; }
.pg-region.sel { border-color: #f7c531; }
.pg-lf { display: flex; align-items: flex-end; justify-content: center; width: 52px; height: 60px; border-radius: 14px; background: #12162a99; border: 2px solid #ffffff22; overflow: hidden; }
.pg-leader { position: relative; width: 56px; height: 62px; }
.pg-leader .pg-lf img { max-width: 100%; max-height: 100%; }
.pg-tb { position: absolute; right: -4px; bottom: -4px; display: block; line-height: 0; }
.pg-row .pg-info b { font-size: 1.15rem; }
.pg-replay.cur { background: #1f5a34; border-color: #6fdc8c; color: #b6ffc8; }
.pg-replay { background: #1c2236; border-color: #323a5a; color: #cfd6f0; }
.pg-secret { display: flex; align-items: center; gap: 14px; margin: 8px 12px; padding: 14px; border-radius: 14px; background: #1b2235; border-left: 6px solid #5a3a4a; color: #8a93b0; }
.pg-secret span { font-size: 1.5rem; } .pg-secret b { display: block; font-size: 1.1rem; } .pg-secret small { color: #7a84a6; }
.pg-chip.green { font-size: .72rem; }
.bf-master { display: inline-block; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #2a1a4a; background: radial-gradient(circle at 50% 50%, #fff 0 12%, #2a1a4a 13% 22%, transparent 23%), linear-gradient(180deg, #a855f7 0 46%, #2a1a4a 47% 53%, #f4f4f4 54%); flex: none; }
.bf-master.sm { width: 40px; height: 40px; margin: 10px; }

/* Entrenadores: animación en reposo */
@keyframes idle { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.012, 1.02); } }
.bf-idle, .tc-trainer, .tc-art .tc-trainer { transform-origin: 50% 100%; }
.bf-hero .bf-idle, .pg-lf .bf-idle { animation: idle 1.1s steps(2, end) infinite; }
.sil { filter: brightness(0) opacity(.85); animation: none !important; }

/* Detalle de capítulo / Liga */
.wb-card.bf-card { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 28px); height: min(100%, 880px); border-color: var(--bc, #3a4268); position: relative; }
.bf-hero { height: 180px; flex: none; }
.bf-hero > img:not(.sil) { height: 170px; right: 6%; }
.bf-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 12px; border: 2px solid #e08080; background: #1c2030cc; color: #f2a0a0; font-size: 1.1rem; cursor: pointer; }
.bf-done { position: absolute; top: 18px; left: 18px; z-index: 3; background: #3cc263; color: #052a12; font-weight: 800; padding: 8px 16px; border-radius: 999px; font-size: .95rem; }
.bf-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bf-foot { flex: none; padding: 10px 14px 14px; background: linear-gradient(180deg, transparent, #1c2030 35%); position: relative; margin-top: -30px; }
.bf-foot .bf-go { margin: 0; }
.bf-go:disabled { background: #3a3f58; box-shadow: 0 5px 0 #262a3e; color: #8a93b0; cursor: default; }
.bf-gap { height: 70px; }
.bf-chip.type { background: color-mix(in srgb, var(--tc) 35%, #12162a); border: 2px solid var(--tc); color: #fff; }
.bf-chip.blue2 { background: #1f2a5a; border: 2px solid #34428a; }
.bf-chip.red { background: #4a1f2a; border: 1px solid #7a2f3c; color: #ff9aa8; border-radius: 14px; }
.bf-chips.col { flex-direction: column; align-items: flex-start; }
.bf-sec.dim .bf-sec-head { color: #6f7898; }
.bf-sec.dim .bf-tile { opacity: .9; }
.bf-general { margin-bottom: 2px; }
.bf-tile { padding: 8px 4px; min-height: 66px; justify-content: center; }
.bf-tile img { width: 52px; height: 52px; }
.bf-tile .bf-ball { width: 11px; height: 11px; top: 4px; right: 5px; }
.bf-league { position: relative; }
.bf-league img { position: absolute; bottom: 0; height: 150px; width: auto; right: auto; }
.bf-trs { display: flex; flex-direction: column; gap: 10px; }
.bf-tr { display: flex; align-items: center; gap: 10px; background: #232842; border-radius: 16px; padding: 10px; }
.bf-trf { width: 54px; height: 54px; flex: none; border-radius: 12px; background: #14182a; border: 2px solid #323a5a; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.bf-trf img { max-height: 100%; max-width: 100%; image-rendering: pixelated; }
.bf-trn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .bf-trn b { font-size: 1.05rem; }
.bf-trr { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .bf-trr small { color: #cbd5e1; } .bf-trr .bf-chip { margin: 0; font-size: .72rem; padding: 4px 8px; }
.pg-region.sel .pg-medals { flex-wrap: nowrap; gap: 3px; }
.bf-league img { height: 118px; }
.bf-hero.bf-league { height: 160px; }

/* ───── Pantalla de título ───── */
.ttl { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 35%, #2a1424 0, #141626 55%, #0d1020 100%); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: "Press Start 2P", monospace; color: #fff; }
/* Pokéballs en diagonal, drift lento hacia abajo-derecha */
.ttl::before {
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: .09;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Ccircle cx='48' cy='48' r='28'/%3E%3Cpath d='M20 48h56'/%3E%3Ccircle cx='48' cy='48' r='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  transform: rotate(-18deg);
  animation: ttlBallsDrift 48s linear infinite;
}
@keyframes ttlBallsDrift {
  0%   { transform: rotate(-18deg) translate(0, 0); }
  100% { transform: rotate(-18deg) translate(96px, 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .ttl::before { animation: none; }
}
.ttl-field { position: absolute; inset: 0; pointer-events: none; }
.ttl-mon { position: absolute; left: 0; top: 0; image-rendering: pixelated; will-change: translate; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.ttl-ball { filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.ttl-main { position: relative; z-index: 2; width: min(92vw, 420px); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.ttl-logo { margin: 0; font-size: clamp(1.7rem, 8vw, 2.4rem); letter-spacing: 1px; text-shadow: 3px 3px 0 #000; }
.ttl-logo span { color: #e04040; }
.ttl-actions { width: 100%; display: flex; flex-direction: column; gap: .7rem; align-items: stretch; }
.ttl-btn { font-family: inherit; font-size: .78rem; letter-spacing: .5px; border: 0; border-radius: 10px; padding: 1.05rem .8rem; color: #fff; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; gap: .55rem; text-shadow: 1px 1px 0 rgba(0,0,0,.5); -webkit-tap-highlight-color: transparent; }
.ttl-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.45); }
.ttl-primary { background: #d84040; font-size: .9rem; padding: 1.25rem .8rem; }
.ttl-dark { background: #1a2036; }
.ttl-google { background: #fff; color: #1a1a1a; text-shadow: none; }
.ttl-link { background: none; border: 0; color: #b8bfd8; font-family: inherit; font-size: .55rem; text-decoration: underline; cursor: pointer; padding: .2rem; }
.ttl-ses { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; font-size: .6rem; color: #dfe3f5; margin-top: .3rem; }
.ttl-ses img, .ttl-ava { width: 28px; height: 28px; border-radius: 50%; background: #2c3350; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.ttl-msg { min-height: 1em; text-align: center; font-size: .55rem; line-height: 1.5; color: #ffd36a; }
.ttl-legal { position: absolute; z-index: 2; bottom: max(.8rem, env(safe-area-inset-bottom)); left: 1rem; right: 1rem; margin: 0; text-align: center; font-size: .45rem; line-height: 1.8; color: #7f86a8; }
.ttl-modal { position: absolute; inset: 0; z-index: 10; background: rgba(5,7,16,.8); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ttl-card { position: relative; width: min(100%, 420px); max-height: 86vh; overflow-y: auto; background: #181d33; border: 3px solid #2f3860; border-radius: 14px; padding: 1.2rem 1rem 1rem; }
.ttl-card h2 { margin: 0 0 .9rem; font-size: .95rem; text-align: center; }
.ttl-x { position: absolute; top: .5rem; right: .6rem; background: none; border: 0; color: #fff; font-size: 1rem; cursor: pointer; }
.ttl-how { display: flex; gap: .7rem; margin-bottom: .8rem; align-items: flex-start; }
.ttl-how > span { font-size: 1.3rem; }
.ttl-how b { font-size: .62rem; color: #ffd36a; }
.ttl-how p { margin: .35rem 0 0; font-family: system-ui, sans-serif; font-size: .78rem; line-height: 1.4; color: #dfe3f5; }


/* ───── Presentaciones: VS, líderes/Alto Mando y legendarios ───── */
.vs-intro, .boss-intro, .legend-announce {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

.vs-intro {
  gap: 0.5rem;
  background: rgba(5, 7, 12, 0);
}
.vs-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 30%;
}
.vs-face {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}
.vs-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.vs-name small {
  display: block;
  font-weight: 500;
  opacity: 0.75;
  font-size: 0.65rem;
}
.vs-text {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(63, 169, 255, 0.8);
}

.boss-intro {
  --c: #ffcb05;
  flex-direction: column;
  background: rgba(5, 7, 12, 0);
}
.bi-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0.85;
}
.bi-bar.top { top: 0; }
.bi-bar.bot { bottom: 0; }
.bi-who {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding-bottom: 0.5rem;
}
.bi-trainer {
  max-height: 55%;
  max-width: 70%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 50%, transparent));
  transition: filter 0.25s ease;
}
.bi-trainer.sil {
  filter: brightness(0) contrast(1.05) drop-shadow(0 0 12px var(--c));
}
.bi-info {
  text-align: center;
  padding: 0.75rem 1rem 1.25rem;
  color: #fff;
}
.bi-info small {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  color: var(--c);
}
.bi-info b {
  display: block;
  font-size: 1.35rem;
  margin: 0.2rem 0 0.4rem;
}
.bi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
}
.bi-tags em {
  font-style: normal;
  opacity: 0.8;
}
.bi-type {
  background: color-mix(in srgb, var(--tc) 35%, #111);
  border: 1px solid color-mix(in srgb, var(--tc) 70%, #000);
  color: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
}
.flash-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.legend-announce {
  flex-direction: column;
  gap: 0.75rem;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 25%, #000) 0%, #000 70%);
}
.la-glow {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
  animation: laPulse 1.6s ease-in-out infinite;
}
@keyframes laPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 1; }
}
.la-sprite {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  z-index: 1;
  filter: drop-shadow(0 0 12px var(--c));
}
.la-text {
  text-align: center;
  color: #fff;
  z-index: 1;
}
.la-text small {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
  font-size: 0.65rem;
}
.la-text b {
  display: block;
  font-size: 1.25rem;
  margin: 0.25rem 0;
}
.la-text p {
  margin: 0;
  opacity: 0.85;
  font-size: 0.8rem;
  max-width: 16rem;
}


/* Intro Mewtwo */
.legend-cine {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.legend-cine.on { opacity: 1; }
.legend-cine.out { opacity: 0; }
.legend-cine-stage {
  position: relative;
  width: 100%;
  max-width: 710px;
  aspect-ratio: 710 / 294;
  overflow: hidden;
  background: #000;
}
.legend-cine-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.legend-cine-title {
  position: absolute;
  left: 8%;
  bottom: 14%;
  color: #fff;
  text-shadow: 0 1px 4px #000, 0 0 12px #000;
  z-index: 2;
}
.legend-cine-title small {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: #e8b4ff;
  text-transform: uppercase;
}
.legend-cine-title b {
  display: block;
  font-size: 1.4rem;
  margin: 0.15rem 0 0.35rem;
}
.legend-cine-tags {
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.legend-cine-tags .type {
  background: #a040c0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-style: normal;
}
.legend-cine-tags .place {
  font-style: normal;
  opacity: 0.9;
}

.boss-intro, .vs-intro { font-family: inherit; }
.vs-face { width: 84px; height: 84px; }
.bi-trainer { height: 54%; width: auto; max-height: none; max-width: none; }
.bi-info small { opacity: 1; color: #fff; text-shadow: 0 1px 3px #000; }
.bi-info b { text-shadow: 0 2px 4px #000; }
.legend-announce { background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c) 25%, rgba(0,0,0,.35)) 0%, rgba(0,0,0,.6) 75%); }


/* === Faceoff / VS: ambos entrenadores visibles (fix visual) === */
.faceoff {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  background: linear-gradient(180deg, rgba(8,12,30,.12), rgba(8,12,30,.55));
  pointer-events: none;
}
.faceoff img {
  position: absolute;
  bottom: 18%;
  height: min(46%, 170px);
  max-height: 170px;
  width: auto;
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
}
.faceoff .fo-me {
  left: 10%;
  right: auto;
  transform: none;
}
.faceoff .fo-rival {
  right: 10%;
  left: auto;
  transform: none;
}

/* VS intro: nombres y caras centrados como el original */
.vs-intro .vs-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 92%;
  max-width: 420px;
}
.vs-intro .vs-face {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
}
.vs-intro .vs-name {
  font-size: 0.95rem;
  text-align: center;
}
.boss-intro .vs-face,
.boss-intro img.vs-face {
  width: 110px;
  height: 110px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Campo de batalla: monos más abajo, no "volando" */
.battle-field {
  align-items: flex-end !important;
  padding-bottom: 4% !important;
}
.battle-mon {
  transform: translateY(0) !important;
}
.battle-mon img.mon-sprite {
  margin-bottom: 0 !important;
}

/* Raid boss: varios aliados en fila */
.raid-allies {
  position: absolute;
  left: 4%;
  bottom: 12%;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 55%;
  z-index: 3;
  align-items: flex-end;
}
.raid-allies img {
  height: 52px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.raid-boss-side {
  position: absolute;
  right: 8%;
  bottom: 14%;
  z-index: 3;
  text-align: center;
}
.raid-boss-side img {
  height: 88px;
  image-rendering: pixelated;
}
.raid-pity {
  font-size: 0.72rem;
  color: #c9b4ff;
  margin-top: 4px;
}
.raid-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.raid-toast {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  background: #5b2d9e;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  z-index: 20;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

/* ===== Raids lobby (estilo original) ===== */
.raids-lobby {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 6, 18, .72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 env(safe-area-inset-bottom);
  overflow: auto;
}
.rl-panel {
  width: 100%; max-width: 440px;
  background: linear-gradient(180deg, #3a2460 0%, #1c1230 40%, #14101f 100%);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 24px;
  color: #f2eaff;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  max-height: 94vh; overflow: auto;
}
.rl-head { display: flex; align-items: center; gap: 8px; }
.rl-head h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.rl-spark { color: #e0b0ff; }
.rl-help {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #7a5aab; background: #2a1848; color: #fff;
}
.rl-cd { margin: 6px 0 12px; font-size: .78rem; opacity: .85; }
.rl-regions { display: flex; gap: 8px; margin-bottom: 12px; }
.rl-reg {
  flex: 1; border-radius: 12px; border: 2px solid transparent;
  background: #221836; color: #ddd; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: .72rem;
}
.rl-reg.on { border-color: #c9a0ff; background: #2e1b4a; }
.rl-reg.lock { opacity: .45; }
.rl-reg img { width: 40px; height: 40px; image-rendering: pixelated; }
.rl-reg em { font-style: normal; color: #b8f080; font-size: .65rem; }
.rl-reg .sil { font-size: 1.4rem; opacity: .5; }

.rl-card {
  background: #1a122c;
  border-radius: 14px;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid #3d2a5c;
}
.rl-art {
  position: relative;
  height: 160px;
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.rl-boss {
  width: 112px; height: 112px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px #c080ff);
}
.rl-boss.shiny { filter: drop-shadow(0 0 14px #ffe566) drop-shadow(0 0 8px #c080ff); }
.rl-shine { position: absolute; right: 18%; top: 22%; color: #ffe566; font-size: 1.2rem; }
.rl-card h3 { text-align: center; margin: 10px 0 8px; font-size: 1.15rem; }
.rl-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 10px; }
.rl-tags .tag {
  font-size: .68rem; padding: 4px 8px; border-radius: 999px;
  background: #2a2038; border: 1px solid #4a3a68;
}
.rl-tags .tag.halloween { background: #4a2a10; border-color: #e09030; color: #ffc070; }
.rl-tags .tag.type { background: color-mix(in srgb, var(--c) 35%, #1a1020); border-color: var(--c); }

.rl-actions { display: flex; gap: 8px; padding: 12px 12px 0; }
.rl-go, .rl-rank {
  flex: 1; padding: 12px 8px; border-radius: 10px; border: none;
  font-weight: 800; letter-spacing: .04em; font-size: .85rem;
}
.rl-go { background: #e24b4b; color: #fff; }
.rl-go:disabled { opacity: .45; }
.rl-rank { background: #2a2038; color: #c8b8e8; border: 1px solid #4a3a68; }

.rl-pity { margin: 14px 12px 8px; position: relative; }
.rl-pity-label { display: flex; justify-content: space-between; font-size: .72rem; margin-bottom: 6px; }
.rl-pity-bar {
  height: 10px; border-radius: 999px; background: #2a2038;
  overflow: hidden; border: 1px solid #4a3a68;
}
.rl-pity-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #7b3ff0, #d080ff);
}
.rl-mb { position: absolute; right: 0; top: 18px; width: 28px; height: 28px; }

.rl-team { margin: 12px; }
.rl-team-h { display: flex; justify-content: space-between; font-size: .75rem; margin-bottom: 8px; opacity: .9; }
.rl-you {
  display: grid;
  grid-template-columns: 56px 36px 1fr;
  gap: 8px; align-items: center;
  background: #221836; border-radius: 12px; padding: 8px;
  border: 1px solid #5a3a90;
}
.rl-avatar img {
  width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated;
}
.rl-you-label { font-size: .8rem; }
.rl-slots { display: flex; gap: 8px; }
.rl-slot {
  width: 56px; height: 64px; border-radius: 10px;
  border: 2px dashed #6a5090; background: #1a122c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #a890d0; font-size: 1.2rem;
}
.rl-slot.filled {
  border-style: solid; border-color: #7dffb0; background: #152418;
}
.rl-slot img { width: 40px; height: 40px; image-rendering: pixelated; }
.rl-slot small { font-size: .6rem; color: #c8f0d0; }

.rl-ally {
  width: 100%; margin-top: 8px; padding: 14px;
  border-radius: 12px; border: 2px dashed #4a3a68;
  background: transparent; color: #8a7aa8; font-size: .85rem;
}

.rl-leave {
  width: calc(100% - 24px); margin: 16px 12px 0;
  padding: 12px; border-radius: 12px;
  border: 1px solid #5a4a78; background: #2a2038; color: #e8d8ff;
  font-weight: 700;
}

.rl-modal {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 2;
}
.rl-modal[hidden] { display: none !important; }
.rl-picker {
  width: 100%; max-width: 440px; max-height: 80vh; overflow: auto;
  background: linear-gradient(180deg, #5a2a6a, #2a1840);
  border-radius: 16px 16px 0 0; padding: 12px;
}
.rl-picker header { display: flex; justify-content: space-between; align-items: center; }
.rl-picker h3 { margin: 0; font-size: .95rem; }
.rl-sub { font-size: .75rem; opacity: .85; }
.rl-pick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0;
}
.rl-pick {
  background: #1a122c; border: 2px solid #3a2a55; border-radius: 10px;
  padding: 8px 4px; color: #eee; display: flex; flex-direction: column; align-items: center;
}
.rl-pick.on { border-color: #7dffb0; background: #152418; }
.rl-pick img { width: 48px; height: 48px; image-rendering: pixelated; }
.rl-pick b { font-size: .68rem; margin-top: 4px; }
.rl-pick small { font-size: .6rem; opacity: .8; }
.rl-apply {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  background: #7b3ff0; color: #fff; font-weight: 800;
}
.rl-empty { grid-column: 1/-1; text-align: center; opacity: .7; }

/* VS stage: ambos entrenadores a tamaño completo */
.vs-intro.vs-stage {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
}
.vs-stage-dim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,18,.25), rgba(5,7,18,.7));
}
.vs-stand {
  position: absolute;
  bottom: 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.vs-stand.left { left: 6%; }
.vs-stand.right { right: 6%; }
.vs-body {
  height: min(52%, 190px);
  max-height: 190px;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  object-fit: contain;
}
.vs-label {
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  text-shadow: 0 2px 4px #000, 0 0 8px rgba(0,0,0,.6);
  text-align: center;
  max-width: 120px;
}
.vs-label small { display: block; font-weight: 500; opacity: .8; font-size: .65rem; }
.vs-flash {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .12em;
  text-shadow: 0 0 16px rgba(80,160,255,.95), 0 2px 0 #1a3a80;
  z-index: 3;
}

/* Faceoff: forzar rival visible */
.faceoff .fo-rival {
  right: 6% !important;
  left: auto !important;
  z-index: 5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  height: min(52%, 180px) !important;
  max-height: 180px !important;
}
.faceoff .fo-me {
  left: 6% !important;
  z-index: 5 !important;
  height: min(52%, 180px) !important;
  max-height: 180px !important;
}

/* Lobby aura más cercana al original */
.raids-lobby {
  backdrop-filter: blur(6px);
  background: radial-gradient(ellipse at 50% 20%, rgba(120,60,180,.45), rgba(8,6,18,.85) 60%) !important;
}
.rl-panel {
  background: linear-gradient(180deg, #5a2d8a 0%, #2d1a4a 28%, #1a1028 100%) !important;
  border: 1px solid rgba(200,160,255,.25);
  box-shadow: 0 -12px 48px rgba(80,40,140,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.rl-card {
  background: linear-gradient(180deg, #241438, #160e24) !important;
  box-shadow: 0 0 24px rgba(160,100,255,.25), inset 0 0 40px rgba(80,40,140,.2);
  border: 1px solid rgba(180,140,255,.35) !important;
}
.rl-art {
  background:
    radial-gradient(circle at 70% 40%, rgba(200,140,255,.35), transparent 55%),
    linear-gradient(160deg, #1a1030, #2a1848) !important;
}
.rl-boss {
  filter: drop-shadow(0 0 18px #e0a0ff) drop-shadow(0 0 6px #fff8) !important;
  animation: rl-float 2.8s ease-in-out infinite;
}
@keyframes rl-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.rl-shine {
  animation: rl-twinkle 1.6s ease-in-out infinite;
}
@keyframes rl-twinkle {
  0%,100% { opacity: .5; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.2); }
}
.rl-go {
  box-shadow: 0 4px 16px rgba(220,60,60,.45);
}
.rl-you {
  box-shadow: 0 0 0 1px rgba(180,140,255,.35), 0 4px 16px rgba(0,0,0,.25);
}

/* Lobby: pantalla completa con scroll desde arriba */
.raids-lobby {
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) !important;
}
.rl-panel {
  max-height: none !important;
  min-height: 100%;
  border-radius: 0 !important;
  overflow: visible !important;
  padding-top: 12px !important;
  padding-bottom: 96px !important;
}

/* Boss art por tipo (temporada / mapa) */
.rl-art {
  position: relative;
  height: 200px !important;
  overflow: hidden;
}
.rl-art.type-ghost {
  background:
    radial-gradient(ellipse at 60% 40%, rgba(160,80,220,.35), transparent 60%),
    linear-gradient(180deg, #1a0a28 0%, #2a1848 40%, #0e0818 100%) !important;
}
.rl-art.type-ghost::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent 40%, rgba(120,60,180,.08) 50%, transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(80,40,120,.12) 28px, rgba(80,40,120,.12) 30px);
  opacity: .9;
  pointer-events: none;
}
.rl-art.type-normal {
  background: radial-gradient(circle at 50% 40%, #3a2460, #1a1028 70%) !important;
}
.rl-art-fog {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(200,160,255,.2), transparent 55%);
  pointer-events: none;
}
.rl-boss.shiny {
  width: 128px !important;
  height: 128px !important;
  filter: drop-shadow(0 0 20px #e8c0ff) drop-shadow(0 0 8px #fff) !important;
  animation: rl-float 2.6s ease-in-out infinite, rl-shimmer 3s linear infinite;
}
@keyframes rl-shimmer {
  0%,100% { filter: drop-shadow(0 0 16px #e8c0ff) drop-shadow(0 0 6px #fff8); }
  50% { filter: drop-shadow(0 0 28px #ffe680) drop-shadow(0 0 12px #e8c0ff); }
}
.rl-shine {
  position: absolute;
  color: #ffe566;
  font-size: 1.3rem;
  animation: rl-twinkle 1.4s ease-in-out infinite;
  text-shadow: 0 0 8px #ff0;
}
.rl-shine.s2 { left: 22%; top: 28%; animation-delay: .4s; font-size: 1rem; }
.rl-shine.s3 { right: 18%; top: 48%; animation-delay: .8s; color: #fff; }
.shiny-word { color: #ffe566; text-shadow: 0 0 8px rgba(255,220,80,.5); }

/* Avatar con marco (como ficha del original) */
.rl-avatar {
  width: 56px; height: 56px;
  border-radius: 12px;
  padding: 3px;
  background: #2a2038;
  border: 2px solid #6a5090;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.rl-avatar img {
  width: 48px; height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
.rl-avatar.fr-league {
  border: 2px solid #e8c050;
  box-shadow: 0 0 0 2px #5a4010, 0 0 12px rgba(232,192,80,.45);
  background: linear-gradient(160deg, #3a2a10, #1a1220);
  position: relative;
}
.rl-avatar.fr-league::after {
  content: "👑";
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 12px;
}
.rl-avatar.fr-ball {
  border: 2px solid #e04040;
  box-shadow: 0 0 0 2px #fff;
  background: linear-gradient(180deg, #e04040 50%, #fff 50%);
}
.rl-avatar.fr-casino {
  border: 2px solid #f0c040;
  box-shadow: 0 0 10px rgba(240,180,40,.4);
}
.rl-avatar.fr-rocket {
  border: 2px solid #c02020;
  background: #1a0a0a;
}
.rl-avatar.fr-std { border-color: #7a6a9a; }

.rl-avatar-edit .rl-tabs { display: flex; gap: 6px; }
.rl-avatar-edit .rl-tabs button {
  padding: 6px 10px; border-radius: 8px; border: none;
  background: #2a2038; color: #ccc; font-size: .7rem;
}
.rl-avatar-edit .rl-tabs button.on { background: #e24b4b; color: #fff; }
.rl-ae-preview {
  display: flex; align-items: center; gap: 12px; margin: 12px 0;
}
.rl-ae-preview label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: .7rem; color: #bbb;
}
.rl-ae-preview input {
  padding: 8px; border-radius: 8px; border: 1px solid #4a3a68;
  background: #1a122c; color: #fff;
}
.rl-ae-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin: 10px 0; max-height: 40vh; overflow: auto;
}
.rl-ae-item {
  background: #1a122c; border: 2px solid #3a2a55; border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; align-items: center;
  color: #ddd; font-size: .6rem;
}
.rl-ae-item.on { border-color: #e8c050; }
.rl-ae-item img { width: 44px; height: 44px; image-rendering: pixelated; }
.rl-ae-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.rl-ae-actions button { flex: 1; padding: 12px; border-radius: 10px; border: none; font-weight: 700; }
.rl-ae-actions button:first-child { background: #2a2038; color: #ccc; }

/* Avatar enmarcado (perfil, chip, incursiones) */
.player-avatar {
  width: 52px; height: 52px;
  border-radius: 12px;
  padding: 2px;
  background: #1a1228;
  border: 2px solid #6a5090;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex: none;
  position: relative;
}
.player-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.player-avatar.fr-std { border-color: #7a6a9a; }
.player-avatar.fr-ball {
  border: 2px solid #e04040;
  background: linear-gradient(180deg, #e04040 48%, #f5f5f5 52%);
  box-shadow: inset 0 0 0 1px #fff;
}
.player-avatar.fr-casino {
  border: 2px solid #f0c040;
  box-shadow: 0 0 10px rgba(240,180,40,.35);
  background: #2a2010;
}
.player-avatar.fr-league {
  border: 2px solid #e8c050;
  box-shadow: 0 0 0 2px #4a3810, 0 0 12px rgba(232,192,80,.4);
  background: linear-gradient(160deg, #3a2a10, #1a1220);
}
.player-avatar.fr-league::after {
  content: "👑";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; line-height: 1;
}
.player-avatar.fr-rocket {
  border: 2px solid #c02020;
  background: #1a0808;
  box-shadow: 0 0 0 1px #400;
}
.player-avatar.fr-rocket::after {
  content: "R";
  position: absolute; right: 2px; bottom: 1px;
  font-size: 9px; font-weight: 900; color: #f44;
}
.chip-av { width: 44px; height: 44px; border-radius: 10px; }
.tc-mini-av { width: 36px; height: 36px; border-radius: 8px; }

.trainer-chip {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.tc-frame-hint {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .7rem; padding: 2px 5px; border-radius: 6px;
}
.tc-art { position: relative; cursor: pointer; }

/* Modal Mi Entrenador (original-like) */
.me-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 8, 18, .72);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom);
}
.me-panel {
  width: 100%; max-width: 440px;
  max-height: 92vh; overflow: auto;
  background: linear-gradient(180deg, #4a2a5a 0%, #2a1840 30%, #1a1028 100%);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px 20px;
  color: #f2eaff;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
.me-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.me-head h2 { flex: 1; margin: 0; font-size: 1.05rem; }
.me-tabs { display: flex; gap: 6px; }
.me-tabs button {
  padding: 7px 12px; border-radius: 9px; border: none;
  background: #2a2038; color: #c8b8e0; font-size: .72rem; font-weight: 800;
}
.me-tabs button.on { background: #e24b4b; color: #fff; }
.me-x {
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid #5a4a78; background: #2a2038; color: #fff;
}
.me-preview {
  display: flex; align-items: center; gap: 14px;
  background: #1a122c; border-radius: 14px; padding: 12px;
  margin-bottom: 12px; border: 1px solid #3d2a5c;
}
.me-preview .player-avatar { width: 72px; height: 72px; border-radius: 14px; }
.me-name { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: .7rem; color: #a890c8; }
.me-name input {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #4a3a68; background: #120c1c; color: #fff;
  font-size: 1rem; font-weight: 700;
}
.me-name small { align-self: flex-end; opacity: .7; }
.me-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  max-height: 42vh; overflow: auto; padding: 4px 0 8px;
}
.me-item {
  aspect-ratio: 1;
  background: #1a122c; border: 2px solid #3a2a55; border-radius: 12px;
  padding: 6px; display: flex; align-items: center; justify-content: center;
}
.me-item.on { border-color: #e8c050; box-shadow: 0 0 0 1px #e8c05055; }
.me-item img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.me-item.frame {
  flex-direction: column; gap: 4px; aspect-ratio: auto; min-height: 88px;
}
.me-item.frame .player-avatar { width: 56px; height: 56px; }
.me-item.frame small { font-size: .6rem; color: #c8b8e0; }
.me-foot {
  display: flex; gap: 10px; margin-top: 12px;
}
.me-cancel, .me-ok {
  flex: 1; padding: 14px; border-radius: 12px; border: none;
  font-weight: 800; font-size: .9rem;
}
.me-cancel { background: #2a2038; color: #c8b8e0; }
.me-ok { background: #e24b4b; color: #fff; }

/* Send-out: tamaño controlado, no hereda del mon */
.so-trainer {
  position: absolute !important;
  z-index: 6 !important;
  width: auto !important;
  max-width: 45% !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
  pointer-events: none !important;
  object-fit: contain !important;
}
.so-ball {
  width: 16px !important;
  height: 16px !important;
}

/* Marcos con PNG */
.player-avatar.fr-std {
  border: none;
  background: url("assets/frames/std.png") center/100% 100% no-repeat, #1a1228;
  padding: 5px;
}
.player-avatar.fr-ball {
  border: none;
  background: url("assets/frames/ball.png") center/100% 100% no-repeat, #1a1228;
  padding: 6px;
  box-shadow: none;
}
.player-avatar.fr-casino {
  border: none;
  background: url("assets/frames/casino.png") center/100% 100% no-repeat, #1a1228;
  padding: 6px;
}
.player-avatar.fr-league {
  border: none;
  background: url("assets/frames/league.png") center/100% 100% no-repeat, #1a1228;
  padding: 7px;
  box-shadow: none;
}
.player-avatar.fr-league::after { top: -12px; }
.player-avatar.fr-rocket {
  border: none;
  background: url("assets/frames/rocket.png") center/100% 100% no-repeat, #1a0808;
  padding: 6px;
}
.player-avatar.fr-rocket::after { display: none; }

/* ===== Marcos animados (estilo original) ===== */
.player-avatar {
  position: relative;
  overflow: visible !important;
}
.player-avatar .pa-face {
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
}
.fr-fx { position: absolute; pointer-events: none; z-index: 2; }

/* Casino: moneda giratoria (sprite sheet 6 frames) + focos */
.player-avatar.fr-casino {
  border: 2px solid #e8b84a !important;
  background: linear-gradient(145deg, #3a2a12, #1a1208) !important;
  box-shadow: 0 0 0 1px #8a6020, 0 0 12px rgba(240,180,40,.35) !important;
  padding: 4px !important;
}
.fr-coin {
  right: -4px; bottom: -4px;
  width: 18px; height: 18px;
  background: url("assets/ui/coin-spin-frames.png") 0 0 / 600% 100% no-repeat;
  image-rendering: pixelated;
  animation: coin-spin 0.9s steps(6) infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
@keyframes coin-spin {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
.fr-stars {
  inset: -2px;
  position: absolute;
}
.fr-stars i {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ffe566;
  box-shadow: 0 0 4px #ff0;
  animation: star-blink 2.2s ease-in-out infinite;
  opacity: .25;
}
.fr-stars i:nth-child(1) { top: 2px; left: 8%; animation-delay: 0s; }
.fr-stars i:nth-child(2) { top: 2px; left: 28%; animation-delay: .28s; }
.fr-stars i:nth-child(3) { top: 2px; left: 48%; animation-delay: .56s; }
.fr-stars i:nth-child(4) { top: 2px; left: 68%; animation-delay: .84s; }
.fr-stars i:nth-child(5) { top: 2px; left: 88%; animation-delay: 1.12s; }
.fr-stars i:nth-child(6) { bottom: 3px; left: 20%; animation-delay: 1.4s; }
.fr-stars i:nth-child(7) { bottom: 3px; left: 50%; animation-delay: 1.68s; }
.fr-stars i:nth-child(8) { bottom: 3px; left: 80%; animation-delay: 1.96s; }
@keyframes star-blink {
  0%, 100% { opacity: .15; transform: scale(.8); }
  40% { opacity: 1; transform: scale(1.3); }
  60% { opacity: .35; }
}

/* Liga */
.player-avatar.fr-league {
  border: 2px solid #e8c050 !important;
  background: linear-gradient(160deg, #3a2a10, #1a1220) !important;
  box-shadow: 0 0 0 2px #4a3810, 0 0 12px rgba(232,192,80,.4) !important;
}
.fr-crown {
  top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 12px; line-height: 1;
  filter: drop-shadow(0 1px 0 #4a3810);
}
.fr-badges {
  left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 70%; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e04040, #f0c040, #40c040, #4080f0, #a040c0);
  opacity: .85;
}

/* Rocket */
.player-avatar.fr-rocket {
  border: 2px solid #c02020 !important;
  background: #1a0808 !important;
}
.fr-rbadge {
  right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  background: #300808;
  border: 1px solid #e04040;
  color: #f44;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
}

/* Poké Ball */
.player-avatar.fr-ball {
  border: 2px solid #e04040 !important;
  background: linear-gradient(180deg, #e04040 46%, #1b1b24 48% 52%, #f5f5f5 54%) !important;
  box-shadow: inset 0 0 0 1px #fff8 !important;
}
.fr-ballbtn {
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  border: 2px solid #1b1b24;
  z-index: 3;
}

.me-big { width: 72px !important; height: 72px !important; border-radius: 14px !important; }
.me-frame-prev { width: 52px !important; height: 52px !important; }
.me-big .fr-coin, .me-frame-prev .fr-coin { width: 16px; height: 16px; }

/* Entrenador batalla: aliado izquierda / rival derecha */
.so-trainer {
  position: absolute !important;
  bottom: 12% !important;
  top: auto !important;
  height: clamp(96px, 34%, 132px) !important;
  width: auto !important;
  max-width: none !important;
  max-height: 132px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
  pointer-events: none !important;
  z-index: 12 !important;
}
.so-trainer:not(.foe) {
  left: 8% !important;
  right: auto !important;
  transform: scaleX(-1);
  transform-origin: center bottom;
}
.so-trainer.foe {
  left: auto !important;
  right: 6% !important;
  transform: none !important;
  transform-origin: center bottom;
}
@keyframes so-in-foe { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes so-out-foe { to { opacity: 0; transform: translateX(12px); } }
.so-trainer.foe { animation: so-in-foe .22s ease-out; }
.so-trainer.foe.out { animation: so-out-foe .16s forwards; }

.capture-trainer {
  position: absolute !important;
  left: -20%;
  bottom: 12% !important;
  top: auto !important;
  opacity: 0;
  z-index: 20;
}
.capture-trainer img {
  height: clamp(96px, 34cqh, 132px) !important;
  width: auto !important;
  max-height: 132px !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.45));
  object-fit: contain !important;
}
.capture-trainer.in {
  animation: trainerInThrow 0.45s ease-out forwards;
}
@keyframes trainerInThrow {
  from { left: -25%; opacity: 0; }
  to { left: 8%; opacity: 1; }
}
@keyframes trainerOutThrow {
  from { left: 8%; opacity: 1; }
  to { left: -20%; opacity: 0; }
}


/* ═════════════ v60: tipografía, cabecera, velocidad, equipo rival, Mi Entrenador ═════════════ */
:root { --font-ui: "Pixelify Sans", "Press Start 2P", "Courier New", monospace; --font-display: var(--font-ui); }
html { font-size: 17px; }
html, body, button, input, select, textarea, .battle-msg, .dialogue-text, .route-name, .team-title,
.ttl, .ttl-btn, .ttl-link { font-family: var(--font-ui) !important; }
body { font-size: 14px; line-height: 1.4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='5'%3E%3Ccircle cx='48' cy='48' r='30'/%3E%3Cpath d='M18 48h60'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3C/g%3E%3C/svg%3E"); background-size: 96px 96px; }

/* Cabecera: perfil · dinero · guardar · ajustes */
.route-header.hud { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.hud .trainer-chip { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; }
.hud .chip-av { width: 48px; height: 48px; flex: none; }
.hud-dex { font-size: 1.05rem; color: #e8ebf8; letter-spacing: .5px; }
.hud-money { background: #151a2c; border-radius: 14px; padding: 10px 16px; font-size: 1.05rem; color: #fff; white-space: nowrap; }
.hud-btn { position: relative; width: 48px; height: 48px; border-radius: 14px; border: 2px solid #2c3354; background: #151a2c; display: flex; align-items: center; justify-content: center; color: #aab; flex: none; }
#hud-gear { border-color: #e8c050; }
.hud-cog { font-style: normal; font-size: 1.7rem; line-height: 1; color: #b8bcc8; }
.hud-floppy { width: 24px; height: 24px; background: linear-gradient(#5b8ee8 0 38%, #dfe6f5 38% 100%); border-radius: 3px; box-shadow: inset 0 0 0 2px #3a62b8; image-rendering: pixelated; }
.hud-dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #3fcf5a; border: 2px solid #0c1020; }
#hud-gear::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #f4c542; border: 2px solid #0c1020; }
.hud-dot.pulse { animation: hudPulse .6s ease-out; }
@keyframes hudPulse { 0% { transform: scale(2.2); } 100% { transform: scale(1); } }

/* Velocidad dentro del mapa, en doble marco */
.speed-controls.in-scene { position: absolute; top: 8px; right: 8px; z-index: 8; display: flex; gap: 2px; padding: 4px; border-radius: 16px; background: rgba(8,10,22,.72); border: 2px solid #272d4a; box-shadow: 0 0 0 2px rgba(8,10,22,.5); }
.speed-controls.in-scene button { min-width: 38px; padding: 7px 9px; border: 0; border-radius: 11px; background: transparent; color: #dfe3f5; font-size: .95rem; box-shadow: none; }
.speed-controls.in-scene button.active { background: #e53a3a; color: #fff; box-shadow: 0 3px 0 #8e1d1d; }
.scene-topbar { padding-right: 150px; }

/* Equipo rival (Poké Balls) bajo la velocidad */
.foe-team { position: absolute; top: 56px; right: 8px; z-index: 8; background: #f6f7fb; color: #1b2036; border-radius: 12px; padding: 8px 12px 9px; box-shadow: 0 3px 0 rgba(0,0,0,.35); text-align: center; max-width: 60%; }
.foe-team b { display: block; font-size: .8rem; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foe-team span { display: flex; gap: 8px; justify-content: center; }
.foe-team i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #1b1b24; background: linear-gradient(180deg, #ef4444 0 42%, #1b1b24 43% 57%, #fff 58%); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.foe-team i.done { filter: grayscale(1) brightness(.85); }

/* Tiles del equipo como en el original */
.rail-slot { background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 4px), linear-gradient(160deg, #3a3f66, #232845) !important; border: 2px solid #2a3050 !important; border-radius: 14px !important; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.rail-slot.active { border-color: #f2c230 !important; box-shadow: 0 0 0 1px #f2c23077, 0 0 10px rgba(242,194,48,.35); }
.rail-slot.ko img { filter: grayscale(1) brightness(.7); }
.rail-slot.ko { background: linear-gradient(160deg, #2a2d40, #1c1f30) !important; }
.team-rail { z-index: 3; }
.so-trainer, .so-ball, .dissolve-cv { z-index: 12 !important; }

/* Daño supereficaz / crítico: naranja con borde rojo */
.damage-float.crit { color: #ffae3a; font-size: 1.7rem; -webkit-text-stroke: 3px #c4210f; paint-order: stroke fill; text-shadow: 0 2px 0 #7a1208, 0 0 10px rgba(255,90,30,.6); }

/* Derrota: silueta blanca con resplandor rojo y se desvanece */
.anim-faint { animation: faintOut2 .95s forwards !important; }
@keyframes faintOut2 {
  0% { filter: none; opacity: 1; translate: 0 0; }
  22% { filter: brightness(0) invert(1) drop-shadow(0 0 3px #ff4a4a) drop-shadow(0 0 8px #ff2a2a); opacity: 1; translate: 0 0; }
  65% { filter: brightness(0) invert(1) drop-shadow(0 0 3px #ff4a4a) drop-shadow(0 0 8px #ff2a2a); opacity: 1; translate: 0 6px; }
  100% { filter: brightness(0) invert(1) drop-shadow(0 0 6px #ff4a4a); opacity: 0; translate: 0 24px; }
}

/* Mi Entrenador: ventana centrada como el original; marcos en su propia pestaña */
.me-grid[hidden], .me-frames[hidden] { display: none !important; }
.me-overlay { align-items: center !important; padding: 16px !important; }
.me-panel { max-width: 430px !important; border-radius: 18px !important; padding: 0 0 16px !important; background: #181d33 !important; border: 3px solid #d04a4a; overflow: auto; }
.me-head { margin: 0 !important; padding: 14px 14px; background: linear-gradient(180deg, #6b2a35, #4a2230); border-bottom: 3px solid #d04a4a; }
.me-head h2 { font-size: 1.35rem !important; color: #fff; }
.me-tabs { background: #12162a; border: 2px solid #2d3350; border-radius: 12px; padding: 3px; gap: 2px !important; }
.me-tabs button { background: transparent !important; color: #c8cde8 !important; padding: 8px 12px !important; font-size: .85rem !important; letter-spacing: .5px; }
.me-tabs button.on { background: #e24b4b !important; color: #fff !important; box-shadow: 0 3px 0 #8e1d1d; }
.me-x { border: 2px solid #e87a7a !important; background: transparent !important; color: #ff8a8a !important; font-size: 1.1rem; }
.me-preview { background: none !important; border: 0 !important; margin: 0 !important; padding: 16px 16px 8px !important; gap: 16px !important; }
.me-preview .tr-face.me-big { width: 112px; height: 112px; --fp: 2px; border-radius: 16px; flex: none; }
.me-name span { letter-spacing: 1px; color: #98a3d0; }
.me-name input { background: #0f1324 !important; border: 2px solid #2d3350 !important; border-radius: 14px !important; font-size: 1.15rem !important; }
.me-panel > .me-grid { margin: 8px 16px 0; padding: 12px 0 6px; border-top: 2px solid #2a3150; max-height: 46vh; }
.me-item { background: #1b2140 !important; border-color: #2a3150 !important; padding: 0 !important; overflow: hidden; border-radius: 12px !important; }
.me-item.on { border-color: #f2c230 !important; box-shadow: 0 0 0 1px #f2c23066 !important; background: #2a2a34 !important; }
.me-item:not(.frame) img { object-fit: cover !important; object-position: 50% 6%; width: 118% !important; height: 118% !important; max-width: none; }
.me-frames { grid-template-columns: repeat(3, 1fr) !important; }
.me-item.frame { padding: 8px 4px !important; overflow: visible; min-height: 100px; }
.me-item.frame small { font-size: .8rem !important; color: #dfe3f5 !important; }
.me-foot { padding: 0 16px; }
.me-cancel { background: #20263f !important; color: #dfe3f5 !important; border: 2px solid #2d3350 !important; }
.me-ok { background: #e24b4b !important; color: #fff !important; box-shadow: 0 4px 0 #8e1d1d; }

/* ═════════ v60: presentación de líder (estilo original) ═════════ */
.boss-intro.v2 { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 6%; z-index: 45;
  background-color: color-mix(in srgb, var(--c) 18%, #0b0705);
  background-image:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--c) 40%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, transparent) 0 7px, transparent 7px 46px);
  image-rendering: pixelated; }
.boss-intro.v2::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(#0b0705 25%, transparent 0 50%, #0b0705 0 75%, transparent 0) 0 0/6px 6px; opacity: .55; }
.boss-intro.v2 .bi-bar { height: 16%; background: #0a0705; opacity: 1; z-index: 1; }
.boss-intro.v2 .bi-bar.top { border-bottom: 2px solid var(--c); }
.boss-intro.v2 .bi-bar.bot { border-top: 2px solid var(--c); }
.boss-intro.v2 .bi-info { position: relative; z-index: 2; align-items: flex-start; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: opacity .3s, transform .3s; transform: translateX(-10px); }
.boss-intro.v2 .bi-info.show { transform: none; }
.boss-intro.v2 .bi-info small { color: var(--c); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; }
.boss-intro.v2 .bi-info b { font-size: 1.7rem; color: #fff; text-shadow: 0 2px 0 #000; }
.boss-intro.v2 .bi-info em { font-style: normal; color: #f2f2f2; font-size: .9rem; }
.boss-intro.v2 .bi-tags { display: flex; align-items: center; gap: 8px; }
.boss-intro.v2 .bi-type { background: color-mix(in srgb, var(--tc) 70%, #000); border: 2px solid var(--tc); color: #fff; padding: 2px 8px; border-radius: 8px; font-size: .75rem; }
.boss-intro.v2 .bi-who { position: relative; z-index: 2; flex: none; width: 46%; height: 78%; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.boss-intro.v2 .bi-trainer { max-height: 100%; max-width: 100%; position: relative; z-index: 2; transition: filter .25s; }
.boss-intro.v2 .bi-trainer.sil { filter: brightness(0) drop-shadow(0 0 10px var(--c)); }
.bi-ring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border: 3px dotted var(--c); border-radius: 50%; opacity: 0; }
.bi-who.burst .bi-ring { animation: biRing .8s ease-out forwards; }
@keyframes biRing { 0% { scale: .3; opacity: 1; } 70% { opacity: 1; } 100% { scale: 1.05; opacity: .85; } }
.bi-sparks u { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--c); opacity: 0; }
.bi-who.burst .bi-sparks u { animation: biSpark .9s ease-out forwards; }
@keyframes biSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 2)); } }

/* rival lanza su Poké Ball en el escenario */
.so-trainer.foe { filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
.so-ring { position: absolute; z-index: 12; width: 20px; height: 20px; translate: -50% -50%; border: 3px dashed #ff5a4a; border-radius: 50%; pointer-events: none; animation: soRing .55s ease-out forwards; }
@keyframes soRing { 0% { scale: .3; opacity: 1; } 100% { scale: 4.2; opacity: 0; } }

/* ═════════ v63: mensajes dentro del mapa, cartel central, PE flotante, Poké Balls reales ═════════ */
.route-screen > .battle-msg, .route-screen .battle-msg#msg { display: none !important; }
.scene-msg { position: absolute; left: 24%; right: 8px; bottom: 10px; z-index: 13; min-height: 44px; display: flex; align-items: center; padding: 10px 14px;
  background: #f8fafc; color: #12182b; font-size: .95rem; line-height: 1.25; border-radius: 14px; border: 3px solid #8aa4e6;
  box-shadow: 0 0 0 3px #1c2547, 0 4px 0 3px rgba(0,0,0,.35); pointer-events: none; }
.scene-msg.pop { animation: msgPop .18s ease-out; }
@keyframes msgPop { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }

.scene-banner { position: absolute; left: 7%; right: 7%; top: 42%; z-index: 15; padding: 22px 16px; text-align: center; color: #fff; font-size: 1.05rem; line-height: 1.3;
  background: #1f2a5a; border: 4px solid #f4f6ff; border-radius: 18px; box-shadow: 0 0 0 3px #1f2a5a, 0 8px 0 3px rgba(0,0,0,.4); pointer-events: none; animation: bnIn .22s ease-out; }
.scene-banner.out { opacity: 0; transition: opacity .2s; }
@keyframes bnIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

.xp-float { position: absolute; z-index: 14; color: #8bdc3d; font-size: 1rem; white-space: nowrap; pointer-events: none; -webkit-text-stroke: 2px #1b3a0c; paint-order: stroke fill;
  text-shadow: 0 2px 0 #1b3a0c; animation: xpUp 1.6s ease-out forwards; }
.xp-float small { color: #c9ecb0; font-size: .7em; }
@keyframes xpUp { 0% { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

.foe-team span { gap: 6px; }
.foe-team img { width: 30px; height: 30px; image-rendering: pixelated; }
.foe-team img.done { filter: grayscale(1) brightness(.9); }

/* ═════════ v65: estados (ENV / PAR) ═════════ */
.st-badge { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: .62rem; line-height: 1; letter-spacing: .5px; border: 2px solid #1b1b24; color: #fff; }
.st-badge.psn { background: #a040c8; }
.st-badge.par { background: #f2c230; color: #3a2a00; }
.rail-slot { position: relative; }
.rail-slot .st-badge { position: absolute; left: 4px; top: 4px; z-index: 3; }
.enemy-st { margin-left: 4px; vertical-align: middle; }
.enemy-st[hidden] { display: none; }


/* ============================================================
   UI parity con original (fuentes, mensaje, fondo Poké Ball)
   ============================================================ */

:root {
  --font-ui: "Pixelify Sans", "Press Start 2P", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", "Pixelify Sans", monospace;
  --bg: #12141f;
  --card: #1a1e2e;
  --text: #eef1f8;
  --muted: #9aa3b8;
  --msg-bg: #f7f8fc;
  --msg-border: #b8c0d4;
  --msg-text: #1a1a28;
}

html, body {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  background-color: var(--bg) !important;
  /* Patrón de Poké Balls lineal del original (contorno claro sobre fondo oscuro) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='36' cy='36' r='22'/%3E%3Cpath d='M14 36h44'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 72px 72px !important;
  background-repeat: repeat !important;
  color: var(--text);
}

#app {
  background: transparent;
}

/* Título / chips más pixel; cuerpo de UI más legible */
.ttl, .ttl-btn, .route-name, .team-title, .me-head h2,
.bi-info b, .vs-flash {
  font-family: var(--font-pixel) !important;
  letter-spacing: 0.02em;
}

button, input, select, textarea,
.nav-label, .trainer-chip, .weather-chip, .clock-chip,
.scene-topbar, .bottom-nav, .bag-tile, .dx-tools {
  font-family: var(--font-ui) !important;
}

/* Caja de mensajes de combate = original */
.battle-msg,
.route-screen .battle-msg,
.battle-scene > .battle-msg,
#msg.battle-msg {
  display: block !important;
  background: var(--msg-bg) !important;
  color: var(--msg-text) !important;
  border: 2px solid var(--msg-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.18) !important;
  padding: 0.55rem 0.85rem !important;
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  margin: 0.35rem 0.5rem 0.5rem !important;
  min-height: 2.4em;
}

/* Diálogo intro */
.dialogue-box {
  background: var(--msg-bg) !important;
  color: var(--msg-text) !important;
  border: 3px solid #3d3d5c !important;
  border-radius: 12px !important;
}
.dialogue-text {
  font-family: var(--font-ui) !important;
  font-size: 0.95rem !important;
  color: var(--msg-text) !important;
}

/* Tamaños de UI más cercanos al original */
.weather-chip, .clock-chip, .scene-topbar {
  font-size: 0.72rem !important;
  padding: 4px 8px !important;
}
.nav-label, .bottom-nav {
  font-size: 0.7rem !important;
}
.trainer-chip, .route-header {
  font-size: 0.72rem !important;
}

/* Velocidad x1 x2 x4 */
.speed-controls button {
  font-family: var(--font-ui) !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  border-radius: 8px !important;
  padding: 0.28rem 0.55rem !important;
}

/* Patrón también sutil detrás del panel de aventura */
.route-screen,
.adventure-wrap {
  background-color: transparent;
}

/* Roster lateral */
.team-rail .mon-slot,
.side-team .mon-card {
  font-family: var(--font-ui) !important;
  font-size: 0.65rem !important;
}


/* ============================================================
   Campo de batalla: subir mons, escala por tamaño, slots redondos
   ============================================================ */

/* Mensaje NO tapa a los Pokémon */
.battle-scene {
  min-height: 320px !important;
}
.battle-field {
  align-items: flex-end !important;
  padding-bottom: 56px !important; /* hueco para el cartel */
  min-height: 180px !important;
}
.battle-mon {
  transform: translateY(-8px) !important;
  z-index: 4;
}
/* Tamaño desde --art (JS); sin forzar 80px iguales */
.battle-mon img.mon-sprite {
  width: var(--art, 88px) !important;
  height: var(--art, 88px) !important;
  max-width: 130px !important;
  max-height: 130px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  margin-bottom: 0 !important;
}
.battle-mon.ally {
  margin-left: 4%;
}
.battle-mon.enemy {
  margin-right: 2%;
}
/* Cartel de mensajes sobre el suelo, sin cubrir sprites */
.scene-msg {
  bottom: 6px !important;
  left: 22% !important;
  right: 6px !important;
  z-index: 12 !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
}
.battle-scene > .battle-msg,
#msg.battle-msg {
  /* si cae dentro de la escena, anclar abajo */
  position: relative;
  z-index: 12;
  margin-top: 0.25rem !important;
}

/* Slots del equipo: más redondeados como el original */
button.rail-slot,
.rail-slot {
  width: 56px !important;
  min-width: 56px !important;
  padding: 4px 3px 5px !important;
  border-radius: 18px !important;          /* más redondo */
  border: 2.5px solid #2a3050 !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #3a3f66, #232845) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}
button.rail-slot.active,
.rail-slot.active {
  border-color: #f2c230 !important;
  box-shadow:
    0 0 0 1px #f2c230aa,
    0 0 12px rgba(242,194,48,.4),
    0 3px 0 rgba(0,0,0,.35) !important;
}
.rail-slot img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 6px;
}
.rail-slot span {
  font-size: 0.58rem !important;
  font-weight: 700;
  margin-top: 1px !important;
}
.rail-hp {
  width: 44px !important;
  height: 4px !important;
  border-radius: 3px !important;
  order: 10 !important; /* debajo */
}
.rail-xp {
  width: 44px !important;
  height: 3px !important;
  border-radius: 2px !important;
  order: 11 !important;
}
.team-rail {
  width: 60px !important;
  left: 5px !important;
  top: 40px !important;
  gap: 5px !important;
}
.battle-field {
  margin-left: 64px !important;
}


/* ===== Centro Pokémon heal (estilo original) ===== */
.heal-fx {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.heal-fx .hf-dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.55); /* no negro total: se ve el centro */
  backdrop-filter: blur(1px);
}
.hm-stage {
  position: relative;
  z-index: 2;
  width: min(92%, 340px);
  text-align: center;
}
.hm-title {
  color: #f2f4ff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px #000;
  margin-bottom: 14px;
}
.hm-machine {
  position: relative;
  padding: 18px 10px 8px;
}
.hm-tray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  justify-items: center;
  max-width: 260px;
  margin: 0 auto;
}
.hm-slot {
  position: relative;
  width: 56px;
  height: 52px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hm-slot img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-40px);
}
.hm-slot.drop img {
  animation: hmDrop 0.35s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes hmDrop {
  0% { opacity: 0; transform: translateY(-48px) scale(.8); }
  70% { opacity: 1; transform: translateY(2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hm-pad {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 46px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #5d6788 0%, #2a2440 70%, #0d0b16 100%);
  box-shadow: 0 2px 0 #0008;
  z-index: 1;
}
.hm-slot.on .hm-pad {
  background: radial-gradient(ellipse at 50% 40%, #ffb3c9 0%, #ff6b9d 45%, #a03060 100%);
  box-shadow: 0 0 12px #ff8fb1aa, 0 2px 0 #0006;
}
.hm-slot.heal .hm-pad {
  animation: hmPulse 0.6s ease-in-out infinite alternate;
}
@keyframes hmPulse {
  from { filter: brightness(1); box-shadow: 0 0 10px #ff8fb188; }
  to { filter: brightness(1.25); box-shadow: 0 0 18px #ff8fb1; }
}
.hm-msg {
  margin: 16px auto 0;
  display: inline-block;
  background: #6b2a48;
  color: #ffe8f0;
  border: 2px solid #f0a0c0;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 3px 0 #0005;
  opacity: 0;
}
.hm-msg.show {
  animation: hmMsgIn .25s ease-out forwards;
}
@keyframes hmMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hm-skip {
  position: absolute;
  left: 50%;
  bottom: -42px;
  transform: translateX(-50%);
  background: #2a2038;
  color: #e8d8f8;
  border: 2px solid #5a4a70;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 3;
}
.hm-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hm-sparkles i {
  position: absolute;
  left: var(--x);
  bottom: 30%;
  color: #7dffa0;
  font-weight: 900;
  font-size: 0.9rem;
  text-shadow: 0 0 6px #4dff88;
  animation: hmPlus var(--d) ease-out forwards;
}
@keyframes hmPlus {
  0% { opacity: 0; transform: translate(0, 10px) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -48px) scale(1.1); }
}

/* Legacy */
.center-heal-fx { display: none !important; }


/* ============================================================
   v67: rivales visibles + slots cuadrados (estilo original)
   ============================================================ */

/* Escena: no recortar sprites del campo */
.battle-scene,
#scene {
  overflow: visible !important;
}
.scene-overlay {
  overflow: visible !important;
}

/* Campo: espacio a derecha e izquierda para que el rival no se corte */
.battle-field {
  margin-left: 68px !important;
  margin-right: 8px !important;
  padding-left: 4px !important;
  padding-right: 12px !important;
  padding-bottom: 52px !important;
  min-height: 170px !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  overflow: visible !important;
}
.battle-mon {
  overflow: visible !important;
  max-width: 46% !important;
}
.battle-mon.enemy {
  margin-right: 0 !important;
  align-items: center !important;
  transform: translateX(-6px) !important;
}
.battle-mon.ally {
  margin-left: 0 !important;
}
.battle-mon img.mon-sprite {
  max-width: 110px !important;
  max-height: 110px !important;
  width: var(--art, 84px) !important;
  height: var(--art, 84px) !important;
  object-fit: contain !important;
}

/* Lista equipo: 6 slots visibles, compactos */
.team-rail {
  top: 36px !important;
  bottom: 8px !important;
  left: 4px !important;
  width: 64px !important;
  gap: 3px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  z-index: 6 !important;
  scrollbar-width: none;
}
.team-rail::-webkit-scrollbar { display: none; }

/*
 * Slot estilo original (Gyarados):
 * - casi cuadrado (no rectángulo alto)
 * - esquina inferior derecha MÁS curva que las otras tres
 */
button.rail-slot,
.rail-slot {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 3px 2px 2px !important;
  box-sizing: border-box !important;
  /* TL TR BR BL — BR más redonda */
  border-radius: 12px 12px 22px 12px !important;
  border: 2.5px solid #2a3050 !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #2e3458 0%, #1c2138 100%) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.4) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  position: relative !important;
}
button.rail-slot.active,
.rail-slot.active {
  border-color: #f2c230 !important;
  box-shadow:
    0 0 0 1px #f2c230cc,
    0 0 10px rgba(242,194,48,.45),
    0 2px 0 rgba(0,0,0,.35) !important;
}
.rail-slot img {
  width: 36px !important;
  height: 36px !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
}
.rail-slot span {
  font-size: 0.5rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000;
  position: relative !important;
  z-index: 2;
}
/* Barras abajo del cuadro, finas */
.rail-hp,
.rail-xp {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  order: unset !important;
}
.rail-hp {
  bottom: 3px !important;
  background: #1a1f30 !important;
}
.rail-xp {
  bottom: 0 !important;
  height: 2px !important;
  background: #151928 !important;
}
.rail-hp .fill {
  background: linear-gradient(90deg, #3ddc6a, #7dff9a) !important;
}
.rail-xp .fill {
  background: #5b8cff !important;
}


/* ============================================================
   v68: slots más chicos + sprite grande + ball real
   ============================================================ */

button.rail-slot,
.rail-slot {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 1px 1px 2px !important;
  border-radius: 11px 11px 20px 11px !important;
}
.rail-slot img {
  width: 42px !important;
  height: 42px !important;
  margin-top: -1px !important;
}
.rail-slot span {
  font-size: 0.48rem !important;
  margin-top: -2px !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 0; right: 0;
  text-align: center;
}
.rail-hp { bottom: 2px !important; height: 2.5px !important; }
.rail-xp { bottom: 0 !important; height: 2px !important; }
.team-rail {
  width: 56px !important;
  gap: 2px !important;
  top: 34px !important;
  bottom: 6px !important;
}
.battle-field { margin-left: 60px !important; }

/* Poké Ball real en send-out (no el círculo CSS inventado) */
.so-ball,
img.so-ball {
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.35) !important;
  image-rendering: pixelated !important;
  object-fit: contain !important;
  z-index: 14 !important;
}


/* ===== VS intro con marcos (estilo original) ===== */
.vs-intro.framed {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vs-intro.framed .vs-stage-dim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 22, 0.55);
}
.vs-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vs-card.left { left: 10%; }
.vs-card.right { right: 10%; }
.vs-face {
  width: 88px !important;
  height: 88px !important;
  border-radius: 16px !important;
  overflow: hidden;
  border: 3px solid #3a4268;
  background: #1a1f35;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.vs-face.rival {
  border-color: #4a5578;
}
.vs-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  image-rendering: pixelated;
}
.vs-card .vs-label {
  font-family: "Pixelify Sans", system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px #000;
  text-align: center;
  max-width: 110px;
}
.vs-card .vs-label small {
  display: block;
  font-size: 0.65rem;
  opacity: .8;
}
.vs-intro.framed .vs-flash {
  position: relative;
  z-index: 3;
  font-family: "Press Start 2P", monospace;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    0 0 12px #ff6b6b,
    0 0 24px #ffcb05,
    2px 2px 0 #000;
  letter-spacing: 2px;
}
.vs-sparkles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0; height: 0;
  z-index: 4;
  pointer-events: none;
}
.vs-sparkles i {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #ffcb05;
  transform: rotate(var(--a)) translateX(var(--d));
  animation: vs-spark 0.7s ease-out var(--delay) both;
}
@keyframes vs-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(4px) scale(.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 1.6)) scale(1); }
}
.vs-intro .tr-face.vs-av,
.vs-intro .vs-av.tr-face {
  width: 88px !important;
  height: 88px !important;
  --fp: 1.4px;
}


/* ===== VS layout v71: fila izquierda | VS | derecha (sin solape) ===== */
.vs-intro.framed {
  position: absolute !important;
  inset: 0 !important;
  z-index: 28 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.vs-intro.framed .vs-stage-dim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(8, 10, 20, 0.58) !important;
}
.vs-intro.framed .vs-row {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(92%, 360px) !important;
  gap: 8px !important;
  pointer-events: none !important;
}
.vs-intro.framed .vs-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: 100px !important;
}
.vs-intro.framed .vs-mid {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  min-width: 56px !important;
}
.vs-intro.framed .vs-face,
.vs-intro.framed .tr-face.vs-face,
.vs-intro.framed .tr-face.vs-av,
.vs-intro.framed .vs-av.tr-face {
  width: 84px !important;
  height: 84px !important;
  min-width: 84px !important;
  min-height: 84px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  --fp: 1.35px;
  border: 3px solid #3d4668 !important;
  background: #1a1f35 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
  position: relative !important;
}
.vs-intro.framed .vs-face.rival {
  border-color: #4a5578 !important;
}
.vs-intro.framed .tr-win,
.vs-intro.framed .vs-face img,
.vs-intro.framed .tr-face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  image-rendering: pixelated !important;
}
.vs-intro.framed .vs-label {
  font-family: "Pixelify Sans", system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 2px 4px #000 !important;
  text-align: center !important;
  max-width: 100px !important;
  line-height: 1.15 !important;
}
.vs-intro.framed .vs-label small {
  display: block !important;
  font-size: 0.62rem !important;
  opacity: 0.85 !important;
}
.vs-intro.framed .vs-flash {
  position: relative !important;
  z-index: 3 !important;
  font-family: "Press Start 2P", monospace !important;
  font-size: 1.35rem !important;
  color: #fff !important;
  text-shadow: 0 0 10px #ff6b6b, 0 0 20px #ffcb05, 2px 2px 0 #000 !important;
  margin: 0 !important;
}
.vs-intro.framed .vs-sparkles {
  position: absolute !important;
  left: 50%; top: 50%;
  width: 0; height: 0;
  z-index: 4;
}

/* Team rail: un poco más de aire entre slots */
.team-rail {
  gap: 6px !important;
}


/* ===== v72: VS centrado + foe balls + tamaños ===== */
.vs-intro.framed .vs-row {
  width: min(94%, 380px) !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.vs-intro.framed .vs-mid {
  position: relative !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vs-intro.framed .vs-flash {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  text-align: center !important;
}
.vs-portrait {
  width: 86px !important;
  height: 86px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 3px solid #4a5578 !important;
  background: #1a1f35 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vs-portrait img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  background: transparent !important;
}
.vs-portrait.rival { border-color: #5a6588 !important; }

.foe-team {
  position: absolute !important;
  top: 48px !important;
  right: 8px !important;
  z-index: 15 !important;
  background: #f6f7fb !important;
  color: #1b2036 !important;
  border-radius: 12px !important;
  padding: 8px 10px 8px !important;
  box-shadow: 0 3px 0 rgba(0,0,0,.35) !important;
  text-align: center !important;
  max-width: 55% !important;
  display: block !important;
}
.foe-team b {
  display: block !important;
  font-size: 0.78rem !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.foe-team .ft-balls {
  display: flex !important;
  flex-direction: row !important;
  gap: 5px !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 22px !important;
}
.foe-team .ft-ball {
  width: 22px !important;
  height: 22px !important;
  image-rendering: pixelated !important;
  flex: 0 0 22px !important;
  display: block !important;
}
.foe-team .ft-ball.done {
  filter: grayscale(1) brightness(0.85) !important;
  opacity: 0.7 !important;
}

/* Permitir tamaños reales por especie (quitar techo 110 fijo demasiado bajo para grandes) */
.battle-mon img.mon-sprite {
  max-width: 130px !important;
  max-height: 130px !important;
  width: var(--art, 64px) !important;
  height: var(--art, 64px) !important;
}
.battle-mon.enemy {
  visibility: visible !important;
}
#enemy-side {
  visibility: visible;
}
#enemy-img {
  display: block !important;
}

/* v66: efectos del reveal del líder (partículas + flash) */
.boss-intro .bi-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.bi-spark { position: absolute; border-radius: 1px; image-rendering: pixelated; pointer-events: none; }
.boss-intro .bi-flash { position: absolute; inset: 0; z-index: 6; background: #fff; pointer-events: none; }

/* v74: tipografía del original (Jersey 10 / Jersey 15, OFL), autoalojada.
   Se registra bajo los nombres antiguos para que todo el CSS existente la use. */
@font-face { font-family: "Jersey 10"; src: url(../assets/fonts/Jersey10-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Jersey 15"; src: url(../assets/fonts/Jersey15-latin.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(../assets/fonts/Jersey10-latin.woff2) format("woff2"); size-adjust: 125%; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(../assets/fonts/Jersey15-latin.woff2) format("woff2"); size-adjust: 150%; font-display: swap; }
:root { --font: "Jersey 10", system-ui, sans-serif; --font-title: "Jersey 15", system-ui, sans-serif; }


/* ===== v80 parity: rail + field + VS ===== */
.team-rail {
  position: absolute !important;
  left: 6px !important;
  top: 44px !important;
  bottom: 52px !important;
  width: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  z-index: 8 !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  pointer-events: auto !important;
}
button.rail-slot,
.rail-slot {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 3px 2px 4px !important;
  margin: 0 !important;
  border: 2px solid #2c3355 !important;
  border-radius: 12px 12px 20px 12px !important; /* inferior derecha más curva */
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 2px, transparent 2px 4px),
    linear-gradient(165deg, #3d446c 0%, #1e243f 100%) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
button.rail-slot.active,
.rail-slot.active {
  border-color: #f0c230 !important;
  box-shadow: 0 0 0 1.5px #f0c230, 0 0 10px rgba(240,194,48,.45), 0 2px 0 rgba(0,0,0,.4) !important;
}
.rail-slot img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  margin: 0 auto !important;
}
.rail-slot span {
  font-size: 0.55rem !important;
  line-height: 1 !important;
  color: #e8ecff !important;
  margin-top: -1px !important;
}
.rail-hp {
  position: absolute !important;
  left: 4px !important; right: 4px !important;
  bottom: 10px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: #12162a !important;
  overflow: hidden !important;
}
.rail-xp {
  position: absolute !important;
  left: 4px !important; right: 4px !important;
  bottom: 5px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #12162a !important;
}
.rail-hp .fill { background: linear-gradient(90deg,#4ade80,#22c55e) !important; height: 100% !important; }
.rail-xp .fill { background: #60a5fa !important; height: 100% !important; }

.battle-field {
  margin-left: 62px !important;
  margin-right: 8px !important;
  overflow: visible !important;
  align-items: flex-end !important;
  padding-bottom: 8px !important;
}
.battle-mon {
  overflow: visible !important;
  max-width: 48% !important;
}
.battle-mon.ally { align-items: flex-start !important; transform: translateY(4px) !important; }
.battle-mon.enemy { align-items: flex-end !important; transform: translateY(-2px) !important; }
.battle-mon img.mon-sprite {
  max-width: 128px !important;
  max-height: 128px !important;
  width: var(--art, 72px) !important;
  height: var(--art, 72px) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)) !important;
}

/* VS overlay */
.vs-intro.framed {
  position: absolute !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.vs-intro.framed .vs-stage-dim {
  position: absolute !important; inset: 0 !important;
  background: rgba(6,8,18,.62) !important;
}
.vs-intro.framed .vs-row {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(94%, 360px) !important;
  gap: 6px !important;
}
.vs-intro.framed .vs-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: 104px !important;
}
.vs-intro.framed .vs-mid {
  position: relative !important;
  flex: 0 0 70px !important;
  height: 56px !important;
}
.vs-intro.framed .vs-flash {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%,-50%) !important;
  font-family: "Press Start 2P", "Pixelify Sans", monospace !important;
  font-size: 1.45rem !important;
  color: #fff !important;
  text-shadow:
    0 0 8px #ff6b4a,
    0 0 18px #ffcb05,
    2px 2px 0 #000 !important;
  letter-spacing: 1px !important;
}
.vs-portrait {
  width: 88px !important;
  height: 88px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 3px solid #c9a227 !important;
  background: #1a1f35 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
.vs-portrait.rival { border-color: #5b6a9a !important; }
.vs-portrait img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  image-rendering: pixelated !important;
}
.vs-label {
  font-family: "Pixelify Sans", system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px #000 !important;
  text-align: center !important;
  max-width: 104px !important;
}
.vs-label small { display: block !important; font-size: 0.6rem !important; opacity: .85 !important; }
.vs-burst {
  position: absolute !important;
  left: 50%; top: 50%;
  width: 0; height: 0; z-index: 3;
}
.vs-spark {
  position: absolute !important;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 8px #ff9f1c;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0);
  animation: vsSpark .55s ease-out forwards;
}
@keyframes vsSpark {
  0% { transform: rotate(var(--a)) translateY(0) scale(0); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); opacity: 0; }
}

.foe-team {
  z-index: 12 !important;
  top: 44px !important;
  right: 8px !important;
}

/* ===== v91 layout fix: 6 slots + enemy inside field + heal ===== */
.scene-overlay,
#scene,
.battle-scene {
  overflow: visible !important;
}

/* Team rail: 6 slots fully visible */
.team-rail {
  position: absolute !important;
  left: 4px !important;
  top: 36px !important;
  bottom: 56px !important;
  width: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  z-index: 12 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
button.rail-slot,
.rail-slot {
  flex: 0 0 auto !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 2px 1px 3px !important;
  border-radius: 10px 10px 16px 10px !important;
  border: 2px solid #2c3355 !important;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px),
    linear-gradient(165deg, #3d446c, #1e243f) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
button.rail-slot.active,
.rail-slot.active {
  border-color: #f0c230 !important;
  box-shadow: 0 0 0 1.5px #f0c230, 0 0 8px rgba(240,194,48,.4) !important;
}
.rail-slot img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
}
.rail-slot span {
  font-size: 0.5rem !important;
  line-height: 1 !important;
  margin-top: -2px !important;
}
.rail-hp {
  left: 3px !important; right: 3px !important;
  bottom: 9px !important;
  height: 2.5px !important;
}
.rail-xp {
  left: 3px !important; right: 3px !important;
  bottom: 4px !important;
  height: 2px !important;
}

/* Field: keep both mons inside the map frame */
.battle-field {
  position: absolute !important;
  left: 54px !important;
  right: 10px !important;
  top: 28px !important;
  bottom: 52px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.battle-mon {
  max-width: 42% !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  pointer-events: none !important;
}
.battle-mon.ally {
  align-self: flex-end !important;
  transform: translate(4px, 0) !important;
  margin-bottom: 2px !important;
}
.battle-mon.enemy {
  align-self: flex-end !important;
  /* meter al enemigo DENTRO del mapa (antes se salía por la derecha) */
  transform: translate(-18px, -6px) !important;
  margin-right: 4px !important;
}
.battle-mon img.mon-sprite,
#ally-img,
#enemy-img {
  max-width: min(112px, 36vw) !important;
  max-height: min(112px, 28vh) !important;
  width: var(--art, 68px) !important;
  height: var(--art, 68px) !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.28)) !important;
}
#enemy-side { visibility: inherit; }

/* Centro Pokémon — máquina más parecida al original */
.heal-fx {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}
.heal-fx .hf-dim {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(8,12,28,.55), rgba(8,12,28,.72)),
    url("assets/bg/scenes/50-centre-pokemon-v2-710x400.webp") center/cover no-repeat !important;
  opacity: 1 !important;
}
.heal-fx .hm-stage {
  position: relative !important;
  z-index: 2 !important;
  width: min(92%, 320px) !important;
  padding: 14px 14px 12px !important;
  border-radius: 16px !important;
  border: 3px solid #3d7ea6 !important;
  background:
    linear-gradient(180deg, #e8f4fc 0%, #c5e0f2 40%, #9ec4e0 100%) !important;
  box-shadow:
    0 0 0 2px #1a3a55,
    0 10px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  color: #123 !important;
}
.heal-fx .hm-title {
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: .02em !important;
  color: #0b3d66 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
}
.heal-fx .hm-machine {
  background: linear-gradient(180deg, #f7fbff, #d7ebf8) !important;
  border: 2px solid #5a91b8 !important;
  border-radius: 12px !important;
  padding: 12px 10px !important;
  box-shadow: inset 0 2px 6px rgba(0,40,80,.12) !important;
}
.heal-fx .hm-tray {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  justify-items: center !important;
}
.heal-fx .hm-slot {
  width: 36px !important;
  height: 40px !important;
  border-radius: 8px !important;
  background: #8eb8d4 !important;
  border: 2px solid #3d6f92 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15) !important;
}
.heal-fx .hm-slot img {
  width: 22px !important;
  height: 22px !important;
  image-rendering: pixelated !important;
  margin-bottom: 2px !important;
  transition: transform .2s ease !important;
}
.heal-fx .hm-slot.drop img {
  animation: hmDrop .35s ease-out both !important;
}
.heal-fx .hm-slot.on {
  background: #b8e0a8 !important;
  border-color: #4a8a3a !important;
  box-shadow: 0 0 10px rgba(100,220,80,.45), inset 0 2px 4px rgba(0,0,0,.1) !important;
}
.heal-fx .hm-slot.heal img {
  filter: brightness(1.4) drop-shadow(0 0 6px #7dff7a) !important;
}
.heal-fx .hm-pad {
  display: block !important;
  width: 18px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: #2a5570 !important;
  margin-bottom: 3px !important;
}
.heal-fx .hm-msg {
  text-align: center !important;
  margin-top: 10px !important;
  font-weight: 700 !important;
  color: #0b3d66 !important;
  font-size: 0.85rem !important;
}
.heal-fx .hm-skip {
  display: block !important;
  margin: 10px auto 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 2px solid #2a6a9a !important;
  background: #fff !important;
  color: #0b3d66 !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
}
@keyframes hmDrop {
  0% { transform: translateY(-18px) scale(.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Cap sprite size formula slightly so large mons don't stick out */
.battle-mon.enemy img.mon-sprite {
  transform-origin: bottom center !important;
}

/* v93: Cueva Celeste desbloqueada */
.pg-secret.open { cursor: pointer; background: linear-gradient(90deg, #2a1f4a, #1b2235); border-left-color: #c9a0ff; color: #e8dcff; }
.pg-secret.open small { color: #c9a0ff; }
.pg-secret i { margin-left: auto; font-style: normal; font-size: 1.6rem; color: #c9a0ff; }

/* v96: más estados */
.st-badge.brn { background: #f0703a; }
.st-badge.slp { background: #7d869c; }
.st-badge.frz { background: #6ad0f0; color: #06323f; }
.st-badge.cnf { background: #ff8fd0; color: #4a0f33; }

/* v98: título y barra inferior como el original */
.ttl-actions { width: min(92vw, 440px); }
.ttl-primary { font-size: 1.75rem !important; padding: 1.1rem .8rem !important; letter-spacing: 1px; width: 100%; }
.ttl-row { display: flex; gap: 10px; width: 100%; }
.ttl-row .ttl-btn { flex: 1; font-size: 1.25rem; padding: 1rem .4rem; position: relative; white-space: nowrap; }
.ttl-new { position: absolute; top: -12px; right: -4px; background: #ffcb05; color: #3a2a00; font-style: normal; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.ttl-log ul { margin: .3rem 0 0; padding-left: 1.1rem; color: #dfe3f5; font-size: 1.05rem; line-height: 1.3; }
.ttl-log small { display: block; color: #9aa3bb; font-size: .95rem; }
.ttl-btn { font-size: 1.15rem; }

#bottom-nav { gap: 6px; padding: 8px; background: #20222e; border-color: #3a4160; }
#bottom-nav button { flex: 1 1 0; height: 62px; padding: 0; border-radius: 14px; background: #272a3a; color: #fff; gap: 2px; transition: flex-grow .22s ease; overflow: hidden; }
#bottom-nav button em { display: none; }
#bottom-nav .nav-ico { height: 32px; width: auto; max-width: 78%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#bottom-nav button.active { flex: 2.6 1 0; background: #e5534f; box-shadow: inset 0 -5px 0 #a8262e, 0 0 0 0 transparent; }
#bottom-nav button.active .nav-ico { height: 34px; }
#bottom-nav button.active em { display: block; font-family: "Jersey 10", var(--font-ui), sans-serif; font-size: 1.05rem; letter-spacing: .5px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); line-height: 1; }
#enemy-img[data-loading="1"] { opacity: 0 !important; }
/* sin dibujo (src vacío) no se pinta nada: evita el recuadro transparente antes de que salga el rival */
#enemy-img:not([src]), #enemy-img[src=""], #ally-img:not([src]), #ally-img[src=""] { visibility: hidden !important; }

/* v99: elección del inicial animada (plataformas, balls, silueta) */
.starter-select { background: #080b18 !important; overflow: hidden; justify-content: flex-start; padding-top: 18vh; gap: 0; }
.sx-stars { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background:
    radial-gradient(1px 1px at 12% 18%, #9fb4ff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, #8aa0e8 50%, transparent 51%), radial-gradient(1px 1px at 90% 66%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 30%, #9fb4ff 50%, transparent 51%), radial-gradient(1px 1px at 7% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 84%, #8aa0e8 50%, transparent 51%), radial-gradient(1px 1px at 44% 8%, #fff 50%, transparent 51%); }
.starter-select .starter-title { font-size: .9rem; color: #dbe4ff; margin: 0 0 14vh; position: relative; z-index: 2; }
.starters.sx { display: flex; justify-content: space-around; width: 100%; max-width: 460px; gap: 0; margin: 0; position: relative; z-index: 2; }
.sx-slot { position: relative; width: 31%; height: 150px; padding: 0; min-width: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; }
.sx-slot:disabled { cursor: default; }
.sx-pad { position: absolute; left: 50%; bottom: 6px; width: 92px; height: 24px; transform: translateX(-50%) scale(.5); opacity: 0; border-radius: 50%;
  background: radial-gradient(#7fb0ff 1px, transparent 1.6px) 0 0 / 4px 4px, #1b3a86; border: 2px solid #4f8dff; transition: opacity .35s, transform .35s; image-rendering: pixelated; }
.sx-slot.pad-on .sx-pad { opacity: 1; transform: translateX(-50%) scale(1); }
.sx-ball { position: absolute; left: 50%; bottom: 14px; width: 28px; height: 28px; display: none; image-rendering: pixelated; z-index: 3; transform: translate(-50%, -520px); }
.sx-mon { position: absolute; left: 50%; bottom: 14px; width: 100px; height: 100px; transform: translateX(-50%); object-fit: contain; image-rendering: pixelated; visibility: hidden; z-index: 2; }
.sx-mon.sil { filter: brightness(0) invert(1); }
.sx-mon:not(.sil) { transition: filter .4s; }
.sx-mon.idle { animation: sxBob 1.2s ease-in-out infinite; }
.sx-slot:nth-child(2) .sx-mon.idle { animation-delay: .25s; } .sx-slot:nth-child(3) .sx-mon.idle { animation-delay: .5s; }
@keyframes sxBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.sx-slot.ready:hover .sx-pad, .sx-slot.selected .sx-pad { border-color: #ffd54a; box-shadow: 0 0 14px #ffd54a88; }
.sx-slot.selected .sx-mon { filter: drop-shadow(0 0 6px #ffd54a); }
.sx-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.sx-dialog { position: relative; z-index: 3; width: min(90vw, 460px); min-height: 58px; margin-top: 22px; padding: 16px 18px; border: 2px solid #3a4160; border-radius: 12px; background: #23263a; color: #fff; font-size: 1.2rem; text-align: left; }
.sx-dialog em { position: absolute; right: 12px; bottom: 6px; font-style: normal; font-size: .7rem; color: #9aa3bb; }
.sx-go { position: relative; z-index: 3; margin-top: 18px; }
.sx-skip { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); z-index: 5; }
.sx-mon { width: 132px; height: 132px; bottom: 12px; }
.sx-ball { width: 32px; height: 32px; }
.sx-skip { width: auto !important; padding: .5rem 1.1rem !important; }
.sx-slot { height: 190px; }
.sx-mon { width: 200px; height: 200px; bottom: -22px; }
.sx-slot { height: 150px; }
.sx-mon { width: auto; height: auto; bottom: 20px; max-width: 150px; }
/* ───── Logros ───── */
.ach-screen {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6,8,18,.72);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.ach-panel {
  width: 100%; max-width: 480px; max-height: 92vh;
  overflow: auto;
  background: linear-gradient(180deg, #2a2210 0%, #141826 28%, #101522 100%);
  border-radius: 18px 18px 0 0;
  border: 2px solid #c9a22755;
  color: #eef1ff;
  font-family: "Pixelify Sans", system-ui, sans-serif;
  padding: 12px 12px 88px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
.ach-head { position: relative; padding: 4px 28px 8px 4px; }
.ach-head h1 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.ach-x {
  position: absolute; top: 0; right: 0;
  border: 0; background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer;
}
.ach-help {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #c9a227; background: #1a2030; color: #f0d878;
  font-size: .7rem; font-weight: 800; cursor: pointer;
}
.ach-sum { margin: 6px 0 0; font-size: .78rem; color: #c8cde6; }
.ach-sum b { color: #f0d878; }
.ach-tip {
  margin-top: 8px; padding: 10px 12px; border-radius: 12px;
  background: #151a2c; border: 1px solid #2c3558; font-size: .78rem; line-height: 1.45;
}
.ach-tabs {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0 14px;
}
.ach-tabs button {
  border: 2px solid #2a3355; border-radius: 14px; padding: 10px 8px;
  background: #171d32; color: #dfe3f5; cursor: pointer; text-align: left;
}
.ach-tabs button.on {
  border-color: #e0c04a;
  background: linear-gradient(180deg, #3a3420, #241e12);
}
.ach-tabs span { display: block; font-weight: 800; font-size: .85rem; }
.ach-tabs small { display: block; color: #f0d878; font-size: .7rem; margin-top: 2px; }
.ach-bar {
  display: block; height: 4px; border-radius: 3px; background: #0e1324; margin-top: 6px; overflow: hidden;
}
.ach-bar > i { display: block; height: 100%; background: linear-gradient(90deg,#e8c84a,#f0a020); }
.ach-sec { margin-bottom: 16px; }
.ach-sec h2 {
  margin: 0 0 8px; font-size: .72rem; letter-spacing: .04em; color: #9aa3c7;
  display: flex; justify-content: space-between;
}
.ach-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  background: #151a2c; border: 1px solid #2a3355; border-radius: 14px;
  padding: 10px; margin-bottom: 8px;
}
.ach-row.done { border-color: #2f5a40; background: #121c22; }
.ach-ico {
  width: 48px; height: 48px; border-radius: 12px; background: #0e1324;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ach-ico img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.ach-lock { opacity: .7; font-size: .9rem; }
.ach-meta small { display: block; color: #8b93b8; font-size: .62rem; letter-spacing: .06em; }
.ach-meta b { display: block; font-size: .82rem; font-weight: 600; line-height: 1.3; margin: 2px 0 4px; }
.ach-prog { height: 6px; border-radius: 4px; background: #0e1324; overflow: hidden; }
.ach-prog > i { display: block; height: 100%; }
.ach-prog > i.hot { background: #e8c84a; }
.ach-prog > i.cold { background: #c44; }
.ach-prog > i.ok { background: #3dcc6e; }
.ach-count { font-size: .68rem; color: #aab2d4; }
.ach-ok { color: #5ddea0; font-size: .72rem; font-style: normal; }
.ach-equip {
  border: 0; border-radius: 10px; padding: 8px 10px;
  background: #24304e; color: #fff; font-weight: 700; font-size: .68rem; cursor: pointer;
  white-space: nowrap;
}
.ach-scenes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ach-scene {
  position: relative; border: 0; border-radius: 12px; overflow: hidden;
  background: #151a2c; min-height: 96px; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 8px; text-align: left;
}
.ach-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85;
}
.ach-scene span { position: relative; z-index: 1; font-weight: 700; font-size: .78rem; text-shadow: 0 1px 3px #000; }
.ach-scene i { position: absolute; top: 8px; right: 8px; z-index: 1; }
.ach-scene.locked { opacity: .75; cursor: default; }
.ach-scene .sil {
  position: absolute; inset: 12px; background: #0a0e18; border-radius: 8px;
  opacity: .9;
}


/* Aspectos y marcos bloqueados hasta cumplir su logro */
.me-item.locked { opacity: .48; filter: grayscale(.8); cursor: not-allowed; }
.me-item.locked img { opacity: .55; }
.me-item.frame.locked { border-style: dashed; }

.ach-frame-reward { display:grid; place-items:center; width:42px; height:42px; border:3px solid #e8c050; border-radius:12px; color:#ffe58a; font-size:1.8rem; box-shadow:0 0 10px #e8c05055; }


/* Nodo especial para encuentros legendarios en el mapa de Kanto */
.rnode.legend .rnode-legend {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #ffe58a;
  font-size: 25px;
  line-height: 1;
  text-shadow: 0 0 7px #f4c542, 0 0 14px #e8a91c;
}
.rnode.legend.done .rnode-legend { color: #72d6a1; text-shadow: 0 0 7px #36b87b; }