* { margin: 0; padding: 0; box-sizing: border-box; }
.btn-icon-img { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; image-rendering: auto; }
.title-icon-img { width: 28px; height: 28px; vertical-align: middle; margin-right: 6px; image-rendering: auto; }
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #0a0e1a;
  color: #e0e8f0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}
#app {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  position: relative;
}
.screen { display: none; padding: 20px 16px; }
.screen.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.logo {
  font-size: 48px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, #ff6b35, #f7c948, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 6px;
  margin-top: 40px;
}
.subtitle { text-align: center; color: #8892a8; margin-bottom: 30px; font-size: 14px; }
.input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
  background: #141828;
  color: #e0e8f0;
  font-size: 18px;
  outline: none;
  transition: border .2s;
  margin-bottom: 16px;
  text-align: center;
}
.input:focus { border-color: #ff6b35; }

.btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, #ff6b35, #e85d2c);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255,107,53,.3);
}
.btn-hunt { background: linear-gradient(135deg, #2d8a4e, #1e6b3a); color: #fff; }
.btn-team { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.btn-cards { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.btn-center { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.btn-heal {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 4px 20px rgba(34,197,94,.3);
  font-size: 20px;
  padding: 18px;
}
.btn-move {
  flex: 1;
  min-width: 45%;
  padding: 12px 8px;
  border: 2px solid #2a2e3e;
  border-radius: 10px;
  background: #141828;
  color: #e0e8f0;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
}
.btn-move:hover { border-color: #ff6b35; background: #1c2034; }
.btn-move:disabled { opacity: .4; cursor: not-allowed; }
.btn-move .move-pp { font-size: 11px; color: #6b7280; display: block; margin-top: 2px; }
.btn-back {
  background: none;
  border: 1px solid #2a2e3e;
  color: #8892a8;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 16px;
  font-size: 14px;
}
.btn-back:hover { background: #141828; }

.screen-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.screen-sub { color: #6b7280; margin-bottom: 24px; }

.welcome-pokemon { text-align: center; font-size: 80px; margin: 20px 0; animation: float 2s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.starters-container { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.starter-card {
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 16px;
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  width: 130px;
  color: inherit;
  font: inherit;
}
.starter-card:hover { border-color: #ff6b35; transform: translateY(-4px); box-shadow: 0 8px 25px rgba(255,107,53,.2); }
.starter-card .sprite { font-size: 60px; display: block; margin-bottom: 8px; }
.starter-card .name { font-weight: 700; font-size: 16px; }
.starter-card .types { font-size: 12px; color: #6b7280; margin-top: 4px; }

.starter-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(10px);
}
.starter-picker-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 760px);
  overflow-y: auto;
  padding: 28px 24px 24px;
  border-radius: 22px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 12, 24, 0.99)),
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.12), transparent 55%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.starter-picker-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #38bdf8;
  margin-bottom: 8px;
}
.starter-picker-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  color: #f8fafc;
  margin-bottom: 8px;
}
.starter-picker-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 22px;
}
.starter-picker-overlay .starters-container {
  gap: 16px;
}
.starter-picker-overlay .starter-card {
  width: min(180px, 100%);
  padding: 22px 16px;
  border-color: rgba(56, 189, 248, 0.25);
}
.starter-picker-overlay .starter-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.18);
}
.starter-picker-overlay .starter-card .sprite {
  font-size: 72px;
}
.starter-picker-note {
  margin-top: 18px;
  font-size: 12px;
  color: #64748b;
}

.hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: #141828;
  border-radius: 12px;
}
.trainer-info { font-size: 18px; font-weight: 700; }
.stats-bar { display: flex; gap: 16px; font-size: 13px; color: #8892a8; }
.starter-display { text-align: center; padding: 30px; background: #141828; border-radius: 16px; margin-bottom: 20px; }
.starter-display .sprite { font-size: 100px; display: block; }
.starter-display .info { font-size: 20px; font-weight: 700; margin-top: 8px; }
.starter-display .level { color: #6b7280; font-size: 14px; }
.hub-buttons { display: flex; flex-direction: column; gap: 12px; }

.areas-container { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.area-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  min-height: 80px;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  background: #141828;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
.area-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: -2;
}
.area-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,14,26,.85) 0%, rgba(10,14,26,.6) 60%, rgba(10,14,26,.3) 100%);
  z-index: -1;
}
.area-btn:hover { border-color: #ff6b35; transform: scale(1.02); }
.area-btn .area-icon { font-size: 32px; position: relative; z-index: 1; }
.area-btn .area-name { font-weight: 700; font-size: 16px; position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.area-btn .area-desc { font-size: 12px; color: #d1d5db; position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.hunt-result {
  margin-top: 16px;
  padding: 20px;
  background: #141828;
  border-radius: 12px;
  text-align: center;
  border: 2px solid #2a2e3e;
}
.hidden { display: none !important; }

.battle-container { display: flex; flex-direction: column; gap: 12px; position: relative; }
.battle-header { text-align: center; font-size: 18px; font-weight: 700; color: #ff6b35; margin-bottom: 8px; }
.battle-arena {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto minmax(156px, auto) auto;
  column-gap: 8px;
  row-gap: 6px;
  padding: 16px;
  background: #141828;
  border-radius: 16px;
  border: 2px solid #2a2e3e;
  min-height: 248px;
  align-items: end;
}
.battle-arena > .enemy-side,
.battle-arena > .player-side,
.dg-battle-arena > .enemy-side,
.dg-battle-arena > .player-side {
  display: contents;
}
.battle-arena > .vs-divider,
.battle-arena > .vs-badge,
.dg-battle-arena > .vs-divider {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  font-size: 24px;
  color: #ff6b35;
  animation: pulse 1s ease-in-out infinite;
}
.enemy-side .hp-bar-container,
.dg-battle-arena .enemy-side .hp-bar-container {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  max-width: 168px;
}
.enemy-side .pokemon-sprite,
.enemy-side .sprite,
#enemySprite, #dgEnemySprite, #pvpEnemySprite, #realEnemySprite {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}
.enemy-side .type-badge,
.enemy-side .type-badges,
#enemyType, #dgEnemyType, #pvpEnemyType, #realEnemyType {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
}
.player-side .pokemon-sprite,
.player-side .sprite,
#playerSprite, #dgPlayerSprite, #pvpPlayerSprite, #realPlayerSprite {
  grid-column: 3;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}
.player-side .type-badge,
.player-side .type-badges,
#playerType, #dgPlayerType, #pvpPlayerType, #realPlayerType {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}
.player-side .hp-bar-container,
.dg-battle-arena .player-side .hp-bar-container {
  grid-column: 3;
  grid-row: 3;
  justify-self: center;
  width: 100%;
  max-width: 168px;
}
.enemy-side, .player-side { text-align: center; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.pokemon-sprite, #realPlayerSprite, #realEnemySprite { position: relative; }
.sprite { position: relative; }
.pokemon-sprite { font-size: 64px; margin: 0; display: flex; align-items: flex-end; justify-content: center; min-height: 156px; width: 100%; overflow: visible; }
.status-float-icon { position: absolute; top: -12px; right: -8px; font-size: 22px; z-index: 10; display: flex; gap: 2px; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000); pointer-events: none; }
#realEnemySprite, #realPlayerSprite {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  width: 100%;
  overflow: visible;
}
.enemy-sprite { animation: shake 2s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.player-sprite { animation: float 2s ease-in-out infinite; }

.type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin: 4px 0;
}
.type-grass { background: #78c850; color: #000; }
.type-fire { background: #f08030; color: #fff; }
.type-water { background: #6890f0; color: #fff; }
.type-bug { background: #a8b820; color: #fff; }
.type-normal { background: #a8a878; color: #fff; }
.type-poison { background: #a040a0; color: #fff; }
.type-electric { background: #f8d030; color: #000; }
.type-ground { background: #e0c068; color: #000; }
.type-flying { background: #a890f0; color: #fff; }
.type-psychic { background: #f85888; color: #fff; }
.type-ice { background: #98d8d8; color: #000; }
.type-dragon { background: #7038f8; color: #fff; }
.type-dark { background: #705848; color: #fff; }
.type-fairy { background: #ee99ac; color: #fff; }
.type-fighting { background: #c03028; color: #fff; }
.type-rock { background: #b8a038; color: #fff; }
.type-ghost { background: #705898; color: #fff; }
.type-steel { background: #b8b8d0; color: #000; }

.hp-bar-container { margin: 4px 0; }
.hp-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.hp-bar {
  height: 8px;
  background: #2a2e3e;
  border-radius: 4px;
  overflow: hidden;
}
.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 4px;
  transition: width .5s ease;
}
.hp-text { font-size: 11px; color: #6b7280; }

.battle-log {
  height: 80px;
  overflow-y: auto;
  padding: 8px 12px;
  background: #0a0e1a;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #2a2e3e;
}
.battle-log .log-entry { margin-bottom: 4px; }
.battle-log .log-damage { color: #ef4444; }
.battle-log .log-heal { color: #22c55e; }
.battle-log .log-info { color: #fbbf24; }
.battle-log .log-faint { color: #ef4444; font-weight: 700; }

.move-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.battle-result {
  text-align: center;
  padding: 20px;
  background: #141828;
  border-radius: 16px;
  border: 2px solid #2a2e3e;
  margin-top: 12px;
}
.battle-result .result-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.battle-result .result-win { color: #22c55e; }
.battle-result .result-lose { color: #ef4444; }
.battle-result .drop-info { margin-top: 16px; padding: 16px; background: #1a1e30; border-radius: 12px; border: 2px solid #fbbf24; }
.battle-result .drop-info .card-name { font-size: 20px; font-weight: 700; color: #fbbf24; }
.battle-result .drop-info .card-rarity { font-size: 13px; margin-top: 4px; }
.battle-result .drop-info .rarity-COMMON { color: #a8a878; }
.battle-result .drop-info .rarity-RARE { color: #06b6d4; }
.battle-result .drop-info .rarity-EPIC { color: #a855f7; }
.battle-result .drop-info .rarity-LEGENDARY { color: #f59e0b; }

.team-container { display: flex; flex-direction: column; gap: 12px; }
.team-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
}
.team-card .sprite { font-size: 48px; }
.team-card .info { flex: 1; }
.team-card .name { font-weight: 700; }
.team-card .level { font-size: 12px; color: #6b7280; }

.mission-card {
  background: #1a1f2e;
  border: 1px solid #2a2e3e;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}
.mission-card.mission-claimable {
  border-color: #22c55e;
}
.mission-card.mission-claimed {
  opacity: 0.6;
}
.mission-tab {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #374151;
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
  font-size: 13px;
}
.mission-tab.active {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.card-item {
  padding: 16px;
  text-align: center;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
}
.card-item .sprite { font-size: 48px; display: block; margin-bottom: 8px; }
.card-item .card-img-wrap { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; overflow: hidden; border-radius: 8px; background: #0a0e1a; }
.card-item .card-img-wrap img { width: auto; height: 96px; image-rendering: auto; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.card-item .name { font-weight: 700; font-size: 14px; }
.card-item .rarity { font-size: 11px; margin-top: 4px; }

.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 440px;
  width: 90%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1a1e30, #141828);
  border: 2px solid #fbbf24;
  border-radius: 12px;
  text-align: center;
  z-index: 1000;
  animation: slideDown .3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
@keyframes slideDown { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.notification .notif-title { font-size: 18px; font-weight: 700; color: #fbbf24; }
.notification .notif-body { font-size: 14px; color: #d1d5db; margin-top: 4px; }
.notification .notif-item { font-size: 16px; font-weight: 700; color: #fff; margin-top: 8px; }

.hub-chat {
  display: block;
  margin-bottom: 16px;
}
.btn-pvp { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; position: relative; }
.badge { position: absolute; top: -6px; right: -6px; background: #fbbf24; color: #1e293b; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.btn-shop { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.btn-fusion { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
.btn-inventory { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.btn-daily { background: linear-gradient(135deg, #ec4899, #db2777); color: #fff; font-size: 15px; }
.btn-trade { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; }
.btn-discord { background: linear-gradient(135deg, #5865f2, #4752c4); color: #fff; }
.btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; }
.btn-friend { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.btn-dg { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; font-size: 15px; animation: dgPulse 2s infinite; }
@keyframes dgPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(168,85,247,.4); } 50% { box-shadow: 0 0 0 8px rgba(168,85,247,0); } }
.login-row {
  display: flex; gap: 8px;
  max-width: 320px; margin: 6px auto 0;
}
.input-login {
  width: 100%;
  display: block;
  padding: 10px 12px;
  border: 1px solid #2a2e3e; border-radius: 8px;
  background: #141828; color: #e2e8f0;
  font-size: 14px; outline: none;
  box-sizing: border-box;
  transition: border .2s;
  margin-bottom: 8px;
}
.input-login:focus { border-color: #06b6d4; }
.input-login::placeholder { color: #4b5563; }

/* Auth tabs (Login / Criar Conta) */
.auth-tabs {
  display: flex; gap: 0;
  border-radius: 8px; overflow: hidden;
  border: 1px solid #2a2e3e;
  margin-bottom: 14px;
}
.auth-tab {
  flex: 1; padding: 8px;
  border: none; background: #141828;
  color: #6b7280; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .2s, color .2s;
}
.auth-tab.active {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #fff;
}
.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-form.hidden { display: none; }

.btn-login {
  width: 100%;
  padding: 10px;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: opacity .2s;
  color: #fff;
}
.btn-login:hover { opacity: .85; }
.btn-login-entrar { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.btn-login-cadastrar { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

#loginMsg {
  margin-top: 8px; font-size: 12px; color: #6b7280;
  min-height: 20px; text-align: center;
}
.online-section {
  background: linear-gradient(135deg, #1a1f2e, #141828);
  border: 1px solid #2a2e3e; border-radius: 14px;
  padding: 20px; margin-bottom: 0;
}
.online-title { font-size: 18px; font-weight: 800; color: #06b6d4; margin-bottom: 2px; }
.online-sub { font-size: 12px; color: #6b7280; margin-bottom: 12px; }

.divider {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0; color: #4b5563; font-size: 12px;

}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: #2a2e3e;
}

.local-section {
  padding: 4px 0 0;
}

.btn-logout {
  background: none; border: none; cursor: pointer;
  font-size: 16px; padding: 2px 6px; margin-left: 8px;
  opacity: .5; transition: opacity .2s; vertical-align: middle;
}
.btn-logout:hover { opacity: 1; }

.trade-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.trade-tab {
  flex: 1; padding: 10px; text-align: center;
  border: 1px solid #2a2e3e; border-radius: 10px;
  background: #141828; color: #8892a8;
  cursor: pointer; font-size: 13px; font-weight: 700;
  transition: all .2s;
}
.trade-tab.active { background: #14b8a6; color: #fff; border-color: #14b8a6; }
.trade-content { min-height: 200px; }
.trade-card-select {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.trade-card-option {
  padding: 12px; text-align: center;
  background: #141828; border: 2px solid #2a2e3e; border-radius: 12px;
  cursor: pointer; transition: all .2s;
}
.trade-card-option:hover { border-color: #14b8a6; }
.trade-card-option.selected { border-color: #14b8a6; background: #1a2a2e; }
.trade-card-option .sprite img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; }
.trade-card-option .name { font-weight: 700; font-size: 13px; margin-top: 4px; }
.trade-card-option .rarity { font-size: 11px; }
.trade-card-option .qty { font-size: 11px; color: #6b7280; }
.trade-offer {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(145deg, #141828 0%, #10141f 100%);
  border: 2px solid #2a2e3e;
  border-radius: 14px;
  margin-bottom: 12px;
}
.trade-offer:hover { border-color: #3d4a62; }
.trade-offer-card-btn {
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.trade-offer-card-btn:hover { transform: translateY(-2px); }
.trade-offer-card-btn:active { transform: scale(0.98); }
.trade-offer-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.trade-offer-from { line-height: 1.35; }
.trade-sender { font-weight: 800; color: #e2e8f0; font-size: 14px; }
.trade-offer-name { color: #14b8a6; font-weight: 700; margin-left: 4px; }
.trade-rarity { font-size: 11px; font-weight: 700; margin-left: 4px; }
.trade-offer-req {
  font-size: 13px;
  color: #cbd5e1;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 8px;
  border: 1px solid #2a2e3e;
}
.trade-req-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  margin-bottom: 4px;
}
.trade-req-value { color: #f59e0b; font-weight: 700; }
.trade-offer-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.trade-offer .info { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.trade-offer .action { display: flex; gap: 8px; margin-top: 0; }
.trade-offer .btn-accept {
  padding: 10px 18px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.trade-offer .btn-accept:hover { filter: brightness(1.08); }
.trade-offer .btn-reject { padding: 8px 16px; background: #ef4444; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 700; }
.trade-offer .btn-cancel {
  padding: 10px 16px;
  background: #4b5563;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}
.offered-card-wrap, .requested-card-wrap {
  position: relative;
  width: 80px;
  height: 112px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #3d4a62;
  margin: 0;
  flex-shrink: 0;
  background: #0a0e1a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.trade-offer-card-btn:hover .offered-card-wrap { border-color: #14b8a6; box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25); }
.offered-card-wrap.iv-glow-good { border-color: #22d3ee; }
.offered-card-wrap.iv-glow-elite { border-color: #f59e0b; }
.offered-card-wrap img, .requested-card-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.offered-card-wrap.trade-item-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.offered-card-wrap.trade-item-offer .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.offered-card-wrap.trade-item-offer .item-icon img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}
.trade-card-select .card-img-wrap {
  width: 72px;
  height: 102px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0a0e1a;
}
.trade-card-select .card-img-wrap img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.trade-item-select {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.trade-item-option {
  padding: 10px 6px;
  text-align: center;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.trade-item-option:hover { border-color: #14b8a6; }
.trade-item-option.selected { border-color: #14b8a6; background: #1a2a2e; }
.trade-item-option .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-bottom: 4px;
}
.trade-item-option .item-icon img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain;
}
.trade-item-option .name { font-weight: 700; font-size: 11px; line-height: 1.2; }
.trade-item-option .qty { font-size: 10px; color: #6b7280; margin-top: 2px; }
.battle-iv-badge {
  display: none;
  margin-left: 6px;
  vertical-align: middle;
}
.battle-iv-badge .iv-badge { font-size: 10px !important; }
.trade-card-iv-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 3px 2px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.trade-card-iv-pill {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.9);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.35);
}
.trade-card-iv-pill.iv-elite { color: #f59e0b; border-color: rgba(245, 158, 11, 0.45); }
.trade-iv-overlay .pokedex-modal { max-width: 340px; }
/* Trade shiny badge position */
.trade-shiny-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 16px;
  z-index: 3;
  animation: shinyPulse 0.8s infinite alternate;
  filter: drop-shadow(0 0 5px #facc15);
  pointer-events: none;
}
/* Shiny trade offer card glow override */
.trade-offer.trade-offer-shiny {
  border-color: #facc15;
  background: linear-gradient(145deg, #1a1020 0%, #0f1a20 100%);
  animation: shinyPrism 3s infinite alternate;
}
.trade-offer.trade-offer-shiny .trade-offer-name {
  color: #facc15 !important;
  text-shadow: 0 0 8px #facc15;
}
.trade-iv-card-preview {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.trade-iv-card-preview .offered-card-wrap { width: 96px; height: 134px; cursor: default; }

/* ===== DIRECT TRADE P2P ===== */
.dt-panel { display: flex; flex-direction: column; gap: 14px; }
.dt-section-title { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.dt-player-search-wrap { position: relative; }
.dt-player-suggestions { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #1a1e2e; border: 1.5px solid #2a2e3e; border-radius: 10px; overflow: hidden; max-height: 180px; overflow-y: auto; }
.dt-player-suggestion { padding: 9px 14px; cursor: pointer; font-size: 13px; color: #e2e8f0; border-bottom: 1px solid #2a2e3e; transition: background .15s; }
.dt-player-suggestion:last-child { border-bottom: none; }
.dt-player-suggestion:hover { background: #14b8a622; color: #14b8a6; }
.dt-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.dt-card-opt { padding: 8px; text-align: center; background: #141828; border: 2px solid #2a2e3e; border-radius: 10px; cursor: pointer; transition: all .2s; font-size: 11px; }
.dt-card-opt:hover { border-color: #14b8a6; }
.dt-card-opt.selected { border-color: #14b8a6; background: #0e2228; box-shadow: 0 0 0 2px #14b8a633; }
.dt-card-opt img { width: 52px; height: 72px; object-fit: contain; display: block; margin: 0 auto 4px; }
.dt-card-opt .dt-opt-name { font-weight: 700; color: #e2e8f0; font-size: 11px; line-height: 1.2; }
.dt-card-opt .dt-opt-iv { font-size: 10px; color: #6b7280; }
.dt-item-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-item-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: #141828; border: 2px solid #2a2e3e; border-radius: 8px; cursor: pointer; transition: all .2s; font-size: 11px; min-width: 64px; }
.dt-item-opt:hover { border-color: #14b8a6; }
.dt-item-opt.selected { border-color: #14b8a6; background: #0e2228; }
.dt-item-opt .dt-item-icon { font-size: 22px; line-height: 1; }
.dt-item-opt .dt-item-name { font-weight: 700; font-size: 10px; color: #e2e8f0; text-align: center; line-height: 1.2; }
.dt-item-opt .dt-item-qty  { font-size: 10px; color: #6b7280; }
.dt-want-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dt-want-row > * { flex: 1; min-width: 130px; }
.btn-dt-invite { width: 100%; padding: 12px; border: none; border-radius: 12px; background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s; letter-spacing: .03em; }
.btn-dt-invite:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-dt-invite:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.dt-waiting-box { background: #0e1a28; border: 2px solid #14b8a6; border-radius: 14px; padding: 20px; text-align: center; }
.dt-waiting-title { font-size: 15px; font-weight: 800; color: #14b8a6; margin-bottom: 6px; }
.dt-waiting-sub { font-size: 12px; color: #6b7280; margin-bottom: 14px; }
.dt-timer-bar-wrap { background: #1a1e2e; border-radius: 6px; height: 6px; overflow: hidden; margin: 10px 0 14px; }
.dt-timer-bar { height: 100%; background: linear-gradient(90deg, #14b8a6, #06b6d4); border-radius: 6px; transition: width 1s linear; }
@keyframes dtPulseRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }
.dt-pulse-icon { font-size: 36px; display: inline-block; animation: dtPulseRing 1.2s infinite; }
.btn-dt-cancel { padding: 8px 20px; border: 2px solid #ef4444; border-radius: 10px; background: transparent; color: #ef4444; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s; }
.btn-dt-cancel:hover { background: #ef444422; }
/* Incoming invite modal */
.dt-incoming-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; animation: fadeIn .25s ease; }
.dt-incoming-modal { background: linear-gradient(160deg, #0f1623 0%, #141828 100%); border: 2px solid #14b8a6; border-radius: 18px; padding: 24px 20px 20px; max-width: 360px; width: 94%; box-shadow: 0 0 40px rgba(20,184,166,.25), 0 20px 60px rgba(0,0,0,.6); animation: slideUp .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes slideUp { from { transform: translateY(30px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.dt-incoming-header { text-align: center; margin-bottom: 14px; }
.dt-incoming-header .dt-inc-title { font-size: 16px; font-weight: 900; color: #14b8a6; margin-bottom: 2px; }
.dt-incoming-header .dt-inc-sender { font-size: 13px; color: #e2e8f0; }
.dt-incoming-offer-box { background: #0a0e1a; border: 1.5px solid #2a2e3e; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.dt-incoming-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dt-incoming-row:last-child { margin-bottom: 0; }
.dt-inc-label { font-size: 11px; color: #6b7280; font-weight: 700; min-width: 54px; }
.dt-inc-value { font-size: 13px; color: #e2e8f0; font-weight: 700; flex: 1; }
.dt-inc-card-preview { position: relative; width: 52px; height: 72px; flex-shrink: 0; }
.dt-inc-card-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.dt-incoming-timer-bar-wrap { background: #1a1e2e; border-radius: 4px; height: 4px; overflow: hidden; margin-bottom: 12px; }
.dt-incoming-timer-bar { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 4px; transition: width 1s linear; }
.dt-incoming-actions { display: flex; gap: 10px; }
.btn-dt-accept { flex: 1; padding: 11px; border: none; border-radius: 10px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s; }
.btn-dt-accept:hover { filter: brightness(1.08); }
.btn-dt-reject { flex: 1; padding: 11px; border: 2px solid #ef4444; border-radius: 10px; background: transparent; color: #ef4444; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s; }
.btn-dt-reject:hover { background: #ef444422; }

/* Pix Modal */
.pix-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75); padding: 20px;
}
.pix-modal-content {
  background: #1a1f2e; border: 1px solid #2a2e3e; border-radius: 16px;
  padding: 28px; max-width: 400px; width: 100%; position: relative;
  text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.pix-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #6b7280; font-size: 22px;
  cursor: pointer; line-height: 1;
}
.pix-close:hover { color: #fff; }
.pix-header { font-size: 26px; font-weight: 800; margin-bottom: 4px; color: #06b6d4; }
.pix-price { font-size: 20px; color: #f59e0b; font-weight: 700; margin-bottom: 20px; }
.pix-section { margin-bottom: 16px; }
.pix-label { font-size: 13px; color: #6b7280; margin-bottom: 8px; }
.pix-key {
  background: #141828; border: 1px dashed #2a2e3e; border-radius: 8px;
  padding: 12px; font-size: 14px; color: #e2e8f0; word-break: break-all;
  margin-bottom: 10px; font-family: monospace;
}
.pix-status { font-size: 14px; font-weight: 700; margin-top: 12px; min-height: 20px; }
.pix-status-pending { color: #f59e0b; }
.pix-status-success { color: #22c55e; }

.arena-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.arena-tab {
  flex: 1; padding: 10px; text-align: center;
  border: 1px solid #2a2e3e; border-radius: 10px;
  background: #141828; color: #8892a8;
  cursor: pointer; font-size: 14px; font-weight: 700;
  transition: all .2s;
}
.arena-tab.active { background: #ef4444; color: #fff; border-color: #ef4444; }
.arena-tab[data-tab="real"].active { background: #f59e0b; border-color: #f59e0b; }

.arena-real { margin-top: 12px; }
.real-player-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: #141828; border: 1px solid #2a2e3e;
  border-radius: 10px; margin-bottom: 8px;
}
.real-player-card .name { flex: 1; font-weight: 700; }
.real-player-card .rating { color: #f59e0b; font-size: 13px; }
.real-player-card .btn-challenge { padding: 8px 16px; background: #22c55e; border: none; border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; }
.real-player-card .btn-challenge:disabled { opacity: .4; cursor: default; }

.real-challenge {
  padding: 14px; background: #1a1f2e; border: 1px solid #f59e0b;
  border-radius: 10px; margin-bottom: 10px; text-align: center;
}
.real-challenge .challenger { font-weight: 700; color: #f59e0b; }
.real-challenge .btn-accept { padding: 10px 20px; background: #22c55e; border: none; border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; margin: 8px 4px 0; }
.real-challenge .btn-reject { padding: 10px 20px; background: #ef4444; border: none; border-radius: 8px; color: #fff; font-weight: 700; cursor: pointer; margin: 8px 4px 0; }

.hub-layout { display: flex; gap: 12px; align-items: flex-start; }
.hub-main { flex: 1; min-width: 0; }

.hub-sidebar {
  width: 220px; flex-shrink: 0;
  background: #141828; border-radius: 12px; padding: 12px;
  position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto;
}
.hub-sidebar.collapsed { width: 40px; padding: 8px; }
.hub-sidebar.collapsed .sidebar-content { display: none; }

.sidebar-toggle {
  width: 100%; padding: 8px 10px; background: none; border: 1px solid #2a2e3e;
  border-radius: 8px; color: #94a3b8; font-size: 13px; cursor: pointer;
  margin-bottom: 8px; transition: all .2s;
  display: flex; align-items: center; gap: 6px; font-weight: 600;
}
.sidebar-toggle:hover { background: #1e2235; border-color: #3b82f6; color: #e0e8f0; }
.sidebar-toggle-icon { font-size: 12px; transition: transform .2s; }
.hub-sidebar.collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.hub-sidebar.collapsed .sidebar-toggle-label { display: none; }
.hub-sidebar.collapsed .sidebar-toggle { justify-content: center; padding: 8px; margin-bottom: 0; }

.sidebar-content { display: flex; flex-direction: column; gap: 12px; }

.sidebar-section {}
.sidebar-section-title {
  font-size: 13px; font-weight: 700; color: #e2e8f0;
  padding-bottom: 6px; margin-bottom: 6px;
  border-bottom: 1px solid #2a2e3e;
}

/* Events */
.events-list { min-height: 20px; }
.event-banner {
  position: relative;
  background: linear-gradient(135deg, #1a1e30, #2a1030);
  border: 1px solid #a855f7;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
}
.event-banner-art {
  min-height: 132px;
  padding: 0;
  background-size: cover;
  background-position: center;
  border-color: rgba(168, 85, 247, 0.55);
}
.event-banner-art .event-content {
  min-height: 132px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(90deg, rgba(2, 6, 23, 0.88) 0%, rgba(2, 6, 23, 0.55) 45%, transparent 100%);
}
.event-glow {
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  animation: eventPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes eventPulse {
  0%, 100% { box-shadow: 0 0 8px #a855f7, 0 0 16px rgba(168,85,247,0.3); }
  50% { box-shadow: 0 0 16px #a855f7, 0 0 32px rgba(168,85,247,0.5), 0 0 48px rgba(168,85,247,0.2); }
}
.event-content { position: relative; z-index: 1; }
.event-title { font-size: 14px; font-weight: 700; color: #c084fc; }
.event-desc { font-size: 11px; color: #a78bfa; margin-top: 2px; }
.event-status { font-size: 11px; font-weight: 700; color: #22c55e; margin-top: 4px; }

/* VIP Benefits */
.vip-benefits { display: flex; flex-direction: column; gap: 8px; }
.vip-tier { background: #1a1e30; border-radius: 8px; padding: 8px; }
.vip-tier-name { font-size: 12px; font-weight: 700; color: #f59e0b; margin-bottom: 4px; }
.vip-tier ul { margin: 0; padding-left: 16px; font-size: 11px; color: #8892a8; }
.vip-tier li { margin-bottom: 2px; }

/* Ranking List */
.ranking-list { display: flex; flex-direction: column; gap: 4px; }
.ranking-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  font-size: 11px; background: #1a1e30; transition: background .15s;
}
.ranking-item:hover { background: #1e2235; }
.ranking-item .rank { width: 16px; font-weight: 700; color: #6b7280; text-align: center; font-size: 10px; }
.ranking-item .rank.gold { color: #f59e0b; }
.ranking-item .rank.silver { color: #9ca3af; }
.ranking-item .rank.bronze { color: #cd7f32; }
.ranking-item .rname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; }
.ranking-item .rvalue { font-weight: 700; color: #3b82f6; font-size: 10px; white-space: nowrap; }

.team-slots { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }
.team-slot {
  width: 90px; min-height: 100px;
  background: #141828; border: 2px dashed #2a2e3e; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  position: relative; transition: all .2s; overflow: visible; padding: 6px 4px 8px;
}
.team-slot.filled { border-style: solid; border-color: #22c55e; background: #1a2a1e; }
.team-slot .sprite img { image-rendering: pixelated; object-fit: contain; }
.team-slot .pname { font-size: 11px; font-weight: 700; color: #e2e8f0; margin-top: 4px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-slot .remove-btn {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #ef4444; color: #fff; border: none;
  font-size: 12px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.team-slot .empty-label { font-size: 11px; color: #4b5563; }
.team-slot.starter { border-color: #f59e0b; border-style: solid; }

.card-item { position: relative; }
.card-item .btn-team {
  margin-top: 6px; padding: 4px 10px; border: none; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer; width: 100%;
}
.btn-team-add { background: #22c55e; color: #fff; }
.btn-team-add:hover { background: #16a34a; }
.btn-team-remove { background: #ef4444; color: #fff; }
.btn-team-remove:hover { background: #dc2626; }
.btn-team-full { background: #4b5563; color: #9ca3af; cursor: default; }
.pay-section { margin-bottom: 16px; }
.pay-label { font-size: 13px; color: #6b7280; margin-bottom: 8px; }

.dg-prep { text-align: center; padding: 20px 0; }
.dg-desc { color: #8892a8; font-size: 14px; margin-bottom: 16px; }
.dg-enemy-preview { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dg-preview-card {
  background: #141828; border: 2px solid #a855f7; border-radius: 12px;
  padding: 12px; width: 110px; text-align: center; animation: dgFloat 1.5s ease-in-out infinite;
}
.dg-preview-card:nth-child(2) { animation-delay: .3s; }
.dg-preview-card:nth-child(3) { animation-delay: .6s; }
@keyframes dgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dg-preview-card .psprite img { width: 64px; height: 64px; image-rendering: pixelated; object-fit: contain; }
.dg-preview-card .pname { font-weight: 700; color: #e2e8f0; font-size: 13px; margin-top: 4px; }
.dg-preview-card .pdetail { font-size: 11px; color: #6b7280; }

.dg-arena { margin-top: 12px; }
.dg-wave-info { text-align: center; font-size: 18px; font-weight: 800; color: #a855f7; margin-bottom: 12px; }
.dg-battle-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto minmax(132px, auto) auto;
  column-gap: 8px;
  row-gap: 6px;
  margin-bottom: 12px;
  min-height: 210px;
  align-items: end;
}
.dg-battle-arena .hp-bar-container { width: 130px; }

.vip-modal-tiers { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.vip-modal-tier {
  background: #1a1e30; border: 2px solid #2a2e3e; border-radius: 12px;
  padding: 16px; cursor: pointer; transition: all .2s;
}
.vip-modal-tier:hover { border-color: #f59e0b; transform: scale(1.02); }
.vip-modal-tier:last-child:hover { border-color: #8b5cf6; }
.vip-modal-tier-name { font-size: 18px; font-weight: 800; color: #f59e0b; margin-bottom: 8px; }
.vip-modal-tier:last-child .vip-modal-tier-name { color: #8b5cf6; }
.vip-modal-tier ul { margin: 0; padding-left: 20px; font-size: 13px; color: #8892a8; text-align: left; }
.vip-modal-tier li { margin-bottom: 4px; }
.vip-modal-price { font-size: 22px; font-weight: 900; color: #22c55e; margin-top: 8px; }
.pay-key {
  background: #141828; border: 1px dashed #2a2e3e; border-radius: 8px;
  padding: 12px; font-size: 14px; color: #e2e8f0; word-break: break-all;
  margin-bottom: 10px; font-family: monospace;
}

.shop-currencies {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 16px;
  padding: 10px;
  background: #141828;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
}
.shop-tabs, .inv-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.shop-tab, .inv-tab {
  padding: 8px 14px;
  border: 1px solid #2a2e3e;
  border-radius: 20px;
  background: #141828;
  color: #8892a8;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  transition: all .2s;
}
.shop-tab.active, .inv-tab.active { background: #ff6b35; color: #fff; border-color: #ff6b35; }
/* Shop / Trade search bar */
.shop-search-wrap {
  position: relative;
  margin-bottom: 12px;
}
.shop-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  pointer-events: none;
  opacity: 0.6;
}
.shop-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px 10px 36px;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.shop-search-input:focus {
  border-color: #ff6b35;
  box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
}
.shop-search-input::placeholder { color: #4b5563; }
.shop-item.hidden { display: none !important; }
.shop-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.shop-item {
  padding: 14px;
  text-align: center;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
  transition: all .2s;
}
.shop-item:hover { border-color: #ff6b35; }
.shop-item .item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-bottom: 8px;
  line-height: 1;
  font-size: 40px;
}
.shop-item .item-icon img {
  object-fit: contain;
  vertical-align: middle;
}
.shop-item .item-icon img[src*="Cards/"] {
  width: 52px !important;
  height: 72px !important;
}
.shop-item .item-icon img:not([src*="Cards/"]) {
  width: 56px !important;
  height: 56px !important;
}
.shop-item .item-name { font-weight: 700; font-size: 13px; }
.shop-item .item-desc { font-size: 11px; color: #6b7280; margin: 4px 0; }
.shop-item .item-qty { font-size: 11px; color: #8892a8; }
.shop-item .item-price { font-size: 12px; color: #f59e0b; margin-top: 6px; }
.shop-item .btn-buy {
  margin-top: 8px;
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
}
.shop-item .btn-buy:active { transform: scale(.95); }
.shop-item .btn-sell {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.shop-item .btn-sell-all {
  margin-top: 4px;
  background: linear-gradient(135deg, #ea580c, #c2410c);
}
.inv-item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.shop-coins-section {
  padding: 16px;
  background: #141828;
  border-radius: 12px;
  border: 2px solid #2a2e3e;
}
.section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: #06b6d4; }
.coin-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.vip-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vip-pack .price { color: #22c55e; font-weight: 700; }
.coin-pack {
  padding: 14px;
  text-align: center;
  background: #1a1e30;
  border: 2px solid #06b6d4;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
  font-weight: 700;
}
.coin-pack:hover { border-color: #22d3ee; transform: scale(1.03); }
.coin-pack .price { display: block; font-size: 11px; color: #6b7280; margin-top: 4px; }

.arena-info {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 12px;
  background: #141828;
  border-radius: 12px;
  margin-bottom: 16px;
}
.arena-stat { font-size: 13px; text-align: center; }
.arena-opponents { display: flex; flex-direction: column; gap: 10px; }
.arena-opponent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #141828;
  border: 2px solid #2a2e3e;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s;
}
.arena-opponent:hover { border-color: #ef4444; }
.arena-opponent .info { flex: 1; }
.arena-opponent .name { font-weight: 700; }
.arena-opponent .detail { font-size: 12px; color: #6b7280; }
.arena-opponent .rating { font-size: 14px; font-weight: 700; color: #f59e0b; }

.battle-items {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 0;
}
.btn-item {
  padding: 8px 12px;
  border: 1px solid #2a2e3e;
  border-radius: 8px;
  background: #141828;
  color: #e0e8f0;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
  transition: all .2s;
}
.btn-item:hover { border-color: #22c55e; background: #1c2034; }
.btn-item:disabled { opacity: .4; cursor: not-allowed; }

.move-select-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
}
.move-select-title {
  font-size: 14px;
  color: #fbbf24;
  margin-bottom: 12px;
  font-weight: 700;
}
.move-select-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.btn-pp-move {
  padding: 10px 24px;
  border: 1px solid #2a2e3e;
  border-radius: 8px;
  background: #141828;
  color: #e0e8f0;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: all .2s;
  min-width: 240px;
}
.btn-pp-move:hover { border-color: #22c55e; background: #1c2034; }
.btn-pp-move.disabled { opacity: .4; cursor: not-allowed; }

.center-container {
  position: relative;
  min-height: 70vh;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141828;
  background-size: cover;
  background-position: center;
  border: 2px solid #2a2e3e;
}
.center-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 24px;
  width: 100%;
}
.center-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  margin-bottom: 8px;
}
.center-sub {
  color: #d1d5db;
  font-size: 14px;
  margin-bottom: 24px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.center-pokemon {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.center-pokemon .poke-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20,24,40,.85);
  border-radius: 12px;
  border: 1px solid #2a2e3e;
  flex: 0 1 auto;
  min-width: 180px;
  max-width: 240px;
  transition: all .2s;
}
.center-pokemon .poke-card.starter-card {
  border-color: #f59e0b;
  background: rgba(30,24,10,.85);
  box-shadow: 0 0 12px rgba(245,158,11,.15);
  min-width: 210px;
}
.center-pokemon .poke-card .sprite { position: relative; font-size: 40px; }
.center-pokemon .poke-card .starter-badge {
  position: absolute; top: -8px; left: -8px; font-size: 16px;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.8));
}
.center-pokemon .poke-card .info { text-align: left; }
.center-pokemon .poke-card .name { font-weight: 700; font-size: 14px; }
.center-pokemon .poke-card .hp { font-size: 12px; color: #6b7280; }

/* Evolution reveal */
.evo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(251, 191, 36, 0.18), transparent 32%),
    radial-gradient(circle at center, rgba(37, 99, 235, 0.2), rgba(2, 6, 23, 0.96) 68%);
  animation: evoFadeIn .35s ease-out both;
}
.evo-card {
  position: relative;
  width: min(540px, 100%);
  padding: 26px 20px 22px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(8, 13, 25, 0.96));
  box-shadow: 0 0 70px rgba(251, 191, 36, 0.18), 0 22px 70px rgba(0, 0, 0, 0.55);
}
.evo-aura {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(251, 191, 36, 0.75), transparent, rgba(96, 165, 250, 0.8), transparent);
  filter: blur(8px);
  opacity: 0.75;
  animation: evoAuraSpin 2.4s linear infinite, evoAuraPulse 1.2s ease-in-out infinite;
}
.evo-title {
  position: relative;
  z-index: 2;
  margin-bottom: 18px;
  color: #fbbf24;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(251, 191, 36, 0.65);
  animation: evoTitlePop .8s ease-out both;
}
.evo-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}
.evo-mon {
  min-width: 120px;
  padding: 10px 8px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.evo-name {
  margin-bottom: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
}
.evo-mon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
}
.evo-old { animation: evoOldMon 2.1s ease-in-out both; }
.evo-new { animation: evoNewMon 2.1s ease-in-out both; }
.evo-burst {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  color: #fef3c7;
  font-size: 32px;
  font-weight: 900;
}
.evo-burst span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(251, 191, 36, 0.55) 34%, transparent 68%);
  animation: evoBurst 1.15s ease-out infinite;
}
.evo-burst b {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}
.evo-result {
  position: relative;
  z-index: 2;
  margin: 4px auto 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.7;
}
.evo-close-btn {
  position: relative;
  z-index: 2;
  min-width: 180px;
  box-shadow: 0 0 22px rgba(34, 197, 94, 0.24);
}
.evo-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.evo-particles span {
  position: absolute;
  left: var(--x);
  bottom: -18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 12px #fbbf24;
  animation: evoParticle 2.2s linear infinite;
  animation-delay: calc(var(--i) * -0.13s);
}
@keyframes evoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes evoAuraSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes evoAuraPulse {
  0%, 100% { opacity: 0.45; width: 240px; height: 240px; }
  50% { opacity: 0.95; width: 330px; height: 330px; }
}
@keyframes evoTitlePop {
  0% { transform: translateY(-10px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes evoOldMon {
  0%, 38% { opacity: 1; transform: scale(1); filter: brightness(1); }
  58% { opacity: 0.92; transform: scale(1.18); filter: brightness(2.2); }
  100% { opacity: 0.42; transform: scale(0.9); filter: brightness(0.7) grayscale(0.5); }
}
@keyframes evoNewMon {
  0%, 42% { opacity: 0; transform: scale(0.72); filter: brightness(2.4) blur(2px); }
  62% { opacity: 1; transform: scale(1.24); filter: brightness(2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
@keyframes evoBurst {
  0% { transform: scale(0.25); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
@keyframes evoParticle {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-360px) scale(1.25); opacity: 0; }
}
@media (max-width: 480px) {
  .evo-card { padding: 22px 12px 18px; border-radius: 22px; }
  .evo-stage { gap: 8px; }
  .evo-mon { min-width: 92px; padding: 8px 4px; }
  .evo-mon img { width: 74px; height: 74px; }
  .evo-burst { width: 44px; height: 60px; font-size: 24px; }
  .evo-title { font-size: 20px; }
}
.heal-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  animation: fadeIn .5s ease;
}

/* ===== FRIENDS ===== */
.btn-friend { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; }
.friends-container { margin-top: 8px; }
.friends-search-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.friends-search-row #friendSearchInput {
  flex: 1; background: #141828; border: 1px solid #2a2e40; color: #e0e8f0;
  padding: 10px 14px; border-radius: 8px; font-size: 14px; outline: none;
  margin-bottom: 0; text-align: left; width: auto;
}
.friends-search-row #friendSearchInput:focus { border-color: #6366f1; }
.friends-search-row .btn-primary {
  width: auto; padding: 10px 16px; font-size: 14px; border-radius: 8px;
  white-space: nowrap; margin: 0;
}
.friend-msg { font-size: 13px; margin-bottom: 6px; min-height: 20px; padding: 4px 8px; border-radius: 6px; }
.friend-msg.success { color: #22c55e; background: rgba(34,197,94,.1); }
.friend-msg.error { color: #ef4444; background: rgba(239,68,68,.1); }
.friends-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.friends-tab {
  flex: 1; padding: 8px; border: 1px solid #2a2e40; border-radius: 8px;
  background: #141828; color: #94a3b8; cursor: pointer; font-size: 13px; font-weight: 700;
  transition: all .2s;
}
.friends-tab.active { background: #6366f1; color: white; border-color: #6366f1; }
.friends-tab:hover { border-color: #6366f1; }
.friends-list { display: flex; flex-direction: column; gap: 6px; }
.friend-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: #141828; border-radius: 10px; border: 1px solid #1e2235;
}
.friend-card .friend-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.friend-card .friend-name { font-weight: 700; font-size: 14px; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-card .friend-rating { font-size: 11px; color: #6b7280; white-space: nowrap; }
.friend-card .friend-online { font-size: 10px; color: #22c55e; padding: 2px 8px; border-radius: 10px; background: rgba(34,197,94,.15); white-space: nowrap; }
.friend-card .friend-offline { font-size: 10px; color: #6b7280; white-space: nowrap; }
.friend-card .btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 6px; border: none; cursor: pointer; font-weight: 700; white-space: nowrap; }
.friend-card .btn-accept { background: #22c55e; color: white; }
.friend-card .btn-reject { background: #ef4444; color: white; }
.friend-card .btn-remove { background: transparent; color: #6b7280; border: 1px solid #374151; }
.friend-card .btn-remove:hover { color: #ef4444; border-color: #ef4444; }
.friend-card .btn-challenge-friend { background: transparent; color: #f59e0b; border: 1px solid #374151; }
.friend-card .btn-challenge-friend:hover { background: rgba(245,158,11,.15); border-color: #f59e0b; }
.friend-card .vip-star { color: #f59e0b; font-size: 12px; }
.friend-card .friend-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ===== DG CALL FRIEND ===== */
.dg-friend-call {
  margin: 10px 0; padding: 12px; background: rgba(99, 102, 241, 0.12);
  border: 1px solid #6366f1; border-radius: 12px; text-align: center;
}
.dg-friend-call .fc-title { font-size: 13px; font-weight: 700; color: #a5b4fc; margin-bottom: 6px; }
.dg-friend-call .fc-sub { font-size: 11px; color: #6b7280; margin-bottom: 8px; }

/* DG mode buttons */
.dg-mode-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.btn-dg-mode { flex: 0 1 200px; padding: 14px 20px; border: none; border-radius: 12px; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s; }
.btn-dg-mode.solo { background: linear-gradient(135deg, #f59e0b, #d97706); color: #1a1a2e; }
.btn-dg-mode.solo:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(245,158,11,.4); }
.btn-dg-mode.team { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.btn-dg-mode.team:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(99,102,241,.4); }

/* Team formation */
.dg-team-formation { margin-top: 16px; }
.dg-formation-title { text-align: center; font-size: 16px; font-weight: 800; color: #a5b4fc; margin-bottom: 12px; }
.dg-team-select-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dg-team-member-option {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #141828; border: 2px solid #2a2e40; border-radius: 10px;
  cursor: pointer; transition: all .2s; user-select: none;
}
.dg-team-member-option:hover { border-color: #4f46e5; }
.dg-team-member-option.selected { border-color: #6366f1; background: #1e1a3a; }
.dg-team-member-option .tmo-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #374151;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; flex-shrink: 0;
}
.dg-team-member-option.selected .tmo-check { background: #6366f1; border-color: #6366f1; }
.dg-team-member-option .tmo-sprite img { width: 40px; height: 40px; image-rendering: pixelated; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.dg-team-member-option .tmo-info { flex: 1; min-width: 0; }
.dg-team-member-option .tmo-name { font-weight: 700; font-size: 14px; color: #e2e8f0; }
.dg-team-member-option .tmo-detail { font-size: 11px; color: #6b7280; }
.dg-team-member-option .tmo-hp { font-size: 11px; color: #22c55e; }
.dg-team-member-option.fainted { opacity: .5; border-color: #374151; cursor: not-allowed; }
.dg-team-member-option.fainted .tmo-check { background: #ef4444; border-color: #ef4444; }
.dg-formation-actions { display: flex; gap: 10px; justify-content: center; }
.btn-back-sm { background: transparent; color: #94a3b8; border: 1px solid #374151; padding: 10px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.btn-back-sm:hover { border-color: #6366f1; color: #e2e8f0; }

/* DG Coop */
.btn-dg-mode.coop { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.btn-dg-mode.coop:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(34,197,94,.4); }
.dg-coop-status { padding: 10px 0; }
.dg-coop-enemy-section { text-align: center; margin-bottom: 16px; }
.dg-coop-wave { font-size: 14px; font-weight: 800; color: #a855f7; margin-bottom: 8px; }
.dg-coop-enemy-name { font-size: 16px; font-weight: 700; color: #ef4444; margin: 6px 0; }
.dg-coop-enemy-section .hp-bar-container { width: 200px; margin: 4px auto; }
.dg-coop-enemy-section .pokemon-sprite img { image-rendering: pixelated; object-fit: none; }
.dg-coop-allies { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin-bottom: 12px; }
.dg-coop-ally { flex: 1; max-width: 280px; text-align: center; padding: 10px; background: #141828; border-radius: 10px; border: 1px solid #1e2235; }
.dg-coop-ally .hp-bar-container { width: 100%; }
.dg-coop-ally .pokemon-sprite img { image-rendering: pixelated; object-fit: none; }
.dg-coop-ally-label { font-size: 11px; color: #6b7280; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
.dg-coop-poke-name { font-size: 13px; font-weight: 700; color: #e2e8f0; margin: 4px 0; }
.dg-coop-moves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.dg-coop-moves .btn-move {
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.96));
  padding: 8px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dg-coop-moves .btn-move:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dg-coop-moves .btn-move strong {
  font-size: 12px;
}
.dg-coop-moves .move-pp {
  font-size: 10px;
  color: #94a3b8;
}
.hp-fill-green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.hp-fill-blue { background: linear-gradient(90deg, #3b82f6, #2563eb); }
.dg-coop-invite { padding: 16px 0; }
.dg-coop-invite-title { text-align: center; font-size: 16px; font-weight: 800; color: #a5b4fc; margin-bottom: 12px; }
.dg-coop-friend-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dg-coop-friend-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #141828; border: 1px solid #2a2e40; border-radius: 10px;
}
.dg-coop-friend-option .cfo-info { flex: 1; }
.dg-coop-friend-option .cfo-name { font-weight: 700; font-size: 14px; color: #e2e8f0; }
.dg-coop-friend-option .cfo-rating { font-size: 11px; color: #6b7280; }
.btn-dg-invite { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.btn-dg-invite:hover { filter: brightness(1.15); }
.dg-coop-waiting { text-align: center; padding: 40px 0; }
.dg-coop-waiting-title { font-size: 18px; font-weight: 800; color: #f59e0b; margin-bottom: 12px; }
.dg-coop-wait-msg { color: #6b7280; font-size: 13px; margin-bottom: 20px; animation: dgPulse 2s infinite; }

/* Profile */
.btn-profile { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all .2s; margin-right: 4px; }
.btn-profile:hover { background: rgba(99,102,241,.15); color: #6366f1; }
.btn-save { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all .2s; margin-right: 4px; }
.btn-save:hover { background: rgba(34,197,94,.15); color: #22c55e; }
.profile-container { max-width: 400px; margin: 0 auto; padding: 20px 0; }
.profile-field { margin-bottom: 14px; }
.profile-label { display: block; font-size: 12px; color: #6b7280; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.profile-value { font-size: 16px; color: #e2e8f0; font-weight: 700; padding: 10px 0; }
.profile-divider { height: 1px; background: #1e2235; margin: 20px 0; }
.profile-msg { font-size: 13px; margin-top: 8px; min-height: 20px; padding: 6px 10px; border-radius: 6px; }
.profile-msg.success { color: #22c55e; background: rgba(34,197,94,.1); }
.profile-msg.error { color: #ef4444; background: rgba(239,68,68,.1); }
.profile-container .input { background: #141828; border: 1px solid #2a2e40; color: #e0e8f0; padding: 12px 14px; border-radius: 8px; font-size: 14px; width: 100%; outline: none; box-sizing: border-box; }
.profile-container .input:focus { border-color: #6366f1; }
.profile-container .btn-primary { width: 100%; padding: 12px; font-size: 14px; margin-top: 4px; }

/* Forgot password */
.forgot-container { max-width: 400px; margin: 0 auto; padding: 20px 0; }
.forgot-desc { color: #94a3b8; font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.forgot-container .input { background: #141828; border: 1px solid #2a2e40; color: #e0e8f0; padding: 12px 14px; border-radius: 8px; font-size: 14px; width: 100%; outline: none; box-sizing: border-box; }
.forgot-container .input:focus { border-color: #6366f1; }
.forgot-container .btn-primary { width: 100%; padding: 12px; font-size: 14px; }
.btn-call-friend { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; border: none; padding: 8px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-call-friend:hover { filter: brightness(1.15); }
.btn-call-friend:disabled { opacity: .4; cursor: not-allowed; }



/* ===== Brand Refresh: Welcome + Hub ===== */
body {
  background:
    radial-gradient(circle at top, rgba(6,182,212,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(249,115,22,.14), transparent 22%),
    #07111f;
}
#app { max-width: 1180px; }

.site-disclaimer {
  text-align: center;
  padding: 14px 16px 22px;
  margin-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.site-disclaimer p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: #64748b;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.site-disclaimer p + p {
  margin-top: 6px;
}

.screen { padding: 24px 18px; }
.welcome-screen {
  min-height: calc(100vh - 20px);
  display: block;
}
.welcome-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
  gap: 20px;
  align-items: stretch;
}
.welcome-hero-card,
.welcome-panel {
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(9,14,25,.96));
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border-radius: 28px;
}
.welcome-hero-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.welcome-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(59,130,246,.10), transparent 38%),
    linear-gradient(320deg, rgba(249,115,22,.14), transparent 34%),
    url('../images/bg.jpg') center/cover no-repeat;
  opacity: .22;
  pointer-events: none;
}
.welcome-hero-card > * { position: relative; z-index: 1; }
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8,15,29,.72);
  border: 1px solid rgba(96,165,250,.25);
  color: #9bd7ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.1px;
}
.brand-logo {
  width: min(100%, 560px);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.45));
  margin: 18px 0 14px;
}
.subtitle {
  max-width: 560px;
  text-align: left;
  color: #c6d3e5;
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.6;
}
.welcome-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.welcome-highlights span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(10,22,41,.75);
  border: 1px solid rgba(71,85,105,.45);
  color: #e5eefc;
  font-size: 13px;
  font-weight: 700;
}
.welcome-panel {
  padding: 22px;
  align-self: center;
}
.logo, .welcome-pokemon { display: none; }
.online-section,
.local-card {
  background: linear-gradient(180deg, rgba(17,24,39,.84), rgba(10,15,26,.96));
  border: 1px solid #253149;
  border-radius: 20px;
  padding: 20px;
}
.online-title {
  font-size: 22px;
  font-weight: 900;
  color: #e7f3ff;
  margin-bottom: 6px;
}
.online-sub,
.local-sub {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 14px;
  line-height: 1.5;
}
.local-title {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 6px;
}
.local-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.local-buttons .btn {
  flex: 1;
  min-width: 140px;
}
.btn-install {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn-install:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 20px rgba(59,130,246,.4);
}
.btn-install.hidden { display: none; }
.sidebar-install-btn {
  width: 100%;
  text-align: center;
}
.forgot-row { text-align: center; margin-top: 10px; }
.forgot-row a {
  color: #8b9cff;
  font-size: 13px;
  text-decoration: none;
}
.forgot-row a:hover { color: #c3d1ff; }
.input-login,
.input {
  background: #0e1727;
  border-color: #26344f;
}
.input { text-align: left; font-size: 15px; }
.btn,
.btn-login {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px rgba(0,0,0,.22);
}
.divider { margin: 18px 0; }

.hub-screen { padding-top: 18px; }
.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}
.hub-main { display: flex; flex-direction: column; gap: 16px; }
.hub-brand-strip,
.hub-header,
.hub-chat,
.starter-display,
.hub-action-section,
.hub-sidebar {
  background: linear-gradient(180deg, rgba(17,24,39,.94), rgba(10,15,26,.98));
  border: 1px solid rgba(52,73,102,.72);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.hub-brand-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 22px;
}
.hub-brand-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hub-season-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hub-brand-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.3));
}
.hub-brand-kicker {
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.hub-brand-text {
  color: #dbeafe;
  font-size: 15px;
  line-height: 1.5;
  max-width: 520px;
}
.hub-season-badge {
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(249,115,22,.18));
  border: 1px solid rgba(251,191,36,.35);
  color: #ffd588;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.btn-update-app {
  width: auto;
  min-width: 150px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,.45);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #111827;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}
.hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .8fr);
  gap: 12px;
  padding: 0;
  border-radius: 22px;
}
.hub-player-card,
.hub-economy-card {
  padding: 18px 20px;
}
.hub-economy-card {
  border-left: 1px solid rgba(51,65,85,.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.trainer-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 900;
  color: #f8fafc;
}
.hub-level-row {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.hub-level-label { color: #e2e8f0; font-weight: 800; }
.hub-level-xp { color: #a78bfa; font-weight: 700; }
.hub-xp-track {
  width: 100%;
  height: 8px;
  background: #1f2937;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}
.hub-xp-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  border-radius: 999px;
}
.hub-economy-title {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}
.stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stats-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0d1627;
  border: 1px solid #253149;
  font-size: 13px;
  font-weight: 700;
}
.hub-progress-stats {
  margin-top: 8px;
}
.hub-economy-card .stats-bar span {
  font-size: 12px;
  padding: 8px 10px;
}
.hub-chat {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(8,16,30,.7);
  border: 1px solid rgba(52,73,102,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hub-chat-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-chat-title {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
}
.hub-chat-sub {
  font-size: 11px;
  color: #64748b;
}
.hub-chat-messages {
  height: min(200px, 28vh);
  min-height: 132px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(7,17,31,.75);
  border: 1px solid rgba(99,217,255,.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-chat-messages::-webkit-scrollbar { width: 4px; }
.hub-chat-messages::-webkit-scrollbar-thumb { background: rgba(99,217,255,.3); border-radius: 2px; }
.hub-chat-messages .lobby-msg {
  font-size: 12px;
  padding: 6px 10px;
  max-width: 92%;
}
.hub-chat-messages .lobby-msg .msg-author { font-size: 11px; }
.hub-chat-messages .lobby-msg .msg-time { font-size: 10px; }
.hub-chat-messages .lobby-empty {
  padding: 24px 8px;
  font-size: 12px;
}
.hub-chat-input {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.hub-chat-field {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99,217,255,.15);
  background: rgba(15,26,46,.9);
  color: #e2e8f0;
  font-size: 13px;
}
.hub-chat-field:focus {
  outline: none;
  border-color: rgba(59,130,246,.6);
}
.hub-chat-field::placeholder { color: #4b5563; }
.hub-chat-send {
  flex-shrink: 0;
  width: 42px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.hub-chat-send:hover { filter: brightness(1.12); }
.hub-chat-send:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.starter-display {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 28px;
}
.starter-display::before {
  content: "PARCEIRO PRINCIPAL";
  position: absolute;
  top: 18px;
  left: 22px;
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.starter-display .sprite { margin-top: 18px; }
.hub-action-section {
  padding: 16px;
  border-radius: 22px;
}
.hub-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-kicker {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.section-note {
  color: #94a3b8;
  font-size: 12px;
}
.hub-grid {
  display: grid;
  gap: 12px;
}
.hub-grid-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid-social { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid .btn {
  height: 100%;
  min-height: 78px;
  font-size: 16px;
  letter-spacing: .2px;
}
.hub-sidebar {
  width: auto;
  max-height: none;
  border-radius: 22px;
}
.hub-sidebar.collapsed {
  width: 56px;
  padding: 10px;
}
.sidebar-toggle {
  min-height: 40px;
  border-radius: 12px;
}

@media (max-width: 960px) {
  #app { max-width: 760px; }
  .welcome-shell,
  .hub-layout,
  .hub-header {
    grid-template-columns: 1fr;
  }
  .hub-economy-card {
    border-left: none;
    border-top: 1px solid rgba(51,65,85,.7);
  }
  .hub-grid-secondary,
  .hub-grid-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body { padding: 0; }
  .screen { padding: 14px; }
  .welcome-hero-card,
  .welcome-panel,
  .hub-brand-strip,
  .hub-header,
  .hub-chat,
  .starter-display,
  .hub-action-section,
  .hub-sidebar { border-radius: 18px; }
  .welcome-hero-card { min-height: auto; padding: 22px 18px; }
  .brand-logo { width: 100%; margin: 14px 0 10px; }
  .subtitle { font-size: 15px; }
  .welcome-highlights span { width: 100%; justify-content: center; text-align: center; }
  .login-row { flex-direction: column; max-width: 100%; }
  .hub-brand-strip,
  .hub-brand-left,
  .hub-season-actions,
  .hub-section-heading { flex-direction: column; align-items: flex-start; }
  .btn-update-app { width: 100%; min-width: 0; }
  .hub-brand-logo { width: 72px; height: 72px; }
  .hub-grid-primary,
  .hub-grid-secondary,
  .hub-grid-social { grid-template-columns: 1fr; }
  .hub-grid .btn { min-height: 64px; font-size: 15px; }
  .starter-card { width: 100px; padding: 14px 10px; }
  .starter-card .sprite { font-size: 40px; }
  .pokemon-sprite { font-size: 48px; }
  .battle-arena { padding: 12px; }
}


/* ===== Visual System Standardization v2 ===== */
:root {
  --ph-bg: #07111f;
  --ph-surface: rgba(12, 20, 34, 0.92);
  --ph-surface-2: rgba(16, 27, 44, 0.96);
  --ph-surface-3: #0f1a2c;
  --ph-line: #22324c;
  --ph-line-soft: rgba(96, 165, 250, 0.18);
  --ph-text: #e6eef9;
  --ph-text-soft: #9cb0ca;
  --ph-cyan: #63d9ff;
  --ph-cyan-2: #06b6d4;
  --ph-orange: #ff8a3d;
  --ph-orange-2: #f97316;
  --ph-gold: #f7c948;
  --ph-violet: #8b5cf6;
  --ph-green: #22c55e;
  --ph-danger: #ef4444;
  --ph-radius: 18px;
  --ph-radius-lg: 24px;
  --ph-shadow: 0 14px 32px rgba(0,0,0,.24);
}

body {
  color: var(--ph-text);
  background:
    radial-gradient(circle at 15% 0%, rgba(99,217,255,.08), transparent 24%),
    radial-gradient(circle at 100% 15%, rgba(255,138,61,.08), transparent 20%),
    linear-gradient(180deg, #07111f 0%, #091423 100%);
}

/* Screen framing */
.screen:not(.welcome-screen):not(.hub-screen) {
  max-width: 1040px;
  margin: 0 auto;
}
.screen-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .2px;
  color: #f8fbff;
  margin-bottom: 12px;
}
.screen-sub,
#screen-hunt > p,
.forgot-desc,
.dg-desc,
.center-sub,
.section-note {
  color: var(--ph-text-soft);
  line-height: 1.55;
}
.btn-back,
.btn-back-sm {
  border-radius: 12px;
  border-color: #32435f;
  color: #c4d3e8;
  background: rgba(12, 20, 34, 0.82);
  backdrop-filter: blur(6px);
}
.btn-back:hover,
.btn-back-sm:hover {
  background: rgba(16, 27, 44, 1);
  border-color: var(--ph-cyan-2);
}

/* Generic card system */
.hunt-result,
.battle-arena,
.battle-result,
.team-card,
.mission-card,
.card-item,
.trade-card-option,
.trade-offer,
.pix-modal-content,
.real-player-card,
.real-challenge,
.vip-modal-tier,
.shop-currencies,
.shop-item,
.shop-coins-section,
.coin-pack,
.arena-info,
.arena-opponent,
.center-container,
.center-pokemon .poke-card,
.friends-container,
.friend-card,
.dg-preview-card,
.dg-team-member-option,
.dg-coop-ally,
.dg-coop-friend-option,
.profile-container,
.forgot-container,
.admin-container,
.ranking-item,
.vip-tier,
.team-slot,
.notification {
  background: linear-gradient(180deg, var(--ph-surface), var(--ph-surface-2));
  border: 1px solid var(--ph-line);
  box-shadow: var(--ph-shadow);
}

/* Hunt */
.area-btn {
  min-height: 96px;
  border: 1px solid #2d415f;
  border-radius: 18px;
  box-shadow: var(--ph-shadow);
}
.area-btn:hover {
  border-color: var(--ph-cyan);
  transform: translateY(-2px) scale(1.01);
}
.area-btn::after {
  background: linear-gradient(90deg, rgba(7,17,31,.86) 0%, rgba(7,17,31,.64) 52%, rgba(7,17,31,.32) 100%);
}
.area-btn .area-name { font-size: 17px; }
.area-btn .area-desc { color: #d6e2f4; }

/* Battle system */
.battle-container {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(12,20,34,.68), rgba(12,20,34,.34));
  border: 1px solid rgba(96,165,250,.12);
}
.battle-header {
  font-size: 20px;
  color: var(--ph-cyan);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.battle-arena {
  padding: 20px;
  border-radius: 22px;
}
.hp-bar {
  height: 10px;
  border-radius: 999px;
  background: #1f2a3d;
}
.hp-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.battle-log {
  height: 110px;
  border-radius: 16px;
  background: #09111d;
  border: 1px solid #21314d;
  padding: 12px 14px;
}
.move-buttons { gap: 10px; }
.btn-move {
  min-width: 46%;
  border-radius: 14px;
  border-color: #31435f;
  background: linear-gradient(180deg, #111c2f, #0d1627);
}
.btn-move:hover {
  border-color: var(--ph-cyan);
  background: linear-gradient(180deg, #15243b, #101a2d);
}
.battle-items {
  gap: 8px;
  padding: 10px 0 4px;
}
.btn-item {
  border-radius: 12px;
  border-color: #30425f;
  background: linear-gradient(180deg, #101a2c, #0c1626);
  color: #e8f1fd;
  font-size: 12px;
  font-weight: 700;
}
.btn-item:hover {
  border-color: var(--ph-cyan);
  background: linear-gradient(180deg, #14233a, #112035);
}
.battle-result {
  border-radius: 22px;
  padding: 22px;
}
.battle-result .drop-info {
  background: linear-gradient(180deg, rgba(247,201,72,.10), rgba(247,201,72,.05));
  border: 1px solid rgba(247,201,72,.42);
}

/* Tabs */
.trade-tab,
.arena-tab,
.shop-tab,
.inv-tab,
.friends-tab,
.mission-tab {
  border-radius: 999px;
  border-color: #30425f;
  background: rgba(12, 20, 34, 0.88);
  color: #c4d3e8;
  font-weight: 800;
}
.trade-tab:hover,
.arena-tab:hover,
.shop-tab:hover,
.inv-tab:hover,
.friends-tab:hover,
.mission-tab:hover {
  border-color: var(--ph-cyan-2);
  color: #fff;
}
.shop-tab.active,
.inv-tab.active,
.mission-tab.active {
  background: linear-gradient(135deg, var(--ph-orange), var(--ph-orange-2));
  border-color: transparent;
  color: #fff;
}
.trade-tab.active { background: linear-gradient(135deg, #2dd4bf, #0f766e); border-color: transparent; }
.arena-tab.active { background: linear-gradient(135deg, #fb7185, #dc2626); border-color: transparent; }
.arena-tab[data-tab="real"].active,
.friends-tab.active {
  background: linear-gradient(135deg, var(--ph-violet), #4f46e5);
  border-color: transparent;
}

/* Team / cards / missions */
.team-container,
.cards-container,
.trade-card-select,
.shop-items {
  gap: 14px;
}
.team-card,
.card-item,
.trade-card-option,
.shop-item {
  border-radius: 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.team-card:hover,
.card-item:hover,
.trade-card-option:hover,
.shop-item:hover,
.arena-opponent:hover,
.friend-card:hover,
.real-player-card:hover,
.dg-team-member-option:hover,
.coin-pack:hover {
  transform: translateY(-2px);
  border-color: rgba(99,217,255,.45);
  box-shadow: 0 18px 34px rgba(0,0,0,.28);
}
.team-slot {
  width: 100px;
  height: 112px;
  border-radius: 16px;
  border: 1px dashed #38506e;
  background: linear-gradient(180deg, rgba(13,22,39,.8), rgba(10,16,28,.9));
  box-shadow: none;
}
.team-slot.filled { border-color: rgba(34,197,94,.65); }
.team-slot.starter { border-color: rgba(247,201,72,.7); }
.mission-card {
  border-radius: 18px;
  padding: 14px;
  border-color: #283851;
}
.mission-card.mission-claimable {
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 1px rgba(34,197,94,.2), var(--ph-shadow);
}
.mission-card.mission-claimed {
  opacity: .72;
}

/* Shop / economy */
.shop-currencies,
.arena-info,
.hub-chat {
  border-radius: 16px;
}
.shop-currencies span,
.arena-stat {
  padding: 10px 12px;
  border-radius: 12px;
  background: #0d1627;
  border: 1px solid #24334e;
}
.shop-item,
.shop-coins-section,
.coin-pack,
.vip-modal-tier,
.pix-modal-content {
  border-radius: 20px;
}
.shop-item .btn-buy,
.friend-card .btn-sm,
.trade-offer .btn-accept,
.trade-offer .btn-reject,
.trade-offer .btn-cancel,
.real-player-card .btn-challenge,
.btn-dg-invite {
  border-radius: 12px;
  font-weight: 800;
}
.coin-pack {
  background: linear-gradient(180deg, rgba(10,20,36,.96), rgba(13,25,42,.98));
  border-color: rgba(6,182,212,.42);
}
.coin-pack .price,
.vip-pack .price { color: #d7e5f6; }
.section-title,
.pix-header,
.online-title,
.center-title,
.dg-formation-title,
.dg-coop-invite-title,
.dg-coop-waiting-title {
  color: #f8fbff;
  font-weight: 900;
  letter-spacing: .2px;
}
.pix-modal {
  backdrop-filter: blur(5px);
}
.pix-modal-content {
  border-color: rgba(99,217,255,.18);
}
.pay-key,
.pix-key {
  background: #0b1423;
  border-color: #30425f;
  border-radius: 12px;
}

/* Arena */
.arena-opponent,
.real-player-card,
.real-challenge {
  border-radius: 18px;
}
#realPvpStatus {
  padding: 12px !important;
  border-radius: 14px;
  background: rgba(12,20,34,.78);
  border: 1px solid #2b3d59;
}

/* Center */
.center-container {
  min-height: 72vh;
  border-radius: 24px;
  border-color: #2c425f;
}
.center-overlay {
  padding: 42px 24px;
  background: linear-gradient(180deg, rgba(7,17,31,.36), rgba(7,17,31,.74));
}
.center-title {
  font-size: 36px;
  letter-spacing: .8px;
}
.center-pokemon .poke-card {
  border-radius: 16px;
  border: 1px solid rgba(99,217,255,.15);
}
.heal-result {
  background: rgba(12,20,34,.88);
  border: 1px solid #30425f;
}

/* Friends */
.friends-container,
.profile-container,
.forgot-container,
.admin-container {
  border-radius: 22px;
  padding: 18px;
}
.friends-search-row #friendSearchInput,
.profile-container .input,
.forgot-container .input,
.admin-container .input,
#screen-admin .input {
  background: #0d1627;
  border-color: #30425f;
  color: var(--ph-text);
  border-radius: 12px;
}
.friend-msg,
.profile-msg {
  border-radius: 12px;
  padding: 10px 12px;
}
.friend-card {
  border-radius: 16px;
  border: 1px solid #2a3a55;
}
.friend-card .btn-remove,
.friend-card .btn-challenge-friend {
  border-radius: 10px;
}

/* DG */
.dg-preview-card,
.dg-team-member-option,
.dg-coop-ally,
.dg-coop-friend-option,
.dg-friend-call {
  border-radius: 18px;
}
.dg-friend-call {
  background: linear-gradient(180deg, rgba(79,70,229,.14), rgba(15,23,42,.86));
  border: 1px solid rgba(129,140,248,.44);
}
.dg-mode-buttons {
  flex-wrap: wrap;
}
.btn-dg-mode {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px rgba(0,0,0,.22);
}
.dg-coop-status,
.dg-team-formation {
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12,20,34,.7), rgba(12,20,34,.36));
  border: 1px solid rgba(96,165,250,.12);
}
.dg-coop-allies {
  align-items: stretch;
}

/* Profile / forgot / admin */
.profile-divider { background: #20314b; }
.profile-label { color: #a5b8d4; }
.profile-value { color: #fff; }
#screen-admin .admin-container {
  max-width: 720px !important;
}
#screen-admin .admin-container > .profile-field,
#screen-admin #adminActions {
  background: rgba(10,16,28,.45);
  border: 1px solid #22324c;
  border-radius: 16px;
  padding: 14px;
}
#screen-admin #adminActions { margin-top: 16px !important; }
#screen-admin .profile-divider { margin: 14px 0; }
#screen-admin .btn-primary {
  border-radius: 12px;
}
#screen-admin .btn[style*="#991b1b"] {
  border-radius: 12px;
  box-shadow: var(--ph-shadow);
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #284160, #1a2b43);
  border-radius: 999px;
}
*::-webkit-scrollbar-track { background: rgba(9,17,29,.75); }

/* Responsive normalization */
@media (max-width: 860px) {
  .screen-title { font-size: 24px; }
  .battle-container,
  .friends-container,
  .profile-container,
  .forgot-container,
  .admin-container,
  .dg-coop-status,
  .dg-team-formation { padding: 14px; }
  .team-slots { flex-wrap: wrap; }
  .shop-currencies,
  .arena-info { flex-wrap: wrap; gap: 8px; }
  .trade-offer { flex-direction: column; align-items: stretch; }
  .trade-offer-action,
  .trade-offer .action { width: 100%; }
  .trade-offer .btn-accept,
  .trade-offer .btn-cancel { width: 100%; }
  .trade-offer .info,
  .real-player-card,
  .friend-card,
  .dg-coop-friend-option { flex-direction: column; align-items: flex-start; }
  .trade-offer .action,
  .friend-card .friend-actions { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .screen-title { font-size: 21px; }
  .battle-container { padding: 12px; border-radius: 18px; }
  .battle-arena,
  .battle-result,
  .shop-item,
  .coin-pack,
  .team-card,
  .card-item,
  .mission-card,
  .friend-card,
  .real-player-card,
  .real-challenge,
  .dg-preview-card,
  .dg-team-member-option,
  .dg-coop-ally,
  .center-container,
  .friends-container,
  .profile-container,
  .forgot-container,
  .admin-container { border-radius: 16px; }
  .btn-back,
  .btn-back-sm,
  .btn-item,
  .mission-tab,
  .shop-tab,
  .inv-tab,
  .trade-tab,
  .arena-tab,
  .friends-tab { width: 100%; }
  .trade-tabs,
  .arena-tabs,
  .friends-tabs { flex-direction: column; }
  .center-title { font-size: 28px; }
  .center-pokemon .poke-card { flex: 1 1 100%; justify-content: flex-start; }
  .dg-coop-allies { flex-direction: column; }
  .dg-mode-buttons { flex-direction: column; }
}

/* ===== VOLUME CONTROL ===== */
.volume-control-wrap { padding: 8px 12px; }
.volume-control { display: flex; align-items: center; gap: 8px; }
.btn-radio {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 4px; line-height: 1; flex-shrink: 0;
}
.btn-radio:hover { transform: scale(1.15); }
.btn-volume {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 4px; line-height: 1; flex-shrink: 0;
}
.volume-slider {
  -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: #374151; outline: none; flex: 1; min-width: 0;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: #8b5cf6; cursor: pointer; border: none;
}
.volume-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: #8b5cf6; cursor: pointer; border: none;
}

/* ===== BATTLE ANIMATIONS ===== */
@keyframes screenShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
@keyframes spriteDamageFlash {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  15% { filter: brightness(3) saturate(0); }
  30% { filter: brightness(1) sepia(1) hue-rotate(0deg) saturate(5); }
  45% { filter: brightness(1); }
  60% { filter: brightness(3) saturate(0); }
  75% { filter: brightness(1) sepia(1) hue-rotate(0deg) saturate(5); }
  90% { filter: brightness(1); }
}
@keyframes spriteHealFlash {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter: brightness(2) hue-rotate(90deg) drop-shadow(0 0 8px #22c55e); }
}
@keyframes damagePopupAnim {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.4); }
}
@keyframes hpDamagePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; box-shadow: 0 0 8px #ef4444; }
}
@keyframes hpHealPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .8; box-shadow: 0 0 8px #22c55e; }
}
.screen-shake { animation: screenShake .4s ease-in-out; }
.sprite-damage { animation: spriteDamageFlash .5s ease-out !important; }
.sprite-heal { animation: spriteHealFlash .5s ease-out !important; }

/* TravelPoke — atacante corre até o alvo, impacto e volta */
.pokemon-sprite.travelpoke-active,
#realPlayerSprite.travelpoke-active,
#realEnemySprite.travelpoke-active {
  z-index: 30;
  will-change: transform;
}
.pokemon-sprite.travelpoke-charge,
#realPlayerSprite.travelpoke-charge,
#realEnemySprite.travelpoke-charge {
  animation: travelPokeCharge 300ms cubic-bezier(.35, 0, .25, 1) forwards;
}
.pokemon-sprite.travelpoke-return,
#realPlayerSprite.travelpoke-return,
#realEnemySprite.travelpoke-return {
  animation: travelPokeReturn 340ms cubic-bezier(.35, 0, .25, 1) forwards;
}
@keyframes travelPokeCharge {
  0%   { transform: translate(0, 0) scale(1); }
  70%  { transform: translate(calc(var(--tp-dx, 0px) * .92), calc(var(--tp-dy, 0px) * .92)) scale(1.04); }
  100% { transform: translate(var(--tp-dx, 0px), var(--tp-dy, 0px)) scale(1.02); }
}
@keyframes travelPokeReturn {
  0%   { transform: translate(var(--tp-dx, 0px), var(--tp-dy, 0px)) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}
.hp-damage-pulse { animation: hpDamagePulse .5s ease-in-out; }
.hp-heal-pulse { animation: hpHealPulse .5s ease-in-out; }
.damage-popup {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  font-size: 22px; font-weight: 900; color: #fff;
  text-shadow: 0 0 6px #ef4444, 1px 1px 0 rgba(0,0,0,.8);
  pointer-events: none; z-index: 100;
  animation: damagePopupAnim .7s ease-out forwards;
}
.damage-popup.heal-popup { color: #22c55e; text-shadow: 0 0 6px #22c55e, 1px 1px 0 rgba(0,0,0,.8); }
.damage-popup.super-effective { font-size: 26px; text-shadow: 0 0 10px #f59e0b, 1px 1px 0 rgba(0,0,0,.8); }

@keyframes battleFlash {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes battleParticle {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25); }
}
@keyframes battleHealParticle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + var(--dy))) scale(1.2); }
}
@keyframes battleStatusPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20% { opacity: 1; transform: translate(-50%, -54%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}

.battle-effect-sprite-host {
  position: fixed;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  will-change: transform, opacity;
}
.battle-effect-sprite-host.travel.active {
  animation: battleEffectTravel var(--fx-duration, .72s) ease-out forwards;
}
.battle-effect-sprite-host.impact.active {
  animation: battleEffectSprite var(--fx-duration, .78s) ease-out forwards;
}
.battle-effect-sprite-host.super {
  filter: drop-shadow(0 0 9px rgba(245, 158, 11, 0.75));
}
.battle-effect-sprite-host.flip-x .battle-effect-sprite-img,
.battle-effect-sprite-host.flip-x .battle-effect-canvas {
  transform: scaleX(-1);
}
.battle-effect-sprite-host.tibia .battle-effect-canvas {
  width: auto;
  height: auto;
  image-rendering: pixelated;
  display: block;
}
.battle-effect-canvas {
  image-rendering: pixelated;
  display: block;
}
.battle-effect-sprite-img {
  width: 64px;
  height: 64px;
  object-fit: none;
  image-rendering: pixelated;
  display: block;
}
@keyframes battleEffectTravel {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  8%   { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  85%  { opacity: 1; transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, 0px))) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, 0px))) scale(1.05); }
}
@keyframes battleEffectSprite {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
  18%  { opacity: 1; transform: translate(-50%, -52%) scale(1.12); }
  55%  { opacity: 1; transform: translate(-50%, -52%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1.18); }
}
@media (max-width: 480px) {
  .battle-effect-sprite-img {
    image-rendering: pixelated;
  }
}

/* ===== FUSION ===== */
.fusion-container {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin: 12px 0;
}
.fusion-card {
  width: 100px; text-align: center; padding: 10px;
  background: #141828; border: 2px solid #2a2e3e; border-radius: 12px;
  cursor: pointer; transition: all .2s;
}
.fusion-card:hover { border-color: #8b5cf6; transform: translateY(-2px); }
.fusion-card.selected { border-color: #8b5cf6; box-shadow: 0 0 12px rgba(139,92,246,.4); }
.fusion-card .card-img { width: 72px; height: 100px; border-radius: 6px; overflow: hidden; margin: 0 auto 4px; background: #0a0e1a; }
.fusion-card .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fusion-card .card-name { font-size: 12px; font-weight: 700; color: #e0e8f0; }
.fusion-card .card-qty { font-size: 11px; color: #6b7280; }
.fusion-card .card-evo { font-size: 10px; color: #8b5cf6; margin-top: 2px; }
.fusion-card.no-evo { opacity: .5; cursor: not-allowed; }
.fusion-card.no-evo:hover { border-color: #2a2e3e; transform: none; }
.fusion-btn-wrap { text-align: center; margin: 16px 0; }
.fusion-btn-wrap .btn-fuse {
  padding: 14px 40px; font-size: 16px; font-weight: 800; border: none;
  border-radius: 14px; cursor: pointer; transition: all .2s;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff;
}
.fusion-btn-wrap .btn-fuse:hover { transform: scale(1.05); box-shadow: 0 4px 24px rgba(139,92,246,.4); }
.fusion-btn-wrap .btn-fuse:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.fusion-result { text-align: center; padding: 16px; border-radius: 12px; margin: 12px 0; font-weight: 700; }
.fusion-result.success { background: rgba(34,197,94,.12); border: 2px solid #22c55e; color: #22c55e; }
.fusion-result.fail { background: rgba(239,68,68,.12); border: 2px solid #ef4444; color: #ef4444; }
.fusion-result.bonus { background: rgba(139,92,246,.15); border: 2px solid #8b5cf6; color: #c4b5fd; }
.fusion-result img { vertical-align: middle; margin: 0 4px; border-radius: 4px; }
/* Fusion animation */
.fusion-animation {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(10,14,26,.92);
}
.fusion-spinner {
  width: 80px; height: 80px; border: 4px solid #2a2e3e; border-top-color: #8b5cf6;
  border-radius: 50%; animation: fusionSpin .8s linear infinite;
}
@keyframes fusionSpin { to { transform: rotate(360deg); } }
.fusion-spinner-text { margin-top: 16px; color: #c4b5fd; font-weight: 700; font-size: 18px; animation: fusionPulse 1s ease-in-out infinite; }
@keyframes fusionPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ===== PokeHunt Box drop ===== */
.pokehunt-box-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 12, 24, 0.92);
  padding: 20px;
  animation: phBoxFadeIn 0.35s ease;
}
@keyframes phBoxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pokehunt-box-panel {
  text-align: center; max-width: 340px; width: 100%;
  padding: 28px 22px 24px;
  background: linear-gradient(160deg, rgba(30,41,59,.98), rgba(15,23,42,.98));
  border: 2px solid rgba(6,182,212,.45);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(6,182,212,.25), 0 20px 50px rgba(0,0,0,.45);
}
.pokehunt-box-title {
  font-size: 22px; font-weight: 800; color: #22d3ee;
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.pokehunt-box-sub {
  font-size: 14px; color: #94a3b8; margin-bottom: 18px;
}
.pokehunt-box-tap {
  display: inline-block; cursor: pointer;
  padding: 8px; border-radius: 16px;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: phBoxBounce 1.1s ease-in-out infinite;
}
.pokehunt-box-tap:hover { transform: scale(1.06); filter: brightness(1.1); }
.pokehunt-box-tap:active { transform: scale(0.96); }
.pokehunt-box-tap img {
  width: 140px; height: 140px; object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(6,182,212,.45));
}
@keyframes phBoxBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.pokehunt-box-hint {
  margin-top: 16px; font-size: 13px; color: #fbbf24; font-weight: 700;
  animation: phBoxHintPulse 1.4s ease-in-out infinite;
}
@keyframes phBoxHintPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.pokehunt-box-reveal {
  animation: phBoxRevealPop 0.45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes phBoxRevealPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== Card IV glow ===== */
.card-item.iv-glow-good {
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.45), inset 0 0 20px rgba(34, 211, 238, 0.08);
}
.card-item.iv-glow-elite {
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.65), inset 0 0 24px rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.85) !important;
}
.iv-badge-elite { text-shadow: 0 0 8px rgba(245, 158, 11, 0.8); }
.iv-badge-good { text-shadow: 0 0 6px rgba(34, 211, 238, 0.6); }
.iv-bar-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 12px; }
.iv-bar-label { width: 32px; color: #94a3b8; font-weight: 600; }
.iv-bar-track { flex: 1; height: 6px; background: #1e293b; border-radius: 3px; overflow: hidden; }
.iv-bar-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #f59e0b); border-radius: 3px; }
.iv-bar-val { width: 24px; text-align: right; color: #e2e8f0; font-weight: 700; font-size: 11px; }
.pokedex-iv-block { margin-top: 12px; text-align: left; }

/* Card instance picker */
.card-item.card-item-clickable { cursor: pointer; }
.card-item-hint { font-size: 10px; color: #64748b; margin-top: 6px; }
.card-sort-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 8px 10px;
  background: #111827; border: 1px solid #334155; border-radius: 10px;
}
.card-sort-label { font-size: 12px; color: #94a3b8; font-weight: 600; margin-right: 2px; }
.card-sort-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 700;
  border: 1px solid #374151; border-radius: 8px;
  background: #1e293b; color: #cbd5e1; cursor: pointer;
}
.card-sort-btn:hover { border-color: #06b6d4; color: #f8fafc; }
.card-sort-btn.active {
  background: #0891b2; border-color: #22d3ee; color: #0f172a;
}

.card-inst-overlay .card-inst-modal { max-width: 480px; width: 94%; max-height: 88vh; overflow-y: auto; }
.card-inst-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #334155; }
.card-inst-header img { width: 72px; height: 100px; object-fit: contain; border-radius: 8px; background: #0f172a; }
.card-inst-title { font-size: 20px; font-weight: 800; color: #f8fafc; }
.card-inst-sub { font-size: 12px; margin-top: 2px; }
.card-inst-list { display: flex; flex-direction: column; gap: 10px; }
.card-inst-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
  padding: 10px; border-radius: 12px; background: #0f172a; border: 1px solid #334155;
}
.card-inst-row.iv-glow-good { border-color: rgba(34, 211, 238, 0.45); }
.card-inst-row.iv-glow-elite { border-color: rgba(245, 158, 11, 0.65); }
.card-inst-thumb img { width: 56px; height: 78px; object-fit: contain; border-radius: 6px; }
.card-inst-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.card-inst-copy { font-size: 11px; color: #94a3b8; font-weight: 600; }
.card-inst-action { min-width: 108px; text-align: center; }
.card-inst-btn {
  padding: 8px 10px; font-size: 11px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; width: 100%;
}
.card-inst-btn-equip { background: #22c55e; color: #fff; }
.card-inst-btn-equip:hover { background: #16a34a; }
.card-inst-btn-sell {
  margin-top: 6px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
}
.card-inst-btn-sell:hover { background: linear-gradient(135deg, #d97706, #b45309); }
.card-inst-status { font-size: 11px; font-weight: 700; color: #94a3b8; }
.card-inst-equipped { color: #22c55e; }
.card-inst-disabled { color: #ef4444; }

.hub-team-iv { margin-top: 2px; transform: scale(0.9); }
.team-slot-iv { display: block; margin-top: 2px; transform: scale(0.92); }
.pack-card-slot.iv-glow-good { border-color: rgba(34, 211, 238, 0.55) !important; box-shadow: 0 0 12px rgba(34, 211, 238, 0.35); }
.pack-card-slot.iv-glow-elite { border-color: rgba(245, 158, 11, 0.75) !important; box-shadow: 0 0 14px rgba(245, 158, 11, 0.45); }

.pokehunt-box-prize-icon {
  font-size: 56px; line-height: 1; margin: 8px 0 12px;
}
.pokehunt-box-prize-name {
  font-size: 20px; font-weight: 800; color: #f8fafc; margin-bottom: 6px;
}
.pokehunt-box-prize-desc {
  font-size: 13px; color: #94a3b8; margin-bottom: 18px;
}
.pokehunt-box-btn {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #0f172a; font-weight: 800; border: none;
  padding: 12px 28px; border-radius: 12px; cursor: pointer;
  font-size: 15px; width: 100%;
}
.pokehunt-box-btn:hover { filter: brightness(1.08); }
.pokehunt-box-queue {
  margin-top: 10px; font-size: 12px; color: #64748b;
}

/* ===== LOBBY ===== */
.btn-lobby { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.lobby-container {
  max-width: 480px; margin: 0 auto;
  background: url('images/cp.png') center/cover no-repeat;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(99,217,255,.15);
  position: relative;
}
.lobby-container::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(7,17,31,.82);
  pointer-events: none;
}
.lobby-messages {
  position: relative; z-index: 1;
  height: 380px; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.lobby-messages::-webkit-scrollbar { width: 4px; }
.lobby-messages::-webkit-scrollbar-track { background: transparent; }
.lobby-messages::-webkit-scrollbar-thumb { background: rgba(99,217,255,.3); border-radius: 2px; }
.lobby-msg {
  padding: 8px 12px; border-radius: 12px;
  max-width: 85%; word-break: break-word;
  font-size: 13px; line-height: 1.4;
  animation: fadeIn .2s ease;
}
.lobby-msg.self {
  align-self: flex-end;
  background: rgba(59,130,246,.3);
  border: 1px solid rgba(59,130,246,.4);
  color: #dbeafe;
}
.lobby-msg.other {
  align-self: flex-start;
  background: rgba(20,24,40,.85);
  border: 1px solid #2a2e3e;
  color: #e0e8f0;
}
.lobby-msg .msg-author {
  font-size: 11px; font-weight: 700; margin-bottom: 2px;
}
.lobby-msg .msg-author.vip-dia { color: #f59e0b; }
.lobby-msg .msg-author.vip-mythic { color: #8b5cf6; }
.lobby-msg .msg-time {
  font-size: 10px; color: #6b7280; text-align: right; margin-top: 2px;
}
.lobby-input-wrap {
  position: relative; z-index: 1;
  display: flex; gap: 6px; padding: 10px 12px;
  background: rgba(10,14,26,.9);
  border-top: 1px solid #2a2e3e;
  align-items: center;
}
.lobby-input-field {
  flex: 1 1 0%;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1a1e30;
  border: 1px solid #2a2e3e;
  color: #e0e8f0;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  height: 42px;
}
.lobby-input-field:focus { border-color: #3b82f6; }
.lobby-input-field::placeholder { color: #4b5563; }
.lobby-input-wrap .input {
  flex: 1 1 0% !important; min-width: 0; width: 0 !important;
  padding: 10px 14px; border-radius: 10px;
  background: #1a1e30; border: 1px solid #2a2e3e; color: #e0e8f0;
  font-size: 15px; outline: none; box-sizing: border-box; height: 42px;
  margin-bottom: 0;
}
.lobby-input-wrap .input:focus { border-color: #3b82f6; }
.btn-lobby-send {
  flex: 0 0 auto;
  padding: 0 16px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  white-space: nowrap; transition: all .2s; height: 42px;
}
.btn-lobby-send:hover { filter: brightness(1.15); }
.btn-lobby-send:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.lobby-empty {
  color: #6b7280; text-align: center; padding: 40px 20px; font-size: 13px;
}

/* ===== POKEDEX MODAL ===== */
.pokedex-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.92);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pokedex-modal {
  background: #141828; border-radius: 16px; border: 2px solid #2a2e3e;
  max-width: 420px; width: 100%; padding: 24px; position: relative;
  max-height: 90vh; overflow-y: auto; margin: auto;
}
.pokedex-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: #6b7280; font-size: 22px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.pokedex-close:hover { color: #ef4444; background: #1f2937; }
.pokedex-header {
  text-align: center; margin-bottom: 16px;
}
.pokedex-img {
  width: 120px; height: 120px; image-rendering: pixelated; object-fit: contain;
  margin-bottom: 8px; background: #1a1e30; border-radius: 12px; padding: 8px;
}
.pokedex-name {
  font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px;
}
.pokedex-voc {
  font-size: 13px; color: #6b7280; margin-bottom: 4px;
}
.pokedex-rarity {
  display: inline-block; padding: 3px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 700; margin-bottom: 8px;
}
.pokedex-types {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px;
}
.pokedex-section {
  background: #1a1e30; border-radius: 10px; padding: 14px; margin-bottom: 10px;
}
.pokedex-section-title {
  font-size: 13px; font-weight: 700; color: #14b8a6; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.pokedex-evo-row {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  flex-wrap: wrap; font-size: 13px;
}
.pokedex-evo-arrow { color: #6b7280; font-size: 16px; }
.pokedex-stone-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #2a1f3a; color: #a78bfa; font-size: 11px; font-weight: 600;
}
.pokedex-move {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid #1f2937; font-size: 12px;
}
.pokedex-move:last-child { border-bottom: none; }
.pokedex-move-type {
  padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
  min-width: 40px; text-align: center;
}
.pokedex-card-lupa {
  position: absolute; top: 6px; right: 6px;
  background: #1f2937; border: none; color: #9ca3af; font-size: 14px;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.pokedex-card-lupa:hover { background: #374151; color: #fff; }


/* ================================================================
   REDESIGN VISUAL — RPG Moderno + Glassmorphism  (v2.0)
   Adiciona camadas de estilo sobre os componentes existentes
   sem remover compatibilidade.
   ================================================================ */

/* --- Fundo global com partículas/névoa animada --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(99,217,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 95% 110%, rgba(139,92,246,.10) 0%, transparent 55%),
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(255,138,61,.05) 0%, transparent 60%);
  animation: bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 1;  transform: scale(1.04); }
}

/* --- Fonte melhorada --- */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  letter-spacing: .01em;
}

/* ================================================================
   HUB — BRAND STRIP (glassmorphism)
   ================================================================ */
.hub-brand-strip {
  background: linear-gradient(135deg,
    rgba(15,26,46,.92) 0%,
    rgba(10,18,36,.96) 100%) !important;
  border: 1px solid rgba(99,217,255,.18) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
  position: relative;
  overflow: hidden;
}
.hub-brand-strip::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -5%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,217,255,.07), transparent 70%);
  pointer-events: none;
}
.hub-brand-kicker {
  background: linear-gradient(90deg, #63d9ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11px;
  letter-spacing: 2px;
}
.hub-season-badge {
  background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(249,115,22,.18)) !important;
  border: 1px solid rgba(251,191,36,.4) !important;
  color: #fde68a !important;
  font-size: 11px !important;
  letter-spacing: 1.5px;
  box-shadow: 0 0 16px rgba(251,191,36,.12);
}

/* ================================================================
   HUB — PLAYER CARD (glassmorphism + glow)
   ================================================================ */
.hub-header {
  background: linear-gradient(135deg,
    rgba(12,22,40,.94) 0%,
    rgba(8,16,30,.97) 100%) !important;
  border: 1px solid rgba(99,217,255,.14) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}
.hub-player-card {
  position: relative;
}
.hub-player-card::before {
  content: "";
  position: absolute;
  top: -60px; left: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,217,255,.06), transparent 70%);
  pointer-events: none;
}
.trainer-info {
  font-size: 20px !important;
  font-weight: 900 !important;
}
.hub-xp-track {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
.hub-xp-bar {
  background: linear-gradient(90deg, #63d9ff, #8b5cf6, #ec4899) !important;
  box-shadow: 0 0 8px rgba(99,217,255,.5);
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.hub-economy-card {
  background: rgba(8,16,30,.5) !important;
  border-left: 1px solid rgba(99,217,255,.12) !important;
}
.stats-bar span {
  background: rgba(8,16,30,.8) !important;
  border: 1px solid rgba(99,217,255,.12) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700;
  transition: border-color .2s, box-shadow .2s;
}
.stats-bar span:hover {
  border-color: rgba(99,217,255,.35) !important;
  box-shadow: 0 0 12px rgba(99,217,255,.1);
}

/* ================================================================
   HUB — CHAT embutido
   ================================================================ */
.hub-chat {
  background: rgba(8,16,30,.7) !important;
  border: 1px solid rgba(52,73,102,.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hub-chat-messages {
  background: rgba(7,17,31,.82) !important;
  border: 1px solid rgba(99,217,255,.12) !important;
}
@media (max-width: 480px) {
  .hub-chat-messages {
    height: min(156px, 22vh);
    min-height: 112px;
  }
  .hub-economy-card .stats-bar span {
    font-size: 11px;
    padding: 7px 9px;
  }
}

/* ================================================================
   HUB — ACTION SECTIONS (glassmorphism)
   ================================================================ */
.hub-action-section {
  background: linear-gradient(180deg,
    rgba(12,22,40,.92) 0%,
    rgba(8,16,30,.96) 100%) !important;
  border: 1px solid rgba(52,73,102,.6) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.section-kicker {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  background: linear-gradient(90deg, #e2e8f0, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================================================================
   BOTÕES — RPG card style com hover glow
   ================================================================ */
.hub-grid .btn {
  min-height: 72px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .3px;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  transition: transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s,
              filter .18s !important;
  position: relative;
  overflow: hidden;
}
.hub-grid .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}
.hub-grid .btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  filter: brightness(1.12);
  box-shadow:
    0 8px 28px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.hub-grid .btn:active {
  transform: scale(.97) translateY(0) !important;
  filter: brightness(.95);
}

/* Glow colorido por botão no hover */
.btn-hunt:hover    { box-shadow: 0 8px 28px rgba(45,138,78,.4),  inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-center:hover  { box-shadow: 0 8px 28px rgba(239,68,68,.4),  inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-pvp:hover     { box-shadow: 0 8px 28px rgba(239,68,68,.45), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-dg:hover      { box-shadow: 0 8px 28px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-team:hover    { box-shadow: 0 8px 28px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-cards:hover   { box-shadow: 0 8px 28px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-shop:hover    { box-shadow: 0 8px 28px rgba(245,158,11,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-daily:hover   { box-shadow: 0 8px 28px rgba(236,72,153,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-missions:hover{ box-shadow: 0 8px 28px rgba(20,184,166,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-trade:hover   { box-shadow: 0 8px 28px rgba(20,184,166,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-lobby:hover   { box-shadow: 0 8px 28px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-discord:hover { box-shadow: 0 8px 28px rgba(88,101,242,.5), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-friend:hover  { box-shadow: 0 8px 28px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-fusion:hover  { box-shadow: 0 8px 28px rgba(109,40,217,.5), inset 0 1px 0 rgba(255,255,255,.16) !important; }
.btn-inventory:hover { box-shadow: 0 8px 28px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.16) !important; }

/* ===== MODO HISTÓRIA ===== */
.btn-story {
  background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
}
.btn-story:hover {
  box-shadow: 0 8px 28px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.story-hub-container {
  max-width: 720px;
  margin: 0 auto 16px;
  padding: 0 12px;
}
.story-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(15,23,42,.7);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 12px;
}
.story-hub-path { font-weight: 700; color: #c4b5fd; }
.story-hub-progress { font-size: 13px; color: #94a3b8; }
.story-chapter-list {
  display: grid;
  gap: 10px;
}
.story-chapter-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(15,23,42,.65);
  border: 1px solid rgba(52,73,102,.5);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.story-chapter-card:hover:not(.locked) {
  border-color: rgba(139,92,246,.5);
  transform: translateY(-1px);
}
.story-chapter-card.locked { opacity: .45; cursor: not-allowed; }
.story-chapter-card.done { border-color: rgba(34,197,94,.35); }
.story-chapter-card.active { border-color: rgba(245,158,11,.55); }
.story-chapter-status { font-size: 22px; line-height: 1; }
.story-chapter-title { font-weight: 800; color: #e2e8f0; }
.story-chapter-npc, .story-chapter-area { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.story-chapter-mission { font-size: 12px; color: #c4b5fd; margin-top: 4px; font-weight: 600; }
.story-chapter-progress { font-size: 11px; color: #fbbf24; margin-top: 4px; }
.story-mission-progress { font-size: 11px; color: #fbbf24; margin-top: 4px; font-weight: 600; }
.btn-story-continue {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.story-dialog-mission-progress { display: block; margin-top: 4px; color: #fbbf24; font-weight: 600; }
.story-mission-log {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  background: rgba(8,16,30,.8);
  border: 1px solid rgba(52,73,102,.45);
  border-radius: 12px;
}
.story-mission-log-title {
  font-weight: 800;
  color: #a78bfa;
  margin-bottom: 10px;
  font-size: 15px;
}
.story-mission-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  margin: 8px 0 6px;
}
.story-mission-row {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(15,23,42,.5);
  margin-bottom: 6px;
}
.story-mission-row.completed { opacity: .75; }
.story-mission-title { font-weight: 700; color: #e2e8f0; font-size: 14px; }
.story-mission-npc { font-size: 12px; color: #f59e0b; }
.story-mission-desc { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.story-muted { color: #64748b; font-size: 13px; }
.story-npc-registry { margin-top: 16px; }
.story-npc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.story-npc-tag {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.35);
  color: #c4b5fd;
}
.story-path-overlay .story-path-modal { max-width: 520px; text-align: center; }
.story-path-title { font-size: 20px; font-weight: 900; color: #c4b5fd; margin-bottom: 8px; }
.story-path-sub { font-size: 13px; color: #94a3b8; margin-bottom: 16px; line-height: 1.5; }
.story-path-grid { display: grid; gap: 12px; }
.story-path-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(139,92,246,.35);
  background: rgba(15,23,42,.8);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.story-path-card:hover {
  border-color: #a78bfa;
  transform: translateY(-2px);
}
.story-path-icon { font-size: 28px; margin-bottom: 6px; }
.story-path-label { font-weight: 800; color: #e2e8f0; }
.story-path-desc { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
.story-campaign-modal { max-width: 560px; }
.story-campaign-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .story-campaign-grid { grid-template-columns: 1fr 1fr; } }
.story-campaign-card {
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid rgba(236,72,153,.35);
  background: rgba(15,23,42,.8);
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.story-campaign-card:hover {
  border-color: #f472b6;
  transform: translateY(-2px);
}
.story-campaign-icon { font-size: 32px; margin-bottom: 6px; }
.story-campaign-label { font-weight: 800; color: #e2e8f0; font-size: 15px; }
.story-campaign-desc { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.45; }
.story-campaign-progress { font-size: 11px; color: #c084fc; margin-top: 8px; font-weight: 700; }
.story-dialog-overlay { z-index: 10050; }
.story-dialog-box {
  position: relative;
  display: flex;
  gap: 14px;
  max-width: 520px;
  width: calc(100% - 24px);
  margin: auto;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(17,24,39,.98), rgba(8,16,30,.98));
  border: 2px solid rgba(139,92,246,.45);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
.story-dialog-portrait {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: rgba(99,102,241,.15);
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,.3);
}
.story-dialog-speaker {
  font-weight: 800;
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 6px;
}
.story-dialog-mission {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(167,139,250,.35);
  border-radius: 8px;
  font-size: 12px;
  color: #cbd5e1;
}
.story-dialog-mission-pending { opacity: .85; }
.story-dialog-mission-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #a78bfa; }
.story-dialog-mission strong { color: #e9d5ff; font-size: 13px; }
.story-dialog-text {
  color: #e2e8f0;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.story-dialog-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story-choice-btn {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(99,102,241,.4);
  background: rgba(30,41,59,.8);
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.story-choice-btn:hover {
  background: rgba(79,70,229,.35);
  border-color: #a78bfa;
}
.story-dialog-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
}

/* ================================================================
   DG BATTLE — pulse mais elegante
   ================================================================ */
.btn-dg {
  background: linear-gradient(135deg, #c026d3, #7c3aed) !important;
}
@keyframes dgPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(192,38,211,.25), inset 0 1px 0 rgba(255,255,255,.12); }
  50%      { box-shadow: 0 4px 28px rgba(192,38,211,.6),  inset 0 1px 0 rgba(255,255,255,.12); }
}

/* ================================================================
   SIDEBAR — glassmorphism
   ================================================================ */
.hub-sidebar {
  background: linear-gradient(180deg,
    rgba(12,22,40,.94) 0%,
    rgba(8,16,30,.97) 100%) !important;
  border: 1px solid rgba(52,73,102,.55) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.sidebar-section-title {
  background: linear-gradient(90deg, #e2e8f0, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 12px !important;
  letter-spacing: 1.5px;
  border-color: rgba(99,217,255,.12) !important;
}
.ranking-item {
  background: rgba(8,16,30,.7) !important;
  border: 1px solid rgba(52,73,102,.3);
  border-radius: 8px !important;
  transition: all .18s;
}
.ranking-item:hover {
  background: rgba(15,26,46,.9) !important;
  border-color: rgba(99,217,255,.2) !important;
  transform: translateX(2px);
}

/* ================================================================
   STARTER DISPLAY — vidro premium
   ================================================================ */
.starter-display {
  background: linear-gradient(135deg,
    rgba(12,22,40,.92) 0%,
    rgba(15,26,46,.96) 100%) !important;
  border: 1px solid rgba(99,217,255,.16) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ================================================================
   TELA DE BOAS-VINDAS — hero card melhorado
   ================================================================ */
.welcome-hero-card {
  border: 1px solid rgba(99,217,255,.2) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(2px);
}
.brand-badge {
  background: rgba(6,12,24,.8) !important;
  border: 1px solid rgba(99,217,255,.3) !important;
  box-shadow: 0 0 16px rgba(99,217,255,.08);
}
.welcome-highlights span {
  background: rgba(6,12,24,.8) !important;
  border: 1px solid rgba(71,85,105,.5) !important;
  transition: all .2s;
}
.welcome-highlights span:hover {
  border-color: rgba(99,217,255,.4) !important;
  transform: translateY(-2px);
}
.welcome-panel {
  border: 1px solid rgba(99,217,255,.15) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.online-section {
  background: rgba(8,16,32,.85) !important;
  border: 1px solid rgba(99,217,255,.14) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px);
}
.online-title {
  background: linear-gradient(90deg, #63d9ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20px !important;
  font-weight: 900 !important;
}
.auth-tabs {
  border: 1px solid rgba(99,217,255,.15) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.auth-tab {
  background: rgba(8,16,32,.9) !important;
}
.auth-tab.active {
  background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.input-login {
  background: rgba(8,16,32,.9) !important;
  border: 1px solid rgba(99,217,255,.15) !important;
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s;
}
.input-login:focus {
  border-color: rgba(99,217,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(99,217,255,.08);
}
.btn-login {
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1) !important;
  transition: transform .15s, filter .15s !important;
}
.btn-login:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ================================================================
   NOTIFICAÇÃO — estilo toast premium
   ================================================================ */
.notification {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: linear-gradient(135deg, rgba(12,22,40,.95), rgba(8,16,30,.98)) !important;
  border: 1px solid rgba(99,217,255,.2) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
}

/* ================================================================
   SCREEN TITLE — gradiente
   ================================================================ */
.screen-title {
  background: linear-gradient(90deg, #f8fbff 30%, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 26px !important;
  font-weight: 900 !important;
}

/* ================================================================
   BTN-BACK — vidro
   ================================================================ */
.btn-back {
  background: rgba(10,18,36,.75) !important;
  border: 1px solid rgba(52,73,102,.6) !important;
  backdrop-filter: blur(8px);
  border-radius: 12px !important;
  transition: all .2s;
}
.btn-back:hover {
  border-color: rgba(99,217,255,.4) !important;
  background: rgba(12,22,40,.9) !important;
  transform: translateX(-2px);
}

/* ================================================================
   MODAL PIX — vidro premium
   ================================================================ */
.pix-modal-content {
  background: linear-gradient(180deg, rgba(15,26,46,.97), rgba(8,16,30,.99)) !important;
  border: 1px solid rgba(99,217,255,.18) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ================================================================
   SHOP / TRADE / BATALHA — surface cards
   ================================================================ */
.shop-item,
.trade-offer,
.real-player-card,
.friend-card,
.ranking-item,
.dg-preview-card,
.arena-opponent {
  border: 1px solid rgba(52,73,102,.45) !important;
  background: rgba(10,18,36,.85) !important;
  backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
}
.shop-item:hover,
.arena-opponent:hover {
  border-color: rgba(99,217,255,.3) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
  transform: translateY(-2px) !important;
}

/* ================================================================
   AREA BUTTONS (CAÇA) — card com imagem + vidro
   ================================================================ */
.area-btn {
  border: 1px solid rgba(52,73,102,.5) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
  transition: transform .2s, box-shadow .2s, border-color .2s !important;
}
.area-btn:hover {
  border-color: rgba(99,217,255,.35) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.45), 0 0 20px rgba(99,217,255,.08) !important;
  transform: translateY(-3px) scale(1.01) !important;
}

/* ================================================================
   BATALHA — arena cards
   ================================================================ */
.battle-arena {
  background: linear-gradient(180deg, rgba(10,18,36,.7), rgba(6,12,24,.5)) !important;
  border: 1px solid rgba(99,217,255,.1) !important;
  backdrop-filter: blur(6px);
}
.battle-container {
  background: linear-gradient(180deg, rgba(10,18,36,.75), rgba(6,12,24,.45)) !important;
  border: 1px solid rgba(99,217,255,.1) !important;
}

/* ================================================================
   VIP TIER cards
   ================================================================ */
.vip-tier {
  background: rgba(8,16,30,.8) !important;
  border: 1px solid rgba(245,158,11,.15) !important;
  border-radius: 10px !important;
}
.vip-tier:last-child {
  border-color: rgba(139,92,246,.2) !important;
}
.vip-modal-tier {
  background: rgba(10,18,36,.9) !important;
  border: 1px solid rgba(52,73,102,.5) !important;
  backdrop-filter: blur(8px);
}
.vip-modal-tier:hover {
  border-color: rgba(245,158,11,.5) !important;
  box-shadow: 0 0 24px rgba(245,158,11,.1) !important;
}
.vip-modal-tier:last-child:hover {
  border-color: rgba(139,92,246,.5) !important;
  box-shadow: 0 0 24px rgba(139,92,246,.12) !important;
}

/* ================================================================
   PERFIL / FORGOT containers
   ================================================================ */
.profile-container,
.forgot-container,
.admin-container {
  background: linear-gradient(180deg, rgba(12,22,40,.93), rgba(8,16,30,.97)) !important;
  border: 1px solid rgba(52,73,102,.55) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}

/* ================================================================
   SCROLLBAR GLOBAL
   ================================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(8,16,30,.4); }
::-webkit-scrollbar-thumb {
  background: rgba(99,217,255,.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(99,217,255,.45); }

/* ================================================================
   RESPONSIVO — mantém glassmorphism em mobile
   ================================================================ */
@media (max-width: 480px) {
  .hub-brand-strip,
  .hub-header,
  .hub-action-section,
  .hub-sidebar,
  .starter-display {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .hub-grid .btn {
    min-height: 60px !important;
    font-size: 13px !important;
  }
}

/* ================================================================
   HUB — MINI TEAM STRIP (substituiu o "Parceiro Principal")
   ================================================================ */
.hub-team-strip {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(99,217,255,.08);
}
.hub-team-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 62px;
  padding: 6px 4px;
  background: rgba(8,16,30,.7);
  border: 1px solid rgba(52,73,102,.4);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
  cursor: default;
}
.hub-team-slot:hover {
  border-color: rgba(99,217,255,.3);
  transform: translateY(-2px);
}
.hub-team-slot.fainted {
  opacity: .45;
  filter: grayscale(1);
}
.hub-team-sprite {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.hub-team-sprite img {
  image-rendering: pixelated;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}
.hub-team-name {
  font-size: 9px;
  font-weight: 700;
  color: #c4d3e8;
  text-align: center;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.hub-team-lv {
  font-size: 9px;
  color: #6b7280;
  font-weight: 600;
}
.hub-team-hpbar {
  width: 40px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
}
.hub-team-hpbar > div {
  height: 100%;
  border-radius: 999px;
  transition: width .4s;
}

/* Remove estilos da antiga .starter-display grande */
.starter-display {
  display: none !important;
}

/* ===== TORNEIOS PvP ===== */
.tourn-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.tourn-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tourn-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #f1f5f9;
}
.tourn-card-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.tourn-status-open     { background: #16a34a22; color: #4ade80; border: 1px solid #16a34a55; }
.tourn-status-active   { background: #d9770622; color: #fbbf24; border: 1px solid #d9770655; }
.tourn-status-finished { background: #1e293b;   color: #6b7280; border: 1px solid #334155; }
.tourn-card-info {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 10px;
}
.tourn-prize-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tourn-prize-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #cbd5e1;
}
.tourn-actions {
  display: flex;
  gap: 6px;
}
.btn-tourn-register {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.btn-tourn-register:hover { filter: brightness(1.1); }
.btn-tourn-register.registered {
  background: #374151;
  color: #9ca3af;
  cursor: default;
}
.btn-tourn-detail {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
}
.btn-tourn-detail:hover { background: #334155; color: #f1f5f9; }

/* Bracket visual */
.bracket-container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-top: 12px;
}
.bracket-round {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 0 6px;
}
.bracket-round-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding: 3px 0;
  border-bottom: 1px solid #334155;
}
.bracket-match {
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #1e293b;
}
.bracket-match.is-mine {
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245,158,11,0.3);
}
.bracket-player {
  padding: 6px 10px;
  font-size: 12px;
  color: #cbd5e1;
  border-bottom: 1px solid #0f172a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bracket-player:last-child { border-bottom: none; }
.bracket-player.winner {
  background: #16a34a22;
  color: #4ade80;
  font-weight: 700;
}
.bracket-player.bye {
  color: #4b5563;
  font-style: italic;
}
.bracket-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #374151;
  padding: 4px 0;
}

/* Titulo PvP no perfil */
.pvp-title-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Alerta minha partida */
.my-match-alert {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.my-match-alert-text { font-size: 13px; color: #fff; font-weight: 600; }
.btn-fight-now {
  padding: 7px 14px;
  background: #fff;
  color: #d97706;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-fight-now:hover { background: #fef3c7; }

/* ===== DG KANTO / JOHTO TABS ===== */
.dg-mode-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 4px;
}
.dg-mode-tab {
  flex: 1;
  max-width: 180px;
  padding: 10px 14px;
  border: 2px solid #374151;
  border-radius: 10px;
  background: #1a1e30;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.dg-mode-tab:hover {
  border-color: #6366f1;
  color: #fff;
}
.dg-mode-tab.active {
  background: linear-gradient(135deg, #1e3a5f, #1e3860);
  border-color: #3b82f6;
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59,130,246,.3);
}
#dgModeJohto.active {
  background: linear-gradient(135deg, #14532d, #166534);
  border-color: #22c55e;
  color: #86efac;
  box-shadow: 0 0 12px rgba(34,197,94,.3);
}
#dgModeLendarios.active {
  background: linear-gradient(135deg, #451a03, #78350f);
  border-color: #f59e0b;
  color: #fde68a;
  box-shadow: 0 0 16px rgba(245,158,11,.5);
}
.dg-johto-badge {
  font-size: 10px;
  background: #22c55e;
  color: #000;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 700;
}
/* ===== CARD EXPIRY BADGES ===== */
.card-expiry-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  margin-top: 3px;
}
.expiry-expired {
  color: #ef4444 !important;
  background: rgba(239,68,68,.15) !important;
  border-color: rgba(239,68,68,.3) !important;
}
.card-inst-expired {
  opacity: 0.55;
  filter: grayscale(60%);
  border-color: #ef4444 !important;
}

/* Card de preview lendário brilhante */
.dg-legendary-card {
  border: 1px solid #f59e0b !important;
  background: linear-gradient(135deg, #1c1400, #2d1f00) !important;
  box-shadow: 0 0 12px rgba(245,158,11,.4) !important;
  position: relative;
}
.dg-legendary-card .pdetail {
  color: #fbbf24 !important;
  font-weight: 700;
  text-shadow: 0 0 6px #f59e0b;
}

/* ===== VITÓRIA ROAD (área Lv60+) ===== */
.area-card[data-id="victory_road"] .area-badge {
  background: linear-gradient(135deg, #b45309, #92400e);
  color: #fde68a;
  font-weight: 800;
}
.area-card[data-id="victory_road"] {
  border-color: #d97706;
  box-shadow: 0 0 10px rgba(217,119,6,.25);
}

/* ================================================================
   DG VISUAL REFRESH (solo + coop)
   ================================================================ */
#screen-dg .dg-prep,
#screen-dg .dg-team-formation,
#screen-dg-coop .dg-coop-status,
#screen-dg-coop .dg-coop-invite,
#screen-dg-coop .dg-coop-waiting {
  background: linear-gradient(180deg, rgba(12, 20, 36, 0.95), rgba(8, 14, 26, 0.98));
  border: 1px solid rgba(71, 85, 105, 0.55);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

#screen-dg .dg-mode-tabs {
  margin: 10px 0 10px;
  gap: 10px;
}

#screen-dg .dg-mode-tab {
  max-width: 220px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.15;
}

#screen-dg .dg-desc {
  color: #cbd5e1;
  font-size: 13px;
  margin-bottom: 14px;
}

#screen-dg .dg-enemy-preview {
  gap: 12px;
  margin-bottom: 16px;
}

#screen-dg .dg-preview-card {
  width: 122px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.55);
  background: radial-gradient(circle at top, rgba(168, 85, 247, 0.18), rgba(15, 23, 42, 0.92));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

#screen-dg .dg-preview-card .psprite img {
  width: 68px;
  height: 68px;
}

#screen-dg .dg-preview-card .pname {
  font-size: 12px;
}

#screen-dg .dg-preview-card .pdetail {
  font-size: 10px;
}

#screen-dg .dg-arena {
  margin-top: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.95), rgba(7, 13, 24, 0.98));
  border: 1px solid rgba(59, 130, 246, 0.25);
}

#screen-dg .dg-wave-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.45);
  font-size: 14px;
  margin: 0 auto 10px;
}

#screen-dg .dg-battle-arena {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(51, 65, 85, 0.65);
  background: rgba(15, 23, 42, 0.65);
}

#screen-dg #dgEnemySprite img,
#screen-dg #dgPlayerSprite img {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.25));
}

#screen-dg #dgBattleLog,
#screen-dg-coop #dgCoopLog {
  border: 1px solid rgba(71, 85, 105, 0.55);
  border-radius: 12px;
  background: rgba(8, 12, 22, 0.92);
  max-height: 170px;
  min-height: 110px;
}

#screen-dg #dgMoveButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#screen-dg #dgMoveButtons .btn-move {
  border-radius: 10px;
  border: 1px solid rgba(51, 65, 85, 0.75);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.96));
  padding: 8px 8px;
}

#screen-dg #dgMoveButtons .btn-move strong {
  font-size: 12px;
}

#screen-dg #dgMoveButtons .move-pp {
  font-size: 10px;
}

#screen-dg #dgBagToggle .btn-item,
#screen-dg-coop #dgCoopBagToggle .btn-item {
  border-radius: 10px;
  border: 1px solid rgba(71, 85, 105, 0.7);
  background: rgba(30, 41, 59, 0.9);
}

#screen-dg #dgBattleItems,
#screen-dg-coop #dgCoopItems {
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.65);
  background: rgba(8, 12, 22, 0.94);
  padding: 10px;
}

#screen-dg-coop .dg-coop-allies {
  gap: 10px;
}

#screen-dg-coop .dg-coop-ally {
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.25);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(10, 16, 30, 0.94));
}

#screen-dg-coop .dg-coop-enemy-section {
  border-radius: 14px;
  padding: 10px 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ================================================================
   DG COOP — Arena Unificada 2v1
   ================================================================ */
.dg-coop-battle-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto minmax(140px, auto) auto;
  column-gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(51, 65, 85, 0.65);
  background: rgba(15, 23, 42, 0.65);
}

/* Enemy side (left) */
.dg-coop-battle-arena > .enemy-side {
  display: contents;
}
.dg-coop-battle-arena .enemy-side .hp-bar-container {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  max-width: 168px;
}
#dgCoopEnemySprite {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
}
.dg-coop-wave-badge {
  grid-column: 1;
  grid-row: 3;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.45);
  font-size: 12px;
  font-weight: 700;
  color: #a855f7;
  margin-top: 4px;
}

/* VS divider (centre) */
.dg-coop-battle-arena > .vs-divider {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: center;
}

/* Player side (right) */
.dg-coop-battle-arena > .player-side {
  display: contents;
}

/* Side-by-side sprite container */
.coop-player-sprites-container {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}
.coop-player-sprites-container #dgCoopP1Sprite {
  position: relative;
  z-index: 2;
  margin-right: -18px;
}
.coop-player-sprites-container #dgCoopP2Sprite {
  position: relative;
  z-index: 1;
  transform: scale(0.82);
  transform-origin: bottom right;
  opacity: 0.88;
}

/* Stacked HP bars */
.coop-players-hp-container {
  grid-column: 3;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.coop-player-hp-block {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(51, 65, 85, 0.55);
  border-radius: 8px;
  padding: 5px 8px;
}
.coop-player-hp-block .hp-label {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coop-player-hp-block .hp-label span:first-child {
  font-weight: 700;
  color: #e2e8f0;
}
.coop-player-hp-block .hp-bar {
  height: 7px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
}
.coop-player-hp-block .hp-text {
  font-size: 10px;
  color: #64748b;
  display: block;
  margin-top: 2px;
}

/* Enemy HP bar row */
.dg-coop-battle-arena .enemy-side .hp-bar-container {
  text-align: center;
}
.dg-coop-battle-arena .enemy-side .hp-label {
  font-size: 13px;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 4px;
  text-align: center;
}

/* Sprite image fixes for new layout */
#dgCoopEnemySprite img,
.coop-player-sprites-container img {
  image-rendering: pixelated;
  object-fit: none !important;
  max-width: none !important;
}

/* Responsive */
@media (max-width: 480px) {
  .dg-coop-battle-arena {
    padding: 8px;
    grid-template-rows: auto minmax(110px, auto) auto;
  }
  .coop-player-sprites-container #dgCoopP1Sprite {
    margin-right: -12px;
  }
  .coop-player-sprites-container #dgCoopP2Sprite {
    transform: scale(0.75);
  }
  .dg-coop-battle-arena .enemy-side .hp-bar-container {
    max-width: 130px;
  }
}

@media (max-width: 860px) {
  #screen-dg #dgMoveButtons {
    grid-template-columns: 1fr;
  }
  #screen-dg .dg-mode-tab {
    max-width: none;
    font-size: 12px;
  }
  #screen-dg .dg-mode-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #screen-dg .btn-dg-mode {
    width: 100%;
    max-width: none;
    min-height: 56px;
    padding: 12px 14px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  #screen-dg .dg-prep {
    padding: 10px;
  }
  #screen-dg .dg-enemy-preview {
    margin-bottom: 10px;
  }
  #screen-dg .dg-preview-card {
    width: 112px;
    padding: 10px 8px;
  }
  #screen-dg .btn-dg-mode {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 12px;
  }
}

/* ================================================================
   POKEMON GIF SPRITES — tamanho via --sprite-px (app.js)
   ================================================================ */
.poke-sprite-gif,
.pokemon-sprite > img,
.hub-team-sprite > img,
.team-slot .sprite > img,
.center-pokemon .poke-card .sprite > img,
.dg-preview-card .psprite > img,
.dg-coop-enemy-section .pokemon-sprite > img,
.dg-coop-ally .pokemon-sprite > img,
.evo-mon > img {
  width: var(--sprite-px, 64px) !important;
  height: var(--sprite-px, 64px) !important;
  max-width: none !important;
  image-rendering: pixelated;
  object-fit: none;
  display: inline-block;
  overflow: visible;
}
.hub-team-sprite > img,
.team-slot .sprite > img,
.center-pokemon .poke-card .sprite > img,
.dg-preview-card .psprite > img,
.evo-mon > img {
  object-fit: contain !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.team-slot .sprite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  flex: 1;
  overflow: visible;
}
.pokemon-sprite .poke-sprite-gif {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.battle-arena .pokemon-sprite > img,
.battle-arena .poke-sprite-gif,
.battle-arena #realEnemySprite > img,
.battle-arena #realPlayerSprite > img,
.dg-battle-arena .pokemon-sprite > img,
.dg-coop-enemy-section .pokemon-sprite > img,
.dg-coop-ally .pokemon-sprite > img {
  object-fit: none !important;
  max-width: none !important;
  max-height: none !important;
}
@media (max-width: 640px) {
  .battle-arena .pokemon-sprite > img,
  .battle-arena .poke-sprite-gif {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  }
}

/* ================================================================
   DASHBOARD DESKTOP — Fase 1 (mockup-inspired)
   ================================================================ */
.dash-screen {
  padding: 0 !important;
  max-width: none !important;
  width: 100%;
  min-height: 100vh;
}
.dash-screen.active {
  display: block;
}
.dash-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(4, 8, 18, 0.96) 0%, rgba(6, 12, 24, 0.98) 100%),
    url("../images/bg.jpg") center / cover no-repeat,
    linear-gradient(180deg, #060d18 0%, #0a1528 45%, #070f1c 100%);
}
.dash-sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid rgba(56, 100, 140, 0.35);
  background: linear-gradient(180deg, rgba(8, 16, 30, 0.98), rgba(6, 12, 24, 0.99));
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25);
}
.dash-sidebar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 18px;
  border-bottom: 1px solid rgba(56, 100, 140, 0.25);
  margin-bottom: 12px;
  text-align: center;
}
.dash-logo {
  width: min(100%, 180px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.dash-brand-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #e0f2fe;
}
.dash-brand-tag {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  margin-top: 2px;
}
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.dash-nav-item-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ph-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}
.ph-icon-lg {
  width: 36px;
  height: 36px;
}
.ph-icon-mobile {
  width: 26px;
  height: 26px;
}
.ph-icon-btn {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ph-icon-head {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}
.ph-icon-pass {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}
.ph-icon-search {
  width: 22px;
  height: 22px;
}
.dash-panel-head h2 {
  display: inline-flex;
  align-items: center;
}
.dash-pass-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-secondary-grid .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  font-size: 12px;
  padding: 8px 6px;
  border-radius: 12px;
}
.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dash-hero-bonus {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.dash-hero-bonus-soon {
  color: #94a3b8;
  background: rgba(100, 116, 139, 0.15);
  border-color: rgba(100, 116, 139, 0.3);
}
.dash-search-result-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
}
.dash-nav-item:hover {
  background: rgba(14, 165, 233, 0.08);
  color: #e2e8f0;
  border-color: rgba(56, 189, 248, 0.15);
}
.dash-nav-item.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(59, 130, 246, 0.12));
  color: #f0f9ff;
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.dash-nav-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 100, 140, 0.45);
  color: #7dd3fc;
}
.dash-sidebar-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(56, 100, 140, 0.25);
}
.dash-install-btn {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(59, 130, 246, 0.15));
  color: #e0f2fe;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
/* Discord button in sidebar — reuses install-btn base, overrides color */
.dash-discord-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  border-color: rgba(88, 101, 242, 0.5) !important;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.25), rgba(71, 82, 196, 0.18)) !important;
  color: #c7c9ff !important;
  transition: background 0.2s, box-shadow 0.2s;
}
.dash-discord-btn:hover {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.45), rgba(71, 82, 196, 0.35)) !important;
  box-shadow: 0 4px 18px rgba(88, 101, 242, 0.4);
  color: #fff !important;
}
/* Discord link in mobile bottom nav */
.dash-mobile-discord-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #a5b4fc;
  font-size: 10px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
}
.dash-mobile-discord-btn:hover, .dash-mobile-discord-btn:active {
  color: #fff;
  background: rgba(88, 101, 242, 0.3);
}
.dash-radio-label {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  margin-bottom: 6px;
}
.dash-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(56, 100, 140, 0.3);
  background: rgba(6, 12, 24, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.dash-search {
  flex: 1;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(8, 16, 30, 0.9);
  border: 1px solid rgba(56, 100, 140, 0.4);
}
.dash-search-icon { opacity: .55; font-size: 14px; }
.dash-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  outline: none;
}
.dash-search-input::placeholder { color: #475569; }
.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dash-currency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(56, 100, 140, 0.45);
  background: rgba(8, 16, 30, 0.85);
}
.dash-currency-gold { color: #fbbf24; }
.dash-currency-coin { color: #22d3ee; }
.dash-online-pill {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  padding: 6px 10px;
}
.dash-topbar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 14px;
  border: 1px solid rgba(56, 100, 140, 0.4);
  background: rgba(8, 16, 30, 0.85);
}
.dash-avatar { font-size: 22px; }
.dash-topbar-profile-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  max-width: 140px;
}
.dash-topbar-name {
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-topbar-level {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}
.dash-icon-btn,
.dash-topbar-btn {
  border: none;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 10px;
  padding: 7px 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.dash-topbar-btn {
  font-size: 11px;
  font-weight: 800;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.dash-content {
  flex: 1;
  width: 100%;
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.dash-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
  gap: 16px;
}
.dash-hero {
  min-height: 220px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(56, 100, 140, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.dash-hero-inner {
  position: relative;
  min-height: 220px;
  padding: 28px 30px;
  display: flex;
  align-items: flex-end;
  background-size: cover !important;
  background-position: center right !important;
}
.dash-hero-default {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.88)),
    url("../images/santuario.png") center right / contain no-repeat,
    linear-gradient(135deg, #0c4a6e 0%, #1e3a5f 40%, #312e81 100%) !important;
}
.dash-hero-event {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.78)),
    url("../images/evento.png") center / cover no-repeat,
    linear-gradient(135deg, #134e4a 0%, #1e3a8a 50%, #581c87 100%);
}
.dash-hero-inner.dash-hero-event {
  min-height: 260px;
}
.dash-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(56, 189, 248, 0.18), transparent 55%);
  pointer-events: none;
}
.dash-hero-copy { position: relative; z-index: 1; max-width: 420px; }
.dash-hero-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: #7dd3fc;
  margin-bottom: 8px;
}
.dash-hero-title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.dash-hero-desc {
  font-size: 14px;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 16px;
}
.dash-hero-cta {
  padding: 12px 22px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.35);
}
.dash-profile-card {
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(56, 100, 140, 0.4);
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.95), rgba(8, 14, 28, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.dash-profile-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.dash-profile-name {
  font-size: 12px;
  font-weight: 800;
  color: #fbbf24;
  min-height: 18px;
}
.dash-profile-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}
.dash-profile-badges {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.dash-stat {
  padding: 10px;
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.8);
  border: 1px solid rgba(56, 100, 140, 0.35);
}
.dash-stat-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 4px;
}
.dash-stat-value {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
}
.dash-panel {
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(56, 100, 140, 0.38);
  background: linear-gradient(180deg, rgba(11, 20, 36, 0.92), rgba(7, 13, 26, 0.96));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.dash-panel-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #f1f5f9;
}
.dash-link-btn {
  border: none;
  background: transparent;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.dash-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.dash-quick-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  min-height: 96px;
  border-radius: 16px;
  border: 1px solid rgba(56, 100, 140, 0.4);
  cursor: pointer;
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dash-quick-tile span { font-size: 28px; }
.dash-quick-tile .ph-icon-lg { margin-bottom: 2px; }
.dash-quick-tile strong {
  font-size: 14px;
  font-weight: 900;
  color: #f8fafc;
}
.dash-quick-tile small {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}
.dash-quick-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.dash-quick-hunt {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.18), rgba(6, 24, 18, 0.9));
  border-color: rgba(34, 197, 94, 0.35);
}
.dash-quick-shop {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.18), rgba(30, 20, 6, 0.9));
  border-color: rgba(245, 158, 11, 0.35);
}
.dash-quick-gym {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.16), rgba(30, 10, 10, 0.9));
  border-color: rgba(239, 68, 68, 0.32);
}
.dash-quick-trade {
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.18), rgba(8, 18, 30, 0.9));
  border-color: rgba(14, 165, 233, 0.35);
}
.dash-quick-fusion {
  background: linear-gradient(145deg, rgba(139, 92, 246, 0.2), rgba(24, 12, 40, 0.92));
  border-color: rgba(139, 92, 246, 0.38);
}
.dash-quick-friends {
  background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(16, 14, 40, 0.92));
  border-color: rgba(99, 102, 241, 0.38);
}
.dash-secondary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.dash-secondary-grid .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  font-size: 11px;
  padding: 6px 4px;
  border-radius: 10px;
}
.dash-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.dash-widgets {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-chat-panel .hub-chat-messages {
  height: 240px;
  max-height: 280px;
}
.dash-vip-compact {
  margin-top: 12px;
  font-size: 11px;
}
.dash-vip-compact .vip-tier { margin-bottom: 8px; }
.dash-vip-compact ul { padding-left: 16px; margin: 4px 0 0; }
.dash-team-section .hub-team-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 2px 10px;
  margin-top: 0;
  border-top: none;
  scrollbar-width: thin;
}
.dash-team-section .hub-team-slot {
  width: 118px;
  min-width: 118px;
  padding: 12px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.95), rgba(6, 12, 24, 0.98));
  border: 1px solid rgba(56, 100, 140, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.dash-team-section .hub-team-sprite {
  width: 72px;
  height: 72px;
}
.dash-team-section .hub-team-name {
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.dash-team-section .hub-team-lv,
.dash-team-section .hub-team-iv {
  font-size: 10px;
  line-height: 1.2;
}
.dash-team-section .hub-team-hpbar { display: none; }

@media (max-width: 1200px) {
  .dash-hero-row,
  .dash-bottom-row { grid-template-columns: 1fr; }
  .dash-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-shell { flex-direction: column; }
  .dash-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(56, 100, 140, 0.35);
  }
  .dash-nav {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
  }
  .dash-nav-item { width: auto; flex: 1 1 calc(50% - 4px); }
  .dash-sidebar-footer { display: none; }
  .dash-topbar { flex-wrap: wrap; }
  .dash-search { max-width: none; width: 100%; }
  .dash-mid-row { grid-template-columns: 1fr; }
  .dash-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Dashboard Fase 2 --- */
.dash-stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-pass-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.75);
  border: 1px solid rgba(56, 100, 140, 0.3);
}
.dash-pass-label { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: .8px; }
.dash-pass-value { font-size: 13px; font-weight: 900; color: #fbbf24; }

.dash-hero-inner {
  background-size: cover !important;
  background-position: center right !important;
}
.dash-hero-art {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: min(280px, 42%);
  height: 85%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
  pointer-events: none;
}
.dash-hero-art-default {
  background:
    radial-gradient(circle at 60% 40%, rgba(56, 189, 248, 0.2) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.15) 0%, transparent 50%);
}
.dash-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.dash-hero-timer-label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.dash-hero-timer {
  font-size: 18px;
  font-weight: 900;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.35);
}

.dash-mid-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}
.dash-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.dash-pack-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 16px;
  border: 1px solid rgba(56, 100, 140, 0.4);
  background: rgba(8, 16, 30, 0.85);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.dash-pack-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}
.dash-pack-art {
  width: 72px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.dash-pack-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}
.dash-pack-label {
  font-size: 13px;
  font-weight: 900;
  color: #f8fafc;
}
.dash-pack-sub {
  font-size: 10px;
  color: #64748b;
  text-align: center;
  line-height: 1.3;
}
.dash-pack-common { border-color: rgba(168, 168, 120, 0.45); box-shadow: inset 0 0 30px rgba(168, 168, 120, 0.06); }
.dash-pack-rare { border-color: rgba(6, 182, 212, 0.45); box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.08); }
.dash-pack-epic { border-color: rgba(168, 85, 247, 0.45); box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.1); }
.dash-pack-legend {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.12), inset 0 0 30px rgba(245, 158, 11, 0.08);
}

.dash-legend-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}
.dash-legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(6, 12, 24, 0.75);
  border: 1px solid rgba(56, 100, 140, 0.35);
}
.dash-legend-item.dash-legend-self {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.06);
}
.dash-legend-sprite {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.dash-legend-sprite img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  object-fit: contain;
}
.dash-legend-body { min-width: 0; flex: 1; }
.dash-legend-name {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
}
.dash-legend-tag {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  margin-left: 4px;
}
.dash-legend-user {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}
.dash-legend-iv {
  color: #22d3ee;
  font-weight: 700;
}
.dash-legend-empty {
  color: #64748b;
  font-size: 13px;
  padding: 24px 12px;
  text-align: center;
}

.dash-team-section .hub-team-slot.dash-team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 128px;
  min-width: 128px;
  min-height: 142px;
  padding: 12px 10px 10px;
  border-radius: 18px;
  border: 2px solid var(--team-rarity-color, rgba(56, 100, 140, 0.45));
  background: linear-gradient(180deg, rgba(12, 22, 42, 0.98), rgba(6, 10, 22, 0.99));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 0 20px color-mix(in srgb, var(--team-rarity-color) 18%, transparent);
  overflow: hidden;
}
.dash-team-rarity-bar {
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--team-rarity-color, #64748b);
  opacity: .85;
}
.dash-team-card.iv-glow-good {
  border-color: #22d3ee !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.25), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.dash-team-card.iv-glow-elite {
  border-color: #f59e0b !important;
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.dash-team-rarity-legendary { --team-rarity-color: #f59e0b; }
.dash-team-rarity-epic { --team-rarity-color: #a855f7; }
.dash-team-rarity-rare { --team-rarity-color: #06b6d4; }
.dash-team-rarity-common { --team-rarity-color: #a8a878; }
.dash-team-section .hub-team-sprite {
  width: 80px;
  height: 80px;
  margin-top: 4px;
}
.dash-team-iv-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #22d3ee;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
}
.dash-team-card.iv-glow-elite .dash-team-iv-pill {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}
.dash-team-empty {
  color: #64748b;
  font-size: 14px;
  padding: 20px 8px;
  text-align: center;
}

@media (max-width: 1200px) {
  .dash-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Dashboard Fase 3 — Mobile nav, busca, Adventure Pass --- */
body.dash-hub-active {
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
}
body.dash-hub-active #app {
  max-width: none !important;
  width: 100%;
  min-height: 100vh;
}
body.dash-hub-active .site-disclaimer {
  display: none;
}
body.dash-mobile-active #app {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.dash-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  justify-content: space-around;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.92), rgba(4, 8, 18, 0.98));
  border-top: 1px solid rgba(56, 100, 140, 0.45);
  backdrop-filter: blur(14px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
}
.dash-mobile-nav.hidden { display: none; }
.dash-mobile-nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.1;
}
.dash-mobile-nav-item.active {
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.1);
}
.dash-mobile-nav-icon { font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }

.dash-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 16px 24px;
}
.dash-search-overlay.hidden { display: none; }
.dash-search-panel {
  width: min(560px, 100%);
  max-height: min(70vh, 520px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(56, 100, 140, 0.45);
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.98), rgba(6, 10, 22, 0.99));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.dash-search-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(56, 100, 140, 0.3);
  color: #e2e8f0;
}
.dash-search-close {
  border: none;
  background: rgba(15, 23, 42, 0.8);
  color: #94a3b8;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.dash-search-results {
  max-height: calc(min(70vh, 520px) - 56px);
  overflow-y: auto;
  padding: 8px;
}
.dash-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(6, 12, 24, 0.65);
  color: #e2e8f0;
  text-align: left;
  cursor: pointer;
}
.dash-search-result:hover,
.dash-search-result.active {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.08);
}
.dash-search-result-icon { font-size: 22px; }
.dash-search-result-label { display: block; font-size: 14px; font-weight: 800; }
.dash-search-result-sub { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.dash-search-empty { padding: 24px 16px; text-align: center; color: #64748b; font-size: 14px; }

.dash-adventure-pass {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(14, 165, 233, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.dash-pass-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.dash-pass-title { font-size: 13px; font-weight: 900; color: #fde68a; }
.dash-pass-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.dash-pass-claim {
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  color: #111827;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.dash-pass-done { font-size: 11px; font-weight: 700; color: #64748b; }
.dash-pass-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  overflow: hidden;
  border: 1px solid rgba(56, 100, 140, 0.25);
}
.dash-pass-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #38bdf8);
  transition: width .35s ease;
}
.dash-pass-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
}

@media (min-width: 901px) {
  .dash-mobile-nav { display: none !important; }
  body.dash-mobile-active #app { padding-bottom: 0; }
}
@media (max-width: 900px) {
  .dash-topbar-profile-text,
  .dash-online-pill { display: none; }
  .dash-search { max-width: none; flex: 1; }
  .dash-nav { display: none !important; }
  .dash-sidebar {
    padding-bottom: 8px;
  }
}

/* --- Ajustes finais: navegação, mobile e sprites --- */
.dash-panel {
  scroll-margin-top: 104px;
}

@media (max-width: 900px) {
  .dash-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 12px 12px 10px;
    background: linear-gradient(180deg, rgba(8, 16, 30, 0.96), rgba(6, 12, 24, 0.98));
    backdrop-filter: blur(16px);
  }
  .dash-sidebar-brand {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 10px;
    margin-bottom: 10px;
    text-align: left;
  }
  .dash-logo {
    width: min(140px, 42vw);
  }
  .dash-brand-tag {
    margin-top: 0;
  }
  .dash-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .dash-nav::-webkit-scrollbar {
    display: none;
  }
  .dash-nav-item {
    flex: 0 0 auto;
    min-width: max-content;
    white-space: nowrap;
    padding: 10px 12px;
  }
  .dash-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .dash-search {
    order: 1;
    width: 100%;
    padding: 10px 12px;
  }
  .dash-topbar-actions {
    order: 2;
    width: 100%;
    gap: 8px;
    justify-content: space-between;
  }
  .dash-currency {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }
  .dash-topbar-profile {
    margin-left: auto;
  }
  .dash-content {
    padding: 14px 14px 20px;
    gap: 14px;
  }
  .dash-hero-row,
  .dash-mid-row,
  .dash-bottom-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .dash-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-team-section .hub-team-strip {
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }
  .dash-team-section .hub-team-slot.dash-team-card {
    width: 104px;
    min-width: 104px;
    flex: 0 0 104px;
    scroll-snap-align: start;
  }
  .dash-team-section .hub-team-sprite {
    width: 82px;
    height: 82px;
  }
  .dash-team-section .hub-team-hpbar {
    width: 82px;
  }
  .dash-legend-sprite {
    width: 56px;
    height: 56px;
  }
  .dash-legend-sprite img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 640px) {
  .screen {
    padding: 16px 12px;
  }
  .screen:not(.welcome-screen):not(.hub-screen) {
    max-width: none;
  }
  .battle-arena,
  .dg-battle-arena {
    grid-template-rows: auto minmax(146px, auto) auto;
    min-height: 232px;
  }
  .battle-arena > .vs-divider,
  .battle-arena > .vs-badge,
  .dg-battle-arena > .vs-divider {
    font-size: 20px;
  }
  .dash-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-quick-grid {
    grid-template-columns: 1fr;
  }
  .dash-mobile-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 480px) {
  .dash-sidebar {
    padding: 10px 10px 8px;
  }
  .dash-sidebar-brand {
    padding-bottom: 8px;
  }
  .dash-topbar {
    padding: 10px 12px;
  }
  .dash-currency {
    font-size: 12px;
    padding: 7px 10px;
  }
  .dash-icon-btn,
  .dash-topbar-btn {
    padding: 8px 10px;
  }
  .dash-content {
    padding: 12px 12px 18px;
  }
  .dash-profile-card,
  .dash-panel,
  .dash-hero,
  .battle-container {
    border-radius: 18px;
  }
  .dash-team-section .hub-team-slot.dash-team-card {
    width: 104px;
    min-width: 104px;
    flex: 0 0 104px;
    min-height: 128px;
    padding: 10px 8px 8px;
  }
  .dash-team-section .hub-team-sprite {
    width: 64px;
    height: 64px;
  }
  .dash-team-section .hub-team-hpbar {
    display: none;
  }
  .dash-pack-grid,
  .dash-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-stat-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .battle-container {
    padding: 12px;
  }
  .battle-arena,
  .dg-battle-arena {
    padding: 14px;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    grid-template-rows: auto minmax(152px, auto) auto;
    min-height: 244px;
  }
  .pokemon-sprite {
    min-height: 152px;
  }
  .enemy-side .hp-bar-container,
  .player-side .hp-bar-container,
  .dg-battle-arena .enemy-side .hp-bar-container,
  .dg-battle-arena .player-side .hp-bar-container {
    max-width: 150px;
  }
  .status-float-icon {
    top: -8px;
    right: -2px;
  }
}

/* --- Evento Aves Lendárias — matchmaking e batalha --- */
.event-aves-search,
.event-aves-found {
  position: relative;
  min-height: 280px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
  border: 1px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 0 40px rgba(14, 165, 233, 0.12), inset 0 0 60px rgba(251, 191, 36, 0.04);
}
.event-aves-search-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.15), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.08), transparent 40%);
  animation: eventAvesPulse 2.4s ease-in-out infinite;
}
.event-aves-search-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid rgba(56, 189, 248, 0.35);
  border-top-color: #fbbf24;
  animation: eventAvesSpin 1.1s linear infinite;
  z-index: 1;
}
.event-aves-search-text {
  font-size: 20px;
  font-weight: 900;
  color: #e0f2fe;
  z-index: 1;
  animation: eventAvesTextPulse 1.5s ease-in-out infinite;
}
.event-aves-search-sub {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  max-width: 280px;
  z-index: 1;
}
.event-aves-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.event-aves-particle {
  position: absolute;
  left: var(--x);
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 8px #fbbf24;
  animation: eventAvesFloat var(--d) ease-in var(--delay) infinite;
}
.event-aves-found-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.35), transparent 70%);
  animation: eventAvesFlash 0.6s ease-out;
}
.event-aves-found-title {
  font-size: 22px;
  font-weight: 900;
  color: #fef3c7;
  z-index: 1;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}
.event-aves-found-sub {
  font-size: 14px;
  color: #94a3b8;
  z-index: 1;
}
.event-aves-battle-btn {
  z-index: 1;
  margin-top: 8px;
  font-weight: 900;
  animation: eventAvesBtnGlow 1.8s ease-in-out infinite;
}
.battle-container.event-aves-battle {
  background: url('../images/bg_event_aves.png') center center / cover no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: min(92vh, 720px);
}
.battle-container.event-aves-battle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.15) 0%, rgba(2, 6, 23, 0.45) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.battle-container.event-aves-battle > * {
  position: relative;
  z-index: 1;
}
#battleArena.event-aves-arena {
  background: rgba(2, 6, 23, 0.35) !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
  backdrop-filter: blur(4px);
}
@keyframes eventAvesSpin {
  to { transform: rotate(360deg); }
}
@keyframes eventAvesPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes eventAvesTextPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
@keyframes eventAvesFloat {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-220px) scale(0.3); opacity: 0; }
}
@keyframes eventAvesFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.item-png-icon,
.item-tm-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: pixelated;
}
.shop-item .item-png-icon,
.shop-item .item-tm-icon,
.item-icon .item-png-icon,
.item-icon .item-tm-icon {
  width: 32px;
  height: 32px;
}
@keyframes eventAvesBtnGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.3); }
  50% { box-shadow: 0 0 24px rgba(251, 191, 36, 0.55); }
}

/* Evento Aves — modo solo/coop + chat na batalha */
.event-aves-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(2, 6, 23, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.event-aves-mode-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}
.event-aves-mode-title { font-size: 20px; font-weight: 900; color: #fbbf24; margin-bottom: 8px; }
.event-aves-mode-sub { font-size: 13px; color: #94a3b8; margin-bottom: 16px; }
.event-aves-mode-buttons { display: flex; gap: 10px; margin-bottom: 12px; }
.event-aves-mode-buttons .btn { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 8px; font-weight: 800; }
.event-aves-mode-buttons .btn span { font-size: 11px; font-weight: 600; opacity: 0.85; }
.event-aves-mode-solo { background: linear-gradient(135deg, #f59e0b, #d97706); color: #111; }
.event-aves-mode-coop { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.event-aves-coop-friends { max-height: 240px; overflow-y: auto; margin-bottom: 12px; text-align: left; }
.event-aves-coop-invite-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 8px; font-size: 12px; color: #e2e8f0;
}
.battle-coop-bar {
  margin: 8px 0;
  padding: 10px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 10px;
}
.battle-coop-turn { font-size: 12px; font-weight: 800; color: #86efac; margin-bottom: 6px; }
.battle-coop-ally { font-size: 12px; color: #cbd5e1; }
.battle-coop-hp { margin-top: 4px; }
.battle-chat-panel {
  margin-top: 10px;
  padding: 10px;
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(99, 217, 255, 0.12);
  border-radius: 12px;
}
.battle-chat-head {
  font-size: 12px; font-weight: 800; color: #94a3b8; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.battle-chat-messages { height: 120px; max-height: 140px; }
.battle-chat-input { margin-top: 6px; }
.battle-container.event-aves-battle .battle-chat-panel {
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}

/* ================================================================
   Dashboard UX v172 — desktop + mobile hub polish
   ================================================================ */
.dash-admin-top-btn {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #fff !important;
  border: 1px solid rgba(167, 139, 250, 0.45) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 8px 12px !important;
  white-space: nowrap;
}
.dash-admin-top-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.35);
}
.dash-mobile-season {
  display: none;
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.dash-more-actions summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid rgba(56, 100, 140, 0.35);
  background: rgba(6, 12, 24, 0.75);
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
}
.dash-more-actions summary::-webkit-details-marker { display: none; }
.dash-more-actions[open] summary {
  margin-bottom: 10px;
  color: #e2e8f0;
  border-color: rgba(56, 189, 248, 0.35);
}
@media (min-width: 901px) {
  .dash-more-actions summary { display: none; }
  .dash-content {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-top: 16px;
    gap: 14px;
  }
  .dash-panel {
    padding: 14px 16px;
    border-radius: 18px;
  }
  .dash-panel-head { margin-bottom: 10px; }
  .dash-panel-head h2 { font-size: 15px; }
  .dash-hero { min-height: 180px; }
  .dash-hero-inner { min-height: 180px; padding: 22px 24px; }
  .dash-profile-card { padding: 14px 16px; }
  .dash-stat { padding: 8px 10px; }
  .dash-stat-grid { margin-top: 10px; gap: 6px; }
  .dash-pass-row { margin-top: 8px; padding: 8px 10px; }
  .dash-profile-head { gap: 8px; }
  .dash-profile-badges img { width: 18px !important; height: 18px !important; }
  .dash-legend-feed { max-height: 220px; }
  .dash-chat-panel .hub-chat-messages { height: 200px; max-height: 220px; }
}
@media (max-width: 900px) {
  .dash-sidebar { display: none !important; }
  .dash-mobile-season { display: block; }
  .dash-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 8px;
  }
  .dash-mobile-season {
    grid-column: 1;
    grid-row: 1;
  }
  .dash-topbar-actions {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    flex-wrap: nowrap;
    gap: 6px;
  }
  .dash-search {
    grid-column: 1 / -1;
    grid-row: 2;
    order: unset;
    width: 100%;
  }
  .dash-topbar-profile {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    justify-content: flex-end;
  }
  .dash-currency {
    flex: 0 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 12px;
  }
  .dash-hero-row { gap: 12px; }
  .dash-hero { min-height: 132px; }
  .dash-hero-inner { min-height: 132px; padding: 16px 18px; }
  .dash-hero-title { font-size: 18px; margin-bottom: 4px; }
  .dash-hero-desc { font-size: 12px; margin-bottom: 10px; line-height: 1.35; }
  .dash-profile-card { padding: 12px 14px; border-radius: 16px; }
  .dash-profile-head { flex-wrap: wrap; }
  .dash-profile-badges { justify-content: flex-start; width: 100%; }
  .dash-profile-badges img { width: 16px !important; height: 16px !important; }
  .dash-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .dash-stat { padding: 8px 10px; }
  .dash-stat-label { font-size: 9px; margin-bottom: 2px; }
  .dash-stat-value { font-size: 12px; }
  .dash-pass-row { margin-top: 8px; padding: 8px 10px; }
  .dash-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dash-quick-tile { min-height: 82px; padding: 12px; border-radius: 14px; }
  .dash-quick-tile strong { font-size: 13px; }
  .dash-quick-tile small { font-size: 10px; }
  .dash-quick-tile .ph-icon-lg { width: 28px; height: 28px; }
  .dash-mobile-nav-item { font-size: 9px; padding: 5px 1px; gap: 1px; }
  .dash-mobile-nav-icon .ph-icon-mobile { width: 22px; height: 22px; }
  .dash-bottom-row .dash-widgets { gap: 12px; }
  .dash-vip-compact { display: none; }
  .dash-team-section .hub-team-sprite {
    width: 64px;
    height: 64px;
  }
}
@media (max-width: 640px) {
  .dash-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-secondary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== SHINY EFFECTS ===== */
@keyframes shinyPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}
@keyframes shinyPrism {
  0% { border-color: #facc15; box-shadow: 0 0 8px #facc15, 0 0 20px #f472b6; }
  25% { border-color: #f472b6; box-shadow: 0 0 8px #f472b6, 0 0 20px #a78bfa; }
  50% { border-color: #a78bfa; box-shadow: 0 0 8px #a78bfa, 0 0 20px #60a5fa; }
  75% { border-color: #60a5fa; box-shadow: 0 0 8px #60a5fa, 0 0 20px #34d399; }
  100% { border-color: #facc15; box-shadow: 0 0 8px #facc15, 0 0 20px #f472b6; }
}
.card-item-shiny {
  animation: shinyPrism 3s infinite alternate;
  background: linear-gradient(135deg, #1a1020, #0f1a20, #1a1020) !important;
}
.card-item-shiny .card-img-wrap {
  background: linear-gradient(135deg, #2a1030, #0a1a2a) !important;
}
.card-item-shiny .name {
  color: #facc15 !important;
  text-shadow: 0 0 8px #facc15;
}
.shiny-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 20px;
  z-index: 2;
  animation: shinyPulse 0.8s infinite alternate;
  filter: drop-shadow(0 0 6px #facc15);
  pointer-events: none;
}
.card-inst-shiny {
  background: linear-gradient(135deg, #1a1020, #0f1a20, #1a1020) !important;
  border-color: #facc15 !important;
}
.card-inst-shiny .card-inst-thumb {
  position: relative;
}
.card-inst-shiny .card-inst-copy {
  color: #facc15 !important;
}

/* Brilho passante na carta shiny */
@keyframes shinySweep {
  0% { left: -60%; }
  100% { left: 120%; }
}
.card-item-shiny .card-img-wrap {
  position: relative;
  overflow: hidden;
}
.card-item-shiny .card-img-wrap::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -60%;
  width: 40%;
  height: 140%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.08) 80%, transparent 100%);
  transform: skewX(-20deg);
  animation: shinySweep 3s infinite;
  pointer-events: none;
  z-index: 1;
}

/* ===== CLICAVEL HUD ===== */
.dash-stat-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}
.dash-stat-clickable:hover {
  background: rgba(20, 184, 166, 0.15);
  border-color: rgba(20, 184, 166, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}

/* ===== ALBUM DE COLECIONADOR ===== */
.album-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(4, 6, 12, 0.95);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  backdrop-filter: blur(8px);
}

.album-container {
  background: linear-gradient(145deg, #0d1222, #070a14);
  border: 3px solid #1e293b;
  border-radius: 24px;
  max-width: 960px;
  width: 100%;
  max-height: 92vh;
  padding: 24px 30px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  color: #e2e8f0;
}

.album-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 20px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100;
}
.album-close:hover {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

.album-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 2px dashed rgba(51, 65, 85, 0.4);
  padding-bottom: 16px;
}

.album-logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
}
.album-logo {
  max-height: 52px;
  object-fit: contain;
}

.album-title-text {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.album-stats-section {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-grow: 1;
  max-width: 480px;
}

.album-progress-container {
  flex-grow: 1;
}

.album-progress-text {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.album-progress-bar-bg {
  width: 100%;
  height: 10px;
  background: #0f172a;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
}

.album-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #14b8a6, #10b981);
  border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.album-region-tabs {
  display: flex;
  gap: 8px;
}
.album-tab-btn {
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: #141b2e;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.album-tab-btn:hover {
  background: #1e293b;
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.album-tab-btn.active-kanto {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  color: #fff;
  border-color: #2dd4bf;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.4);
}
.album-tab-btn.active-johto {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #fff;
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.album-binder-book {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  flex-grow: 1;
  background: rgba(10, 15, 30, 0.4);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.02);
}

.album-page {
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 65, 85, 0.5) transparent;
}
.album-page::-webkit-scrollbar {
  width: 6px;
}
.album-page::-webkit-scrollbar-track {
  background: transparent;
}
.album-page::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.5);
  border-radius: 3px;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

/* Spine & Binder Rings */
.album-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(90deg, #080c18, #1c2237, #080c18);
  transform: translateX(-50%);
  z-index: 5;
}
.album-ring {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 12px;
  border: 3px solid #64748b;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  transform: translateX(-50%);
  background: transparent;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3);
  z-index: 6;
}
.album-ring::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -3px;
  height: 3px;
  background: #475569;
}
.album-ring-1 { top: 15%; }
.album-ring-2 { top: 40%; }
.album-ring-3 { top: 65%; }
.album-ring-4 { top: 88%; }

/* Album Pocket Slots */
.album-pocket {
  position: relative;
  aspect-ratio: 2.5 / 3.5;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  user-select: none;
}

/* Card Holographic overlay for hover */
.album-pocket::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  pointer-events: none;
  z-index: 3;
}

/* Hover effects for Collected Pokemons */
.album-pocket.defeated {
  cursor: pointer;
  background: #111827;
  border-color: #374151;
}

.album-pocket.defeated:hover {
  transform: scale(1.08) translateY(-4px);
  z-index: 10;
  box-shadow: 0 12px 24px rgba(0,0,0,0.8);
}
.album-pocket.defeated:hover::before {
  transform: translateX(100%);
}

/* Rarity specific glow and borders */
.album-pocket.rarity-COMMON {
  border-color: #64748b;
  box-shadow: inset 0 0 8px rgba(100, 116, 139, 0.2);
}
.album-pocket.rarity-COMMON:hover {
  box-shadow: 0 10px 20px rgba(100, 116, 139, 0.35);
  border-color: #94a3b8;
}

.album-pocket.rarity-RARE {
  border-color: #2563eb;
  box-shadow: inset 0 0 10px rgba(37, 99, 235, 0.2);
}
.album-pocket.rarity-RARE:hover {
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.45);
  border-color: #60a5fa;
}

.album-pocket.rarity-EPIC {
  border-color: #7c3aed;
  box-shadow: inset 0 0 12px rgba(124, 58, 237, 0.2);
}
.album-pocket.rarity-EPIC:hover {
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.55);
  border-color: #a78bfa;
}

.album-pocket.rarity-LEGENDARY {
  border-color: #d97706;
  box-shadow: inset 0 0 15px rgba(217, 119, 6, 0.25);
  background: linear-gradient(135deg, #1c150c, #111827);
}
.album-pocket.rarity-LEGENDARY:hover {
  box-shadow: 0 10px 28px rgba(217, 119, 6, 0.65);
  border-color: #fbbf24;
}

/* Silhouette for undiscovered pokemons */
.album-pocket.undefeated {
  border: 1px dashed rgba(255,255,255,0.06);
}
.album-pocket-img-undefeated {
  filter: brightness(0) opacity(0.22) contrast(0.5);
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  object-fit: contain;
}

.album-pocket-img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
  margin: auto 0;
  transition: transform 0.25s ease;
}
.album-pocket.defeated:hover .album-pocket-img {
  transform: translateY(-2px) scale(1.05);
}

.album-pocket-num {
  font-size: 10px;
  font-weight: 700;
  color: #4b5563;
  width: 100%;
  text-align: left;
}
.album-pocket.defeated .album-pocket-num {
  color: #94a3b8;
}

.album-pocket-name {
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  color: #374151;
}
.album-pocket.defeated .album-pocket-name {
  color: #f1f5f9;
}
.album-pocket.defeated.rarity-LEGENDARY .album-pocket-name {
  color: #fbbf24;
}

/* Card details/footer */
.album-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  border-top: 1px solid rgba(51, 65, 85, 0.3);
  padding-top: 12px;
}
.album-footer-vip-highlight {
  color: #fbbf24;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.2);
}

/* Lock Icon for undiscovered */
.album-lock-icon {
  font-size: 12px;
  color: #4b5563;
  margin: auto 0;
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .album-container {
    padding: 16px;
    max-height: 95vh;
  }
  .album-header-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .album-logo-section {
    justify-content: center;
  }
  .album-stats-section {
    max-width: none;
  }
  .album-region-tabs {
    justify-content: center;
  }
  .album-binder-book {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 8px;
  }
  .album-spine,
  .album-ring {
    display: none;
  }
  .album-page {
    max-height: 48vh;
  }
  .album-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
  }
}

/* Trade Tutorial Card styling */
.trade-info-card {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(14, 165, 233, 0.3);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}
.trade-info-card h3 {
  color: #38bdf8;
  font-size: 14px;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trade-info-card ul {
  margin: 0;
  padding-left: 20px;
  color: #cbd5e1;
  font-size: 12px;
  line-height: 1.5;
}
.trade-info-card li {
  margin-bottom: 6px;
}
.trade-info-card li:last-child {
  margin-bottom: 0;
}
.trade-info-card strong {
  color: #e2e8f0;
}

/* Referral System CSS Styles */
.referral-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeIn 0.4s ease-out;
}

.referral-box-code {
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.8), rgba(15, 23, 42, 0.9)) !important;
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08);
  transition: transform 0.2s, border-color 0.2s;
}
.referral-box-code:hover {
  border-color: rgba(6, 182, 212, 0.6) !important;
  transform: translateY(-2px);
}

.referred-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(51, 65, 85, 0.5);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  transition: background-color 0.2s;
}
.referred-player-row:hover {
  background: rgba(30, 41, 59, 0.8);
}

.referred-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.referred-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.referred-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.referral-shop-card {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  gap: 8px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: default;
}
.referral-shop-card:hover {
  transform: translateY(-3px);
  border-color: #fbbf24;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.1);
}

.referral-shop-card .item-icon {
  font-size: 32px;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.referral-shop-card .item-name {
  font-weight: 700;
  font-size: 14px;
  color: #f8fafc;
}

.referral-shop-card .item-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.referral-shop-card .item-cost {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.2);
  margin-top: 4px;
}

.referral-shop-card .btn-buy {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  margin-top: 4px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.referral-shop-card .btn-buy:hover {
  opacity: 0.9;
}
.referral-shop-card .btn-buy:disabled {
  background: #475569;
  color: #94a3b8;
  cursor: not-allowed;
}


/* ===== Game Master Control Center ===== */
#screen-admin {
  background: radial-gradient(1200px 700px at 20% -10%, #1d2b4f 0%, #0b1222 52%, #050912 100%);
}
.gm-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  padding: 12px 14px 18px;
}
.gm-sidebar {
  position: sticky;
  top: 14px;
  align-self: start;
  background: rgba(10, 16, 30, 0.92);
  border: 1px solid #27324d;
  border-radius: 14px;
  padding: 12px;
}
.gm-brand-title { font-size: 18px; font-weight: 900; color: #dbeafe; }
.gm-brand-sub { font-size: 11px; color: #7dd3fc; margin-top: 3px; letter-spacing: 1px; text-transform: uppercase; }
.gm-nav { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.gm-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #1f2a44;
  background: #0a1222;
  color: #cbd5e1;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  font-weight: 700;
}
.gm-nav-btn:hover { background: #111c34; border-color: #30466d; }
.gm-nav-btn.active { background: linear-gradient(135deg, #1d4ed8, #7c3aed); border-color: #8b5cf6; color: #fff; }
.gm-main { min-width: 0; }
.gm-content { display: flex; flex-direction: column; gap: 12px; }
.gm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gm-head h2 { margin: 0; color: #e2e8f0; font-size: 21px; }
.gm-head small { color: #94a3b8; font-size: 12px; }
.gm-card, .gm-list {
  background: rgba(9, 14, 28, 0.92);
  border: 1px solid #25304b;
  border-radius: 12px;
  padding: 12px;
}
.gm-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.gm-card-k { color: #93c5fd; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.gm-card-v { color: #f8fafc; font-size: 20px; font-weight: 900; margin-top: 3px; }
.gm-toolbar { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; }
.gm-toolbar .btn { min-height: 38px; }
.gm-2col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.gm-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gm-list-item {
  width: 100%;
  border: 1px solid #21304d;
  background: #0c162a;
  color: #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  margin-bottom: 8px;
  cursor: pointer;
}
.gm-list-item small { display: block; color: #94a3b8; margin-top: 3px; font-size: 11px; }
.gm-list-item:hover { border-color: #3b82f6; background: #111f39; }
.gm-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-profile-head h3 { margin: 0; color: #f1f5f9; }
.gm-badge { display: inline-flex; border: 1px solid #3b82f6; color: #93c5fd; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.gm-badge-vip { border-color: #f59e0b; color: #fcd34d; }
.gm-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; margin-top: 8px; }
.gm-mini-grid label { display: flex; flex-direction: column; gap: 4px; color: #94a3b8; font-size: 11px; }
.gm-tabs { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.gm-tabs button {
  border: 1px solid #2d3f62;
  background: #0b172c;
  color: #94a3b8;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.gm-tabs button.active { background: #1d4ed8; color: #fff; border-color: #3b82f6; }
.gm-tab-body { margin-top: 10px; }
.gm-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-chip { border: 1px solid #314366; border-radius: 999px; padding: 4px 8px; background: #0a1324; color: #bfdbfe; font-size: 11px; }
.gm-row-card { border: 1px solid #22314d; border-radius: 10px; padding: 8px; margin-bottom: 7px; background: #0a1222; }
.gm-row-card small { display: block; color: #94a3b8; margin-top: 3px; }
.gm-pre {
  margin: 0;
  white-space: pre-wrap;
  max-height: 320px;
  overflow: auto;
  background: #020617;
  border: 1px solid #27324d;
  border-radius: 8px;
  padding: 8px;
  color: #cbd5e1;
}
.gm-actions-inline { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gm-empty, .gm-muted { color: #64748b; font-size: 12px; }
.gm-error { color: #fca5a5; font-weight: 700; }

@media (max-width: 1120px) {
  .gm-shell { grid-template-columns: 1fr; }
  .gm-sidebar { position: static; }
  .gm-nav { flex-direction: row; flex-wrap: wrap; }
  .gm-nav-btn { width: auto; }
  .gm-2col, .gm-3col, .gm-toolbar { grid-template-columns: 1fr; }
}