:root {
  --bg: #14100c;
  --panel: #1f1810;
  --panel-light: #2a2015;
  --border: #4a3a24;
  --gold: #d4af37;
  --text: #e8dfc8;
  --text-dim: #a89a7a;
  --hp: #a12d2d;
  --mp: #2d6fa1;
  --xp: #6a9c3f;
  --danger: #c0392b;
  --success: #4a8c3f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(ellipse at top, #1c1610 0%, var(--bg) 60%);
  color: var(--text);
  font-family: Georgia, 'Times New Roman', serif;
  min-height: 100vh;
}

#app {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px;
}

h1, h2, h3 {
  color: var(--gold);
  font-weight: normal;
  letter-spacing: 0.5px;
}

h1 {
  text-align: center;
  border-bottom: 2px solid var(--border);
  padding-bottom: 12px;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.form-group { margin-bottom: 14px; }
label { display: block; margin-bottom: 4px; color: var(--text-dim); font-size: 0.9em; }

input, select {
  width: 100%;
  padding: 10px;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 1em;
  font-family: inherit;
}

button {
  background: var(--panel-light);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 10px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
button:hover:not(:disabled) { background: var(--border); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.danger { border-color: var(--danger); color: var(--danger); }
button.primary { background: var(--gold); color: #14100c; font-weight: bold; }
button.primary:hover:not(:disabled) { background: #e0bd4a; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }

.error { color: var(--danger); margin: 8px 0; }
.success-msg { color: var(--success); margin: 8px 0; }

.link-btn {
  background: none; border: none; color: var(--text-dim);
  text-decoration: underline; padding: 4px; cursor: pointer;
}

.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab {
  background: none; border: none; color: var(--text-dim);
  padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); background: none; transform: none; box-shadow: none; }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.char-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.stat-bar { background: var(--panel-light); border-radius: 4px; height: 18px; overflow: hidden; margin: 4px 0; position: relative; }
.stat-fill { height: 100%; transition: width 0.3s; }
.stat-fill.hp { background: var(--hp); }
.stat-fill.mp { background: var(--mp); }
.stat-fill.xp { background: var(--xp); }
.stat-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75em; color: var(--text); }

.card {
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 10px;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover { border-color: var(--gold); }
.card-title { color: var(--gold); font-weight: bold; }
.card-meta { color: var(--text-dim); font-size: 0.85em; }

.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.map-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  position: relative;
  min-height: 170px;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.map-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 6, 2, 0.35) 0%, rgba(10, 6, 2, 0.92) 80%);
}
.map-zone > * { position: relative; z-index: 1; }
.map-zone-current { border-color: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 55, 0.25); }

.chat-messages {
  height: 400px;
  overflow-y: auto;
  background: var(--panel-light);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-message { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 0.92em; }
.chat-time { color: var(--text-dim); font-size: 0.8em; flex-shrink: 0; }
.chat-author { color: var(--gold); font-weight: bold; flex-shrink: 0; }
.chat-text { word-break: break-word; }
.chat-delete-btn {
  margin-left: auto;
  color: var(--danger);
  border-color: var(--danger);
  padding: 0 6px;
  line-height: 1.4;
  flex-shrink: 0;
}

.char-sheet-header { display: flex; align-items: center; gap: 18px; }
.char-portrait {
  font-size: 3em;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-light);
  border: 2px solid var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}
.stat-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.stat-row-total { color: var(--gold); font-weight: bold; }
.stat-row:last-child { border-bottom: none; }

.char-list-item { display: flex; justify-content: space-between; align-items: center; }

.party-select { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.party-check-label { gap: 10px; cursor: pointer; justify-content: flex-start; }
.party-check-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--gold); }
.party-check-label input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }

.battle-scene {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  padding: 30px 20px;
  position: relative;
  overflow: hidden;
  border-color: var(--gold);
}
.zone-bg-1, .zone-bg-2, .zone-bg-3, .zone-bg-4, .zone-bg-5, .zone-bg-6 { background-size: cover; background-position: center; }
.zone-bg-1 { background-image: url('assets/zones/zone-1.jpg'); }
.zone-bg-2 { background-image: url('assets/zones/zone-2.jpg'); }
.zone-bg-3 { background-image: url('assets/zones/zone-3.jpg'); }
.zone-bg-4 { background-image: url('assets/zones/zone-4.jpg'); }
.zone-bg-5 { background-image: url('assets/zones/zone-5.jpg'); }
.zone-bg-6 { background-image: url('assets/zones/zone-6.jpg'); }

.battle-scene.zone-bg-1, .battle-scene.zone-bg-2, .battle-scene.zone-bg-3,
.battle-scene.zone-bg-4, .battle-scene.zone-bg-5, .battle-scene.zone-bg-6 {
  background-blend-mode: darken;
  background-color: rgba(10, 6, 2, 0.55);
}

.battle-combatant { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; position: relative; }
.battle-avatar {
  font-size: 4.5em;
  line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  transition: transform 0.1s;
}
.battle-avatar img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 3px solid var(--gold);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  display: block;
}
.battle-name { color: var(--gold); font-weight: bold; }
.battle-combatant .stat-bar { width: 100%; height: 14px; }
.battle-combatant .stat-fill { transition: width 0.35s ease-out; }
.battle-vs { color: var(--text-dim); font-size: 1.4em; font-weight: bold; flex-shrink: 0; }

.hit-shake { animation: hit-shake 0.3s; }
@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) scale(0.95); filter: brightness(1.8) drop-shadow(0 4px 6px rgba(200,40,40,0.6)); }
  50% { transform: translateX(8px); }
  80% { transform: translateX(-4px); }
}

.damage-popup {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--danger);
  font-weight: bold;
  font-size: 1.2em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  animation: float-up 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes float-up {
  0% { opacity: 1; top: 40%; }
  100% { opacity: 0; top: -20%; }
}

.battle-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.55);
  animation: banner-in 0.3s ease-out;
}
.battle-banner.battle-win { color: var(--gold); }
.battle-banner.battle-lose { color: var(--danger); }
@keyframes banner-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.heal-popup { color: var(--success) !important; }
.crit-popup { font-size: 1.6em !important; color: var(--gold) !important; }

.battle-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.battle-actions button { flex: 1; min-width: 140px; }

.combat-log { background: #0d0906; border: 1px solid var(--border); border-radius: 4px; padding: 14px; margin-top: 14px; max-height: 260px; overflow-y: auto; }
.combat-log p { margin: 4px 0; }

.rarity-commun { color: var(--text); }
.rarity-rare { color: #4a90d9; }
.rarity-epique { color: #a34ad9; }
.rarity-legendaire { color: var(--gold); }

.slot-tag { font-size: 0.75em; padding: 2px 6px; border: 1px solid var(--gold); border-radius: 3px; color: var(--gold); margin-left: 6px; }

/* ===== Responsive (phones/small tablets) ===== */
@media (max-width: 600px) {
  #app { padding: 12px 10px; }
  h1 { font-size: 1.4em; }
  h2 { font-size: 1.15em; }
  .panel { padding: 14px; }

  /* Stack any inline row (forms, button groups, inputs) to full-width on narrow screens */
  .row { flex-direction: column; }
  .row > * { width: 100%; }

  /* Scrollable single-line tab bar instead of wrapping into many rows */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .tab { padding: 8px 12px; white-space: nowrap; flex-shrink: 0; font-size: 0.92em; }

  .char-header { flex-wrap: wrap; gap: 10px; }
  .char-header h1 { width: 100%; border-bottom: none; padding-bottom: 0; }
  .char-header > div { width: 100%; display: flex; gap: 8px; }
  .char-header > div button { flex: 1; }

  /* Battle scene: shrink combatants so both sides + VS fit without horizontal scroll */
  .battle-scene { padding: 16px 10px; gap: 8px; }
  .battle-combatant { width: 42%; }
  .battle-avatar { font-size: 3em; }
  .battle-avatar img { width: 64px; height: 64px; }
  .battle-vs { font-size: 1em; }

  .char-sheet-header { flex-wrap: wrap; text-align: center; justify-content: center; }
  .char-portrait { width: 64px; height: 64px; font-size: 2.2em; }

  .chat-messages { height: 300px; }

  button { padding: 10px 14px; }
}