/* 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 {
  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); }

/* ---------- panneaux : relief, double filet, coins ferrés ---------- */
.panel, .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);
  /* pas de flou d'arrière-plan : le fond est opaque à plus de 90 % (flou invisible) et il serait recalculé
     à chaque image pendant le défilement, pour chaque panneau */
}
.panel::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); }

.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, .tabs button {
  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, .tabs button:hover { color: var(--gold-hi); border-color: var(--frame); }
.tabs a.on, .tabs button.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);
}
/* logo de la barre du haut : l'image telle quelle (fond transparent), sans le dégradé des titres */
/* aucun filtre : Safari (iPhone, iPad, Mac) calcule les ombres portées en basse résolution et le logo devenait flou ;
   l'image a déjà son propre contour sombre */
.brand { display: flex; align-items: center; flex-shrink: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; }
.brand img { display: block; height: 36px; width: auto; }

/* ---------- 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-], .game-chat .badge[class*=role-] { padding: 0 5px; font-size: 10px; }
.chat .badge[class*=role-]::before, .chat .badge[class*=role-]::after, .game-chat .badge[class*=role-]::before, .game-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);
}
/* é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 : table verticale. Main adverse en haut, plateau 3 × 3 en grand au centre (l'illustration
   recadrée sur sa grille, dans un écrin doré), votre main en bas, noms et scores dans deux bandeaux.
   Repère (en cqw, largeur de la table = 100) : bandeau 0–8, main adverse 9–30, écrin 32–143.7 (grille 36–139.7),
   votre main 145.7–167.9, bandeau 169–177. Les cartes des mains sont placées en ligne par game.js (renderHands). */
@media (max-width: 760px) and (orientation: portrait) {
  .stage { padding: 10px 12px; }
  .table {
    width: min(100cqw, 100cqh * 100 / 177); aspect-ratio: 100 / 177;
    background: none; box-shadow: none; border-radius: 0;
  }
  .table::after { display: none; }
  .grid {
    left: 4cqw; top: 32cqw; width: 84cqw; height: 103.7cqw; padding: 4cqw; box-sizing: content-box;
    /* zone de la grille dans board.webp (repère 1540 × 880) : x 460–1079, y 65–830 ; échelle 84 / 619 */
    background: url(assets/ui/board-2k.webp) -58.4cqw -4.82cqw / 209cqw auto no-repeat, #c9a25e;
    border-radius: 3px;
    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 24px rgba(240, 190, 90, .14), 0 14px 34px rgba(0, 0, 0, .7);
  }
  .grid::after { /* coins ferrés de l'écrin */
    content: ''; position: absolute; inset: -9px; pointer-events: none;
    background: var(--corners); background-repeat: no-repeat;
    background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
    filter: drop-shadow(0 0 3px rgba(255, 200, 100, .5));
  }
  .cell .card { --cw: 28cqw; }
  .hand { width: auto; height: auto; }
  #hand-1 { left: 3.5cqw; right: 3.5cqw; top: 9cqw; height: 21cqw; }
  #hand-0 { left: 2cqw; right: 2cqw; top: 145.7cqw; height: 22.2cqw; }
  #hand-1 .card { --cw: 17cqw; }
  #hand-0 .card { --cw: 18cqw; }
  .hand.active .card.playable:hover { transform: translateY(-1.2cqw); }
  .hand .card.selected { transform: translateY(-3cqw) !important; }
  .hand.active::before { inset: -1.2cqw -1cqw; }
  /* bandeaux : nom à gauche, score à droite */
  .pname { top: 1.2cqw; transform: none; max-width: 70cqw; font-size: 3.4cqw; padding: .5cqw 2.4cqw; border-radius: .8cqw; }
  .pname-1 { left: 3.5cqw; right: auto; }
  .pname-0 { top: 170.2cqw; left: 2cqw; }
  .score { width: auto; font-size: 8cqw; top: 0; }
  .score-1 { left: auto; right: 4cqw; }
  .score-0 { top: 169cqw; left: auto; right: 3cqw; }
  .banner { top: 87.9cqw; height: 13cqw; }
}

/* ---------- 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, .tabs button: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));
}
/* table de jeu en fond, fondue 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/hero-table.webp?v=1) 60% 62% / 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 > :is(div, a) { 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 > :first-child { border-left: 0; }
/* case « Bilan » : lien vers les statistiques détaillées */
.summary > a { position: relative; color: inherit; text-decoration: none; transition: background .2s; }
.summary > a em { margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold); opacity: .75; transition: opacity .2s; }
.summary > a:hover { background: rgba(240, 190, 90, .05); }
.summary > a:hover em, .summary > a:focus-visible em { opacity: 1; }
.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 > :is(div, a) { 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; }
}


@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); }
}
/* 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 : la recherche sur toute la largeur, puis les menus en grille régulière (5 à 6 menus et le
   bouton « Achetables ») */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.filters .search-field { grid-column: 1 / -1; min-width: 0; }
@container (max-width: 520px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.filters .buyable-btn { min-height: 0; white-space: nowrap; }
.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); }
/* 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; }
.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); }
/* pastille « en direct » : quelques pulsations (anneau animé en transform/opacity, sans repeindre la page) puis repos,
   relancées quand le compteur change ; une animation infinie empêcherait l'écran de se mettre au repos (batterie) */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #6fd46f; }
.live-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(111, 212, 111, .55); opacity: 0; animation: live-pulse 2.4s ease-out 3; }
@keyframes live-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.75); opacity: 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 img { height: 28px; }
  .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; }
.page-head.row > .stat-strip { margin: 0 0 0 auto; align-self: center; } /* encadré à droite du titre */
.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%; }
  .page-head.row > .stat-strip { margin: 4px 0 0; }
  .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 ---------- */
/* groupe du bas du menu : Soutenir le jeu, puis (équipe) Administration et Monitoring, puis l'Aide */
.nav a[data-route=help] { margin-top: 6px; border-top: 1px solid var(--frame-dim); border-radius: 0 0 5px 5px; padding-top: 12px; }
body.is-staff .nav a[data-route=admin] { margin-top: 6px; border-top: 1px solid var(--frame-dim); border-radius: 0; padding-top: 12px; }
body.is-staff .nav a[data-route=help] { margin-top: 0; border-top-color: transparent; padding-top: 9px; }

/* ---------- signaler un problème (page joueur et onglet Signalements de l'administration) ---------- */
.rp-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .rp-layout { grid-template-columns: minmax(0, 1fr); } }
.rp-kinds { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rp-kinds legend { padding: 0 0 6px; font-size: 14px; color: var(--muted); }
.rp-kind { position: relative; cursor: pointer; }
.rp-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rp-kind span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--frame-dim); background: rgba(0, 0, 0, .22); transition: border-color .15s, background .15s; }
.rp-kind b { color: var(--value); font-size: 15px; }
.rp-kind small { color: var(--label); font-size: 12px; line-height: 1.25; }
.rp-kind:hover span { border-color: var(--frame); }
.rp-kind input:checked + span { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(240, 190, 90, .2), rgba(240, 190, 90, .06)); box-shadow: inset 0 0 0 1px rgba(255, 230, 170, .2), 0 0 12px rgba(244, 200, 100, .15); }
.rp-kind input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.rp-new textarea { width: 100%; resize: vertical; min-height: 130px; }
.rp-count { align-self: flex-end; font-size: 12px; color: var(--label); }
.rp-ctx summary { cursor: pointer; color: var(--label); font-size: 13px; }
.rp-ctx pre { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: rgba(0, 0, 0, .3); border: 1px solid var(--frame-dim); font-size: 12px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto; }
.rp-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-admin { margin-top: 12px; max-height: 640px; overflow-y: auto; padding-right: 4px; }
.rp-item { padding: 10px 12px; border-radius: 7px; border: 1px solid var(--frame-dim); background: rgba(0, 0, 0, .2); display: flex; flex-direction: column; gap: 6px; }
.rp-item.open { border-left: 3px solid #f0b850; }
.rp-item.done { border-left: 3px solid #8fd88f; }
.rp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.rp-head small { margin-left: auto; }
.rp-who { background: none; border: 0; padding: 0; color: var(--gold-hi); font-weight: 700; cursor: pointer; }
.rp-who:hover { text-decoration: underline; }
.rp-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.rp-reply { margin: 0; padding: 6px 9px; border-radius: 6px; background: rgba(143, 216, 143, .08); border: 1px solid rgba(143, 216, 143, .25); font-size: 14px; overflow-wrap: anywhere; }
.rp-close input { flex: 1; min-width: 180px; }
.tag.ok { color: #8fd88f; border-color: rgba(143, 216, 143, .45); }

/* ---------- soutenir le jeu (Buy Me a Coffee) : liseré doré qu'une lueur parcourt toutes les 9 s ---------- */
.sup { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--value); border-radius: 8px; }
.sup-ring { /* le liseré : un fond doré que le panneau intérieur (::after) recouvre à 1,5 px du bord */
  position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit;
  background: linear-gradient(120deg, var(--gold-hi), var(--gold-lo) 30%, var(--gold) 55%, var(--gold-lo) 80%, var(--gold-hi));
}
.sup-ring::before { /* la lueur : un arc lumineux qui fait le tour (rotation seulement, calculée par la carte graphique) */
  content: ''; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; margin: -65% 0 0 -65%; opacity: 0;
  background: conic-gradient(transparent 0 45%, rgba(255, 248, 224, 0) 50%, #fffbea 72%, #fff 76%, rgba(255, 248, 224, 0) 95%, transparent);
}
.sup-sheen { /* reflet qui balaie le panneau pendant le passage de la lueur, comme sur le logo de l'accueil */
  position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 214, .16) 45%, rgba(255, 246, 214, .3) 50%, rgba(255, 246, 214, .16) 55%, transparent);
  transform: translateX(-130%) skewX(-14deg);
}
.sup::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: calc(8px - 2px);
  background: radial-gradient(120% 160% at 0% 50%, rgba(244, 200, 100, .2), transparent 62%), linear-gradient(180deg, #2b2116, #160f09);
}
.sup.run .sup-ring::before, .sup:hover .sup-ring::before { animation: sup-run 2.4s ease-in-out; }
.sup.run .sup-sheen, .sup:hover .sup-sheen { animation: sup-sheen 2.4s ease-in-out; }
.sup:hover .sup-ring::before, .sup:hover .sup-sheen { animation-iteration-count: infinite; }
@keyframes sup-run { 0% { opacity: 0; transform: rotate(0deg); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes sup-sheen { 0%, 25% { transform: translateX(-130%) skewX(-14deg); } 75%, 100% { transform: translateX(330%) skewX(-14deg); } }
.sup-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--gold-hi);
  background: radial-gradient(circle at 35% 30%, rgba(255, 230, 170, .22), rgba(0, 0, 0, .25)); box-shadow: inset 0 0 0 1px var(--frame); }
.sup-ico svg { width: 19px; height: 19px; filter: drop-shadow(0 0 4px var(--glow)); }
.sup-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sup-txt b { font-family: 'Cinzel', serif; font-weight: 800; font-size: 13px; letter-spacing: .04em; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sup-txt small { color: var(--label); font-size: 12px; }
.sup:hover { box-shadow: 0 0 16px rgba(244, 200, 100, .28); }
.sup:active { transform: scale(.985); }
.sup:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* dans le menu latéral : on neutralise le style des liens de page (joyau, fond au survol) */
.nav > * { flex-shrink: 0; } /* menu trop haut pour l'écran : il défile, aucun lien n'est écrasé */
/* une seule ligne, de la hauteur des autres entrées ; #nav : prioritaire sur l'habillage des thèmes FF8 et FF6
   (marge de la main gantée, police pixel) pour que le lien garde la même forme partout */
#nav a.sup { margin: auto 2px 0; padding: 7px 10px; gap: 9px; border: 0; border-radius: 8px; color: var(--value); background: none; font: inherit; line-height: 1.2; text-shadow: none; }
#nav a.sup::before { display: none; }
#nav .sup-ico { width: 22px; height: 22px; background: none; box-shadow: none; }
#nav .sup-ico svg { width: 19px; height: 19px; }
#nav .sup-txt { white-space: nowrap; }
#nav .sup-txt b { font-size: 12.5px; letter-spacing: .05em; }
#nav .sup-txt small { display: none; }
/* page Menu du téléphone : grande carte en tête */
.m-support { margin: 0 0 16px; padding: 14px 14px 14px 16px; border-radius: 12px; }
.m-support::after { border-radius: calc(12px - 2px); }
.m-support .sup-ico { width: 40px; height: 40px; }
.m-support .sup-ico svg { width: 24px; height: 24px; }
.m-support .sup-txt { flex: 1; gap: 3px; }
.m-support .sup-txt b { font-size: 16px; }
.m-support .sup-txt small { font-size: 13px; line-height: 1.3; }
.m-support .ib-go { color: var(--gold); font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .sup .sup-ring::before, .sup .sup-sheen { animation: none !important; } }
/* écrans peu hauts (portable 1366 × 768) : le lien de soutien tient sur une ligne pour que le menu tienne sans défiler */
@media (max-height: 760px) {
  .nav { padding-top: 8px; gap: 1px; }
  .nav a { padding-top: 6px; padding-bottom: 6px; }
  .nav a[data-route=help], body.is-staff .nav a[data-route=admin] { margin-top: 4px; padding-top: 8px; }
  body.is-staff .nav a[data-route=help] { padding-top: 6px; }
  #nav a.sup { padding: 5px 10px; }
}
.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; } }

/* ---------- chat de la partie (joueurs et spectateurs), à droite de la table ---------- */
.game-layer { --gc-w: 320px; }
.game-main { position: relative; flex: 1; min-height: 0; display: flex; }
.game-main > .stage { flex: 1; min-width: 0; }
.chat-toggle { position: relative; display: none; width: 36px; height: 36px; padding: 7px; place-items: center; color: var(--gold); order: 3; }
.chat-toggle svg { width: 100%; height: 100%; display: block; }
.game-layer.has-chat .chat-toggle { display: inline-grid; }
.game-layer.chat-open .chat-toggle { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px rgba(244, 200, 100, .25); }
.gc-unread {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: #b8323f; box-shadow: 0 0 0 2px #120d08;
}
.gc-unread[hidden] { display: none; }
.game-chat {
  display: none; flex-direction: column; width: var(--gc-w); flex: none; min-height: 0;
  background: linear-gradient(180deg, #1c150d, #110c07); border-left: 1px solid var(--frame);
  box-shadow: inset 1px 0 0 rgba(255, 230, 170, .06), -8px 0 24px rgba(0, 0, 0, .35);
}
.game-layer.has-chat.chat-open .game-chat { display: flex; }
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--frame-dim); }
.gc-head h3 { margin: 0; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.gc-head .icon-btn { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }
.gc-head .icon-btn svg { width: 100%; height: 100%; }
.gc-log { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.gc-empty { margin: auto 0; text-align: center; font-size: 14px; }
.gc-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--frame-dim); }
.gc-form input { flex: 1; min-width: 0; }
.gc-form .btn { padding: 6px 12px; }
/* l'écran de fin laisse le chat utilisable (« bien joué ! ») */
.game-layer.has-chat.chat-open .overlay { right: var(--gc-w); }
/* écran moyen ou téléphone : le chat passe par-dessus la table, à droite */
@media (max-width: 1100px) {
  .game-chat { position: absolute; top: 0; right: 0; bottom: 0; z-index: 30; width: min(var(--gc-w), 88vw); }
  .game-layer.has-chat.chat-open .overlay { right: 0; }
}
@media (max-height: 520px) { .chat-toggle { width: 30px; height: 30px; padding: 5px; } }

/* ---------- parties en cours ---------- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.live-card { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.live-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-hi); }
.live-card.choosing .live-status { color: var(--label); }
.live-card.choosing .live-dot { background: var(--gold); }
.live-card.choosing .live-dot::after { animation: none; }
.live-top .tag { display: inline-flex; align-items: center; gap: 5px; }
.live-top .tag svg { width: 14px; height: 14px; color: var(--gold); }
.live-watch { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--label); }
.live-watch svg { width: 18px; height: 18px; color: var(--gold); }
.live-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.live-player { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 4px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--value); }
.live-player b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-player:hover b { color: var(--gold-hi); text-decoration: underline; }
.live-score { display: flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-weight: 800; }
.live-score b { font-size: 38px; line-height: 1; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .6); }
.live-score .s0 { color: #8fb2ff; }
.live-score .s1 { color: #ff9aa6; }
.live-score span { font-size: 24px; color: var(--frame); }
.live-score .vs { font-size: 22px; color: var(--gold); letter-spacing: .1em; }
.live-progress { display: flex; align-items: center; justify-content: center; gap: 5px; }
.live-progress i { width: 18px; height: 6px; border-radius: 3px; background: rgba(217, 180, 90, .16); }
.live-progress i.on { background: linear-gradient(90deg, var(--gold), var(--gold-hi)); box-shadow: 0 0 6px rgba(244, 200, 100, .45); }
.live-progress small { margin-left: 6px; color: var(--label); font-weight: 700; }
.live-meta { list-style: none; margin: 0; padding: 10px 0 0; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--frame-dim); font-size: 14px; color: var(--label); }
.live-meta li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-meta svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.live-card > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }
.live-card > .btn svg { width: 18px; height: 18px; }
.live-mine { align-self: center; margin-top: auto; }
/* lien depuis la page Jouer */
.live-link {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--frame-dim); background: linear-gradient(90deg, rgba(240, 190, 90, .1), transparent); color: var(--value);
}
.live-link svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.live-link span { flex: 1; }
.live-link:hover { border-color: var(--gold); color: var(--gold-hi); }

a.btn { text-decoration: none; }
.game-chat .msg .badge { margin-right: 4px; }

/* barre de la table sur téléphone : « Quitter » réduit à son icône pour laisser la place au tour */
.game-bar .turn { min-width: 0; }
@media (max-width: 760px) {
  .quit-btn span { display: none; }
  .quit-btn { padding: 6px 8px; }
  .gb-left { gap: 8px; }
  .gb-left::after { display: none; }
  .game-bar .turn-box { gap: 8px; }
  .game-bar .turn { font-size: 11px; padding: 4px 8px; }
}
.help-table td:first-child { white-space: nowrap; }

/* en-tête de panneau (titre + boutons) : le titre garde une largeur lisible, les boutons passent dessous si besoin */
.panel > .row.wrap > h2.grow { flex: 1 1 200px; min-width: 0; }
/* classements sur téléphone : colonnes secondaires (guilde, cartes) masquées */
@media (max-width: 560px) {
  .data.rankings th:nth-child(3), .data.rankings td:nth-child(3),
  .data.rankings th:nth-child(7), .data.rankings td:nth-child(7) { display: none; }
  .data.rankings th, .data.rankings td { padding: 7px 5px; }
  .data.rankings th { font-size: 10px; letter-spacing: .03em; }
}
.tile-grid.mini > p { grid-column: 1 / -1; margin: 0; align-self: center; }
/* anneau : délai de grâce d'un adversaire déconnecté */
.gtimer.away .ring-bar { stroke: #8fb2ff; filter: drop-shadow(0 0 3px rgba(140, 180, 255, .6)); }
.gtimer.away b { color: #c9d8ff; }

/* ======================================================================
   Page d'accueil (avant connexion)
   ====================================================================== */
.gate:has(.landing) { display: block; padding: 0; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
.landing {
  position: relative; isolation: isolate; width: 100%; justify-self: stretch; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 44px 24px 24px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(240, 190, 90, .16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(120, 70, 20, .25), transparent 60%),
    linear-gradient(180deg, #17110a, #0b0805 70%);
}
/* ciel de cartes qui dérivent vers le haut, et poussières dorées */
.ld-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 18%, #000 75%); mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 18%, #000 75%); }
.ld-float {
  position: absolute; left: var(--x); bottom: -260px; width: calc(150px * var(--s)); aspect-ratio: 200 / 247; border-radius: 8px;
  /* pas de filtre (ombre floue, luminosité) : sur des cartes animées, la carte graphique le recalculerait à chaque image ;
     l'opacité seule donne le même voile sombre */
  opacity: .26;
  animation: ld-drift var(--d) linear infinite; animation-delay: var(--delay);
}
/* pendant un défilement, le ciel se fige un instant : la carte graphique n'a plus qu'à faire glisser la page */
.landing.scrolling .ld-float, .landing.scrolling .ld-spark { animation-play-state: paused; }
@keyframes ld-drift {
  from { transform: translateY(0) rotate(var(--r)); }
  to { transform: translateY(calc(-100vh - 520px)) rotate(calc(var(--r) * -1)); }
}
.ld-spark {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #ffe7a3; box-shadow: 0 0 8px 2px rgba(255, 210, 120, .7);
  animation: ld-twinkle var(--d) ease-in-out infinite; animation-delay: var(--delay); opacity: 0;
}
@keyframes ld-twinkle { 50% { opacity: .9; transform: translateY(-14px); } }
/* titre */
.ld-hero { text-align: center; max-width: 820px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-kicker { margin: 0; text-wrap: balance; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.ld-title { margin: 0; line-height: 0; }
/* logo : reflet qui balaie les lettres (bande lumineuse découpée à la forme du logo) et étincelles ;
   uniquement transform et opacity, calculés par la carte graphique */
.ld-logo { position: relative; display: inline-block; }
.ld-logo img { display: block; width: min(600px, 88vw); height: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .6)); }
.ld-sheen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url(assets/ui/logo.webp?v=4) center / 100% 100% no-repeat; mask: url(assets/ui/logo.webp?v=4) center / 100% 100% no-repeat;
}
.ld-sheen::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 246, 214, 0) 25%, rgba(255, 246, 214, .85) 50%, rgba(255, 246, 214, 0) 75%, transparent 100%);
  transform: translateX(-110%) skewX(-14deg); animation: ld-sweep 6.5s ease-in-out 1.2s infinite;
}
@keyframes ld-sweep { 0% { transform: translateX(-110%) skewX(-14deg); } 32%, 100% { transform: translateX(330%) skewX(-14deg); } }
.ld-star {
  position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 9%, rgba(255, 236, 180, .9) 14%, transparent 34%),
    linear-gradient(0deg, transparent 44%, rgba(255, 244, 210, .95) 50%, transparent 56%),
    linear-gradient(90deg, transparent 44%, rgba(255, 244, 210, .95) 50%, transparent 56%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: ld-star 5s ease-in-out var(--delay) infinite;
}
@keyframes ld-star { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 7%, 11% { opacity: 1; transform: scale(1) rotate(45deg); } 20% { opacity: 0; transform: scale(.4) rotate(90deg); } }
.ld-hero::after { /* filet effilé + losange */
  content: ''; width: min(420px, 80%); height: 9px; margin-top: 4px;
  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;
  order: 2;
}
.ld-tag { margin: 0; font-size: 19px; color: var(--label); order: 3; text-wrap: balance; }
.ld-stats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; order: 4; color: var(--label); font-size: 15px; }
.ld-stats li { display: inline-flex; align-items: center; gap: 6px; }
.ld-stats li[hidden] { display: none; }
.ld-stats b { color: var(--value); font-size: 18px; }
.ld-stats li + li::before { content: ''; width: 5px; height: 5px; margin-right: 16px; transform: rotate(45deg); background: var(--gold); opacity: .6; }
/* plateau de démonstration + panneau */
.ld-main { width: min(900px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ld-demo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ld-board {
  position: relative; width: min(100%, 350px); padding: 13px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 40%, rgba(240, 210, 150, .28), transparent 70%), linear-gradient(135deg, #c9a868, #7d5d2b);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45), inset 0 0 40px rgba(60, 35, 10, .55), 0 0 0 1px #2a1f12, 0 0 0 3px var(--frame), 0 0 0 5px #120d08, 0 0 0 6px var(--frame-dim), 0 24px 50px rgba(0, 0, 0, .7), 0 0 40px rgba(240, 190, 90, .15);
  transform: perspective(1100px) rotateX(8deg); transform-origin: 50% 100%;
}
.ld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ld-cell { aspect-ratio: 200 / 247; border-radius: 6px; background: rgba(255, 246, 220, .3); box-shadow: inset 0 0 0 1px rgba(90, 60, 20, .35), inset 0 0 18px rgba(120, 80, 30, .25); perspective: 600px; }
.ld-card { width: 100%; height: 100%; display: block; border-radius: 6px; box-shadow: 0 6px 12px rgba(0, 0, 0, .5); }
.ld-card.drop { animation: ld-drop .38s cubic-bezier(.2, .8, .3, 1.15); }
@keyframes ld-drop { from { transform: translateY(-46px) scale(1.18); opacity: 0; } }
.ld-card.flip { animation: ld-flip .46s ease-in-out; }
@keyframes ld-flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(1.08); } 100% { transform: rotateY(0); } }
.ld-card.leave { transition: opacity .45s, transform .45s; opacity: 0; transform: scale(.85); }
.ld-score { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 4px 16px; border-radius: 20px;
  font-family: 'Cinzel', serif; font-weight: 800; background: linear-gradient(180deg, #241b11, #120d08); box-shadow: 0 0 0 1px var(--frame), 0 6px 14px rgba(0, 0, 0, .6); }
.ld-score b { font-size: 22px; line-height: 1; transition: transform .2s; }
.ld-score .s0 { color: #8fb2ff; } .ld-score .s1 { color: #ff9aa6; }
.ld-score span { color: var(--frame); }
.ld-board.done .ld-score { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 22px rgba(255, 210, 120, .6); }
.ld-banner { position: absolute; left: 50%; top: 50%; width: 70%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .8)); }
.ld-banner.show { animation: ld-banner 1s ease-out; }
@keyframes ld-banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
.ld-caption { margin: 30px 0 0; max-width: 380px; text-align: center; font-size: 14px; color: var(--label); }
.ld-panel { margin: 0; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.ld-panel .tabs { margin: 0; }
.ld-panel .tabs button { flex: 1; }
.ld-panel form, .ld-panel .list { margin: 0; }
.ld-panel .btn.primary { padding-top: 10px; padding-bottom: 10px; font-size: 17px; }
.ld-panel-title { margin: 0; font-size: 22px; }
.ld-back { align-self: center; }
/* points forts */
.ld-features { list-style: none; margin: 10px 0 0; padding: 0; width: min(980px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ld-features li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px; border-radius: 6px; border: 1px solid var(--frame-dim); background: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .3)); }
.ld-features svg { width: 28px; height: 28px; flex: none; color: var(--gold); }
.ld-features b { display: block; font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .06em; color: var(--gold-hi); }
.ld-features span { font-size: 14px; color: var(--label); line-height: 1.35; }
/* mention d'hommage */
.ld-legal { margin-top: auto; width: min(820px, 100%); padding-top: 18px; border-top: 1px solid rgba(201, 158, 82, .15); text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); opacity: .85; }
.ld-legal p { margin: 0 0 4px; }
.ld-legal b { font-weight: 700; color: var(--label); }
/* entrée en scène */
.ld-hero, .ld-main, .ld-features, .ld-legal { animation: ld-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.ld-main { animation-delay: .15s; } .ld-features { animation-delay: .3s; } .ld-legal { animation-delay: .45s; }
@keyframes ld-in { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 900px) {
  .ld-main { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .ld-panel { order: -1; }
  .ld-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .landing { padding: 34px 16px 22px; gap: 26px; }
  .ld-kicker { font-size: 11px; letter-spacing: .2em; }
  .ld-tag { font-size: 16px; }
  .ld-panel { padding: 20px 18px; }
  .ld-features { grid-template-columns: minmax(0, 1fr); }
  .ld-float { width: calc(110px * var(--s)); }
}
@media (prefers-reduced-motion: reduce) {
  .ld-float, .ld-spark, .ld-hero, .ld-main, .ld-features, .ld-legal, .ld-sheen::before, .ld-star { animation: none; }
  .ld-spark { opacity: .5; }
}
.ld-reassure { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- accueil : choix du pseudo (emplacements façon sauvegarde de RPG) ---------- */
.ld-select { display: none; }
.landing.select .ld-main, .landing.select .ld-features { display: none; }
.landing.select .ld-select { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(1000px, 100%); }
.landing.select .ld-logo img { width: min(400px, 72vw); }
.landing.select .ld-stats, .landing.select .ld-tag { display: none; }
.ps-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ps-head h2 {
  margin: 0; font-family: 'Cinzel', serif; font-size: 30px; font-weight: 800; 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 10px rgba(240, 180, 80, .22));
}
.ps-intro { margin: 0; max-width: 520px; color: var(--label); text-wrap: balance; }
.ps-slots { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ps-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 360px; padding: 34px 20px 22px;
  font: inherit; color: var(--value); text-align: center; cursor: pointer; border-radius: 8px; border: 1px solid var(--frame);
  background: radial-gradient(ellipse at 50% 0%, rgba(240, 190, 90, .14), transparent 65%), var(--panel-bg);
  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), 0 4px 0 #0b0805, 0 14px 30px rgba(0, 0, 0, .55);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  animation: ps-in .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * .1s + .1s);
}
@keyframes ps-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.ps-slot::before { content: ''; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; background: var(--corners); background-repeat: no-repeat; }
button.ps-slot:not(:disabled):hover, button.ps-slot:not(:disabled):focus-visible {
  transform: translateY(-6px); border-color: var(--gold-hi); outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 3px rgba(12, 9, 5, .85), inset 0 0 0 4px rgba(217, 180, 90, .5), 0 10px 0 #0b0805, 0 0 30px rgba(244, 200, 100, .35), 0 22px 40px rgba(0, 0, 0, .6);
}
.ps-num {
  position: absolute; top: 12px; left: 14px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-family: 'Cinzel', serif; font-weight: 800; font-size: 14px; color: var(--gold-hi); background: radial-gradient(circle at 35% 30%, #3d2e19, #140f09 75%); box-shadow: 0 0 0 1px var(--gold);
}
.ps-slot .avatar.xl { --s: 104px; margin-top: 2px; box-shadow: 0 0 0 3px #120d08, 0 0 0 5px var(--gold), 0 0 22px rgba(240, 190, 90, .4), 0 8px 18px rgba(0, 0, 0, .6); transition: transform .25s; }
button.ps-slot:hover .avatar.xl { transform: scale(1.05); }
.ps-name { display: inline-flex; align-items: center; gap: 8px; font-family: 'Cinzel', serif; font-size: 22px; font-weight: 800; letter-spacing: .03em; color: var(--gold-hi); }
.ps-sub { font-size: 14px; color: var(--label); }
.ps-sub b { color: var(--gold); }
.ps-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 4px; border-top: 1px solid var(--frame-dim); border-bottom: 1px solid var(--frame-dim); }
.ps-stats > span { display: flex; flex-direction: column; padding: 8px 4px; }
.ps-stats > span + span { border-left: 1px solid rgba(201, 158, 82, .16); }
.ps-stats small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.ps-stats b { font-size: 17px; color: var(--value); }
.ps-seen { color: var(--muted); font-size: 13px; }
.ps-go { margin-top: auto; font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); transition: letter-spacing .2s, color .2s; }
button.ps-slot:hover .ps-go { color: var(--gold-hi); letter-spacing: .18em; }
.ps-slot.chosen { transform: translateY(-6px) scale(1.04); border-color: var(--gold-hi); box-shadow: 0 0 40px rgba(255, 210, 120, .6); }
/* emplacement libre */
.ps-slot.empty { justify-content: center; border-style: dashed; border-color: var(--frame-dim); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 30px rgba(0, 0, 0, .4); }
.ps-slot.empty::before { display: none; }
.ps-plus { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; font-size: 40px; font-weight: 300; color: var(--gold); border: 1px dashed var(--frame); transition: transform .2s, color .2s; }
button.ps-slot.empty:hover { border-color: var(--gold); }
button.ps-slot.empty:hover .ps-plus { transform: rotate(90deg); color: var(--gold-hi); }
.ps-slot.empty .ps-name { font-size: 18px; color: var(--label); }
.ps-slot.empty.open { cursor: default; border-style: solid; border-color: var(--frame); background: radial-gradient(ellipse at 50% 0%, rgba(240, 190, 90, .14), transparent 65%), var(--panel-bg); }
.ps-slot.empty.open .ps-name { color: var(--gold-hi); }
.ps-slot form, .ps-slot.open input { width: 100%; }
.ps-slot.open .btn { width: 100%; }
.ps-slot.banned { opacity: .55; cursor: not-allowed; filter: grayscale(.6); }
.ps-slot.banned .ps-seen { color: #f2a0a0; }
/* sortie vers le jeu */
.landing.leaving > * { transition: opacity .4s ease, transform .4s ease; opacity: 0; transform: scale(1.03); }
@media (max-width: 860px) {
  .ps-slots { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .ps-slot { min-height: 0; padding: 26px 18px 18px; }
  .ps-slot.empty:not(.open) {
    display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
    text-align: left; padding: 14px 16px 14px 56px;
  }
  .ps-slot.empty:not(.open) .ps-num { top: 50%; transform: translateY(-50%); }
  .ps-slot.empty:not(.open) .ps-plus { grid-row: 1 / 3; width: 46px; height: 46px; font-size: 26px; }
  .ps-slot.empty:not(.open) .ps-name { font-size: 16px; align-self: end; }
  .ps-slot.empty:not(.open) .ps-sub { align-self: start; }
  .ps-head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ps-slot { animation: none; } }

/* ---------- options : choix du thème (aperçus aux couleurs fixes de chaque thème, jamais recolorés) ---------- */
.theme-picks { display: grid; gap: 10px; margin-top: 10px; }
.theme-pick {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; text-align: left;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.theme-pick:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.theme-pick.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 14px var(--line); }
.theme-pick.on .tp-txt b::after { content: ' ✓'; color: var(--gold-hi); }
.tp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-txt b { font-size: 16px; }
.tp-txt small { color: var(--muted); line-height: 1.35; }
.tp-win { position: relative; flex: none; width: 92px; height: 62px; padding: 18px 9px 0; display: flex; flex-direction: column; gap: 6px; }
.tp-tab { position: absolute; top: 5px; left: 8px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 0 4px; line-height: 11px; }
.tp-line { height: 4px; border-radius: 2px; width: 100%; }
.tp-line.short { width: 60%; }
.tp-btn { position: absolute; right: 8px; bottom: 7px; width: 26px; height: 9px; border-radius: 3px; }
[data-theme-id="classic"] .tp-win { border-radius: 5px; background: linear-gradient(180deg, #2a2115, #140f09); box-shadow: inset 0 0 0 1px #c99e52, inset 0 0 0 3px #120d08, inset 0 0 0 4px rgba(201, 158, 82, .35); }
[data-theme-id="classic"] .tp-tab { color: #f2d48a; }
[data-theme-id="classic"] .tp-line { background: rgba(242, 212, 138, .55); }
[data-theme-id="classic"] .tp-btn { background: linear-gradient(180deg, #f6dc96, #c8973e); }
[data-theme-id="ff8"] .tp-win { border-radius: 2px; background: linear-gradient(135deg, #6c7080, #2c2e38 80%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(0, 0, 0, .55), 0 0 0 1px #15161b; }
[data-theme-id="ff8"] .tp-tab { top: 4px; color: #e9ebf0; background: linear-gradient(180deg, #7d8191, #4a4d5a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); text-shadow: 1px 1px 0 #000; }
[data-theme-id="ff8"] .tp-line { background: rgba(236, 238, 243, .7); }
[data-theme-id="ff8"] .tp-btn { background: linear-gradient(180deg, #d9dce4, #8d92a2); }
[data-theme-id="ff6"] .tp-win { border-radius: 6px; background: linear-gradient(180deg, #5466d6, #27318f 50%, #121863); box-shadow: inset 0 0 0 2px #e6e8f0, inset 0 0 0 3px #59609c, 0 0 0 1px #1a1a2e; }
[data-theme-id="ff6"] .tp-tab { color: #fff; text-shadow: 1px 1px 0 #10133a; font-family: 'VT323', monospace; font-size: 12px; letter-spacing: .04em; }
[data-theme-id="ff6"] .tp-line { background: rgba(255, 255, 255, .8); border-radius: 0; }
[data-theme-id="ff6"] .tp-btn { background: #9fc4ff; border-radius: 2px; }

/* ---------- monitoring (administrateurs) ---------- */
/* voyants : vert / orange / rouge, couleurs de sens identiques dans tous les thèmes */
.mon-status { --lv: #6fd46f; display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--lv); border-radius: 6px; background: var(--panel2); }
.mon-status.warn { --lv: #f0b850; }
.mon-status.bad { --lv: #ff6170; }
.mon-status > b { font-size: 18px; color: var(--lv); }
.mon-health { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mon-health li { --lv: #6fd46f; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.mon-health li.warn { --lv: #f0b850; }
.mon-health li.bad { --lv: #ff6170; }
.mon-health i { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--lv); box-shadow: 0 0 8px var(--lv); }
.mon-health span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--label); }
.mon-health b { color: var(--value); font-variant-numeric: tabular-nums; }
.mon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.mon-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 10px; }
.mon-facts dt { color: var(--label); }
.mon-facts dd { margin: 0; color: var(--value); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mon-spark { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; margin-top: 8px; font-size: 14px; }
.mon-spark > span { color: var(--label); }
.mon-spark svg { width: 100%; height: 30px; overflow: visible; }
.mon-spark polyline { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.mon-spark small { color: var(--muted); white-space: nowrap; }
.mon-spark small.muted { grid-column: 2 / -1; white-space: normal; }
.mon-errors { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.mon-errors li { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; background: rgba(0, 0, 0, .18); }
.mon-errors summary { cursor: pointer; overflow-wrap: anywhere; color: var(--ink); }
.mon-errors time { color: var(--red); font-variant-numeric: tabular-nums; margin-right: 6px; }
.mon-errors pre { margin: 8px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--muted); max-height: 220px; overflow: auto; }
@media (max-width: 560px) {
  .mon-facts { grid-template-columns: 1fr; gap: 0 0; }
  .mon-facts dd { margin-bottom: 6px; }
  .mon-spark { grid-template-columns: 1fr auto; }
  .mon-spark svg { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- administration : encadré « Joueurs » ---------- */
.adm-tools { align-items: center; margin-bottom: 6px; }
.adm-tools .search-field { min-width: min(100%, 260px); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-weight: 600; }
.chip b { color: var(--value); margin-left: 3px; }
.chip:hover { border-color: var(--line-hi); color: var(--ink); }
.chip.on { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold) inset; }
.adm-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 6px; max-height: 520px; overflow-y: auto; }
.adm-player {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'av name flags' 'av state flags';
  align-items: center; column-gap: 10px; padding: 6px 10px; text-align: left; border-radius: 6px;
  border: 1px solid var(--frame-dim); background: rgba(0, 0, 0, .18); color: var(--ink);
}
.adm-player:hover { border-color: var(--line-hi); background: var(--panel2); }
.adm-player > .avatar { grid-area: av; }
.adm-name { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; }
.adm-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-name small { flex: none; color: var(--label); }
.adm-state { grid-area: state; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-player.on .adm-state { color: var(--green); }
.adm-state .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.adm-flags { grid-area: flags; display: flex; align-items: center; gap: 6px; }
.tag.bad { color: var(--red); border-color: rgba(255, 97, 112, .5); }
.tag.warn { color: #f0b850; border-color: rgba(240, 184, 80, .5); }
.adm-more, .adm-empty { grid-column: 1 / -1; text-align: center; padding: 6px; }
/* onglets de la page Administration, listes à hauteur fixe (la page garde sa taille quel que soit le contenu) */
.adm-tabs { margin: 0 0 16px; }
.adm-tabs button { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; }
.adm-tabs button small { font-size: 12px; font-weight: 600; opacity: .75; }
.adm-modbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 8px 12px; margin-bottom: 12px; border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.adm-box h2 small { font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px; }
.adm-scroll { list-style: none; margin: 12px 0 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.adm-scroll > li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.adm-scroll > li .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-scroll p { margin: 0; overflow-wrap: anywhere; }
.adm-scroll .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-scroll .btn { flex: none; }
.adm-quiz { display: flex; flex-direction: column; gap: 12px; }
.adm-cats { max-height: 220px; overflow-y: auto; padding: 2px; }
.adm-quiz-go { align-items: center; }
.field.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.field.inline input[type=number] { width: 76px; }
.adm-addq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 12px; }
@container (max-width: 640px) { .adm-addq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .adm-addq { grid-template-columns: minmax(0, 1fr); } .adm-scroll, .adm-list { max-height: 60vh; } }

/* ---------- options : application installable ---------- */
.app-howto { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .18); color: var(--label); }
.app-howto b { color: var(--gold-hi); font-weight: 700; }
.notify-cats { margin: 4px 0 0 28px; }
.notify-cats .check:has(input:disabled) { opacity: .5; }

/* ---------- statistiques ---------- */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 22px; align-items: start; }
.st-balance { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.st-balance i { min-width: 0; }
.st-balance .w, .st-legend .w::before { background: var(--green); }
.st-balance .d, .st-legend .d::before { background: var(--bronze); }
.st-balance .l, .st-legend .l::before { background: var(--red); }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 14px; font-size: 14px; color: var(--label); }
.st-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.st-facts { gap: 6px 14px; }
.st-activity { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding: 4px 0; border-bottom: 1px solid var(--frame-dim); }
.st-activity i { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); opacity: .85; }
.st-activity i:hover { opacity: 1; }
.st-axis { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.st-axis span:nth-child(2) { color: var(--label); font-weight: 600; }
.st-meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-meters.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 22px; }
.st-meter { display: grid; grid-template-columns: minmax(84px, 9em) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.st-label { color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); overflow: hidden; }
.st-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.st-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; min-width: 64px; }
.st-val b { color: var(--value); }
.st-val small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-rec { font-variant-numeric: tabular-nums; color: var(--muted); }
.st-rec .w { color: var(--green); } .st-rec .d { color: var(--bronze); } .st-rec .l { color: var(--red); }
.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.st-cards figure { margin: 0; text-align: center; }
.st-cards figcaption { font-size: 12px; color: var(--muted); margin-top: 2px; }
.st-total { margin: 0 0 12px; font-size: 16px; }
.st-total b { font-size: 22px; color: var(--value); }
.st-cards + .small-note { margin-top: 12px; }

/* ---------- bonus de connexion ---------- */
.daily-track { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.daily-track li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 9px; min-width: 0;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .22); text-align: center;
}
.daily-track small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--label); white-space: nowrap; }
.daily-track li.today { border-color: var(--gold); background: rgba(240, 190, 90, .1); box-shadow: 0 0 12px rgba(240, 190, 90, .25), inset 0 0 0 1px rgba(255, 230, 170, .15); }
.daily-track li.today small { color: var(--gold-hi); }
.daily-track li.done { opacity: .55; }
.daily-track li:last-child:not(.done) { border-color: rgba(240, 190, 90, .45); }
.db-gain { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 13px; color: var(--value); white-space: nowrap; }
.db-gain svg { width: 13px; height: 13px; flex: none; color: var(--gold); }
.db-gain.is-card { color: var(--gold-hi); }
.db-check { position: absolute; top: -7px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 800; color: #10200f; background: var(--green); }
.db-result { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 10px 12px; border-radius: 6px; background: rgba(143, 216, 143, .08); border: 1px solid rgba(143, 216, 143, .3); animation: pop-in .3s ease-out; }
.db-result p { margin: 0; }
.db-card { width: 84px; flex: none; }
.hero-gift { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border: 1px solid var(--gold); border-radius: 999px;
  background: rgba(240, 190, 90, .12); color: var(--gold-hi); font: inherit; font-weight: 700; cursor: pointer; }
.hero-gift svg { width: 16px; height: 16px; }
.hero-gift:hover { background: rgba(240, 190, 90, .22); }
@media (max-width: 480px) {
  .daily-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daily-track li:last-child { grid-column: span 2; }
}

/* ---------- quêtes ---------- */
.btn.small { padding: 5px 12px; font-size: 14px; min-height: 0; }
.quest-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 26px; }
@container (min-width: 760px) { .quest-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quest-cols h3.sub small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.quests { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.quest { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 9px 12px;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .2); }
.quest.ready { border-color: var(--gold); background: rgba(240, 190, 90, .08); box-shadow: 0 0 10px rgba(240, 190, 90, .15); }
.quest.claimed { opacity: .55; }
.q-main { display: grid; gap: 6px; min-width: 0; }
.q-label { color: var(--value); font-weight: 600; line-height: 1.25; }
.q-bar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); transition: width .4s; }
.quest.claimed .q-bar i { background: var(--green); }
.q-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.q-side small { color: var(--muted); font-variant-numeric: tabular-nums; }
.q-reward { display: flex; gap: 8px; }
.q-reward span { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--value); white-space: nowrap; }
.q-reward svg { width: 13px; height: 13px; color: var(--gold); }
.q-done { font-size: 13px; font-weight: 700; color: var(--green); }
@container (max-width: 420px) {
  .quest { grid-template-columns: minmax(0, 1fr); }
  .q-side { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- défis FF8 ---------- */
.npc-hand .pick-slots { margin: 0; }
.npc-hand-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; }
.npc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.npc {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 16px;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: var(--panel-bg);
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), 0 6px 18px rgba(0, 0, 0, .35);
}
.npc.next { border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 190, 90, .22), inset 0 1px 0 rgba(255, 230, 170, .12); }
.npc.locked { opacity: .5; }
.npc.locked .npc-portrait { filter: grayscale(1) brightness(.6); }
.npc-portrait {
  width: 76px; height: 76px; border-radius: 50%; background-size: 175%; background-position: 50% 28%; background-color: #0e0a06;
  border: 2px solid var(--frame); box-shadow: 0 0 0 3px rgba(12, 9, 5, .85), 0 4px 12px rgba(0, 0, 0, .5);
}
.npc.beaten .npc-portrait { border-color: var(--green); }
.npc-body { min-width: 0; }
.npc-body h3 { margin: 0 0 4px; font-family: 'Cinzel', serif; font-size: 19px; color: var(--value); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.npc-body h3 small { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; color: var(--label); letter-spacing: .04em; }
.npc-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--frame); font-size: 13px; color: var(--gold); align-self: center; }
.npc-quote { margin: 0 0 6px; color: var(--muted); font-style: italic; line-height: 1.35; }
.npc-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--label); align-items: center; }
.npc-meta .tag.lvl-easy { color: var(--green); border-color: rgba(143, 216, 143, .4); }
.npc-meta .tag.lvl-normal { color: var(--gold-hi); border-color: var(--frame); }
.npc-meta .tag.lvl-hard { color: #ff9aa3; border-color: rgba(255, 97, 112, .45); }
.npc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 170px; }
.npc-reward { font-size: 14px; color: var(--label); }
.npc-reward b { color: var(--gold-hi); }
.npc-won { font-weight: 800; color: var(--green); }
.npc-daily { color: var(--gold-hi); font-weight: 600; }
.npc-lock { font-size: 14px; color: var(--muted); }
@container (max-width: 640px) {
  .npc { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .npc-portrait { width: 56px; height: 56px; }
  .npc-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; min-width: 0; }
  .npc-hand-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}
.st-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.st-npc { font-size: 15px; color: var(--label); }
.st-npc a { color: var(--gold-hi); }
.st-npc b { color: var(--value); font-size: 18px; }

/* ---------- zones sûres (iPhone en application installée : coins arrondis, encoche, barre d'accueil) ----------
   L'application s'étend sur tout l'écran (barre d'état translucide) : l'en-tête remonte sous l'heure et la batterie, le
   chat descend jusqu'à la barre d'accueil, et ce sont les contenus qui s'écartent des bords, pas les fonds.
   env(safe-area-inset-*) vaut 0 partout ailleurs (ordinateur, Android, navigateur classique) : rien n'y change. */
/* (les colonnes du menu et du chat s'élargissent de la marge de l'encoche : leur contenu garde sa place) */
.app { grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr); grid-template-columns: calc(210px + env(safe-area-inset-left)) minmax(0, 1fr) calc(340px + env(safe-area-inset-right)); }
@media (max-width: 1180px) { .app { grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) auto; grid-template-columns: calc(200px + env(safe-area-inset-left)) minmax(0, 1fr); } }
@media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } }
.topbar { padding-top: env(safe-area-inset-top); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.nav { padding-left: max(8px, env(safe-area-inset-left)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.main { padding-right: max(36px, env(safe-area-inset-right)); }
.chat { padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 1180px) { .chat { padding-left: env(safe-area-inset-left); } }
@media (max-width: 760px) {
  .topbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .nav { top: calc(56px + env(safe-area-inset-top)); left: 0; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* en-tête du téléphone : aplat net, sans ombre floue ni reflet */
  .topbar { background: linear-gradient(180deg, #1b140c, #140f09); box-shadow: 0 1px 0 rgba(0, 0, 0, .85); }
  .topbar::after { display: none; }
}
/* table de jeu : fond plein écran, contenus à l'abri ; le haut prolonge la barre de jeu sous l'heure et la batterie */
.game-layer { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); bottom: auto; height: var(--app-h, 100%); }
.game-layer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #221a11; pointer-events: none; }
.gate { padding-top: max(24px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.gate:has(.landing) { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.modal-back { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.toasts { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* ---------- version téléphone : comme une application (onglets en bas, chat plein écran, page Menu) ----------
   body.m-app est posé par mobile.js sur téléphone (portrait, et paysage tactile). Ordinateur et tablette : inchangés. */
.tabbar, .m-only { display: none; }
.bell-btn { position: relative; order: 2; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 7px; color: var(--gold); }
.bell-btn svg { width: 100%; height: 100%; display: block; }
.bell-badge, .tab-badge {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #140f09; pointer-events: none;
}
.bell-badge[hidden], .tab-badge[hidden] { display: none; }
.tab-badge.dot { min-width: 0; width: 10px; height: 10px; padding: 0; top: -1px; right: -3px; }

body.m-app { -webkit-tap-highlight-color: transparent; }
body.m-app:has(#gate.hidden) { overflow: hidden; } /* en jeu, seuls les contenus défilent, jamais la page (l'accueil, lui, défile) */
body.m-app a, body.m-app button, body.m-app label, body.m-app select, body.m-app input { touch-action: manipulation; }
body.m-app .app {
  height: var(--app-h, 100%);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: calc(52px + env(safe-area-inset-top)) minmax(0, 1fr) auto;
  grid-template-areas: 'top' 'main' 'tabs';
}
body.m-app .nav, body.m-app .nav-toggle, body.m-app .me-chip, body.m-app .online-pill, body.m-app .hud-right::before, body.m-app .bell-btn { display: none; }
body.m-app .main { overscroll-behavior: contain; padding-bottom: 28px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
/* en-tête net : aplat et un seul filet opaque (un filet doré semi-transparent doublé d'une ombre paraissait flou) */
body.m-app .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); background: #17110a; border-bottom: 1px solid #4a3a22; box-shadow: none; }
body.m-app .topbar::after { display: none; }
body.m-app .toasts { bottom: calc(70px + env(safe-area-inset-bottom)); }

/* barre d'onglets */
body.m-app .tabbar {
  grid-area: tabs; position: relative; z-index: 5; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  /* les libellés peuvent descendre un peu dans la zone de la barre d'accueil (comme les onglets d'iOS) */
  padding: 0 env(safe-area-inset-right) max(4px, calc(env(safe-area-inset-bottom) - 14px)) env(safe-area-inset-left);
  background: #17110a; border-top: 1px solid #4a3a22; box-shadow: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; min-width: 0;
  color: var(--label); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
}
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-ico { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--bronze); transition: transform .12s, color .15s; }
.tab-ico svg { width: 23px; height: 23px; display: block; }
.tab .avatar.tabav { --s: 23px; margin: 0; box-shadow: 0 0 0 1px #120d08, 0 0 0 2px var(--bronze); }
.tab.on { color: var(--gold-hi); }
.tab.on .tab-ico { color: var(--gold-hi); filter: drop-shadow(0 0 5px var(--glow)); }
.tab.on .avatar.tabav { box-shadow: 0 0 0 1px #120d08, 0 0 0 2px var(--gold-hi), 0 0 9px var(--glow); }
.tab.on::before { /* filet doré au-dessus de l'onglet ouvert */
  content: ''; position: absolute; top: -1px; left: 50%; width: 34px; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); box-shadow: 0 0 8px var(--glow);
}
.tab:active .tab-ico { transform: scale(.88); }

/* chat plein écran (onglet « Chat ») : le panneau prend la place des pages ; replié ou non, tout est affiché */
body.m-app .chat { display: none; }
body.m-app.chat-view .main { display: none; }
body.m-app.chat-view .chat { display: flex; grid-area: main; max-height: none; border: 0; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); box-shadow: none; }
body.m-app .chat::before, body.m-app .chat [data-act=fold] { display: none; }
body.m-app .chat.folded .chat-log { display: flex; }
body.m-app .chat.folded .chat-form { display: block; }
body.m-app .chat.folded .online-list:not([hidden]) { display: block; }
body.m-app .chat-head { padding: 8px 10px; gap: 8px; }
body.m-app .chat-head .icon-btn { min-width: 38px; height: 38px; }
body.m-app .chat-tabs button { padding: 7px 12px; }
body.m-app .chat-log { padding: 10px 14px; }
body.m-app .chat-form { padding: 8px 10px; }
body.m-app .chat-form input { height: 44px; border-radius: 22px; padding: 0 16px; }

/* page Menu */
.m-me {
  display: grid; gap: 12px; padding: 14px; margin-bottom: 20px; border: 1px solid var(--frame-dim); border-radius: 8px;
  background: var(--panel-bg); box-shadow: inset 0 1px 0 rgba(255, 230, 170, .08), 0 6px 18px rgba(0, 0, 0, .35);
}
.m-me-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.m-me-head .avatar.lg { --s: 58px; }
.m-me-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-me-txt b { font-family: 'Cinzel', serif; font-size: 20px; color: var(--value); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-me-txt small { color: var(--label); font-size: 14px; line-height: 1.25; }
.m-purse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 12px; border-top: 1px solid var(--frame-dim); }
.m-purse span { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.m-purse span + span { border-left: 1px solid var(--frame-dim); }
.m-purse svg { width: 18px; height: 18px; color: var(--gold); }
.m-purse b { font-size: 17px; font-weight: 800; color: var(--value); font-variant-numeric: tabular-nums; }
.m-purse small { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.m-group { margin-bottom: 20px; }
.m-group h2 { margin: 0 0 8px 2px; font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .m-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.m-tile {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; min-width: 0;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .22);
  color: var(--value); text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.15;
}
.m-tile:active, .m-row:active, .inbox-row:not(:disabled):active { background: rgba(240, 190, 90, .14); border-color: var(--gold); }
.m-ico, .ib-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--frame-dim); background: rgba(0, 0, 0, .25); }
.m-ico svg, .ib-ico svg { width: 20px; height: 20px; }
.m-list { border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .22); overflow: hidden; }
.m-list > * + * { border-top: 1px solid var(--frame-dim); }
.m-switch, .m-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 14px;
  background: none; border: 0; border-radius: 0; color: var(--value); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.m-row.danger { color: #f2a0a0; }
.m-switch input {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 48px; height: 28px; padding: 0; margin: 0; border-radius: 14px;
  background: #2a2016; border: 1px solid var(--frame-dim); transition: background .2s, border-color .2s; cursor: pointer;
}
.m-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #cdbb94; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: transform .2s; }
.m-switch input:checked { background: linear-gradient(180deg, #e9c878, #a67c32); border-color: var(--gold); }
.m-switch input:checked::after { transform: translateX(20px); background: #fff8e0; }
.ib-go { flex: none; color: var(--bronze); font-size: 24px; line-height: 1; }

/* notifications */
.inbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.inbox-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 12px;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .2);
  color: var(--value); font: inherit; text-align: left; cursor: pointer;
}
.inbox-row:disabled { cursor: default; color: var(--value); opacity: 1; }
.inbox-row.new { border-color: var(--frame); background: rgba(240, 190, 90, .07); }
.inbox-row.new .ib-txt small::before { content: 'Nouveau · '; color: var(--gold-hi); font-weight: 700; }
.inbox-row.todo { border-color: var(--gold); background: rgba(240, 190, 90, .1); box-shadow: 0 0 10px rgba(240, 190, 90, .15); }
.ib-ico.k-warn { color: #ff9aa3; border-color: rgba(255, 97, 112, .45); }
.ib-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.3; overflow-wrap: anywhere; }
.ib-txt b { color: var(--gold-hi); }
.ib-txt small { color: var(--muted); font-size: 13px; }

/* Jouer : les autres façons de jouer, en rangée de raccourcis */
body.m-app .m-only { display: grid; }
.play-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: -10px 0 18px; }
.play-modes a, .play-modes button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 66px; padding: 8px 4px;
  border: 1px solid var(--frame-dim); border-radius: 6px; background: rgba(0, 0, 0, .22);
  color: var(--value); text-decoration: none; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.1; text-align: center;
}
.play-modes a:active, .play-modes button:active { background: rgba(240, 190, 90, .14); border-color: var(--gold); }
.play-modes svg { width: 22px; height: 22px; color: var(--gold); flex: none; }

/* confort tactile et lisibilité (audit téléphone) : cibles d'au moins 40 px, petits libellés en capitales agrandis */
body.m-app .topbar .sound-btn { min-width: 40px; min-height: 40px; display: grid; place-items: center; }
body.m-app .check { min-height: 40px; gap: 10px; }
body.m-app .check input { width: 20px; height: 20px; flex: none; }
body.m-app .btn.xs { min-height: 36px; padding-left: 12px; padding-right: 12px; }
body.m-app .chip { min-height: 36px; }
body.m-app summary { padding: 10px 0; }
body.m-app :is(.purse-txt small, .m-purse small, .ps-stats small) { font-size: 11px; letter-spacing: .1em; }
body.m-app .data.rankings th { font-size: 11.5px; }
body.m-app .quest-cols .muted { font-size: 12px; }

/* téléphone en paysage : barres plus basses, icône et libellé côte à côte */
@media (max-height: 520px) {
  body.m-app .app { grid-template-rows: calc(46px + env(safe-area-inset-top)) minmax(0, 1fr) auto; }
  body.m-app .tab { height: 44px; flex-direction: row; gap: 7px; font-size: 14px; }
  body.m-app .tab-ico, body.m-app .tab-ico svg { width: 22px; height: 22px; }
  body.m-app .tab .avatar.tabav { --s: 21px; }
  body.m-app .toasts { bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- chat : arrivées, départs et messages privés */
.msg.arr { font-style: normal; font-size: 14px; opacity: .8; }
.msg.arr .who { font-weight: 600; }
.arr-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: #7fd18b; box-shadow: 0 0 6px rgba(127, 209, 139, .6); }
.msg.arr.out .arr-dot { background: var(--bronze-d); box-shadow: none; }
.arr-toggle { margin: 0 0 8px; font-size: 13px; }
.pms-btn { position: relative; color: var(--gold); }
.pms-btn svg { width: 19px; height: 19px; }
.pms-btn .unread { position: absolute; top: -6px; right: -7px; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #17110a; }
.chat.show-pms .pms-btn { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px var(--glow); }
.pm-list { max-height: 55%; overflow-y: auto; border-bottom: 1px solid var(--frame-dim); padding: 8px 10px 8px 16px; background: rgba(0, 0, 0, .2); }
.pm-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-new { display: flex; gap: 6px; margin-bottom: 8px; }
.pm-new input { flex: 1; min-width: 0; }
.pm-row { position: relative; padding-right: 30px; }
.pm-row.on { border-color: var(--frame-dim); background: rgba(240, 190, 90, .06); }
.pm-row.new b { color: var(--value); }
.pm-row .grow { min-width: 0; }
.pm-top { display: flex; align-items: center; gap: 6px; }
.pm-top small { margin-left: auto; }
.pm-ex { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--label); }
.pm-row.new .pm-ex { color: var(--ink); }
.pm-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); font-size: 12px; opacity: .6; }
.pm-x:hover { opacity: 1; color: var(--gold-hi); background: rgba(0, 0, 0, .3); }
.pm-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5d5346; }
.pm-dot.on { background: #7fd18b; box-shadow: 0 0 6px rgba(127, 209, 139, .6); }
.pm-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--frame-dim); background: rgba(0, 0, 0, .18); }
.pm-bar[hidden] { display: none; }
.pm-bar .who { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold-hi); }
.pm-back { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--frame-dim); background: transparent; color: var(--gold); font-size: 20px; line-height: 1; }
.pm-back:hover { border-color: var(--gold); color: var(--gold-hi); }
.pm-state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--muted); }
.pm-state.on { color: var(--label); }
.chat-form input:disabled { opacity: .6; }
.chat.folded .pm-list, .chat.folded .pm-bar { display: none; }
body.m-app .chat.folded .pm-list:not([hidden]) { display: block; }
body.m-app .chat.folded .pm-bar:not([hidden]) { display: flex; }
body.m-app .pm-list { max-height: 70%; padding: 10px 14px; }
body.m-app .pm-row { padding-top: 8px; padding-bottom: 8px; }
body.m-app .pm-x { width: 34px; height: 34px; right: 2px; }
body.m-app .pm-back { width: 38px; height: 38px; }
.chat.in-pm .pms-btn { border-color: var(--frame); color: var(--gold-hi); }

/* journal des parties (chat) */
.games-btn svg { width: 18px; height: 18px; }
.chat.show-games .games-btn { border-color: var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px var(--glow); }
.games-log { max-height: 60%; overflow-y: auto; border-bottom: 1px solid var(--frame-dim); padding: 8px 10px 8px 16px; background: rgba(0, 0, 0, .2); }
.games-log[hidden], .chat.folded .games-log { display: none; }
.games-log .online-title:not(:first-child) { margin-top: 12px; }
.gl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 5px; border: 1px solid transparent; line-height: 1.25; }
.gl-row:hover { background: rgba(240, 190, 90, .06); border-color: var(--frame-dim); }
.gl-row .grow { min-width: 0; }
.gl-row small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-match { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.gl-match .who { font-size: 15px; }
.gl-match .who.lose { color: var(--label); font-weight: 600; text-shadow: none; }
.gl-score { font-family: 'Cinzel', serif; font-weight: 700; color: var(--value); font-variant-numeric: tabular-nums; }
.gl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7fd18b; box-shadow: 0 0 6px rgba(127, 209, 139, .6); }
.gl-res { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--gold-hi); border: 1px solid var(--frame-dim); }
.gl-res.draw { color: var(--muted); }
.gl-more { margin: 10px 0 2px; font-size: 13px; text-align: right; }
@media (min-width: 1181px) { .chat-head [data-act=fold] { display: none; } }
body.m-app .chat.folded .games-log:not([hidden]) { display: block; }
body.m-app .games-log { max-height: 70%; padding: 10px 14px; }
body.m-app .gl-row { padding: 8px 4px; }

/* mentions légales */
.ld-legal-link { margin-top: 4px; padding: 6px 4px; background: none; border: 0; color: var(--label); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ld-legal-link:hover { color: var(--gold-hi); }
.legal h3 { margin: 18px 0 6px; font-family: 'Cinzel', serif; font-size: 15px; letter-spacing: .06em; color: var(--gold); }
.legal p, .legal li { line-height: 1.5; color: var(--ink); }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal a { color: var(--gold-hi); overflow-wrap: anywhere; }

/* amis */
.fr-add { align-items: center; padding: 12px 14px; margin-bottom: 16px; }
.fr-add input { flex: 1; min-width: 0; }
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; border: 1px solid transparent; }
.fr-row:hover { background: rgba(240, 190, 90, .06); border-color: var(--frame-dim); }
.fr-row .grow { min-width: 0; }
.fr-name { display: flex; flex-direction: column; gap: 2px; }
.fr-name small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row:not(.on) .avatar { opacity: .6; }
.fr-tag { display: inline-block; padding: 0 6px; border-radius: 999px; border: 1px solid var(--frame-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); vertical-align: 1px; font-style: normal; }
.msg.arr.friend { opacity: 1; }
.msg.arr.friend .who { color: var(--gold-hi); }
.online-friends { margin: 0 0 8px; font-size: 13px; }
.online-friends a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.online-friends svg { width: 16px; height: 16px; }
@media (max-width: 520px) { .fr-add { flex-wrap: wrap; } .fr-add .btn { width: 100%; } .fr-row { flex-wrap: wrap; } }
.check.off { opacity: .45; cursor: not-allowed; }

/* portraits d'avatar */
.portrait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; width: 100%; }
.portrait small { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.portrait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.15; text-align: center; cursor: pointer; }
.portrait:hover { background: rgba(240, 190, 90, .08); border-color: var(--frame-dim); }
.portrait.on { border-color: var(--gold); background: rgba(240, 190, 90, .12); box-shadow: 0 0 10px var(--glow); }
.portrait .avatar.lg { --s: 68px; }
.link-btn { padding: 0; background: none; border: 0; color: var(--label); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--gold-hi); }