@font-face {
  font-family: 'Jersey 10';
  src: url('../assets/fonts/Jersey10.ttf') format('truetype');
  font-weight: 400 700;
  font-display: block;
  size-adjust: 128%; /* Jersey es más pequeña: así ocupa lo mismo que la fuente anterior */
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1b2a4a;
  color: #fff;
  font-family: 'Jersey 10', system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
canvas { display: block; touch-action: none; }

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20, 30, 70, 0.55), rgba(10, 15, 40, 0.85));
  overflow-y: auto;
}
.hidden { display: none !important; }

.panel {
  width: min(720px, 100%);
  max-height: 100%;
  overflow-y: auto;
  text-align: center;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(#2d4a8f, #1e3266);
  border: 4px solid #0c1838;
  box-shadow: 0 10px 0 #0c1838, 0 20px 40px rgba(0, 0, 0, 0.5);
}

h1 {
  margin: 0 0 4px;
  font-size: clamp(36px, 8vw, 64px);
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 4px 0 #0c1838, 0 0 2px #000;
}
h1 span { color: #ffcf2e; margin-left: 10px; }
h1.win { color: #ffcf2e; }
h1.lose { color: #ff6b6b; }

.mode { margin: 0 0 14px; color: #bcd0ff; font-family: 'Jersey 10', system-ui, sans-serif; font-size: 14px; }

#roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 10px;
}
.card {
  font: inherit;
  color: #fff;
  cursor: pointer;
  padding: 8px 6px 10px;
  border-radius: 14px;
  border: 3px solid #0c1838;
  background: linear-gradient(#4b6fc2, #34529c);
  box-shadow: 0 4px 0 #0c1838;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.08s;
}
.card:hover { transform: translateY(-2px); }
.card.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
.card img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.card .nm { font-size: 15px; }
.types { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.types i {
  font-style: normal;
  font-family: 'Jersey 10', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #fff;
  padding: 1px 6px;
  border-radius: 6px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#info {
  margin: 14px 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
  text-align: left;
  font-family: 'Jersey 10', system-ui, sans-serif;
}
#info h3 { margin: 0 0 4px; font-family: 'Jersey 10', system-ui, sans-serif; font-weight: 400; font-size: 22px; }
#info h3 small { font-size: 14px; color: #ffcf2e; margin-left: 6px; }
#info p { margin: 4px 0; font-size: 14px; color: #dfe7ff; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #fff; margin: 6px 0; }

button { font: inherit; cursor: pointer; }
.big, #back {
  color: #3a2500;
  font-size: 26px;
  padding: 10px 40px;
  border-radius: 16px;
  border: 4px solid #0c1838;
  background: linear-gradient(#ffe066, #f5a815);
  box-shadow: 0 6px 0 #0c1838;
}
.big:active, #back:active { transform: translateY(4px); box-shadow: 0 2px 0 #0c1838; }
#back { font-size: 18px; background: linear-gradient(#9fb6ef, #6f8bd6); color: #0c1838; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.legal { margin: 14px 0 0; font-family: 'Jersey 10', system-ui, sans-serif; font-size: 11px; color: #9fb0d8; line-height: 1.5; }
.legal a { color: #cfdcff; }

#scores { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: 'Jersey 10', system-ui, sans-serif; font-size: 14px; }
#scores th { font-weight: 600; color: #9fb0d8; padding: 4px; }
#scores td { padding: 6px 4px; }
#scores td:first-child { text-align: left; }
#scores tr.blue td { background: rgba(60, 140, 255, 0.2); }
#scores tr.red td { background: rgba(255, 70, 70, 0.2); }
#scores tr.me td { font-weight: 700; color: #7dff8f; }

#help .mobile { display: none; }
@media (pointer: coarse) {
  #help .pc { display: none; }
  #help .mobile { display: inline; }
}
#help {
  position: fixed;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  font-family: 'Jersey 10', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
}
#mute {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  font-size: 18px;
}

/* Aviso de girar el móvil (solo pantallas táctiles en vertical) */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #1b2a4a;
  font-size: 24px;
  text-align: center;
}
#rotate .phone {
  width: 54px;
  height: 92px;
  border: 5px solid #ffcf2e;
  border-radius: 12px;
  animation: turn 1.8s ease-in-out infinite;
}
@keyframes turn {
  0%, 25% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (pointer: coarse) and (orientation: portrait) {
  #rotate { display: flex; }
}

/* Móvil en horizontal: pantallas bajas, menú más compacto */
@media (max-height: 500px) {
  .screen { padding: 8px; align-items: flex-start; }
  .panel { padding: 10px 14px; border-width: 3px; }
  h1 { font-size: 34px; }
  .mode { margin-bottom: 8px; font-size: 12px; }
  #roster { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .card { padding: 4px 3px 6px; gap: 2px; }
  .card img { width: 44px; height: 44px; }
  .card .nm { font-size: 12px; }
  #info { margin: 8px 0; padding: 6px 10px; }
  #info h3 { font-size: 17px; }
  #info p { font-size: 12px; margin: 2px 0; }
  .stats { margin: 2px 0; font-size: 12px; }
  .big { font-size: 20px; padding: 6px 30px; }
  #back { font-size: 15px; padding: 6px 20px; }
  .legal { margin-top: 8px; font-size: 10px; }
  #scores { font-size: 12px; margin-top: 6px; }
  #scores td { padding: 3px 4px; }
  .row { margin-top: 10px; }
  #help { top: 70px; font-size: 11px; }
}

/* Selector de dificultad */
#difficulty { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 0 0 14px; font-family: 'Jersey 10', system-ui, sans-serif; font-size: 13px; color: #bcd0ff; }
.diff {
  color: #dfe7ff;
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 10px;
  border: 3px solid #0c1838;
  background: #34529c;
  box-shadow: 0 3px 0 #0c1838;
}
.diff.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
@media (max-height: 500px) {
  #difficulty { margin-bottom: 8px; }
  .diff { font-size: 13px; padding: 3px 10px; }
}

/* Selector de modo */
#modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 6px; }
.mode-btn {
  font: inherit;
  color: #dfe7ff;
  font-size: 12px;
  padding: 5px 3px 6px;
  border-radius: 12px;
  border: 3px solid #0c1838;
  background: #34529c;
  box-shadow: 0 3px 0 #0c1838;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.05;
}
.mode-btn img { width: 36px; height: 36px; image-rendering: pixelated; border-radius: 8px; }
.mode-btn.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
#mode-desc { min-height: 2.4em; }
@media (max-height: 500px) {
  #modes { gap: 4px; }
  .mode-btn { font-size: 10px; padding: 3px 2px 4px; }
  .mode-btn img { width: 26px; height: 26px; }
  #mode-desc { min-height: 0; }
}

/* ===================================================================== LOBBY */
#lobby { padding: 0; background: radial-gradient(ellipse at 50% 55%, rgba(30, 50, 110, 0.35), rgba(8, 14, 38, 0.82)); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); align-items: stretch; }
.lb {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(220px, 1.4fr) minmax(190px, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "top top top" "left center right" "bottom bottom bottom";
  gap: 10px;
  padding: 10px 14px 8px 14px;
}
.lb-top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-title { font-size: 30px; text-shadow: 0 3px 0 #0c1838; }
.lb-title span { color: #ffcf2e; margin-left: 6px; }
.lb-money { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 6px; border-radius: 20px;
  background: rgba(10, 15, 40, 0.75); border: 3px solid #0c1838; font-size: 18px;
}
.pill img, .money img { width: 22px; height: 22px; image-rendering: pixelated; }
.money { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.money img { width: 18px; height: 18px; }

.lb-left, .lb-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.lb-left { grid-area: left; }
.lb-right { grid-area: right; justify-content: flex-end; }
.lb-btn {
  position: relative; color: #fff; font-size: 20px; padding: 10px 14px; text-align: left;
  border-radius: 14px; border: 4px solid #0c1838; box-shadow: 0 5px 0 #0c1838;
  background: linear-gradient(#4b6fc2, #34529c);
}
.lb-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #0c1838; }
.badge {
  position: absolute; right: -8px; top: -8px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: #ff4d4d; border: 3px solid #0c1838; font-size: 14px; line-height: 18px; text-align: center;
}
.lb-box { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; border-radius: 14px; background: rgba(10, 15, 40, 0.6); border: 3px solid #0c1838; }
.lb-box h4 { margin: 0 0 6px; font-weight: 400; color: #ffcf2e; }
#chests { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.chest-btn {
  color: #fff; font-size: 11px; padding: 4px 2px; border-radius: 10px; border: 3px solid #0c1838;
  background: rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: wobble 2.4s ease-in-out infinite;
}
.chest-btn img { width: 44px; height: 44px; image-rendering: pixelated; }
.chest-great { background: rgba(58, 122, 216, 0.25); }
.chest-ultra { background: rgba(248, 200, 48, 0.22); }
@keyframes wobble { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-6deg); } 88% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
.empty { margin: 4px 0; font-size: 12px; color: #9fb0d8; font-family: "Jersey 10", system-ui, sans-serif; }

.lb-center {
  grid-area: center; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; padding: 0; min-height: 0;
}
#hero-cv { width: min(100%, 300px); height: auto; image-rendering: pixelated; }
.hero-plate {
  display: flex; align-items: center; gap: 10px; padding: 6px 16px; margin-top: -6px;
  border-radius: 14px; background: rgba(10, 15, 40, 0.8); border: 3px solid #0c1838; font-size: 22px;
}
.hero-plate b { font-weight: 400; }
.hero-plate span { font-size: 16px; color: #ffcf2e; }
.lb-center .hint { margin: 6px 0 4px; font-size: 13px; color: #cfe0ff; opacity: 0.8; }

.mode-card {
  display: flex; align-items: center; gap: 10px; text-align: left; color: #fff; padding: 8px 10px;
  border-radius: 14px; border: 4px solid #0c1838; box-shadow: 0 5px 0 #0c1838; background: linear-gradient(#3a5aa8, #26407c);
}
.mode-card img { width: 52px; height: 52px; image-rendering: pixelated; border-radius: 10px; }
.mode-card span { display: flex; flex-direction: column; }
.mode-card small { color: #9fb0d8; font-size: 12px; }
.mode-card b { font-weight: 400; font-size: 19px; }
.lb-right .big { width: 100%; font-size: 30px; padding: 14px 10px; }

.lb-bottom { grid-area: bottom; display: flex; align-items: center; gap: 14px; }
.tokens {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 14px;
  background: rgba(10, 15, 40, 0.75); border: 3px solid #0c1838; min-width: 260px;
}
.tokens img { width: 30px; height: 30px; image-rendering: pixelated; }
.tok-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tok-info small { font-size: 11px; color: #9fb0d8; }
.bar { display: block; height: 10px; border-radius: 6px; background: #0c1838; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(#ffe066, #f5a815); }
.lb-bottom .legal { margin: 0; flex: 1; text-align: right; }

/* ===================================================================== PANELES */
.panel.wide { width: min(980px, 100%); }
.pn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pn-head h2 { margin: 0; font-weight: 400; font-size: 28px; flex: 1; text-align: left; }
.pn-head h2 small { font-size: 16px; color: #9fb0d8; }
.back {
  font-size: 22px; width: 44px; height: 44px; border-radius: 12px; color: #fff;
  border: 3px solid #0c1838; background: #34529c; box-shadow: 0 3px 0 #0c1838;
}
.sub { margin: 0 0 10px; color: #bcd0ff; font-size: 14px; text-align: left; }

/* colección */
#col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
#col-grid .card { position: relative; border-color: var(--rar); }
#col-grid .card img.pt { width: 80px; height: 80px; }
#col-grid .cost img { width: 18px; height: 18px; background: none; border-radius: 0; }
#col-grid .lv { font-size: 13px; color: #ffcf2e; }
#col-grid .card.sel .lv { color: #3a2500; }
#col-grid .rar { font-size: 11px; color: var(--rar); }
#col-grid .card.sel .rar { color: #3a2500; }
#col-grid .card.locked img.pt { filter: grayscale(1) brightness(0.55); }
#col-grid .card.locked { background: linear-gradient(#3a4466, #283050); }
#col-grid .lock { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 30px; filter: drop-shadow(0 2px 0 #000); }
#col-grid .cost { font-size: 14px; }

/* ficha */
.rar-tag { padding: 3px 10px; border-radius: 8px; color: #0c1838; font-size: 14px; }
.dt { display: grid; grid-template-columns: 240px 1fr; gap: 16px; text-align: left; }
.dt-left { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
#dt-hero { border-radius: 16px; background: radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)); width: 100%; }
#dt-hero.locked canvas { filter: grayscale(1) brightness(0.5); }
#dt-cv { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.dt-left small { color: #ffcf2e; font-size: 14px; }
#dt-desc { margin: 0; font-size: 14px; color: #dfe7ff; }
#dt-level { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 18px; }
#dt-level b { font-weight: 400; white-space: nowrap; }
.lvbar { display: flex; gap: 3px; flex: 1; }
.lvbar i { flex: 1; height: 14px; border-radius: 3px; background: #0c1838; border: 2px solid #0c1838; }
.lvbar i.on { background: linear-gradient(#ffe066, #f5a815); }
#dt-stats { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 8px; }
#dt-stats td { padding: 4px 8px; background: rgba(0, 0, 0, 0.2); }
#dt-stats td:last-child { text-align: right; }
#dt-stats em { font-style: normal; color: #7dff8f; font-size: 13px; }
#dt-moves { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.move { padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; font-size: 13px; color: #cfdcff; }
.move b { font-weight: 400; font-size: 15px; color: #fff; }
.move.super b { color: #ffcf2e; }
#dt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.act {
  font-size: 17px; padding: 8px 16px; border-radius: 12px; border: 3px solid #0c1838; box-shadow: 0 4px 0 #0c1838;
  display: inline-flex; align-items: center; gap: 6px;
}
.act.gold { background: linear-gradient(#ffe066, #f5a815); color: #3a2500; }
.act.blue { background: linear-gradient(#7aa8ff, #3d6fd8); color: #fff; }
.act.gray, .act:disabled { background: #4a5878; color: #b8c4e0; box-shadow: 0 2px 0 #0c1838; cursor: default; }
.need { margin: 0; font-size: 13px; color: #ffb0b0; width: 100%; }
.pop { animation: pop 0.45s ease; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); filter: brightness(1.6); } 100% { transform: scale(1); } }

/* modos */
#mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.mode-card2 {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; color: #fff; text-align: center;
  border-radius: 14px; border: 4px solid #0c1838; box-shadow: 0 4px 0 #0c1838; background: linear-gradient(#4b6fc2, #34529c);
}
.mode-card2 img { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 10px; }
.mode-card2 b { font-weight: 400; font-size: 18px; }
.mode-card2 span { font-size: 12px; color: #cfdcff; }
.mode-card2.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
.mode-card2.sel span { color: #5a3a00; }
.diffs { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 14px; color: #bcd0ff; }

/* misiones */
#ms-list { display: flex; flex-direction: column; gap: 8px; }
.mission { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); text-align: left; }
.mission img { width: 36px; height: 36px; image-rendering: pixelated; }
.ms-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ms-body b { font-weight: 400; font-size: 15px; }
.ms-body small { font-size: 12px; color: #9fb0d8; }
.mission.done { background: rgba(255, 210, 60, 0.18); }

/* cofre */
#chestopen { background: radial-gradient(circle at 50% 40%, rgba(60, 80, 160, 0.9), rgba(8, 12, 30, 0.97)); cursor: pointer; }
.chest-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chest-stage h2 { margin: 0; font-weight: 400; font-size: 30px; text-shadow: 0 3px 0 #0c1838; }
#chest-cv { width: min(320px, 70vw); height: auto; image-rendering: pixelated; }
#chest-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 10px; }
.reward {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 14px;
  background: rgba(10, 15, 40, 0.8); border: 3px solid #0c1838; animation: pop 0.45s ease;
}
.reward img { width: 48px; height: 48px; image-rendering: pixelated; }
.reward b { font-weight: 400; font-size: 22px; color: #ffcf2e; }
.reward span { font-size: 12px; color: #cfdcff; }
.reward.new { border-color: #ffcf2e; box-shadow: 0 0 20px rgba(255, 210, 60, 0.6); }
.reward.new img { width: 64px; height: 64px; border-radius: 10px; }
#chest-hint { color: #cfdcff; font-size: 15px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }

/* final de partida */
#end-rewards { margin: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
#end-rewards .tokens { min-width: min(360px, 100%); }
.got { margin: 0; color: #ffcf2e; font-size: 15px; }

/* pantallas bajas (móvil en horizontal) */
@media (max-height: 500px) {
  .lb { gap: 6px; padding: 6px 10px 4px 10px; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.2fr) minmax(170px, 1fr); }
  .lb-title { font-size: 22px; }
  .pill { font-size: 15px; padding: 2px 10px 2px 4px; }
  .lb-btn { font-size: 16px; padding: 6px 10px; }
  .chest-btn img { width: 34px; height: 34px; }
  #chests { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
  .hero-plate { font-size: 18px; padding: 3px 12px; }
  .lb-center .hint { display: none; }
  #hero-cv { width: min(100%, 220px); }
  .mode-card img { width: 38px; height: 38px; }
  .mode-card b { font-size: 15px; }
  .lb-right .big { font-size: 24px; padding: 8px; }
  .lb-bottom .legal { display: none; }
  .tokens { padding: 3px 10px; }
  .tokens img { width: 22px; height: 22px; }
  .dt { grid-template-columns: 170px 1fr; gap: 10px; }
  #dt-stats { font-size: 13px; }
  #dt-stats td { padding: 2px 6px; }
  .move { padding: 3px 8px; font-size: 11px; }
  .act { font-size: 14px; padding: 5px 12px; }
  #col-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  #col-grid .card img.pt { width: 56px; height: 56px; }
  #col-grid .lock { top: 20px; }
  .pn-head h2 { font-size: 22px; }
  .back { width: 36px; height: 36px; font-size: 18px; }
  #mp-grid { grid-template-columns: repeat(5, 1fr); }
  .mode-card2 span { display: none; }
  .mode-card2 img { width: 40px; height: 40px; }
}

/* pantallas estrechas (vertical en PC) */
@media (max-width: 640px) and (min-height: 501px) {
  .lb { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; grid-template-areas: "top" "center" "right" "left" "bottom"; overflow-y: auto; padding-left: 14px; }
  .lb-bottom { flex-direction: column; }
  .lb-bottom .legal { text-align: center; }
  .dt { grid-template-columns: 1fr; }
}

/* ===================================================================== BOTÓN DEL COFRE */
.chest-widget {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; text-align: left; color: #fff;
  border-radius: 16px; border: 4px solid #0c1838; box-shadow: 0 5px 0 #0c1838;
  background: linear-gradient(#2c3f78, #1d2b58);
}
.chest-widget:active { transform: translateY(3px); box-shadow: 0 2px 0 #0c1838; }
.chest-widget.ready { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
.cw-ball { position: relative; width: 64px; height: 64px; flex: none; border-radius: 12px; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; }
.cw-ball img { width: 56px; height: 56px; image-rendering: pixelated; }
.chest-widget.ready .cw-ball img { animation: wobble 1.6s ease-in-out infinite; }
.cw-badge {
  position: absolute; right: -10px; top: -10px; min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: 14px; background: #ff4d4d; color: #fff; border: 3px solid #0c1838;
  font-size: 16px; line-height: 22px; text-align: center; box-shadow: 0 2px 0 #0c1838;
}
.cw-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cw-info b { font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-info small { font-size: 12px; opacity: 0.85; }
.cw-info .bar { height: 12px; }

/* ===================================================================== APERTURA DEL COFRE */
#chestopen { background: radial-gradient(circle at 50% 42%, #2a3c84, #0a0f26 75%); cursor: pointer; padding: 0; }
#chest-fx { position: absolute; inset: 0; image-rendering: pixelated; }
.chest-ui { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 16px 22px; pointer-events: none; }
.chest-ui > * { pointer-events: auto; }
.chest-ui h2 { margin: 0; font-weight: 400; font-size: 32px; text-shadow: 0 3px 0 #0c1838; }
#chest-reward { flex: 1; display: flex; align-items: center; justify-content: center; }
#chest-summary { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#chest-summary:empty { display: none; }
#chest-buttons { margin-top: 10px; }
.reward {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 14px;
  background: rgba(10, 15, 40, 0.85); border: 3px solid #0c1838; animation: pop 0.45s ease;
}
.reward.large { padding: 16px 30px; border-width: 4px; animation: rise 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.reward.large img { width: 84px; height: 84px; }
.reward.large b { font-size: 34px; }
.reward.large span { font-size: 16px; }
.reward.large.new img { width: 120px; height: 120px; }
@keyframes rise { 0% { transform: translateY(40px) scale(0.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
#chest-hint { margin: 8px 0 0; }

/* misiones: premio */
.ms-reward { display: flex; flex-direction: column; align-items: center; min-width: 64px; font-size: 13px; color: #ffcf2e; }
.ms-reward img { width: 30px; height: 30px; image-rendering: pixelated; }

@media (max-height: 500px) {
  .cw-ball { width: 46px; height: 46px; }
  .cw-ball img { width: 40px; height: 40px; }
  .cw-info b { font-size: 13px; }
  .chest-ui h2 { font-size: 24px; }
  .reward.large img { width: 56px; height: 56px; }
  .reward.large.new img { width: 80px; height: 80px; }
  .reward.large b { font-size: 26px; }
  .reward img { width: 34px; height: 34px; }
}

.sum { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop 0.4s ease; }
.sum h3 { margin: 0; font-weight: 400; font-size: 22px; color: #ffcf2e; text-shadow: 0 2px 0 #0c1838; }
.sum-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ===================================================================== PERFIL EN EL LOBBY */
.profile-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; color: #fff; text-align: left;
  border-radius: 14px; border: 3px solid #0c1838; background: rgba(10, 15, 40, 0.8);
}
.profile-chip > img { width: 38px; height: 38px; border-radius: 10px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.1); }
.profile-chip span { display: flex; flex-direction: column; line-height: 1.1; }
.profile-chip b { font-weight: 400; font-size: 16px; }
.profile-chip small { display: flex; align-items: center; gap: 3px; color: #ffcf2e; font-size: 14px; }
.profile-chip small img, img.cup { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -2px; }
.lb-top { justify-content: flex-start; }
.lb-top .lb-title { flex: 1; text-align: center; }

/* menú de botones del lobby (2 columnas) */
.lb-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-menu .lb-btn { font-size: 15px; padding: 8px 8px; display: flex; align-items: center; gap: 6px; }
.lb-menu .lb-btn i { font-style: normal; font-size: 18px; }

/* pestañas */
.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tabs button {
  flex: 1; font-size: 16px; padding: 7px 8px; color: #dfe7ff; border-radius: 10px;
  border: 3px solid #0c1838; background: #2c3f78; box-shadow: 0 3px 0 #0c1838;
}
.tabs button.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }
.mock-note { margin: 0 0 8px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 200, 60, 0.15); color: #ffd98a; font-size: 12px; text-align: left; }

/* misiones y logros */
.mission.claimed { opacity: 0.55; }
.ach .ach-medal { position: relative; font-size: 28px; width: 40px; text-align: center; }
.ach .ach-medal small { position: absolute; bottom: -2px; right: 0; font-size: 11px; color: #ffcf2e; text-shadow: 0 1px 0 #000; }
.ach.t0 .ach-medal { filter: sepia(1) saturate(0.6) brightness(0.9); }
.ach.t1 .ach-medal { filter: grayscale(1) brightness(1.3); }
.ach-rw { display: flex; flex-direction: column; gap: 2px; min-width: 86px; }
.rw { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #ffcf2e; }
.rw img { width: 22px; height: 22px; image-rendering: pixelated; }
#ach-list { display: flex; flex-direction: column; gap: 8px; }

/* listas de jugadores y clanes */
.plist { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.prow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.prow.me { background: rgba(90, 200, 120, 0.25); border: 2px solid #5ad07a; }
.prow .pos { width: 28px; text-align: center; font-size: 18px; color: #ffcf2e; }
.prow .av { width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.08); }
.prow .av.big, .clan-head .av.big { width: 64px; height: 64px; }
.pinfo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pinfo b { font-weight: 400; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinfo small { font-size: 12px; color: #9fb0d8; }
.pcopas { display: flex; align-items: center; gap: 4px; color: #ffcf2e; font-size: 16px; }
.clanrow { cursor: pointer; }
.clanrow:hover { background: rgba(255, 255, 255, 0.1); }
.on { color: #5ad07a; }
.off { color: #8a94b0; }
.mini { width: 34px; height: 34px; border-radius: 10px; border: 3px solid #0c1838; background: #5a6a90; color: #fff; font-size: 16px; }
.mini.ok { background: #3aa858; }
.tagok { font-size: 12px; color: #9fb0d8; }
.sep { margin: 0; text-align: center; color: #9fb0d8; }
.search { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.search input, .form input, .form select, .chat-in input, .pf-name-row input {
  flex: 1; min-width: 140px; font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 10px;
  border: 3px solid #0c1838; background: #e8eeff; color: #0c1838;
}

/* clan */
.clan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; text-align: left; }
.clan-head > div { flex: 1; }
.clan-head p { margin: 0 0 4px; color: #dfe7ff; font-size: 14px; }
.clan-head small { color: #9fb0d8; font-size: 13px; }
.clan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 0; }
.clan-grid .plist { max-height: 52vh; overflow-y: auto; }
.chat { display: flex; flex-direction: column; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 3px solid #0c1838; min-height: 240px; max-height: 52vh; }
#chat-log { flex: 1; overflow-y: auto; padding: 8px 10px; text-align: left; font-family: "Jersey 10", system-ui, sans-serif; font-size: 14px; }
#chat-log p { margin: 0 0 6px; color: #dfe7ff; word-wrap: break-word; }
#chat-log p b { font-weight: 400; color: #7ab4fa; }
#chat-log p.mine b { color: #7dff8f; }
#chat-log p small { color: #6a7aa0; font-size: 11px; }
#chat-log p.sys { color: #ffcf2e; font-size: 12px; text-align: center; }
.chat-in { display: flex; gap: 6px; padding: 6px; }
.row.left { justify-content: flex-start; margin: 0 0 10px; }
.form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #cfdcff; }
.icons { display: flex; gap: 6px; flex-wrap: wrap; }
.icons button { width: 54px; height: 54px; padding: 2px; border-radius: 10px; border: 3px solid #0c1838; background: #2c3f78; }
.icons button.sel { background: linear-gradient(#ffd84a, #f0a81c); }
.icons img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 6px; }

/* perfil */
.pf-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; text-align: left; }
.pf-card > img { width: 80px; height: 80px; border-radius: 14px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.1); }
.pf-card > div { flex: 1; }
.pf-name-row { display: flex; gap: 6px; }
.pf-card small { color: #ffcf2e; }
.pf-card p { margin: 4px 0 0; color: #9fb0d8; font-size: 14px; }
#pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
#pf-stats div { display: flex; flex-direction: column; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); }
#pf-stats small { font-size: 11px; color: #9fb0d8; }
#pf-stats b { font-weight: 400; font-size: 18px; }
.login-box { padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); text-align: left; }
.login-box b { font-weight: 400; color: #ffcf2e; }
.login-box p { margin: 4px 0 8px; font-size: 13px; color: #cfdcff; }
.login-box .row { justify-content: flex-start; margin: 0; }

/* aviso */
#modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); padding: 16px; }
.modal-box { width: min(360px, 100%); padding: 16px; border-radius: 16px; background: linear-gradient(#2d4a8f, #1e3266); border: 4px solid #0c1838; text-align: center; }
.modal-box p { margin: 0 0 12px; font-size: 17px; }

/* copas al acabar */
.copas-change { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.copas-change img { width: 28px; height: 28px; image-rendering: pixelated; }
.copas-change b { font-weight: 400; font-size: 26px; }
.copas-change.up b { color: #7dff8f; }
.copas-change.down b { color: #ff7a7a; }
.copas-change small { color: #cfdcff; font-size: 13px; }
#col-grid .lv img.cup { width: 14px; height: 14px; }

@media (max-height: 500px) {
  .profile-chip > img { width: 30px; height: 30px; }
  .profile-chip b { font-size: 13px; }
  .lb-top .lb-title { display: none; }
  .lb-menu { gap: 5px; }
  .lb-menu .lb-btn { font-size: 12px; padding: 5px 6px; }
  .lb-menu .lb-btn i { font-size: 14px; }
  .clan-grid .plist, .chat { max-height: 58vh; }
  .chat { min-height: 160px; }
  #pf-stats { grid-template-columns: repeat(4, 1fr); }
  .prow { padding: 4px 8px; }
  .prow .av { width: 32px; height: 32px; }
}
@media (max-width: 640px) {
  .clan-grid { grid-template-columns: 1fr; }
  #pf-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lb-top { flex-wrap: wrap; }
  .lb-top .lb-title { display: none; }
  .lb-money { margin-left: auto; }
  .lb { overflow-x: hidden; }
}
.lb-money { margin-left: auto; }
.clan-head .av { border-radius: 12px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.08); }

/* =====================================================================
   ESTILO PIXEL ART PARA TODA LA INTERFAZ
   Bordes con esquinas recortadas (técnica de sombras desplazadas), brillo arriba,
   sombra abajo y botones que "se hunden" al pulsarlos.
   ===================================================================== */
:root {
  --px: 4px;
  --line: #0c1020;
  --pxb: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35),
    inset 0 var(--px) 0 0 rgba(255, 255, 255, 0.22), inset 0 calc(-1 * var(--px)) 0 0 rgba(0, 0, 0, 0.28);
  --pxb-down: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset 0 var(--px) 0 0 rgba(0, 0, 0, 0.25);
  --pxb-flat: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line),
    inset 0 var(--px) 0 0 rgba(255, 255, 255, 0.12);
}

.panel, .big, .act, .lb-btn, .card, .mode-card, .mode-card2, .tabs button, .back, .pill, .profile-chip, .chest-widget, .diff, .mini,
.modal-box, .hero-plate, .icon-btn, .px-seg button, .icons button, .reward, .copas-change, .tokens, .cw-ball, .badge, .cw-badge {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--pxb) !important;
  image-rendering: pixelated;
}
.mission, .prow, .move, .st-row, .login-box, #pf-stats div, #dt-stats td, .ms-reward, .chat, .search input, .form input, .form select,
.chat-in input, .pf-name-row input, #dt-hero, .mock-note, .keys {
  border-radius: 0 !important;
}
.mission, .prow, .st-row, .login-box, .keys { box-shadow: var(--pxb-flat); border: 0; }
.chat { border: 0 !important; box-shadow: var(--pxb-flat); }
.search input, .form input, .form select, .chat-in input, .pf-name-row input { border: 0 !important; box-shadow: var(--pxb-flat), inset 0 4px 0 rgba(0, 0, 0, 0.15) !important; }

.big:active, .act:active, .lb-btn:active, .card:active, .mode-card:active, .mode-card2:active, .tabs button:active, .back:active,
.chest-widget:active, .icon-btn:active, .px-seg button:active, .mini:active, .profile-chip:active {
  transform: translateY(var(--px));
  box-shadow: var(--pxb-down) !important;
}
.act:disabled:active { transform: none; }
.panel { background: linear-gradient(#2d4a8f, #1e3266); margin: 8px; }
.badge, .cw-badge { box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line) !important; }
.prow.me { border: 0; box-shadow: 0 -4px 0 0 #5ad07a, 0 4px 0 0 #5ad07a, -4px 0 0 0 #5ad07a, 4px 0 0 0 #5ad07a; }

/* iconos pixel */
.pxi { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.lb-menu .lb-btn .pxi { width: 22px; height: 22px; }
.icon-btn {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(#4b6fc2, #34529c); padding: 0; margin: 4px;
}
.icon-btn .pxi { width: 28px; height: 28px; }
#btn-pause { position: fixed; top: 10px; left: 10px; z-index: 20; }

/* ajustes */
#st-body { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.st-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0, 0, 0, 0.22); margin: 4px; }
.st-row > div:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.st-row b { font-weight: 400; font-size: 17px; }
.st-row small { font-size: 12px; color: #9fb0d8; }
.st-row.danger { background: rgba(150, 30, 30, 0.25); }
.act.red { background: linear-gradient(#ff6b5a, #c8302a); color: #fff; }
a.act { text-decoration: none; }

.px-toggle { position: relative; width: 64px; height: 32px; padding: 0; background: #3a4466; box-shadow: var(--pxb) !important; border: 0; flex: none; margin: 4px; }
.px-toggle i { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: #c8d0e8; box-shadow: inset 0 4px 0 #fff, inset 0 -4px 0 #8a94b0; transition: left 0.12s steps(3); }
.px-toggle.on { background: #3aa858; }
.px-toggle.on i { left: 36px; background: #ffffff; }

.px-seg { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.px-seg button { font-size: 14px; padding: 6px 10px; color: #dfe7ff; background: #2c3f78; margin: 4px; }
.px-seg button.sel { background: linear-gradient(#ffd84a, #f0a81c); color: #3a2500; }

.px-range { -webkit-appearance: none; appearance: none; width: 180px; height: 16px; background: #0c1020; box-shadow: var(--pxb-flat); outline: none; margin: 6px; }
.px-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 28px; background: #ffd23a; box-shadow: inset 0 4px 0 #fff4b0, inset 0 -4px 0 #b07810, 0 0 0 4px #0c1020; cursor: pointer; }
.px-range::-moz-range-thumb { width: 20px; height: 28px; border: 0; border-radius: 0; background: #ffd23a; box-shadow: 0 0 0 4px #0c1020; }

.keys { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; background: rgba(0, 0, 0, 0.22); margin: 4px; font-size: 14px; color: #cfdcff; }
.keys b { width: 100%; font-weight: 400; color: #ffcf2e; }
kbd {
  display: inline-block; min-width: 22px; padding: 1px 5px; margin-right: 3px; text-align: center; font-family: inherit; font-size: 13px;
  color: #0c1838; background: #e8eeff; box-shadow: 0 -2px 0 #0c1020, 0 2px 0 #0c1020, -2px 0 0 #0c1020, 2px 0 0 #0c1020, inset 0 -3px 0 #a8b4d4;
}

/* pausa */
.pause-panel { width: min(360px, 100%); }
.pause-btns { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 6px; }
.pause-btns .big { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pause-btns .lb-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; }

@media (max-height: 500px) {
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn .pxi { width: 22px; height: 22px; }
  .lb-menu .lb-btn .pxi { width: 16px; height: 16px; }
  .st-row { padding: 6px 10px; }
  .pause-btns { gap: 10px; margin: 6px 0; }
}

/* =====================================================================
   TEMA POKÉMON
   Ventanas como las de Pokémon Mundo Misterioso (azul marino con doble marco
   celeste y cursor ▶), cabeceras rojas tipo Pokédex, botón de jugar con Pokéball,
   tarjetas como las casillas del equipo y título con los colores del logo.
   ===================================================================== */
:root {
  --navy: #13224d;
  --cyan: #8ccaff;
  --ring: inset 0 0 0 3px var(--navy), inset 0 0 0 5px var(--cyan), inset 0 0 0 7px var(--navy);
  --ring-sm: inset 0 0 0 2px var(--navy), inset 0 0 0 4px rgba(140, 202, 255, 0.85);
  --outline: 0 calc(-1 * var(--px)) 0 0 var(--line), 0 var(--px) 0 0 var(--line), calc(-1 * var(--px)) 0 0 0 var(--line), var(--px) 0 0 0 var(--line);
}

/* ---------------- ventanas */
.panel, .modal-box {
  background: linear-gradient(180deg, #27448a 0%, #1a2f66 60%, #152656 100%) !important;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), var(--ring) !important;
  text-shadow: 2px 2px 0 #0a1230;
  padding: 16px 18px;
}
/* cabecera roja tipo Pokédex con la Pokéball */
.pn-head {
  margin: -8px -10px 12px;
  padding: 6px 10px;
  background: linear-gradient(#f05a46, #d0321f 70%, #a8241a);
  box-shadow: var(--outline), inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.pn-head h2 { display: flex; align-items: center; gap: 8px; color: #fff; text-shadow: 2px 2px 0 #6a120c; }
.pn-head h2::before {
  content: ''; width: 28px; height: 28px; flex: none;
  background: var(--ico-ball) center / contain no-repeat; image-rendering: pixelated;
}
.pn-head h2 small { color: #ffe0d8; text-shadow: none; }
.pn-head .back { background: #fff; color: #c8302a; box-shadow: var(--outline), inset 0 -4px 0 #c8c0cc !important; text-shadow: none; }

/* ---------------- botones de menú (azul con marco celeste) */
.lb-btn, .act.blue, .tabs button, .mode-card, .mode-card2, .px-seg button, .back, .icon-btn, .profile-chip, .pill, .hero-plate, .diff, .mini {
  background: linear-gradient(#2f56b0, #20408c 60%, #1a3474) !important;
  color: #fff;
  text-shadow: 2px 2px 0 #0a1230;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), var(--ring-sm) !important;
}
.mini.ok { background: linear-gradient(#5ad07a, #2e9a4a) !important; }
.pill, .hero-plate, .profile-chip { background: linear-gradient(#1f3a7a, #142a5c) !important; }

/* cursor ▶ de los menús Pokémon al pasar por encima o en lo elegido */
.lb-btn, .tabs button, .px-seg button, .mode-card2 { position: relative; }
.lb-btn:hover::before, .tabs button.sel::before, .px-seg button.sel::before, .mode-card2.sel::before {
  content: '▶';
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #ffd23a; text-shadow: 1px 1px 0 #3a2500;
  animation: cursor 0.8s steps(2) infinite;
}
.mode-card2.sel::before { top: 14px; transform: none; left: 8px; }
@keyframes cursor { 50% { transform: translate(3px, -50%); } }
.mode-card2.sel::before { animation: none; }
.lb-btn { padding-left: 18px !important; }
.lb-menu .lb-btn { padding-left: 14px !important; }

/* elegido / activo: amarillo como la casilla seleccionada del equipo */
.tabs button.sel, .px-seg button.sel, .mode-card2.sel, .card.sel, .chest-widget.ready {
  background: linear-gradient(#ffe066, #f8b830 60%, #e89a18) !important;
  color: #3a2500 !important;
  text-shadow: 1px 1px 0 #fff4b0 !important;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px #a86a00, inset 0 0 0 4px #fff4b0 !important;
}
.tabs button.sel::before, .px-seg button.sel::before { color: #c8302a; text-shadow: none; }

/* ---------------- botón principal: rojo con Pokéball */
.big {
  position: relative;
  color: #fff !important;
  text-shadow: 3px 3px 0 #6a120c;
  background: var(--ico-ball) 14px center / 40px no-repeat, linear-gradient(#ff7058, #e8402c 55%, #b8261c) !important;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.4), inset 0 0 0 3px #6a120c, inset 0 0 0 5px #ffb0a0 !important;
  padding-left: 64px !important;
  padding-right: 24px !important;
}
.big:hover { filter: brightness(1.08); }
.pause-btns .big { background: linear-gradient(#ff7058, #e8402c 55%, #b8261c) !important; padding-left: 24px !important; }

/* botones de acción */
.act.gold {
  background: linear-gradient(#ffe066, #f8b830 60%, #e89a18) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px #a86a00, inset 0 0 0 4px #fff4b0 !important;
}
.act.red { background: linear-gradient(#ff6b5a, #c8302a) !important; box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px #6a120c, inset 0 0 0 4px #ffb0a0 !important; }
.act.gray, .act:disabled { background: linear-gradient(#5a6a90, #46557a) !important; color: #c8d0e8 !important; text-shadow: none; box-shadow: var(--outline), inset 0 0 0 2px #2a3456 !important; }

/* ---------------- tarjetas de Pokémon como casillas del equipo */
#col-grid .card {
  background: linear-gradient(#4f7ad8, #3a5cb8 60%, #2e4c9c) !important;
  box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px var(--navy), inset 0 0 0 4px var(--rar, #8ccaff) !important;
  text-shadow: 2px 2px 0 #0a1230;
}
#col-grid .card::after {
  content: ''; position: absolute; right: 8px; top: 8px; width: 22px; height: 22px;
  background: var(--ico-ball) center / contain no-repeat; image-rendering: pixelated; opacity: 0.5;
}
#col-grid .card.locked { background: linear-gradient(#3a4466, #283050) !important; }
#col-grid .card.locked::after { filter: grayscale(1); opacity: 0.3; }
#col-grid .card img.pt { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3); }

/* ---------------- listas (misiones, logros, amigos, ranking, ajustes) */
.mission, .prow, .st-row, .keys, .login-box, .move, #pf-stats div, .mock-note {
  background: linear-gradient(#1f3a7a, #172d62) !important;
  box-shadow: var(--outline), var(--ring-sm) !important;
}
.mission.done { background: linear-gradient(#5a4a10, #3e3410) !important; box-shadow: var(--outline), inset 0 0 0 2px var(--navy), inset 0 0 0 4px #ffd23a !important; }
.prow.me { box-shadow: var(--outline), inset 0 0 0 2px var(--navy), inset 0 0 0 4px #5ad07a !important; }
.st-row.danger { background: linear-gradient(#5a1a24, #3e1018) !important; }
.mock-note { color: #ffe9a8; }
.ms-body .bar, .cw-info .bar, .tok-info .bar { box-shadow: 0 0 0 2px #0a1230; }
.bar i { background: linear-gradient(#a8f070, #58c838 60%, #3a9a28) !important; } /* barras verdes como la vida en Pokémon */
.tokens .bar i, .cw-info .bar i { background: linear-gradient(#ffe066, #f5a815) !important; }

/* ---------------- avisos: cuadro de diálogo con la flecha ▼ */
.modal-box { position: relative; padding-bottom: 26px; }
.modal-box::after {
  content: '▼'; position: absolute; right: 16px; bottom: 6px; font-size: 12px; color: #ffd23a;
  animation: blink 0.8s steps(2) infinite;
}

/* ---------------- título con los colores del logo de Pokémon */
.lb-title, #lobby h1, .panel h1 {
  color: #ffcb05;
  text-shadow:
    -3px 0 0 #2a5bb0, 3px 0 0 #2a5bb0, 0 -3px 0 #2a5bb0, 0 3px 0 #2a5bb0,
    -3px -3px 0 #2a5bb0, 3px -3px 0 #2a5bb0, -3px 3px 0 #2a5bb0, 3px 3px 0 #2a5bb0,
    0 7px 0 #102a64;
  letter-spacing: 1px;
}
.lb-title span { color: #ffffff; }
h1.win { color: #ffcb05; }
h1.lose { color: #ff8a7a; }

/* tablas de resultados */
#scores td { background: rgba(0, 0, 0, 0.2); }
#scores tr.blue td { background: rgba(60, 120, 230, 0.35); }
#scores tr.red td { background: rgba(220, 70, 60, 0.3); }

/* el botón del cofre: Pokéball en su hueco con marco */
.cw-ball { background: linear-gradient(#1f3a7a, #142a5c) !important; box-shadow: var(--outline), var(--ring-sm) !important; }
.badge, .cw-badge { background: #e8402c !important; }

/* pestañas tipo bolsillos de la Mochila */
.tabs { gap: 10px; }
.tabs button { padding-left: 18px; }
.pn-head .back { background: linear-gradient(#ffffff, #e4e0ea) !important; color: #c8302a !important; text-shadow: none !important; font-weight: 700; box-shadow: var(--outline), 0 calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.3), inset 0 -4px 0 #c8c0cc !important; }

/* =====================================================================
   TEMA POKÉMON 2 (Mundo Misterioso + Platino + HeartGold + Rojo Fuego)
   Los marcos (--sk-*) son imágenes pixel generadas en js/pixui.js y se ponen con border-image.
   ===================================================================== */

/* ---------------- piel común */
.big, .act, .tabs button, .px-seg button, .back, .icon-btn, .mini, .mode-card, .mode-card2, .lb-btn, .tile,
.chest-widget, .panel, .pill, .profile-chip, .hero-plate, .cw-ball, .tokens, .copas-change, .reward,
.mission, .prow, .st-row, .keys, .login-box, .move, #pf-stats div, #col-grid .card, .pn-head, .modal-box, .modal-choices, .mock-note {
  border-style: solid !important;
  border-width: 12px !important;
  border-image-slice: 12 fill !important;
  border-image-width: 12px !important;
  border-image-repeat: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0;
}

/* ---------------- botones (Platino): cada uno con su color */
.big { border-image-source: var(--sk-red) !important; position: relative; color: #fff !important; text-shadow: 2px 2px 0 #6a120c !important; padding: 4px 18px 6px 58px !important; }
.big::after { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: var(--ico-ball) center / contain no-repeat; image-rendering: pixelated; }
.pause-btns .big, #again { padding-left: 52px !important; }
.act { padding: 2px 10px !important; font-size: 15px !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }
.act.blue { border-image-source: var(--sk-blue) !important; color: #fff !important; }
.act.gold { border-image-source: var(--sk-yellow) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0 !important; }
.act.red { border-image-source: var(--sk-red) !important; color: #fff !important; }
.act.gray, .act:disabled { border-image-source: var(--sk-gray) !important; color: #d8deec !important; text-shadow: none !important; }
.tabs button, .px-seg button { border-image-source: var(--sk-gray) !important; color: #fff !important; padding: 2px 8px 2px 14px !important; text-shadow: 1px 1px 0 #141824 !important; }
.tabs button.sel, .px-seg button.sel { border-image-source: var(--sk-yellow) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0 !important; }
.back { border-image-source: var(--sk-red) !important; color: #fff !important; width: auto !important; height: auto !important; padding: 0 6px !important; font-size: 18px !important; text-shadow: 1px 1px 0 #6a120c !important; }
.pn-head .back { border-image-source: var(--sk-white) !important; color: #c8302a !important; }
.icon-btn { border-image-source: var(--sk-blue) !important; width: auto !important; height: auto !important; padding: 0 !important; }
.icon-btn .pxi { width: 26px; height: 26px; display: block; }
.mini { border-image-source: var(--sk-gray) !important; width: auto !important; height: auto !important; padding: 0 4px !important; color: #fff !important; }
.mini.ok { border-image-source: var(--sk-green) !important; }
.mode-card { border-image-source: var(--sk-blue) !important; padding: 0 6px !important; }
.mode-card2 { border-image-source: var(--sk-blue) !important; padding: 4px !important; }
.mode-card2.sel { border-image-source: var(--sk-yellow) !important; }
.lb-btn { border-image-source: var(--sk-blue) !important; padding: 2px 10px !important; color: #fff; }
.chest-widget { border-image-source: var(--sk-blue) !important; padding: 0 6px 0 0 !important; }
.chest-widget.ready { border-image-source: var(--sk-yellow) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0; }
.big:active, .act:active, .tabs button:active, .px-seg button:active, .back:active, .icon-btn:active, .mini:active, .mode-card:active,
.mode-card2:active, .lb-btn:active, .tile:active, .chest-widget:active, #col-grid .card:active { transform: translateY(3px); box-shadow: none !important; filter: brightness(0.92); }
.big:hover, .act:not(:disabled):hover, .tile:hover, .lb-btn:hover, .mode-card:hover, .icon-btn:hover { filter: brightness(1.1); }

/* ---------------- menú del lobby (HeartGold): cuadrícula de botones grandes con icono */
.lb-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tile { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 4px !important; color: #fff; font: inherit; font-size: 16px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); cursor: pointer; min-height: 52px; }
.tile .ib { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: #fafaf6;
  box-shadow: 0 -2px 0 #141824, 0 2px 0 #141824, -2px 0 0 #141824, 2px 0 0 #141824, inset 0 -3px 0 #d8d8d0; }
.tile .ib .pxi { width: 26px; height: 26px; }
.tile .tl { flex: 1; text-align: left; }
.tile .badge { right: -6px; top: -6px; }
.sec-green { border-image-source: var(--sk-green) !important; }
.sec-yellow { border-image-source: var(--sk-yellow) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0 !important; }
.sec-orange { border-image-source: var(--sk-orange) !important; }
.sec-pink { border-image-source: var(--sk-pink) !important; }
.sec-blue { border-image-source: var(--sk-blue) !important; }
.sec-teal { border-image-source: var(--sk-teal) !important; }
.tile:hover::before { content: none !important; }

/* ---------------- ventanas (Mundo Misterioso): oscuras con marco del color elegido */
.panel { border-image-source: var(--sk-win) !important; padding: 4px 6px !important; margin: 8px !important; text-shadow: 2px 2px 0 #02040c; }
.pill, .profile-chip, .hero-plate, .cw-ball, .tokens, .copas-change, .reward { border-image-source: var(--sk-win2) !important; }
.pill { padding: 0 6px 0 2px !important; }
.profile-chip { padding: 0 6px 0 0 !important; }
.hero-plate { padding: 0 8px !important; }
.cw-ball { width: 66px !important; height: 66px !important; }
.tokens, .copas-change { padding: 0 6px !important; }
.reward { padding: 4px 10px !important; }
.mission, .prow, .st-row, .keys, .login-box, .move, #pf-stats div { border-image-source: var(--sk-row) !important; padding: 0 4px !important; }
.mission.done { border-image-source: var(--sk-win) !important; }
.mission.done .ms-body b { color: #ffe066; }
.prow.me { border-image-source: var(--sk-green) !important; }
.st-row.danger { border-image-source: var(--sk-red) !important; }
.st-row.danger small { color: #ffe0d8; }
#col-grid .card { border-image-source: var(--sk-win2) !important; padding: 2px !important; }
#col-grid .card.sel { border-image-source: var(--sk-yellow) !important; color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0 !important; }
#col-grid .card.locked { filter: saturate(0.6); }

/* ---------------- cabeceras con el color de cada sección */
.pn-head { border-image-source: var(--sk-red) !important; margin: 0 0 10px !important; padding: 0 4px !important; }
.pn-head h2 { color: #fff !important; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45) !important; font-size: 22px; }
#collection .pn-head, #detail .pn-head { border-image-source: var(--sk-green) !important; }
#missions .pn-head { border-image-source: var(--sk-yellow) !important; }
#missions .pn-head h2 { color: #3a2500 !important; text-shadow: 1px 1px 0 #fff4b0 !important; }
#achievements .pn-head { border-image-source: var(--sk-orange) !important; }
#friends .pn-head { border-image-source: var(--sk-pink) !important; }
#clan .pn-head, #profile .pn-head { border-image-source: var(--sk-blue) !important; }
#ranking .pn-head { border-image-source: var(--sk-teal) !important; }
#settings .pn-head { border-image-source: var(--sk-gray) !important; }

/* ---------------- avisos (Rojo Fuego): caja blanca con marco azul y SÍ / NO */
#modal { align-items: flex-end; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
.modal-wrap { width: min(560px, 100%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.modal-box { border-image-source: var(--sk-white) !important; width: 100%; padding: 4px 10px 8px !important; color: #383838; text-shadow: 2px 2px 0 #d8d8d0 !important; text-align: left; }
.modal-box p { margin: 0 !important; font-size: 18px !important; line-height: 1.5; }
.modal-box::after { color: #c8302a !important; right: 4px !important; bottom: 0 !important; }
.modal-choices { border-image-source: var(--sk-white) !important; display: flex; flex-direction: column; padding: 0 8px !important; min-width: 110px; }
.modal-choices button { background: none; border: 0; text-align: left; font: inherit; font-size: 18px; color: #383838; text-shadow: 2px 2px 0 #d8d8d0; padding: 2px 4px 2px 20px; position: relative; cursor: pointer; }
.modal-choices button:first-child::before, .modal-choices button:hover::before { content: '▶'; position: absolute; left: 2px; top: 7px; font-size: 12px; color: #383838; text-shadow: none; }
.modal-choices button:hover ~ button::before, .modal-choices:hover button:first-child:not(:hover)::before { content: none; }
.modal-choices button.hidden { display: none; }

/* nota de "vista previa" como cartel de texto */
.mock-note { border-image-source: var(--sk-white) !important; color: #383838 !important; text-shadow: 1px 1px 0 #d8d8d0 !important; padding: 0 6px !important; font-size: 12px; }

/* ---------------- ajustes finos de tamaños con los marcos */
.lb-right .big { font-size: 28px !important; padding-top: 6px !important; padding-bottom: 8px !important; }
.lb-left { gap: 8px; }
.pause-btns { gap: 10px; }
.pause-btns .lb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 10px !important; }
.st-row > div:first-child b { font-size: 16px; }
.diffs, #mp-diff { display: none; }

@media (max-height: 500px) {
  .tile { min-height: 40px; font-size: 13px; gap: 6px; }
  .tile .ib { width: 26px; height: 26px; }
  .tile .ib .pxi { width: 20px; height: 20px; }
  .lb-menu { gap: 4px; }
  .lb-right .big { font-size: 22px !important; padding-top: 2px !important; padding-bottom: 4px !important; }
  .cw-ball { width: 50px !important; height: 50px !important; }
  .panel { margin: 4px !important; }
  .modal-box p, .modal-choices button { font-size: 15px !important; }
}
.tile .badge { right: -14px !important; top: -16px !important; z-index: 2; }
.tile .tl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avisos de estilo Rojo Fuego con los colores del juego (ventana oscura con el marco elegido) */
.modal-box, .modal-choices { border-image-source: var(--sk-win) !important; color: #fff !important; text-shadow: 2px 2px 0 #02040c !important; }
.modal-choices button { color: #fff !important; text-shadow: 2px 2px 0 #02040c !important; }
.modal-choices button:first-child::before, .modal-choices button:hover::before { color: var(--frame) !important; }
.modal-box::after { color: var(--frame) !important; }
.mock-note { border-image-source: var(--sk-row) !important; color: #ffe9a8 !important; text-shadow: 1px 1px 0 #02040c !important; }

/* botón del cofre: hueco de la bola más grande y número pequeño en la esquina */
.cw-ball { width: 70px !important; height: 70px !important; border-width: 9px !important; border-image-width: 9px !important; }
.cw-ball img { width: 46px !important; height: 46px !important; }
.cw-badge { min-width: 22px !important; height: 22px !important; padding: 0 5px !important; font-size: 14px !important; line-height: 18px !important; right: -16px !important; top: -16px !important; z-index: 2; }
@media (max-height: 500px) {
  .cw-ball { width: 54px !important; height: 54px !important; }
  .cw-ball img { width: 36px !important; height: 36px !important; }
}

/* =====================================================================
   ROSTER COMPLETO: filtros de la colección, línea evolutiva, skins e iniciales
   ===================================================================== */
.col-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.col-filters input, .col-filters select {
  font: inherit; font-size: 16px; color: #fff; background: #10183a; border: 3px solid #141824;
  box-shadow: inset 0 0 0 2px var(--frame, #e8b838); padding: 4px 8px; min-height: 36px; border-radius: 0;
}
.col-filters input { flex: 1 1 160px; min-width: 120px; }
.col-filters input::placeholder { color: #8f9ac0; }
.col-filters select { flex: 0 1 auto; max-width: 170px; }
.col-filters .px-seg { display: flex; gap: 2px; }
#col-grid .card { content-visibility: auto; contain-intrinsic-size: 120px 150px; }
#col-grid .card img.pt { image-rendering: pixelated; }
#col-grid .tdots { display: flex; gap: 3px; justify-content: center; }
#col-grid .tdots i { width: 16px; height: 5px; display: block; box-shadow: 0 0 0 1px #141824; }
#col-grid .shiny-tag { position: absolute; top: -2px; right: 2px; color: #ffe066; font-size: 18px; text-shadow: 1px 1px 0 #6a4a00; }
#col-empty { margin: 20px 0; }

/* línea evolutiva en la ficha */
#dt-evo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; width: 100%; }
#dt-evo .evo-arrow { color: #ffd23a; font-size: 12px; }
#dt-evo .evo-st {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 3px; min-width: 62px;
  font: inherit; color: #fff; background: rgba(0, 0, 0, 0.25); border: 2px solid #141824; cursor: pointer;
}
#dt-evo .evo-st.sel { background: #ffd23a; color: #3a2500; }
#dt-evo .evo-st img { width: 34px; height: 34px; image-rendering: pixelated; }
#dt-evo .evo-st b { font-size: 12px; font-weight: normal; line-height: 1; }
#dt-evo .evo-st small { font-size: 10px; color: inherit; opacity: 0.85; line-height: 1.1; }
#dt-evo .evo-note { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: #c8d4ff; }

/* skins */
#dt-skins { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
#dt-skins:empty { display: none; }
#dt-skins .px-seg { display: flex; gap: 2px; }
#dt-skins .money img { width: 16px; height: 16px; }

/* elegir iniciales */
#starters .panel { max-width: 980px; }
#sp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-col h3 { margin: 0 0 6px; font-size: 20px; font-weight: normal; color: var(--tc); text-shadow: 2px 2px 0 #02040c; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sp-mon {
  display: flex; flex-direction: column; align-items: center; padding: 3px 2px; cursor: pointer;
  font: inherit; color: #fff; background: rgba(0, 0, 0, 0.3); border: 3px solid #141824;
}
.sp-mon img { width: 48px; height: 48px; image-rendering: pixelated; }
.sp-mon small { font-size: 12px; line-height: 1.1; }
.sp-mon:hover { filter: brightness(1.15); }
.sp-mon.sel { background: var(--tc); border-color: #fff; color: #10183a; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#sp-pick { font-size: 15px; color: #ffe066; }
#sp-go:disabled { filter: grayscale(0.8) brightness(0.7); }

@media (max-height: 500px) {
  .col-filters input, .col-filters select { font-size: 14px; min-height: 30px; padding: 2px 6px; }
  .sp-mon img { width: 34px; height: 34px; }
  .sp-mon small { font-size: 10px; }
  .sp-col h3 { font-size: 16px; }
  #dt-evo .evo-st img { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  #sp-cols { grid-template-columns: 1fr; }
}

/* la Pokéball decorativa tapaba el retrato en tarjetas pequeñas */
#col-grid .card::after { content: none !important; }
#col-own button { padding: 0 6px 0 10px !important; font-size: 14px !important; }
@media (max-height: 500px) {
  .col-filters { flex-wrap: nowrap; gap: 4px; margin-bottom: 6px; }
  .col-filters input { flex: 1 1 90px; min-width: 70px; }
  .col-filters select { max-width: 112px; font-size: 13px; }
  #col-own button { font-size: 12px !important; padding: 0 4px 0 8px !important; }
}

/* =====================================================================
   FICHA: etiqueta de rareza nítida, barra de nivel visible, iconos pixel y evolución compacta
   ===================================================================== */
.rar-tag {
  text-shadow: none !important; border-radius: 0 !important; color: #10183a !important; font-size: 15px !important;
  padding: 1px 8px !important; box-shadow: 0 0 0 2px #141824, inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.lvbar i { border-radius: 0 !important; background: #2c3866 !important; border: 2px solid #141824 !important; height: 12px !important; }
.lvbar i.on { background: linear-gradient(#ffe066, #f5a815) !important; }
#dt-stats td { vertical-align: middle; }
#dt-stats .sti { width: 18px; height: 18px; image-rendering: pixelated; vertical-align: -3px; margin-right: 6px; }
#dt-evo { flex-wrap: nowrap; }
#dt-evo .evo-st { flex: 1 1 0; min-width: 0; padding: 2px 1px; }
#dt-evo .evo-st b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
#dt-evo .evo-st small { font-size: 9px; white-space: nowrap; }
#dt-evo .evo-arrow { flex: none; font-size: 9px; }

/* =====================================================================
   PANTALLA FINAL: retratos, nombres y estadísticas por equipo
   ===================================================================== */
.end-panel { width: min(900px, 100%); max-height: calc(100% - 16px); overflow-y: auto; }
.end-head { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.end-head h1 { margin: 0 !important; }
.end-head small { color: #c8d4ff; font-size: 15px; }
#end-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; text-align: left; }
.end-team h3 { margin: 0 0 4px; font-size: 17px; font-weight: normal; }
.end-team.blue h3 { color: #7ab8ff; }
.end-team.red h3 { color: #ff8a8a; }
.end-team h3 em { font-style: normal; color: #ffe066; }
.end-team.ffa { grid-column: 1 / -1; }
.end-team.ffa .et-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.et-rows { display: flex; flex-direction: column; gap: 4px; }
.end-row {
  display: grid; grid-template-columns: auto 1fr repeat(4, 46px); align-items: center; gap: 6px;
  padding: 3px 6px 3px 3px; box-shadow: 0 0 0 2px #141824;
}
.end-team.ffa .end-row { grid-template-columns: 26px auto 1fr repeat(4, 42px); }
.end-team.blue .end-row { background: linear-gradient(90deg, rgba(60, 130, 255, 0.45), rgba(40, 80, 180, 0.25)); }
.end-team.red .end-row { background: linear-gradient(90deg, rgba(230, 70, 60, 0.45), rgba(150, 40, 40, 0.25)); }
.end-team.ffa .end-row { background: rgba(255, 255, 255, 0.08); }
.end-row.me { box-shadow: 0 0 0 2px #141824, inset 0 0 0 2px #7dff8f; }
.er-rank { color: #ffe066; font-size: 17px; text-align: center; }
.er-pt { position: relative; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35); }
.er-pt img { width: 40px; height: 40px; image-rendering: pixelated; display: block; }
.er-mvp { position: absolute; left: -4px; bottom: -6px; font-style: normal; font-size: 11px; line-height: 1; padding: 1px 3px; background: #ffd23a; color: #3a2500; box-shadow: 0 0 0 2px #141824; text-shadow: none; }
.er-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.er-name b { font-weight: normal; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.end-row.me .er-name b { color: #7dff8f; }
.er-name small { font-size: 12px; color: #d8e2ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-st { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.er-st b { font-weight: normal; font-size: 16px; }
.er-st small { font-size: 10px; color: #c8d4ff; white-space: nowrap; }
#end-rewards { flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center !important; }
#end-rewards .got { margin: 0; font-size: 13px; flex-basis: 100%; }
@media (max-height: 500px) {
  .end-head h1 { font-size: 28px !important; }
  .er-pt, .er-pt img { width: 32px; height: 32px; }
  .end-row { gap: 4px; padding: 2px 4px 2px 2px; grid-template-columns: auto 1fr repeat(4, 38px); }
  .end-team.ffa .end-row { grid-template-columns: 22px auto 1fr repeat(4, 34px); }
  .er-name b, .er-st b { font-size: 14px; }
  .er-name small { font-size: 10px; }
  .er-st small { font-size: 9px; }
  .end-team h3 { font-size: 14px; }
  #end-teams { margin: 4px 0; gap: 8px; }
}
@media (max-width: 640px) {
  #end-teams, .end-team.ffa .et-rows { grid-template-columns: 1fr; }
}

#dt-evo { display: block !important; }
#dt-evo .evo-row { display: flex; align-items: center; gap: 2px; width: 100%; }

.end-panel .copas-change, .end-panel .tokens { padding-top: 0 !important; padding-bottom: 0 !important; }
#end-rewards { margin: 4px 0 !important; gap: 4px 10px !important; }

@media (max-height: 500px) {
  .end-panel { padding-top: 0 !important; padding-bottom: 0 !important; }
  .end-panel .row { margin-top: 2px !important; gap: 10px; }
  .end-panel .row .big { font-size: 20px !important; padding-top: 0 !important; padding-bottom: 2px !important; }
  .end-panel .row #back { font-size: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .end-panel .copas-change, .end-panel .tokens { font-size: 14px; }
  .end-panel .copas-change b { font-size: 22px !important; }
  #end-rewards .got { font-size: 12px; }
}

/* los botones de la pantalla final siempre a la vista */
.end-panel .row { position: sticky; bottom: -2px; z-index: 2; background: rgba(16, 24, 58, 0.96); padding: 4px 0 2px; margin-bottom: 0 !important; }

/* elegir rama de evolución (Eevee...) */
.evo-branch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin-bottom: 4px; }
.evo-branch small { width: 100%; text-align: center; font-size: 11px; color: #ffe066; }
.evo-br { padding: 1px; background: rgba(0, 0, 0, 0.3); border: 2px solid #141824; cursor: pointer; }
.evo-br img { width: 26px; height: 26px; image-rendering: pixelated; display: block; }
.evo-br.sel { background: #ffd23a; border-color: #fff; }
@media (max-height: 500px) { .evo-br img { width: 20px; height: 20px; } .col-filters select { max-width: 96px; } }

.pill.pay { display: flex; align-items: center; gap: 4px; padding: 0 8px !important; }
.pill.pay img { width: 18px; height: 18px; image-rendering: pixelated; }
.pill.pay b { font-weight: normal; font-size: 17px; margin-right: 4px; }

/* botón "Volver al lobby" con el mismo marco pixel que los demás */
#back {
  border-style: solid !important; border-width: 12px !important; border-image-slice: 12 fill !important;
  border-image-width: 12px !important; border-image-source: var(--sk-blue) !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important; color: #fff !important; text-shadow: 2px 2px 0 #0c1838 !important;
  padding: 4px 18px 6px !important;
}
.move.evo b { color: #ffe066; }

/* =====================================================================
   PASE DE TEMPORADA (gratis)
   ===================================================================== */
/* botón del lobby: medalla con el nivel + barra */
.pass-btn {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 1px 8px; align-items: center;
  text-align: left; font: inherit; color: #fff; cursor: pointer; padding: 0 6px 0 2px !important;
  border-style: solid; border-width: 12px; border-image-slice: 12 fill; border-image-width: 12px; border-image-source: var(--sk-pink);
  background: transparent; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.pass-btn.ready { border-image-source: var(--sk-yellow); color: #3a2500; text-shadow: 1px 1px 0 #fff4b0; animation: ps-wiggle 2.4s infinite; }
.pass-btn .pb-medal {
  grid-row: 1 / 3; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f8c830 45%, #b07810);
  box-shadow: 0 0 0 3px #141824, inset 0 -3px 0 rgba(0, 0, 0, 0.25); border-radius: 50%;
  color: #3a2500; font-size: 20px; text-shadow: 1px 1px 0 #fff4b0;
}
.pass-btn .pb-top { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.pass-btn .pb-top b { font-weight: normal; font-size: 17px; }
.pass-btn .pb-top small { font-size: 12px; opacity: 0.9; }
.pass-btn .bar { height: 9px; }
.pass-btn .badge { right: -16px; top: -16px; }
.pass-btn:active { transform: translateY(3px); }
@keyframes ps-wiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-1.5deg); } 96% { transform: rotate(1.5deg); } }

/* pantalla */
#passscreen .panel { display: flex; flex-direction: column; }
.ps-hero {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 6px 10px; margin-bottom: 8px;
  background: linear-gradient(100deg, #6a2ab0 0%, #c0307a 55%, #f07a2a 100%);
  box-shadow: 0 0 0 3px #141824, inset 0 3px 0 rgba(255, 255, 255, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.25);
  position: relative; overflow: hidden;
}
.ps-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background: repeating-linear-gradient(45deg, #fff 0 6px, transparent 6px 18px);
}
.ps-medal {
  position: relative; width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f8c830 45%, #b07810); color: #3a2500; line-height: 0.9;
  box-shadow: 0 0 0 4px #141824, 0 0 0 7px #fff4b0, 0 0 0 10px #141824, inset 0 -5px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 0 #fff4b0; margin: 8px;
}
.ps-medal small { font-size: 11px; }
.ps-medal b { font-weight: normal; font-size: 32px; }
.ps-mid { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ps-name { display: flex; align-items: center; gap: 8px; font-size: 24px; color: #fff; text-shadow: 2px 2px 0 #2a0a40; }
.ps-name em { font-style: normal; font-size: 13px; color: #10183a; background: #7dff8f; padding: 0 6px; box-shadow: 0 0 0 2px #141824; text-shadow: none; }
.ps-xpbar { position: relative; height: 20px; background: #1a1030; box-shadow: 0 0 0 3px #141824, inset 0 3px 0 rgba(0, 0, 0, 0.4); }
.ps-xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#bfffb0, #47d65a 50%, #2a9a3a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.ps-xpbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; text-shadow: 1px 1px 0 #141824, -1px -1px 0 #141824; }
.ps-how { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #ffe8f6; }
.ps-how b { font-weight: normal; color: #ffe066; }
.ps-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ps-timer { font-size: 13px; color: #fff; background: rgba(20, 24, 36, 0.6); padding: 1px 8px; box-shadow: 0 0 0 2px #141824; }
.ps-timer::before { content: '⏳ '; }

/* recorrido de niveles */
#ps-track { display: flex; overflow-x: auto; overflow-y: hidden; padding: 16px 12px 6px; scroll-behavior: smooth; flex: 1; min-height: 0; }
.ps-col { position: relative; flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; padding: 0 5px; }
.ps-ribbon {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;
  font-size: 12px; color: #3a2500; background: #ffd23a; padding: 0 6px; box-shadow: 0 0 0 2px #141824;
}
.ps-ribbon.small { font-size: 11px; background: #c8b0ff; color: #2a1060; }
.ps-card {
  position: relative; width: 100%; min-height: 118px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 4px 18px; font: inherit; color: #fff; cursor: default; border: 0;
  box-shadow: 0 0 0 3px #141824, inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -5px 0 rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.ps-card.t-coins { background: linear-gradient(#e0a020, #a86a10); }
.ps-card.t-points { background: linear-gradient(#8a64f0, #5232b0); }
.ps-card.t-poke { background: linear-gradient(#e8503c, #a02818); }
.ps-card.t-great { background: linear-gradient(#4a8ae8, #23509e); }
.ps-card.t-ultra { background: linear-gradient(#3a3a48, #18181f); }
.ps-card.t-ultra::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px #f8c830; }
.ps-card.t-rainbow { background: linear-gradient(135deg, #ff4a4a, #ff9a2a, #ffe23a, #5ad85a, #4aa8ff, #9a6aff); }
.ps-item { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.ps-item img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.45)); }
.ps-item b { font-weight: normal; font-size: 14px; }
.ps-item.sub { flex-direction: row; gap: 3px; }
.ps-item.sub img { width: 20px; height: 20px; }
.ps-item.sub b { font-size: 13px; }
.ps-state { position: absolute; bottom: 3px; left: 0; right: 0; font-size: 12px; color: #ffe066; }
.ps-lock { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; image-rendering: pixelated; opacity: 0.9; }
/* estados */
.ps-col.locked .ps-card { filter: saturate(0.45) brightness(0.62); }
.ps-col.claimed .ps-card { filter: saturate(0.3) brightness(0.55); }
.ps-col.claimed .ps-state { font-size: 34px; bottom: auto; top: 50%; transform: translateY(-50%); color: #7dff8f; text-shadow: 2px 2px 0 #141824; }
.ps-col.ready .ps-card { cursor: pointer; animation: ps-bob 1.1s ease-in-out infinite; box-shadow: 0 0 0 3px #141824, 0 0 0 6px #ffe066, 0 0 18px 6px rgba(255, 224, 102, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.22), inset 0 -5px 0 rgba(0, 0, 0, 0.3); }
.ps-col.ready .ps-state { color: #fff; background: #2a9a3a; left: 6px; right: 6px; box-shadow: 0 0 0 2px #141824; }
.ps-col.milestone .ps-card, .ps-col.final .ps-card { min-height: 130px; }
.ps-col.final { width: 124px; }
.ps-col.final .ps-card { box-shadow: 0 0 0 3px #141824, 0 0 0 6px #f8c830, 0 0 0 9px #141824, inset 0 3px 0 rgba(255, 255, 255, 0.22); }
@keyframes ps-bob { 50% { transform: translateY(-4px); } }
/* la vía que une los niveles */
.ps-rail { position: relative; align-self: stretch; height: 12px; margin: 12px -5px 0; background: #1a2242; box-shadow: 0 3px 0 #141824, 0 -3px 0 #141824; }
.ps-col:first-child .ps-rail { margin-left: 50%; }
.ps-col:last-child .ps-rail { margin-right: 50%; }
.ps-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--fill) * 100%); background: linear-gradient(#bfffb0, #47d65a 50%, #2a9a3a); }
.ps-dot {
  position: relative; margin-top: -24px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #2c3866; color: #c8d4ff; font-size: 16px; box-shadow: 0 0 0 3px #141824; z-index: 1;
}
.ps-col.ready .ps-dot, .ps-col.claimed .ps-dot { background: radial-gradient(circle at 35% 30%, #c8ffb8, #47d65a 55%, #2a8a3a); color: #10301a; }
.ps-col.milestone .ps-dot, .ps-col.final .ps-dot { width: 40px; height: 40px; margin-top: -27px; font-size: 18px; }
.ps-col.final .ps-dot { background: radial-gradient(circle at 35% 30%, #fff6b0, #f8c830 45%, #b07810); color: #3a2500; }

@media (max-height: 500px) {
  .ps-hero { padding: 2px 8px; margin-bottom: 4px; gap: 8px; }
  .ps-medal { width: 48px; height: 48px; margin: 6px; }
  .ps-medal b { font-size: 24px; }
  .ps-name { font-size: 18px; }
  .ps-xpbar { height: 16px; }
  #ps-track { padding-top: 14px; }
  .ps-col { width: 88px; }
  .ps-col.final { width: 104px; }
  .ps-card { min-height: 92px; padding: 6px 3px 16px; }
  .ps-col.milestone .ps-card, .ps-col.final .ps-card { min-height: 100px; }
  .ps-item img { width: 32px; height: 32px; }
  .ps-item b { font-size: 12px; }
  .pass-btn .pb-medal { width: 30px; height: 30px; font-size: 16px; }
  .pass-btn .pb-top b { font-size: 14px; }
}

/* tarjetas todas de la misma altura para que la vía quede recta; barra de desplazamiento pixel */
.ps-card, .ps-col.milestone .ps-card, .ps-col.final .ps-card { height: 122px; min-height: 0 !important; }
.ps-col.milestone .ps-dot, .ps-col.final .ps-dot { margin-top: -26px; }
#ps-track::-webkit-scrollbar { height: 10px; }
#ps-track::-webkit-scrollbar-track { background: #141824; }
#ps-track::-webkit-scrollbar-thumb { background: #ffd23a; box-shadow: inset 0 -3px 0 #b07810, inset 0 0 0 2px #141824; }
#ps-track { scrollbar-color: #ffd23a #141824; }
.ps-col.claimed .ps-item { opacity: 0.6; }
@media (max-height: 500px) { .ps-card, .ps-col.milestone .ps-card, .ps-col.final .ps-card { height: 100px; } }

/* etiquetas del pase nítidas: sin sombra heredada y sin medio píxel por centrar con transform */
.ps-ribbon { text-shadow: none !important; transform: none !important; left: 0 !important; right: 0; margin: 0 auto; width: max-content; font-size: 13px !important; line-height: 16px; padding: 0 7px !important; }
.ps-ribbon.small { font-size: 12px !important; }

/* =====================================================================
   LOBBY EN PC: pensado para pantalla grande (el móvil sigue igual)
   ===================================================================== */
@media (min-width: 1100px) and (min-height: 640px) {
  .lb {
    max-width: 1560px; margin: 0 auto;
    grid-template-columns: 340px 1fr 360px; gap: 18px 28px; padding: 18px 30px 10px;
  }
  /* barra de arriba */
  .lb-top { gap: 16px; }
  .lb-top .lb-title { display: block !important; font-size: 48px; text-shadow: 0 4px 0 #0c1838, 0 0 24px rgba(255, 210, 60, 0.25); }
  .profile-chip { padding-right: 14px !important; }
  .profile-chip img#pf-avatar { width: 56px !important; height: 56px !important; }
  .profile-chip b { font-size: 22px !important; }
  .profile-chip small { font-size: 17px !important; }
  .lb-money { gap: 12px; }
  .lb-money .pill { font-size: 24px; padding: 2px 14px 2px 6px !important; }
  .lb-money .pill img { width: 30px; height: 30px; }
  .lb-money .icon-btn .pxi { width: 34px; height: 34px; }

  /* izquierda: menú en lista, como un juego de PC */
  .lb-left { gap: 14px; justify-content: center; }
  .lb-menu { grid-template-columns: 1fr; gap: 10px; }
  .tile { min-height: 64px; font-size: 24px; gap: 14px; padding: 0 10px !important; }
  .tile .ib { width: 46px; height: 46px; }
  .tile .ib .pxi { width: 34px; height: 34px; }
  .tile .badge { right: -14px; top: 50%; transform: translateY(-50%); }
  .tile:hover { transform: translateX(6px); }
  .chest-widget { padding-right: 14px !important; }
  .cw-ball { width: 92px !important; height: 92px !important; }
  .cw-ball img { width: 64px !important; height: 64px !important; }
  .cw-info b { font-size: 21px; }
  .cw-info small { font-size: 15px; }
  .cw-info .bar { height: 16px; }

  /* centro: el Pokémon grande, con foco de luz */
  .lb-center::before {
    content: ''; position: absolute; left: 50%; top: 46%; width: min(620px, 100%); aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 230, 140, 0.22), rgba(255, 230, 140, 0.06) 45%, transparent 70%); pointer-events: none;
  }
  #hero-cv { width: min(100%, 520px) !important; }
  .hero-plate { font-size: 32px !important; padding: 2px 22px !important; gap: 16px; }
  .hero-plate span { font-size: 22px !important; }
  .lb-center .hint { display: block !important; font-size: 17px; }
  .lb-center:hover #hero-cv { filter: drop-shadow(0 0 14px rgba(255, 220, 120, 0.35)); }

  /* derecha: pase, modo y JUGAR grandes */
  .lb-right { gap: 16px; justify-content: flex-end; }
  .pass-btn { gap: 4px 12px; padding: 4px 10px 4px 4px !important; }
  .pass-btn .pb-medal { width: 56px; height: 56px; font-size: 28px; }
  .pass-btn .pb-top b { font-size: 26px; }
  .pass-btn .pb-top small { font-size: 16px; }
  .pass-btn .bar { height: 14px; }
  .mode-card { padding: 6px 10px !important; gap: 14px; }
  .mode-card img { width: 76px !important; height: 76px !important; }
  .mode-card b { font-size: 28px !important; }
  .mode-card small { font-size: 15px !important; }
  .lb-right .big { font-size: 46px !important; padding-top: 14px !important; padding-bottom: 18px !important; }
  .lb-right .big::after { width: 52px !important; height: 52px !important; left: 14px !important; }
  .lb-bottom .legal { font-size: 13px; }
}
@media (min-width: 1600px) and (min-height: 860px) {
  .lb { grid-template-columns: 380px 1fr 400px; }
  .tile { min-height: 74px; font-size: 27px; }
  #hero-cv { width: min(100%, 600px) !important; }
}

/* panel de misiones de hoy en el lobby (solo PC) */
.lb-quests { display: none; }
@media (min-width: 1100px) and (min-height: 640px) {
  .lb-quests {
    display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: #fff; cursor: pointer; padding: 4px 8px 8px !important;
    border-style: solid; border-width: 12px; border-image-slice: 12 fill; border-image-width: 12px; border-image-source: var(--sk-win);
    background: transparent; text-shadow: 2px 2px 0 #02040c; margin-bottom: auto;
  }
  .lq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .lq-head b { font-weight: normal; font-size: 22px; color: #ffe066; }
  .lq-head small { font-size: 14px; color: #c8d4ff; }
  .lq-head small::before { content: '⏳ '; }
  .lq-row { display: flex; flex-direction: column; gap: 3px; }
  .lq-row small { font-size: 15px; }
  .lq-row .bar { height: 10px; }
  .lq-row.done small { color: #7dff8f; }
  .lq-row.done small::after { content: ' · ¡Reclamar!'; color: #ffe066; }
  .lq-row.claimed { opacity: 0.5; }
  .lq-row.claimed small::after { content: ' ✓'; color: #7dff8f; }
  .lb-quests:hover { filter: brightness(1.1); }
}

/* =====================================================================
   SALA CON AMIGOS: huecos junto a tu Pokémon y pantalla para invitar
   ===================================================================== */
.party-slots { grid-area: center; position: relative; pointer-events: none; z-index: 2; }
.pslot {
  pointer-events: auto; position: absolute; top: 34%; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 2px; font: inherit; color: #fff; cursor: pointer; line-height: 1.05;
  background: rgba(10, 16, 40, 0.55); border: 3px dashed rgba(255, 255, 255, 0.45); text-shadow: 1px 1px 0 #02040c;
}
.pslot.left { left: 2%; }
.pslot.right { right: 2%; }
.pslot .plus { font-size: 34px; line-height: 0.9; color: #ffe066; }
.pslot small { font-size: 12px; color: #c8d4ff; }
.pslot:hover { background: rgba(30, 50, 110, 0.75); }
.pslot.filled { border-style: solid; border-color: #141824; background: rgba(30, 50, 110, 0.85); box-shadow: inset 0 0 0 2px #5ab0ff; }
.pslot.filled.ready { box-shadow: inset 0 0 0 2px #7dff8f; }
.pslot.filled.ready small { color: #7dff8f; }
.pslot img { width: 44px; height: 44px; image-rendering: pixelated; }
.pslot b { font-weight: normal; font-size: 12px; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pslot .crown { position: absolute; top: -10px; font-style: normal; color: #ffd23a; font-size: 16px; }
#play.waiting { filter: saturate(0.5) brightness(0.85); }
.pt-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; text-align: left; }
.pt-box { background: rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 2px #141824; padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.pt-box h3, .pt-title { margin: 0; font-weight: normal; font-size: 18px; color: #ffe066; text-align: left; }
.pt-title { margin: 10px 0 4px; }
.pt-hint { color: #c8d4ff; font-size: 13px; margin: 0; }
.pt-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-code small { color: #c8d4ff; }
.pt-code b { font-weight: normal; font-size: 30px; letter-spacing: 4px; color: #fff; background: #10183a; padding: 0 10px; box-shadow: 0 0 0 3px #141824, inset 0 0 0 2px #ffd23a; }
.pt-members { display: flex; flex-direction: column; gap: 4px; }
.pt-mem, .pt-friend { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 2px #141824; }
.pt-mem.me { box-shadow: 0 0 0 2px #141824, inset 0 0 0 2px #7dff8f; }
.pt-mem img, .pt-friend img { width: 34px; height: 34px; image-rendering: pixelated; }
.pt-mem span, .pt-friend span { flex: 1; display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pt-mem b, .pt-friend b { font-weight: normal; font-size: 16px; }
.pt-mem b i { font-style: normal; color: #ffd23a; font-size: 12px; }
.pt-mem small, .pt-friend small { font-size: 12px; color: #c8d4ff; }
.pt-mem.invited small { color: #ffe066; }
.pt-join { display: flex; gap: 6px; }
.pt-join input { flex: 1; min-width: 0; font: inherit; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; color: #fff; background: #10183a; border: 3px solid #141824; box-shadow: inset 0 0 0 2px var(--frame, #e8b838); padding: 2px 8px; }
#pt-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.pt-friend.off { opacity: 0.55; }
.pt-friend small { color: #7dff8f; }
.pt-friend.off small { color: #c8d4ff; }
.pt-on { color: #7dff8f; font-size: 13px; }
.pt-off { color: #8f9ac0; font-size: 13px; }
.bot-tag { font-style: normal; font-size: 10px; margin-left: 5px; padding: 0 4px; vertical-align: 2px; background: #3a4466; color: #c8d4ff; box-shadow: 0 0 0 1px #141824; text-shadow: none; }
.bot-tag.friend { background: #2a9a3a; color: #fff; }
#toast {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 50; padding: 4px 14px; font-size: 16px; color: #fff;
  background: rgba(14, 20, 48, 0.95); box-shadow: 0 0 0 3px #141824, inset 0 0 0 2px #ffd23a; pointer-events: none; max-width: 90vw; text-align: center;
}
@media (max-height: 500px) {
  .pslot { width: 60px; top: 28%; }
  .pslot img { width: 32px; height: 32px; }
  .pslot .plus { font-size: 26px; }
  .pslot small { font-size: 10px; }
  .pt-code b { font-size: 22px; }
  .pt-join input { font-size: 18px; }
}
@media (max-width: 640px) { .pt-grid { grid-template-columns: 1fr; } }
@media (min-width: 1100px) and (min-height: 640px) {
  .pslot { width: 110px; top: 30%; padding: 8px 4px; }
  .pslot.left { left: 4%; } .pslot.right { right: 4%; }
  .pslot img { width: 64px; height: 64px; }
  .pslot .plus { font-size: 52px; }
  .pslot b { font-size: 16px; max-width: 100px; }
  .pslot small { font-size: 14px; }
}

/* =====================================================================
   LOBBY CON TU EQUIPO: menú compacto y tres Pokémon en el centro
   ===================================================================== */
.lb-menu { grid-template-columns: 1fr !important; }
.lb-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tile.icon { justify-content: center; padding: 0 !important; }
.tile.icon .badge { right: -8px; top: -8px; transform: none; }
.lb-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.hero-stage { position: relative; width: 100%; max-width: 640px; }
#hero-cv { display: block; width: 100% !important; height: auto; image-rendering: pixelated; }
.hero-hit { position: absolute; left: 33%; right: 33%; top: 10%; bottom: 0; background: none; border: 0; cursor: pointer; }
.hero-hit:hover + .party-slots ~ * , .hero-hit:focus { outline: none; }
.party-slots { position: absolute; inset: 0; grid-area: auto; pointer-events: none; }
.pslot { top: auto !important; bottom: 6%; width: 30% !important; }
.pslot.left { left: 2% !important; }
.pslot.right { right: 2% !important; }
.pslot:not(.filled) { height: 66%; justify-content: center; }
.pslot.filled { background: none !important; border: 0 !important; box-shadow: none !important; height: 88%; justify-content: flex-end; padding: 0 !important; }
.ptag { display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 1px 8px; background: rgba(10, 16, 40, 0.85); box-shadow: 0 0 0 2px #141824; position: relative; }
.ptag b { font-weight: normal; font-size: 13px; max-width: 100%; }
.ptag small { font-size: 11px; color: #c8d4ff; }
.pslot.filled.ready .ptag small { color: #7dff8f; }
.ptag .crown { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-style: normal; color: #ffd23a; }
@media (max-height: 500px) {
  .lb { grid-template-columns: minmax(128px, 0.75fr) minmax(250px, 1.9fr) minmax(160px, 0.95fr) !important; }
  .tile { min-height: 36px !important; }
  .lb-icons .tile { min-height: 38px !important; }
  .lb-icons .tile .ib { width: 28px; height: 28px; }
  .lb-icons .tile .ib .pxi { width: 22px; height: 22px; }
  .pslot:not(.filled) { height: 58%; }
  .ptag b { font-size: 11px; }
  .ptag small { font-size: 10px; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  .lb { grid-template-columns: 300px 1fr 360px !important; }
  .hero-stage { max-width: 820px; }
  .lb-icons .tile { min-height: 70px; }
  .lb-icons .tile .ib { width: 52px; height: 52px; }
  .lb-icons .tile .ib .pxi { width: 40px; height: 40px; }
  .tile.icon:hover { transform: translateY(-3px); }
  .ptag b { font-size: 18px; }
  .ptag small { font-size: 14px; }
  .pslot { width: 28% !important; }
}
.pslot:not(.filled) { width: 22% !important; height: 46% !important; bottom: 14%; }
.pslot.left:not(.filled) { left: 4% !important; } .pslot.right:not(.filled) { right: 4% !important; }
@media (max-height: 500px) { .pslot:not(.filled) { height: 42% !important; } .pslot .plus { font-size: 22px; } }

/* PC: el lobby ocupa toda la pantalla (sin márgenes enormes a los lados) y crece con ella */
@media (min-width: 1100px) and (min-height: 640px) {
  .lb {
    max-width: none !important; margin: 0 !important;
    grid-template-columns: clamp(280px, 21vw, 480px) 1fr clamp(330px, 23vw, 500px) !important;
    padding: 1.6vh 2vw 1vh !important; gap: 2vh 2.2vw !important;
  }
  .hero-stage { max-width: min(1100px, 100%) !important; }
  .tile { min-height: clamp(62px, 7.5vh, 96px) !important; font-size: clamp(22px, 1.55vw, 34px) !important; }
  .tile .ib { width: clamp(44px, 3vw, 64px) !important; height: clamp(44px, 3vw, 64px) !important; }
  .tile .ib .pxi { width: 72% !important; height: 72% !important; }
  .lb-icons .tile { min-height: clamp(66px, 8vh, 104px) !important; }
  .lb-top .lb-title { font-size: clamp(44px, 3.4vw, 72px) !important; }
  .profile-chip img#pf-avatar { width: clamp(52px, 3.6vw, 76px) !important; height: clamp(52px, 3.6vw, 76px) !important; }
  .profile-chip b { font-size: clamp(20px, 1.4vw, 30px) !important; }
  .lb-money .pill { font-size: clamp(22px, 1.5vw, 32px) !important; }
  .lb-money .pill img { width: clamp(28px, 1.9vw, 40px) !important; height: clamp(28px, 1.9vw, 40px) !important; }
  .cw-ball { width: clamp(88px, 6vw, 124px) !important; height: clamp(88px, 6vw, 124px) !important; }
  .cw-ball img { width: 70% !important; height: 70% !important; }
  .cw-info b { font-size: clamp(20px, 1.4vw, 30px) !important; }
  .hero-plate { font-size: clamp(30px, 2.1vw, 44px) !important; }
  .lq-head b { font-size: clamp(22px, 1.4vw, 30px) !important; }
  .lq-row small { font-size: clamp(15px, 0.95vw, 20px) !important; }
  .pass-btn .pb-medal { width: clamp(54px, 3.6vw, 76px) !important; height: clamp(54px, 3.6vw, 76px) !important; font-size: clamp(26px, 1.8vw, 38px) !important; }
  .pass-btn .pb-top b { font-size: clamp(24px, 1.7vw, 36px) !important; }
  .mode-card img { width: clamp(72px, 5vw, 104px) !important; height: clamp(72px, 5vw, 104px) !important; }
  .mode-card b { font-size: clamp(26px, 1.8vw, 38px) !important; }
  .lb-right .big { font-size: clamp(44px, 3.2vw, 66px) !important; }
}

/* =====================================================================
   FLECHAS PIXEL ART (volver, cursores de menú y evolución)
   ===================================================================== */
.back { font-size: 0 !important; min-width: 52px; display: inline-flex !important; align-items: center; justify-content: center; }
.back::after { content: ''; display: block; width: 30px; height: 30px; background: var(--ico-arrow-lw) center / contain no-repeat; image-rendering: pixelated; }
.pn-head .back::after { background-image: var(--ico-arrow-l); }
.back:hover::after { animation: arrow-nudge 0.5s steps(2) infinite; }
@keyframes arrow-nudge { 50% { transform: translateX(-3px); } }
.lb-btn:hover::before, .tabs button.sel::before, .px-seg button.sel::before, .mode-card2.sel::before {
  content: '' !important; width: 12px; height: 12px; background: var(--ico-arrow-r) center / contain no-repeat; image-rendering: pixelated; text-shadow: none !important;
}
.modal-choices button:first-child::before, .modal-choices button:hover::before {
  content: '' !important; width: 13px; height: 13px; top: 8px !important; background: var(--ico-arrow-rd) center / contain no-repeat; image-rendering: pixelated;
}
.modal-choices button:hover ~ button::before, .modal-choices:hover button:first-child:not(:hover)::before { background: none; }
#dt-evo .evo-arrow { width: 12px; height: 12px; flex: none; background: var(--ico-arrow-r) center / contain no-repeat; image-rendering: pixelated; }
.with-arrow { display: inline-flex !important; align-items: center; gap: 6px; }
.with-arrow::before { content: ''; width: 16px; height: 16px; background: var(--ico-arrow-lw) center / contain no-repeat; image-rendering: pixelated; }
@media (max-height: 500px) { .back::after { width: 24px; height: 24px; } .back { min-width: 44px; } }

.px-select { font: inherit; font-size: 16px; color: #fff; background: #10183a; border: 3px solid #141824; box-shadow: inset 0 0 0 2px var(--frame, #e8b838); padding: 2px 8px; }

/* botón de donar en el menú del lobby */
.lb-icons { grid-template-columns: repeat(3, 1fr) !important; }
.sec-red { border-image-source: var(--sk-red) !important; }
.tile.donate .ib { animation: heartbeat 1.6s ease-in-out infinite; }
@keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 80% { transform: scale(1); } 90% { transform: scale(1.08); } }

/* =====================================================================
   MÓVIL (iPhone y demás en horizontal): zona segura y lobby compacto
   ===================================================================== */
:root { --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); }
.lb { padding-left: calc(10px + var(--sal)) !important; padding-right: calc(10px + var(--sar)) !important; }
.screen > .panel { margin-left: calc(8px + var(--sal)) !important; margin-right: calc(8px + var(--sar)) !important; }
#btn-pause { left: calc(10px + var(--sal)) !important; }
.lb-top-icons { display: none; }
@media (max-height: 520px) {
  .lb { gap: 4px 8px !important; padding-top: 4px !important; padding-bottom: 2px !important;
        grid-template-columns: minmax(118px, 0.7fr) minmax(240px, 2fr) minmax(150px, 0.9fr) !important; }
  .lb-top { gap: 6px !important; }
  .lb-top-icons { display: flex; gap: 4px; margin-left: auto; }
  .lb-top-icons .lb-icons { display: flex; gap: 4px; }
  .lb-top-icons .tile { min-height: 0 !important; width: 38px; height: 38px; padding: 0 !important; border-width: 8px !important; border-image-width: 8px !important; }
  .lb-top-icons .tile .ib { width: 24px !important; height: 24px !important; box-shadow: none !important; }
  .lb-top-icons .tile .ib .pxi { width: 18px !important; height: 18px !important; }
  .lb-top-icons .tile .badge { right: -10px !important; top: -10px !important; transform: none !important; min-width: 18px; height: 18px; font-size: 11px; line-height: 12px; padding: 0 4px; }
  .lb-money { margin-left: 0 !important; gap: 4px !important; }
  .lb-money .pill { font-size: 14px !important; padding: 0 6px 0 2px !important; border-width: 8px !important; border-image-width: 8px !important; }
  .lb-money .pill img { width: 18px !important; height: 18px !important; }
  .lb-money .icon-btn .pxi { width: 22px !important; height: 22px !important; }
  .profile-chip { border-width: 8px !important; border-image-width: 8px !important; }
  .profile-chip img#pf-avatar { width: 30px !important; height: 30px !important; }
  .profile-chip b { font-size: 13px !important; }
  .lb-left { gap: 4px !important; justify-content: flex-start !important; }
  .lb-menu { gap: 4px !important; }
  .tile { min-height: 34px !important; font-size: 13px !important; border-width: 9px !important; border-image-width: 9px !important; }
  .tile .ib { width: 24px !important; height: 24px !important; }
  .tile .ib .pxi { width: 18px !important; height: 18px !important; }
  .chest-widget { border-width: 9px !important; border-image-width: 9px !important; }
  .cw-ball { width: 46px !important; height: 46px !important; border-width: 6px !important; border-image-width: 6px !important; }
  .cw-ball img { width: 30px !important; height: 30px !important; }
  .cw-info b { font-size: 12px !important; }
  .cw-info small { font-size: 10px !important; }
  .cw-info .bar { height: 8px !important; }
  .hero-plate { font-size: 15px !important; padding: 0 10px !important; border-width: 8px !important; border-image-width: 8px !important; }
  .lb-right { gap: 5px !important; }
  .pass-btn, .mode-card { border-width: 9px !important; border-image-width: 9px !important; }
  .pass-btn .pb-medal { width: 26px !important; height: 26px !important; font-size: 14px !important; }
  .mode-card img { width: 32px !important; height: 32px !important; }
  .mode-card b { font-size: 13px !important; }
  .mode-card small { font-size: 10px !important; }
  .lb-right .big { font-size: 20px !important; padding-top: 2px !important; padding-bottom: 4px !important; }
  .lb-right .big::after { width: 26px !important; height: 26px !important; }
  .lb-top .lb-title { display: none !important; }
  .pslot:not(.filled) { width: 20% !important; height: 40% !important; }
}
/* pantallas aún más bajas (Safari con la barra de direcciones visible) */
@media (max-height: 380px) {
  .tile { min-height: 30px !important; font-size: 12px !important; }
  .cw-ball { width: 40px !important; height: 40px !important; }
  .cw-info small { display: none; }
  .lb-right .big { font-size: 18px !important; }
  .mode-card small { display: none; }
  .hero-plate { font-size: 13px !important; }
}

/* botón de donar: corazón + texto, arriba a la izquierda de las monedas */
.donate-btn {
  display: flex; align-items: center; gap: 6px; font: inherit; font-size: 17px; color: #fff; cursor: pointer;
  padding: 0 10px 0 4px !important; margin-left: auto;
  border-style: solid; border-width: 12px; border-image-slice: 12 fill; border-image-width: 12px; border-image-source: var(--sk-red);
  background: transparent; text-shadow: 2px 2px 0 #6a120c;
}
.donate-btn .pxi { width: 24px; height: 24px; image-rendering: pixelated; animation: heartbeat 1.6s ease-in-out infinite; }
.donate-btn:hover { filter: brightness(1.12); }
.donate-btn:active { transform: translateY(3px); }
.lb-top-icons + .donate-btn { margin-left: 0; }
.lb-money { margin-left: 0 !important; }
@media (max-height: 520px) {
  .donate-btn { font-size: 13px; border-width: 8px !important; border-image-width: 8px; padding: 0 6px 0 2px !important; gap: 3px; }
  .donate-btn .pxi { width: 18px; height: 18px; }
}
@media (min-width: 1100px) and (min-height: 640px) {
  .donate-btn { font-size: clamp(20px, 1.4vw, 28px); }
  .donate-btn .pxi { width: clamp(26px, 1.8vw, 36px); height: clamp(26px, 1.8vw, 36px); }
}