/* ===== VARIABLES ===== */
:root {
  --bg-void: #0a0806;
  --bg-deep: #100d0a;
  --bg-card: #1a1410;
  --bg-raised: #221b14;
  --bg-hover: #2d241a;
  --border: #3d2e1e;
  --border-bright: #6b4c2a;
  --gold: #c9932a;
  --gold-light: #e8b84b;
  --gold-dim: #7a5a1a;
  --red: #8b2020;
  --red-light: #c04040;
  --red-bright: #e05050;
  --green: #1e5c30;
  --green-light: #3a9454;
  --text-main: #e8d5b0;
  --text-dim: #8a7558;
  --text-muted: #5a4832;
  --text-gold: #c9932a;
  --font-display: 'Cinzel Decorative', serif;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Crimson Pro', Georgia, serif;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(201,147,42,0.15);
  --glow-gold: 0 0 8px rgba(201,147,42,0.4);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg-void);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

input, textarea, select, button { font-family: inherit; font-size: inherit; }
textarea { resize: vertical; }
a { color: var(--gold); text-decoration: none; }

/* ===== SCREENS ===== */
.screen { display: none; height: 100vh; overflow: hidden; }
.screen.active { display: flex; flex-direction: column; }
#screen-auth.active { display: block; }
#screen-room.active { display: block; }

/* ===== AUTH ===== */
.auth-bg {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,147,42,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,32,32,0.08) 0%, transparent 50%),
    var(--bg-void);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(201,147,42,0.1);
}

.taverne-logo {
  text-align: center;
  margin-bottom: 32px;
}
.logo-emblem {
  font-size: 2.5rem;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(var(--glow-gold));
}
.logo-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-light);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.logo-title span {
  font-size: 1rem;
  color: var(--gold-dim);
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s;
}
.auth-tab.active {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.auth-form { display: none; flex-direction: column; gap: 16px; }
.auth-form.active { display: flex; }

.auth-error {
  color: var(--red-bright);
  font-size: 0.9rem;
  min-height: 1.2em;
  text-align: center;
}

/* ===== CHAMPS ===== */
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field-group input,
.field-group select,
.field-group textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.2s;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--gold-dim);
}
.field-group select option { background: var(--bg-deep); }

/* ===== BOUTONS ===== */
.btn-primary {
  background: linear-gradient(135deg, #7a4a10, var(--gold));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 12px 20px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8a5a1a, var(--gold-light));
  box-shadow: var(--glow-gold);
}
.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--border-bright); color: var(--text-main); }
.btn-danger-ghost {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  text-transform: uppercase;
  width: 100%;
  transition: all 0.2s;
}
.btn-danger-ghost:hover { border-color: var(--red); color: var(--red-light); }
.btn-sm { padding: 5px 10px; font-size: 0.72rem; }
.btn-large { padding: 14px 32px; font-size: 0.95rem; }

/* ===== HALL ===== */
#screen-hall { display: none; flex-direction: column; overflow: auto; }
#screen-hall.active { display: flex; }

.hall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.logo-small {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.hall-header-right { display: flex; align-items: center; gap: 12px; }
.username-badge {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.hall-main {
  flex: 1;
  overflow-y: auto;
  padding: 40px 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.hall-hero {
  text-align: center;
  margin-bottom: 40px;
}
.hall-hero h2 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.hall-hero p {
  color: var(--text-dim);
  margin-bottom: 24px;
  font-style: italic;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.loading-rooms { color: var(--text-muted); font-style: italic; padding: 20px; text-align: center; }

.room-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.room-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.room-card:hover { border-color: var(--border-bright); background: var(--bg-raised); }
.room-card:hover::before { opacity: 1; }

.room-card-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}
.room-card-gm { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 10px; }
.room-card-desc { font-size: 0.9rem; color: var(--text-main); font-style: italic; margin-bottom: 14px; min-height: 2.5em; }
.room-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}
.room-badge {
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 0.7rem;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-lock { background: rgba(139,32,32,0.3); color: var(--red-light); border: 1px solid var(--red); }
.badge-open { background: rgba(30,92,48,0.3); color: var(--green-light); border: 1px solid var(--green); }

/* ===== ROOM LAYOUT ===== */
#screen-room {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.room-layout {
  display: grid;
  grid-template-columns: 220px 1fr 168px 500px;
  grid-template-rows: 1fr 0px;
  height: 100vh;
  overflow: hidden;
}
.room-layout.tactical-open { /* neutralisé - carte inline */ }

/* ===== SIDEBARS ===== */
.sidebar-players,
.sidebar-character {
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
  max-height: 100vh;
}
.sidebar-character { border-right: none; border-left: 1px solid var(--border); }

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sidebar-header h3 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.online-badge {
  background: var(--green);
  color: var(--green-light);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-family: var(--font-heading);
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.players-list { flex: 1; overflow-y: auto; padding: 8px; }

.player-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 4px;
}
.player-item:hover { background: var(--bg-hover); }
.player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.player-info { flex: 1; min-width: 0; }
.player-name {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-char { font-size: 0.75rem; color: var(--text-muted); }
.player-hp { font-size: 0.72rem; }
.player-online-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-light);
  flex-shrink: 0;
}
.player-online-dot.offline { background: var(--text-muted); }
.player-gm-crown { color: var(--gold); font-size: 0.8rem; }

/* ===== CHARACTER SHEET ===== */
.character-sheet {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.char-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hp-group {}
.hp-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.hp-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.hp-btn:hover { color: var(--gold-light); }
#char-hp-display {
  flex: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-main);
}
.hp-slider {
  width: 100%;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.hp-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.stat-box {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-name {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.stat-val {
  background: none;
  border: none;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  outline: none;
  text-align: center;
  width: 100%;
  -moz-appearance: textfield;
}
.stat-val::-webkit-outer-spin-button,
.stat-val::-webkit-inner-spin-button { -webkit-appearance: none; }
.stat-val:focus { color: var(--gold-light); }

/* ===== ROOM CENTER ===== */
.room-center {
  min-height: 0;
  max-height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;  /* requis pour .scroll-to-bottom-btn (position:absolute) */
}

.room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.room-topbar h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}
.gm-badge {
  font-size: 0.75rem;
  color: var(--gold);
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}
.room-actions { display: flex; align-items: center; gap: 8px; }

.btn-dice {
  background: rgba(201,147,42,0.15);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: var(--gold-light);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-dice:hover { background: rgba(201,147,42,0.25); box-shadow: var(--glow-gold); }

/* ===== CHAT LOG ===== */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

.msg {
  padding: 6px 0;
  border-bottom: 1px solid rgba(61,46,30,0.3);
  animation: msgIn 0.2s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.msg-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.msg-author {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}
.msg-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.msg-body { font-size: 0.95rem; color: var(--text-main); line-height: 1.5; }

/* Types de messages */
.msg-dice .msg-body {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--gold);
  background: rgba(201,147,42,0.06);
  border-left: 3px solid var(--gold-dim);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.msg-gm_narration .msg-body {
  font-style: italic;
  color: #d4c5a9;
  background: rgba(201,147,42,0.04);
  border-left: 3px solid var(--gold-dim);
  padding: 8px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem;
}
.msg-gm_combat .msg-body {
  color: var(--red-bright);
  font-weight: 600;
  border-left: 3px solid var(--red);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.msg-gm_ambiance .msg-body {
  color: #9ec4d4;
  font-style: italic;
  border-left: 3px solid #2a5a6b;
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.msg-gm_secret .msg-body {
  color: #a07acd;
  font-style: italic;
  border-left: 3px solid #5a3a8b;
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.msg-whisper .msg-body {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.88rem;
}
.msg-system .msg-body {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
}
.msg-gm_narration .msg-author,
.msg-gm_combat .msg-author,
.msg-gm_ambiance .msg-author,
.msg-gm_secret .msg-author {
  color: var(--gold);
}

/* ===== CHAT INPUT ===== */
.chat-input-zone {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.gm-tools { border-bottom: 1px solid var(--border); }
.gm-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  flex-wrap: wrap;
}
.gm-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-right: 4px;
}
.gm-event-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.gm-event-btn:hover { border-color: var(--border-bright); color: var(--text-dim); }
.gm-event-btn.active {
  background: rgba(201,147,42,0.15);
  border-color: var(--gold-dim);
  color: var(--gold-light);
}

.input-row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  align-items: flex-end;
}
#chat-input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  padding: 10px 14px;
  outline: none;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.5;
  transition: border-color 0.2s;
}
#chat-input:focus { border-color: var(--gold-dim); }
.btn-send {
  background: var(--gold-dim);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-send:hover { background: var(--gold); box-shadow: var(--glow-gold); }

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.modal-dice { max-width: 380px; }
.dice-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dice-quick-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 14px;
  transition: all 0.15s;
}
.dice-quick-btn:hover {
  background: rgba(201,147,42,0.2);
  border-color: var(--gold-dim);
  color: var(--gold-light);
}

.transfer-list { display: flex; flex-direction: column; gap: 8px; }
.transfer-player-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  text-align: left;
  transition: all 0.15s;
}
.transfer-player-btn:hover { border-color: var(--gold-dim); color: var(--gold-light); }

/* ===== UTILS ===== */
.hidden { display: none !important; }

/* ===== WORKSHOP BUTTON ===== */
.btn-workshop {
  background: rgba(100,60,180,0.2);
  border: 1px solid rgba(140,90,220,0.4);
  border-radius: var(--radius);
  color: #b090f0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-workshop:hover { background: rgba(100,60,180,0.35); box-shadow: 0 0 12px rgba(140,90,220,0.3); }

/* ===== WORKSHOP OVERLAY ===== */
.workshop-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.workshop-overlay.hidden { display: none; }

.workshop-panel {
  margin-left: auto;
  width: min(900px, 95vw);
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
}

.workshop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  flex-shrink: 0;
}
.workshop-tabs { display: flex; gap: 4px; }
.wtab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 7px 14px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.wtab:hover { color: var(--text-main); border-color: var(--border); }
.wtab.active { background: rgba(201,147,42,0.15); border-color: var(--gold-dim); color: var(--gold-light); }

.wtab-content { display: none; flex: 1; overflow-y: auto; padding: 20px; flex-direction: column; gap: 16px; }
.wtab-content.active { display: flex; }

.workshop-section { margin-bottom: 4px; }
.workshop-section h3 {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 14px;
}

.workshop-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}
.workshop-divider::before, .workshop-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ai-gen-form { display: flex; flex-direction: column; gap: 12px; }
.ai-gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.gen-status {
  font-size: 0.88rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(201,147,42,0.1);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-style: italic;
}
.gen-status.error { background: rgba(192,64,64,0.1); border-color: var(--red); color: var(--red-bright); }

/* ===== STORY EDITOR ===== */
.story-editor { display: flex; flex-direction: column; gap: 14px; }
.story-section-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.btn-add-item {
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  padding: 3px 8px;
  letter-spacing: 0.04em;
  transition: all 0.15s;
}
.btn-add-item:hover { border-color: var(--gold-dim); color: var(--gold-light); }

.items-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }

.item-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  position: relative;
}
.item-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.item-card-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  flex: 1;
}
.btn-remove-item {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 6px;
  transition: color 0.15s;
}
.btn-remove-item:hover { color: var(--red-bright); }
.item-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.item-fields .field-group { margin: 0; }
.item-fields .field-group.full { grid-column: 1 / -1; }
.item-fields input, .item-fields textarea, .item-fields select {
  font-size: 0.85rem;
  padding: 7px 10px;
}
.story-save-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
#story-save-status { font-size: 0.85rem; color: var(--green-light); }

/* ===== MAPS LIBRARY ===== */
.maps-library { display: flex; flex-direction: column; gap: 8px; }

.map-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s;
}
.map-card:hover { border-color: var(--border-bright); }
.map-card-thumb {
  width: 70px;
  height: 52px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  background: #1a1208;
}
.map-card-thumb svg { width: 100%; height: 100%; }
.map-card-info { flex: 1; min-width: 0; }
.map-card-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--text-main);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-card-desc { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
.map-card-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }

/* ===== ACTIVE MAP ===== */
.active-map-container { display: flex; flex-direction: column; height: 100%; gap: 12px; }
.active-map-display {
  flex: 1;
  background: #0d0a06;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.active-map-display svg { width: 100%; height: 100%; object-fit: contain; }
.no-map-msg { color: var(--text-muted); font-style: italic; text-align: center; line-height: 2; }
.active-map-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}
.map-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--gold-light);
  letter-spacing: 0.04em;
}

/* ===== MAP VIEWER (joueurs) ===== */
.map-viewer-fullscreen {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #0a0806;
}
.map-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}
.map-viewer-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--gold-light);
  letter-spacing: 0.05em;
}
.map-viewer-content {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.map-viewer-content svg { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ===== FEATURES PANEL ===== */
.btn-features-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  color: var(--gold);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 50;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-features-float:hover { background: var(--bg-raised); box-shadow: var(--glow-gold); transform: scale(1.1); }

.features-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 420px;
  max-height: 70vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.features-panel.hidden { display: none; }

.features-panel-inner { display: flex; flex-direction: column; height: 100%; }

.features-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
  flex-shrink: 0;
}
.features-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.ftab {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 5px 8px;
  text-transform: uppercase;
  transition: all 0.15s;
  white-space: nowrap;
}
.ftab:hover { color: var(--text-dim); }
.ftab.active { background: rgba(201,147,42,0.15); border-color: var(--gold-dim); color: var(--gold-light); }

.ftab-content { display: none; flex: 1; overflow-y: auto; padding: 14px; flex-direction: column; gap: 10px; }
.ftab-content.active { display: flex; }

/* ─── INITIATIVE ─── */
.initiative-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-shrink: 0; }
.init-info { display: flex; align-items: center; gap: 8px; }
.round-label { font-family: var(--font-heading); font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase; }
.round-label strong { color: var(--gold-light); font-size: 1rem; }
.init-actions { display: flex; gap: 6px; }

.initiative-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.init-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
}
.init-entry.init-active { background: rgba(201,147,42,0.1); border-color: var(--gold-dim); }
.init-entry.init-type-enemy { border-left: 3px solid var(--red); }
.init-entry.init-type-player { border-left: 3px solid var(--green); }
.init-entry.init-type-neutral { border-left: 3px solid var(--text-muted); }
.init-turn-arrow { width: 14px; color: var(--gold); font-size: 0.8rem; flex-shrink: 0; }
.init-badge { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 3px; color: var(--gold-light); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; min-width: 30px; padding: 2px 6px; text-align: center; }
.init-name { flex: 1; font-family: var(--font-heading); font-size: 0.82rem; color: var(--text-main); }
.init-hp-mini { font-size: 0.75rem; color: var(--red-light); }
.init-empty { color: var(--text-muted); font-style: italic; font-size: 0.85rem; text-align: center; padding: 16px; }

.init-add-form { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; flex-shrink: 0; }
.init-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.init-add-row input, .init-add-row select { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 3px; color: var(--text-main); padding: 6px 8px; font-size: 0.82rem; flex: 1; min-width: 0; }
.init-quick-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.init-quick-add .btn-ghost { font-size: 0.7rem; padding: 4px 8px; }

/* ─── STATUTS ─── */
.statuses-by-player { display: flex; flex-direction: column; gap: 10px; }
.status-player-row { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.status-player-name { font-family: var(--font-heading); font-size: 0.78rem; color: var(--text-dim); margin-bottom: 6px; letter-spacing: 0.04em; }
.status-player-name em { color: var(--text-muted); font-style: italic; font-family: var(--font-body); }
.status-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.status-chip {
  border: 1px solid;
  border-radius: 3px;
  font-size: 0.75rem;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}
.status-remove-btn { background: none; border: none; cursor: pointer; opacity: 0.6; font-size: 0.8rem; padding: 0 2px; line-height: 1; }
.status-remove-btn:hover { opacity: 1; }
.status-none { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }

.status-gm-panel { margin-top: 10px; }
.status-target-row { margin-bottom: 8px; }
.status-target-row select { width: 100%; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-main); padding: 8px 10px; }
.status-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.status-preset-btn {
  background: none;
  border: 1px solid;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 4px 9px;
  transition: opacity 0.15s;
}
.status-preset-btn:hover { opacity: 0.8; }

/* Chips sur fiches joueurs */
.player-status-chips { display: flex; gap: 3px; margin-top: 2px; }

/* ─── INVENTAIRE ─── */
.inventory-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; flex-shrink: 0; }
.inv-filter {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.inv-filter:hover { color: var(--text-dim); }
.inv-filter.active { background: rgba(201,147,42,0.15); border-color: var(--gold-dim); color: var(--gold-light); }

.inventory-list { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.inv-category-header { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 2px 2px; border-bottom: 1px solid var(--border); margin-top: 4px; }
.inv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.inv-item-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.inv-item-info { flex: 1; min-width: 0; }
.inv-item-name { font-family: var(--font-heading); font-size: 0.8rem; color: var(--text-main); display: block; }
.inv-item-desc { font-size: 0.73rem; color: var(--text-muted); font-style: italic; }
.inv-item-gp { font-size: 0.72rem; color: var(--gold-dim); }
.inv-item-qty { display: flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-size: 0.82rem; color: var(--text-main); }
.qty-btn { background: none; border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: all 0.15s; }
.qty-btn:hover { border-color: var(--gold-dim); color: var(--gold-light); }

.inv-add-form { flex-shrink: 0; margin-top: 6px; }
.inv-add-row { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.inv-add-row input, .inv-add-row select { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 3px; color: var(--text-main); padding: 6px 8px; font-size: 0.8rem; flex: 1; min-width: 80px; }
.inv-gp { font-size: 0.75rem; color: var(--gold-dim); font-style: italic; margin-left: 6px; }

/* ─── JOURNAL ─── */
.journal-list { display: flex; flex-direction: column; gap: 10px; }
.journal-entry { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; }
.journal-entry-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.journal-session-num { font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-dim); }
.journal-ai-badge { background: rgba(100,60,180,0.2); border: 1px solid rgba(140,90,220,0.3); border-radius: 2px; color: #b090f0; font-size: 0.65rem; padding: 1px 5px; font-family: var(--font-heading); }
.journal-entry-title { font-family: var(--font-heading); font-size: 0.9rem; color: var(--gold-light); margin-bottom: 6px; }
.journal-entry-body { font-size: 0.85rem; color: var(--text-main); line-height: 1.6; font-style: italic; max-height: 120px; overflow-y: auto; }

.journal-editor { display: flex; flex-direction: column; gap: 10px; }

/* ─── MUSIQUE ─── */
.music-now-playing {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.music-icon { font-size: 1.4rem; }
.music-track-info { flex: 1; }
.music-track-name { font-family: var(--font-heading); font-size: 0.85rem; color: var(--gold-light); }
.music-track-cat { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.music-volume-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.78rem; color: var(--text-dim); flex-shrink: 0; }
.music-categories { display: flex; flex-direction: column; gap: 10px; }
.music-cat-section {}
.music-cat-label { font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 5px; }
.music-track-btns { display: flex; flex-wrap: wrap; gap: 5px; }
.music-track-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  text-align: left;
  transition: all 0.15s;
}
.music-track-btn:hover { border-color: var(--border-bright); color: var(--text-main); }
.music-track-btn.playing { background: rgba(201,147,42,0.15); border-color: var(--gold-dim); color: var(--gold-light); }
.music-disclaimer { font-size: 0.75rem; color: var(--text-muted); font-style: italic; text-align: center; line-height: 1.6; padding: 8px; }

/* ===== TYPING INDICATOR ===== */
.typing-indicator {
  padding: 4px 20px 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  min-height: 22px;
  background: var(--bg-deep);
  border-top: 1px solid rgba(61,46,30,0.3);
  flex-shrink: 0;
}

/* ===== WS STATUS BAR ===== */
.ws-status-bar {
  padding: 6px 16px;
  font-size: 0.8rem;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  text-align: center;
  flex-shrink: 0;
}
.ws-connecting {
  background: rgba(201,147,42,0.12);
  color: var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
}
.ws-offline {
  background: rgba(139,32,32,0.2);
  color: var(--red-bright);
  border-bottom: 1px solid var(--red);
  animation: pulse-red 1.5s ease infinite;
}
@keyframes pulse-red {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ===== DÉ SECRET ===== */
.btn-dice-secret {
  background: rgba(106,26,106,0.2);
  border-color: rgba(150,60,150,0.4);
  color: #c090d0;
}
.btn-dice-secret:hover {
  background: rgba(106,26,106,0.35);
  box-shadow: 0 0 12px rgba(150,60,150,0.3);
}

/* ===== MSG DÉ SECRET ===== */
.msg-dice_secret .msg-body {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  color: #c090d0;
  background: rgba(106,26,106,0.1);
  border-left: 3px solid rgba(150,60,150,0.5);
  padding: 6px 10px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
}

/* ===== RESPONSIVE — fenêtre étroite Electron ===== */
@media (max-width: 1100px) {
  .room-layout {
    grid-template-columns: 180px 1fr 140px 200px;
  }
}
@media (max-width: 900px) {
  .room-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .sidebar-players {
    display: none; /* masqué sur très petit écran */
  }
  .sidebar-character {
    border-left: none;
    border-top: 1px solid var(--border);
    overflow-y: auto;
  }
  .room-topbar { flex-wrap: wrap; gap: 6px; }
  .room-actions { flex-wrap: wrap; }
}

/* ===== SCROLL CHAT — bouton retour en bas ===== */
.scroll-to-bottom-btn {
  position: absolute;
  bottom: 80px;
  right: 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  font-size: 1.1rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  z-index: 10;
  transition: all 0.2s;
  opacity: 0;
  pointer-events: none;
}
.scroll-to-bottom-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
.scroll-to-bottom-btn:hover { background: var(--bg-hover); transform: scale(1.1); }

/* ===== NOTES PARTAGÉES ===== */
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.notes-textarea {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 260px;
  outline: none;
  padding: 12px 14px;
  resize: none;
  transition: border-color 0.2s;
  width: 100%;
}
.notes-textarea:focus { border-color: var(--gold-dim); }

/* ===== TIMER ===== */
.timer-display {
  text-align: center;
  padding: 20px 0;
  flex-shrink: 0;
}
.timer-time {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 6px;
  transition: color 0.3s;
}
.timer-time.urgent { color: var(--red-bright); animation: pulse-red 0.5s ease infinite; }
.timer-time.done   { color: var(--green-light); }
.timer-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.timer-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.timer-preset-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  padding: 5px 10px;
  transition: all 0.15s;
}
.timer-preset-btn:hover { border-color: var(--gold-dim); color: var(--gold-light); }
.timer-preset-btn.active { background: rgba(201,147,42,0.15); border-color: var(--gold-dim); color: var(--gold-light); }

.timer-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.timer-custom-row input {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1rem;
  padding: 6px 10px;
  text-align: center;
  width: 70px;
  outline: none;
}
.timer-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.timer-player-info {
  padding: 20px;
  text-align: center;
}

/* ===== AVATAR RACE ===== */
.char-avatar-display {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.char-avatar-display svg,
.char-avatar-display img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 12px rgba(201,147,42,0.2);
}

.player-avatar svg { width: 32px; height: 32px; }

/* ===== MODAL GÉNÉRATION PERSONNAGE ===== */
.modal-chargen { max-width: 620px; }

.chargen-race-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.chargen-race-btn {
  background: var(--bg-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: 8px 4px;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chargen-race-btn:hover  { border-color: var(--gold-dim); }
.chargen-race-btn.active { border-color: var(--gold); box-shadow: var(--glow-gold); }
.chargen-race-btn svg    { width: 48px; height: 48px; border-radius: 50%; }
.chargen-race-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.chargen-race-btn.active .chargen-race-label { color: var(--gold-light); }
.chargen-form { display: flex; flex-direction: column; gap: 10px; }

/* ===== MODAL RÉSULTAT PERSONNAGE ===== */
.modal-charresult { max-width: 680px; max-height: 80vh; overflow-y: auto; }

.charresult-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.charresult-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-deep);
}
.charresult-avatar svg { width: 80px; height: 80px; }
.charresult-title h3 { color: var(--gold-light); font-size: 1.2rem; margin-bottom: 4px; }

.charresult-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.stat-result-box {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  text-align: center;
}
.stat-result-name {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--gold-dim);
  display: block;
}
.stat-result-val {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
}
.stat-result-mod {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.charresult-hp {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--green-light);
  margin-bottom: 10px;
}

.charresult-section { margin-bottom: 10px; }
.charresult-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.charresult-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 4px;
}
.charresult-text {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.5;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

/* ===== RECHERCHE CHAT ===== */
.modal-search { max-width: 560px; }
.search-row { display: flex; gap: 8px; margin-bottom: 12px; }
.search-row input { flex: 1; }
.search-results {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-result-item {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.search-result-item:hover { border-color: var(--gold-dim); }
.search-result-author {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--gold-dim);
  margin-bottom: 2px;
}
.search-result-text { font-size: 0.85rem; color: var(--text-main); }
.search-result-text mark {
  background: rgba(201,147,42,0.3);
  color: var(--gold-light);
  border-radius: 2px;
  padding: 0 2px;
}

/* ===== "CHARGER PLUS" CHAT ===== */
.load-more-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  margin: 8px auto;
  padding: 6px 16px;
  text-transform: uppercase;
  transition: all 0.15s;
  display: block;
}
.load-more-btn:hover { border-color: var(--gold-dim); color: var(--gold-light); }

/* ===== SPECTATEUR ===== */
.spectator-badge {
  background: rgba(60,60,60,0.3);
  border: 1px solid #555;
  border-radius: 3px;
  color: #888;
  font-size: 0.65rem;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ===== BOUTON MP MJ ===== */
.btn-mp-gm {
  background: rgba(26,58,107,0.2);
  border: 1px solid rgba(50,90,160,0.4);
  border-radius: var(--radius);
  color: #80a0d0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  text-transform: uppercase;
  transition: all 0.2s;
  width: 100%;
  margin-bottom: 6px;
}
.btn-mp-gm:hover {
  background: rgba(26,58,107,0.35);
  border-color: rgba(80,120,200,0.6);
  color: #a0c0f0;
}

/* ===== POINT BUY ===== */
.stats-mode-btns {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.stats-mode-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 5px 6px;
  text-transform: uppercase;
  transition: all 0.15s;
  text-align: center;
}
.stats-mode-btn:hover { border-color: var(--border-bright); color: var(--text-dim); }
.stats-mode-btn.active {
  background: rgba(201,147,42,0.15);
  border-color: var(--gold-dim);
  color: var(--gold-light);
}

.pointbuy-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
}
.pointbuy-label { color: var(--text-dim); }
.pointbuy-count {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-light);
  min-width: 24px;
  text-align: center;
}
.pointbuy-count.low  { color: var(--red-bright); }
.pointbuy-count.zero { color: var(--text-muted); }
.pointbuy-max { color: var(--text-muted); font-size: 0.72rem; }

/* Boutons +/- point buy dans chaque stat */
.stat-box {
  /* On réutilise .stat-box existant, on ajoute le support des controls */
  position: relative;
}
.stat-controls {
  display: none; /* affiché via JS en mode point buy */
}
.stat-pb-btn {
  background: none;
  border: none;
  color: var(--gold-dim);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}
.stat-pb-btn:hover { color: var(--gold-light); }
.stat-pb-btn:disabled { color: var(--text-muted); cursor: not-allowed; opacity: 0.4; }

.stat-cost {
  font-size: 0.58rem;
  color: var(--gold-dim);
  display: block;
  text-align: center;
  height: 10px;
  line-height: 10px;
}

/* En mode point buy, la grille de stats devient plus haute */
.stats-grid.pb-mode .stat-box {
  padding: 4px 3px;
  gap: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stats-grid.pb-mode .stat-controls {
  display: flex !important;
}
.stats-grid.pb-mode .stat-cost {
  display: block !important;
}

/* ===== ZONE AVATAR AVEC UPLOAD ===== */
.char-avatar-zone {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.char-avatar-display {
  /* override — géré par le parent maintenant */
  margin-bottom: 0;
}

/* Bouton upload photo */
.btn-avatar-upload {
  position: absolute;
  bottom: -4px;
  right: calc(50% - 56px);
  width: 28px;
  height: 28px;
  background: var(--bg-raised);
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s;
  z-index: 2;
  box-shadow: var(--shadow);
}
.btn-avatar-upload:hover {
  background: var(--bg-hover);
  border-color: var(--gold-dim);
  transform: scale(1.1);
}

/* Bouton reset vers SVG de race */
.btn-avatar-reset {
  position: absolute;
  bottom: -4px;
  left: calc(50% - 56px);
  width: 28px;
  height: 28px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  z-index: 2;
  box-shadow: var(--shadow);
  display: none; /* affiché seulement si avatar custom */
}
.btn-avatar-reset:hover {
  border-color: var(--border-bright);
  color: var(--gold-light);
  transform: scale(1.1);
}
.btn-avatar-reset.visible { display: flex; align-items: center; justify-content: center; }

/* Avatar importé — s'affiche comme img ronde */
.char-avatar-display img.custom-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  box-shadow: 0 0 16px rgba(201,147,42,0.3);
}

/* Indicateur "téléchargement en cours" sur l'avatar */
.char-avatar-display.uploading::after {
  content: '...';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.2rem;
}

/* Dans la liste des joueurs — avatar custom */
.player-item img.player-custom-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* ===== MODIFICATEUR STAT (Point Buy) ===== */
.stat-modifier {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  display: block;
  height: 12px;
  line-height: 12px;
  font-family: var(--font-heading);
}
.stats-grid.pb-mode .stat-modifier { display: block; color: var(--gold-dim); }

/* ===== BONUS RACIAUX POINT BUY ===== */
.stat-racial-bonus {
  font-size: 0.58rem;
  color: var(--gold-dim);
  text-align: center;
  display: none;
  height: 10px;
  line-height: 10px;
  font-family: var(--font-heading);
}
.stats-grid.pb-mode .stat-racial-bonus { display: block; }

/* ===== HISTORIQUE DÉS ===== */
.dice-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.dice-log-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dice-log-item {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-family: var(--font-heading);
}
.dice-log-item.dice-log-secret {
  border-color: rgba(150,60,150,0.4);
  background: rgba(106,26,106,0.08);
}
.dice-log-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.dice-log-who   { font-size: 0.72rem; color: var(--gold-dim); font-weight: bold; }
.dice-log-time  { font-size: 0.65rem; color: var(--text-muted); margin-left: auto; }
.dice-log-secret-badge {
  font-size: 0.58rem; color: #c090d0;
  border: 1px solid rgba(150,60,150,0.4);
  border-radius: 2px; padding: 0 3px;
}
.dice-log-result {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dice-log-expr  { font-size: 0.78rem; color: var(--text-dim); }
.dice-log-rolls { font-size: 0.75rem; color: var(--text-muted); }
.dice-log-total { font-size: 1rem; font-weight: bold; color: var(--gold-light); margin-left: auto; }

/* ===== POPUP FICHE JOUEUR ===== */
.player-info-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.player-info-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--border-bright);
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  overflow: hidden;
}
.player-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ===== GOLD PRIVÉ ===== */
.gold-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gold-input-row input {
  flex: 1;
  background: var(--bg-deep);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 6px 10px;
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 0.95rem;
}
.gold-unit {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ═══ LAYOUT FINAL v2 ═══ */
.room-layout {
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 220px 1fr 168px 500px !important;
  grid-template-rows: 1fr 0px !important;
  overflow: hidden !important;
}
.room-layout.tactical-open { /* neutralisé - carte inline */ }
.room-layout > * {
  min-height: 0 !important;
  overflow: hidden !important;
}
.inv-column {
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-card) !important;
  border-left: 1px solid var(--border) !important;
}
.sidebar-character { overflow-y: auto !important; }

/* Room center : topbar | chat | input | carte */
.room-center {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto 1fr !important;
  overflow: hidden !important;
}
.room-topbar { grid-row: 1 !important; flex-shrink: 0 !important; }
.room-center > div:not(.room-topbar):not(.chat-input-zone):not(.map-inline):not(#tactical-map-zone) {
  grid-row: 2 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
.chat-log {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.chat-input-zone { grid-row: 3 !important; flex-shrink: 0 !important; }

/* Zone carte inline */
.map-inline {
  grid-row: 4 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0a0806 !important;
  border-top: 2px solid var(--border) !important;
}
.map-inline-header {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  flex-shrink: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.75rem !important;
  color: var(--gold-dim) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.map-inline-content {
  flex: 1 !important;
  overflow: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  color: var(--text-muted) !important;
  font-style: italic !important;
  font-size: 0.85rem !important;
}
.map-inline-content svg {
  max-width: 100% !important;
  max-height: 100% !important;
  height: auto !important;
}


/* == LAYOUT FINAL == */
.room-center {
  display: grid !important;
  grid-template-rows: auto 1fr auto 1fr !important;
  height: 100% !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
.room-center > .room-topbar {
  grid-row: 1 !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
}
.room-center > div[style] {
  grid-row: 2 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.chat-log {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.room-center > .chat-input-zone {
  grid-row: 3 !important;
  flex-shrink: 0 !important;
}
.room-center > #tactical-map-zone {
  grid-row: 4 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg-deep) !important;
}
#tactical-canvas {
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  display: block !important;
}
.tactical-topbar {
  display: flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 0.8rem !important;
  color: var(--gold-dim) !important;
}
/* INVENTAIRE COLONNE */
.inv-column {
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-card) !important;
  border-left: 1px solid var(--border) !important;
}
.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.inv-title {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.inv-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  flex: 1;
}
.inv-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-deep);
  min-height: 36px;
}
.inv-slot.empty { justify-content: center; opacity: 0.4; }
.inv-slot-plus { font-size: 1.2rem; color: var(--text-muted); }
.inv-slot-icon { font-size: 1.1rem; flex-shrink: 0; }
.inv-slot-img { width: 24px; height: 24px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.inv-slot-name { font-size: 0.72rem; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.inv-slot-qty { font-size: 0.68rem; color: var(--gold-dim); flex-shrink: 0; }
/* FULLSCREEN CARTE */
#tactical-map-zone.fullscreen {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0 !important;
  z-index: 1000 !important;
  grid-row: unset !important;
}