:root{
  --ink-950:#0e1117; --ink-900:#161b23; --ink-850:#1c222c; --ink-800:#242b37; --ink-line:#333c4c;
  --parchment:#e7dcbf; --parchment-dim:#c9b98d; --parchment-shadow:#a9986c; --wall:#100f0d;
  --brass:#cc9f2c; --brass-bright:#e9c25a; --brass-dim:#7d631f;
  --ember:#b8402f; --ember-bright:#dd6045; --steel:#5c7a92; --moss:#6b8f5a;
  --text:#ece6d8; --text-muted:#93a0b3; --text-faint:#5c6576;
  --radius-s:4px; --radius-m:8px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--ink-950); color:var(--text); font-family:'Inter',sans-serif; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Cinzel',serif; margin:0;}
a{color:var(--brass-bright);}
::selection{background:var(--brass-dim); color:var(--text);}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink-line); border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:var(--brass-dim);}
button{font-family:inherit; cursor:pointer;}
input, select, textarea{font-family:inherit;}
:focus-visible{outline:2px solid var(--brass-bright); outline-offset:2px;}

/* ---------- Buttons / forms shared ---------- */
.icon-btn{
  background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text-muted);
  border-radius:var(--radius-s); padding:7px 10px; font-size:13px; display:flex; align-items:center; gap:6px;
  transition:border-color .15s, color .15s;
}
.icon-btn:hover{ border-color:var(--brass-dim); color:var(--parchment); }
.icon-btn.active{ border-color:var(--brass); color:var(--brass-bright); background:rgba(204,159,44,0.1); }
.btn{
  background:var(--brass); border:1px solid var(--brass); color:var(--ink-950); font-weight:600;
  border-radius:var(--radius-s); padding:9px 16px; font-size:13.5px;
}
.btn:hover{ background:var(--brass-bright); }
.btn.secondary{ background:var(--ink-800); border-color:var(--ink-line); color:var(--text); }
.btn.secondary:hover{ border-color:var(--brass-dim); color:var(--brass-bright); }
.btn.danger{ background:var(--ember); border-color:var(--ember); color:#fff; }
.btn.danger:hover{ background:var(--ember-bright); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; }
label{ display:block; font-size:11px; color:var(--text-faint); margin:10px 0 4px; text-transform:uppercase; letter-spacing:0.05em; }
input[type=text], input[type=password], input[type=number], select, textarea{
  width:100%; background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text);
  border-radius:var(--radius-s); padding:9px 11px; font-size:13.5px;
}
textarea{ resize:vertical; min-height:80px; }
.field-row{ display:flex; gap:10px; }
.field-row > *{ flex:1; }
.readonly-stat{ width:100%; background:var(--ink-900); border:1px solid var(--ink-line); color:var(--text-muted); border-radius:var(--radius-s); padding:9px 11px; font-size:13.5px; box-sizing:border-box; }
.stat-box input:disabled{ background:var(--ink-900); color:var(--text-muted); cursor:not-allowed; }

.creation-banner{ background:var(--ember); color:#fff; text-align:center; padding:10px 16px; font-size:13px; font-weight:600; flex-shrink:0; }
.skin-picker{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; max-height:180px; overflow-y:auto; background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:8px; margin-bottom:10px; }
.skin-picker__item{ aspect-ratio:1; border-radius:50%; overflow:hidden; border:2px solid var(--ink-line); cursor:pointer; background:var(--ink-800); }
.skin-picker__item:hover{ border-color:var(--brass-dim); }
.skin-picker__item.selected{ border-color:var(--brass); box-shadow:0 0 0 2px rgba(204,159,44,0.35); }
.skin-picker__item img{ width:100%; height:100%; object-fit:cover; }
.layout.creation-mode{ grid-template-columns:1fr !important; display:flex; }
.layout.creation-mode .pane-map, .layout.creation-mode .pane-chat{ display:none !important; }
.layout.creation-mode .pane-sheet{ border-right:none; width:100%; max-width:560px; margin:0 auto; }

.equip-slots{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0; }
.equip-slot{ display:flex; align-items:center; gap:8px; background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:7px 8px; min-height:44px; }
.equip-slot__pic{ width:30px; height:30px; border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--ink-800); display:flex; align-items:center; justify-content:center; }
.equip-slot__pic img{ width:100%; height:100%; object-fit:cover; }
.equip-slot__info{ flex:1; min-width:0; }
.equip-slot__label{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; }
.equip-slot__name{ font-size:11.5px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.equip-slot__name.empty{ color:var(--text-faint); font-style:italic; }
.equip-slot__unequip{ flex-shrink:0; font-size:10px; padding:4px 6px; }
.inventory-item{ display:flex; align-items:center; gap:8px; background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:7px 8px; margin-bottom:6px; }
.inventory-item__pic{ width:28px; height:28px; border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--ink-800); display:flex; align-items:center; justify-content:center; }
.inventory-item__pic img{ width:100%; height:100%; object-fit:cover; }
.inventory-item__info{ flex:1; min-width:0; }
.inventory-item__name{ font-size:12px; color:var(--parchment); }
.inventory-item__stats{ font-size:10px; color:var(--text-faint); }
.inventory-item button{ font-size:10px; padding:4px 7px; flex-shrink:0; }
.card{
  background:var(--ink-900); border:1px solid var(--ink-line); border-radius:var(--radius-m);
  padding:20px; box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.error-text{ color:var(--ember-bright); font-size:12.5px; margin-top:8px; min-height:16px; }
.hint{ color:var(--text-faint); font-size:12px; margin-top:6px; }
.badge{
  display:inline-flex; align-items:center; font-size:10.5px; padding:2px 8px; border-radius:20px;
  border:1px solid var(--ink-line); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em;
}
.badge.mj{ border-color:var(--brass-dim); color:var(--brass-bright); }
.badge.joueur{ border-color:var(--steel); color:var(--steel); }

/* ---------- Toasts (shared) ---------- */
.toast-container{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--ink-850); border:1px solid var(--brass-dim); color:var(--parchment);
  padding:8px 16px; border-radius:20px; font-size:12px; box-shadow:0 8px 20px rgba(0,0,0,0.4);
  animation:toast-in .2s ease-out;
}
@keyframes toast-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ================= Landing / auth ================= */
.landing{ min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:40px 16px; }
.landing__brand{ text-align:center; margin-bottom:28px; }
.landing__brand .sigil{
  width:56px;height:56px;border-radius:50%; margin:0 auto 10px;
  background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass-dim) 70%);
  display:flex;align-items:center;justify-content:center; font-family:'Cinzel',serif; font-weight:700;
  color:var(--ink-950); font-size:26px; box-shadow:0 0 0 1px var(--ink-line), 0 0 20px rgba(204,159,44,0.35);
}
.landing__brand h1{ font-size:24px; color:var(--parchment); letter-spacing:0.03em; }
.landing__brand p{ color:var(--text-faint); font-size:13px; margin-top:4px; }
.landing__grid{ width:100%; max-width:920px; display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:760px){ .landing__grid.two-col{ grid-template-columns:1fr 1fr; } }
.tabs{ display:flex; gap:6px; margin-bottom:16px; }
.tab-btn{
  flex:1; background:var(--ink-850); border:1px solid var(--ink-line); color:var(--text-muted);
  padding:8px; border-radius:var(--radius-s); font-size:12.5px;
}
.tab-btn.active{ border-color:var(--brass); color:var(--brass-bright); background:rgba(204,159,44,0.08); }
.game-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.game-list__item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--ink-850);
  border:1px solid var(--ink-line); border-radius:var(--radius-s);
}
.game-list__item .title{ flex:1; font-weight:600; font-size:13.5px; }
.game-list__item .code{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); }
.topbar-user{ position:fixed; top:14px; right:16px; display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-muted); }

/* ================= Shared game topbar ================= */
.app{ height:100vh; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:14px; padding:10px 18px;
  background:linear-gradient(180deg, var(--ink-850), var(--ink-900)); border-bottom:1px solid var(--ink-line);
  flex-shrink:0;
}
.topbar__sigil{
  width:34px;height:34px;border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass-dim) 70%);
  display:flex;align-items:center;justify-content:center; font-family:'Cinzel',serif;font-weight:700;
  color:var(--ink-950);font-size:16px; box-shadow:0 0 0 1px var(--ink-line), 0 0 14px rgba(204,159,44,0.35); flex-shrink:0;
}
.topbar__title{ font-family:'Cinzel',serif; font-weight:600; letter-spacing:0.04em; font-size:17px; color:var(--parchment);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar__sub{ font-size:11px; color:var(--text-faint); letter-spacing:0.06em; text-transform:uppercase; margin-top:1px;}
.topbar__spacer{flex:1;}
.topbar__code{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); background:var(--ink-800);
  border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:5px 10px; letter-spacing:0.05em; white-space:nowrap;
}

/* ================= MJ / player layout ================= */
.layout{ flex:1; display:grid; grid-template-columns:250px 1fr 340px; min-height:0; position:relative; }
.layout.player-layout{ grid-template-columns:280px 1fr 320px; }
.pane-sheet{ border-right:1px solid var(--ink-line); }
.pane{ min-height:0; display:flex; flex-direction:column; background:var(--ink-900); }
.pane-init{ border-right:1px solid var(--ink-line); }
.pane-chat{ border-left:1px solid var(--ink-line); }
.pane__head{
  padding:12px 14px 8px; font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:0.12em; color:var(--brass-bright);
  text-transform:uppercase; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
}
.pane__scroll{ flex:1; overflow-y:auto; padding:0 12px 12px; }

/* Initiative */
.init-row{
  display:flex; align-items:center; gap:9px; padding:8px 9px; margin-bottom:6px; border-radius:var(--radius-s);
  border:1px solid transparent; background:var(--ink-850); cursor:pointer; transition:background .15s, border-color .15s;
}
.init-row:hover{ border-color:var(--ink-line); }
.init-row.active{ border-color:var(--brass); background:rgba(204,159,44,0.09); box-shadow: inset 3px 0 0 var(--brass); }
.init-row__order{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-faint); width:14px; text-align:center; flex-shrink:0; }
.avatar{
  width:30px;height:30px;border-radius:50%; flex-shrink:0; display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--ink-line); background:var(--ink-800); position:relative;
}
.avatar svg{ width:19px; height:19px; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar--pj{ border-color:var(--brass-dim); }
.avatar--monstre, .avatar--char{ border-color:var(--ember); }
.avatar--token{ border-color:var(--brass-dim); }
.init-row__info{ flex:1; min-width:0; }
.init-row__name{ font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.init-row__role{ font-size:10.5px; color:var(--text-faint); }
.init-row__del{ background:none; border:none; color:var(--text-faint); font-size:14px; padding:2px 4px; }
.init-row__del:hover{ color:var(--ember-bright); }
.next-turn-btn{
  width:100%; margin:2px 0 14px; padding:8px; border-radius:var(--radius-s); background:var(--brass); border:1px solid var(--brass);
  color:var(--ink-950); font-weight:600; font-size:12.5px; letter-spacing:0.02em;
}
.next-turn-btn:hover{ background:var(--brass-bright); }
.add-turn-row{ display:flex; gap:6px; margin-bottom:12px; }
.add-turn-row select{ flex:1; }

/* Modifier tool */
.modifier-box{ background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:10px; margin-top:6px; }
.modifier-box__title{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.modifier-box label{ margin-top:8px; }
.stepper{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.stepper button{ width:26px;height:26px; background:var(--ink-800); border:1px solid var(--ink-line); color:var(--brass-bright); border-radius:var(--radius-s); font-size:14px; line-height:1; }
.stepper__val{ font-family:'JetBrains Mono',monospace; font-size:14px; width:34px; text-align:center; font-weight:600; }
.stepper__val.neg{ color:var(--ember-bright); } .stepper__val.pos{ color:var(--brass-bright); }
.apply-btn{ width:100%; margin-top:10px; padding:7px; border-radius:var(--radius-s); background:transparent; border:1px solid var(--brass-dim); color:var(--brass-bright); font-size:12px; font-weight:600; }
.apply-btn:hover{ background:rgba(204,159,44,0.1); }
.modifier-log{ margin-top:8px; font-size:11px; color:var(--text-faint); }
.modifier-log div{ padding:3px 0; border-top:1px dashed var(--ink-line); }

.characters-box{ background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:10px; margin-top:10px; }
.characters-box__title{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px; }
.char-row{ background:var(--ink-900); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:8px; margin-bottom:8px; }
.char-row:last-child{ margin-bottom:0; }
.char-row__head{ display:flex; justify-content:space-between; align-items:baseline; }
.char-row__name{ font-size:13px; font-weight:600; color:var(--parchment); }
.char-row__lvl{ font-size:11px; color:var(--brass-bright); }
.char-row__xp{ font-size:11px; color:var(--text-faint); margin-top:2px; }
.char-row__actions{ display:flex; gap:6px; margin-top:8px; }
.char-row__reason{ flex:1; min-width:0; background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text); border-radius:var(--radius-s); padding:6px 8px; font-size:11.5px; }
.char-row__amount{ background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text); border-radius:var(--radius-s); padding:6px 8px; font-size:11.5px; text-align:center; }
.char-row__give{ font-size:11px; padding:6px 9px; flex-shrink:0; }

.scene-row{ display:flex; align-items:center; gap:8px; background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:8px; margin-top:8px; }
.scene-row__info{ flex:1; min-width:0; }
.scene-row__name{ font-size:12.5px; color:var(--parchment); }
.scene-row__date{ font-size:10.5px; color:var(--text-faint); }
.scene-row button{ font-size:11px; padding:6px 9px; flex-shrink:0; }

/* Map */
.pane-map{ background:var(--ink-950); }
.map-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 14px; flex-shrink:0; border-bottom:1px solid var(--ink-line); background:var(--ink-900); flex-wrap:wrap; }
.map-toolbar__title{ font-family:'Cinzel',serif; font-size:13px; color:var(--parchment); letter-spacing:0.03em; margin-right:auto;}
.map-toolbar__title span{ display:block; font-family:'Inter',sans-serif; font-size:10.5px; color:var(--text-faint); font-weight:400; }
.edit-toolbar-row{ display:none; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 14px; background:var(--ink-850); border-bottom:1px solid var(--brass-dim); flex-shrink:0; }
.edit-toolbar-row .icon-btn{ font-size:11.5px; padding:6px 9px; }
.visibility-switch{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text-faint); margin-left:auto; white-space:nowrap; }
.visibility-switch button{ background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text-muted); border-radius:20px; padding:4px 9px; font-size:10.5px; }
.visibility-switch button.active{ border-color:var(--brass); color:var(--brass-bright); background:rgba(204,159,44,0.1); }
.finish-edit-btn{ background:var(--brass); border:1px solid var(--brass); color:var(--ink-950); font-weight:600; border-radius:var(--radius-s); padding:6px 12px; font-size:11.5px; }
.finish-edit-btn:hover{ background:var(--brass-bright); }

.map-wrap{ flex:1; position:relative; padding:22px; overflow:auto; display:flex; align-items:center; justify-content:center; }
.map-frame{ position:relative; width:100%; max-width:760px; aspect-ratio:14/8; box-shadow:0 0 0 10px var(--wall), 0 0 0 11px #000, 0 20px 50px rgba(0,0,0,0.55); border-radius:2px; background-color:var(--wall); background-size:cover; background-position:center; }
.map-frame.edit-mode{ box-shadow:0 0 0 10px var(--wall), 0 0 0 11px #000, 0 0 0 13px var(--brass-dim), 0 20px 50px rgba(0,0,0,0.55); }
.map-frame.custom-bg .tile.wall, .map-frame.custom-bg .tile.floor, .map-frame.custom-bg .tile.water, .map-frame.custom-bg .tile.bones, .map-frame.custom-bg .tile.door{ background:transparent; }
.map-frame.custom-bg .tile.floor::after, .map-frame.custom-bg .tile.bones::after{ display:none; }
.map-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(14, 1fr); grid-template-rows:repeat(8, 1fr); }
.tile{ position:relative; }
.tile.wall{ background:var(--wall); background-image:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.03), transparent 60%); }
.tile.floor{ background:var(--parchment); box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06); }
.tile.water{ background:#3f6660; box-shadow:inset 0 0 8px rgba(0,0,0,0.4); }
.tile.bones{ background:var(--parchment-dim); }
.tile.door{ background:var(--parchment-shadow); }
.tile.fog{ cursor:pointer; }
.tile.fog::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(14,17,23,0.94) 0 6px, rgba(20,24,32,0.94) 6px 12px); transition:opacity .5s ease, transform .5s ease; }
.tile.fog:hover::before{ opacity:0.85; }
.tile.fog.revealed::before{ opacity:0; transform:scale(1.4); pointer-events:none; }
.tile.fog .fog-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--brass-dim); font-size:11px; opacity:0.9; pointer-events:none; }
.tile.fog.revealed .fog-icon{ display:none; }
.tile.not-clickable{ cursor:default; }

.token-layer{ position:absolute; inset:0; pointer-events:none; }
.token{
  position:absolute; width:8.6%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:auto; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--ink-850); border:2px solid var(--brass);
  box-shadow:0 2px 6px rgba(0,0,0,0.5); transition:box-shadow .2s, opacity .2s;
}
.token svg{ width:60%; height:60%; }
.token img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.token.pj{ border-color:var(--brass); }
.token.monstre{ border-color:var(--ember); }
.token.objet{ border-color:var(--steel); background:var(--ink-800); }
.token.active-turn{ box-shadow:0 0 0 3px rgba(233,194,90,0.55), 0 2px 10px rgba(0,0,0,0.6); }
.token.draggable{ cursor:grab; }
.token.draggable:active{ cursor:grabbing; }
.token.dead{ filter:grayscale(1); }
.token.dead::after{ content:"✕"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:900; color:#fff; background:rgba(20,10,10,0.55); border-radius:50%; text-shadow:0 1px 3px rgba(0,0,0,0.8); }
.token.masque{ opacity:0.4; border-style:dashed; }
.token .eye{ position:absolute; bottom:-7px; right:-7px; width:16px;height:16px; border-radius:50%; background:var(--ink-900); border:1px solid var(--ink-line); font-size:9px; display:flex;align-items:center;justify-content:center; color:var(--text-muted); }
.token.masque .eye{ color:var(--ember-bright); border-color:var(--ember); }
.token .del{ display:none; position:absolute; top:-7px; left:-7px; width:15px;height:15px; border-radius:50%; background:var(--ember); border:1px solid var(--ember-bright); font-size:9px; color:#fff; align-items:center;justify-content:center; }
.map-frame.edit-mode .token .del{ display:flex; }
.token .rotate-btn, .token .resize-btn{ display:none; position:absolute; width:15px;height:15px; border-radius:50%; background:var(--ink-900); border:1px solid var(--brass-dim); font-size:9px; color:var(--text-muted); align-items:center;justify-content:center; }
.token .rotate-btn{ top:-7px; right:-7px; }
.token .resize-down{ bottom:-7px; left:-7px; }
.token .resize-up{ bottom:-7px; left:11px; }
.map-frame.edit-mode .token .rotate-btn, .map-frame.edit-mode .token .resize-btn{ display:flex; }
.token .rotate-btn:hover, .token .resize-btn:hover{ color:var(--brass-bright); border-color:var(--brass); }

.decor-marker{
  position:absolute; width:7%; aspect-ratio:1; transform:translate(-50%,-50%); background:var(--ink-850); border-radius:6px;
  border:2px solid var(--parchment-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto;
  box-shadow:0 2px 6px rgba(0,0,0,0.5); transition:opacity .2s;
}
.decor-marker svg{ width:55%; height:55%; }
.decor-marker img{ width:100%; height:100%; object-fit:cover; border-radius:4px; }
.decor-marker.masque{ opacity:0.45; border-style:dashed; }
.decor-marker .eye{ position:absolute; bottom:-7px; right:-7px; width:15px;height:15px; border-radius:50%; background:var(--ink-900); border:1px solid var(--ink-line); font-size:8px; display:flex;align-items:center;justify-content:center; color:var(--text-muted); }
.decor-marker.masque .eye{ color:var(--ember-bright); border-color:var(--ember); }
.decor-marker .del{ display:none; position:absolute; top:-7px; left:-7px; width:15px;height:15px; border-radius:50%; background:var(--ember); border:1px solid var(--ember-bright); font-size:9px; color:#fff; align-items:center;justify-content:center; }
.map-frame.edit-mode .decor-marker .del{ display:flex; }
.decor-marker .rotate-btn, .decor-marker .resize-btn{ display:none; position:absolute; width:15px;height:15px; border-radius:50%; background:var(--ink-900); border:1px solid var(--brass-dim); font-size:9px; color:var(--text-muted); align-items:center;justify-content:center; }
.decor-marker .rotate-btn{ top:-7px; right:-7px; }
.decor-marker .resize-down{ bottom:-7px; left:-7px; }
.decor-marker .resize-up{ bottom:-7px; left:11px; }
.map-frame.edit-mode .decor-marker .rotate-btn, .map-frame.edit-mode .decor-marker .resize-btn{ display:flex; }
.decor-marker .rotate-btn:hover, .decor-marker .resize-btn:hover{ color:var(--brass-bright); border-color:var(--brass); }

.ink-burst{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(233,194,90,0.5), transparent 70%); pointer-events:none; animation:burst .6s ease-out forwards; }
@keyframes burst{ from{opacity:1; transform:scale(0.2);} to{opacity:0; transform:scale(2.2);} }
.map-hint{ position:absolute; left:22px; bottom:14px; font-size:11px; color:var(--text-faint); display:flex; gap:14px; flex-wrap:wrap; }
.map-hint span{ display:flex; align-items:center; gap:5px; }
.map-hint i{ width:9px;height:9px;border-radius:2px;display:inline-block; }

/* Chat */
.turn-banner{ margin:10px 12px 4px; padding:8px 10px; border-radius:var(--radius-m); background:rgba(204,159,44,0.08); border:1px solid var(--brass-dim); font-size:12px; color:var(--parchment); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-shrink:0; }
.turn-banner b{ color:var(--brass-bright); }
.turn-banner button{ background:none;border:1px solid var(--ink-line); color:var(--text-muted); border-radius:var(--radius-s); font-size:10.5px; padding:4px 7px; }
.turn-banner button:hover{ border-color:var(--brass-dim); color:var(--brass-bright); }
.chat-log{ flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:10px; }
.msg-system{ text-align:center; font-size:11.5px; color:var(--text-faint); font-style:italic; padding:2px 10px; }
.msg{ display:flex; gap:8px; }
.msg__name{ font-size:12.5px; font-weight:700; color:var(--brass-bright); }
.msg__name.pnj{ color:var(--ember-bright); }
.msg__time{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-faint); margin-left:6px;}
.msg__bubble{ background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:7px 10px; font-size:13px; line-height:1.45; flex:1; }
.msg__bubble.pnj-bubble{ border-color:#4a2a24; background:rgba(184,64,47,0.07); font-style:italic; }
.dice-card{ background:var(--ink-850); border:1px solid var(--brass-dim); border-radius:var(--radius-m); padding:9px 12px; font-size:12px; }
.dice-card__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.dice-card__who{ color:var(--parchment); font-weight:600; font-size:12.5px; }
.dice-card__formula{ font-family:'JetBrains Mono',monospace; color:var(--text-muted); font-size:11px; }
.dice-card__result{ display:flex; align-items:baseline; gap:8px; margin-top:4px; }
.dice-card__total{ font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:700; color:var(--brass-bright); }
.dice-card__tag{ font-size:10.5px; padding:2px 7px; border-radius:20px; letter-spacing:0.03em; text-transform:uppercase; }
.dice-card__tag.reussite{ background:rgba(107,143,90,0.18); color:#9fd18a; }
.dice-card__tag.echec{ background:rgba(184,64,47,0.18); color:var(--ember-bright); }
.chat-footer{ flex-shrink:0; border-top:1px solid var(--ink-line); padding:10px 12px; display:flex; gap:8px; flex-wrap:wrap; }
.chat-footer input{ flex:1; min-width:120px; background:var(--ink-800); border:1px solid var(--ink-line); color:var(--text); border-radius:var(--radius-s); padding:9px 11px; font-size:13px; }
.roll-btn, .send-btn{ background:var(--brass); border:1px solid var(--brass); color:var(--ink-950); font-weight:600; border-radius:var(--radius-s); padding:0 14px; font-size:12.5px; display:flex; align-items:center; gap:6px; }
.roll-btn{ background:var(--ink-800); border-color:var(--ink-line); color:var(--brass-bright); }
.roll-btn:hover{ border-color:var(--brass-dim); }
.send-btn:hover{ background:var(--brass-bright); }
.die-icon.rolling{ animation:spin .5s ease-out; }
@keyframes spin{ from{transform:rotate(0);} to{transform:rotate(360deg);} }

/* Popover */
.skin-popover{ position:fixed; z-index:60; width:210px; background:var(--ink-850); border:1px solid var(--brass-dim); border-radius:var(--radius-m); box-shadow:0 12px 30px rgba(0,0,0,0.5); padding:14px; display:none; max-height:80vh; overflow-y:auto; }
.skin-popover:has(#popEquipRow[style*="block"]){ width:270px; }
.skin-popover .equip-slots{ grid-template-columns:1fr; }
.skin-popover.show{ display:block; animation:pop .15s ease-out; }
@keyframes pop{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }
.skin-popover__portrait{ width:64px;height:64px;border-radius:50%; margin:0 auto 10px; border:2px solid var(--ember); background:var(--ink-800); display:flex;align-items:center;justify-content:center; overflow:hidden; }
.skin-popover__portrait img{ width:100%; height:100%; object-fit:cover; }
.skin-popover__name{ text-align:center; font-weight:700; font-size:13.5px; color:var(--parchment); }
.skin-popover__tag{ text-align:center; font-size:10.5px; color:var(--ember-bright); margin-top:2px; text-transform:uppercase; letter-spacing:0.05em;}

.map-frame.path-mode{ cursor:crosshair; }
.lighting-overlay, .weather-overlay{ position:absolute; inset:0; pointer-events:none; z-index:30; opacity:0; background:transparent; transition:opacity .6s ease, background-color .6s ease; }
.lighting-overlay.time-aube{ background:#ff9248; opacity:0.22; mix-blend-mode:overlay; }
.lighting-overlay.time-crepuscule{ background:#5b2f8f; opacity:0.32; mix-blend-mode:multiply; }
.lighting-overlay.time-nuit{ background:#0a1130; opacity:0.7; mix-blend-mode:multiply; }
.weather-overlay.weather-couvert{ background:#8b95a1; opacity:0.35; mix-blend-mode:multiply; }

.drop-preview{ position:absolute; width:8%; aspect-ratio:1; transform:translate(-50%,-50%); opacity:0.6; pointer-events:none; border:2px dashed var(--brass-bright); border-radius:8px; background:var(--ink-850); align-items:center; justify-content:center; display:none; z-index:40; }
.drop-preview.show{ display:flex; }
.drop-preview img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }

/* Drop confirmation */
.drop-confirm{ position:fixed; z-index:65; width:200px; background:var(--ink-850); border:1px solid var(--brass); border-radius:var(--radius-m); box-shadow:0 12px 30px rgba(0,0,0,0.5); padding:12px; display:none; transform:translate(-50%,-100%) translateY(-10px); }
.drop-confirm.show{ display:block; animation:pop .12s ease-out; }
.drop-confirm__text{ font-size:12.5px; color:var(--parchment); margin-bottom:10px; text-align:center; }
.drop-confirm__text b{ color:var(--brass-bright); }
.drop-confirm__actions{ display:flex; gap:8px; }
.drop-confirm__actions .btn{ flex:1; padding:7px 0; font-size:12px; }

/* Decor stack (superposition) */
.decor-marker.stacked{ border-style:double; border-width:3px; }
.stack-badge{ position:absolute; top:-8px; right:-8px; min-width:16px; height:16px; padding:0 3px; border-radius:8px; background:var(--brass); color:var(--ink-950); font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.stack-popover{ position:fixed; z-index:66; width:250px; max-height:320px; overflow-y:auto; background:var(--ink-850); border:1px solid var(--brass-dim); border-radius:var(--radius-m); box-shadow:0 12px 30px rgba(0,0,0,0.5); padding:12px; display:none; }
.stack-popover.show{ display:block; animation:pop .12s ease-out; }
.stack-popover__title{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
.stack-row{ display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--ink-line); }
.stack-row:last-child{ border-bottom:none; }
.stack-row__pic{ width:30px; height:30px; border-radius:6px; overflow:hidden; flex-shrink:0; background:var(--ink-800); display:flex; align-items:center; justify-content:center; }
.stack-row__pic img{ width:100%; height:100%; object-fit:cover; }
.stack-row__info{ flex:1; min-width:0; }
.stack-row__name{ font-size:12px; color:var(--parchment); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stack-row__tag{ font-size:10px; color:var(--text-faint); }
.stack-row button{ padding:4px 6px; font-size:10px; flex-shrink:0; }

/* Library drawer */
.drawer-overlay{ position:fixed; inset:0; background:rgba(10,12,16,0.35); z-index:50; display:none; pointer-events:none; }
.drawer-overlay.show{ display:block; }
.library-drawer{ position:fixed; top:0; right:0; height:100%; width:360px; max-width:92vw; z-index:51; background:var(--ink-900); border-left:1px solid var(--ink-line); transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; }
.library-drawer.show{ transform:translateX(0); }
.drawer-head{ padding:14px 16px; border-bottom:1px solid var(--ink-line); display:flex; align-items:center; justify-content:space-between; }
.drawer-head__title{ font-family:'Cinzel',serif; font-size:14px; color:var(--parchment); letter-spacing:0.04em; }
.drawer-close{ background:none;border:none;color:var(--text-muted); font-size:18px; line-height:1; }
.drawer-tabs{ display:flex; gap:6px; padding:10px 16px 0; flex-wrap:wrap; }
.drawer-tab{ background:var(--ink-850); border:1px solid var(--ink-line); color:var(--text-muted); border-radius:20px; padding:5px 12px; font-size:11.5px; }
.drawer-tab.active{ background:rgba(204,159,44,0.12); border-color:var(--brass-dim); color:var(--brass-bright); }
.drawer-search{ padding:12px 16px 6px; }
.tag-filters{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 16px 10px; }
.tag-chip{ background:var(--ink-850); border:1px solid var(--ink-line); color:var(--text-muted); border-radius:20px; padding:4px 10px; font-size:10.5px; }
.tag-chip.active{ border-color:var(--brass); color:var(--brass-bright); background:rgba(204,159,44,0.1); }
.vignette-grid{ flex:1; overflow-y:auto; padding:4px 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vignette{ background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-m); padding:10px 8px; text-align:center; cursor:grab; transition:border-color .15s, transform .15s; }
.vignette:hover{ border-color:var(--brass-dim); transform:translateY(-1px); }
.vignette__pic{ width:46px;height:46px;border-radius:50%; margin:0 auto 6px; background:var(--ink-800); display:flex;align-items:center;justify-content:center; border:1.5px solid var(--ink-line); overflow:hidden; }
.vignette__pic svg{ width:26px;height:26px; }
.vignette__pic img{ width:100%; height:100%; object-fit:cover; }
.vignette__name{ font-size:11px; font-weight:600; color:var(--text); }
.vignette__tag{ font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.03em; margin-top:2px;}
.drawer-foot{ padding:10px 16px; font-size:10.5px; color:var(--text-faint); border-top:1px solid var(--ink-line); }

/* ================= Player character sheet ================= */
.sheet{ padding:14px; overflow-y:auto; }
.sheet__portrait{
  width:100%; aspect-ratio:1; border-radius:var(--radius-m); border:2px solid var(--brass-dim); background:var(--ink-850) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; margin-bottom:10px;
}
.sheet__portrait img{ width:100%; height:100%; object-fit:cover; }
.sheet__equip-slots{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between; }
.sheet__slot{ display:flex; align-items:flex-end; justify-content:center; padding:6px; flex:1; }
.sheet__slot span{ background:rgba(14,17,23,0.75); border:1px solid var(--brass-dim); border-radius:20px; padding:2px 8px; font-size:9.5px; color:var(--parchment); white-space:nowrap; }
.stat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:10px 0; }
.stat-box{ background:var(--ink-850); border:1px solid var(--ink-line); border-radius:var(--radius-s); padding:8px; text-align:center; }
.stat-box label{ margin:0 0 4px; }
.stat-box input{ text-align:center; padding:5px; font-size:14px; font-weight:700; }
.stat-box .mod{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--brass-bright); margin-top:3px; }
.hp-row{ display:flex; gap:8px; align-items:center; margin:8px 0; }
.hp-bar{ height:8px; border-radius:4px; background:var(--ink-line); overflow:hidden; flex:1; }
.hp-bar__fill{ height:100%; background:linear-gradient(90deg, var(--brass-dim), var(--brass)); }
.hp-bar__fill.low{ background:linear-gradient(90deg,#7a2318, var(--ember)); }
.comp-list{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.comp-row{ display:flex; gap:6px; align-items:center; }
.comp-row input[type=text]{ flex:1; }
.comp-row select{ width:110px; }

/* ================= Admin ================= */
.admin-wrap{ max-width:1000px; margin:0 auto; padding:24px 18px 60px; }
table.admin-table{ width:100%; border-collapse:collapse; margin-top:12px; font-size:13px; }
table.admin-table th, table.admin-table td{ padding:8px 10px; border-bottom:1px solid var(--ink-line); text-align:left; }
table.admin-table th{ color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
table.admin-table img{ width:32px;height:32px;border-radius:50%; object-fit:cover; vertical-align:middle; }
.resource-tabs{ display:flex; gap:8px; margin:18px 0 6px; flex-wrap:wrap; }
.preview-thumb{ background:none; border:none; padding:0; cursor:zoom-in; display:inline-flex; align-items:center; }
.preview-thumb.icon-btn{ cursor:pointer; padding:7px 10px; }

.preview-modal{ position:fixed; inset:0; background:rgba(10,12,16,0.72); z-index:80; display:none; align-items:center; justify-content:center; padding:24px; }
.preview-modal.show{ display:flex; }
.preview-modal__box{ position:relative; background:var(--ink-850); border:1px solid var(--brass-dim); border-radius:var(--radius-m); padding:22px; max-width:min(90vw,520px); max-height:90vh; overflow:auto; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.preview-modal__close{ position:absolute; top:10px; right:10px; }
.preview-modal__img{ display:block; max-width:100%; max-height:60vh; margin:0 auto; border-radius:var(--radius-s); background:var(--ink-800); }
.preview-modal__name{ text-align:center; font-weight:700; font-size:16px; color:var(--parchment); margin-top:14px; }
.preview-modal__tag{ text-align:center; font-size:11.5px; color:var(--ember-bright); text-transform:uppercase; letter-spacing:0.05em; margin-top:2px; }
.preview-modal__audio{ width:100%; margin-top:16px; }

/* ================= Mobile ================= */
.mobile-tabs{ display:none; }
@media (max-width: 880px){
  .layout{ grid-template-columns:1fr; }
  .layout.player-layout{ grid-template-columns:1fr; }
  .pane{ display:none; border:none; }
  .layout[data-active="map"] .pane-map{ display:flex; }
  .layout[data-active="init"] .pane-init{ display:flex; }
  .layout[data-active="chat"] .pane-chat{ display:flex; }
  .layout[data-active="sheet"] .pane-sheet{ display:flex; }
  .mobile-tabs{ display:flex; flex-shrink:0; border-top:1px solid var(--ink-line); background:var(--ink-900); }
  .mobile-tabs button{ flex:1; background:none; border:none; color:var(--text-muted); padding:10px 0; font-size:11.5px; border-top:2px solid transparent; font-family:'Cinzel',serif; letter-spacing:0.04em; }
  .mobile-tabs button.active{ color:var(--brass-bright); border-top-color:var(--brass); }
  .topbar__title{ font-size:14px; max-width:150px; }
  .topbar__code{ display:none; }
  .library-drawer{ width:100%; }
}