/* Thème « RPG fantasy » (FF VIII Remaster / FF XIV) appliqué par-dessus app.css :
   panneaux en relief à double filet doré et coins ferrés, titres en or métallique, tuiles d'action illustrées,
   navigation à joyau, chat façon grimoire. Chargé après app.css ; ne change aucune structure. */

:root {
  --gold-lo: #8a6a32;
  --bronze: #a8844b;
  --bronze-d: #5c4424;
  --label: #b89a63;                 /* libellés : bronze mat */
  --value: #fff4d6;                 /* valeurs : clair et lumineux */
  --glow: rgba(244, 210, 120, .45);
  --metal: linear-gradient(180deg, #fff6d8 0%, #f2d48a 38%, #c8973e 62%, #f6dc96 100%);
  --panel-bg:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 214, 140, .07), transparent 55%),
    linear-gradient(180deg, rgba(40, 31, 20, .92), rgba(20, 15, 10, .94));
  --frame: rgba(201, 158, 82, .55);
  --frame-dim: rgba(201, 158, 82, .22);
  /* coins ferrés : 8 traits dorés formant des équerres aux quatre coins */
  --corner-c: #e3bf6c;
  --corners:
    linear-gradient(var(--corner-c), var(--corner-c)) top left / 16px 2px,
    linear-gradient(var(--corner-c), var(--corner-c)) top left / 2px 16px,
    linear-gradient(var(--corner-c), var(--corner-c)) top right / 16px 2px,
    linear-gradient(var(--corner-c), var(--corner-c)) top right / 2px 16px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom left / 16px 2px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom left / 2px 16px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom right / 16px 2px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom right / 2px 16px;
}

/* ---------- fond général : vignette + grain discret ---------- */
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(214, 160, 70, .16), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(60, 30, 10, .5), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6  0 0 0 0 .45  0 0 0 0 .25  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    #100c08 fixed;
  font-variant-numeric: tabular-nums;
}

/* ---------- titres : or métallique ---------- */
.page-head h1, .gate-box h1, .modal h2, .card-detail h2, .profile-head h2, .brand {
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(240, 180, 80, .22));
  letter-spacing: .04em;
}
.page-head h1 { font-size: 32px; font-weight: 800; }
.page-head { position: relative; padding-bottom: 14px; margin-bottom: 20px; }
/* séparateur ornementé sous l'en-tête de page : filet effilé + losange central */
.page-head::after, .sep {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  background:
    linear-gradient(45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--gold) 42% 58%, transparent 58%) center / 9px 9px no-repeat,
    linear-gradient(90deg, transparent, var(--frame) 30%, var(--gold-hi) 50%, var(--frame) 70%, transparent) center / 100% 1px no-repeat;
}
.page-head::before {
  content: ''; position: absolute; left: 50%; bottom: 1px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 0 8px var(--glow); z-index: 1;
}
.page-head p.muted { color: var(--label); }
.sep { position: relative; display: block; margin: 14px 0; }

/* ---------- panneaux : relief, double filet, coins ferrés ---------- */
.panel, .kpi, .modal, .gate-box {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--frame);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, .12),
    inset 0 0 0 3px rgba(12, 9, 5, .85),
    inset 0 0 0 4px var(--frame-dim),
    inset 0 -18px 30px rgba(0, 0, 0, .35),
    0 10px 28px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.panel::before, .kpi::before, .modal::before, .gate-box::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: var(--corners); background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px rgba(240, 190, 90, .35));
}
.panel { padding: 16px 18px; }
.modal { border-radius: 8px; background: var(--panel-bg), #15100b; }
.gate-box { padding: 26px 28px; }

/* titres de panneau : petites capitales bronze + filet effilé terminé par un losange */
.panel h2 {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px; letter-spacing: .16em; color: var(--gold);
  text-shadow: 0 0 8px rgba(240, 180, 80, .25);
}
.panel h2::before {
  content: ''; width: 7px; height: 7px; flex: none; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo)); box-shadow: 0 0 6px var(--glow);
}
.panel h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--frame), transparent); }
.panel h3 { color: var(--value); }

/* ---------- chiffres clés : libellé bronze / valeur lumineuse ---------- */
.kpis { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); }
.kpi { padding: 12px 16px 12px; }
.kpi span { font-size: 12px; letter-spacing: .18em; color: var(--label); font-weight: 600; }
.kpi b {
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1.15; color: var(--value); font-weight: 800; white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 220, 140, .25), 0 1px 0 #000;
}
.kpi small { color: var(--muted); }
.kpi::after { /* reflet supérieur */
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 190, .55), transparent);
}
.facts dt, .stats-grid span, .data th, .field, legend { color: var(--label); }
.facts dd, .stats-grid b { color: var(--value); }
.stats-grid div, .list li, .topic, .match, .trade-cols section {
  background: linear-gradient(180deg, rgba(255, 230, 180, .045), rgba(0, 0, 0, .18));
  border: 1px solid var(--frame-dim);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .06);
  border-radius: 6px;
}

/* ---------- tuiles d'action ---------- */
.quick { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.big-btn {
  --art: none;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 92px; padding: 16px 18px; border-radius: 6px;
  background: var(--panel-bg);
  border: 1px solid var(--frame);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim), 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s;
}
.big-btn::before { /* coins ferrés */
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  background: var(--corners); background-repeat: no-repeat;
}
.big-btn::after { /* filigrane illustré à droite */
  content: ''; position: absolute; right: 8px; top: 50%; width: 74px; height: 74px; transform: translateY(-50%) rotate(-8deg);
  background: var(--art) center / contain no-repeat; opacity: .2; z-index: -1;
  transition: opacity .2s, transform .25s ease, filter .2s;
}
.big-btn b {
  font-family: 'Cinzel', serif; font-size: 17px; font-weight: 800; letter-spacing: .03em; line-height: 1.15; text-wrap: balance;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9));
}
.big-btn span { color: var(--label); font-size: 15px; max-width: 72%; text-shadow: 0 1px 2px #000; }
.big-btn:hover, .big-btn:focus-visible {
  transform: translateY(-2px); border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .2), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px rgba(217, 180, 90, .4),
    0 0 0 1px rgba(244, 210, 120, .25), 0 0 22px rgba(244, 200, 100, .28), 0 12px 26px rgba(0, 0, 0, .5);
  filter: brightness(1.12); outline: none;
}
.big-btn:hover::after, .big-btn:focus-visible::after { opacity: .38; transform: translateY(-50%) rotate(-4deg) scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 210, 120, .6)); }
.big-btn:active { transform: translateY(0) scale(.985); filter: brightness(.96); }
.big-btn.primary {
  background: radial-gradient(120% 120% at 100% 50%, rgba(240, 190, 90, .28), transparent 60%), var(--panel-bg);
  border-color: var(--gold);
}
/* illustrations vectorielles (trait doré) */
.big-btn[data-act=online] { /* duel : deux cartes face à face */
  --art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f2d48a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(0 5)'><path d='M5.5 21.5l14.6-3.9a2 2 0 0 1 2.4 1.4l6.2 23.2a2 2 0 0 1-1.4 2.4l-14.6 3.9a2 2 0 0 1-2.4-1.4L4.1 23.9a2 2 0 0 1 1.4-2.4z'/><path d='M58.5 21.5l-14.6-3.9a2 2 0 0 0-2.4 1.4l-6.2 23.2a2 2 0 0 0 1.4 2.4l14.6 3.9a2 2 0 0 0 2.4-1.4l6.2-23.2a2 2 0 0 0-1.4-2.4z'/><g fill='%23f2d48a' stroke='none'><circle cx='10.6' cy='24.6' r='1.3'/><circle cx='8.9' cy='28.4' r='1.3'/><circle cx='13.6' cy='27.1' r='1.3'/><circle cx='11.9' cy='30.9' r='1.3'/><circle cx='46.4' cy='22.6' r='1.3'/><circle cx='44.6' cy='26.4' r='1.3'/><circle cx='49.4' cy='25.1' r='1.3'/><circle cx='47.6' cy='28.9' r='1.3'/></g><path d='M32 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' stroke-width='1.8'/><path d='M23 8l-3-3M41 8l3-3M22 15h-4M42 15h4' stroke-width='1.4'/></g></svg>");
}
.big-btn[data-act=create] { /* plateau 3 × 3 et carte prête à être posée */
  --art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f2d48a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='26' width='36' height='36' rx='2'/><path d='M18 26v36M30 26v36M6 38h36M6 50h36' stroke-width='1.6'/><path d='M32 28h8v8h-8z' stroke-width='1.2' stroke-dasharray='2 2'/><g fill='%23f2d48a' stroke='none' opacity='.55'><rect x='8' y='52' width='8' height='8' rx='1'/><rect x='20' y='40' width='8' height='8' rx='1'/></g><g transform='rotate(14 48 12)'><path d='M43 2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H43a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/><g fill='%23f2d48a' stroke='none'><circle cx='45.8' cy='5.6' r='1'/><circle cx='44.2' cy='8.2' r='1'/><circle cx='47.4' cy='8.2' r='1'/><circle cx='45.8' cy='10.8' r='1'/></g></g><path d='M34 8l2.5 2M33 15h3M61 14h-2.5' stroke-width='1.4'/></svg>");
}
.big-btn[data-act=ai] { /* dos de carte (la main cachée de l’adversaire) */
  --art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f2d48a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='12' y='5' width='40' height='54' rx='3'/><rect x='16' y='9' width='32' height='46' rx='2' stroke-width='1.2'/><ellipse cx='32' cy='32' rx='8' ry='10.5'/><ellipse cx='32' cy='32' rx='4.5' ry='6.5' stroke-width='1.2'/><path d='M32 15v5M32 44v5M21 32h-3M43 32h3M24.5 22.5l-2.5-2.5M39.5 22.5l2.5-2.5M24.5 41.5l-2.5 2.5M39.5 41.5l2.5 2.5' stroke-width='1.4'/><g fill='%23f2d48a' stroke='none'><circle cx='32' cy='13.5' r='1.6'/><circle cx='32' cy='50.5' r='1.6'/><circle cx='20.5' cy='18.5' r='1.6'/><circle cx='43.5' cy='18.5' r='1.6'/><circle cx='20.5' cy='45.5' r='1.6'/><circle cx='43.5' cy='45.5' r='1.6'/><circle cx='16' cy='32' r='1.6'/><circle cx='48' cy='32' r='1.6'/></g></svg>");
}
.big-btn[data-act=shop] { /* cartes et pièce de gils */
  --art: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f2d48a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 8h22a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z' transform='rotate(-10 21 26)'/><path d='M22 6h22a2 2 0 0 1 2 2v32a2 2 0 0 1-2 2H22a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z' transform='rotate(6 33 24)'/><g fill='%23f2d48a' stroke='none' transform='rotate(6 33 24)'><circle cx='27' cy='11' r='1.3'/><circle cx='24.5' cy='14.5' r='1.3'/><circle cx='29.5' cy='14.5' r='1.3'/><circle cx='27' cy='18' r='1.3'/></g><circle cx='44' cy='46' r='14' fill='%23120d08'/><circle cx='44' cy='46' r='10.5' stroke-width='1.4'/><path d='M44 39l5 7-5 7-5-7z' stroke-width='1.8'/><path d='M44 39v14M39 46h10' stroke-width='1'/></svg>");
}

/* ---------- boutons ---------- */
.btn { border-radius: 5px; transition: transform .08s ease, filter .15s, box-shadow .15s, border-color .15s, background .15s; }
.btn.primary {
  background: linear-gradient(180deg, #fbe7ad 0%, #e2bd62 45%, #b88a36 100%);
  color: #1d1406; border: 1px solid #6b4f1f; text-shadow: 0 1px 0 rgba(255, 240, 200, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(90, 60, 20, .45), 0 2px 8px rgba(0, 0, 0, .45);
}
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 60, 20, .45), 0 0 14px rgba(244, 200, 100, .4); }
.btn.ghost {
  background: linear-gradient(180deg, rgba(255, 230, 180, .06), rgba(0, 0, 0, .25));
  border-color: var(--frame); color: var(--value);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08);
}
.btn.ghost:hover:not(:disabled) { border-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), 0 0 10px rgba(244, 200, 100, .2); color: var(--gold-hi); }
.btn:active:not(:disabled), .icon-btn:active, .me-chip:active, .poll-opt:active { transform: translateY(1px) scale(.98); filter: brightness(.94); }
.icon-btn, .me-chip {
  background: linear-gradient(180deg, rgba(255, 230, 180, .06), rgba(0, 0, 0, .25));
  border-color: var(--frame); transition: transform .08s, border-color .15s, box-shadow .15s;
}
.icon-btn:hover, .me-chip:hover { box-shadow: 0 0 10px rgba(244, 200, 100, .2); }

/* ---------- formulaires ---------- */
input, select, textarea {
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(20, 15, 9, .6));
  border-color: var(--frame-dim); border-radius: 5px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}
input:hover, select:hover, textarea:hover { border-color: var(--frame); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 0 0 2px rgba(217, 180, 90, .25), 0 0 12px rgba(244, 200, 100, .2); }
fieldset { border-color: var(--frame-dim); border-radius: 6px; }

/* onglets */
.tabs { gap: 6px; }
.tabs a {
  border-radius: 5px; border-color: var(--frame-dim); color: var(--label);
  background: linear-gradient(180deg, rgba(255, 230, 180, .04), rgba(0, 0, 0, .2));
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.tabs a:hover { color: var(--gold-hi); border-color: var(--frame); }
.tabs a.on {
  background: linear-gradient(180deg, #f7e2a4, #c99a45); color: #1d1406; border-color: #6b4f1f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 12px rgba(244, 200, 100, .3);
}

/* ---------- barre du haut ---------- */
.topbar {
  background:
    linear-gradient(180deg, rgba(255, 220, 150, .06), transparent 60%),
    linear-gradient(180deg, #221a11, #120d08);
  border-bottom: 1px solid var(--frame);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8), 0 6px 18px rgba(0, 0, 0, .45);
  position: relative; z-index: 5;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 210, 120, .35), transparent);
}
.brand { font-size: 21px; }
.brand span { -webkit-text-fill-color: var(--muted); }
.status .stat { color: var(--value); }

/* ---------- navigation latérale ---------- */
.nav {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15)),
    linear-gradient(180deg, rgba(255, 220, 150, .03), transparent);
  border-right: 1px solid var(--frame-dim);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .6);
  padding: 12px 10px; gap: 3px;
}
.nav a {
  position: relative; border-radius: 5px; padding: 9px 12px 9px 26px; color: #e6d9bd;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.nav a .ico { color: var(--bronze); transition: color .15s, filter .15s; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; }
.nav a .ico svg { width: 19px; height: 19px; }
.nav a::before { /* emplacement du joyau */
  content: ''; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--bronze-d); background: transparent; opacity: 0; transition: all .2s;
}
.nav a:hover { background: linear-gradient(90deg, rgba(217, 180, 90, .1), transparent); color: var(--gold-hi); border-color: var(--frame-dim); }
.nav a:hover .ico { color: var(--gold-hi); }
.nav a:hover::before { border-color: var(--gold); opacity: 1; }
.nav a:active { transform: translateX(1px) scale(.985); }
.nav a.on {
  color: var(--value); border-color: var(--frame);
  background:
    linear-gradient(90deg, rgba(240, 190, 90, .28), rgba(240, 190, 90, .06) 70%, transparent),
    rgba(0, 0, 0, .2);
  box-shadow: inset 3px 0 0 var(--gold-hi), inset 0 1px 0 rgba(255, 230, 170, .12), 0 0 14px rgba(244, 200, 100, .12);
}
.nav a.on::before { /* joyau allumé */
  width: 8px; height: 8px; left: 8px; border-color: #fff2c2; opacity: 1;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #f2cf73 45%, #a7741f);
  box-shadow: 0 0 8px rgba(255, 215, 120, .9), 0 0 16px rgba(255, 190, 80, .5);
}
.nav a.on .ico { color: var(--gold-hi); filter: drop-shadow(0 0 4px var(--glow)); }

/* ---------- chat : registre / grimoire ---------- */
.chat {
  position: relative;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 18px),
    radial-gradient(120% 60% at 100% 0%, rgba(255, 214, 140, .05), transparent 60%),
    linear-gradient(180deg, #1b140d, #120d08);
  border-left: 0;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, .8);
}
.chat::before { /* reliure : double filet doré avec rivets */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; pointer-events: none;
  background:
    radial-gradient(circle, #f2d48a 0 1.6px, #6b4f1f 2.2px, transparent 2.8px) center 14px / 7px 56px repeat-y,
    linear-gradient(90deg, var(--frame) 0 1px, transparent 1px 5px, var(--frame-dim) 5px 6px, transparent 6px);
}
.chat-head { border-bottom: 1px solid var(--frame-dim); background: linear-gradient(180deg, rgba(255, 220, 150, .05), transparent); padding-left: 14px; }
.chat-tabs button { border-radius: 4px; font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .04em; }
.chat-tabs button.on { border-color: var(--frame); background: linear-gradient(180deg, rgba(240, 190, 90, .2), rgba(0, 0, 0, .2)); box-shadow: 0 0 10px rgba(244, 200, 100, .15); }
.chat-log { padding: 10px 12px 10px 18px; gap: 4px; }
.msg { padding: 1px 0; }
.msg .t { color: var(--bronze-d); font-variant-numeric: tabular-nums; }
.msg.sys { color: var(--label); }
.who { color: var(--gold-hi); text-shadow: 0 0 6px rgba(240, 190, 90, .2); }
.chat-form { border-top: 1px solid var(--frame-dim); padding-left: 14px; background: linear-gradient(0deg, rgba(0, 0, 0, .25), transparent); }

/* barres de défilement dorées et fines */
* { scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #e9c878, #8a6a32); border-radius: 4px; border: 2px solid rgba(0, 0, 0, .4); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #fbe2a0, #a8844b); }

/* ---------- badges de rôle ornés ---------- */
.badge[class*=role-] {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 8px; border-radius: 3px; border: 1px solid;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 8px rgba(0, 0, 0, .4);
}
.badge[class*=role-]::before, .badge[class*=role-]::after { content: ''; width: 4px; height: 4px; transform: rotate(45deg); background: currentColor; opacity: .8; }
.role-admin { background: linear-gradient(180deg, #8a6a24, #4e3a12); color: #ffe7a3; border-color: #d9b45a; text-shadow: 0 0 6px rgba(255, 210, 120, .6); }
.role-op { background: linear-gradient(180deg, #7a3434, #3f1818); color: #ffcaca; border-color: #c66; }
.role-anim { background: linear-gradient(180deg, #4a3d7e, #261e45); color: #dcd0ff; border-color: #9b8ad6; }
.chat .badge[class*=role-] { padding: 0 5px; font-size: 10px; }
.chat .badge[class*=role-]::before, .chat .badge[class*=role-]::after { display: none; }
.tag { border-color: var(--frame-dim); color: var(--label); background: rgba(0, 0, 0, .2); }

/* ---------- tableaux ---------- */
.data th { font-family: 'Cinzel', serif; font-size: 12px; border-bottom: 1px solid var(--frame); }
.data td { border-bottom-color: rgba(201, 158, 82, .12); }
.data tbody tr:hover td { background: rgba(240, 190, 90, .05); }

/* ---------- tuiles de cartes ---------- */
.tile { transition: transform .15s ease, filter .15s ease; }
.tile[data-act]:hover, [data-add]:hover .tile, [data-pick]:hover .tile, [data-act=t]:hover .tile {
  outline: none; transform: translateY(-3px); filter: drop-shadow(0 0 8px rgba(244, 200, 100, .55)) drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
}
.tile.sel { outline: none; filter: drop-shadow(0 0 3px #fff1c4) drop-shadow(0 0 10px rgba(244, 200, 100, .9)); }

/* ---------- modales & notifications ---------- */
.modal-back { background: radial-gradient(ellipse at center, rgba(20, 14, 8, .6), rgba(4, 3, 2, .85)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal .x { color: var(--label); z-index: 3; }
.modal .x:hover { color: var(--gold-hi); }
.toast {
  background: linear-gradient(180deg, #2a2116, #17110b); border-color: var(--frame); border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), 0 0 18px rgba(0, 0, 0, .6);
}
.gate-art { border-radius: 4px; box-shadow: 0 0 0 1px var(--frame), 0 8px 20px rgba(0, 0, 0, .5); }
.pseudo-btn { border-color: var(--frame-dim); background: linear-gradient(180deg, rgba(255, 230, 180, .05), rgba(0, 0, 0, .2)); transition: border-color .15s, box-shadow .15s, transform .08s; }
.pseudo-btn:hover:not(:disabled) { box-shadow: 0 0 12px rgba(244, 200, 100, .2); }

/* ---------- table de jeu (le plateau board.webp n'est pas modifié : seul l'habillage autour change) ---------- */
.game-bar { background: linear-gradient(180deg, #221a11, #120d08); border-bottom-color: var(--frame); position: relative; }
.game-bar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 210, 120, .35), transparent);
}
/* la table se dimensionne sur la place réellement visible (et non sur 100vh, qui inclut la barre d'adresse
   des navigateurs mobiles et rognait le plateau en paysage) */
.stage { padding: 20px 24px; container-type: size; }
/* écrin autour du plateau : double filet doré et coins ferrés, entièrement à l'extérieur de l'image */
.table {
  width: min(100cqw, 100cqh * 1540 / 880);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px #2a1f12, 0 0 0 3px var(--frame), 0 0 0 5px #120d08, 0 0 0 6px var(--frame-dim),
    0 0 30px rgba(240, 190, 90, .12), 0 24px 60px rgba(0, 0, 0, .75);
}
.table::after {
  content: ''; position: absolute; inset: -9px; pointer-events: none; z-index: 40;
  --corner-c: #f0cd78;
  background:
    linear-gradient(var(--corner-c), var(--corner-c)) top left / 26px 3px,
    linear-gradient(var(--corner-c), var(--corner-c)) top left / 3px 26px,
    linear-gradient(var(--corner-c), var(--corner-c)) top right / 26px 3px,
    linear-gradient(var(--corner-c), var(--corner-c)) top right / 3px 26px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom left / 26px 3px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom left / 3px 26px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom right / 26px 3px,
    linear-gradient(var(--corner-c), var(--corner-c)) bottom right / 3px 26px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 200, 100, .55));
}
/* plaques gravées des joueurs */
.pname {
  top: .5cqw; left: auto; width: auto; max-width: 15cqw; padding: .2cqw 1.1cqw;
  font-family: 'Cinzel', serif; font-size: 1.15cqw; font-weight: 800; letter-spacing: .06em; color: var(--value);
  background: linear-gradient(180deg, rgba(48, 37, 22, .95), rgba(18, 13, 8, .95));
  border: 1px solid var(--frame); border-radius: .3cqw;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .2), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 .2cqw .6cqw rgba(0, 0, 0, .5);
  text-shadow: 0 1px 0 #000; transform: translateX(-50%);
}
.pname-0 { left: calc(8.2cqw + 13.41cqw / 2); }
.pname-1 { right: auto; left: calc(100cqw - 8.2cqw - 13.41cqw / 2); }
.pname-0::before, .pname-1::before { content: '◆ '; font-size: .8em; }
.pname-0::before { color: #9fc0ff; }
.pname-1::before { color: #ff9fa8; }
/* scores en métal teinté */
.score {
  -webkit-text-stroke: 0; color: transparent; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 .12cqw #0d0a14) drop-shadow(0 0 .12cqw #0d0a14) drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .6));
}
.score-0 { background-image: linear-gradient(180deg, #ffffff 0%, #bcd4ff 40%, #5b84d6 62%, #d9e6ff 100%); }
.score-1 { background-image: linear-gradient(180deg, #ffffff 0%, #ffc4c4 40%, #d0525e 62%, #ffe0e0 100%); }
/* cartouche du tour */
.turn {
  left: 50%; width: max-content; max-width: 50cqw; transform: translateX(-50%); top: 53.9cqw;
  padding: .25cqw 1.6cqw; font-family: 'Cinzel', serif; font-size: 1.35cqw; letter-spacing: .12em;
  color: var(--gold-hi); text-shadow: 0 0 .6cqw rgba(255, 200, 100, .45), 0 1px 0 #000;
  background: linear-gradient(180deg, rgba(48, 37, 22, .95), rgba(18, 13, 8, .95));
  border: 1px solid var(--frame); border-radius: .3cqw;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .2), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 .3cqw .8cqw rgba(0, 0, 0, .5);
}
.turn:empty { display: none; }
.turn::before, .turn::after { content: '◆'; font-size: .7em; margin: 0 .7cqw; vertical-align: .1em; color: var(--gold); }
/* cartouches des règles */
.rules-badges { top: .8cqw; }
.rules-badges span {
  font-family: 'Cinzel', serif; font-size: .95cqw; letter-spacing: .08em; color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(48, 37, 22, .92), rgba(18, 13, 8, .92));
  border: 1px solid var(--frame); border-radius: .25cqw; padding: .12cqw .7cqw;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .18), 0 .15cqw .4cqw rgba(0, 0, 0, .45);
}
/* minuteur */
.timer {
  font-family: 'Cinzel', serif; font-size: 20px; letter-spacing: .06em;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(240, 180, 80, .35));
}
.timer.urgent { background: linear-gradient(180deg, #ffe0e0, #ff6170 60%, #ffb0b8); -webkit-background-clip: text; background-clip: text; animation: urgent 1s ease-in-out infinite; }
@keyframes urgent { 50% { filter: drop-shadow(0 0 10px rgba(255, 90, 100, .8)); } }
/* écran de fin : panneau orné */
.overlay { background: radial-gradient(ellipse at center, rgba(20, 14, 8, .55), rgba(4, 3, 2, .85)); }
.end-box {
  position: relative; padding: 22px 34px 24px; min-width: min(520px, 92vw);
  background: var(--panel-bg), #15100b; border: 1px solid var(--frame); border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim),
    0 0 40px rgba(240, 190, 90, .15), 0 30px 80px rgba(0, 0, 0, .8);
}
.end-box::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: var(--corners); background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(240, 190, 90, .4));
}
.end-box img { width: min(460px, 76vw); }
.end-box p { color: var(--value); }
.end-rewards { font-family: 'Cinzel', serif; font-size: 17px; letter-spacing: .04em; padding-top: 10px; margin-top: 10px; position: relative; }
.end-rewards:not(:empty)::before {
  content: ''; position: absolute; left: 15%; right: 15%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

@media (max-width: 760px) {
  .nav { background: linear-gradient(180deg, #1d160e, #120d08); }
  .big-btn { min-height: 80px; }
  .big-btn::after { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .big-btn, .big-btn::after, .tile, .btn, .nav a { transition: none; }
  .big-btn:hover, .tile[data-act]:hover { transform: none; }
}

/* ---------- alignements et espacements (revue d'interface) ---------- */
/* champ avec libellé + boutons sur une même ligne : tout s'aligne sur le bas du champ */
.row:has(> .field) { align-items: flex-end; }
/* respiration entre un formulaire / une ligne de boutons et la liste qui suit, et inversement */
.panel form + .list, .panel .row + .list, .panel .stack + .list, .panel .list + .btn, .panel .list + .row { margin-top: 10px; }
.panel h3 { margin-top: 14px; }
.panel h2 + .list, .panel h2 + p { margin-top: 0; }
/* barre de filtres : la recherche s'étire, les listes déroulantes se partagent le reste sur une ligne */
.filters input[type=search] { flex: 2 1 180px; }
.filters select { flex: 1 1 140px; max-width: 280px; }
/* titres longs et sous-titre de l'écran de connexion */
.page-head h1 { overflow-wrap: anywhere; }
.gate-box p.muted { text-wrap: balance; }
/* bouton de repli du chat : la flèche suit l'état */
.chat-head [data-act=fold] { transition: transform .2s; }
.chat.folded [data-act=fold] { transform: rotate(180deg); }
/* états vides : petit cartouche discret plutôt qu'un texte isolé */
.page > p.muted { padding: 14px 16px; border: 1px dashed var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .15); }
.btn:disabled { filter: saturate(.4); }

@media (max-width: 760px) {
  .page-head h1 { font-size: 25px; }
  .table::after {
    inset: -6px;
    background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  }
  .stage { padding: 12px; }
}
/* téléphone en portrait : la table est conçue pour le paysage */
@media (max-width: 760px) and (orientation: portrait) {
  .stage { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
  .stage::after {
    content: '⟳  Tournez votre téléphone pour une table plus grande'; text-align: center;
    font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .06em; color: var(--label);
  }
}

/* ---------- respiration générale (écrans larges) ---------- */
.main { padding: 30px 36px 70px; }
.page { max-width: 1360px; }
.panel { padding: 20px 22px; margin-bottom: 22px; }
.cols { gap: 22px; }
.page-head { margin-bottom: 28px; }
.panel h2 { margin-bottom: 14px; }
.list { gap: 8px; }

/* contour de focus : doré et seulement au clavier (plus de contour bleu après un clic) */
:focus:not(:focus-visible) { outline: none; }
.nav a:focus-visible, .btn:focus-visible, .big-btn:focus-visible, .tabs a:focus-visible, .icon-btn:focus-visible, .me-chip:focus-visible {
  outline: 2px solid var(--gold-hi); outline-offset: 2px;
}

/* ---------- tableau de bord : bannière + deux colonnes ---------- */
.hero {
  position: relative; overflow: hidden; margin-bottom: 26px; min-height: 168px;
  display: flex; align-items: flex-end; padding: 26px 30px;
  border: 1px solid var(--frame); border-radius: 6px;
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(240, 190, 90, .1), transparent 55%),
    linear-gradient(180deg, #1d150d, #120d08);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .14), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim),
    inset 0 -40px 60px rgba(0, 0, 0, .35), 0 12px 30px rgba(0, 0, 0, .45);
}
.hero::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: var(--corners); background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(240, 190, 90, .4));
}
/* plateau FF8 en fond, fondu progressivement vers la gauche */
.hero::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: min(58%, 640px); z-index: 0; pointer-events: none;
  background: url(assets/ui/board.webp) 62% 48% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 30%, #000 70%);
  opacity: .85;
}
.hero-text { position: relative; z-index: 1; max-width: 62%; }
.hero::before { z-index: 2; }
.hero h1 {
  margin: 2px 0 4px; font-family: 'Cinzel', serif; font-weight: 800; font-size: 36px; letter-spacing: .04em;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)) drop-shadow(0 0 12px rgba(240, 180, 80, .25));
}
.hero-kicker { margin: 0; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hero-sub { margin: 0; color: var(--label); }

.page { container-type: inline-size; }
/* Ordre du tableau de bord : accueil -> résumé chiffré -> actions -> infos de la communauté.
   Les colonnes dépendent de la largeur réelle de la zone centrale (container queries), pas de l'écran. */
.hero { margin-bottom: 14px; }
.hero-sub a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(244, 210, 120, .4); text-underline-offset: 3px; }

/* résumé : une seule bande, 6 cases séparées par des filets (6 colonnes, puis 3 x 2, puis 2 x 3) */
.summary {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 26px;
  background: var(--panel-bg); border: 1px solid var(--frame); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .12), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim),
    inset 0 -18px 30px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45);
}
.summary::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: var(--corners); background-repeat: no-repeat; filter: drop-shadow(0 0 3px rgba(240, 190, 90, .35));
}
.summary div { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 16px 20px; border-left: 1px solid rgba(201, 158, 82, .16); }
.summary div:first-child { border-left: 0; }
.summary span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary b {
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; font-weight: 800; color: var(--value); white-space: nowrap;
  text-shadow: 0 0 12px rgba(255, 220, 140, .2), 0 1px 0 #000;
}
.summary small { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 3 cases (cartes, bilan, notoriété) : gils, exp et powers sont déjà dans la barre du haut */
.summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 480px) {
  .summary div { padding: 12px 12px; }
  .summary small { white-space: normal; }
}

/* actions : 4 sur une ligne si la place le permet, sinon 2 x 2 */
.page > .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.page > .quick .big-btn { min-height: 118px; padding: 20px 22px; justify-content: center; gap: 6px; }
.page > .quick .big-btn b { font-size: 19px; }
.page > .quick .big-btn::after { width: 86px; height: 86px; right: 18px; }
@container (max-width: 900px) {
  .page > .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page > .quick .big-btn b { font-size: 20px; }
}

/* infos de la communauté : news à gauche, tournois et dernières parties à droite */
.dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: start; }
.dash-side { min-width: 0; }
.dash .panel { margin-bottom: 22px; }
@container (min-width: 700px) {
  .dash { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* zone large : news, tournois et dernières parties sur une même ligne */
@container (min-width: 1180px) {
  .dash { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .dash-side { display: contents; }
}

@media (max-width: 760px) {
  .main { padding: 16px 14px 40px; }
  .hero { min-height: 120px; padding: 18px 18px; }
  .hero::after { width: 70%; opacity: .3; }
  .hero-text { max-width: 100%; }
  .hero h1 { font-size: 26px; }
  .page > .quick { gap: 12px; }
  .page > .quick .big-btn { min-height: 100px; padding: 16px; }
  .page > .quick .big-btn b { font-size: 16px; }
  .page > .quick .big-btn::after { width: 66px; height: 66px; }
}
/* bannière étroite : l'image se resserre à droite pour ne pas passer sous le message d'accueil */
@container (max-width: 900px) {
  .hero::after { width: 42%; opacity: .7; }
  .hero h1 { font-size: 30px; }
}

/* ---------- mise en page des pages (ordre et colonnes, sans changer le style) ---------- */
/* .split : deux colonnes de panneaux empilés quand la zone centrale le permet */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: start; }
.split > div { min-width: 0; }
@container (min-width: 700px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.main-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* bande de chiffres à 4 cases (guilde) : 4 colonnes, puis 2 x 2 */
.summary.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 860px) {
  .summary.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .summary.four div:nth-child(4) { border-left: 1px solid rgba(201, 158, 82, .16); }
  .summary.four div:nth-child(n + 4) { border-top: 0; }
}
@container (max-width: 560px) {
  .summary.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary.four div:nth-child(3) { border-left: 0; }
  .summary.four div:nth-child(n + 3) { border-top: 1px solid rgba(201, 158, 82, .16); }
}
.page-head .glogo { flex: none; }
/* sous-titres internes d'un panneau */
.panel h3.sub { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 0 0 10px; }

/* Jouer : réglages puis main (côte à côte si la place le permet) */
.ai-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; }
.ai-layout .pick-slots { margin: 0 0 12px; }
@container (min-width: 1040px) { .ai-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Boutique / Mes cartes : filtres en grille régulière (recherche plus large) */
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.filters:has(select:nth-of-type(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 520px) { .filters, .filters:has(select:nth-of-type(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* zone étroite : la recherche sur sa propre ligne, les listes alignées dessous ; zone large : tout sur une ligne */
.filters .search-field { grid-column: 1 / -1; min-width: 0; }
@container (min-width: 900px) {
  .filters { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(0, 1fr)); }
  .filters:has(select:nth-of-type(4)) { grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(0, 1fr)); }
  .filters .search-field { grid-column: auto; }
}
.filters select { max-width: none; min-width: 0; }

/* Enchères : annonces en grille */
.auction-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.auction-list .panel { margin-bottom: 0; }

/* Administration */
.admin-mod .row { margin-top: 4px; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; }
.quiz-layout .check-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 45%), 1fr)); }
@container (min-width: 1000px) { .quiz-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } }
.quiz-side { display: flex; flex-direction: column; gap: 18px; }
.quiz-side .row { justify-content: flex-start; margin-top: 0; }
.ai-layout .field + .check-grid { margin-top: 12px; }
/* titres de groupe hors panneau (Tournois : en cours, inscriptions, historique) */
.group-title {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 14px;
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.group-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--frame), transparent); }
.page > .group-title:not(:first-of-type) { margin-top: 10px; }
/* Guilde : gestion en panneaux côte à côte sous la liste des membres */
.manage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: stretch; }
@container (min-width: 600px) {
  .manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manage-grid > .panel:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* panneau seul en bas : pleine largeur */
}
@container (min-width: 1000px) {
  .manage-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .manage-grid > .panel:last-child:nth-child(odd) { grid-column: auto; }
}
.manage-grid .panel { display: flex; flex-direction: column; }
.manage-grid .panel > .row:last-child { margin-top: auto; padding-top: 4px; }
/* Jouer : difficulté à sa taille naturelle, règles en 3 colonnes */
.ai-layout .field { display: inline-flex; }
.ai-layout .field select { min-width: 160px; }
.ai-layout .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 480px) { .ai-layout .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- table de jeu : informations dans la barre, plateau dégagé ---------- */
/* barre en 3 zones : quitter et son | règles de la partie | tour + minuteur */
.game-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; height: 56px; }
.turn-box { justify-self: end; display: flex; align-items: center; gap: 12px; min-width: 0; }
.game-bar .turn {
  position: static; transform: none; width: auto; max-width: none; top: auto; left: auto;
  font-size: 14px; padding: 5px 14px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--label);
}
.game-bar .turn.mine { color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .2), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 0 14px rgba(244, 200, 100, .45); }
.game-bar .timer:empty { display: none; }
/* joueur actif : plaque allumée */
.pname { transition: box-shadow .25s, border-color .25s; }
.pname.active { border-color: var(--gold-hi); color: #fff6dc; box-shadow: inset 0 1px 0 rgba(255, 230, 170, .3), inset 0 0 0 2px rgba(0, 0, 0, .6), 0 0 .9cqw rgba(255, 210, 120, .75); }
@media (max-width: 1000px) {
  .game-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
}
@media (max-width: 760px) {
  .game-bar { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; height: auto; padding: 8px 12px; row-gap: 6px; }
  .game-bar .turn { font-size: 12px; padding: 4px 10px; }
}
.pname { font-size: max(10px, 1.15cqw); }
.pname.active { background: linear-gradient(180deg, #f7e2a4, #c99a45); color: #1d1406; text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.pname-0.active::before { color: #2a4fa8; }
.pname-1.active::before { color: #a82a3a; }

/* écrans bas (téléphone en paysage) : barre et marges resserrées pour agrandir le plateau */
@media (max-height: 520px) {
  .game-bar { height: 42px; padding: 0 10px; gap: 8px; }
  .game-bar .turn { font-size: 11px; padding: 3px 9px; }
  .stage { padding: 10px 14px; }
}

/* ---------- avatars (illustration d'une carte, recadrée en médaillon) ---------- */
.avatar {
  --s: 32px;
  flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: #241b10 center 42% / 190% no-repeat; vertical-align: middle;
  box-shadow: 0 0 0 2px #120d08, 0 0 0 3px var(--gold), 0 2px 6px rgba(0, 0, 0, .6);
}
.avatar.none { font-family: 'Cinzel', serif; font-weight: 800; font-size: calc(var(--s) * .45); color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #4a3920, #1a130c); }
.avatar.xs { --s: 22px; box-shadow: 0 0 0 1px #120d08, 0 0 0 2px var(--gold); margin-right: 6px; }
.avatar.sm { --s: 34px; }
.avatar.lg { --s: 64px; }
.avatar.xl { --s: 88px; }
.avatar.big { --s: 96px; position: relative; z-index: 1; margin-right: 22px; box-shadow: 0 0 0 3px #120d08, 0 0 0 5px var(--gold), 0 0 18px rgba(240, 190, 90, .45), 0 6px 16px rgba(0, 0, 0, .6); }
.hero:has(.avatar.big) { align-items: center; }
.me-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 300px; flex-shrink: 1; }
.me-chip .avatar.xs { margin-right: 0; }
.me-chip .chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.me-chip small { flex: none; color: var(--muted); }
.role-gem {
  flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; border: 1px solid;
  font-size: 14px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 6px rgba(0, 0, 0, .4);
}
.profile-head { align-items: center; }
@media (max-width: 760px) { .avatar.big { --s: 64px; margin-right: 14px; } }

/* ---------- chat : joueurs en ligne et aide ---------- */
.online-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--gold); }
.online-btn svg { width: 18px; height: 18px; }
.online-btn .online-count { display: none; color: var(--value); }
@media (max-width: 760px) { .online-btn .online-count { display: inline; } }
.chat.show-online .online-btn { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px rgba(244, 200, 100, .25); }
.online-list { max-height: 45%; overflow-y: auto; border-bottom: 1px solid var(--frame-dim); padding: 8px 10px 8px 16px; background: rgba(0, 0, 0, .2); }
.online-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.online-title { margin: 0 0 6px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.online-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 5px 6px; border-radius: 5px; background: transparent; border: 1px solid transparent; line-height: 1.2; }
.online-row:hover { background: rgba(240, 190, 90, .08); border-color: var(--frame-dim); }
.online-row b { color: var(--gold-hi); }
.chat.folded .online-list { display: none; }
button.stat { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--muted); }
button.stat:hover { color: var(--gold-hi); text-decoration: underline; }
.cmd-list { display: grid; grid-template-columns: 210px 1fr; gap: 6px 16px; margin: 0 0 14px; align-items: baseline; }
.cmd-list dt code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--gold-hi); background: rgba(0, 0, 0, .35); border: 1px solid var(--frame-dim); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.cmd-list dd { margin: 0; color: var(--value); }
.modal h3.sub { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 14px 0 8px; }
@media (max-width: 560px) { .cmd-list { grid-template-columns: 1fr; gap: 2px; } .cmd-list dd { margin-bottom: 8px; } }
/* notification de message privé (cliquable : ouvre la conversation) */
.toast.clickable { pointer-events: auto; cursor: pointer; font: inherit; }
.toast.pm { border-color: var(--gold); color: var(--value); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .15), 0 0 18px rgba(244, 200, 100, .35); }
.toast.pm:hover { filter: brightness(1.12); }
/* le compteur de non-lus reste visible sur le bouton de repli quand le chat est replié */
.chat.folded.has-unread [data-act=fold] { border-color: var(--red); color: #ffc9ce; box-shadow: 0 0 10px rgba(255, 97, 112, .45); }
/* tableau de bord : Tournois et Dernières parties côte à côte, News en pleine largeur dessous */
.dash-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: stretch; }
.dash-pair .panel { display: flex; flex-direction: column; }
@container (min-width: 640px) { .dash-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-pair .panel > .btn { align-self: flex-start; }

/* ---------- éditeur de recadrage de l'avatar ---------- */
.crop-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 8px 0 18px; }
.crop-main {
  --s: 220px; cursor: grab; touch-action: none; user-select: none;
  box-shadow: 0 0 0 3px #120d08, 0 0 0 5px var(--gold), 0 0 18px rgba(240, 190, 90, .35), 0 6px 16px rgba(0, 0, 0, .6);
}
.crop-main:active { cursor: grabbing; }
.crop-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.crop-side .field { width: 100%; }
.crop-side input[type=range] { width: 100%; accent-color: var(--gold); }
.crop-previews { display: flex; align-items: center; gap: 14px; }
@media (max-width: 480px) { .crop-main { --s: 180px; margin: 0 auto; } }

/* ---------- barre du haut : titre · bourse · en ligne, son, profil ---------- */
.topbar { gap: 28px; padding: 0 20px; }
.status { gap: 28px; justify-content: space-between; overflow: visible; }
.status svg { width: 100%; height: 100%; display: block; }
.status .purse { margin-inline: auto; }
/* bourse : centrée entre le titre et la zone de droite */
.purse {
  display: flex; align-items: stretch; height: 42px; flex: none;
  border: 1px solid var(--frame-dim); border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .3));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), inset 0 0 0 2px rgba(12, 9, 5, .7);
}
.purse-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 22px; cursor: default; }
.purse-item + .purse-item { border-left: 1px solid; border-image: linear-gradient(180deg, transparent, var(--frame), transparent) 1; }
.purse-item > svg { width: 20px; height: 20px; flex: none; color: var(--gold); filter: drop-shadow(0 0 4px rgba(240, 190, 90, .25)); }
.purse-txt { position: relative; display: flex; flex-direction: column; line-height: 1.05; }
.purse-txt small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.purse-txt b { font-size: 17px; font-weight: 800; color: var(--value); font-variant-numeric: tabular-nums; min-width: 3ch; }
.purse-item.flash > svg { animation: purse-flash .9s ease-out; }
@keyframes purse-flash { 30% { color: var(--gold-hi); filter: drop-shadow(0 0 8px rgba(255, 215, 120, .9)); transform: scale(1.18); } }
.purse-delta {
  position: absolute; left: 100%; bottom: 0; margin-left: 6px; font-size: 13px; white-space: nowrap; font-weight: 800; pointer-events: none;
  animation: purse-rise 1.6s ease-out forwards; text-shadow: 0 1px 2px #000;
}
.purse-delta.up { color: #9fe39f; }
.purse-delta.down { color: #f2a0a0; }
@keyframes purse-rise { 0% { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
/* zone de droite */
.hud-right { display: flex; align-items: center; gap: 16px; flex: none; min-width: 0; }
.online-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 4px; background: none; border: 0;
  font: inherit; font-weight: 600; color: var(--label); white-space: nowrap; cursor: pointer;
}
.online-pill b { color: var(--value); font-weight: 800; }
.online-pill:hover { color: var(--gold-hi); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #6fd46f; box-shadow: 0 0 0 0 rgba(111, 212, 111, .6); animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(111, 212, 111, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(111, 212, 111, 0); } }
.hud-right::before { content: ''; width: 1px; height: 26px; margin-right: -2px; background: linear-gradient(180deg, transparent, var(--frame), transparent); order: 1; }
.online-pill { order: 0; }
.sound-btn { order: 2; width: 36px; height: 36px; padding: 7px; display: inline-grid; place-items: center; color: var(--gold); }
.sound-btn.muted { color: var(--muted); }
.me-chip { order: 3; padding: 3px 10px 3px 3px; max-width: 280px; }
.me-chip .avatar.xs { --s: 28px; }
.me-chip .chev { width: 14px; height: 14px; color: var(--muted); flex: none; transition: transform .15s; }
.me-chip[aria-expanded=true] { border-color: var(--gold); }
.me-chip[aria-expanded=true] .chev { transform: rotate(180deg); color: var(--gold-hi); }
/* menus déroulants */
.hud-pop {
  position: fixed; z-index: 90; min-width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(180deg, #241b11, #140f09); border: 1px solid var(--frame); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .1), inset 0 0 0 3px rgba(12, 9, 5, .8), 0 14px 34px rgba(0, 0, 0, .6);
  animation: pop-in .14s ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.hud-pop > a, .hud-pop > button {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 4px; background: none;
  font: inherit; font-weight: 600; color: #e6d9bd; text-decoration: none; cursor: pointer;
}
.hud-pop > a:hover, .hud-pop > button:hover { background: linear-gradient(90deg, rgba(217, 180, 90, .14), transparent); color: var(--gold-hi); }
.hud-pop > .danger { color: #f2a0a0; }
.hud-pop hr { border: 0; height: 1px; margin: 6px 4px; background: linear-gradient(90deg, transparent, var(--frame), transparent); }
.pop-head { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--frame-dim); }
.pop-head b { font-size: 17px; color: var(--value); }
.pop-head .muted { font-size: 13px; margin-top: 2px; }
.pop-title { margin: 2px 8px 6px; font-family: 'Cinzel', serif; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pop-sound .check { padding: 6px 8px; }
/* écrans moyens : libellés de la bourse retirés, puis texte « en ligne » */
@media (max-width: 1280px) {
  .topbar, .status { gap: 20px; }
  .status .purse-item { padding: 0 16px; gap: 8px; }
  .status .purse-txt small { display: none; }
}
@media (max-width: 1000px) {
  .online-label { display: none; }
  .hud-right { gap: 12px; }
  .status .purse-item { padding: 0 12px; }
}
/* téléphone : bourse réduite aux gils, profil réduit au médaillon */
@media (max-width: 760px) {
  .topbar, .status { gap: 8px; }
  .topbar { padding: 0 10px; }
  .status .purse { height: 36px; margin-inline: auto 0; }
  .status .purse-item > svg { width: 17px; height: 17px; }
  .status .purse-item:not(:first-child), .online-pill, .hud-right::before, .me-chip .chip-name, .me-chip small, .me-chip .role-gem, .me-chip .chev { display: none; }
  .status .purse-item { padding: 0 9px; gap: 6px; }
  .status .purse-txt b { font-size: 15px; }
  .brand { font-size: 18px; }
  .purse-delta { left: auto; right: 0; bottom: auto; top: -14px; margin: 0; font-size: 12px; }
  .hud-right { gap: 8px; }
  .sound-btn { width: 34px; height: 34px; }
  .me-chip { padding: 2px; border-radius: 50%; }
}
/* connexion perdue : bandeau sous la barre */
body.offline .topbar::after {
  top: 100%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); height: auto; padding: 4px 16px; z-index: 10;
  background: #3a1414; border: 1px solid var(--red); border-top: 0; border-radius: 0 0 6px 6px; font-size: 13px; white-space: nowrap;
}

/* ---------- barre de la table : quitter et son · règles · tour et minuteur ---------- */
.game-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 28px; padding: 0 20px; }
.gb-left { justify-self: start; display: flex; align-items: center; gap: 16px; }
.gb-left::after { content: ''; order: 1; width: 1px; height: 26px; background: linear-gradient(180deg, transparent, var(--frame), transparent); }
.gb-left .sound-btn { order: 2; }
#g-sound { order: 2; display: contents; }
.quit-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; }
.quit-btn svg { width: 18px; height: 18px; }
.game-bar .sound-btn svg, .rs-item svg { width: 100%; height: 100%; display: block; }
/* bandeau des règles : même écrin que la bourse */
.rules-strip {
  display: flex; align-items: stretch; height: 38px; min-width: 0; max-width: 100%;
  border: 1px solid var(--frame-dim); border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .3));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), inset 0 0 0 2px rgba(12, 9, 5, .7);
  overflow-x: auto; scrollbar-width: none;
}
.rules-strip::-webkit-scrollbar { display: none; }
.rs-item { display: flex; align-items: center; gap: 8px; padding: 0 16px; white-space: nowrap; font-weight: 600; color: var(--value); cursor: default; }
.rs-item + .rs-item { border-left: 1px solid; border-image: linear-gradient(180deg, transparent, var(--frame), transparent) 1; }
.rs-item > svg { width: 17px; height: 17px; flex: none; color: var(--gold); }
.rs-rules > span { font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--gold-hi); }
.rs-dot { width: 4px; height: 4px; transform: rotate(45deg); background: var(--gold); opacity: .7; flex: none; }
/* tour et minuteur */
.turn-box { gap: 14px; }
.game-bar .turn.theirs { animation: turn-wait 1.8s ease-in-out infinite; }
@keyframes turn-wait { 50% { opacity: .55; } }
.gtimer { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; }
.gtimer:empty { display: none; }
.gtimer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gtimer circle { fill: none; stroke-width: 3; }
.ring-track { stroke: rgba(217, 180, 90, .18); }
.ring-bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dasharray .25s linear, stroke .3s; filter: drop-shadow(0 0 3px rgba(240, 190, 90, .5)); }
.gtimer b { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 800; color: var(--value); }
.gtimer.urgent .ring-bar { stroke: #ff6170; filter: drop-shadow(0 0 4px rgba(255, 90, 100, .8)); }
.gtimer.urgent b { color: #ffb0b8; animation: urgent-beat 1s ease-in-out infinite; }
@keyframes urgent-beat { 50% { transform: scale(1.15); } }
@media (max-width: 1000px) {
  .game-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .rules-strip { justify-self: center; }
  .rs-item { padding: 0 12px; }
}
@media (max-width: 760px) {
  .game-bar { grid-template-columns: auto minmax(0, 1fr); padding: 8px 12px; gap: 8px 12px; }
  .game-bar .rules-strip { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; height: 34px; }
  .gb-left { gap: 10px; }
  .quit-btn { padding: 5px 10px 5px 8px; }
  .gtimer { width: 34px; height: 34px; }
}
@media (max-height: 520px) {
  .game-bar { gap: 14px; }
  .rules-strip { height: 30px; }
  .rs-item { padding: 0 10px; font-size: 13px; }
  .rs-rules > span { font-size: 11px; }
  .quit-btn { padding: 3px 10px 3px 8px; }
  .game-bar .sound-btn, .gtimer { width: 30px; height: 30px; }
  .game-bar .sound-btn { padding: 5px; }
}

/* ---------- curseur « temps par coup » ---------- */
.time-field { min-width: min(320px, 100%); }
.time-field > span { display: flex; justify-content: space-between; gap: 12px; }
.time-field b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.time-field input[type=range] { width: 100%; accent-color: var(--gold); padding: 0; }
.small-note { font-size: 13px; margin-top: -6px; }

/* ---------- pages : médaillon du titre, bandeaux d'infos, états vides, filtres ---------- */
.page-head h1 { display: flex; align-items: center; gap: 16px; }
.page-head h1::before {
  content: ''; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--page-ico, none) center / 24px no-repeat, radial-gradient(circle at 35% 30%, #3d2e19, #140f09 75%);
  box-shadow: 0 0 0 1px #120d08, 0 0 0 2px var(--gold), 0 0 0 4px rgba(18, 13, 8, .9), 0 0 0 5px var(--frame-dim), 0 0 16px rgba(240, 190, 90, .25);
}
.page-head:has(.glogo) h1::before { display: none; }
.page-head > p.muted, .page-head .grow > p.muted { margin-left: 62px; }
.page-head .stat-strip { margin: 14px 0 0 62px; }
.stat-strip { display: inline-flex; height: 48px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.stat-strip .purse-item { padding: 0 22px; }
.stat-strip .purse-txt b { font-size: 18px; }
@media (max-width: 760px) {
  .page-head h1 { gap: 12px; }
  .page-head h1::before { width: 38px; height: 38px; background-size: 20px, auto; }
  .page-head > p.muted, .page-head .grow > p.muted, .page-head .stat-strip { margin-left: 0; }
  .page-head.row > .grow { flex-basis: 100%; }
  .stat-strip { display: flex; width: 100%; }
  .stat-strip .purse-item { flex: 1 1 0; min-width: 0; padding: 0 10px; gap: 8px; }
}
/* état vide */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px;
  border: 1px dashed var(--frame-dim); border-radius: 6px; background: radial-gradient(ellipse at 50% 0%, rgba(240, 190, 90, .06), transparent 70%);
}
.empty-state > svg { width: 44px; height: 44px; color: var(--gold); opacity: .45; margin-bottom: 4px; }
.empty-state p { margin: 0; font-weight: 700; color: var(--value); }
.empty-state small { color: var(--label); max-width: 420px; }
.panel .empty-state { padding: 18px 12px; }
.panel .empty-state > svg { width: 36px; height: 36px; }
/* icône dans le texte */
.ico-inline { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; color: var(--gold); }
.ico-inline svg { width: 100%; height: 100%; display: block; }
/* barre de filtres encadrée, champ de recherche avec loupe */
.filters {
  padding: 12px; margin-bottom: 18px; border: 1px solid var(--frame-dim); border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 230, 170, .04), rgba(0, 0, 0, .25));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .06), inset 0 0 0 2px rgba(12, 9, 5, .6);
}
.search-field { position: relative; display: block; }
.search-field > svg { position: absolute; left: 11px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--gold); opacity: .8; pointer-events: none; }
.search-field input { width: 100%; padding-left: 36px; }

/* ---------- page d'aide ---------- */
.nav a[data-route=help] { margin-top: auto; border-top: 1px solid var(--frame-dim); border-radius: 0 0 5px 5px; padding-top: 12px; }
.help-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 4px; }
.help-nav .search-field { margin-bottom: 8px; }
.help-cat { border: 1px solid var(--frame-dim); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 230, 170, .04), rgba(0, 0, 0, .25)); overflow: hidden; }
.help-cat-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; cursor: pointer;
  font: inherit; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); text-align: left;
}
.help-cat-btn > svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.help-cat-btn > span { flex: 1; }
.help-cat-btn .n { font-style: normal; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; color: var(--label); letter-spacing: 0; }
.help-cat-btn > svg:last-child { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.help-cat.open .help-cat-btn > svg:last-child { transform: rotate(180deg); }
.help-cat-btn:hover { background: rgba(217, 180, 90, .08); }
.help-topics { display: none; flex-direction: column; padding: 0 6px 8px; }
.help-cat.open .help-topics { display: flex; }
.help-topics a, .help-results a {
  position: relative; display: block; padding: 6px 10px 6px 24px; border-radius: 4px; color: #e6d9bd; text-decoration: none; font-weight: 600;
}
.help-topics a::before, .help-results a::before {
  content: ''; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%) rotate(45deg); border: 1px solid var(--bronze-d);
}
.help-topics a:hover, .help-results a:hover { background: linear-gradient(90deg, rgba(217, 180, 90, .12), transparent); color: var(--gold-hi); }
.help-topics a.on, .help-results a.on { color: var(--value); background: linear-gradient(90deg, rgba(240, 190, 90, .22), transparent); box-shadow: inset 2px 0 0 var(--gold-hi); }
.help-topics a.on::before, .help-results a.on::before { background: var(--gold-hi); border-color: #fff2c2; box-shadow: 0 0 6px rgba(255, 215, 120, .8); }
.help-results { display: flex; flex-direction: column; gap: 2px; }
.help-results small { display: block; font-size: 11px; color: var(--label); text-transform: uppercase; letter-spacing: .08em; }
.help-toc-btn { display: none; }
/* article */
.help-article { min-height: 420px; padding: 22px 28px 20px; }
.help-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .08em; }
.help-crumb svg { width: 16px; height: 16px; color: var(--gold); }
.help-crumb span { color: var(--frame); }
.help-article h2 { margin: 0 0 16px; font-size: 26px; }
.help-body { display: flex; flex-direction: column; gap: 14px; line-height: 1.5; max-width: 760px; }
.help-body p { margin: 0; }
.help-body .lead { font-size: 17px; color: var(--value); }
.help-sub { margin: 6px 0 0; font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.help-link { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(244, 210, 120, .4); text-underline-offset: 3px; }
.help-link:hover { text-decoration-color: var(--gold-hi); }
.help-tip { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--frame-dim); background: linear-gradient(90deg, rgba(240, 190, 90, .1), rgba(240, 190, 90, .02)); box-shadow: inset 3px 0 0 var(--gold); }
.help-tip > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--gold-hi); }
.help-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.help-steps li { position: relative; padding-left: 40px; min-height: 28px; counter-increment: step; }
.help-steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-family: 'Cinzel', serif; font-weight: 800; color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #3d2e19, #140f09 75%); box-shadow: 0 0 0 1px var(--gold);
}
.help-facts { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); margin: 0; border: 1px solid var(--frame-dim); border-radius: 6px; overflow: hidden; }
.help-facts dt, .help-facts dd { margin: 0; padding: 9px 14px; border-top: 1px solid rgba(217, 180, 90, .12); }
.help-facts dt:first-of-type, .help-facts dt:first-of-type + dd { border-top: 0; }
.help-facts dt { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--gold-hi); background: rgba(0, 0, 0, .25); }
.help-facts dt svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.help-table { width: 100%; border-collapse: collapse; border: 1px solid var(--frame-dim); }
.help-table th { text-align: left; padding: 8px 12px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: rgba(0, 0, 0, .3); }
.help-table td { padding: 8px 12px; border-top: 1px solid rgba(217, 180, 90, .12); vertical-align: top; }
.help-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.help-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--frame-dim); }
.help-pager .btn { text-decoration: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mini plateaux des règles */
.mb-pair { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 14px 18px; padding: 16px 12px; border-radius: 6px; background: rgba(0, 0, 0, .25); border: 1px solid var(--frame-dim); }
.mb-arrow { align-self: center; margin-top: -24px; }
.mb-arrow svg { width: 28px; height: 28px; color: var(--gold); }
.mini-board { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mb-grid {
  display: grid; grid-template-columns: repeat(3, 46px); grid-auto-rows: 46px; gap: 4px; padding: 6px; border-radius: 4px;
  background: linear-gradient(135deg, #c9a868, #8a6a32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 0 1px var(--frame);
}
.mb-empty { border-radius: 3px; background: rgba(255, 245, 220, .35); box-shadow: inset 0 0 0 1px rgba(80, 55, 20, .35); }
.mb-card { position: relative; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .5); }
.mb-card.b { background: linear-gradient(160deg, #6d8fe0, #2c4ba3); }
.mb-card.r { background: linear-gradient(160deg, #e07a86, #a52c3d); }
.mb-card i { position: absolute; font-style: normal; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; color: #fff; text-shadow: 0 1px 0 #000, 0 0 3px #000; line-height: 1; }
.mb-card .st { top: 3px; left: 50%; transform: translateX(-50%); }
.mb-card .sb { bottom: 3px; left: 50%; transform: translateX(-50%); }
.mb-card .sl { left: 5px; top: 50%; transform: translateY(-50%); }
.mb-card .sr { right: 5px; top: 50%; transform: translateY(-50%); }
.mb-card.new { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 2px #fff2c2, 0 0 10px rgba(255, 230, 160, .8); }
.mb-card.flip, .mb-card.combo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 2px var(--gold-hi), 0 0 12px rgba(255, 200, 90, .9); }
.mb-card.combo::after { content: 'Combo'; position: absolute; right: -5px; top: -8px; padding: 0 4px; border-radius: 2px; font-size: 9px; font-weight: 800; line-height: 13px; color: #1d1406; background: var(--gold-hi); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.mini-board figcaption { max-width: 170px; text-align: center; font-size: 13px; color: var(--label); }
/* écran étroit : sommaire repliable au-dessus de l'article */
@media (max-width: 980px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .help-toc-btn {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; cursor: pointer; text-align: left;
    border: 1px solid var(--frame); border-radius: 6px; background: linear-gradient(180deg, rgba(255, 230, 170, .06), rgba(0, 0, 0, .3)); font: inherit; font-weight: 700; color: var(--value);
  }
  .help-toc-btn > svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
  .help-toc-btn > svg:last-child { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
  .help-toc-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .help-toc-btn small { display: block; font-size: 11px; color: var(--label); text-transform: uppercase; letter-spacing: .1em; }
  .help-layout.toc-open .help-toc-btn > svg:last-child { transform: rotate(180deg); }
  .help-nav { display: none; position: static; max-height: none; }
  .help-layout.toc-open .help-nav { display: flex; }
  .help-article { padding: 18px 16px; }
  .help-facts { grid-template-columns: minmax(0, 1fr); }
  .help-facts dt { border-top: 1px solid rgba(217, 180, 90, .12); }
  .help-facts dd { border-top: 0; padding-top: 2px; }
  .mb-pair { justify-content: center; padding: 12px 8px; }
  .mb-grid { grid-template-columns: repeat(3, 44px); grid-auto-rows: 44px; }
  .mb-card i { font-size: 13px; }
}
@media (max-width: 560px) {
  .mb-pair { flex-direction: column; align-items: center; }
  .mb-arrow { margin-top: 0; transform: rotate(90deg); }
}

/* ---------- tuiles d'action : aspect de bouton (relief, flèche d'appel, enfoncement au clic) ---------- */
.big-btn {
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 228, 165, .13), rgba(255, 228, 165, .03) 45%, rgba(0, 0, 0, .18)),
    var(--panel-bg);
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .28), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim),
    0 4px 0 #0b0805, 0 4px 0 1px rgba(217, 180, 90, .35), 0 12px 24px rgba(0, 0, 0, .5);
}
.big-btn > span::after {
  content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-left: 8px; vertical-align: -.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2d48a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}
.big-btn:hover, .big-btn:focus-visible {
  transform: translateY(-2px); border-color: var(--gold-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .35), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px rgba(217, 180, 90, .45),
    0 6px 0 #0b0805, 0 6px 0 1px rgba(244, 210, 120, .5), 0 0 22px rgba(244, 200, 100, .3), 0 16px 28px rgba(0, 0, 0, .55);
}
.big-btn:hover > span::after, .big-btn:focus-visible > span::after { transform: translateX(5px); }
.big-btn:active {
  transform: translateY(3px); filter: brightness(.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .2), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px var(--frame-dim),
    0 1px 0 #0b0805, 0 1px 0 1px rgba(217, 180, 90, .35), 0 4px 10px rgba(0, 0, 0, .5);
}
.big-btn.primary {
  background:
    radial-gradient(120% 120% at 100% 50%, rgba(240, 190, 90, .3), transparent 60%),
    linear-gradient(180deg, rgba(255, 228, 165, .15), rgba(0, 0, 0, .18)),
    var(--panel-bg);
}
@media (prefers-reduced-motion: reduce) { .big-btn > span::after { transition: none; } }
@media (max-width: 760px) { .big-btn > span::after { display: none; } }