/* ============================================================
   Heroes & Pets — scoped under #gameView to avoid conflicts
   ============================================================ */

#gameView {
  --gm-bg: #0d0d1a;
  --gm-bg2: #141428;
  --gm-card: #1a1a35;
  --gm-card2: #22224a;
  --gm-border: #2d2d5e;
  --gm-gold: #f0b429;
  --gm-gold2: #ffd166;
  --gm-red: #e53e3e;
  --gm-green: #38a169;
  --gm-blue: #3182ce;
  --gm-purple: #805ad5;
  --gm-text: #e8e8f0;
  --gm-text-dim: #8888aa;
  --gm-radius: 12px;
  --gm-shadow: 0 4px 20px rgba(0,0,0,0.5);

  background: var(--gm-bg);
  color: var(--gm-text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  min-height: 100%;
  padding: 1rem;
  overflow-y: auto;
  box-sizing: border-box;
}

#gameView *, #gameView *::before, #gameView *::after {
  box-sizing: border-box;
}

/* === Screens === */
#gameView .screen { display: none; }
#gameView .screen.active { display: block; }

/* === Buttons (scoped, override Lumi's .btn) === */
#gameView .btn {
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.3;
  text-align: center;
}
#gameView .btn:disabled { opacity: 0.4; cursor: not-allowed; }
#gameView .btn-primary { background: linear-gradient(135deg, #6b46c1, #805ad5); color: #fff; }
#gameView .btn-primary:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
#gameView .btn-secondary { background: var(--gm-card2); color: var(--gm-text); border: 1px solid var(--gm-border); }
#gameView .btn-secondary:hover:not(:disabled) { border-color: var(--gm-gold); color: var(--gm-gold); }
#gameView .btn-large { padding: 0.9rem 2rem; font-size: 1.05rem; }
#gameView .btn-back { background: transparent; color: var(--gm-text-dim); border: 1px solid var(--gm-border); }
#gameView .btn-back:hover { color: var(--gm-text); border-color: var(--gm-text); }
#gameView .btn-ghost { background: transparent; color: var(--gm-text-dim); border: 1px solid var(--gm-border); }
#gameView .btn-ghost:hover { color: var(--gm-gold); border-color: var(--gm-gold); }
#gameView .btn-attack { background: linear-gradient(135deg, #c53030, #e53e3e); color: #fff; }
#gameView .btn-attack:hover:not(:disabled) { filter: brightness(1.2); }
#gameView .btn-skill { background: linear-gradient(135deg, #2b6cb0, #3182ce); color: #fff; font-size:0.82rem; }
#gameView .btn-skill:hover:not(:disabled) { filter: brightness(1.2); }
#gameView .btn-pet { background: linear-gradient(135deg, #276749, #38a169); color: #fff; font-size:0.82rem; }
#gameView .btn-pet:hover:not(:disabled) { filter: brightness(1.2); }
#gameView .btn-potion { background: linear-gradient(135deg, #744210, #975a16); color: #fff; font-size:0.85rem; }
#gameView .btn-potion:hover:not(:disabled) { filter: brightness(1.2); }

/* === Welcome === */
#gameView .welcome-container {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 80vh; text-align: center; gap: 1.2rem;
}
#gameView .game-logo { font-size: 5rem; filter: drop-shadow(0 0 20px rgba(240,180,41,0.6)); }
#gameView .game-title {
  font-size: 2.8rem; font-weight: 800;
  background: linear-gradient(135deg, var(--gm-gold), var(--gm-gold2), #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#gameView .game-subtitle { color: var(--gm-text-dim); font-size: 1.05rem; }
#gameView .name-input {
  background: var(--gm-card); border: 1px solid var(--gm-border); border-radius: 8px;
  color: var(--gm-text); font-size: 1rem; padding: 0.75rem 1.2rem;
  width: 280px; text-align: center; outline: none; transition: border-color 0.2s;
}
#gameView .name-input:focus { border-color: var(--gm-purple); }
#gameView .welcome-buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* === Select Cards === */
#gameView .section-title { text-align:center; color:var(--gm-gold); font-size:1.3rem; margin-bottom:1rem; }
#gameView .select-cards { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
#gameView .select-card {
  background: var(--gm-card); border: 2px solid var(--gm-border); border-radius: var(--gm-radius);
  padding: 1.2rem; width: 190px; cursor: pointer; transition: all 0.2s; text-align: center; user-select:none;
}
#gameView .select-card:hover { border-color: var(--gm-purple); transform: translateY(-3px); }
#gameView .select-card.selected { border-color: var(--gm-gold); background: var(--gm-card2); box-shadow: 0 0 20px rgba(240,180,41,0.3); }
#gameView .select-card-emoji { font-size:2.5rem; margin-bottom:0.5rem; }
#gameView .select-card-name { font-weight:700; color:var(--gm-gold); margin-bottom:0.3rem; }
#gameView .select-card-desc { font-size:0.8rem; color:var(--gm-text-dim); margin-bottom:0.6rem; }
#gameView .select-card-stats { font-size:0.78rem; color:var(--gm-text-dim); text-align:left; }
#gameView .stat-bar { display:flex; align-items:center; gap:0.4rem; font-size:0.75rem; }
#gameView .stat-dots { display:flex; gap:2px; }
#gameView .stat-dot { width:8px; height:8px; border-radius:50%; background:var(--gm-border); }
#gameView .stat-dot.filled { background:var(--gm-gold); }

/* === Top Bar === */
#gameView .top-bar {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--gm-card); border-radius:var(--gm-radius); padding:0.75rem 1rem;
  margin-bottom:0.5rem; border:1px solid var(--gm-border);
}
#gameView .player-summary { display:flex; align-items:center; gap:0.75rem; }
#gameView .player-name-bar { font-weight:700; color:var(--gm-gold); }
#gameView .level-tag { font-size:0.78rem; background:var(--gm-purple); color:#fff; border-radius:4px; padding:2px 6px; display:inline-block; }
#gameView .resources { display:flex; gap:0.75rem; }
#gameView .resource-chip {
  background:var(--gm-card2); border:1px solid var(--gm-border); border-radius:6px;
  padding:0.3rem 0.7rem; font-size:0.9rem; color:var(--gm-gold);
}

/* === XP Bar === */
#gameView .xp-bar-wrap {
  background:var(--gm-card); border-radius:6px; height:18px; position:relative;
  margin-bottom:1.2rem; overflow:hidden; border:1px solid var(--gm-border);
}
#gameView .xp-bar { height:100%; background:linear-gradient(90deg,#553c9a,#805ad5); transition:width 0.4s; }
#gameView .xp-label { position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:0.7rem; color:#fff; }

/* === Town Grid === */
#gameView .town-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
#gameView .town-card {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:1.5rem 1rem; cursor:pointer; transition:all 0.2s; text-align:center;
}
#gameView .town-card:hover { border-color:var(--gm-gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(240,180,41,0.15); }
#gameView .town-icon { font-size:2.5rem; margin-bottom:0.5rem; }
#gameView .town-card-title { font-weight:700; font-size:1.1rem; color:var(--gm-gold); margin-bottom:0.25rem; }
#gameView .town-card-desc { font-size:0.82rem; color:var(--gm-text-dim); }

/* === Screen Header === */
#gameView .screen-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
#gameView .screen-header h2 { color:var(--gm-gold); margin:0; }

/* === Dungeon List === */
#gameView .dungeon-list { display:flex; flex-direction:column; gap:1rem; }
#gameView .dungeon-card {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:1.2rem 1.5rem; display:flex; align-items:center; gap:1.5rem;
}
#gameView .dungeon-card.locked { opacity:0.5; }
#gameView .dungeon-emoji { font-size:2.5rem; }
#gameView .dungeon-info { flex:1; }
#gameView .dungeon-name { font-weight:700; font-size:1.1rem; color:var(--gm-gold); }
#gameView .dungeon-meta { font-size:0.82rem; color:var(--gm-text-dim); margin-top:0.2rem; }
#gameView .dungeon-stars { color:var(--gm-gold); margin-top:0.2rem; }
#gameView .dungeon-progress { font-size:0.8rem; color:var(--gm-text-dim); margin-top:0.2rem; }

/* === Battle === */
#gameView .battle-header { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; margin-bottom:1rem; }
#gameView .battle-title-text { font-weight:700; color:var(--gm-gold); font-size:1.1rem; }
#gameView .wave-info { color:var(--gm-text-dim); font-size:0.9rem; }
#gameView .battle-field {
  display:flex; align-items:center; gap:1rem; background:var(--gm-card);
  border-radius:var(--gm-radius); padding:1.5rem; margin-bottom:1rem;
  border:1px solid var(--gm-border); min-height:220px;
}
#gameView .combatant { flex:1; display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
#gameView .battle-center { font-size:2rem; flex-shrink:0; }
#gameView .fighter-emoji { font-size:3.5rem; line-height:1; }
#gameView .fighter-name { font-size:0.85rem; color:var(--gm-text-dim); font-weight:600; }
#gameView .enemy-emoji { animation: gm-float 3s ease-in-out infinite; }
#gameView .player-emoji { animation: gm-float 3s ease-in-out infinite reverse; }
#gameView .pet-small { font-size:1.4rem; opacity:0.8; }

@keyframes gm-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes gm-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }
@keyframes gm-flash-red { 0%,100%{filter:none} 50%{filter:brightness(10) sepia(1) hue-rotate(-40deg)} }
@keyframes gm-flash-blue { 0%,100%{filter:none} 50%{filter:brightness(3) hue-rotate(180deg)} }

#gameView .hit-anim  { animation: gm-shake 0.3s ease, gm-flash-red 0.3s ease; }
#gameView .heal-anim { animation: gm-flash-blue 0.4s ease; }

#gameView .bar-wrap {
  width:100%; max-width:160px; height:12px; background:#111130;
  border-radius:6px; overflow:hidden; border:1px solid var(--gm-border);
}
#gameView .hp-bar  { height:100%; background:linear-gradient(90deg,#276749,#38a169); transition:width 0.4s; }
#gameView .player-bar { background:linear-gradient(90deg,#1a56db,#3182ce); }
#gameView .mana-bar { height:100%; background:linear-gradient(90deg,#553c9a,#805ad5); transition:width 0.4s; }
#gameView .bar-text { font-size:0.72rem; color:var(--gm-text-dim); }
#gameView .mana-text { color:#b794f4; }

#gameView .effects-row { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; min-height:20px; }
#gameView .effect-badge { background:var(--gm-card2); border:1px solid var(--gm-border); border-radius:4px; padding:1px 5px; font-size:0.7rem; }
#gameView .effect-burn   { border-color:#e53e3e; color:#fc8181; }
#gameView .effect-freeze { border-color:#3182ce; color:#90cdf4; }
#gameView .effect-stun   { border-color:#d69e2e; color:#f6e05e; }
#gameView .effect-bleed  { border-color:#c53030; color:#feb2b2; }
#gameView .effect-shield { border-color:#38a169; color:#9ae6b4; }
#gameView .effect-buffatk { border-color:#d69e2e; color:#fefcbf; }

#gameView .battle-log {
  background:#0a0a18; border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:0.75rem; height:110px; overflow-y:auto; font-size:0.82rem;
  margin-bottom:1rem; display:flex; flex-direction:column; gap:2px;
}
#gameView .log-line  { padding:1px 0; }
#gameView .log-player { color:#90cdf4; }
#gameView .log-enemy  { color:#fc8181; }
#gameView .log-pet    { color:#9ae6b4; }
#gameView .log-system { color:var(--gm-gold); font-style:italic; }
#gameView .log-heal   { color:#68d391; }

#gameView .battle-actions { display:flex; gap:0.6rem; flex-wrap:wrap; }
#gameView .battle-actions .btn { flex:1; min-width:80px; padding:0.65rem 0.5rem; }

#gameView .auto-result {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:2rem; text-align:center;
}
#gameView .auto-result.hidden { display:none; }
#gameView #auto-result-text { font-size:1.1rem; margin-bottom:1rem; }

/* === Arena === */
#gameView .arena-record { text-align:center; color:var(--gm-text-dim); margin-bottom:1.5rem; }
#gameView .opponent-list { display:flex; flex-direction:column; gap:0.75rem; }
#gameView .opponent-card {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem;
}
#gameView .opp-emoji  { font-size:2rem; }
#gameView .opp-info   { flex:1; }
#gameView .opp-name   { font-weight:700; color:var(--gm-text); }
#gameView .opp-stats  { font-size:0.8rem; color:var(--gm-text-dim); margin-top:0.2rem; }
#gameView .opp-difficulty { font-size:0.78rem; border-radius:4px; padding:2px 8px; }
#gameView .diff-easy   { background:#276749; color:#9ae6b4; }
#gameView .diff-medium { background:#744210; color:#fbd38d; }
#gameView .diff-hard   { background:#742a2a; color:#fc8181; }

/* === Shop === */
#gameView .shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; }
#gameView .shop-item {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:1.2rem; text-align:center; display:flex; flex-direction:column;
  gap:0.5rem; align-items:center;
}
#gameView .shop-item-emoji { font-size:2rem; }
#gameView .shop-item-name  { font-weight:700; color:var(--gm-text); font-size:0.95rem; }
#gameView .shop-item-desc  { font-size:0.78rem; color:var(--gm-text-dim); }
#gameView .shop-item-price { color:var(--gm-gold); font-weight:700; }

/* === Stable === */
#gameView .stable-content { display:flex; flex-direction:column; gap:1.5rem; }
#gameView .pet-card-big {
  background:var(--gm-card); border:1px solid var(--gm-gold); border-radius:var(--gm-radius);
  padding:2rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
#gameView .pet-big-emoji { font-size:4rem; }
#gameView .pet-big-name  { font-size:1.4rem; font-weight:800; color:var(--gm-gold); }
#gameView .pet-ability-box {
  background:var(--gm-card2); border:1px solid var(--gm-border); border-radius:8px;
  padding:0.75rem 1.5rem; font-size:0.9rem; color:var(--gm-text-dim);
  width:100%; max-width:320px;
}
#gameView .stable-actions  { display:flex; flex-direction:column; gap:0.75rem; }
#gameView .stable-upgrade-info { color:var(--gm-text-dim); font-size:0.88rem; text-align:center; }

/* === Modal === */
#gm-modal-result {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  display:flex; align-items:center; justify-content:center; z-index:1000;
}
#gm-modal-result.hidden { display:none; }
#gm-modal-result .modal-box {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:2.5rem 2rem; text-align:center; max-width:400px; width:90%;
  display:flex; flex-direction:column; gap:0.75rem; align-items:center;
  box-shadow:var(--gm-shadow);
}
#gm-modal-result .modal-emoji { font-size:3.5rem; }
#gm-modal-result .modal-rewards { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
#gm-modal-result .reward-chip {
  background:var(--gm-card2); border:1px solid var(--gm-gold); border-radius:6px;
  padding:0.4rem 0.8rem; color:var(--gm-gold); font-weight:600;
}
#gm-modal-result h2 { color:var(--gm-text); margin:0; }
#gm-modal-result p  { color:var(--gm-text-dim); margin:0; }

/* === Notification === */
#gm-notification {
  position:fixed; top:5rem; right:1rem;
  background:var(--gm-card2); border:1px solid var(--gm-gold);
  border-radius:8px; padding:0.75rem 1.2rem; color:var(--gm-gold);
  font-weight:600; z-index:999; font-size:0.9rem;
  box-shadow:var(--gm-shadow); transition:opacity 0.4s;
}
#gm-notification.hidden { display:none; }

/* === Wave continue modal === */
#gm-wave-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  display:flex; align-items:center; justify-content:center; z-index:1001;
}
#gm-wave-modal.hidden { display:none; }
#gm-wave-modal .modal-box {
  background:var(--gm-card); border:1px solid var(--gm-border); border-radius:var(--gm-radius);
  padding:2rem; text-align:center; max-width:360px; width:90%;
  display:flex; flex-direction:column; gap:1rem; align-items:center;
}
#gm-wave-modal h2 { color:var(--gm-gold); margin:0; }
#gm-wave-modal p  { color:var(--gm-text-dim); margin:0; font-size:0.9rem; }
#gm-wave-modal .wave-btns { display:flex; gap:0.75rem; }

/* === Responsive === */
@media (max-width:500px) {
  #gameView .town-grid { grid-template-columns:1fr; }
  #gameView .battle-field { flex-direction:column; padding:1rem; }
  #gameView .select-card { width:140px; }
  #gameView .game-title { font-size:2rem; }
}