* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #14161a;
  color: #eee;
  margin: 0 auto;
  padding: 0.75rem;
  max-width: 900px;
}

header {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: #22262d;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.stat { font-size: 0.9rem; }
.stat span { font-weight: bold; color: #ffd700; }
.dim { color: #888 !important; font-weight: normal !important; font-size: 0.85em; }

#zone-controls {
  display: flex; gap: 0.5rem; align-items: center; justify-content: space-between;
  padding: 0.5rem 1rem; background: #22262d; border-radius: 8px; margin-bottom: 0.75rem;
}
#zone-controls button {
  padding: 0.4rem 0.8rem; background: #333844; color: #eee;
  border: 1px solid #555; border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem;
}
#zone-controls button:hover:not(:disabled) { background: #444a58; }
#zone-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
#zone-controls button.on { background: #2a5a2a; border-color: #4a8a4a; }
.zone-kills { font-size: 0.9rem; color: #ccc; }
.zone-kills span { color: #ffd700; font-weight: bold; }

#battle {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.battle-side {
  background: #22262d; padding: 0.75rem 1rem; border-radius: 8px;
}
.side-label {
  font-size: 0.75rem; color: #aaa; margin-bottom: 0.4rem;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.hp-bar-outer {
  height: 22px; background: #3a3f47; border-radius: 4px; overflow: hidden;
  margin-bottom: 0.35rem;
}
.hp-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #c33, #f55);
  transition: width 100ms linear;
}
.hp-bar-inner.party {
  background: linear-gradient(90deg, #3a3, #5c5);
}
#enemy-hp-text, #party-hp-text {
  text-align: center; font-size: 0.85rem; color: #aaa;
}

.enemy-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
}
.enemy-svg-container {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px;
}
.enemy-bar-wrap { min-width: 0; }
#enemy-info { margin-top: 0.4rem; font-size: 0.8rem; }
.enemy-info-row {
  display: flex; align-items: center; gap: 0.3rem;
  color: #ccc; margin: 0.1rem 0;
}
.enemy-info-row.dim { color: #666; }
.type-icon { vertical-align: middle; }

#grid-section {
  background: #22262d; padding: 1rem; border-radius: 8px; margin-bottom: 0.75rem;
}
.grid-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: 0.7rem; color: #888; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 0.4rem;
  text-align: center;
}
#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.5rem;
  aspect-ratio: 1.4 / 1;
  max-width: 480px;
  margin: 0 auto;
}
.grid-cell {
  background: #2b303a;
  border: 2px solid #3a4050;
  border-radius: 8px;
  padding: 0.4rem 0.25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  min-height: 90px;
  transition: transform 80ms, border-color 80ms, background 80ms;
}
.grid-cell:hover { border-color: #5a6070; background: #333844; }
.grid-cell.selected { border-color: #ffd700; }
.grid-cell.picked { background: #4a3a1a; border-color: #ffd700; transform: scale(0.97); }
.grid-cell.lead { box-shadow: 0 0 0 2px #ffd700 inset, 0 0 12px rgba(255,215,0,0.25); }
.grid-cell[data-row="front"] { border-top-color: #7a4a3a; }
.grid-cell[data-row="mid"] { border-top-color: #7a5a3a; }
.grid-cell[data-row="back"] { border-top-color: #3a5a7a; }

.cell-name { font-size: 0.75rem; font-weight: bold; margin-top: 0.15rem; text-align: center; }
.cell-meta { font-size: 0.7rem; color: #aaa; }
.cell-pos {
  position: absolute; top: 4px; right: 6px;
  font-size: 0.7rem; color: #7c7; font-weight: bold;
}
.cell-pos.weak { color: #c77; }
.cell-lead {
  position: absolute; top: 4px; left: 6px;
  color: #ffd700; font-size: 1rem;
}
.cell-empty { color: #555; font-size: 0.75rem; text-align: center; }
.cell-empty span { font-size: 0.65rem; color: #444; text-transform: uppercase; }
.grid-hint { text-align: center; font-size: 0.75rem; color: #777; margin-top: 0.75rem; }

#char-detail-section {
  background: #22262d; padding: 1rem; border-radius: 8px;
}
.detail-head {
  display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem;
}
.detail-title h2 {
  margin: 0; font-size: 1.3rem; color: #ffd700;
  display: flex; align-items: center; gap: 0.4rem;
}
.detail-sub {
  font-size: 0.85rem; color: #aaa; margin-top: 0.2rem;
  display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap;
}
.detail-sub svg { vertical-align: middle; }
.lead-star { color: #ffd700; }

.detail-stats {
  font-size: 0.9rem; margin-bottom: 0.9rem;
}
.detail-stats > div { margin: 0.25rem 0; }
.detail-stats .k { color: #aaa; margin-right: 0.4rem; }
.detail-dps { font-size: 1rem; color: #ffd700; margin-top: 0.4rem !important; }
.xp-bar-outer {
  height: 8px; background: #3a3f47; border-radius: 2px; overflow: hidden;
  margin: 0.25rem 0;
}
.xp-bar-inner {
  height: 100%; background: linear-gradient(90deg, #55c, #77e);
  transition: width 100ms linear;
}
.xp-text { font-size: 0.75rem; color: #999; }

.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}
.detail-actions button {
  padding: 0.6rem; background: #333844; color: #eee;
  border: 1px solid #555; border-radius: 4px; cursor: pointer;
  font-size: 0.85rem; font-family: inherit;
}
.detail-actions button:hover:not(:disabled) { background: #444a58; }
.detail-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.awaken-btn:not(:disabled) {
  background: #6a4a1a; border-color: #ffd700; color: #ffd700; font-weight: bold;
}
.awaken-btn:not(:disabled):hover { background: #8a5a2a; }
.lead-btn.is-lead {
  background: #4a3a1a; color: #ffd700; border-color: #ffd700;
}

.portrait { display: block; }

.toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  background: #2a2a2a; border: 1px solid #ffd700; color: #ffd700;
  padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.9rem;
  z-index: 100; animation: fadeInOut 6s ease-in-out;
}
@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  10%, 90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}

@media (max-width: 640px) {
  #battle { grid-template-columns: 1fr; }
  .detail-actions { grid-template-columns: 1fr; }
  .detail-head { flex-direction: column; text-align: center; }
}