body {
  font-family: sans-serif;
  padding: 20px;
  background: radial-gradient(circle at 20% 20%, #2d2f36, #1c1d21 70%);
  color: #eee;
}
:root {
  --accent: #5ab4ff;
  --accent-2: #2d4f7a;
  --surface-1: #2b2d31;
  --surface-2: #3a3d45;
  --border-1: #444;
}
h1 {
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: .5px;
}
.current-date { font-size: 0.55em; font-weight:400; opacity:0.8; margin-left:8px; background:#3a3d45; padding:4px 8px; border-radius:6px; border:1px solid #4a4d53; }
.form {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.form select, .form input { background:#2b2d31; color:#eee; border:1px solid #444; }
.form select:focus, .form input:focus { outline:1px solid #5ab4ff; }
.sub-class-select { min-width:120px; }
.form input, .form select, .form button {
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 1em;
}
.search-container {
  display: flex;
  justify-content: center;
}
.search-container input {
  padding: 8px;
  font-size: 1em;
  border-radius: 4px;
  width: 300px;
  border: 1px solid #ccc;
}
.table-container {
  display: flex;
  flex-direction: column;
  gap: 40px; /* espace entre les lignes */
}

.row {
  display: flex;
  justify-content: space-around;
  gap: 20px; /* espace entre les colonnes */
}

.column-wrapper {
  width: 30%; /* Ajusté après fusion pour occuper l'espace harmonieusement */
  background: linear-gradient(145deg, #30333b, #25272d);
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.column-title {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.column {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(2px);
  padding: 10px 10px 6px;
  border-radius: 8px;
  width: 80%;
  min-height: 220px;
  border: 1px dashed rgba(255,255,255,0.18);
  transition: border-color .2s, background .2s;
}
.item {
  background: linear-gradient(135deg,#3a3d45,#31343b);
  margin: 14px 0;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  position: relative;
  transition: transform .15s, background .25s;
}
.item button {
  background: #552f2f;
  color: #ffb3b3;
  border: 1px solid #8a4747;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
  transition: background .2s, color .2s;
}
.item button:hover { background:#7c3d3d; color:#fff; }
.item:hover { transform: translateY(-2px); }
.item.locked { filter: grayscale(.4) brightness(.8); }
.drag-over {
  background-color: rgba(100,180,255,0.25);
  border-color: #5ab4ff;
}
.column.drag-over {
  background-color: rgba(100,180,255,0.15);
  border-color: #5ab4ff;
}
.drag-table {
  width: 150px;
  min-height: 200px;
  border: 2px dashed #ccc;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  background-color: #f0f0f0;
}
.drag-table-title {
  font-weight: bold;
  margin-bottom: 10px;
}
/* Couleurs de titre (barre fine au-dessus) */
.column-title {
  position: relative;
  padding-top: 4px;
  width: 100%;
}

/* Optionnel: badges des classes déjà gérés, on garde une palette plus neutre */

.header-with-image {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  background: linear-gradient(120deg,#3a3d45,#2a2c31);
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
}

.header-with-image img { width:56px; height:auto; border-radius:10px; }

.drag-container {
  display: flex;
  justify-content: space-between; /* Écarte les colonnes */
  gap: 40px; /* Espace entre les colonnes */
  padding: 20px;
}

.locked {
  background: #444 !important;
  cursor: not-allowed;
}

/* Ancienne classe conservée pour compat rétro : très légère bordure */
.golden-border { outline: 1px solid rgba(255,215,0,0.25); box-shadow: 0 0 4px rgba(255,215,0,0.35); }

/* Badge de classe (fusion Guerrier/Voleur/Chasseur) */
.class-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.class-badge.guerrier { background: #8B4513; }
.class-badge.voleur { background: #FFD700; border: 1px solid #b89b00; }
.class-badge.chasseur { background: #228B22; }

/* Pour une lisibilité accrue sur fond sombre éventuel */
.item .character-name { flex: 1; }

/* Animation glow inutilisée désormais */
@keyframes glow { from { opacity:1; } to { opacity:1; } }

/* Badge doré (G) */
.gold-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-left: 6px;
  margin-right: 6px;
  background: linear-gradient(135deg,#f8e177,#d4a72c);
  color: #4b3500;
  border: 1px solid #b98810;
  box-shadow: 0 0 2px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.5);
}

/* Toolbar */
.toolbar {
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:16px;
  margin-bottom:18px;
  flex-wrap: wrap;
}
.toolbar input[type=file] { display:none; }
.btn {
  background:#3a3d45;
  color:#ddd;
  border:1px solid #555;
  padding:6px 14px;
  border-radius:6px;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  gap:6px;
  align-items:center;
  transition:background .2s, color .2s, border-color .2s;
}
.btn:hover { background:#4b4f58; }
.btn-primary { background:#2d4f7a; border-color:#35679c; color:#e4f2ff; }
.btn-primary:hover { background:#36679f; }
.btn-danger { background:#6a2e2e; border-color:#8a4040; color:#ffdddd; }
.btn-danger:hover { background:#883737; }
.btn-outline { background:transparent; border:1px dashed #666; }
.btn-outline:hover { background:#333; }
.btn-accent { background:#3d5d2f; border-color:#4f7a3b; color:#ddfadc; }
.btn-accent:hover { background:#4f7a3b; }

/* Tabs */
.tabs {
  display: flex;
  gap: 10px;
  margin: 12px 0 18px;
  padding: 8px;
  background: linear-gradient(135deg, #2c2e33, #242529);
  border: 1px solid #3d4046;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset;
  align-items: center;
  flex-wrap: wrap;
}
.tab-btn {
  position: relative;
  background: var(--surface-1);
  color: #d5d7dc;
  border: 1px solid var(--border-1);
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .2px;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .08s ease-out;
}
.tab-btn:hover { background:#353840; border-color:#555; }
.tab-btn:active { transform: translateY(1px); }
.tab-btn[aria-selected="true"] {
  background: var(--accent-2);
  color: #eaf4ff;
  border-color: #35679c;
  box-shadow: 0 0 0 2px rgba(90,180,255,0.18), 0 6px 14px rgba(0,0,0,0.35);
}
.tab-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 0 0 4px rgba(90,180,255,0.35);
}
/* Underline indicator */
.tab-btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(90,180,255,0), var(--accent), rgba(90,180,255,0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }

/* Add subtle icons for quick identification */
#tab-personnages::before { content: "👥"; margin-right: 8px; }
#tab-contest::before { content: "🏆"; margin-right: 8px; }

@media (max-width: 600px) {
  .tabs { gap: 8px; padding: 8px; }
  .tab-btn { flex: 1 1 auto; text-align: center; padding: 10px 12px; }
}

/* Fallback visibility for contest panel even if scoped styles are not active */
#panel-contest .container { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; margin-bottom:28px; }
#panel-contest .column { width:300px; background: linear-gradient(145deg, #30333b, #25272d); padding:10px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.05) inset; display:flex; flex-direction:column; }
#panel-contest .loot-title { font-weight:700; background:#333; color:#f3f3f3; padding:8px 10px; border-radius:8px 8px 0 0; border:1px solid #444; margin-bottom:6px; text-align:center; letter-spacing:.3px; }
#panel-contest .dropzone { padding:10px 10px 6px; min-height:220px; background: rgba(255,255,255,0.04); border-radius:0 0 8px 8px; border:1px dashed rgba(255,255,255,0.18); }

/* Légende */
.legend { margin: 10px 0 25px; padding:10px 14px; background:linear-gradient(135deg,#2c2e33,#242529); border:1px solid #3d4046; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04) inset; }
.legend-title { font-size:13px; text-transform:uppercase; letter-spacing:1px; opacity:.8; margin-bottom:6px; }
.legend-items { display:flex; flex-wrap:wrap; gap:14px; }
.legend-chip { font-size:12px; display:inline-flex; align-items:center; gap:6px; background:#373a40; padding:4px 10px; border-radius:20px; border:1px solid #4a4d53; }
.filter-chip { cursor:pointer; user-select:none; transition:background .2s, border-color .2s, box-shadow .2s; }
.filter-chip[aria-pressed="true"] { background:#2d4f7a; border-color:#5ab4ff; box-shadow:0 0 0 2px rgba(90,180,255,0.3); }
.filter-chip:focus { outline:none; box-shadow:0 0 0 2px rgba(255,255,255,0.25); }
.lock-indicator { font-size:13px; }

/* Historique */
.history-panel { margin-top:35px; background:linear-gradient(140deg,#2d3035,#232529); padding:12px 16px; border-radius:12px; border:1px solid #3a3d42; box-shadow:0 4px 10px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05) inset; }
.history-panel > summary { cursor:pointer; font-weight:600; margin-bottom:8px; list-style:none; }
.history-panel > summary::-webkit-details-marker { display:none; }
.history-log { white-space: pre-wrap; background:#1e1f23; padding:10px; border-radius:8px; border:1px solid #333; max-height:220px; overflow-y:auto; font-size:12px; line-height:1.35; font-family: Consolas, monospace; }

/* Scrollbars légers */
.history-log::-webkit-scrollbar, .column::-webkit-scrollbar { width:8px; }
.history-log::-webkit-scrollbar-track, .column::-webkit-scrollbar-track { background:#1b1c1f; }
.history-log::-webkit-scrollbar-thumb, .column::-webkit-scrollbar-thumb { background:#3f4249; border-radius:4px; }
.history-log::-webkit-scrollbar-thumb:hover, .column::-webkit-scrollbar-thumb:hover { background:#52555d; }

/* Responsive */
@media (max-width: 1200px) {
  .row { flex-wrap: wrap; justify-content: center; }
  .column-wrapper { width: 30%; }
}
@media (max-width: 900px) {
  .column-wrapper { width: 45%; }
  .toolbar { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
  .column-wrapper { width: 90%; }
  .item { font-size: 13px; }
  .btn { width: 100%; justify-content: center; }
}