/* =====================================================================
   SOIF — design system
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --night:#100718;
  --night-2:#180C22;
  --surface:#22132E;
  --surface-2:#2E1A3C;
  --surface-3:#3B2350;
  --amber:#FFB238;
  --amber-soft:#FFD489;
  --coral:#FF5C46;
  --mint:#3DDC97;
  --violet:#C77DFF;
  --blue:#5B8CFF;
  --ink:#F8EFE4;
  --muted:#A98FB5;
  --line:rgba(248,239,228,0.10);
  --line-2:rgba(248,239,228,0.18);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; overscroll-behavior:none; }
body{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--ink);
  background:#080410;
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}
h1,h2,h3,.font-display{ font-family:'Unbounded',sans-serif; margin:0; letter-spacing:-0.02em; }

/* ---------- app shell : cadre telephone ---------- */
#phone{
  position:relative;
  width:100%; max-width:430px; height:100dvh; max-height:100dvh;
  background:
    radial-gradient(90% 55% at 12% -8%, rgba(255,178,56,0.14), transparent 60%),
    radial-gradient(80% 50% at 105% 5%, rgba(255,92,70,0.14), transparent 55%),
    radial-gradient(70% 45% at 50% 105%, rgba(199,125,255,0.10), transparent 60%),
    var(--night);
  overflow:hidden;
  display:flex; flex-direction:column;
}
@media (min-width:520px) and (min-height:760px){
  body{ background:radial-gradient(circle at 50% 20%, #1a0f24, #060309 70%); }
  #phone{ height:min(880px,94vh); border-radius:44px; border:1px solid rgba(255,255,255,0.09);
    box-shadow:0 40px 90px rgba(0,0,0,.7), 0 0 0 10px #0d0812; }
}
#screen{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding: calc(14px + var(--safe-t)) 18px calc(20px + var(--safe-b)); }
#screen::-webkit-scrollbar{ width:0; }

/* ---------- topbar ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; min-height:34px; }
.logo{ font-family:'Unbounded'; font-weight:900; font-size:22px; letter-spacing:-0.03em; }
.logo i{ color:var(--amber); font-style:normal; }
.icon-btn{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink);
  width:36px; height:36px; border-radius:12px; font-size:16px; display:grid; place-items:center; cursor:pointer; flex:none; }
.icon-btn:active{ transform:scale(.92); }
.back{ background:none; border:none; color:var(--muted); font:600 13px 'Manrope'; cursor:pointer; padding:6px 0; }

/* ---------- typo helpers ---------- */
.eyebrow{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); font-weight:800; }
.h-title{ font-size:26px; font-weight:900; line-height:1.1; margin:6px 0 6px; }
.h-sub{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.center{ text-align:center; }
.muted{ color:var(--muted); }

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-bottom:14px; }
.card-t{ font-size:14.5px; font-weight:800; margin-bottom:3px; }
.card-s{ font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:14px; }

/* ---------- buttons ---------- */
.btn{ width:100%; border:none; border-radius:16px; padding:16px;
  font-family:'Unbounded'; font-weight:700; font-size:14.5px; cursor:pointer; letter-spacing:-0.01em; }
.btn-primary{ background:linear-gradient(115deg,var(--amber),var(--coral)); color:#1B0B1F;
  box-shadow:0 10px 26px rgba(255,92,70,.28); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 4px 14px rgba(255,92,70,.24); }
.btn-primary:disabled{ opacity:.35; box-shadow:none; }
.btn-ghost{ background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--ink);
  font-family:'Manrope'; font-weight:700; font-size:13.5px; border-radius:14px; padding:13px; width:100%; cursor:pointer; }
.btn-ghost:active{ background:rgba(255,255,255,.1); }
.btn-mint{ background:linear-gradient(115deg,var(--mint),#2BB77E); color:#062218; }
.btn-danger{ background:linear-gradient(115deg,#FF5C46,#C2185B); color:#fff; }
.row{ display:flex; gap:9px; }
.row>*{ flex:1; }
.stack{ display:flex; flex-direction:column; gap:9px; }

/* ---------- players setup ---------- */
.player-line{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:8px 10px; margin-bottom:8px; }
.av{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:21px; flex:none;
  border:2px solid transparent; cursor:pointer; }
.player-line input{ flex:1; background:none; border:none; color:var(--ink); font:700 15px 'Manrope'; outline:none; min-width:0; }
.player-line .del{ background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 6px; flex:none; }
.add-line{ width:100%; background:rgba(255,255,255,.04); border:1px dashed var(--line-2); color:var(--muted);
  border-radius:16px; padding:14px; font:700 13.5px 'Manrope'; cursor:pointer; }

/* ---------- sliders ---------- */
.slider-b{ margin-bottom:18px; }
.slider-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.slider-h .n{ font-weight:800; font-size:13.5px; }
.slider-h .v{ font-size:11.5px; font-weight:800; color:var(--amber-soft); text-transform:uppercase; letter-spacing:.06em; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:6px;
  background:linear-gradient(90deg,var(--amber),var(--coral)); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--ink); border:4px solid var(--coral); cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.scale{ display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin-top:7px;
  text-transform:uppercase; letter-spacing:.05em; }

/* ---------- segmented ---------- */
.seg{ display:flex; background:var(--night-2); border:1px solid var(--line); border-radius:14px; padding:4px; gap:4px; }
.seg button{ flex:1; background:none; border:none; color:var(--muted); font:700 12.5px 'Manrope';
  padding:10px 6px; border-radius:10px; cursor:pointer; }
.seg button.on{ background:var(--surface-2); color:var(--ink); box-shadow:0 2px 10px rgba(0,0,0,.3); }

/* ---------- mode tiles ---------- */
.mode{ width:100%; text-align:left; background:var(--night-2); border:1px solid var(--line); border-radius:18px;
  padding:15px; display:flex; gap:13px; align-items:center; color:var(--ink); cursor:pointer; margin-bottom:9px; }
.mode .ico{ font-size:26px; flex:none; }
.mode .t{ font-weight:800; font-size:14px; }
.mode .d{ font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:2px; }
.mode.on{ border-color:var(--amber); background:linear-gradient(150deg,rgba(255,178,56,.16),rgba(255,92,70,.08)); }
.tag{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; padding:3px 8px;
  border-radius:999px; background:var(--coral); color:#fff; margin-left:auto; flex:none; }

/* ---------- board ---------- */
.board-wrap{ position:relative; margin:2px -6px 10px; }
#boardSvg{ width:100%; display:block; overflow:visible; }
.sp-body{ transition:filter .3s, stroke .3s; }
.sp-active .sp-body{ filter:drop-shadow(0 0 10px var(--amber)); }
.tok{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.hud{ display:flex; gap:7px; overflow-x:auto; padding:2px 0 8px; margin:0 -18px; padding-left:18px; padding-right:18px; }
.hud::-webkit-scrollbar{ height:0; }
.pchip{ flex:none; display:flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px 5px 5px; font-size:12px; font-weight:700; }
.pchip .a{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:14px; }
.pchip .sips{ font-size:10.5px; color:var(--muted); font-weight:700; }
.pchip.now{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber), 0 0 18px rgba(255,178,56,.25); }

.turn-head{ text-align:center; margin:2px 0 12px; }
.turn-head .who{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:800; }
.turn-head .nm{ font-family:'Unbounded'; font-size:27px; font-weight:900; margin-top:3px; }

.dice-btn{ width:118px; height:118px; border-radius:34px; border:none; margin:2px auto 6px; display:grid; place-items:center;
  background:linear-gradient(150deg,#FFF6E6,#F2D9A8); color:#1B0B1F; font-family:'Unbounded'; font-size:46px; font-weight:900;
  cursor:pointer; box-shadow:0 16px 34px rgba(0,0,0,.45), inset 0 -6px 0 rgba(0,0,0,.12); }
.dice-btn:active{ transform:translateY(3px) scale(.97); }
.dice-btn.rolling{ animation:shake .45s linear infinite; }
@keyframes shake{ 0%{transform:rotate(0) scale(1)} 25%{transform:rotate(-9deg) scale(1.04)}
  50%{transform:rotate(0) scale(.98)} 75%{transform:rotate(9deg) scale(1.04)} 100%{transform:rotate(0) scale(1)} }

/* ---------- sheet / modal ---------- */
#sheet{ position:absolute; inset:0; z-index:60; display:none; }
#sheet.on{ display:block; }
.sheet-bg{ position:absolute; inset:0; background:rgba(6,3,10,.72); backdrop-filter:blur(6px);
  animation:fade .25s ease; }
.sheet-body{ position:absolute; left:0; right:0; bottom:0; max-height:94%; overflow-y:auto;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border-top:1px solid var(--line-2); border-radius:30px 30px 0 0;
  padding:10px 18px calc(22px + var(--safe-b)); animation:up .34s cubic-bezier(.2,.9,.25,1); }
.sheet-body::-webkit-scrollbar{ width:0; }
.grab{ width:44px; height:5px; border-radius:99px; background:var(--line-2); margin:4px auto 16px; }
@keyframes up{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- event / prompt card ---------- */
.event-ico{ font-size:52px; text-align:center; line-height:1; margin-bottom:10px; }
.event-kind{ text-align:center; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:800; color:var(--amber); }
.event-title{ font-family:'Unbounded'; font-size:22px; font-weight:800; text-align:center; margin:8px 0 10px; line-height:1.2; }
.event-text{ font-size:16.5px; line-height:1.5; text-align:center; font-weight:600; }
.sips{ display:flex; align-items:center; justify-content:center; gap:8px; margin:16px auto 4px;
  background:rgba(255,92,70,.16); border:1px solid rgba(255,92,70,.4); color:var(--ink);
  padding:11px 20px; border-radius:999px; font-weight:800; font-size:15px; width:fit-content; }
.howto{ font-size:12px; color:var(--muted); line-height:1.55; text-align:center; margin-top:14px;
  border-top:1px solid var(--line); padding-top:12px; }

/* ---------- minigame grid ---------- */
.fam-bar{ display:flex; gap:7px; overflow-x:auto; margin:0 -18px 12px; padding:0 18px 4px; }
.fam-bar::-webkit-scrollbar{ height:0; }
.fam-pill{ flex:none; background:var(--night-2); border:1px solid var(--line); color:var(--muted);
  padding:8px 13px; border-radius:999px; font:700 12px 'Manrope'; cursor:pointer; }
.fam-pill.on{ background:var(--surface-2); color:var(--ink); border-color:var(--line-2); }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.tile{ background:var(--night-2); border:1px solid var(--line); border-radius:18px; padding:13px;
  text-align:left; color:var(--ink); cursor:pointer; position:relative; overflow:hidden; }
.tile:active{ transform:scale(.97); }
.tile .ic{ font-size:23px; display:block; margin-bottom:7px; }
.tile .t{ font-weight:800; font-size:12.8px; line-height:1.25; }
.tile .d{ font-size:10.5px; color:var(--muted); line-height:1.35; margin-top:4px; }
.tile .meta{ font-size:9.5px; color:var(--muted); margin-top:7px; font-weight:700; letter-spacing:.04em; }
.tile.locked{ opacity:.35; }

/* ---------- timer ---------- */
.ring{ width:168px; height:168px; margin:6px auto 14px; position:relative; }
.ring svg{ transform:rotate(-90deg); }
.ring .num{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Unbounded'; font-size:46px; font-weight:900; }
.ring.urgent .num{ color:var(--coral); animation:pulse .5s infinite; }
@keyframes pulse{ 50%{ transform:scale(1.12);} }

/* ---------- secret card (roles) ---------- */
.secret{ background:linear-gradient(160deg,var(--surface-3),var(--surface));
  border:1px solid var(--line-2); border-radius:26px; padding:34px 20px; min-height:200px;
  display:grid; place-items:center; text-align:center; gap:10px; }
.secret .w{ font-family:'Unbounded'; font-size:28px; font-weight:900; }
.secret .r{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:800; }
.secret.bad{ background:linear-gradient(160deg,rgba(255,92,70,.3),var(--surface)); border-color:rgba(255,92,70,.5); }
.secret.bad .w{ color:var(--coral); }

/* ---------- playing cards ---------- */
.pcard{ width:58px; height:82px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(160deg,#FFF7EA,#EAD7BC); color:#1B0B1F;
  font-family:'Unbounded'; font-size:21px; font-weight:900; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.pcard.red{ color:#D22B2B; }
.pcard.back{ background:linear-gradient(160deg,var(--surface-3),var(--surface-2)); color:var(--muted);
  border:1px solid var(--line-2); font-size:24px; }
.pyr{ display:flex; flex-direction:column-reverse; align-items:center; gap:7px; margin:14px 0; }
.pyr-row{ display:flex; gap:7px; }
.pyr .pc{ width:38px; height:54px; border-radius:8px; display:grid; place-items:center;
  font:900 15px 'Unbounded'; background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  transition:transform .3s, background .3s; }
.pyr .pc.up{ background:linear-gradient(160deg,#FFF7EA,#EAD7BC); color:#1B0B1F; }
.pyr .pc.up.red{ color:#D22B2B; }
.pyr .pc.cur{ transform:scale(1.2); box-shadow:0 0 18px rgba(255,178,56,.6); }
.hand{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0 4px; }

/* ---------- wheel ---------- */
.wheel{ position:relative; width:266px; height:266px; margin:8px auto 16px; }
.wheel-ring{ position:absolute; inset:0; border-radius:50%; border:2px dashed var(--line-2); }
.node{ position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center;
  font-size:10.5px; font-weight:800; text-align:center; line-height:1.15; padding:4px; transition:.25s; }
.node .e{ font-size:17px; display:block; }
.node.hit{ transform:scale(1.2); border-color:transparent; color:#1B0B1F; }
.wheel-c{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:112px; height:112px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--surface-3),var(--night-2));
  border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; }
.arrow{ width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent;
  border-bottom:38px solid var(--amber); transform-origin:50% 76%;
  filter:drop-shadow(0 0 10px rgba(255,178,56,.6)); }
.arrow.spin{ transition:transform 3.6s cubic-bezier(.13,.72,.13,1); }

/* ---------- finger overlay ---------- */
#finger{ position:absolute; inset:0; z-index:80; display:none;
  background:radial-gradient(circle at 50% 42%,#2C1638,#0C0512 75%); touch-action:none; }
#finger.on{ display:block; }
.f-dot{ position:absolute; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFD489,#FF5C46); transition:.4s; }
.f-dot.win{ transform:scale(1.6); box-shadow:0 0 50px 14px rgba(255,178,56,.75); }
.f-dot.lose{ opacity:.06; transform:scale(.5); }
.f-txt{ position:absolute; left:0; right:0; top:20%; text-align:center; padding:0 30px; pointer-events:none; }

/* ---------- misc ---------- */
.badge{ background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-size:10.5px; font-weight:800; color:var(--amber-soft); text-transform:uppercase; letter-spacing:.06em; }
.rule-strip{ display:flex; align-items:center; gap:9px; background:rgba(199,125,255,.12);
  border:1px solid rgba(199,125,255,.3); border-radius:14px; padding:10px 12px; margin-bottom:9px; font-size:12px; line-height:1.4; }
.rule-strip .x{ margin-left:auto; background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; }
#toast{ position:absolute; left:16px; right:16px; bottom:calc(18px + var(--safe-b)); z-index:90;
  background:var(--surface-3); border:1px solid var(--line-2); border-radius:16px; padding:13px 16px;
  font-size:13px; font-weight:700; text-align:center; opacity:0; transform:translateY(14px);
  transition:.28s; pointer-events:none; }
#toast.on{ opacity:1; transform:translateY(0); }
#confetti{ position:absolute; inset:0; z-index:85; pointer-events:none; display:none; }
#confetti.on{ display:block; }
.list-num{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.list-num .rk{ font-family:'Unbounded'; font-size:16px; font-weight:900; color:var(--muted); width:24px; }
.list-num .bar{ flex:1; height:8px; border-radius:99px; background:var(--night-2); overflow:hidden; }
.list-num .bar i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--amber),var(--coral)); }
.fadein{ animation:fi .3s ease; }
@keyframes fi{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.shake{ animation:sh .4s; }
@keyframes sh{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* ---------- splash "MINI-JEU !" facon Mario Party ---------- */
.splash{ position:absolute; inset:0; z-index:95; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(255,178,56,.28), rgba(8,4,16,.94) 70%);
  animation:spIn .18s ease; pointer-events:none; }
.splash-in{ text-align:center; animation:spPop .5s cubic-bezier(.2,1.5,.4,1); }
.splash-t{ font-family:'Unbounded'; font-size:30px; font-weight:900; letter-spacing:-.02em;
  color:#fff; text-shadow:0 4px 0 #FF5C46, 0 8px 22px rgba(0,0,0,.6); }
.splash-s{ font-family:'Unbounded'; font-size:14px; font-weight:800; color:var(--amber);
  margin-top:10px; letter-spacing:.1em; }
@keyframes spIn{ from{opacity:0} to{opacity:1} }
@keyframes spPop{ 0%{ transform:scale(.4) rotate(-8deg); opacity:0 }
  60%{ transform:scale(1.12) rotate(2deg); opacity:1 } 100%{ transform:scale(1) rotate(0) } }

/* ---------- home ---------- */
.hero-badge{ display:inline-block; background:rgba(255,178,56,.14); border:1px solid rgba(255,178,56,.36);
  color:var(--amber-soft); padding:7px 15px; border-radius:999px; font-size:11.5px; font-weight:800;
  letter-spacing:.04em; }

/* boutons "3D" facon plateau */
.btn-primary, .btn-mint, .btn-danger{ box-shadow:0 6px 0 rgba(0,0,0,.35), 0 12px 26px rgba(255,92,70,.22); }
.btn-primary:active, .btn-mint:active, .btn-danger:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.tile{ box-shadow:0 3px 0 rgba(0,0,0,.3); }
.mode{ box-shadow:0 3px 0 rgba(0,0,0,.28); }

/* ---------- barre de jeu collante (plateau) ---------- */
.play-bar{ position:sticky; bottom:calc(-2px - var(--safe-b)); z-index:20;
  display:flex; align-items:center; gap:12px;
  margin:6px -18px calc(-20px - var(--safe-b)); padding:12px 18px calc(16px + var(--safe-b));
  background:linear-gradient(180deg, rgba(16,7,24,0), rgba(16,7,24,.93) 26%, var(--night) 55%);
  backdrop-filter:blur(4px); }
.pb-left{ flex:1; min-width:0; }
.pb-left .who{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:800; }
.pb-name{ font-family:'Unbounded'; font-size:20px; font-weight:900; margin:2px 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-mini{ background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:var(--ink);
  border-radius:12px; padding:9px 12px; font:700 12px 'Manrope'; cursor:pointer; }
.play-bar .dice-btn{ width:98px; height:98px; border-radius:28px; font-size:40px; margin:0; flex:none; }
.board-wrap{ padding-bottom:4px; }

/* fix : les spans des tuiles doivent etre en bloc */
.tile .ic, .tile .t, .tile .d, .tile .meta{ display:block; }
.mode .t, .mode .d{ display:block; }
.grid{ align-items:stretch; }
.tile{ display:flex; flex-direction:column; }
.tile .meta{ margin-top:auto; padding-top:7px; }

/* ---------- HUD dense : 5 a 8 joueurs visibles d'un coup ---------- */
.hud-dense{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  overflow:visible; margin:0 0 10px; padding:0; }
.pmini{ background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:7px 4px 6px; text-align:center; min-width:0; }
.pmini .a{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; margin:0 auto 4px; }
.pmini .nm{ display:block; font-size:10.5px; font-weight:800; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.pmini .sips{ display:block; font-size:9.5px; color:var(--muted); font-weight:700; margin-top:2px; }
.pmini.now{ border-color:var(--amber); background:linear-gradient(160deg,rgba(255,178,56,.18),var(--surface));
  box-shadow:0 0 14px rgba(255,178,56,.22); }

/* roue : jetons plus petits quand le groupe est nombreux */
.wheel.dense .node{ width:54px; height:54px; margin:-27px 0 0 -27px; font-size:9.5px; }
.wheel.dense .node .e{ font-size:15px; }

/* grille de vote : 3 colonnes des 6 choix */
.grid.g3{ grid-template-columns:repeat(3,1fr); }
.grid.g3 .tile{ padding:10px 6px; }
.grid.g3 .tile .ic{ font-size:20px; margin-bottom:4px; }
.grid.g3 .tile .t{ font-size:11px; }

/* fix : .sips du HUD ne doit pas heriter du gros badge de gorgees */
.pchip .sips, .pmini .sips{
  background:none; border:0; padding:0; margin:0; border-radius:0;
  width:auto; display:inline; align-items:initial; justify-content:initial; gap:0; }
.pmini .sips{ display:block; margin-top:2px; }
/* HUD dense plus compact : les 8 joueurs + le plateau tiennent ensemble */
.hud-dense{ gap:5px; margin:0 0 8px; }
.pmini{ padding:6px 3px 5px; border-radius:12px; }
.pmini .a{ width:24px; height:24px; font-size:13px; margin-bottom:3px; }
.pmini .nm{ font-size:10px; }
.pmini .sips{ font-size:9.5px; }