/* ===== La Taverne aux Jeux ===== */
:root {
  --sea-0: #07131f; --sea-1: #0c2133; --sea-2: #123049;
  --felt: #133d3a; --felt-2: #0f2f2d;
  --gold: #e6b450; --gold-2: #b88a2c;
  --parch: #f3e6c8; --parch-2: #e4d1a6; --ink: #2a1d10; --ink-2: #2b1c0b;
  --text: #eef2f5; --muted: #8fa5b8; --danger: #e2574c; --ok: #47c47e;
  --radius: 14px;
  --card-ar: .65;
  --card-h: clamp(150px, 29vh, 320px);
  --card-w: calc(var(--card-h) * var(--card-ar));
  --card-h-mid: clamp(110px, 21vh, 250px);
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1a3f5e 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, #0f3346 0%, transparent 60%), var(--sea-0);
  min-height: 100vh; overflow-x: hidden;
}
button { font: inherit; cursor: pointer; border: 0; color: inherit; }
input, select { font: inherit; }
h1, h2, h3, .pirate { font-family: 'Pirata One', Georgia, serif; font-weight: 400; letter-spacing: .5px; }
.center { text-align: center; }

/* ---------- Boutons ---------- */
.btn {
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); color: #2a1a05; font-weight: 800; padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 3px 0 #7a5a1a, 0 6px 18px rgba(0,0,0,.35); transition: transform .08s ease, filter .15s ease; white-space: nowrap;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a5a1a; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.ghost { background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.panel.framed .btn.ghost { background: rgba(80,50,15,.12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(80,50,15,.3); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn.danger { background: linear-gradient(180deg, #ef6b5f, #c4433a); color: white; box-shadow: 0 3px 0 #7d2620; }
/* bouton plaque dorée */
.btn-plate {
  position: relative; min-width: 240px; height: 64px; padding: 0 44px;
  background: url(img/ui/plate.webp) center / 100% 100% no-repeat;
  font-family: 'Pirata One', Georgia, serif; font-size: 26px; color: #3b2606;
  text-shadow: 0 1px 0 rgba(255,240,200,.7), 0 -1px 0 rgba(90,60,10,.35);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,.45)); transition: transform .12s ease, filter .15s ease;
}
.btn-plate:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) brightness(1.06); }
.btn-plate:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn-plate:disabled { filter: grayscale(.85) brightness(.65); cursor: not-allowed; }
.btn-plate.wide { width: 100%; }

.panel {
  background: linear-gradient(180deg, rgba(18,48,73,.92), rgba(12,33,51,.92));
  border: 1px solid rgba(230,180,80,.25); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
/* panneaux encadrés bois + parchemin */
.panel.framed {
  background: none; border-radius: 0; box-shadow: none;
  border: 48px solid transparent;
  border-width: 48px 44px;
  border-image: url(img/ui/frame.webp) 270 255 fill / 48px 44px / 0 round;
  color: var(--ink); filter: drop-shadow(0 10px 22px rgba(0,0,0,.5));
}
.panel.framed h2 { color: #4a2c0c; text-shadow: 0 1px 0 rgba(255,240,210,.5); }
.panel.framed .desc, .panel.framed .share { color: var(--ink-2); }
.panel.framed .share code { background: rgba(60,35,10,.12); color: var(--ink); }
.panel.framed .field { background: rgba(255,250,235,.55); color: var(--ink); border-color: rgba(90,60,20,.35); }
.panel.framed .opt { border-bottom-color: rgba(90,60,20,.18); }
.panel.framed .plist li { background: rgba(80,50,15,.1); }
.panel.framed .tag { background: rgba(80,50,15,.14); color: var(--ink-2); }
.panel.framed .tag.host { background: rgba(184,138,44,.3); color: #5a3a06; }
.panel.framed .tag.you { background: rgba(40,140,80,.2); color: #1d6a3d; }
.panel.framed .hint { color: #7a3a10; }

/* ---------- Connexion ---------- */
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.join { width: min(480px, 100%); text-align: center; }
.join-logo { width: 100%; border-radius: 12px; display: block; margin: 0 0 10px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.logo { font-size: 42px; line-height: 1; margin: 6px 0 0; color: #5a3608; text-shadow: 0 2px 0 rgba(255,240,210,.6); }
.logo-sub { color: var(--ink-2); margin: 6px 0 18px; font-size: 15px; }
.field { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: var(--text); outline: none; margin-bottom: 14px; font-size: 17px; }
.field:focus { border-color: var(--gold); }
.err { color: #b3261e; min-height: 20px; font-size: 14px; font-weight: 700; }

/* ---------- En-tête / accueil ---------- */
.app-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.app-head h1 { margin: 0; font-size: clamp(28px, 6vw, 44px); color: var(--gold); flex: 1; text-shadow: 0 3px 0 #5a3d0c, 0 8px 30px rgba(230,180,80,.25); }
.head-btns { display: flex; gap: 8px; }
.home { width: min(760px, 100%); margin: 0 auto; padding: 18px 16px 40px; }
.home-sub { color: var(--muted); margin: 0 0 14px; }
.banner-list { display: grid; gap: 14px; }
.banner-card {
  position: relative; width: 100%; aspect-ratio: 651 / 178; padding: 0; background: #10283a; border-radius: 14px; overflow: hidden; display: block; text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.banner-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-card:not(:disabled):hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 2px var(--gold); }
.banner-card:disabled { cursor: default; }
.bn-text { position: absolute; left: 4.5%; top: 50%; transform: translateY(-50%); width: 46%; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.bn-text b { font-family: 'Pirata One', serif; font-weight: 400; font-size: clamp(22px, 5.2vw, 40px); line-height: 1; color: #f6d47c; }
.bn-text small { font-size: clamp(11px, 2.3vw, 15px); color: #e8eef3; line-height: 1.2; }
.bn-text em { font-style: normal; font-size: clamp(10px, 2vw, 13px); color: var(--gold); font-weight: 800; margin-top: 3px; }
.poker-banner { background: radial-gradient(ellipse at 75% 50%, #1f6b46 0%, #0f3b29 55%, #082419 100%); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.pk-deco { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); display: flex; gap: 2.5%; width: 46%; justify-content: flex-end; }
.pk-deco i { font-style: normal; font-size: clamp(24px, 7vw, 58px); width: 22%; aspect-ratio: .7; display: grid; place-items: center; background: #fbf6ea; border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,.45); transform: rotate(var(--r)); color: #161616; }
.pk-deco i:nth-child(1) { --r: -12deg; } .pk-deco i:nth-child(2) { --r: -4deg; color: #c0182a; } .pk-deco i:nth-child(3) { --r: 5deg; } .pk-deco i:nth-child(4) { --r: 13deg; color: #c0182a; }
.home-crew { display: flex; align-items: center; gap: 6px; margin: 18px 0 6px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }

/* ---------- Salon ---------- */
.lobby { width: min(1400px, 100%); margin: 0 auto; padding: 18px 16px 40px; }
.lobby-banner { max-width: 620px; margin: 0 auto 14px; }
.lobby-grid { display: grid; grid-template-columns: 1fr 1.05fr 1.15fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .lobby-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .lobby-grid { grid-template-columns: 1fr; } }
.lobby h2 { margin: 0 0 10px; font-size: 28px; }
.plist { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.plist li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: rgba(0,0,0,.2); border-radius: 10px; flex-wrap: wrap; }
.plist li.spec { opacity: .7; }
.plist .name { flex: 1; font-weight: 800; min-width: 80px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.tag.host { background: rgba(230,180,80,.2); color: var(--gold); }
.tag.you { background: rgba(71,196,126,.18); color: var(--ok); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.off { background: var(--danger); }
.bot-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.hint { margin-top: 10px; font-size: 14px; font-weight: 700; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.opt .lbl { font-weight: 800; }
.opt .desc { font-size: 13px; }
/* interrupteur bois & métal (laiton à gauche = ON, fer à droite = OFF) */
.toggle { position: relative; width: 104px; height: 45px; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle span { position: absolute; inset: 0; background: url(img/ui/toggle-off.webp) center / contain no-repeat; transition: filter .2s; }
.toggle span::after { content: ''; position: absolute; inset: 0; background: url(img/ui/toggle-on.webp) center / contain no-repeat; opacity: 0; transform: translateX(6%); transition: opacity .22s ease, transform .22s cubic-bezier(.3,1.5,.5,1); }
.toggle input:checked + span::after { opacity: 1; transform: none; }
.toggle input:checked + span { filter: drop-shadow(0 0 5px rgba(230,180,80,.75)); }
.toggle input:focus-visible + span { filter: drop-shadow(0 0 4px var(--gold)); }
.toggle input:disabled + span { filter: grayscale(.4) brightness(.85); cursor: not-allowed; }
.toggle:active span { filter: brightness(1.1); }
select.field { margin: 0; padding: 8px 10px; font-size: 14px; width: auto; max-width: 210px; }
.share { margin-top: 14px; font-size: 14px; color: var(--muted); word-break: break-word; }
.share code { background: rgba(0,0,0,.3); padding: 4px 8px; border-radius: 6px; color: var(--parch); word-break: break-all; }
.start-row { margin-top: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* avatars et dos */
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center;
  box-shadow: 0 0 0 2px var(--gold-2), 0 0 0 3px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5); background: #0c2133; }
.avatar.empty { font-family: 'Pirata One', serif; font-size: 24px; color: var(--gold); }
.avatar.sm { width: 36px; height: 36px; font-size: 18px; }
.avatar.xs { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 1.5px var(--gold-2); vertical-align: middle; }
.avatar.pod { width: 64px; height: 64px; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.av-pick { position: relative; background: rgba(80,50,15,.1); border-radius: 14px; padding: 7px 3px; display: grid; place-items: center; transition: transform .1s, background .15s; }
.av-pick .avatar { width: min(68px, 15vw); height: min(68px, 15vw); }
.av-pick:hover:not(:disabled) { transform: translateY(-2px); background: rgba(184,138,44,.2); }
.av-pick.on { background: rgba(184,138,44,.3); box-shadow: inset 0 0 0 2px var(--gold-2); }
.av-pick.on .avatar { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(230,180,80,.7); }
.av-pick.taken { cursor: not-allowed; }
.av-pick.taken .avatar { filter: grayscale(.9) brightness(.6); }
.av-pick .owner { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; background: rgba(0,0,0,.75); color: #fff; padding: 1px 7px; border-radius: 999px; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-h { margin: 16px 0 2px; font-size: 22px; color: #4a2c0c; }
.look .desc { font-size: 13px; margin: 0 0 8px; }
.back-grid { display: flex; gap: 14px; }
.back-pick { background: transparent; padding: 6px; border-radius: 12px; transition: transform .1s; }
.back-pick:hover { transform: translateY(-2px); }
.back-pick.on { background: rgba(184,138,44,.3); box-shadow: inset 0 0 0 2px var(--gold-2); }

/* ---------- Table de jeu ---------- */
.game { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0,0,0,.3); border-bottom: 1px solid rgba(255,255,255,.06); min-width: 0; }
.topbar .title { font-family: 'Pirata One', serif; font-size: 24px; color: var(--gold); white-space: nowrap; }
.topbar .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topbar .chips::-webkit-scrollbar { display: none; }
.chip { background: rgba(255,255,255,.08); padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip b { color: var(--gold); }
.topbar .spacer { flex: 1; }
.chat-btn { position: relative; }
.unread { position: absolute; top: -6px; right: -6px; background: var(--danger); color: #fff; font-size: 11px; border-radius: 999px; padding: 0 5px; min-width: 18px; }
.table-area { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 0; min-width: 0; }
.felt {
  position: relative; min-height: 0; min-width: 0; overflow: auto;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 65%), repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px), linear-gradient(180deg, var(--felt), var(--felt-2));
  display: flex; flex-direction: column; align-items: center; padding: 12px 10px; gap: 10px;
}
.opponents { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; flex-shrink: 0; }
.seat { min-width: 120px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.28); border: 2px solid transparent; position: relative; transition: border-color .2s, box-shadow .2s; }
.seat.turn { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(230,180,80,.15), 0 0 22px rgba(230,180,80,.25); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(230,180,80,.25), 0 0 30px rgba(230,180,80,.45); } }
.seat.me { background: rgba(71,196,126,.12); }
.seat.ghost .avatar.seat-av { box-shadow: 0 0 0 2px #9fd0dc, 0 0 14px rgba(159,208,220,.5); }
.seat .nm { font-weight: 800; display: flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.seat .stats { font-size: 13px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seat .stats b { color: var(--text); }
.seat .badge { position: absolute; top: -9px; right: -6px; font-size: 15px; display: flex; gap: 3px; }
.seat .ok-bid { color: var(--ok); } .seat .bad-bid { color: var(--danger); }
.seat-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.avatar.seat-av { width: 50px; height: 50px; }
.seat.turn .avatar.seat-av { box-shadow: 0 0 0 3px var(--gold), 0 0 16px rgba(230,180,80,.6); }
.bot-tag { font-size: 12px; }
.fan { display: flex; align-items: center; position: relative; min-height: 34px; }
.fan .card + .card { margin-left: -16px; }
.fan .cnt { margin-left: 6px; font-weight: 800; font-size: 13px; color: var(--muted); }
.bubble { background: #f6eedb; color: #2a1a05; font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: 10px; position: relative; }
.team-tag { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; }
.team-tag.us { background: rgba(71,196,126,.22); color: #8ff0b8; } .team-tag.them { background: rgba(226,87,76,.22); color: #ffb3ab; }
.taker { font-size: 12px; font-weight: 800; color: var(--gold); }
.role { font-size: 12px; font-weight: 800; color: var(--gold); }
.fin { color: var(--ok); font-weight: 800; }

.trick-zone { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 10px; min-height: 180px; }
.status { position: relative; z-index: 8; font-size: 18px; font-weight: 800; text-align: center; color: var(--parch); min-height: 24px; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.status.mine { color: var(--gold); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .65; } }
.trick { display: flex; gap: 0 8px; flex-wrap: nowrap; justify-content: center; max-width: 100%; }
.played { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.played .who { font-size: 13px; font-weight: 700; color: var(--parch); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.played.winner { z-index: 3; }
.played.winner .card, .tp.winner .card { filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 18px rgba(230,180,80,.8)); }
.banner { background: rgba(0,0,0,.45); border: 1px solid rgba(230,180,80,.4); padding: 7px 16px; border-radius: 999px; font-weight: 800; color: var(--gold); text-align: center; }
.banner.danger-b { border-color: rgba(226,87,76,.6); color: #ffb3ab; }
.ghost-win { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ghost-win > .card { filter: drop-shadow(0 0 18px rgba(159,208,220,.7)); }
.ghost-win > div { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* ---------- Cartes ---------- */
.card {
  width: var(--card-w); height: var(--card-h); position: relative; flex: none;
  border-radius: calc(var(--card-w) * .06);
  background: var(--art) center / 100% 100% no-repeat;
  container-type: size; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.card.back { background-size: cover; border-radius: calc(var(--card-w) * .07); }
.card .num { position: absolute; display: grid; place-items: center; line-height: 1; font-family: 'Pirata One', Georgia, serif; text-shadow: 0 1px 0 rgba(255,255,255,.45); pointer-events: none; }
.card .num.mirror, .card .std-c.mirror { transform: rotate(180deg); }
.card .slot { position: absolute; }
.card .slot svg { position: absolute; inset: 6%; width: 88%; height: 88%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); pointer-events: none; }
.card .plate { position: absolute; display: grid; place-items: center; text-align: center; font-family: 'Pirata One', Georgia, serif; color: #2a1a0a; line-height: 1; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 0 rgba(255,235,190,.35); letter-spacing: .02em; }
.card .plate.royal { color: #f2cf73; text-shadow: 0 1px 2px #000; }
.card .as { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; background: #000; color: #fff; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.card.mid { --card-h: var(--card-h-mid); --card-w: calc(var(--card-h-mid) * var(--card-ar)); }
.card.small { --card-h: 120px; --card-w: calc(120px * var(--card-ar)); }
.card.tiny { --card-h: 34px; --card-w: calc(34px * var(--card-ar)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.card.dim { filter: grayscale(.8) brightness(.6); }
/* cartes classiques (fonds Roi des pirates) */
.card.std .std-c { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .9; pointer-events: none; font-weight: 900; }
.card.std .std-c b { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: 1.25em; }
.card.std .std-c i { font-style: normal; font-size: .95em; }
.card.std .std-mid { position: absolute; left: 18%; right: 18%; top: 24%; bottom: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; line-height: .85; }
.card.std .std-mid i { font-style: normal; font-size: 32cqh; text-shadow: 0 2px 0 rgba(255,255,255,.6), 0 0 14px rgba(255,255,255,.55); }
.card.std .std-mid.face b { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: 28cqh; text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.6); }
.card.std .std-mid.face i { font-size: 15cqh; }
.card.std.red .std-c, .card.std.red .std-mid { color: #b3121f; }
.card.std.blk .std-c, .card.std.blk .std-mid { color: #141414; }
.card .idx { display: none; position: absolute; left: 3%; top: 2.5%; z-index: 2; padding: 2cqh 1.5cqh; min-width: 15cqw; background: rgba(250,242,222,.96); border-radius: 4cqh; box-shadow: 0 1px 3px rgba(0,0,0,.4); font-family: 'Pirata One', Georgia, serif; font-size: 11cqh; line-height: .9; flex-direction: column; align-items: center; pointer-events: none; }
.card .idx b { font-weight: 400; } .card .idx i { font-style: normal; font-size: .8em; }
.card.std.red .idx { color: #b3121f; } .card.std.blk .idx { color: #141414; }
.hand.tight .card .idx, .mini-hand.tight .card .idx, .meld .card .idx, .pr-play .card .idx { display: flex; }
.card.tiny-std { --card-h: 58px; --card-w: calc(58px * var(--card-ar)); }
/* Uno — cadres illustrés (argent : cartes de couleur, bleu nuit : jokers) */
.card.uno { background: url(/img/uno/frame-color.webp) center / 100% 100% no-repeat; border-radius: calc(var(--card-w) * .07); }
.card.uno.is-wild { background-image: url(/img/uno/frame-wild.webp); }
.u-red { --uc: #c8182f; } .u-yellow { --uc: #f2bb1a; } .u-green { --uc: #1e9a45; } .u-blue { --uc: #2c62c0; } .u-wild { --uc: #e9d9a8; }
.card.uno .u-mid, .card.uno .u-c { position: absolute; display: grid; place-items: center; pointer-events: none; }
.card.uno .u-mid { left: 24.3%; right: 24.3%; top: 27.9%; bottom: 27.9%; }
.card.uno.is-wild .u-mid { left: 19.2%; right: 19.2%; top: 30.1%; bottom: 28.6%; }
.card.uno .u-c.tl { left: 11.3%; top: 7.7%; width: 14.8%; height: 9.6%; }
.card.uno .u-c.br { left: 75.4%; top: 83.3%; width: 14.4%; height: 9.4%; transform: rotate(180deg); }
.card.uno.is-wild .u-c.tl { left: 5.3%; top: 3.7%; width: 16.2%; height: 10.7%; }
.card.uno.is-wild .u-c.br { left: 78.9%; top: 86.1%; width: 15.8%; height: 10.4%; }
.card.uno img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); user-select: none; }
.card.uno .u-c img { width: 86%; height: 86%; filter: none; }
.card.uno.is-wild .u-mid img { width: 92%; height: 92%; }
.card.uno .u-num { font-family: 'Nunito', sans-serif; font-weight: 900; line-height: 1; color: var(--uc); -webkit-text-stroke: .045em #d9b45a; paint-order: stroke fill; text-shadow: 0 .04em 0 #6b4d12, 0 .07em .1em rgba(0,0,0,.6); }
.card.uno .u-mid .u-num { font-size: 33cqh; }
.card.uno .u-c .u-num { font-size: 10cqh; -webkit-text-stroke: .06em #d9b45a; text-shadow: none; }
.ul { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .06em; }
/* joker dont la couleur a été choisie : liseré de la couleur */
.card.uno.chosen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(var(--card-w) * .045) var(--chc), 0 0 12px var(--chc); pointer-events: none; }
.card.uno.ch-red { --chc: #c8182f; } .card.uno.ch-yellow { --chc: #f2bb1a; } .card.uno.ch-green { --chc: #1e9a45; } .card.uno.ch-blue { --chc: #2c62c0; }
/* Sous Zéro */
.card.sky { border-radius: calc(var(--card-w) * .1); background: var(--sc); box-shadow: inset 0 0 0 3px rgba(255,255,255,.75), inset 0 0 0 6px var(--sc), inset 0 0 22px rgba(0,0,0,.25); }
.sky.b-neg { --sc: #3949ab; } .sky.b-zero { --sc: #4fb3e8; } .sky.b-low { --sc: #43a047; } .sky.b-mid { --sc: #f5c242; } .sky.b-high { --sc: #e5533d; }
.card.sky .s-big { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 40cqh; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); pointer-events: none; }
.card.sky .s-c { position: absolute; font-weight: 900; font-size: 13cqh; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); pointer-events: none; }
.card.sky .s-c.tl { top: 6%; left: 10%; } .card.sky .s-c.br { bottom: 6%; right: 10%; transform: rotate(180deg); }
.card.empty-slot { background: rgba(255,255,255,.05); border: 2px dashed rgba(255,255,255,.18); filter: none; }

/* ---------- Mains ---------- */
.hand-bar { background: rgba(0,0,0,.35); border-top: 1px solid rgba(255,255,255,.07); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); min-width: 0; }
.hand-head { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto 6px; font-size: 14px; color: var(--muted); gap: 10px; flex-wrap: wrap; }
.hand-head b { color: var(--text); }
.hand { display: flex; justify-content: center; gap: 0 8px; flex-wrap: nowrap; max-width: 1500px; width: 100%; min-width: 0; margin: 0 auto; padding-top: 14px; }
.hand > .card + .card, .mini-hand > .card + .card, .trick > .played + .played, .fit > .card + .card { margin-left: var(--ov, 0px); }
.hand > .card, .mini-hand > .card { position: relative; transition: opacity .15s, filter .15s, translate .15s; }
@media (hover: hover) { .hand > .card:hover, .mini-hand > .card:hover { z-index: 5; } }
.hand .card.legal, .hand .card.selectable { cursor: pointer; }
@media (hover: hover) { .hand .card.legal:hover, .hand .card.selectable:hover { translate: 0 -18px; } }
.hand.active .card:not(.legal) { opacity: .45; filter: grayscale(.6) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.hand.active .card.legal { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 10px rgba(230,180,80,.55)); }
.hand .card.picked { translate: 0 -26px; filter: drop-shadow(0 0 4px #7fe0ff) drop-shadow(0 0 12px rgba(127,224,255,.8)); z-index: 4; }
.hand .card.drawn { filter: drop-shadow(0 0 4px #9be38b) drop-shadow(0 0 12px rgba(155,227,139,.8)); }
.hand.overflow, .trick.overflow { justify-content: flex-start; overflow-x: auto; }
.mini-hand { display: flex; gap: 0 5px; flex-wrap: nowrap; justify-content: center; margin: 8px 0 14px; }
.mini-hand.many { flex-wrap: wrap; gap: 5px; }
.mini-hand.many .card { --card-h: 92px; --card-w: calc(92px * var(--card-ar)); margin-left: 0 !important; }
.mini-hand .card.sel { filter: drop-shadow(0 0 4px var(--danger)) drop-shadow(0 0 10px var(--danger)); translate: 0 -10px; }
.mini-hand .card { cursor: pointer; }
.action-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 1500px; margin: 0 auto 8px; padding: 8px 10px; background: rgba(230,180,80,.1); border: 1px solid rgba(230,180,80,.35); border-radius: 14px; }
.action-bar > span { font-weight: 700; color: var(--parch); font-size: 14px; }

/* ---------- Belote : table en croix ---------- */
.cross { width: 100%; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: ". n ." "w c e" ". s ."; gap: 8px; align-items: center; justify-items: center; min-height: 0; }
.c-n { grid-area: n; } .c-w { grid-area: w; } .c-e { grid-area: e; } .c-s { grid-area: s; } .c-c { grid-area: c; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.trick4 { position: relative; width: calc(var(--card-h-mid) * 1.65); height: calc(var(--card-h-mid) * 1.9); }
.tp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.tp-s { translate: -50% -26%; z-index: 4; } .tp-n { translate: -50% -74%; } .tp-w { translate: -88% -50%; rotate: -8deg; } .tp-e { translate: -12% -50%; rotate: 8deg; }
.tp.winner { z-index: 6; }
.say { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; font-weight: 900; padding: 2px 8px; border-radius: 999px; font-size: 13px; white-space: nowrap; z-index: 7; }
.contract-pill { background: rgba(0,0,0,.45); border: 1px solid rgba(230,180,80,.4); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.contract-pill b { color: var(--gold); }
.contract-pill b.tr-h, .contract-pill b.tr-d { color: #ff6b6b; }
.bid-center { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.turned { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.coinche-bar { flex-direction: column; }
.cv-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cv { background: rgba(255,255,255,.1); padding: 7px 11px; border-radius: 10px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.cv.on { background: var(--gold); color: #2a1a05; }
.trump-btn.tr-h, .trump-btn.tr-d { color: #ff8a8a; } .trump-btn.on.tr-h, .trump-btn.on.tr-d { color: #8a0c12; }
.btn.trump-btn.tr-h, .btn.trump-btn.tr-d { color: #8a0c12; }
.outcome { color: var(--gold); font-size: 26px; margin: 4px 0 10px; }

/* ---------- Président ---------- */
.pr-stack { position: relative; display: grid; place-items: center; min-height: calc(var(--card-h-mid) + 30px); }
.pr-play { grid-area: 1 / 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.pr-play > .card + .card { margin-left: calc(var(--card-h-mid) * -.42); }
.pr-play .who { width: 100%; justify-content: center; display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--parch); margin-top: 4px; }
.pr-play.under { opacity: .35; transform: translate(calc(var(--i) * -14px), calc(var(--i) * -8px)) scale(.92); filter: grayscale(.5); }
.pr-play.under .who { visibility: hidden; }
.pr-play.under:nth-last-child(n+4) { display: none; }
.recv { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; }
.fit.row { display: flex; }
.hand.active-all .card { cursor: pointer; }

/* ---------- Pioches (Uno, Sous Zéro, Rami) ---------- */
.uno-center { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 40px); flex-wrap: wrap; padding-bottom: 12px; }
.deck-pile, .discard-pile { position: relative; background: none; padding: 0; display: grid; place-items: center; transition: transform .15s; }
.deck-pile .card { grid-area: 1 / 1; }
.deck-pile .stack2 { translate: 4px -4px; z-index: -1; filter: brightness(.7) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.deck-pile.can .card:first-child, .discard-pile.can > .card { filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 14px rgba(230,180,80,.6)); }
.deck-pile.can:hover, .discard-pile.can:hover { transform: translateY(-4px); }
.deck-pile:disabled, .discard-pile:disabled { cursor: default; }
.pile-lbl { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap; color: var(--parch); z-index: 3; }
.can .pile-lbl { background: var(--gold); color: #2a1a05; }
.discard-pile > .card { grid-area: 1 / 1; }
.discard-pile .under { rotate: var(--r); filter: brightness(.75) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.uno-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.color-ring { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; text-shadow: 0 1px 2px #000; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 22px var(--glow); background: var(--glow); transition: background .3s, box-shadow .3s; }
.c-red { --glow: #d7261e; } .c-yellow { --glow: #f0c419; } .c-green { --glow: #2f9e3b; } .c-blue { --glow: #1665c1; }
.dir { font-size: 34px; font-weight: 900; color: var(--gold); animation: spin 4s linear infinite; }
.dir.rev { animation-direction: reverse; }
@keyframes spin { to { rotate: 360deg; } }
.uno-call { color: #ffd23f; font-weight: 900; text-shadow: 0 0 8px rgba(255,80,40,.7); }
.color-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.cp { padding: 22px 10px; border-radius: 14px; font-weight: 900; font-size: 18px; color: #fff; text-shadow: 0 1px 2px #000; background: var(--glow); box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .1s; }
.cp:hover { transform: translateY(-3px) scale(1.03); }

/* ---------- Sous Zéro ---------- */
.sky-opps { align-items: flex-start; }
.sky-opp { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sky-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 4px; justify-content: center; }
.sky-grid.mini .card { --card-h: 44px; --card-w: calc(44px * var(--card-ar)); filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sky-grid.big .card { --card-h: clamp(70px, 10.5vh, 120px); --card-w: calc(var(--card-h) * var(--card-ar)); }
.sky-grid.big { gap: 6px; padding-top: 4px; }
.sky-slot.gone { visibility: hidden; }
.sky-slot.pickable { cursor: pointer; filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 8px rgba(230,180,80,.6)); transition: translate .12s; }
.sky-slot.pickable:hover { translate: 0 -5px; }
.held { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.end-grids { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 12px; }
.end-grids > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* ---------- Rami ---------- */
.rami-zone { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
.rami-piles { gap: 26px; }
.rami-piles .card.mid { --card-h-mid: clamp(90px, 15vh, 170px); }
.melds { width: 100%; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-content: flex-start; padding: 6px 4px 10px; }
.meld-wrap { display: flex; align-items: center; gap: 4px; }
.meld { --mh: clamp(62px, 9vh, 100px); display: flex; align-items: flex-end; padding: 4px 6px; border-radius: 10px; background: rgba(0,0,0,.18); position: relative; }
.meld > .card + .card, .meld > span + .card { margin-left: calc(var(--mh) * -.36); }
.meld .card { --card-h: var(--mh); --card-w: calc(var(--mh) * var(--card-ar)); }
.meld.droppable { cursor: pointer; box-shadow: 0 0 0 2px var(--gold); background: rgba(230,180,80,.15); }
.meld.droppable:hover { background: rgba(230,180,80,.28); }
.j-as { position: relative; z-index: 2; margin-left: -18px; background: #000; color: #fff; font-size: 11px; font-weight: 800; padding: 1px 4px; border-radius: 6px; }
.empty-melds { color: var(--muted); font-style: italic; }
.staging { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 auto 8px; max-width: 1500px; }
.stg-val { font-weight: 900; color: #ffb3ab; } .stg-val.ok { color: var(--ok); }

/* ---------- Poker ---------- */
.pk-zone { gap: 12px; }
.pk-table { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: radial-gradient(ellipse at center, #1f6b46, #0d3a26 70%); box-shadow: inset 0 0 0 6px #5a3a18, inset 0 0 0 9px #c9a24a, 0 10px 30px rgba(0,0,0,.4); max-width: 100%; }
.pk-board { display: flex; gap: 6px; }
.pk-board .card.mid { --card-h-mid: clamp(80px, 16vh, 170px); }
.pk-pot { font-weight: 800; font-size: 16px; } .pk-pot b { color: var(--gold); }
.pk-street { font-family: 'Pirata One', serif; color: var(--gold); font-size: 20px; }
.pk-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pk-seat.folded .seat { opacity: .45; }
.pk-seat.out .seat { opacity: .3; filter: grayscale(1); }
.pk-show { display: flex; gap: 3px; }
.pk-chips { color: var(--parch); font-weight: 800; }
.pk-bet { background: rgba(230,180,80,.25); color: var(--gold); font-weight: 800; padding: 0 6px; border-radius: 8px; }
.won { color: var(--ok); font-weight: 900; }
.cat { color: var(--gold); font-weight: 800; }
.dealer-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #111; font-weight: 900; font-size: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.blind { background: #2b5ea8; color: #fff; font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 6px; }
.pk-hand { gap: 10px; }
.raise-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.raise-box input[type=range] { width: min(220px, 60vw); accent-color: var(--gold); }
.raise-quick { display: flex; gap: 4px; }

/* ---------- Barre latérale ---------- */
.sidebar { display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.06); background: rgba(5,15,25,.92); min-height: 0; }
.tabs { display: flex; }
.tabs button { flex: 1; padding: 10px; background: transparent; color: var(--muted); font-weight: 800; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--gold); border-bottom-color: var(--gold); }
.tabs .close-side { flex: none; display: none; }
.side-body { flex: 1; overflow: auto; padding: 10px 12px; font-size: 14px; }
.log-line { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: #c7d4de; }
.chat-line b { color: var(--gold); }
.chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.chat-form input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: var(--text); outline: none; font-size: 16px; }
@media (max-width: 1100px) {
  .table-area { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; inset: 0 0 0 auto; width: min(360px, 92vw); z-index: 60; box-shadow: -10px 0 30px rgba(0,0,0,.5); animation: slideIn .2s ease; }
  .tabs .close-side { display: block; }
}
@keyframes slideIn { from { transform: translateX(100%); } }

/* ---------- Modales ---------- */
.overlay { position: fixed; inset: 0; background: rgba(2,8,14,.65); display: grid; place-items: center; z-index: 50; padding: 12px; backdrop-filter: blur(3px); animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: 92vh; max-height: 92dvh; overflow: auto; padding: 20px; }
.modal.wide { width: min(900px, 100%); }
.modal h2 { margin: 0 0 6px; font-size: 30px; color: var(--gold); }
.modal h3 { color: var(--gold); font-size: 22px; margin: 16px 0 4px; }
.modal p { color: #c9d6e0; margin: 6px 0 12px; }
.bid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; margin: 12px 0; }
.bid-grid button { padding: 14px 0; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 22px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bid-grid button.on { background: var(--gold); color: #2a1a05; }
.cannon { display: flex; gap: 8px; margin: 8px 0 14px; }
.cannon button { flex: 1; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cannon button.on { background: var(--gold); color: #2a1a05; }
.cannon small { display: block; font-weight: 600; opacity: .8; font-size: 12px; }
.choice-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
table.scores { width: 100%; border-collapse: collapse; font-size: 14px; }
table.scores th, table.scores td { padding: 7px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.07); }
table.scores th { color: var(--gold); font-weight: 800; position: sticky; top: 0; background: #0f2a40; }
table.scores td.l, table.scores th.l { text-align: left; }
table.scores tr.tot td { border-top: 2px solid rgba(230,180,80,.4); }
.pos { color: var(--ok); font-weight: 800; } .neg { color: var(--danger); font-weight: 800; }
.sub { font-size: 11px; color: var(--muted); display: block; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 16px 0 20px; }
.podium > div { text-align: center; padding: 10px; border-radius: 12px 12px 0 0; background: rgba(230,180,80,.15); min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.podium > .p1 { min-height: 170px; background: rgba(230,180,80,.35); } .podium > .p2 { min-height: 140px; } .podium > .p3 { min-height: 120px; }
.podium .medal { font-size: 26px; }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.help-grid p { margin: 0; }
#toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); background: #2a1010; color: #ffd9d4; border: 1px solid var(--danger); padding: 10px 16px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; }
#toast.ok { background: #10291c; color: #c9f5da; border-color: var(--ok); }

/* ---------- Animations ---------- */
.a-deal { animation: a-deal .5s cubic-bezier(.2,.85,.25,1) backwards; }
@keyframes a-deal { from { transform: translate(0, -42vh) rotate(-14deg) scale(.55); opacity: 0; } }
.a-play-up { animation: a-play-up .38s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes a-play-up { from { transform: translateY(32vh) scale(.85) rotate(6deg); opacity: 0; } }
.a-play-down { animation: a-play-down .38s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes a-play-down { from { transform: translateY(-26vh) scale(.8) rotate(-6deg); opacity: 0; } }
.a-from { animation: a-from .38s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes a-from { from { transform: translate(var(--from)) scale(.8); opacity: 0; } }
.a-pop { animation: a-pop .35s cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes a-pop { from { transform: scale(.5); opacity: 0; } }
.a-flip { animation: a-flip .45s ease backwards; }
@keyframes a-flip { from { transform: rotateY(90deg) scale(.9); } }
.a-rise { animation: a-rise .3s ease backwards; }
@keyframes a-rise { from { transform: translateY(14px); opacity: 0; } }
.a-collect { animation: a-collect .5s ease-in forwards; }
@keyframes a-collect { to { transform: translate(var(--cx, 0px), var(--cy, -30vh)) scale(.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition: none !important; } }

/* ---------- Téléphone ---------- */
@media (max-width: 700px), (max-height: 560px) {
  :root { --card-h: clamp(104px, 20vh, 180px); --card-h-mid: clamp(80px, 14vh, 140px); }
  .topbar { padding: 6px 8px; gap: 5px; }
  .topbar .title { font-size: 18px; }
  .topbar .btn.small { padding: 5px 8px; font-size: 12px; }
  .hide-sm { display: none; }
  .chip { font-size: 12px; padding: 4px 8px; }
  .felt { padding: 8px 6px; gap: 6px; }
  .opponents { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; scrollbar-width: thin; }
  .opponents > * { flex: none; }
  .seat { min-width: 0; padding: 5px 7px; }
  .seat .nm { font-size: 13px; max-width: 110px; }
  .seat .stats { font-size: 11px; gap: 5px; }
  .avatar.seat-av { width: 34px; height: 34px; }
  .fan .card.tiny { --card-h: 24px; --card-w: calc(24px * var(--card-ar)); }
  .fan .card + .card { margin-left: -12px; }
  .status { font-size: 15px; }
  .hand-head { font-size: 12px; margin-bottom: 2px; }
  .hand { padding-top: 10px; }
  .hand .card.picked { translate: 0 -16px; }
  .action-bar { padding: 6px; gap: 6px; }
  .action-bar .btn { padding: 8px 12px; font-size: 14px; }
  .action-bar > span { font-size: 12px; width: 100%; text-align: center; }
  .btn-plate { min-width: 200px; height: 54px; font-size: 22px; }
  .panel.framed { border-width: 40px 34px; border-image-width: 40px 34px; }
  .cross { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 4px; }
  .cross .seat .stats { flex-direction: column; gap: 2px; align-items: flex-start; }
  .cross .seat .nm { max-width: 80px; }
  .cross .fan { display: none; }
  .tp-w { translate: -78% -50%; } .tp-e { translate: -22% -50%; }
  .pr-play > .card + .card { margin-left: calc(var(--card-h-mid) * -.5); }
  .sky-grid.mini .card { --card-h: 32px; --card-w: calc(32px * var(--card-ar)); }
  .sky-grid.big .card { --card-h: clamp(56px, 9vh, 96px); }
  .color-ring { width: 54px; height: 54px; font-size: 11px; }
  .dir { font-size: 26px; }
  .meld { --mh: 56px; }
  .pk-table { border-radius: 26px; padding: 10px; }
  .pk-board { gap: 3px; }
  .modal { padding: 14px; }
  .modal h2 { font-size: 24px; }
  .help-grid { grid-template-columns: 70px 1fr; } .help-grid .card.small { --card-h: 90px; --card-w: calc(90px * var(--card-ar)); }
  table.scores { font-size: 12px; } table.scores th, table.scores td { padding: 5px 4px; }
  .podium > div { min-width: 76px; } .avatar.pod { width: 48px; height: 48px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  :root { --card-h: clamp(68px, 23vh, 130px); --card-h-mid: clamp(54px, 18vh, 100px); }
  .topbar { padding: 3px 8px; }
  .topbar .btn.small { padding: 3px 8px; }
  .felt { padding: 4px 6px; gap: 4px; }
  .seat { padding: 3px 7px; display: flex; align-items: center; gap: 6px; }
  .seat-top { margin: 0; }
  .seat-top .fan { display: none; }
  .avatar.seat-av { width: 26px; height: 26px; }
  .seat .nm { font-size: 12px; max-width: 90px; }
  .seat .stats { font-size: 10px; margin: 0; }
  .status { font-size: 13px; min-height: 0; }
  .hand-head { font-size: 11px; margin: 0; }
  .hand { padding-top: 6px; }
  .hand-bar { padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
  .action-bar { margin-bottom: 4px; padding: 4px; }
  .action-bar > span { width: auto; }
  .trick-zone { min-height: 0; gap: 4px; }
  .uno-center { margin-top: 4px; padding-bottom: 8px; }
  .cross { gap: 2px; }
  .cross .seat .stats { flex-direction: row; }
  .sky-grid.mini .card { --card-h: 24px; --card-w: calc(24px * var(--card-ar)); }
  .sky-grid.big .card { --card-h: 13vh; }
  .pk-table { padding: 4px 12px; gap: 2px; }
  .pk-street { font-size: 14px; }
}

/* ===== Mise à jour : police lisible, nouvelles cartes, fonds ===== */
.card .num { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 900; }
.card .plate { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 900; letter-spacing: 0; }
.card .idx { font-family: 'Nunito', system-ui, sans-serif !important; font-weight: 900; }
.card .idx b { font-weight: 900; }

/* cartes classiques : chiffres sur face crème, figures illustrées */
.card.std { border-radius: calc(var(--card-w) * .07); }
.card.std .nc, .card.std .fc { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: .95; pointer-events: none; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; }
.card.std .nc b, .card.std .fc b { font-size: 15cqh; letter-spacing: -.04em; }
.card.std .nc i, .card.std .fc i { font-style: normal; font-size: 11cqh; margin-top: -.5cqh; }
.card.std .nc.tl { left: 6%; top: 3.5%; width: 20%; }
.card.std .nc.br { right: 6%; bottom: 3.5%; width: 20%; transform: rotate(180deg); }
.card.std .fc.tl { left: 1.5%; top: 1%; width: 16%; height: 13%; justify-content: center; }
.card.std .fc.br { right: 1.5%; bottom: 1%; width: 16%; height: 13%; justify-content: center; transform: rotate(180deg); }
.card.std .fc b { font-size: 9cqh; } .card.std .fc i { font-size: 7cqh; }
.card.std.ink-light .fc { color: #fbf2da !important; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.card.std.ink-light.red .fc i { color: #ff6b6b !important; }
.card.std.ink-dark .fc { color: #1d1408 !important; }
.card.std.ink-dark.red .fc i { color: #b3121f !important; }
.card.std .pips { position: absolute; left: 14%; right: 14%; top: 9%; bottom: 9%; pointer-events: none; }
.card.std .pip { position: absolute; font-style: normal; font-size: 15cqh; line-height: 1; transform: translate(-50%, -50%); }
.card.std .pip.down { transform: translate(-50%, -50%) rotate(180deg); }
.card.std.ace .pip { font-size: 44cqh; }
.card.std.red .nc, .card.std.red .pip { color: #c0121f; }
.card.std.blk .nc, .card.std.blk .pip { color: #161616; }
.card.std .idx { background: rgba(255,250,235,.97); }

/* interrupteurs : indication ON / OFF */
.tg-wrap { display: flex; align-items: center; gap: 8px; flex: none; }
.tg-state { min-width: 42px; text-align: center; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13px; padding: 3px 8px; border-radius: 999px; letter-spacing: .05em; transition: background .2s, color .2s; }
.tg-state.on { background: #2f8a4c; color: #eafff0; box-shadow: 0 0 10px rgba(47,138,76,.6); }
.tg-state.off { background: rgba(60,35,10,.25); color: #5a3a1a; }

/* cadre du titre */
.title-plate { background: url(img/ui/title-frame.webp) center / 100% 100% no-repeat; padding: .5em 1.6em .55em; display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto !important; min-width: min(560px, 70vw); filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.title-plate span { font-family: 'Pirata One', Georgia, serif; color: #f2cf73; text-shadow: 0 2px 0 #3d2a06, 0 0 18px rgba(230,180,80,.35); line-height: 1; }
.app-head { justify-content: center; position: relative; }
.app-head > .btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.app-head .head-btns { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.app-head h1.title-plate { font-size: clamp(22px, 4.6vw, 40px); }
.join .title-plate { min-width: 0; width: 100%; font-size: clamp(24px, 6vw, 36px); margin: 6px 0 4px; }
.join .title-plate span { color: #f2cf73; }

/* fonds coffre / tonneaux */
body.bg-home { background: #07131f url(img/ui/bg-taverne.webp) center / cover no-repeat fixed; }
body.bg-home::before { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(4,12,22,.25), rgba(4,12,22,.55)); pointer-events: none; z-index: 0; }
body.bg-home #app { position: relative; z-index: 1; }
body.bg-home .home-sub, body.bg-home .home-crew, body.bg-home .home .share { color: #dfe8ef; text-shadow: 0 1px 4px #000; }
@media (max-aspect-ratio: 1/1) { body.bg-home { background-image: url(img/ui/bg-phone.webp); background-attachment: scroll; background-size: cover; } }
@media (max-width: 760px) {
  .app-head { flex-direction: column; }
  .app-head > .btn, .app-head .head-btns { position: static; transform: none; }
  .app-head { flex-direction: row; flex-wrap: wrap; }
  .app-head h1.title-plate { order: -1; width: 100%; min-width: 0; }
}
.card.std.dense .pip { font-size: 12.5cqh; }

/* ===== Mise à jour 3 ===== */
/* pseudo */
.name-box { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 auto 12px; padding: 8px 14px; background: rgba(4,12,22,.6); border: 1px solid rgba(230,180,80,.35); border-radius: 999px; width: fit-content; max-width: 100%; color: #e6edf3; }
.name-box b { color: var(--gold); }
.name-box.editing { border-radius: 16px; }
.name-box .field { margin: 0; width: 220px; padding: 8px 12px; font-size: 16px; }

/* Roi des pirates : qui commence */
.starter-info { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -4px 0 8px; padding: 6px 12px; border-radius: 999px; background: rgba(230,180,80,.12); border: 1px solid rgba(230,180,80,.35); width: fit-content; margin-left: auto; margin-right: auto; }
.starter-tag { background: var(--gold); color: #2a1a05; font-weight: 900; font-size: 11px; padding: 1px 7px; border-radius: 999px; }
.seat.starts { box-shadow: 0 0 0 2px rgba(230,180,80,.55); }

/* Belote : score en direct */
.live-score { display: flex; gap: 8px; }
.ls { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 4px 10px; border-radius: 12px; background: rgba(0,0,0,.4); line-height: 1.1; }
.ls span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.ls b { font-size: 24px; font-weight: 900; transition: color .3s; }
.ls small { font-size: 11px; color: var(--muted); }
.ls.us { box-shadow: inset 0 0 0 2px rgba(71,196,126,.55); } .ls.us span { color: #8ff0b8; }
.ls.them { box-shadow: inset 0 0 0 2px rgba(226,87,76,.55); } .ls.them span { color: #ffb3ab; }
b.live { color: var(--gold) !important; }

/* revoir le dernier pli */
.lt-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.lt-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-card .who, .lt-line span { display: flex; align-items: center; gap: 5px; font-weight: 700; color: var(--parch); }
.lt-card.winner .card { filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 14px rgba(230,180,80,.8)); }
.lt-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.lt-line { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.2); }
.lt-line.winner { box-shadow: inset 0 0 0 2px var(--gold); }
.lt-line.pass { color: var(--muted); font-style: italic; }
.lt-cards { display: flex; gap: 4px; margin-left: auto; }
.lt-cards .card.small { --card-h: 74px; --card-w: calc(74px * var(--card-ar)); }

/* résultats */
.results { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.res-row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) auto minmax(110px, 30%); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); animation: resIn .45s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: var(--d); }
@keyframes resIn { from { opacity: 0; transform: translateX(-24px); } }
.res-row.first { background: linear-gradient(90deg, rgba(230,180,80,.28), rgba(230,180,80,.06)); border-color: rgba(230,180,80,.55); }
.res-row.me { box-shadow: inset 4px 0 0 var(--ok); }
.res-rank { font-size: 22px; font-weight: 900; text-align: center; color: var(--muted); }
.avatar.res-av { width: 44px; height: 44px; }
.res-name { display: flex; flex-direction: column; min-width: 0; }
.res-name b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-name small { font-size: 12px; color: var(--muted); }
.res-delta { font-size: 20px; font-weight: 900; min-width: 56px; text-align: right; }
.res-delta.good { color: var(--ok); } .res-delta.bad { color: var(--danger); }
.res-total { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.res-total b { font-size: 22px; font-weight: 900; color: var(--gold); min-width: 46px; text-align: right; }
.res-total small { font-size: 11px; color: var(--muted); }
.res-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; min-width: 40px; }
.res-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold)); animation: barIn .9s ease-out backwards; animation-delay: .25s; }
@keyframes barIn { from { width: 0 !important; } }
.res-more { margin-top: 8px; }
.res-more summary { cursor: pointer; color: var(--gold); font-weight: 800; padding: 6px 0; }
.team-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.team-res { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); animation: resIn .45s ease backwards; }
.team-res.us { box-shadow: inset 0 0 0 2px rgba(71,196,126,.55); } .team-res.them { box-shadow: inset 0 0 0 2px rgba(226,87,76,.5); animation-delay: .1s; }
.team-res.lead { background: linear-gradient(180deg, rgba(230,180,80,.22), rgba(230,180,80,.04)); }
.tr-av { display: flex; gap: 4px; }
.tr-name { font-weight: 900; font-size: 18px; text-align: center; display: flex; flex-direction: column; }
.tr-name small { font-size: 12px; color: var(--muted); font-weight: 600; }
.tr-delta { font-size: 30px; font-weight: 900; color: var(--ok); }
.tr-total { display: flex; align-items: center; gap: 6px; width: 100%; }
.tr-total b { font-size: 22px; color: var(--gold); } .tr-total small { color: var(--muted); }
.big-title { font-size: 40px !important; }
@media (max-width: 600px) {
  .res-row { grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 6px; padding: 6px 8px; }
  .res-total { grid-column: 2 / -1; }
  .avatar.res-av { width: 34px; height: 34px; }
  .res-delta { font-size: 16px; } .res-total b { font-size: 18px; }
  .team-results { gap: 6px; } .tr-delta { font-size: 22px; }
}

/* Poker : table ovale, jetons */
.g-poker .felt { padding: 6px; }
.pk-arena { position: relative; width: 100%; flex: 1; min-height: 430px; }
.pk-oval { position: absolute; left: 8%; right: 8%; top: 12%; bottom: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, #22774f, #0e3d28 72%); box-shadow: inset 0 0 0 10px #5a3a18, inset 0 0 0 14px #c9a24a, inset 0 0 50px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.5); }
.pk-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70%; }
.pk-center .status { font-size: 15px; }
.pk-board { display: flex; gap: 6px; }
.pk-board .card.mid { --card-h-mid: clamp(70px, 15vh, 160px); }
.pk-pot { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; background: rgba(0,0,0,.35); padding: 3px 12px; border-radius: 999px; }
.pk-pot b { color: var(--gold); }
.pk-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 3; }
.pk-seat .seat { min-width: 0; padding: 5px 8px; }
.pk-seat .seat .stats { flex-direction: column; gap: 2px; align-items: flex-start; }
.pk-seat.pk-me .seat { background: rgba(71,196,126,.18); }
.pk-betspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.a-chip { animation: a-chip .45s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes a-chip { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.chips-pile { display: inline-flex; align-items: flex-end; gap: 3px; }
.chips-pile b { margin-left: 4px; font-size: 13px; font-weight: 900; color: #fff; background: rgba(0,0,0,.6); padding: 1px 7px; border-radius: 999px; align-self: center; }
.chip-stack { position: relative; width: 22px; height: calc(10px + var(--n, 5) * 0px); display: inline-block; }
.chip-stack { height: 30px; }
.pchip { position: absolute; left: 0; bottom: calc(var(--i) * 4px); width: 22px; height: 9px; border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 2px var(--c2), 0 1px 0 rgba(0,0,0,.6); }
.pchip::after { content: ''; position: absolute; inset: 2px 5px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.85); }
.c-w { --c1: #f2f2f2; --c2: #9aa4ad; } .c-r { --c1: #d32f2f; --c2: #7f1414; } .c-g { --c1: #2e9d4f; --c2: #145a28; }
.c-b { --c1: #1f2a37; --c2: #6b7a8a; } .c-p { --c1: #7b3fb5; --c2: #431f66; } .c-k { --c1: #e2b23c; --c2: #8a6512; }
.chips-pile.big .chip-stack { width: 30px; height: 40px; } .chips-pile.big .pchip { width: 30px; height: 12px; bottom: calc(var(--i) * 5px); }
.pk-actions { flex-direction: column; gap: 8px; }
.pk-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.raise-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 520px; }
.raise-amount { display: flex; align-items: center; gap: 10px; }
.raise-amount .cv { width: 40px; height: 40px; font-size: 22px; padding: 0; }
.ra-val { display: flex; flex-direction: column; align-items: center; min-width: 130px; background: rgba(0,0,0,.45); border: 1px solid rgba(230,180,80,.5); border-radius: 12px; padding: 2px 14px; }
.ra-val small { font-size: 11px; color: var(--muted); font-weight: 800; text-transform: uppercase; }
.ra-val b { font-size: 26px; color: var(--gold); font-weight: 900; }
.raise-box input[type=range] { width: 100%; height: 28px; accent-color: var(--gold); }
.raise-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
@media (max-width: 700px), (max-height: 560px) {
  .pk-arena { min-height: 360px; }
  .pk-oval { left: 4%; right: 4%; top: 14%; bottom: 14%; }
  .pk-center { width: 92%; gap: 3px; }
  .pk-board { gap: 2px; }
  .pk-board .card.mid { --card-h-mid: clamp(54px, 10vh, 100px); }
  .pk-seat .seat .nm { max-width: 76px; font-size: 11px; }
  .pk-seat .avatar.seat-av { width: 26px; height: 26px; }
  .pk-seat .seat .stats { font-size: 10px; }
  .pk-street { font-size: 13px; }
  .ra-val b { font-size: 20px; }
}

/* ramassage vers le gagnant */
.a-collect { animation: a-collect .55s cubic-bezier(.5,0,.75,0) forwards !important; }
@keyframes a-collect { to { transform: translate(var(--cx, 0px), var(--cy, -30vh)) scale(.3) rotate(8deg); opacity: 0; } }

.pk-oval { top: 9%; bottom: 15%; }
.pk-center { top: 47%; }
.pk-board .card.mid { --card-h-mid: clamp(80px, 19vh, 200px); }
@media (max-width: 700px) {
  .pk-arena { min-height: 470px; }
  .pk-oval { left: 6%; right: 6%; top: 7%; bottom: 13%; }
  .pk-board .card.mid { --card-h-mid: clamp(56px, 9vh, 90px); }
  .raise-box { gap: 4px; }
  .raise-amount .cv { width: 34px; height: 34px; }
  .pk-actions .btn { padding: 7px 10px; font-size: 13px; }
}

.pk-arena { --rx: 44%; --ry: 40%; --bx: 28%; --by: 25%; }
.pk-seat { left: calc(50% + var(--cx) * var(--rx)); top: calc(47% + var(--cy) * var(--ry)); }
.pk-betspot { left: calc(50% + var(--cx) * var(--bx)); top: calc(47% + var(--cy) * var(--by)); }
@media (max-width: 700px) {
  .pk-arena { --rx: 34%; --ry: 42%; --bx: 22%; --by: 27%; }
  .pk-show .card.tiny-std { --card-h: 38px; --card-w: calc(38px * var(--card-ar)); }
  .pk-seat .seat { padding: 3px 5px; }
  .pk-seat .bubble { font-size: 10px; padding: 0 5px; }
}

/* ===== Mise à jour 4 : animations douces, fenêtres plus riches ===== */
/* une animation d'apparition ne rejoue pas quand l'écran est redessiné */
.still, .overlay.still, .overlay.still *:not(.a-collect) { animation: none !important; }

/* entrée des fenêtres : fondu + légère montée, sans rebond */
.overlay { animation: ovIn .28s ease-out; background: radial-gradient(ellipse at center, rgba(2,8,14,.45), rgba(2,8,14,.78)); }
@keyframes ovIn { from { opacity: 0; } }
.overlay > .modal, .overlay > .modal.a-pop { animation: modalIn .36s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.a-pop { animation-name: a-pop-soft; animation-duration: .3s; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
@keyframes a-pop-soft { from { transform: scale(.85); opacity: 0; } }

/* habillage des fenêtres */
.modal {
  background: radial-gradient(ellipse 120% 70% at 50% 0%, #21486b 0%, #12304a 45%, #0a1c2c 100%);
  border: 2px solid #b88a2c; border-radius: 20px;
  box-shadow: inset 0 0 0 5px #0c2133, inset 0 0 0 6px rgba(230,180,80,.4), 0 24px 70px rgba(0,0,0,.65);
  padding: 18px 22px 22px; position: relative;
}
.modal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 12% 18%, rgba(230,180,80,.12), transparent 30%), radial-gradient(circle at 88% 82%, rgba(71,140,196,.15), transparent 35%); }
.modal > * { position: relative; }
.modal > h2:first-child { display: table; margin: -2px auto 12px; padding: .38em 1.8em .48em; background: url(img/ui/title-frame.webp) center / 100% 100% no-repeat; color: #f2cf73; text-shadow: 0 2px 0 #3d2a06; font-size: 28px; line-height: 1.1; text-align: center; max-width: 100%; }
.modal > p { text-align: center; }
.modal .mini-hand { padding: 14px 10px; margin: 6px 0 14px; border-radius: 16px; background: radial-gradient(ellipse at center, rgba(31,107,70,.55), rgba(13,58,38,.35) 70%, transparent); box-shadow: inset 0 0 0 1px rgba(230,180,80,.2); }
.modal .mini-hand .card.small { --card-h: clamp(110px, 20vh, 170px); --card-w: calc(var(--card-h) * var(--card-ar)); }
/* jetons de pari */
.bid-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 16px; }
.bid-grid button { width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 22px; font-weight: 900; color: #f2cf73;
  background: radial-gradient(circle at 35% 30%, #355a7c, #14304a 70%); box-shadow: inset 0 0 0 3px rgba(230,180,80,.55), inset 0 0 0 6px #14304a, inset 0 0 0 7px rgba(230,180,80,.25), 0 4px 10px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease; }
.bid-grid button:hover { transform: translateY(-3px); }
.bid-grid button.on { color: #2a1a05; background: radial-gradient(circle at 35% 30%, #ffe08a, #c99a34 70%); box-shadow: inset 0 0 0 3px #7a5a1a, 0 0 0 3px rgba(230,180,80,.35), 0 6px 16px rgba(230,180,80,.45); transform: translateY(-3px) scale(1.08); }
.btn-plate:disabled { filter: grayscale(.4) brightness(.75); }
.starter-info { color: #e6edf3; }
@media (max-width: 600px) { .bid-grid button { width: 48px; height: 48px; font-size: 19px; } .modal > h2:first-child { font-size: 22px; } }

/* poker : victoire */
.pk-win { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pk-win-one { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(230,180,80,.35), rgba(0,0,0,.55)); border: 1px solid rgba(230,180,80,.6); box-shadow: 0 0 24px rgba(230,180,80,.3); }
.pk-win-one span { display: flex; flex-direction: column; line-height: 1.15; }
.pk-win-one small { color: #e6edf3; font-size: 12px; }
.pk-win-one .gold { color: var(--gold); }

.pk-win-one span { white-space: nowrap; }
.pk-center { top: 53%; }
.pk-win-one { padding: 5px 14px 5px 5px; }

.pk-win-one em { font-style: normal; white-space: nowrap; }
.pk-center { top: 49%; }
.pk-board .card.mid { --card-h-mid: clamp(70px, 15.5vh, 190px); }
.pk-seat.pk-me { transform: translate(-50%, -28%); }

/* ===== Mise à jour 5 : carte joueur, avatars, paramètres ===== */
.icon-btn { min-width: 34px; }
.music-btn.off { opacity: .6; }
.home { width: min(1120px, 100%); }
.home-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.home-main { min-width: 0; }
.player-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; position: sticky; top: 14px; }
.pc-avatar { position: relative; background: none; padding: 0; border-radius: 50%; transition: transform .15s; }
.pc-avatar:hover { transform: scale(1.04); }
.avatar.pc-av { width: 128px; height: 128px; box-shadow: 0 0 0 4px var(--gold-2), 0 0 0 6px rgba(0,0,0,.5), 0 8px 18px rgba(0,0,0,.5); }
.pc-edit { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background: var(--gold); color: #2a1a05; font-weight: 900; font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.pc-name { font-family: 'Pirata One', Georgia, serif; font-size: 30px; color: #4a2c0c; line-height: 1; margin-top: 6px; word-break: break-word; }
.pc-rename { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pc-rename .field { margin: 0; text-align: center; }
.pc-row { display: flex; gap: 6px; justify-content: center; }
.pc-sep { width: 80%; height: 1px; background: rgba(90,60,20,.3); margin: 4px 0; }
.pc-line { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; font-weight: 800; color: var(--ink); }
.pc-line .toggle { width: 84px; height: 36px; }
@media (max-width: 860px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .player-card { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .avatar.pc-av { width: 84px; height: 84px; }
  .pc-sep { display: none; }
  .pc-line { width: auto; }
}
.lobby-av { display: flex; align-items: center; gap: 14px; background: rgba(80,50,15,.1); border-radius: 16px; padding: 10px 14px; width: 100%; text-align: left; transition: background .15s; }
.lobby-av:hover { background: rgba(184,138,44,.22); }
.lobby-av .avatar.pc-av { width: 92px; height: 92px; }
.lobby-av span { display: flex; flex-direction: column; color: var(--ink); }
.lobby-av b { font-size: 20px; } .lobby-av small { color: var(--ink-2); }
.av-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; padding: 4px; }
.av-picker .av-pick { background: rgba(255,255,255,.06); }
.av-picker .av-pick .avatar { width: 72px; height: 72px; }
.av-picker .av-pick.on { background: rgba(230,180,80,.25); }
@media (max-width: 600px) { .av-picker { grid-template-columns: repeat(4, 1fr); gap: 6px; } .av-picker .av-pick .avatar { width: 58px; height: 58px; } }
.set-block { margin: 10px 0 16px; }
.set-block h3 { margin: 0 0 8px !important; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { flex: 1; min-width: 110px; padding: 12px 10px; border-radius: 12px; font-weight: 800; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.seg button.on { background: var(--gold); color: #2a1a05; }
.modal .opt { border-bottom-color: rgba(255,255,255,.08); }
.modal .tg-state.off { background: rgba(255,255,255,.12); color: #c9d6e0; }
input.vol { width: min(220px, 50vw); accent-color: var(--gold); }

/* ===== Écrans de menu à l'échelle de la fenêtre ===== */
body.fitted { overflow: hidden; height: 100vh; height: 100dvh; }
.fit-screen { width: 100%; overflow: hidden; }
.fit-screen > * { transform-origin: top center; }
body.fitted .center-screen { min-height: 0; padding: 24px 16px; }
body.fitted .home, body.fitted .lobby { padding-bottom: 16px; }
/* table de jeu : jamais de défilement de la page */
html, body { overscroll-behavior: none; }
.game { overflow: hidden; }

/* ===== Lecteur de musique & crédits ===== */
.music-btn.playing { box-shadow: inset 0 0 0 1px var(--gold), 0 0 10px rgba(230,180,80,.4); }
.music-pop { position: fixed; top: 56px; right: 12px; z-index: 70; width: min(330px, calc(100vw - 24px)); padding: 12px 14px 10px; border-radius: 16px;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #21486b, #0c2133 75%); border: 2px solid #b88a2c;
  box-shadow: inset 0 0 0 4px #0c2133, inset 0 0 0 5px rgba(230,180,80,.35), 0 18px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; }
.mp-head { display: flex; justify-content: space-between; align-items: center; }
.mp-head b { font-family: 'Pirata One', Georgia, serif; font-size: 22px; color: var(--gold); font-weight: 400; }
.mp-x { background: rgba(255,255,255,.08); width: 28px; height: 28px; border-radius: 50%; }
.mp-now { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.3); }
.mp-now span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mp-now b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-now small { color: var(--muted); }
.mp-eq { display: flex; align-items: flex-end; gap: 2px; height: 18px; width: 18px; flex: none; }
.mp-eq i { flex: 1; background: var(--gold); height: 30%; border-radius: 1px; }
.mp-now.on .mp-eq i { animation: eq .9s ease-in-out infinite alternate; }
.mp-now.on .mp-eq i:nth-child(2) { animation-delay: -.3s; } .mp-now.on .mp-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.mp-ctrl { display: flex; gap: 8px; } .mp-ctrl .btn { flex: 1; padding: 9px 10px; }
.mp-pl button { min-width: 0; padding: 8px; }
.mp-vol { display: flex; align-items: center; gap: 8px; }
.mp-vol input { flex: 1; accent-color: var(--gold); }
.mp-volv { font-weight: 800; color: var(--gold); min-width: 38px; text-align: right; font-size: 13px; }
.mp-credits { background: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
.g-skullking .music-pop, .game ~ .music-pop { top: 50px; }
.pc-music { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: rgba(80,50,15,.12); text-align: left; color: var(--ink); }
.pc-music > span:first-child { font-size: 22px; }
.pc-music.on { background: rgba(184,138,44,.28); box-shadow: inset 0 0 0 2px var(--gold-2); }
.pcm-t { display: flex; flex-direction: column; min-width: 0; }
.pcm-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .pcm-t small { color: var(--ink-2); font-size: 12px; }
.credits { display: grid; gap: 8px; margin: 6px 0 14px; }
.cr-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); }
.cr-line > span { font-size: 24px; }
.cr-line div { display: flex; flex-direction: column; } .cr-line small { color: #c9d6e0; font-size: 14px; }
.credits a, .cr-tracks a { color: var(--gold); }
.cr-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.cr-tracks ul { margin: 0; padding-left: 18px; color: #e6edf3; } .cr-tracks li { margin: 3px 0; } .cr-tracks small { color: var(--muted); }
.cr-tracks p { grid-column: 1 / -1; }
@media (max-width: 600px) { .cr-tracks { grid-template-columns: 1fr; } }
/* accueil : bannières sur 2 colonnes en grand écran pour tenir dans la fenêtre */
.home { width: min(1500px, 100%); }
@media (min-width: 1000px) { .home .banner-list { grid-template-columns: 1fr 1fr; gap: 12px; } .home-grid { grid-template-columns: 270px minmax(0, 1fr); } }
.banner-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(4,14,26,.75), rgba(4,14,26,.35) 45%, transparent 65%); pointer-events: none; }
.bn-text { z-index: 2; }

/* poker téléphone : plateau plus compact (après les règles générales) */
@media (max-width: 700px) {
  .pk-board .card.mid { --card-h-mid: clamp(50px, 8.5vh, 84px); }
  .pk-show .card.tiny-std { --card-h: 32px; --card-w: calc(32px * var(--card-ar)); }
  .pk-win-one { padding: 3px 10px 3px 3px; font-size: 13px; }
  .pk-win-one .avatar.sm { width: 26px; height: 26px; }
  .pk-center { width: 70%; }
}
/* poker téléphone : la table occupe la place disponible, panneau de mise compact */
@media (max-width: 700px), (max-height: 560px) {
  .g-poker .felt { overflow: hidden; }
  .pk-arena { min-height: 300px; height: 100%; }
  .g-poker .hand-bar .card { --card-h: clamp(70px, 11vh, 110px); --card-w: calc(var(--card-h) * var(--card-ar)); }
  .g-poker .hand { padding-top: 4px; }
  .pk-actions { padding: 6px; gap: 4px; margin-bottom: 4px; }
  .pk-actions .btn { padding: 6px 10px; font-size: 13px; }
  .raise-box { gap: 3px; }
  .raise-amount { gap: 6px; }
  .raise-amount .cv { width: 30px; height: 30px; font-size: 18px; }
  .ra-val { min-width: 100px; padding: 0 10px; }
  .ra-val small { font-size: 9px; } .ra-val b { font-size: 18px; }
  .raise-box input[type=range] { height: 20px; }
  .raise-quick .cv { padding: 5px 8px; font-size: 12px; }
}

@media (max-width: 700px) {
  .pk-arena { --rx: 38%; --bx: 38%; }
  .pk-betspot { top: var(--py); }
  .pk-seat .seat { max-width: 96px; }
  .pk-seat .seat .nm { max-width: 70px; }
  .pk-seat .bubble { max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .pk-board { gap: 2px; }
  .chips-pile b { font-size: 11px; padding: 0 5px; }
  .chip-stack { width: 18px; } .pchip { width: 18px; height: 7px; bottom: calc(var(--i) * 3px); }
}
@media (max-width: 700px) { .pk-seat.pk-me { transform: translate(-50%, -62%); } .pk-arena { --ry: 40%; } }


/* ===== Nouveaux jeux ===== */
/* bannières provisoires (en attendant les illustrations) */
.cb-blackjack { background: radial-gradient(ellipse at 75% 50%, #2c2c6e, #14143a 60%, #090920); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.cb-menteur { background: radial-gradient(ellipse at 75% 50%, #7a2c2c, #3e1212 60%, #1e0808); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.cb-petitbac { background: radial-gradient(ellipse at 75% 50%, #2b7a8a, #12414c 60%, #082228); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.cb-blancmanger { background: radial-gradient(ellipse at 75% 50%, #555, #222 60%, #0c0c0c); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.cb-nomdecode { background: linear-gradient(110deg, #0b1220 40%, #6b1b1b 70%, #12306b); box-shadow: inset 0 0 0 3px #c9a24a, 0 6px 18px rgba(0,0,0,.4); }
.cb-menteur .pk-deco i, .cb-petitbac .pk-deco i, .cb-blancmanger .pk-deco i, .cb-nomdecode .pk-deco i, .cb-blackjack .pk-deco i { font-weight: 900; font-size: clamp(16px, 4.6vw, 40px); color: #161616; }
.cb-blancmanger .pk-deco i:nth-child(odd) { background: #111; color: #fff; }

/* Blackjack */
.pk-seat-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bj-mini { display: flex; } .bj-mini .card + .card { margin-left: -18px; }
.bj-zone { gap: 10px; }
.bj-dealer { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 18px 14px; border-radius: 0 0 50% 50% / 0 0 30% 30%; background: radial-gradient(ellipse at top, rgba(255,255,255,.08), transparent 70%); }
.bj-dealer-tag { font-weight: 800; color: var(--parch); } .bj-dealer-tag b { color: var(--gold); font-size: 18px; }
.bj-cards { display: flex; gap: 6px; } .bj-cards .card + .card { margin-left: calc(var(--card-h-mid) * -.28); }
.bj-rule { font-family: 'Pirata One', serif; color: rgba(230,180,80,.75); font-size: 18px; letter-spacing: .05em; text-align: center; }
.bj-tot { background: #fff; color: #111; font-weight: 900; padding: 0 7px; border-radius: 999px; }
.bj-tot.bust { background: var(--danger); color: #fff; }
.bj-res { font-weight: 900; padding: 0 7px; border-radius: 8px; background: rgba(255,255,255,.12); }
.bj-res.win { background: rgba(71,196,126,.3); color: #b8ffd5; } .bj-res.lose { background: rgba(226,87,76,.3); color: #ffc4bd; }
.bj-bet { flex-direction: column; }
.bj-chipbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.bj-chip { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(230,180,80,.4); font-weight: 900; color: var(--gold); }
.bj-betrow { display: flex; gap: 10px; align-items: center; }
.bj-hand .card + .card { margin-left: calc(var(--card-h) * -.32); }

/* Menteur */
.mt-row { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 5vw, 50px); }
.mt-pile { position: relative; display: grid; place-items: center; min-width: calc(var(--card-h-mid) * .8); }
.mt-pile > .card { grid-area: 1 / 1; rotate: var(--r); translate: var(--dx) 0; }
.mt-next { display: flex; flex-direction: column; align-items: center; padding: 10px 20px; border-radius: 16px; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(230,180,80,.5); }
.mt-next small { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: 11px; }
.mt-next b { font-family: 'Pirata One', serif; font-weight: 400; font-size: 44px; color: var(--gold); line-height: 1; }
.mt-claim { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.45); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.mt-claim b { color: var(--gold); }
.mt-reveal { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mt-cards { display: flex; gap: 6px; }
.mt-cards .card.liar { filter: drop-shadow(0 0 6px var(--danger)) drop-shadow(0 0 14px rgba(226,87,76,.8)); }
.mt-cards .card.ok { filter: drop-shadow(0 0 6px var(--ok)); }
.mt-liar { font-size: 18px; animation: pulse 1.2s ease-in-out infinite; }
.hand .card.match { box-shadow: none; }

/* Petit bac */
.pb-zone { flex: 1; width: 100%; max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pb-head { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pb-letter { width: 74px; height: 74px; border-radius: 16px; display: grid; place-items: center; font-family: 'Pirata One', serif; font-size: 54px; color: #2a1a05; background: linear-gradient(180deg, #ffe7a3, var(--gold)); box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 3px #7a5a1a; }
.pb-timer { min-width: 64px; text-align: center; font-size: 30px; font-weight: 900; color: var(--parch); background: rgba(0,0,0,.4); border-radius: 14px; padding: 4px 12px; }
.pb-timer.urgent { color: #ff8a80; animation: pulse .8s ease-in-out infinite; }
.pb-sheet { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #f6ecd2, #e8d8b0); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.pb-row { display: flex; flex-direction: column; gap: 3px; color: var(--ink); font-weight: 800; font-size: 14px; }
.pb-row input { font: inherit; font-size: 17px; font-weight: 700; padding: 9px 12px; border-radius: 10px; border: 2px solid rgba(90,60,20,.3); background: rgba(255,255,255,.75); color: var(--ink); outline: none; }
.pb-row input:focus { border-color: var(--gold-2); background: #fff; }
.pb-stop { font-size: 18px; }
.pb-help { color: var(--parch); font-size: 13px; text-align: center; margin: 0; }
.pb-vote { width: 100%; overflow: auto; }
.pb-vote table { border-collapse: separate; border-spacing: 4px; min-width: 100%; }
.pb-vote th { color: var(--gold); font-size: 12px; padding: 2px 4px; text-align: center; }
.pb-who { white-space: nowrap; font-weight: 800; font-size: 13px; }
.pb-cell { position: relative; width: 100%; min-width: 80px; padding: 7px 8px; border-radius: 10px; font-weight: 800; font-size: 13px; background: rgba(71,196,126,.22); color: #e9fff1; display: inline-block; text-align: center; }
button.pb-cell:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--danger); }
.pb-cell.voted { box-shadow: inset 0 0 0 2px var(--danger); }
.pb-cell.rej, .pb-cell.bad { background: rgba(226,87,76,.25); color: #ffc9c3; text-decoration: line-through; }
.pb-cell.empty { background: rgba(255,255,255,.06); color: var(--muted); }
.pb-cell.half { background: rgba(230,180,80,.25); color: #ffe9b0; }
.pb-cell i { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 10px; background: var(--danger); color: #fff; border-radius: 999px; padding: 0 5px; text-decoration: none; }
@media (max-width: 600px) { .pb-sheet { grid-template-columns: 1fr; padding: 10px; gap: 6px; } .pb-letter { width: 56px; height: 56px; font-size: 40px; } .pb-timer { font-size: 22px; } }

/* Le Pire du Pire */
.bm-zone { gap: 12px; }
.bm-q { width: min(380px, 90%); min-height: 150px; padding: 18px 20px 12px; border-radius: 16px; background: #111; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.55), inset 0 0 0 2px #333; display: flex; flex-direction: column; justify-content: space-between; }
.bm-q-text { font-size: clamp(17px, 2.4vw, 22px); font-weight: 800; line-height: 1.3; }
.bm-q-text u { text-decoration: none; color: var(--gold); border-bottom: 2px solid var(--gold); }
.bm-blank { color: #888; letter-spacing: -1px; }
.bm-q-foot { font-size: 11px; color: #888; margin-top: 10px; }
.bm-answers { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; }
.bm-a { position: relative; width: clamp(130px, 18vw, 180px); min-height: 110px; padding: 12px; border-radius: 14px; background: #fbfaf6; color: #1a1a1a; font-weight: 800; font-size: 15px; text-align: left; box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: transform .15s; }
.bm-a:not(:disabled):hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0,0,0,.5); }
.bm-a.win { box-shadow: 0 0 0 4px var(--gold), 0 0 26px rgba(230,180,80,.8); transform: scale(1.05); }
.bm-a i { position: absolute; top: 6px; right: 8px; font-style: normal; }
.bm-by { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: #555; }
.bm-hand { gap: 0 8px; }
.bm-card { --w: clamp(104px, 13vw, 150px); flex: none; width: var(--w); height: calc(var(--w) * 1.25); padding: 10px; border-radius: 12px; background: #fbfaf6; color: #1a1a1a; font-weight: 800; font-size: clamp(12px, 1.4vw, 15px); line-height: 1.25; text-align: left; box-shadow: 0 6px 14px rgba(0,0,0,.45); transition: translate .15s; }
.hand > .bm-card + .bm-card { margin-left: var(--ov, 0px); }
.bm-card.selectable { cursor: pointer; }
@media (hover: hover) { .bm-card.selectable:hover { translate: 0 -16px; z-index: 3; box-shadow: 0 0 0 3px var(--gold), 0 10px 20px rgba(0,0,0,.5); } }
.bm-card:disabled { opacity: .85; }
.bm-free { gap: 8px; } .bm-free input { flex: 1; min-width: 180px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: var(--text); font-size: 16px; }
.bm-hist { margin: 8px 0 0; padding-left: 18px; color: #e6edf3; } .bm-hist li { margin: 6px 0; } .bm-hist u { text-decoration: none; color: var(--gold); }
@media (max-width: 600px) { .bm-a { width: calc(50% - 6px); min-height: 90px; font-size: 13px; } .bm-q { min-height: 120px; } }

/* Nom de code */
.nc-wrap { width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.nc-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.nc-team { padding: 8px 12px; border-radius: 14px; background: rgba(0,0,0,.3); border: 2px solid transparent; }
.nc-team.nc-red { --tc: #d64541; } .nc-team.nc-blue { --tc: #2f7de1; }
.nc-team.active { border-color: var(--tc); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 50%, transparent); }
.nc-th { display: flex; justify-content: space-between; align-items: center; } .nc-th b { color: var(--tc); font-size: 18px; }
.nc-left { background: var(--tc); color: #fff; font-weight: 900; border-radius: 999px; padding: 0 10px; font-size: 18px; }
.nc-members { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 13px; font-weight: 700; }
.nc-m { display: inline-flex; align-items: center; gap: 4px; } .nc-m.me { color: var(--gold); }
.nc-score { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nc-clue { display: flex; align-items: center; gap: 10px; font-size: 22px; padding: 6px 18px; border-radius: 999px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px var(--tc); }
.nc-clue.nc-red { --tc: #d64541; } .nc-clue.nc-blue { --tc: #2f7de1; }
.nc-clue span { background: var(--tc); color: #fff; font-weight: 900; border-radius: 999px; padding: 0 10px; }
.nc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(4px, .8vw, 8px); width: 100%; }
.nc-word { position: relative; min-height: clamp(44px, 8.5vh, 74px); border-radius: 10px; background: linear-gradient(180deg, #f4ead2, #ddc99d); color: #2a1d10; font-weight: 900; font-size: clamp(11px, 1.6vw, 17px); text-transform: uppercase; letter-spacing: .02em; padding: 4px; box-shadow: 0 3px 0 #9a8255, 0 6px 12px rgba(0,0,0,.35); transition: transform .12s; overflow: hidden; }
.nc-word span { word-break: break-word; }
.nc-word:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 8px 14px rgba(0,0,0,.4); }
.nc-word.hint.red { box-shadow: inset 0 0 0 4px #d64541, 0 3px 0 #9a8255; } .nc-word.hint.blue { box-shadow: inset 0 0 0 4px #2f7de1, 0 3px 0 #9a8255; }
.nc-word.hint.assassin { box-shadow: inset 0 0 0 4px #111, 0 3px 0 #9a8255; background: linear-gradient(180deg, #c9bfae, #9e9278); } .nc-word.hint.neutral { opacity: .85; }
.nc-word.revealed { color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.nc-word.revealed.red { background: linear-gradient(180deg, #e0564f, #a82c27); } .nc-word.revealed.blue { background: linear-gradient(180deg, #4b92ef, #1d58ad); }
.nc-word.revealed.neutral { background: linear-gradient(180deg, #c7b48a, #9b885e); color: #2a1d10; opacity: .75; } .nc-word.revealed.assassin { background: #111; }
.nc-word i { position: absolute; right: 3px; bottom: 3px; font-style: normal; }
.nc-red-t { color: #ff7a74; } .nc-blue-t { color: #7ab3ff; }
.team-res.nc-red { box-shadow: inset 0 0 0 2px #d64541; } .team-res.nc-blue { box-shadow: inset 0 0 0 2px #2f7de1; }
.nc-cluebar { gap: 8px; } .nc-cluebar input { flex: 1; min-width: 150px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: var(--text); font-size: 16px; }
.nc-cluebar select.field { width: 80px; }
@media (max-width: 600px) { .nc-word { min-height: 46px; font-size: 10px; padding: 2px; border-radius: 7px; } .nc-teams { gap: 6px; } .nc-team { padding: 5px 8px; } .nc-members { font-size: 11px; } .nc-clue { font-size: 17px; } }

/* mains très fournies : deux rangées */
.hand.rows2 { flex-wrap: wrap; row-gap: 4px; padding-top: 8px; }
.hand.rows2 > .card { --card-h: clamp(76px, 12vh, 140px); --card-w: calc(var(--card-h) * var(--card-ar)); flex: none; }
.hand.rows2 > .card:nth-child(n) { margin-left: 0; }
.hand.rows2 .card .idx { display: flex; }
/* Le Pire du Pire : main sans chevauchement ; défilement horizontal sur téléphone */
.bm-hand { flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 700px) { .bm-hand { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; } .bm-card { --w: 108px; } }

/* bannières illustrées : l'illustration est à droite, le texte à gauche */
.banner-card img { object-position: right center; }
.banner-card img.bn-skullking, .banner-card img.bn-poker { object-position: right 38%; }

/* bannière « Bientôt » (jeu pas encore disponible) */
.banner-card.soon img { filter: saturate(.75) brightness(.85); }
.banner-card.soon .soon-tag { display: inline-block; vertical-align: middle; margin-left: .4em; font-family: 'Nunito', sans-serif; text-shadow: none; padding: .3em .9em; border-radius: 999px; background: linear-gradient(180deg, #f6d27a, #c9962e); color: #2a1a05; font-weight: 900; font-size: clamp(12px, 1.5vw, 16px); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); }

/* places du poker : ancrées selon leur position, pour que les cartes montrées ne sortent pas du cadre */
.pk-seat { transform: translate(-50%, calc(-50% - var(--cy) * 50%)); }

/* poker : en fin de main, les cartes montrées par les adversaires en grand, à côté de ta main */
.pk-hand-row { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.6vw, 24px); flex-wrap: nowrap; max-width: 100%; }
.pk-hand-row .pk-hand { flex: none; width: auto; min-width: 0; }
.g-poker .hand-bar .pk-hand-row:has(.pk-reveal) .pk-hand .card { --card-h: 116px; --card-w: calc(116px * var(--card-ar)); }
.pk-reveal { flex-wrap: nowrap !important; min-width: 0; }
.pk-reveal { display: flex; gap: clamp(8px, 1.5vw, 18px); flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.pk-rv { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 8px 8px; border-radius: 12px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pk-rv.win { background: rgba(240,190,70,.16); box-shadow: inset 0 0 0 2px rgba(240,190,70,.7), 0 0 18px rgba(240,190,70,.25); }
.pk-rv-h { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; max-width: 260px; }
.pk-rv-h b { overflow: hidden; text-overflow: ellipsis; } .pk-rv-h small { color: var(--gold); font-weight: 800; }
.pk-rv-cards { display: flex; gap: 6px; }
.g-poker .hand-bar .pk-rv .card { --card-h: 116px; --card-w: calc(116px * var(--card-ar)); }
.g-poker .hand-bar .pk-rv .card .idx { display: flex; }
@media (max-width: 1100px), (max-height: 760px) {
  .g-poker .hand-bar .pk-rv .card, .g-poker .hand-bar .pk-hand-row:has(.pk-reveal) .pk-hand .card { --card-h: 84px; --card-w: calc(84px * var(--card-ar)); }
}
@media (max-width: 700px), (max-height: 560px) {
  .pk-hand-row { flex-wrap: wrap; row-gap: 6px; }
  .g-poker .hand-bar .pk-rv .card { --card-h: 58px; --card-w: calc(58px * var(--card-ar)); }
  .pk-rv { padding: 4px 5px 5px; } .pk-rv-h { font-size: 11px; max-width: 150px; } .pk-rv-h .avatar { width: 20px; height: 20px; }
  .g-poker .hand-bar .pk-hand-row:has(.pk-reveal) .pk-hand .card { --card-h: 58px; --card-w: calc(58px * var(--card-ar)); }
  .pk-reveal { flex-wrap: wrap !important; gap: 5px; }
  .pk-rv-cards { gap: 3px; }
}
/* téléphone en portrait : toutes les mains montrées sur une seule ligne */
@media (max-width: 700px) and (min-height: 561px) {
  .pk-hand-row { flex-wrap: nowrap; gap: 5px; }
  .pk-reveal { flex-wrap: nowrap !important; gap: 4px; }
  .pk-rv { padding: 3px 3px 4px; gap: 3px; min-width: 0; }
  .pk-rv-h { flex-direction: column; gap: 0; font-size: 9.5px; max-width: 72px; line-height: 1.15; }
  .pk-rv-h .avatar { display: none; }
  .pk-rv-h b { max-width: 70px; } .pk-rv-h small { font-size: 9px; }
  .g-poker .hand-bar .pk-rv .card, .g-poker .hand-bar .pk-hand-row:has(.pk-reveal) .pk-hand .card { --card-h: 48px; --card-w: calc(48px * var(--card-ar)); }
  .pk-rv-cards { gap: 2px; }
}
.pk-seat { transform: translate(-50%, calc(-50% - var(--cy) * 25%)); }
.pk-center .pk-win { position: relative; z-index: 6; }
@media (max-width: 700px) and (min-height: 561px) {
  .pk-reveal { overflow-x: auto; flex: 0 1 auto; justify-content: flex-start; scrollbar-width: none; }
  .pk-reveal::-webkit-scrollbar { display: none; }
}
.pk-arena .pk-center { z-index: 4; pointer-events: none; } .pk-arena .pk-center * { pointer-events: auto; }

/* ---------- Galerie ---------- */
.gal-tabs { flex-wrap: wrap; margin-bottom: 6px; }
.gal-sub { margin: 2px 0 8px; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 13vw, 150px), 1fr)); gap: clamp(8px, 1.4vw, 16px); max-height: min(62vh, 640px); overflow-y: auto; padding: 8px 4px 10px; }
.gal-item { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 4px; cursor: zoom-in; color: inherit; font: inherit; border-radius: 10px; transition: transform .15s ease, background .2s; }
.gal-item:hover { transform: translateY(-3px); background: rgba(255,255,255,.05); }
.gal-item span { font-size: 12px; text-align: center; line-height: 1.2; color: var(--muted); }
.gal-item .card { --card-h: clamp(130px, 19vw, 215px); --card-w: calc(var(--card-h) * var(--card-ar)); }
.gal-item .card .idx { display: none; }
.gal-zoom { position: fixed; inset: 0; z-index: 200; background: rgba(3,8,14,.88); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; gap: clamp(6px, 3vw, 40px); padding: 16px; animation: galIn .2s ease; }
@keyframes galIn { from { opacity: 0; } to { opacity: 1; } }
.gal-big { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: galPop .25s ease; }
@keyframes galPop { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
.gal-big .card { --card-h: min(70vh, 640px, calc((100vw - 120px) / var(--card-ar))); --card-w: calc(var(--card-h) * var(--card-ar)); filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); }
.gal-big .card .idx { display: none; }
.gal-cap { text-align: center; display: flex; flex-direction: column; gap: 3px; max-width: 460px; }
.gal-cap b { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: clamp(22px, 3vw, 30px); color: var(--gold); }
.gal-cap small { color: #e6edf3; font-size: 14px; } .gal-cap em { color: var(--muted); font-size: 12px; font-style: normal; }
.gal-nav { flex: none; width: clamp(40px, 5vw, 56px); height: clamp(40px, 5vw, 56px); border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: clamp(26px, 3.4vw, 36px); line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(214,170,80,.6); }
.gal-nav:hover { background: rgba(214,170,80,.3); }
.gal-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer; }
@media (max-width: 700px) {
  .gal-zoom { gap: 4px; padding: 10px 4px; }
  .gal-nav { position: absolute; bottom: 18px; }
  .gal-nav.prev { left: 22%; } .gal-nav.next { right: 22%; }
  .gal-big .card { --card-h: min(62vh, calc((100vw - 40px) / var(--card-ar))); }
  .gal-big { margin-bottom: 50px; }
}

.modal.gal-modal { width: min(1280px, 96vw); max-width: none; }
.gal-modal .gal-grid { max-height: min(66vh, 760px); }
@media (max-width: 700px) { .gal-modal .gal-grid { max-height: 52vh; } }

/* ---------- Loup-Garou : cartes carrées avec le nom dans l'encadré ---------- */
.card.lg-card { --card-ar: 1; border-radius: calc(var(--card-w) * .05); background-size: cover; }
.lg-name { position: absolute; display: grid; place-items: center; text-align: center; font-family: 'Pirata One', Georgia, serif; color: #f1d9a0; line-height: 1; white-space: nowrap; letter-spacing: .02em; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6); pointer-events: none; }
.gal-item .card.lg-card { --card-h: clamp(110px, 15vw, 190px); }
.gal-big .card.lg-card { --card-h: min(66vh, 620px, calc(100vw - 120px)); }
@media (max-width: 700px) { .gal-big .card.lg-card { --card-h: min(58vh, calc(100vw - 30px)); } }
.lobby-tools { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: -4px 0 14px; }
.lg-panel { max-width: 1100px; margin: 0 auto; }
.lg-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 12vw, 140px), 1fr)); gap: 10px; margin: 12px 0; max-height: 46vh; overflow-y: auto; padding: 4px; }
.lg-strip .card.lg-card { --card-h: clamp(90px, 11vw, 140px); }
.lg-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 700px) { .lg-roles { grid-template-columns: 1fr; } }
.lg-role { display: flex; gap: 10px; align-items: flex-start; }
.lg-role .card.lg-mini { --card-h: 74px; flex: none; }
.lg-role p { margin: 2px 0 0; font-size: 13px; color: #d6dde4; }
.lg-camp { font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 800; }
.lg-camp.c-wolf { background: #7a1d1d; color: #ffd9d0; } .lg-camp.c-vil { background: #1f5130; color: #d8f5df; } .lg-camp.c-solo { background: #4b2d6b; color: #ecdcff; }
.gal-one { text-align: center; font-weight: 800; color: var(--gold); margin: 0 0 4px; }
.lg-strip { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; max-height: none; gap: 10px; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.lg-strip .gal-item { flex: none; scroll-snap-align: start; }
.lg-strip .card.lg-card { --card-h: clamp(110px, 16vh, 170px); }
.lg-panel .gal-item span { color: #4a3214; font-weight: 700; }

/* Loup-Garou : dos et retournement */
.lg-camp.c-mix { background: #6b5320; color: #fff0c8; }
.lg-back .lg-parch { position: absolute; left: 27.5%; top: 33%; width: 45%; height: 34%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2cqh; color: #3a2610; overflow: hidden; }
.lg-b-name { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: 6.4cqh; line-height: 1; color: #4a1d0c; }
.lg-b-who { font-family: Georgia, serif; font-size: 3.2cqh; margin-top: -.8cqh; color: #6b4a22; }
.lg-b-camp { font-size: 2.7cqh; font-weight: 800; padding: .3cqh 1.6cqh; border-radius: 999px; }
.lg-b-camp.c-wolf { background: #7a1d1d; color: #ffe1d8; } .lg-b-camp.c-vil { background: #2b5a36; color: #e2f7e6; } .lg-b-camp.c-solo { background: #4b2d6b; color: #efe2ff; } .lg-b-camp.c-mix { background: #6b5320; color: #fff0c8; }
.lg-back p { margin: .4cqh 0 0; line-height: 1.28; font-family: Georgia, 'Times New Roman', serif; }
.lg-flip { perspective: 1600px; cursor: pointer; }
.lg-flip-in { position: relative; transition: transform .6s cubic-bezier(.3,.7,.3,1); transform-style: preserve-3d; }
.lg-flip.flipped .lg-flip-in { transform: rotateY(180deg); }
.lg-flip .card { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lg-flip .lg-rear { position: absolute; inset: 0; transform: rotateY(180deg); }
.gal-big .lg-flip .card { --card-h: min(66vh, 620px, calc(100vw - 120px)); --card-w: var(--card-h); }
@media (max-width: 700px) { .gal-big .lg-flip .card { --card-h: min(58vh, calc(100vw - 30px)); } }

.lg-back .lg-parch { left: 27%; top: 31.5%; width: 46%; height: 38.5%; gap: .8cqh; padding: 1cqh 1.2cqh 0; box-sizing: border-box; }
.lg-b-name { white-space: nowrap; }
.lg-b-who { font-size: 2.8cqh; margin-top: -.5cqh; }
.lg-b-camp { font-size: 2.3cqh; }
.lg-back p { line-height: 1.22; margin: 0; }
.lg-back .lg-parch p, .modal .lg-back .lg-parch p { color: #3a2610 !important; text-shadow: none; } .lg-back .lg-b-name { color: #4a1d0c !important; } .lg-back .lg-b-who { color: #6b4a22 !important; }

/* =================== Loup-Garou : la scène du village =================== */
.g-loupgarou .felt { padding: 0; overflow: hidden; display: block; background: #04070b; }
.lg-stage { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; overflow: hidden; }
.lg-scene { position: relative; width: min(100cqw, calc(100cqh * 1.7917)); aspect-ratio: 1376 / 768; container-type: inline-size; }
@container (max-aspect-ratio: 1 / 1) { .lg-scene { width: min(calc(100cqh * 1.7917), 150cqw); } }
.lg-bg { position: absolute; inset: 0; background: url(/img/loupgarou/scene-nuit.webp) center / cover no-repeat; transition: filter 1.6s ease; }
.lg-tint { position: absolute; inset: 0; pointer-events: none; transition: background 1.6s ease, opacity 1.6s; }
.is-night .lg-tint { background: radial-gradient(ellipse at 50% 58%, transparent 18%, rgba(4,8,24,.55) 75%); }
.is-day .lg-bg { filter: brightness(1.55) saturate(.85) sepia(.18) contrast(.95); }
.is-day .lg-tint { background: linear-gradient(180deg, rgba(255,214,160,.16), rgba(255,240,220,.06)); }
.ph-vote .lg-tint, .ph-verdict .lg-tint { background: radial-gradient(ellipse at 50% 58%, transparent 25%, rgba(70,10,10,.35) 85%); }
/* feu de camp */
.lg-fire { position: absolute; width: 0; height: 0; pointer-events: none; }
.lg-fire::before { content: ''; position: absolute; left: -11cqw; top: -8cqw; width: 22cqw; height: 16cqw; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,150,50,.38), rgba(255,110,30,.12) 45%, transparent 70%); animation: lgGlow 2.6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes lgGlow { 0%,100% { opacity: .75; transform: scale(1); } 40% { opacity: 1; transform: scale(1.06); } 70% { opacity: .85; transform: scale(.97); } }
.lg-fire i { position: absolute; left: 0; top: 0; width: .45cqw; height: .45cqw; border-radius: 50%; background: #ffcf70; box-shadow: 0 0 6px 2px rgba(255,140,40,.8); opacity: 0; animation: lgEmber 3.2s linear infinite; }
.lg-fire i:nth-child(2) { animation-delay: .5s; left: .8cqw; } .lg-fire i:nth-child(3) { animation-delay: 1.1s; left: -.9cqw; }
.lg-fire i:nth-child(4) { animation-delay: 1.7s; left: .4cqw; } .lg-fire i:nth-child(5) { animation-delay: 2.2s; left: -.4cqw; } .lg-fire i:nth-child(6) { animation-delay: 2.7s; left: 1.2cqw; }
@keyframes lgEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(2cqw, -14cqw); opacity: 0; } }
.lg-mist { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 12% at 20% 70%, rgba(200,210,230,.10), transparent), radial-gradient(ellipse 35% 10% at 80% 45%, rgba(200,210,230,.08), transparent); animation: lgMist 26s ease-in-out infinite alternate; }
@keyframes lgMist { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
.lg-blood { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 40%, rgba(120,0,0,.45)); animation: lgBlood 2.4s ease-out forwards; }
@keyframes lgBlood { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: .35; } }
/* meneur */
.lg-mc { position: absolute; left: 50%; top: 2.5%; transform: translateX(-50%); z-index: 200; max-width: 64%; min-width: 30%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3cqw; padding: .9cqw 2cqw; border-radius: 14px; background: rgba(6,9,16,.78); box-shadow: inset 0 0 0 1px rgba(214,170,80,.55), 0 8px 24px rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.lg-mc > b { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: clamp(16px, 2.3cqw, 34px); color: var(--gold); line-height: 1.05; }
.lg-mc > small { font-size: clamp(11px, 1.15cqw, 16px); color: #e6edf3; }
.lg-cd { font-weight: 900; font-size: clamp(11px, 1.2cqw, 16px); color: #ffd98a; font-variant-numeric: tabular-nums; }
.lg-cd.urgent, .lg-time .urgent { color: #ff7a6b; }
.lg-deaths { display: flex; gap: 1cqw; justify-content: center; margin-top: .3cqw; }
.lg-deaths > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: clamp(10px, 1cqw, 14px); }
.lg-death-card.card { --card-h: clamp(54px, 8cqw, 120px); --card-w: var(--card-h); }
/* places autour du feu */
.lg-seat { position: absolute; transform: translate(-50%, -62%); display: flex; flex-direction: column; align-items: center; gap: .15cqw; background: none; border: 0; padding: 0; color: #f3ead6; font: inherit; cursor: default; transition: filter .3s, opacity .3s; }
.lg-seat .lg-av { position: relative; display: block; border-radius: 50%; }
.lg-seat .avatar { width: clamp(24px, 4.6cqw, 72px); height: clamp(24px, 4.6cqw, 72px); box-shadow: 0 0 0 2px rgba(20,14,8,.9), 0 0 0 3px rgba(214,170,80,.6), 0 4px 10px rgba(0,0,0,.6); }
.lg-seat.me .avatar { box-shadow: 0 0 0 2px rgba(20,14,8,.9), 0 0 0 4px #f2c14e, 0 0 14px rgba(242,193,78,.6); }
.lg-nm { font-size: clamp(9px, 1.05cqw, 14px); font-weight: 800; max-width: clamp(54px, 9cqw, 140px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .5em; border-radius: 999px; background: rgba(6,8,12,.72); }
.lg-seat.me .lg-nm { color: var(--gold); }
.lg-marks { display: flex; gap: 1px; font-size: clamp(9px, 1.05cqw, 15px); font-style: normal; } .lg-marks i { font-style: normal; }
.lg-seat.dead { filter: grayscale(1) brightness(.6); }
.lg-skull { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(14px, 2.6cqw, 40px); }
.lg-seat.can { cursor: pointer; }
.lg-seat.can .avatar { animation: lgCan 1.4s ease-in-out infinite; }
@keyframes lgCan { 0%,100% { box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(242,193,78,.9), 0 0 6px rgba(242,193,78,.4); } 50% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #ffe08a, 0 0 18px rgba(255,214,110,.9); } }
.lg-seat.can:hover { filter: brightness(1.15); }
.lg-seat.picked .avatar { animation: none; box-shadow: 0 0 0 2px #000, 0 0 0 5px #e5483b, 0 0 18px rgba(229,72,59,.9) !important; }
.lg-votes { position: absolute; right: -18%; top: -14%; min-width: 1.7em; height: 1.7em; padding: 0 .3em; border-radius: 999px; background: #b3261e; color: #fff; font-weight: 900; font-size: clamp(10px, 1.1cqw, 15px); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.lg-voters { display: flex; flex-wrap: wrap; justify-content: center; max-width: clamp(54px, 8cqw, 120px); }
.lg-voters .avatar { width: clamp(12px, 1.5cqw, 22px); height: clamp(12px, 1.5cqw, 22px); margin: 0 -2px; box-shadow: 0 0 0 1px #000; }
.lg-seat .lg-seat-card.card { position: absolute; left: 70%; top: -6%; --card-h: clamp(18px, 3.2cqw, 48px); --card-w: var(--card-h); }
.lg-seat .lg-seat-card .lg-name { display: none; }
/* panneau du bas */
.g-loupgarou .hand-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
.lg-bottom { display: flex; gap: 14px; align-items: flex-start; max-width: 1400px; margin: 0 auto; }
.lg-cardbox { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; flex: none; }
.lg-cardbox small { font-size: 11px; color: var(--muted); }
.lg-cardbox .lg-flip .card { --card-h: clamp(110px, 19vh, 200px); --card-w: var(--card-h); }
.lg-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lg-time { font-weight: 800; color: #ffd98a; }
.lg-discord { background: #5865f2 !important; color: #fff !important; text-decoration: none; }
.lg-act { background: rgba(20,14,8,.55); border-radius: 12px; padding: 8px 12px; box-shadow: inset 0 0 0 1px rgba(214,170,80,.35); }
.lg-act-t { font-weight: 900; color: var(--gold); }
.lg-act-b { font-size: 14px; margin: 3px 0; display: flex; flex-direction: column; gap: 4px; }
.lg-act-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lg-steal { display: flex; gap: 10px; }
.lg-steal-c { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; color: inherit; font: inherit; font-size: 12px; cursor: pointer; padding: 3px; border-radius: 8px; }
.lg-steal-c.picked { box-shadow: 0 0 0 3px #f2c14e; }
.lg-mini2.card { --card-h: 80px; --card-w: 80px; }
.lg-info p { margin: 2px 0; font-size: 13px; color: #d6dde4; }
.lg-wchat { background: rgba(70,10,10,.35); border-radius: 10px; padding: 6px 10px; box-shadow: inset 0 0 0 1px rgba(229,72,59,.4); }
.lg-wlog { max-height: 90px; overflow-y: auto; font-size: 13px; } .lg-wlog p { margin: 2px 0; }
.lg-wchat form { display: flex; gap: 6px; margin-top: 4px; } .lg-wchat input { flex: 1; min-width: 0; }
/* fin de partie */
.lg-reveal { text-align: center; } .lg-rv-card { display: flex; justify-content: center; margin: 8px 0; }
.lg-rv-card .lg-flip .card { --card-h: 200px; --card-w: 200px; }
.lg-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 10px; }
.lg-res { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 6px; border-radius: 10px; }
.lg-res.win { background: rgba(242,193,78,.14); box-shadow: inset 0 0 0 2px rgba(242,193,78,.6); }
.lg-res b { font-size: 13px; } .lg-res small { font-size: 11px; color: var(--muted); }
.lg-res-card.card { --card-h: 86px; --card-w: 86px; }
@media (max-width: 700px) {
  .lg-bottom { gap: 8px; }
  .lg-cardbox .lg-flip .card { --card-h: 84px; }
  .lg-info p, .lg-act-b { font-size: 12px; }
  .lg-mc { max-width: 84%; top: 1.5%; }
}

.lg-stage { isolation: isolate; z-index: 0; display: block; }
.lg-scene { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@container (max-aspect-ratio: 1 / 1) { .lg-scene { width: min(calc(100cqh * 1.7917), 155cqw); top: 54%; } }
.lg-mc { max-width: min(64cqw, 760px); top: 10px; }
.lg-mc > b { font-size: clamp(16px, 2.6cqw, 32px); } .lg-mc > small { font-size: clamp(11px, 1.4cqw, 16px); }
.lg-death-card.card { --card-h: clamp(54px, 8cqw, 120px); }
@container (max-aspect-ratio: 1 / 1) { .lg-mc { max-width: 94cqw; width: 94cqw; padding: 6px 10px; } }

.lg-seat .avatar { width: calc(clamp(24px, 4.6cqw, 72px) * var(--seat-k, 1)); height: calc(clamp(24px, 4.6cqw, 72px) * var(--seat-k, 1)); }
.lg-nm { max-width: calc(clamp(54px, 9cqw, 140px) * var(--seat-k, 1)); }
.lg-mc { top: 6px; padding: 6px 18px; gap: 2px; }
.lg-death-card.card { --card-h: clamp(46px, 5.6cqw, 84px); }
.lg-deaths > div { font-size: clamp(10px, .9cqw, 13px); }

.lg-tip-now { background: rgba(255,255,255,.05); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; }
.lg-tip-now h3 { margin: 0 0 6px; }
.lg-tip-deal { display: flex; flex-wrap: wrap; gap: 5px; } .lg-tip-deal .lg-camp { font-size: 12px; padding: 2px 9px; }
.lg-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lg-tips > div { background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px 12px; } .lg-tips h3 { margin: 0 0 4px; color: var(--gold); } .lg-tips p { margin: 0; font-size: 14px; }
.lg-tip-list li { margin: 4px 0; font-size: 14px; }
@media (max-width: 700px) { .lg-tips { grid-template-columns: 1fr; } }

/* ---------- Loup-Garou : version téléphone (portrait) ---------- */
.lg-grid { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .g-loupgarou .felt { overflow-y: auto; }
  .lg-stage { position: relative; inset: auto; min-height: 100%; display: flex; flex-direction: column; container-type: normal; }
  .lg-scene { position: relative; left: auto; top: auto; transform: none; width: 100%; height: 25vh; height: 25svh; min-height: 150px; aspect-ratio: auto; flex: none; }
  .lg-bg { background-position: 50% 62%; }
  .lg-scene .lg-seat { display: none; }
  .lg-mc { position: relative; left: auto; top: auto; transform: none; margin: -22px 10px 0; max-width: none; min-width: 0; width: auto; padding: 6px 12px; }
  .lg-mc > b { font-size: 20px; } .lg-mc > small { font-size: 13px; }
  .lg-death-card.card { --card-h: 56px; }
  .lg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 8px 14px; }
  .lg-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 12px; border: 0; color: #f3ead6; font: inherit; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); min-width: 0; }
  .lg-tile .lg-av { position: relative; }
  .lg-tile .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px rgba(20,14,8,.9), 0 0 0 3px rgba(214,170,80,.5); }
  .lg-tile .lg-nm { font-size: 11px; max-width: 100%; background: none; padding: 0; }
  .lg-tile .lg-marks { font-size: 12px; min-height: 0; }
  .lg-tile-role { font-size: 9.5px; color: #ffcf8a; text-align: center; line-height: 1.1; }
  .lg-tile .lg-votes { right: -10px; top: -6px; font-size: 12px; }
  .lg-tile .lg-skull { font-size: 26px; }
  .lg-tile .lg-voters { max-width: 100%; } .lg-tile .lg-voters .avatar { width: 15px; height: 15px; }
  .lg-tile.me { box-shadow: inset 0 0 0 2px rgba(242,193,78,.7); } .lg-tile.me .lg-nm { color: var(--gold); }
  .lg-tile.dead { filter: grayscale(1) brightness(.6); }
  .lg-tile.can { background: rgba(242,193,78,.12); animation: lgTile 1.4s ease-in-out infinite; }
  @keyframes lgTile { 0%,100% { box-shadow: inset 0 0 0 2px rgba(242,193,78,.5); } 50% { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 12px rgba(255,214,110,.5); } }
  .lg-tile.picked { background: rgba(229,72,59,.2); box-shadow: inset 0 0 0 2px #e5483b !important; animation: none; }
  .ph-night .lg-grid, .is-night .lg-grid { background: linear-gradient(180deg, rgba(4,8,24,.2), transparent 40%); }
  .g-loupgarou .hand-bar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .lg-bottom { gap: 8px; align-items: stretch; }
  .lg-cardbox .lg-flip .card { --card-h: 76px; }
  .lg-cardbox small { font-size: 9.5px; max-width: 80px; text-align: center; }
  .lg-side { max-height: 34vh; max-height: 34svh; overflow-y: auto; gap: 4px; }
  .lg-act { padding: 6px 9px; } .lg-act-t { font-size: 14px; } .lg-act-b { font-size: 12.5px; }
  .lg-act-btns .btn { padding: 8px 12px; }
  .lg-info p { font-size: 11.5px; }
  .lg-steal .lg-mini2.card { --card-h: 64px; }
}
@media (max-width: 360px) and (orientation: portrait) { .lg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) and (orientation: portrait) { .lg-stage { align-items: stretch; } }

/* jeu indisponible sur téléphone */
.unavail-box { max-width: 460px; margin: 30px auto; text-align: center; padding: 26px 20px; }
.unavail-ico { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.unavail-box h2 { margin: 6px 0 10px; }
.unavail-box .btn-plate { margin-top: 12px; }
.pc-tag { display: inline-block; vertical-align: middle; margin-left: .4em; font-family: 'Nunito', sans-serif; font-size: 11px; padding: .25em .7em; border-radius: 999px; background: linear-gradient(180deg, #f6d27a, #c9962e); color: #2a1a05; text-shadow: none; }

.unavail-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.unavail-btns .btn-plate { margin: 0; }
.unavail-btns .btn-plate { white-space: nowrap; font-size: clamp(18px, 5vw, 24px); padding-left: 1.4em; padding-right: 1.4em; }

/* Rami : glisser-déposer des cartes de la main */
.rami-hand [data-drag] { touch-action: none; cursor: grab; }
.rami-ghost { position: fixed !important; z-index: 9999; pointer-events: none; transform: rotate(-4deg) scale(1.08) !important; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); animation: none !important; transition: none !important; opacity: .95; }
.rami-hand .rami-lifted { opacity: .25; }
.rami-hand .rami-drop-before { box-shadow: -6px 0 0 -1px #f2c14e, -10px 0 14px rgba(242,193,78,.6); }
.rami-hand .rami-drop-after { box-shadow: 6px 0 0 -1px #f2c14e, 10px 0 14px rgba(242,193,78,.6); }
.rami-tip { text-align: center; font-size: 11px; color: var(--muted); margin-top: 2px; }
body.m-phone .rami-tip { display: none; }

/* bannières provisoires des jeux de plateau */
.cb-othello { background: radial-gradient(ellipse at 75% 50%, #2a8a55, #145233 60%, #0a2c1c); }
.cb-othello .pk-deco i { border-radius: 50%; aspect-ratio: 1; width: 17%; background: radial-gradient(circle at 35% 30%, #555, #0b0b0b 70%); font-size: 0; }
.cb-othello .pk-deco i:nth-child(even) { background: radial-gradient(circle at 35% 30%, #fff, #cfcfcf 70%); }
.cb-petitschevaux { background: radial-gradient(ellipse at 75% 50%, #b9662f, #6b3415 60%, #341706); }
.cb-petitschevaux .pk-deco i { font-size: clamp(20px, 5vw, 44px); }

/* =================== Reversi =================== */
.g-othello .felt { padding: 8px; }
.oth-wrap { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.oth-sides { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.oth-side { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid transparent; }
.oth-side.turn { border-color: var(--gold); box-shadow: 0 0 14px rgba(230,180,80,.35); }
.oth-side b { display: block; font-size: 14px; } .oth-side small { color: var(--muted); font-size: 12px; }
.oth-count { display: flex; align-items: center; gap: 5px; font-weight: 900; font-size: 20px; margin-left: 6px; }
.disc { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: middle; }
.disc.b { background: radial-gradient(circle at 35% 30%, #5a5a5a, #0c0c0c 68%); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.disc.w { background: radial-gradient(circle at 35% 30%, #ffffff, #cdcdcd 70%); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.oth-board-wrap { flex: 1; width: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
.oth-board { width: min(100cqw, 100cqh); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-radius: 12px; background: #0e3b26; box-shadow: inset 0 0 0 4px #5a3a18, inset 0 0 0 6px #c9a24a, 0 10px 30px rgba(0,0,0,.5); }
.oc { position: relative; border: 0; padding: 0; background: #1f7a4a; border-radius: 3px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.oc .disc { width: 82%; height: 82%; }
.oc.last { box-shadow: inset 0 0 0 2px #f2c14e; }
.oc .hint { width: 26%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.35); }
.oc.legal { cursor: pointer; } .oc.legal:hover { background: #2a9259; } .oc.legal:hover .hint { background: rgba(255,255,255,.7); }
.o-flip { animation: oFlip .45s ease both; }
@keyframes oFlip { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(90deg) scale(1.08); } 100% { transform: rotateY(0) scale(1); } }
.oth-res { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 18px; flex-wrap: wrap; margin: 8px 0; }
.oth-res .disc { width: 1.1em; height: 1.1em; } .oth-res .vs { color: var(--muted); }

/* =================== Petits chevaux =================== */
.g-petitschevaux .felt { padding: 8px; }
.pc-wrap { width: 100%; flex: 1; display: flex; gap: 10px; min-height: 0; }
.pc-seats { display: flex; flex-direction: column; gap: 8px; flex: 0 0 210px; }
.pc-seat { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 12px; background: rgba(0,0,0,.3); border: 2px solid transparent; box-shadow: inset 4px 0 0 var(--c); }
.pc-seat.turn { border-color: var(--c); box-shadow: inset 4px 0 0 var(--c), 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
.pc-seat b { display: block; font-size: 14px; } .pc-seat small { color: var(--muted); font-size: 12px; }
.pc-main { flex: 1; min-width: 0; min-height: 0; display: flex; }
.pc-board-wrap { flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.pc-board { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; border-radius: 14px; background: #f3e6c8; box-shadow: inset 0 0 0 4px #5a3a18, inset 0 0 0 6px #c9a24a, 0 10px 30px rgba(0,0,0,.5); container-type: inline-size; }
.pc-cell, .pc-stable { position: absolute; width: 6.667%; height: 6.667%; box-sizing: border-box; }
.pc-cell { border: 1px solid rgba(90,58,24,.35); background: #fffaf0; display: grid; place-items: center; font-size: 2.6cqw; font-weight: 900; color: #fff; }
.pc-cell.start { background: var(--c); }
.pc-cell.stair { background: color-mix(in srgb, var(--c) 70%, #fff); }
.pc-cell.goal { width: 6.667%; height: 6.667%; background: #fff3c4; font-size: 3.4cqw; border: 2px solid #c9a24a; }
.pc-stable { width: 40%; height: 40%; background: color-mix(in srgb, var(--c) 85%, #000); border-radius: 10px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.3); }
.pc-stable i { position: absolute; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }
.pc-horse { position: absolute; width: 5.6%; height: 5.6%; transform: translate(-50%, -50%); border: 0; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 65%); box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; transition: left .35s ease, top .35s ease; z-index: 3; }
.pc-horse span { font-size: 3.4cqw; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pc-horse b { position: absolute; right: -10%; bottom: -10%; width: 45%; height: 45%; border-radius: 50%; background: #1b1209; font-size: 1.7cqw; display: grid; place-items: center; }
.pc-horse.goal { width: 3.8%; height: 3.8%; } .pc-horse.goal span { font-size: 2.2cqw; } .pc-horse.goal b { display: none; }
.pc-horse:disabled { pointer-events: none; }
.pc-horse.can { cursor: pointer; z-index: 5; animation: pcGlow 1.1s ease-in-out infinite; }
@keyframes pcGlow { 0%,100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f2c14e, 0 3px 6px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px #ffe08a, 0 0 16px #ffd36a; } }
.pc-horse.moved { z-index: 4; }
.pc-target { position: absolute; width: 5%; height: 5%; transform: translate(-50%, -50%); border-radius: 50%; border: 3px dashed #c9962e; background: rgba(242,193,78,.25); cursor: pointer; z-index: 2; animation: pcPulse 1.2s ease-in-out infinite; padding: 0; }
@keyframes pcPulse { 50% { transform: translate(-50%, -50%) scale(1.15); } }
.pc-center-die { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; }
.pc-die { pointer-events: auto; width: 13cqw; height: 13cqw; max-width: 90px; max-height: 90px; border-radius: 18%; border: 0; padding: 9%; background: #fffdf7; box-shadow: 0 0 0 3px var(--c), 0 8px 18px rgba(0,0,0,.5); display: grid; }
.pc-die.can { cursor: pointer; animation: pcDie 1.2s ease-in-out infinite; }
@keyframes pcDie { 50% { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 4px var(--c), 0 0 24px var(--c); } }
.pc-die:disabled { opacity: .92; }
.die-face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.die-face i { border-radius: 50%; margin: 18%; } .die-face i.on { background: #1b1209; }
.a-roll { animation: aRoll .6s cubic-bezier(.3,.9,.4,1) backwards; }
@keyframes aRoll { 0% { transform: rotate(-200deg) scale(.6); } 70% { transform: rotate(15deg) scale(1.1); } }
.pc-rollbtn { font-size: 17px; padding: 11px 24px; }
@media (max-width: 900px) { .pc-wrap { flex-direction: column; } .pc-seats { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: center; } }

/* =================== Reversi : table et pions illustrés =================== */
.disc.b { background: url(/img/board/disc-black.webp) center / contain no-repeat; box-shadow: none; }
.disc.w { background: url(/img/board/disc-white.webp) center / contain no-repeat; box-shadow: none; }
.oth-board { background: url(/img/board/othello-table.webp) center / cover no-repeat; padding: 19.4%; gap: 0; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.oth-board .oc { background: transparent; border-radius: 0; box-shadow: inset 0 0 0 .5px rgba(8,30,14,.75); }
.oth-board .oc:nth-child(-n+8) { box-shadow: inset 0 0 0 .5px rgba(8,30,14,.75), inset 0 1.5px 0 rgba(220,180,90,.55); }
.oth-board .oc.legal:hover { background: rgba(255,255,255,.08); }
.oth-board .oc .disc { width: 86%; height: 86%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.oth-board .oc.last { box-shadow: inset 0 0 0 2px rgba(242,193,78,.9); }
.oth-board .oc .hint { background: rgba(255,240,200,.35); }
.oth-board::before { content: ''; position: absolute; }
.oth-board { position: relative; }
.oth-board-wrap .oth-board { width: min(100cqw, 100cqh); }

/* =================== Petits chevaux pirates =================== */
.pcm-wrap { width: 100%; flex: 1; display: flex; gap: 12px; min-height: 0; }
.pc-side { display: flex; flex-direction: column; gap: 10px; flex: 0 0 230px; }
.pc-seat { position: relative; }
.pc-seat-boat { width: 34px; margin-left: auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pc-dicebox { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.3); }
.pc-dicebox .status { margin: 0; font-size: 15px; text-align: left; } .pc-dicebox small { color: var(--muted); font-size: 12px; }
.pc-dicebox .pc-die { width: 64px; height: 64px; flex: none; max-width: none; max-height: none; }
.pcm-board-wrap { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; container-type: size; }
.pcm-board { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; background: url(/img/board/pc-map.webp) center / cover no-repeat; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); container-type: inline-size; }
.pcm-tile, .pcm-step { position: absolute; width: 5.364%; height: 5.364%; box-sizing: border-box; }
.pcm-tile { border-radius: 22%; background: color-mix(in srgb, var(--c) 16%, rgba(250,236,200,.78)); border: .25cqw dashed rgba(92,58,22,.75); box-shadow: inset 0 0 0 .2cqw color-mix(in srgb, var(--c) 55%, transparent); transform: scale(.88); display: grid; place-items: center; }
.pcm-tile.start { background: var(--c); border: .3cqw solid rgba(60,30,8,.85); box-shadow: 0 0 .8cqw rgba(0,0,0,.35); }
.pcm-tile.start b { color: #fff; font-size: 2.6cqw; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pcm-step { display: grid; place-items: center; transform: scale(.86); border-radius: 12%; background: color-mix(in srgb, var(--c) 72%, rgba(120,72,30,.4)); border: .25cqw solid rgba(60,30,8,.7); color: #fff; font-weight: 900; font-size: 2.2cqw; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pcm-port { position: absolute; width: 4.2%; height: 4.2%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 .3cqw color-mix(in srgb, var(--c) 60%, transparent); }
.pcm-port.extra { background: rgba(220,190,140,.75); box-shadow: inset 0 0 0 .3cqw color-mix(in srgb, var(--c) 60%, transparent), inset 0 .3cqw .6cqw rgba(0,0,0,.25); }
.pcm-boat { position: absolute; width: 6.6%; aspect-ratio: 1; transform: translate(-50%, -58%); border: 0; padding: 0; background: none; display: grid; place-items: center; transition: left .4s ease, top .4s ease; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.5)); }
.pcm-boat img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pcm-boat b { position: absolute; right: 2%; bottom: 4%; width: 34%; height: 34%; border-radius: 50%; background: var(--c); color: #fff; font-size: 1.6cqw; display: grid; place-items: center; box-shadow: 0 0 0 .2cqw #fff; }
.pcm-boat.port { width: 6%; }
.pcm-boat.goal { width: 4.4%; } .pcm-boat.goal b { display: none; }
.pcm-boat.goal.arrive img { animation: pcmArrive .9s cubic-bezier(.3,1.5,.5,1) backwards; } @keyframes pcmArrive { 0% { transform: scale(1.6) rotate(-12deg); filter: drop-shadow(0 0 1.4cqw #ffd36a); } 60% { transform: scale(.9) rotate(4deg); } }
.pcm-boat:disabled { pointer-events: none; }
.pcm-boat.can { cursor: pointer; animation: pcmBob 1s ease-in-out infinite; filter: drop-shadow(0 0 .7cqw #ffd36a) drop-shadow(0 0 .3cqw #fff); }
@keyframes pcmBob { 50% { transform: translate(-50%, -66%) rotate(-4deg); } }
.pcm-target { position: absolute; width: 4.6%; height: 4.6%; transform: translate(-50%, -50%); border-radius: 50%; border: .35cqw dashed #fff; background: color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer; z-index: 30; padding: 0; animation: pcPulse 1.2s ease-in-out infinite; }
@media (max-width: 900px) { .pcm-wrap { flex-direction: column; } .pc-side { flex: none; } .pc-side .pc-seats { flex-direction: row; flex-wrap: wrap; } }
.pc-dicebox .pc-die { padding: 9px; }
.pc-die .die-face i { margin: 16%; }
.oth-board { box-sizing: border-box; grid-template-rows: repeat(8, 1fr); }
.oth-board .oc { min-width: 0; min-height: 0; }
/* Reversi : la grille est posée exactement sur le tapis vert de l'illustration */
.oth-board { display: block; padding: 0 !important; position: relative; }
.oth-grid { position: absolute; left: 19.2%; top: 19.1%; right: 19.4%; bottom: 19.1%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); box-shadow: 0 0 0 1px rgba(8,30,14,.8), inset 0 0 18px rgba(0,0,0,.25); }

/* jeux à venir */
.soon-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.soon-board { display: grid; place-items: center; }
.soon-board img { width: 100%; max-width: 460px; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.soon-screen .opt select:disabled, .soon-screen .toggle input:disabled + span { opacity: .75; }
@media (max-width: 800px) { .soon-grid { grid-template-columns: 1fr; } .soon-board img { max-width: 300px; } }
.soon-board img { max-height: min(46vh, 420px); width: auto; max-width: 100%; }

/* =================== Dames =================== */
.dm-board { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; background: url(/img/board/plateau-commun.webp) center / cover no-repeat; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.dm-grid { position: absolute; left: 21.7%; top: 21.7%; right: 21.8%; bottom: 21.8%; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); box-shadow: 0 0 0 2px rgba(60,30,8,.8); }
.dm-sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; min-width: 0; min-height: 0; }
.dm-sq.l { background: rgba(255,236,200,.25); }
.dm-sq.d { background: rgba(92,50,18,.78); }
.dm-sq.last { box-shadow: inset 0 0 0 2px rgba(242,193,78,.75); }
.dm-piece { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); pointer-events: none; }
.dm-sq.can { cursor: pointer; } .dm-sq.can .dm-piece { animation: dmCan 1.2s ease-in-out infinite; }
@keyframes dmCan { 50% { filter: drop-shadow(0 0 6px #ffd36a) drop-shadow(0 2px 3px rgba(0,0,0,.6)); transform: translateY(-2px); } }
.dm-sq.sel { box-shadow: inset 0 0 0 3px #f2c14e; } .dm-sq.sel .dm-piece { animation: none; transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 8px #ffd36a) drop-shadow(0 6px 6px rgba(0,0,0,.6)); }
.dm-sq.dest { cursor: pointer; } .dm-sq.dest::after { content: ''; width: 34%; height: 34%; border-radius: 50%; background: rgba(255,220,120,.8); box-shadow: 0 0 10px #ffd36a; animation: pcPulse 1.1s ease-in-out infinite; }
.dm-sq.cap::before { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #ff4d3a; font-weight: 900; font-size: 160%; text-shadow: 0 0 4px #000; z-index: 2; }
.dm-ghost { width: 70%; height: 70%; border-radius: 50%; background: rgba(255,255,255,.25); animation: dmVanish .9s ease forwards; }
@keyframes dmVanish { to { transform: scale(1.6); opacity: 0; } }
.dm-crown { animation: dmCrown .7s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes dmCrown { from { transform: scale(.3) rotate(-30deg); } }
.dm-mini { width: 1.1em; height: 1.1em; }
/* =================== Dames chinoises =================== */
.dc-board { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; background: url(/img/board/dameschinoises-plateau.webp) center / cover no-repeat; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.55); container-type: inline-size; }
.dc-hole { position: absolute; width: 4.3%; height: 4.3%; transform: translate(-50%, -50%); border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 50% 40%, rgba(40,20,5,.75), rgba(90,55,20,.55) 70%); box-shadow: inset 0 .25cqw .4cqw rgba(0,0,0,.6), 0 .1cqw 0 rgba(255,240,200,.35); }
.dc-hole.full { background: none; box-shadow: none; }
.dc-marble { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; filter: drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.55)); pointer-events: none; transition: transform .15s; }
.dc-hole.can { cursor: pointer; } .dc-hole.can .dc-marble { animation: dcCan 1.2s ease-in-out infinite; }
@keyframes dcCan { 50% { filter: drop-shadow(0 0 .8cqw #fff) drop-shadow(0 .3cqw .3cqw rgba(0,0,0,.55)); } }
.dc-hole.sel .dc-marble { animation: none; transform: translateY(-.6cqw) scale(1.18); filter: drop-shadow(0 0 1cqw #fff) drop-shadow(0 .8cqw .6cqw rgba(0,0,0,.55)); }
.dc-hole.dest { cursor: pointer; background: color-mix(in srgb, var(--c, #ffd36a) 70%, #fff); box-shadow: 0 0 1cqw var(--c, #ffd36a), inset 0 0 0 .3cqw #fff; animation: pcPulse 1.1s ease-in-out infinite; }
.dc-hole.from { box-shadow: inset 0 0 0 .3cqw rgba(255,230,150,.9), inset 0 .25cqw .4cqw rgba(0,0,0,.6); }
.dc-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.dc-trail polyline { fill: none; stroke: rgba(255,240,190,.75); stroke-width: .5; stroke-dasharray: 1.2 .9; stroke-linecap: round; stroke-linejoin: round; }
.dc-hole { z-index: 2; }
.dc-seat-m { position: static !important; width: 26px !important; height: 26px !important; margin-left: auto; }
/* Dames chinoises : trous et billes plus petits (restent dans les pointes), zone de toucher élargie */
.dc-hole { width: 3.3%; height: 3.3%; }
.dc-marble { left: -11%; top: -11%; width: 122%; height: 122%; }
.dc-hole::after { content: ''; position: absolute; inset: -35%; border-radius: 50%; }
.dc-hole:disabled::after { display: none; }

/* =================== Échecs =================== */
.ch-sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; min-width: 0; min-height: 0; container-type: size; }
.ch-sq.l { background: rgba(250,232,196,.82); }
.ch-sq.d { background: rgba(120,70,30,.85); }
.ch-sq.last { box-shadow: inset 0 0 0 100cqw rgba(242,193,78,.28); }
.ch-sq.check { background: radial-gradient(circle, rgba(255,60,40,.85), rgba(255,60,40,.25) 70%); }
.ch-piece { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); pointer-events: none; }
.ch-sq.can { cursor: pointer; } .ch-sq.can:hover .ch-piece { transform: translateY(-2px); }
.ch-sq.sel { box-shadow: inset 0 0 0 3px #f2c14e; } .ch-sq.sel .ch-piece { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 0 6px #ffd36a) drop-shadow(0 4px 4px rgba(0,0,0,.6)); }
.ch-sq.dest, .ch-sq.capt, .ch-sq.quiet { cursor: pointer; }
.ch-sq.dest::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(40,25,10,.45); }
.ch-sq.capt::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(230,70,40,.8); }
.ch-f, .ch-r { position: absolute; font-style: normal; font-size: 13cqh; font-weight: 800; opacity: .7; pointer-events: none; }
.ch-f { right: 6%; bottom: 2%; } .ch-r { left: 6%; top: 2%; }
.ch-sq.l .ch-f, .ch-sq.l .ch-r { color: #7a4a1e; } .ch-sq.d .ch-f, .ch-sq.d .ch-r { color: #f5e2bd; }
.ch-side { position: relative; }
.ch-caps { display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-height: 18px; }
.ch-caps .ch-cap { width: 18px; height: 18px; margin-right: -5px; filter: none; }
.ch-caps em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); margin-left: 8px; }
.ch-promo { display: flex; gap: 10px; justify-content: center; margin: 10px 0 14px; }
.ch-promo button { background: rgba(0,0,0,.25); border: 0; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; font: inherit; cursor: pointer; }
.ch-promo button:hover { background: rgba(242,193,78,.25); }
.ch-promo .ch-piece { width: 64px; height: 64px; }
.ch-moves { max-height: 44px; overflow-y: auto; font-size: 12px; color: var(--muted); padding: 2px 4px; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.ch-moves b { color: var(--gold); }
.ch-piece { width: 92%; height: 92%; }

/* =================== Le Troupeau =================== */
.card.sqp { --card-ar: .671; border-radius: calc(var(--card-w) * .07); background-size: cover; }
.sqp-num { position: absolute; display: grid; place-items: center; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 13cqh; line-height: 1; pointer-events: none; }
.sqp-heads { position: absolute; display: flex; justify-content: center; align-items: center; gap: 1%; pointer-events: none; }
.sqp-heads i { height: 85%; aspect-ratio: 1.15; background: url(/img/sqp/tete.webp) center / contain no-repeat; }
.card.sqp.h7 .sqp-heads i, .card.sqp.h5 .sqp-heads i { height: 78%; }
.card.sqp-back { --card-ar: .671; background: url(/img/sqp/dos.webp) center / cover; border-radius: calc(var(--card-w) * .07); }
.sqp-zone { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.sqp-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 1100px; }
.sqp-row { --card-h-mid: clamp(70px, 13.5vh, 150px); display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 12px; background: rgba(0,0,0,.22); border: 2px solid transparent; color: inherit; font: inherit; }
.sqp-row .card.mid { --card-ar: .671; }
.sqp-row-h { display: flex; flex-direction: column; align-items: center; min-width: 36px; } .sqp-row-h b { font-size: 20px; color: var(--gold); } .sqp-row-h small { font-size: 12px; white-space: nowrap; }
.sqp-row-c { display: flex; gap: 6px; flex: 1; min-width: 0; }
.sqp-slot { border: 2px dashed rgba(255,255,255,.18); border-radius: 8px; display: grid; place-items: center; background: none !important; }
.sqp-slot.danger { border-color: rgba(229,72,59,.55); background: rgba(229,72,59,.08) !important; } .sqp-slot b { color: rgba(255,120,100,.8); font-size: 14px; }
.sqp-row.full { border-color: rgba(229,72,59,.45); }
.sqp-row.pick { cursor: pointer; border-color: var(--gold); animation: glow 1.4s ease-in-out infinite; } .sqp-row.pick:hover { background: rgba(230,180,80,.15); }
.sqp-row .card.new { box-shadow: 0 0 0 3px #f2c14e, 0 0 16px rgba(242,193,78,.6); }
.sqp-reveal { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sqp-rv { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; transition: opacity .3s; }
.sqp-rv .card.small { --card-h: clamp(64px, 10vh, 100px); --card-w: calc(var(--card-h) * .671); }
.sqp-rv span { display: flex; align-items: center; gap: 3px; max-width: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sqp-rv.done { opacity: .35; } .sqp-rv.picking .card { box-shadow: 0 0 0 3px #e5483b; }
.sqp-cd { font-weight: 800; color: #ffd98a; margin-left: 8px; }
.g-sixquiprend .hand .card.sqp { --card-ar: .671; }
.g-sixquiprend .hand .card.picked { transform: translateY(-14px); box-shadow: 0 0 0 3px #f2c14e, 0 10px 20px rgba(0,0,0,.5); }
/* Le Troupeau : 4 rangées toujours visibles, main plus compacte */
.g-sixquiprend .hand .card.sqp { --card-h: clamp(100px, 19vh, 190px); --card-w: calc(var(--card-h) * .671); }
.sqp-row { --card-h-mid: clamp(58px, 9.5vh, 110px); padding: 3px 8px; }
.sqp-rows { gap: 4px; }
.sqp-rv .card.small { --card-h: clamp(56px, 8vh, 86px); }
.g-sixquiprend .felt { overflow-y: auto; }
.sqp-row { --card-h-mid: clamp(54px, 8.8vh, 104px); }

/* bannières provisoires */
.cb-kems { background: radial-gradient(ellipse at 75% 50%, #2b5f8a, #12324d 60%, #081a29); }
.cb-kems .pk-deco i { font-family: 'Pirata One', Georgia, serif; font-size: clamp(22px, 5.6vw, 50px); color: #b3121f; }
.cb-pouilleux { background: radial-gradient(ellipse at 75% 50%, #7a5a2c, #3e2a12 60%, #1e1408); }
.cb-pouilleux .pk-deco i { font-size: clamp(18px, 4.6vw, 40px); font-weight: 900; color: #161616; }
/* =================== Kems =================== */
.km-wrap { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.km-top { display: flex; justify-content: center; }
.km-mid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.km-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 10px; border-radius: 14px; background: rgba(0,0,0,.28); border: 2px solid transparent; text-align: center; }
.km-seat.partner { border-color: rgba(71,196,126,.6); } .km-seat.opp { border-color: rgba(229,72,59,.35); }
.km-seat b { font-size: 14px; } .km-seat small { color: var(--muted); font-size: 11px; }
.km-av { width: 56px; height: 56px; }
.km-bubble { position: absolute; top: -14px; right: -10px; font-size: 30px; background: #fff; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.km-contre { margin-top: 4px; font-size: 12px; padding: 4px 8px; }
.km-reveal { display: flex; gap: 2px; margin-top: 4px; }
.km-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.km-score { display: flex; align-items: baseline; gap: 10px; font-size: 15px; } .km-score b { font-size: 24px; } .km-score .us { color: #7fe0a6; } .km-score small { color: var(--muted); }
.km-table { display: flex; gap: 8px; justify-content: center; }
.km-tinfo { font-size: 13px; color: var(--muted); text-align: center; } .km-cd { font-weight: 800; color: #ffd98a; margin-left: 6px; }
.km-actions .km-kems { font-size: 17px; padding: 10px 22px; background: linear-gradient(180deg, #f6d27a, #c9962e); color: #2a1a05; }
.km-go { color: #7fe0a6; }
.km-signs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.km-sign { font-size: 24px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.km-sign:hover { background: rgba(255,255,255,.18); } .km-sign.secret { box-shadow: inset 0 0 0 2px #f2c14e, 0 0 10px rgba(242,193,78,.4); }
.hand .card.km-carre { box-shadow: 0 0 0 3px #7fe0a6, 0 0 16px rgba(127,224,166,.6); }
.km-show { display: flex; gap: 6px; justify-content: center; margin: 8px 0; }
/* =================== Pouilleux =================== */
.pl-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.pl-fan { display: flex; justify-content: center; padding: 10px 0 0; }
.pl-back { border: 0; background: none; padding: 0; margin-left: calc(var(--card-h-mid) * -.32); transform: rotate(calc(var(--k) * 4deg)) translateY(calc(var(--k) * var(--k) * 1.2px)); transition: transform .15s; cursor: pointer; }
.pl-back:first-child { margin-left: 0; }
.pl-back:hover { transform: rotate(calc(var(--k) * 4deg)) translateY(-14px); z-index: 2; }
.pl-got { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.3); padding: 8px 14px; border-radius: 14px; }
.pl-got .card.small { --card-h: 90px; --card-w: calc(90px * var(--card-ar)); } .pl-got b { color: #ff8a6b; }
.hand .card.pl-jack { box-shadow: 0 0 0 3px #e5483b, 0 0 14px rgba(229,72,59,.5); }

/* =================== Yam's =================== */
.ym-wrap { width: 100%; flex: 1; display: flex; gap: 14px; min-height: 0; align-items: stretch; }
.ym-play { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.ym-tray { display: flex; gap: clamp(6px, 1.5vw, 16px); padding: 18px 22px; border-radius: 22px; background: radial-gradient(ellipse at center, #22774f, #0e3d28 80%); box-shadow: inset 0 0 0 5px #5a3a18, inset 0 0 0 7px #c9a24a, inset 0 0 26px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45); }
.ym-slot { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; }
.ym-slot:not(:disabled) { cursor: pointer; } .ym-slot:not(:disabled):hover { transform: translateY(-3px); }
.ym-die { width: clamp(52px, 8vw, 96px); height: clamp(52px, 8vw, 96px); object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.ym-die.empty { display: block; border-radius: 18%; border: 2px dashed rgba(255,255,255,.25); }
.ym-slot.held .ym-die { transform: translateY(-6px); filter: drop-shadow(0 0 8px #ffd36a) drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.ym-slot i { position: absolute; bottom: -18px; font-style: normal; font-size: 11px; font-weight: 800; color: #ffd36a; }
.ym-land { animation: ymLand .5s cubic-bezier(.3,.9,.4,1) backwards; }
@keyframes ymLand { 0% { transform: translateY(-38px) rotate(-160deg) scale(.85); } 55% { transform: translateY(4px) rotate(10deg) scale(1.04); } 75% { transform: translateY(-7px) rotate(-4deg); } 100% { transform: none; } }
.ym-tray.shaking { animation: ymTray .16s linear infinite; }
@keyframes ymTray { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 75% { transform: translate(2px,-1px); } }
.ym-tray.shaking .ym-slot:not(.held) .ym-die { animation: ymShake .22s ease-in-out infinite alternate; }
.ym-tray.shaking .ym-slot:not(.held):nth-child(2n) .ym-die { animation-duration: .19s; animation-direction: alternate-reverse; }
.ym-tray.shaking .ym-slot:not(.held):nth-child(3n) .ym-die { animation-duration: .25s; }
@keyframes ymShake { 0% { transform: translate(-5px,-8px) rotate(-28deg) scale(.94); } 50% { transform: translate(4px,2px) rotate(15deg) scale(1.03); } 100% { transform: translate(-2px,6px) rotate(32deg) scale(.97); } }
.ym-rollbtn { font-size: 17px; padding: 11px 26px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ym-rollbtn.pressed { transform: scale(.95); filter: brightness(1.15); }
.ym-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ym-tip { font-size: 11px; opacity: .65; }
.ym-who { display: flex; align-items: center; gap: 8px; }
.ym-sheet { flex: 0 1 auto; overflow: auto; max-height: 100%; background: #fdfcf7; color: #111; border-radius: 6px; padding: 10px 12px 12px; box-shadow: 0 10px 26px rgba(0,0,0,.5); font-family: Arial, 'Helvetica Neue', sans-serif; }
.ym-sheet table { border-collapse: collapse; font-size: 13px; }
.ym-sheet th, .ym-sheet td { border: 1.5px solid #222; padding: 2px 7px; text-align: center; min-width: 50px; height: 25px; }
.ym-sheet td.l { text-align: left; white-space: nowrap; min-width: 0; padding-right: 4px; border-right: 0; }
.ym-sheet td.l[colspan] { border-right: 1.5px solid #222; font-weight: 700; }
.ym-sheet td.l small, .ym-sheet td.k { font-size: 11px; color: #333; }
.ym-sheet td.k { border-left: 0; white-space: nowrap; min-width: 0; text-align: left; padding-left: 2px; }
.ym-sheet td.k img { width: 15px; height: 15px; vertical-align: -3px; filter: grayscale(1) contrast(1.4); }
.ym-sheet tr.hd th { border: 0; height: auto; padding: 0 0 4px; vertical-align: bottom; }
.ym-sheet th.ttl { font-family: 'Arial Black', Impact, sans-serif; font-weight: 900; font-size: 30px; letter-spacing: 1px; text-align: left; line-height: 1; padding-bottom: 6px; }
.ym-h { transform: skewX(-32deg); transform-origin: bottom left; border: 1.5px solid #222; border-bottom: 0; margin: 0 -1px 0 0; padding: 14px 4px 4px; background: #fdfcf7; }
.ym-h span { display: block; transform: skewX(32deg); font-size: 12px; font-weight: 700; max-width: 64px; margin: 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ym-sheet th.turn .ym-h { background: #ffe08a; } .ym-sheet th.me .ym-h span { color: #8a4b00; }
.ym-sheet col.turn { background: rgba(255,214,90,.16); }
.ym-sheet tr.gr td { background: #dedede; font-size: 12px; } .ym-sheet tr.gr2 td { background: #c9c9c9; }
.ym-sheet tr.gap td { border: 0; height: 9px; padding: 0; background: none; }
.ym-sheet tr.tot td { font-size: 15px; height: 28px; }
.ym-sheet td.ink, .ym-sheet .ink { color: #1d3fa8; font-weight: 700; font-size: 14px; }
.ym-sheet td.zero { color: #8b8b8b; } .ym-sheet td.zero s { text-decoration-thickness: 2px; }
.ym-sheet td.just { background: #fff0a8; animation: ymJust 1.2s ease-out; } @keyframes ymJust { 0% { background: #ffd23e; } }
.ym-memo { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; font-size: 11px; }
.ym-memo b { font-family: 'Arial Black', Impact, sans-serif; font-size: 14px; max-width: 110px; line-height: 1.1; }
.ym-memo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; } .ym-memo dt::before { content: '- '; } .ym-memo dd { margin: 0; } .ym-memo dd::before { content: ': '; }
.ym-pick { width: 100%; border: 0; border-radius: 6px; background: rgba(71,160,100,.25); color: #155a2c; font-weight: 900; cursor: pointer; padding: 2px 0; animation: pcPulse 1.4s ease-in-out infinite; }
.ym-pick.nul { background: rgba(180,60,40,.15); color: #8a2f1f; animation: none; }
.ym-pick:hover { background: rgba(71,160,100,.5); }
@media (max-width: 900px) { .ym-wrap { flex-direction: column; } .ym-sheet { max-height: none; } }

/* ---------- 4 en ligne ---------- */
.p4-area { flex: 1; width: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
.p4-stage { position: relative; width: min(100cqw, calc(100cqh * 1024 / 974)); aspect-ratio: 1024 / 974; }
.p4-back { position: absolute; border-radius: 2%; background: radial-gradient(ellipse at 50% 40%, #142a63, #060d24 75%); box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.p4-grid { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 2; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
.p4-tok { position: absolute; z-index: 3; aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.p4-tok.mini { position: static; width: 30px; height: 30px; margin-left: 6px; }
.p4-fall { animation: p4Fall var(--ft, .4s) cubic-bezier(.5,0,1,.6) backwards, p4Bounce .32s ease-out var(--ft, .4s); }
@keyframes p4Fall { from { transform: translateY(var(--fy)); } to { transform: none; } }
@keyframes p4Bounce { 0% { transform: none; } 35% { transform: translateY(-9%); } 65% { transform: none; } 82% { transform: translateY(-3%); } 100% { transform: none; } }
.p4-tok.win { z-index: 4; animation: p4Win 1s ease-in-out .5s infinite alternate; }
@keyframes p4Win { from { filter: drop-shadow(0 0 4px #ffd36a); transform: scale(1); } to { filter: drop-shadow(0 0 16px #fff1b0) brightness(1.2); transform: scale(1.08); } }
.p4-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.p4-line line { stroke: rgba(255,90,90,.55); stroke-width: 16; stroke-linecap: round; filter: blur(4px); stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: p4Draw .6s ease-out .45s forwards; }
.p4-line line.core { stroke: #fff4d0; stroke-width: 4; filter: none; }
@keyframes p4Draw { to { stroke-dashoffset: 0; } }
.p4-col { position: absolute; top: 0; height: 100%; z-index: 6; border: 0; background: none; padding: 0; cursor: default; }
.p4-col:not(:disabled) { cursor: pointer; }
.p4-col:not(:disabled):hover { background: linear-gradient(to bottom, rgba(255,230,150,.0) 8%, rgba(255,230,150,.10) 20%, rgba(255,230,150,.06) 80%, transparent); border-radius: 14px; }
.p4-ghost { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
.p4-ghost .p4-tok { position: static; width: 100%; }
.p4-col:not(:disabled):hover .p4-ghost { opacity: 1; transform: translateX(-50%) translateY(6%); }
.p4-stage.mine .p4-col:not(:disabled):active .p4-ghost { opacity: 1; }
.p4-tok.win.p4-fall { animation: p4Fall var(--ft, .4s) cubic-bezier(.5,0,1,.6) backwards, p4Win 1s ease-in-out calc(var(--ft, .4s) + .3s) infinite alternate; }

/* ---------- Dé menteur ---------- */
.pd-wrap { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 8px; overflow: auto; padding-bottom: 6px; }
.pd-opps { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 20px; width: 100%; padding-top: 52px; }
.pd-opp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 130px; padding: 6px 8px 8px; border-radius: 14px; background: rgba(0,0,0,.22); border: 2px solid transparent; transition: border-color .2s, box-shadow .2s; }
.pd-opp.turn { border-color: var(--gold); box-shadow: 0 0 16px rgba(230,180,80,.35); }
.pd-opp.out { opacity: .45; filter: grayscale(.8); }
.pd-opp.loser { border-color: #d0533b; box-shadow: 0 0 18px rgba(208,83,59,.45); }
.pd-opp.gainer { border-color: #57c27c; box-shadow: 0 0 18px rgba(87,194,124,.45); }
.pd-cupbox { position: relative; width: 124px; height: 118px; display: flex; align-items: flex-end; justify-content: center; }
.pd-cup { width: 82px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); position: relative; z-index: 2; transform-origin: 50% 100%; }
.pd-cup.lifted { transform: translate(18%, -44%) rotate(14deg); opacity: .92; }
.pd-lifting { animation: pdLift .55s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes pdLift { from { transform: none; opacity: 1; } }
.pd-shake { animation: pdShake .95s ease-in-out backwards; }
@keyframes pdShake { 0%,100% { transform: none; } 10% { transform: translateY(-14px) rotate(-14deg); } 22% { transform: translateY(-18px) rotate(12deg); } 34% { transform: translateY(-14px) rotate(-12deg); } 46% { transform: translateY(-18px) rotate(10deg); } 58% { transform: translateY(-12px) rotate(-8deg); } 74% { transform: translateY(0) rotate(0); } 82% { transform: translateY(0) scaleY(.92) scaleX(1.05); } }
.pd-n { position: absolute; z-index: 3; right: 4px; bottom: 2px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: #2a1708; color: #ffd36a; border: 2px solid #c9a24a; }
.pd-skull { font-size: 40px; }
.pd-under { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; width: 124px; z-index: 1; }
.pd-under .pd-die { width: 32px; height: 32px; }
.pd-under-in { animation: pdUnder .5s ease-out backwards; } @keyframes pdUnder { 0%, 40% { opacity: 0; } }
.pd-name { display: flex; align-items: center; gap: 5px; max-width: 120px; } .pd-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pips { display: flex; gap: 3px; } .pd-pips i { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.12); } .pd-pips i.on { background: #f1e3c0; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.pd-bubble { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 3px 10px; border-radius: 12px; background: #fdf3da; color: #2b1d0c; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.pd-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fdf3da; border-bottom: 0; }
.pd-bubble.old { opacity: .55; transform: translateX(-50%) scale(.85); }
.pd-bubble.call { font-family: 'Pirata One', serif; font-size: 18px; letter-spacing: .5px; background: #d0533b; color: #fff; } .pd-bubble.call::after { border-top-color: #d0533b; }
.pd-bubble.call.calza { background: #3f8fc9; } .pd-bubble.call.calza::after { border-top-color: #3f8fc9; }
.pd-bid { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; } .pd-bid b { font-size: 1.05em; }
.pd-bid .pd-die { width: 1.5em; height: 1.5em; }
.pd-bid.big { gap: 8px; font-size: 40px; } .pd-bid.big .pd-die { width: 60px; height: 60px; } .pd-bid.big span { opacity: .7; font-size: .7em; }
.pd-die { display: inline-block; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
.pd-die.q { display: inline-grid; place-items: center; border-radius: 22%; background: #efe6cf; color: #7a6a4a; font-weight: 900; }
.pd-die.hit { filter: drop-shadow(0 0 7px #ffd36a) drop-shadow(0 0 2px #fff6c8); transform: scale(1.12); }
.pd-die.hit-in { animation: pdHit .45s ease-out backwards; }
@keyframes pdHit { from { filter: drop-shadow(0 3px 3px rgba(0,0,0,.5)); transform: scale(1); } 60% { transform: scale(1.35); } }
.pd-die.miss { opacity: .5; filter: grayscale(.5) drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.pd-die.lost { opacity: 0; transform: translateY(20px) rotate(40deg) scale(.6); }
.pd-die.lost-in { animation: pdLost .8s ease-in backwards; }
@keyframes pdLost { from { opacity: 1; transform: none; filter: drop-shadow(0 0 8px #ff4a3a); } 30% { opacity: 1; transform: translateX(-4px) rotate(-10deg); filter: drop-shadow(0 0 10px #ff4a3a); } 45% { transform: translateX(4px) rotate(10deg); } }
.pd-roll { animation: pdRoll .5s cubic-bezier(.3,1.4,.5,1) backwards; }
@keyframes pdRoll { from { opacity: 0; transform: translateY(-26px) rotate(-180deg) scale(.6); } }
.pd-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; justify-content: center; text-align: center; position: relative; }
.pd-cur { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 26px; border-radius: 18px; background: radial-gradient(ellipse at center, rgba(120,70,25,.55), rgba(40,20,8,.6)); border: 2px solid rgba(201,162,74,.6); box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.pd-cur small { color: var(--muted); } .pd-cur.empty b { font-size: 22px; color: var(--gold); }
.pd-bump { animation: pdBump .45s cubic-bezier(.3,1.6,.5,1) backwards; } @keyframes pdBump { from { transform: scale(.7); opacity: .3; } }
.pd-pal { padding: 3px 12px; border-radius: 10px; background: rgba(208,83,59,.25); border: 1px solid #d0533b; font-weight: 800; font-size: 13px; }
.pd-trail { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 12px; color: var(--muted); }
.pd-trail-i { padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,.25); }
.pd-stamp { font-family: 'Pirata One', serif; font-size: 58px; line-height: 1; color: #ff5b42; text-shadow: 0 0 18px rgba(255,80,50,.6), 0 3px 0 #4a1308; transform: rotate(-6deg); }
.pd-stamp.calza { color: #6fc0ff; text-shadow: 0 0 18px rgba(80,160,255,.6), 0 3px 0 #0c2a4a; }
.pd-stamp-in { animation: pdStamp .6s cubic-bezier(.2,1.6,.4,1) backwards; } @keyframes pdStamp { from { transform: rotate(-6deg) scale(3); opacity: 0; } }
.pd-line { font-size: 15px; } .pd-count { font-size: 20px; } .pd-count b { font-size: 28px; color: var(--gold); } .pd-count small { color: var(--muted); font-size: 12px; }
.pd-verdict { font-size: 18px; font-weight: 900; } .pd-verdict.ok { color: #7fe0a0; } .pd-verdict.ko { color: #ff8b70; }
.pd-me { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 10px 16px; border-radius: 18px; background: rgba(0,0,0,.25); border: 2px solid transparent; }
.pd-me.turn { border-color: var(--gold); }
.pd-mycup { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 200px; }
.pd-cup.mine { width: 110px; transform: translateY(-6px) rotate(-12deg); margin-bottom: -26px; z-index: 0; opacity: .95; }
.pd-cup.mine.up { transform: translateY(-18px) rotate(-18deg); opacity: .6; }
.pd-shake-lift { animation: pdShakeLift 1.3s ease-in-out backwards; }
@keyframes pdShakeLift { 0% { transform: translateY(26px) rotate(0); } 8% { transform: translateY(6px) rotate(-14deg); } 18% { transform: translateY(2px) rotate(13deg); } 28% { transform: translateY(6px) rotate(-12deg); } 38% { transform: translateY(2px) rotate(11deg); } 50% { transform: translateY(26px) rotate(0) scaleY(.94); } 62% { transform: translateY(26px) rotate(0); } 100% { transform: translateY(-6px) rotate(-12deg); } }
.pd-mydice { position: relative; z-index: 1; display: flex; gap: 6px; padding: 8px 12px; border-radius: 14px; background: radial-gradient(ellipse at center, #22774f, #0e3d28 85%); box-shadow: inset 0 0 0 3px #5a3a18, inset 0 0 0 4px #c9a24a, inset 0 0 14px rgba(0,0,0,.5); min-height: 62px; align-items: center; }
.pd-meout { color: var(--muted); }
.pd-controls { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pd-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pd-qty { display: flex; align-items: center; gap: 6px; } .pd-qty b { min-width: 40px; text-align: center; font-size: 30px; color: var(--gold); }
.pd-x { font-size: 22px; opacity: .7; }
.pd-faces { display: flex; gap: 4px; }
.pd-face { position: relative; border: 2px solid transparent; border-radius: 12px; background: rgba(0,0,0,.2); padding: 3px; cursor: pointer; transition: transform .12s, border-color .12s; }
.pd-face .pd-die { width: 46px; height: 46px; } .pd-face i { position: absolute; bottom: -2px; left: 0; right: 0; font-size: 9px; font-style: normal; font-weight: 900; color: #ffd36a; text-shadow: 0 1px 2px #000; }
.pd-face:hover:not(:disabled) { transform: translateY(-2px); }
.pd-face.sel { border-color: var(--gold); background: rgba(242,193,78,.18); box-shadow: 0 0 12px rgba(242,193,78,.4); }
.pd-face:disabled { opacity: .3; cursor: not-allowed; }
.pd-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pd-dudo { background: linear-gradient(#e0644a, #a8321e) !important; color: #fff !important; font-family: 'Pirata One', serif; font-size: 20px; letter-spacing: .5px; }
.pd-calza { background: linear-gradient(#5aa7e0, #2a6ea8) !important; color: #fff !important; font-family: 'Pirata One', serif; font-size: 20px; }
.pd-rank { list-style: none; counter-reset: r; padding: 0; margin: 8px auto; max-width: 320px; } .pd-rank li { counter-increment: r; display: flex; align-items: center; gap: 8px; padding: 4px 8px; } .pd-rank li::before { content: counter(r) '.'; font-weight: 900; width: 22px; color: var(--gold); }
.pd-wrap > * { flex-shrink: 0; }
/* Le Pire du Pire : téléphone en paysage (peu de hauteur) */
@media (max-height: 560px) and (orientation: landscape) {
  .bm-q { min-height: 0; padding: 8px 14px 6px; width: min(520px, 70%); }
  .bm-q-text { font-size: 15px; } .bm-q-foot { margin-top: 4px; }
  .bm-a { min-height: 64px; padding: 8px; font-size: 13px; width: clamp(110px, 16vw, 160px); }
  .bm-hand { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .bm-card { --w: 96px; height: calc(var(--w) * .95); padding: 7px; font-size: 12px; }
}
/* Accueil : avec beaucoup de jeux, la liste défile au lieu de tout rétrécir */
body:not(.m-phone) .home .banner-list { max-height: calc(100vh - 210px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 6px 2px; scrollbar-width: thin; scrollbar-color: rgba(201,162,74,.6) transparent; }
@media (max-height: 560px) and (orientation: landscape) { body:not(.m-phone) .home .banner-list { max-height: calc(100vh - 120px); } }
/* Accueil PC : 3 colonnes sur grand écran ; le texte des bannières suit la largeur de la bannière */
body:not(.m-phone) .banner-card { container-type: inline-size; }
body:not(.m-phone) .bn-text { width: 52%; }
body:not(.m-phone) .bn-text b { font-size: clamp(20px, 8.6cqw, 40px); }
body:not(.m-phone) .bn-text small { font-size: clamp(11px, 3.5cqw, 15px); }
body:not(.m-phone) .bn-text em { font-size: clamp(10px, 3.1cqw, 13px); }
@media (min-width: 1600px) {
  body:not(.m-phone) .home { width: min(1760px, 100%); }
  body:not(.m-phone) .home .banner-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  body:not(.m-phone) .home .bn-text { width: 58%; }
  body:not(.m-phone) .home .bn-text b { font-size: clamp(20px, 8cqw, 40px); }
  body:not(.m-phone) .home .bn-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Petits chevaux PC : plateau à dés collé au plateau */
.pc-pcl .pcm-board-wrap { display: block; }
.pcm-stage { height: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; }
.pcm-stage .pcm-board { width: min(calc(100cqw - 236px), 100cqh); flex: none; }
.pc-tray { flex: 0 0 210px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 16px; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, #6b4423, #3d2410); box-shadow: inset 0 0 0 3px #2a170a, inset 0 0 0 5px #c9a24a, 0 12px 28px rgba(0,0,0,.55); }
.pc-tray-who { display: flex; align-items: center; gap: 6px; font-size: 14px; min-height: 24px; color: #f6e2b0; }
.pc-tray-felt { width: 100%; aspect-ratio: 1.15; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(ellipse at center, #2d8a5a, #0f4229 85%); box-shadow: inset 0 0 18px rgba(0,0,0,.6), inset 0 0 0 2px rgba(0,0,0,.35); perspective: 500px; }
.pc-tray .pc-die { width: 92px; height: 92px; max-width: none; max-height: none; padding: 12px; }
.pc-tray.can .pc-tray-felt { box-shadow: inset 0 0 18px rgba(0,0,0,.6), 0 0 0 3px var(--c), 0 0 22px color-mix(in srgb, var(--c) 60%, transparent); }
.pc-tray .status { font-size: 15px; margin: 0; } .pc-tray small { color: #e6d5b0; font-size: 12px; line-height: 1.3; }
.pc-die.tumbling { animation: pcTumble .2s linear infinite !important; }
@keyframes pcTumble { 0% { transform: rotate(0) translate(-6px, -4px); } 25% { transform: rotate(90deg) translate(5px, 3px) scale(.92); } 50% { transform: rotate(180deg) translate(-4px, 5px); } 75% { transform: rotate(270deg) translate(4px, -5px) scale(.94); } 100% { transform: rotate(360deg) translate(-6px, -4px); } }
.pc-die.landed { animation: pcLand .42s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes pcLand { 0% { transform: scale(1.25) rotate(-10deg); } 100% { transform: none; } }
.pcm-splash { position: absolute; width: 0; height: 0; z-index: 60; pointer-events: none; animation: none; }
.pcm-splash i { position: absolute; left: -.5cqw; top: -.5cqw; width: 1cqw; height: 1cqw; border-radius: 50%; background: #e9f7ff; box-shadow: 0 0 .6cqw #9fdcff; opacity: 0; animation: pcSplash .9s ease-out forwards; animation-delay: inherit; }
.pcm-splash::before { content: ''; position: absolute; left: -3cqw; top: -3cqw; width: 6cqw; height: 6cqw; border-radius: 50%; border: .4cqw solid rgba(220,245,255,.9); opacity: 0; animation: pcRing .9s ease-out forwards; animation-delay: inherit; }
.pcm-splash i:nth-child(1) { --dx: -3cqw; --dy: -4cqw; } .pcm-splash i:nth-child(2) { --dx: 3cqw; --dy: -4.5cqw; } .pcm-splash i:nth-child(3) { --dx: -4.5cqw; --dy: -1cqw; }
.pcm-splash i:nth-child(4) { --dx: 4.5cqw; --dy: -1.5cqw; } .pcm-splash i:nth-child(5) { --dx: -1cqw; --dy: -5.5cqw; } .pcm-splash i:nth-child(6) { --dx: 1.5cqw; --dy: -3cqw; }
@keyframes pcSplash { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
@keyframes pcRing { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.4); } }

/* ---------- Décors animés (PC) ---------- */
.dc-layer, .dc-game { position: fixed; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.dc-game { inset: 0; }
.dc-layer > *, .dc-sparks > * { position: absolute; }
body.dc-paused .dc-layer *, body.dc-paused .dc-game * { animation-play-state: paused !important; }
.dc-sparks { inset: 0; }
/* lune */
.dc-moon { width: 13%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(200,225,255,.30), rgba(160,200,255,.10) 45%, transparent 70%); animation: dcMoon 7s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes dcMoon { 0%,100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
/* coffre : lueur qui respire */
.dc-chest { width: 26%; aspect-ratio: 1.5; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,200,80,.30), rgba(255,170,40,.12) 45%, transparent 70%); mix-blend-mode: screen; animation: dcChest 4.5s ease-in-out infinite; }
@keyframes dcChest { 0%,100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
/* lanterne : flamme qui vacille (3 couches désynchronisées) */
.dc-lantern { width: 0; height: 0; }
.dc-lantern i { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.dc-lantern .a { width: calc(260px * var(--k, 1)); height: calc(260px * var(--k, 1)); background: radial-gradient(circle, rgba(255,170,60,.42), rgba(255,130,40,.14) 40%, transparent 68%); animation: dcFlick 2.3s steps(1) infinite, dcFlickS 3.1s ease-in-out infinite; }
.dc-lantern .b { width: calc(90px * var(--k, 1)); height: calc(110px * var(--k, 1)); background: radial-gradient(ellipse, rgba(255,230,150,.75), rgba(255,170,60,.25) 45%, transparent 72%); animation: dcFlame 1.3s ease-in-out infinite alternate; }
.dc-lantern .c { width: calc(26px * var(--k, 1)); height: calc(40px * var(--k, 1)); top: calc(-4px * var(--k, 1)); background: radial-gradient(ellipse at 50% 70%, #fffbe0, rgba(255,210,110,.7) 50%, transparent 75%); animation: dcCore .9s ease-in-out infinite alternate; }
@keyframes dcFlick { 0% { opacity: .85; } 9% { opacity: .7; } 17% { opacity: .95; } 31% { opacity: .78; } 44% { opacity: 1; } 58% { opacity: .74; } 71% { opacity: .9; } 86% { opacity: .8; } }
@keyframes dcFlickS { 0%,100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-51%, -49%) scale(1.06); } 70% { transform: translate(-49%, -50%) scale(.97); } }
@keyframes dcFlame { 0% { transform: translate(-50%, -50%) scale(1, 1) skewX(-3deg); opacity: .85; } 50% { transform: translate(-50%, -52%) scale(.94, 1.08) skewX(3deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.05, .95) skewX(-1deg); opacity: .9; } }
@keyframes dcCore { from { transform: translate(-50%, -50%) scaleY(1) rotate(-3deg); } to { transform: translate(-50%, -56%) scaleY(1.18) rotate(3deg); } }
/* étoiles */
.dc-star { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(200,225,255,.9); transform: scale(var(--s, 1)); animation: dcTwinkle var(--d, 3s) ease-in-out infinite; }
@keyframes dcTwinkle { 0%,100% { opacity: .15; } 50% { opacity: 1; } }
/* reflets de lune sur la mer */
.dc-glint { width: var(--w, 18px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(220,235,255,.95), transparent); animation: dcGlint var(--d, 3s) ease-in-out infinite; }
@keyframes dcGlint { 0%,100% { opacity: 0; transform: translateX(-6px) scaleX(.5); } 45% { opacity: .9; transform: translateX(0) scaleX(1); } 70% { opacity: 0; transform: translateX(6px) scaleX(.7); } }
/* lucioles */
.dc-fly { width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: radial-gradient(circle, #fffbe0, #ffd84a 45%, rgba(255,200,60,0) 72%); box-shadow: 0 0 12px 4px rgba(255,205,80,.45); scale: var(--z, 1); animation: dcFly var(--d, 12s) ease-in-out infinite alternate, dcBlink var(--b, 3s) ease-in-out infinite; will-change: transform, opacity; }
@keyframes dcFly { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--x1), var(--y1)); } 100% { transform: translate(var(--x2), var(--y2)); } }
@keyframes dcBlink { 0%,100% { opacity: .1; } 40% { opacity: 1; } 60% { opacity: .85; } }
/* pierres précieuses et éclats d'or */
.dc-gem { width: 0; height: 0; }
.dc-gem::before, .dc-spark::before { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; background: radial-gradient(circle, #fff 0 12%, transparent 13%), linear-gradient(0deg, transparent 46%, rgba(255,255,255,.95) 50%, transparent 54%), linear-gradient(90deg, transparent 46%, rgba(255,255,255,.95) 50%, transparent 54%); filter: drop-shadow(0 0 3px #fff); }
.dc-gem::before { animation: dcGem var(--d, 3.5s) ease-in-out infinite; transform: scale(0); }
@keyframes dcGem { 0%,70%,100% { transform: scale(0) rotate(0); opacity: 0; } 80% { transform: scale(1.1) rotate(45deg); opacity: 1; } 90% { transform: scale(.4) rotate(90deg); opacity: .6; } }
.dc-spark { width: 0; height: 0; }
.dc-spark::before { transform: scale(0); animation: dcSpark 1.2s ease-out forwards; filter: drop-shadow(0 0 4px #ffe08a); }
@keyframes dcSpark { 0% { transform: scale(0) rotate(0); opacity: 0; } 35% { transform: scale(calc(var(--z, 1) * 1.1)) rotate(60deg); opacity: 1; } 100% { transform: scale(0) rotate(140deg); opacity: 0; } }
/* parties : poussière dorée qui flotte + vignette douce */
.dc-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.35) 100%); }
.dc-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,225,150,.9); box-shadow: 0 0 8px 2px rgba(255,210,120,.35); scale: var(--z, 1); opacity: 0; animation: dcMote var(--d, 18s) linear infinite; }
@keyframes dcMote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .55; } 85% { opacity: .4; } 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }
body:not(.bg-home) #app { position: relative; z-index: 1; }
/* Colonne profil + bannière Discord */
.home-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 14px; min-width: 0; }
.home-side .player-card { position: static; }
.discord-banner { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff; box-shadow: 0 0 0 2px rgba(201,162,74,.75), 0 8px 20px rgba(0,0,0,.5); transition: transform .18s, box-shadow .18s; }
.discord-banner img { display: block; width: 100%; aspect-ratio: 1200 / 396; object-fit: cover; }
.discord-banner .db-txt { position: absolute; left: 36%; right: 6px; top: 0; bottom: 8%; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-shadow: 0 2px 6px rgba(20,0,60,.8); }
.discord-banner b { font-family: 'Pirata One', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1; }
.discord-banner small { font-size: 11px; line-height: 1.2; opacity: .9; }
.discord-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); transform: translateX(-120%); }
.discord-banner:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #e8c770, 0 0 22px rgba(140,90,255,.6), 0 10px 24px rgba(0,0,0,.55); }
.discord-banner:hover::after { transform: translateX(120%); transition: transform .7s ease; }
@media (max-width: 860px) { .home-side { position: static; } .discord-banner { max-width: 480px; width: 100%; margin: 0 auto; } .discord-banner b { font-size: 26px; } .discord-banner small { font-size: 13px; } }
.play-bots { background: linear-gradient(180deg, #7fd0ff, #3f8fc9) !important; color: #06223a !important; font-weight: 900; box-shadow: 0 3px 0 #1d4f78, 0 0 16px rgba(110,190,255,.45); animation: pbGlow 2.4s ease-in-out infinite; }
@keyframes pbGlow { 0%,100% { box-shadow: 0 3px 0 #1d4f78, 0 0 10px rgba(110,190,255,.3); } 50% { box-shadow: 0 3px 0 #1d4f78, 0 0 22px rgba(110,190,255,.7); } }
.lobby-tools .play-bots { font-size: 17px; padding: 11px 24px; border-radius: 999px; }

/* ---------- Loup-Garou : composition des rôles ---------- */
.lgc-box { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(40,25,10,.18); border: 1px solid rgba(90,60,25,.35); }
.lgc-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; } .lgc-head b { font-size: 14px; } .lgc-head small { font-size: 12px; opacity: .8; }
.lgc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lgc-chip { position: relative; display: inline-flex; }
.lgc-chip .card.lgc-mini { --card-h: 54px; }
.lgc-chip b { position: absolute; right: -4px; bottom: -4px; min-width: 20px; padding: 0 4px; height: 20px; border-radius: 10px; background: #2a1708; color: #ffd36a; font-size: 11px; display: grid; place-items: center; border: 1.5px solid #c9a24a; }
.lgc-chip b:empty { display: none; }
.lgc-chip.c-wolf .card { box-shadow: 0 0 0 2px #b8402e; } .lgc-chip.c-solo .card, .lgc-chip.c-mix .card { box-shadow: 0 0 0 2px #8e5fd0; }
.lgc-warn { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(200,90,40,.18); border: 1px solid rgba(200,90,40,.5); font-size: 12.5px; }
.lgc-open { margin-top: 10px; width: 100%; }
.lgc-modal { width: min(1280px, 96vw) !important; max-width: none !important; }
.lgc h2 { margin-top: 0; } .lgc h3 { margin: 16px 0 8px; }
.lgc-stats { display: flex; flex-wrap: wrap; gap: 8px; } .lgc-stats span { padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.28); font-size: 14px; } .lgc-stats b { color: var(--gold); }
.lgc-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .lgc-presets span { font-size: 13px; opacity: .8; }
.lgc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.lgc-role { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; padding: 8px 10px 8px 8px; border-radius: 14px; border: 2px solid rgba(255,255,255,.08); background: rgba(0,0,0,.25); color: inherit; cursor: pointer; transition: transform .12s, border-color .15s, background .15s, opacity .15s; }
.lgc-role:not(:disabled):hover { transform: translateY(-2px); border-color: rgba(242,193,78,.6); }
.lgc-role .card.lgc-card { --card-h: 96px; filter: grayscale(.85) brightness(.75) drop-shadow(0 4px 8px rgba(0,0,0,.5)); transition: filter .2s, transform .2s; }
.lgc-role.on { border-color: var(--gold); background: rgba(242,193,78,.12); box-shadow: 0 0 16px rgba(242,193,78,.25); }
.lgc-role.on .card.lgc-card { filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); transform: scale(1.04); }
.lgc-role.on.out { border-color: #c86a3a; background: rgba(200,90,40,.12); box-shadow: none; }
.lgc-tick { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: #2a1708; color: #f6e2b0; border: 2px solid rgba(255,255,255,.2); z-index: 2; }
.lgc-role.on .lgc-tick { background: var(--gold); color: #2a1708; border-color: #fff3c4; }
.lgc-role.on.out .lgc-tick { background: #c86a3a; color: #fff; }
.lgc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lgc-txt b { font-size: 16px; } .lgc-txt small { font-size: 12px; line-height: 1.3; color: #cfd6dd; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lgc-role:disabled { cursor: default; }
.lgc-chip .card.lgc-mini { --card-w: 54px; --card-h: 54px; }
.lgc-role .card.lgc-card { --card-w: 96px; }
body.m-phone .lgc-role .card.lgc-card { --card-w: 64px; }
.lgc-modal { max-height: 92vh; overflow-y: auto; }
/* Échecs : roque bien visible */
.ch-sq.castle { box-shadow: inset 0 0 0 4px rgba(120,190,255,.85); cursor: pointer; }
.ch-sq.castle::after { content: ''; position: absolute; inset: 0; background: rgba(120,190,255,.18); pointer-events: none; animation: chCastle 1.4s ease-in-out infinite alternate; }
@keyframes chCastle { from { opacity: .4; } to { opacity: 1; } }
.ch-castle { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 3; padding: 0 4px; border-radius: 6px; background: #1d4f78; color: #e6f3ff; font-size: 9px; max-width: 96%; overflow: hidden; text-overflow: clip; font-weight: 800; white-space: nowrap; pointer-events: none; }

/* Belote & co : coins des figures bien lisibles (remplissent le cartouche de l'illustration) */
.card.std .fc.tl { left: 0.5%; top: 0.5%; width: 21%; height: 18.5%; }
.card.std .fc.br { right: 0.5%; bottom: 0.5%; width: 21%; height: 18.5%; }
.card.std .fc b { font-size: 11cqh; line-height: .9; } .card.std .fc i { font-size: 9.5cqh; margin-top: 0; }
.card.std.ink-light .fc { text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9); }
/* Figures : coin sur pastille crème, toujours lisible quelle que soit l'illustration */
.card.std .fc { background: rgba(252,246,230,.96); border-radius: 0 0 22% 0; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.card.std .fc.br { border-radius: 0 0 22% 0; }
.card.std.face-card .fc { color: #141414 !important; text-shadow: none !important; }
.card.std.face-card.red .fc { color: #b3121f !important; } .card.std.face-card.red .fc i { color: #b3121f !important; }
.card.std.face-card.blk .fc i { color: #141414 !important; }

/* Belote : interface plus lisible (PC) */
body:not(.m-phone) .g-belote .status { font-size: 24px; padding: 4px 18px; border-radius: 999px; background: rgba(8,20,24,.55); display: inline-block; margin-bottom: 22px; }
body:not(.m-phone) .g-belote .c-c { display: flex; flex-direction: column; align-items: center; }
body:not(.m-phone) .g-belote .turned { margin-top: 6px; font-size: 15px; color: #e8dcbc; }
body:not(.m-phone) .g-belote .seat .team-tag { font-size: 13px; padding: 2px 10px; }
body:not(.m-phone) .g-belote .seat .bubble { font-size: 15px; padding: 3px 12px; }
body:not(.m-phone) .g-belote .seat .taker { font-size: 14px; }
body:not(.m-phone) .g-belote .seat b, body:not(.m-phone) .g-belote .seat .name { font-size: 17px; }
body:not(.m-phone) .g-belote .seat { background: rgba(6,18,20,.55); }
body:not(.m-phone) .g-belote .action-bar { padding: 14px 18px; gap: 12px; background: rgba(230,180,80,.16); border-width: 2px; }
body:not(.m-phone) .g-belote .action-bar > span { font-size: 18px; font-weight: 800; color: #f6e2b0; margin-right: 6px; }
body:not(.m-phone) .g-belote .action-bar .btn { font-size: 18px; padding: 12px 22px; }
body:not(.m-phone) .g-belote .hand-head { font-size: 16px; }
/* Le Troupeau (PC) : les 4 rangées remplissent toute la hauteur libre du plateau */
body:not(.m-phone) .g-sixquiprend .sqp-zone { min-height: 0; }
body:not(.m-phone) .g-sixquiprend .sqp-rows { flex: 1; min-height: 0; max-width: 1500px; gap: 8px; }
body:not(.m-phone) .g-sixquiprend .sqp-row { flex: 1 1 0; min-height: 70px; container-type: size; padding: 4px 12px; gap: 14px; }
body:not(.m-phone) .g-sixquiprend .sqp-row .card.mid { --card-h-mid: min(calc(100cqh - 4px), 230px, calc((100cqw - 90px) / 6 * 1.49)); }
body:not(.m-phone) .g-sixquiprend .sqp-row-c { gap: 10px; }
body:not(.m-phone) .g-sixquiprend .sqp-row-h b { font-size: 26px; } body:not(.m-phone) .g-sixquiprend .sqp-row-h small { font-size: 14px; }
body:not(.m-phone) .g-sixquiprend .felt { overflow-y: hidden; }
body:not(.m-phone) .g-sixquiprend .sqp-row { justify-content: center; }
body:not(.m-phone) .g-sixquiprend .sqp-row-c { flex: 0 1 auto; }

/* Volet de droite repliable (PC) */
.table-area { position: relative; transition: grid-template-columns .28s ease; }
.table-area.side-hidden { grid-template-columns: minmax(0, 1fr) 0px; }
.table-area.side-hidden .sidebar { visibility: hidden; overflow: hidden; border-left: 0; }
.side-tog { position: absolute; z-index: 30; top: 50%; right: 290px; transform: translateY(-50%); width: 22px; height: 64px; padding: 0; border: 1px solid rgba(230,180,80,.45); border-right: 0; border-radius: 12px 0 0 12px; background: rgba(5,15,25,.92); color: var(--gold); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: -4px 0 12px rgba(0,0,0,.35); transition: right .28s ease, background .15s, width .15s; }
.side-tog:hover { background: rgba(40,30,12,.95); width: 26px; }
.table-area.side-hidden .side-tog { right: 0; }
.side-dot { position: absolute; top: 6px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e5483b; box-shadow: 0 0 6px #e5483b; }
@media (max-width: 1100px) { .side-tog { display: none; } .table-area.side-hidden { grid-template-columns: minmax(0, 1fr); } }
body.m-phone .side-tog { display: none; }

/* ---------- Équipes dans le salon ---------- */
.teams-box { margin: 4px 0 10px; }
.tm-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; }
.tm-vs { align-self: center; font-family: 'Pirata One', serif; font-size: 22px; color: #7a5a2a; }
.tm-col { border-radius: 12px; padding: 8px; background: rgba(40,25,10,.14); border: 2px solid rgba(90,60,25,.35); min-width: 0; }
.tm-col h3 { margin: 0 0 6px; font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; }
.tm-col h3 small { font-size: 13px; opacity: .75; }
.tm-0 { border-color: rgba(60,120,200,.55); } .tm-1 { border-color: rgba(200,80,60,.55); }
.tm-0.nd { border-color: rgba(200,60,60,.6); } .tm-1.nd { border-color: rgba(60,110,210,.6); }
.tm-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tm-col li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,.18); }
.tm-col li.me { background: rgba(242,193,78,.25); }
.tm-col li .name { font-weight: 700; flex: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-col .tm-empty { opacity: .6; font-style: italic; justify-content: center; }
.tm-btns { display: flex; gap: 3px; margin-left: auto; }
.tm-btns .btn { padding: 3px 7px; font-size: 12px; }
.tm-join { width: 100%; margin-top: 6px; }
.tm-tools { display: flex; justify-content: center; margin-top: 8px; }
.hint.warn { color: #9a3412; font-weight: 700; }
body.m-phone .tm-cols { grid-template-columns: 1fr; } body.m-phone .tm-vs { justify-self: center; font-size: 18px; }
.tm-cols { grid-template-columns: 1fr; gap: 4px; }
.tm-vs { justify-self: center; font-size: 18px; line-height: 1; }
.tm-col li { flex-wrap: nowrap; padding: 3px 6px; }
.tm-col li .tag { font-size: 10px; padding: 1px 5px; }
.tm-btns .btn { padding: 2px 8px; font-size: 14px; min-width: 30px; }
.tm-join { margin-top: 5px; padding: 5px 10px; font-size: 13px; }
/* mots longs : texte plus petit, coupure aux tirets plutôt qu'au milieu du mot */
.nc-word span { display: inline-block; max-width: 100%; word-break: keep-all; overflow-wrap: normal; hyphens: manual; }
.nc-word.long { font-size: clamp(9px, 1.3vw, 15px); letter-spacing: 0; }
.nc-word.xlong { font-size: clamp(8px, 1.1vw, 13px); letter-spacing: 0; }

/* Le Pire du Pire : paquets 16+ */
.bm-16 { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #b3261e; color: #fff; font-size: 10px; letter-spacing: .5px; }
.bm-warn { max-width: 440px; }
.bm-warn p { line-height: 1.5; }

/* =================== Conditions, liens légaux, modération du chat =================== */
.terms-chk { display: flex; gap: 8px; align-items: flex-start; margin: 10px 2px 4px; font-size: 13px; line-height: 1.4; color: #4a2c0c; text-align: left; cursor: pointer; }
.terms-chk input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: #b8860b; }
.terms-chk a { color: #7a4a0c; font-weight: 700; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin-top: 12px; font-size: 12px; }
.legal-links a { color: inherit; opacity: .75; text-decoration: none; }
.legal-links a:hover { opacity: 1; text-decoration: underline; }
.legal-links span { opacity: .4; }
.join .legal-links { color: #2b1c0b; font-weight: 600; }
.legal-links.side { color: #e9d7a8; margin-top: 10px; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.modal .legal-links { color: inherit; margin-top: 16px; }
.chat-line { position: relative; }
.chat-acts { display: inline-flex; gap: 2px; margin-left: 6px; opacity: 0; transition: opacity .15s; vertical-align: middle; }
.chat-line:hover .chat-acts, .chat-line:focus-within .chat-acts, body.m-phone .chat-acts { opacity: .85; }
.chat-acts button { border: 0; background: rgba(255,255,255,.12); color: inherit; border-radius: 6px; font-size: 11px; line-height: 1; padding: 3px 5px; cursor: pointer; }
.chat-acts button:hover { background: rgba(255,255,255,.28); }
.priv-list { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.priv-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.06); }
.priv-list.rep li small { display: block; margin-top: 2px; }

/* Slogan sous le titre (écran d'entrée) */
.slogan { font-family: 'Pirata One', Georgia, serif; font-size: clamp(20px, 3.2vw, 26px); color: #7a4a0c; text-align: center; margin: 8px 0 2px; letter-spacing: .5px; }

/* Plaque des pirates : nom + surnom en dessous */
.card .plate.two { overflow: visible; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; }
.card .plate.two b { font-weight: inherit; line-height: 1; }
.card .plate.two small { line-height: 1.05; font-style: italic; opacity: .85; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; }

/* =================== Accueil « Taverne » (PC) =================== */
.tv-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b0f14; }
.tv-scene[hidden] { display: none; }
.tv-stage { position: absolute; }
.tv-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.tv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,8,12,.35) 0%, rgba(5,8,12,0) 16%, rgba(5,8,12,0) 80%, rgba(5,8,12,.45) 100%); }
.tv-spot { position: absolute; display: block; pointer-events: none; user-select: none; transition: filter .25s ease, transform .25s ease; transform-origin: 50% 100%; }
.tv-spot.on, .tv-spot.sel { filter: drop-shadow(0 0 calc(4px * var(--k, 1)) rgba(255,226,150,.95)) drop-shadow(0 0 calc(16px * var(--k, 1)) rgba(255,170,60,.7)) brightness(1.12) saturate(1.08); }
/* pas de déplacement : le personnage est aussi dans le fond, un décalage le doublerait */
.tv-tag { position: absolute; transform: translate(-50%, calc(-100% - 10px * var(--k, 1))); pointer-events: none; white-space: nowrap;
  font: 800 calc(13px * var(--k, 1)) / 1 'Nunito', system-ui, sans-serif; color: #fbe7b5; padding: calc(6px * var(--k, 1)) calc(11px * var(--k, 1));
  border-radius: 999px; background: rgba(20,12,4,.72); border: 1px solid rgba(233,196,106,.55); box-shadow: 0 4px 14px rgba(0,0,0,.45);
  opacity: .82; transition: opacity .2s, transform .2s, background .2s; }
.tv-tag.on, .tv-tag.sel { opacity: 1; background: linear-gradient(180deg, #f2cf73, #c9962e); color: #2a1a05; border-color: #fff1c4; transform: translate(-50%, calc(-100% - 16px * var(--k, 1))) scale(1.08); }
@keyframes tvHint { 0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(242,207,115,.0); } 50% { box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 calc(6px * var(--k, 1)) rgba(242,207,115,.25); } }
body.tavern-home:not([data-tvcat]) .tv-tag, body.tavern-home[data-tvcat=""] .tv-tag { animation: tvHint 2.6s ease-in-out infinite; }

/* interface par-dessus la scène : seules les zones utiles captent les clics */
body.tavern-home::before { display: none; }
.tv-ui { position: fixed; inset: 0; pointer-events: none; }
.tv-ui .home.tavern { position: absolute; inset: 0; width: auto; max-width: none; margin: 0; padding: 0; }
.tv-ui .app-head, .tv-ui .tv-left, .tv-ui .tv-panel, .tv-ui .tv-hint, .tv-ui .tv-foot > * { pointer-events: auto; }
.tv-ui .app-head { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(1100px, 70vw); margin: 0; }
.tv-ui .app-head h1 { flex: none; }
.tv-ui .head-btns { position: absolute; right: -14vw; top: 50%; transform: translateY(-50%); }
.tv-left { position: absolute; left: 18px; top: 18px; width: 260px; max-height: calc(100vh - 36px); overflow: auto; scrollbar-width: none; }
.tv-left .home-side { display: grid; gap: 10px; }
.tv-panel { position: absolute; right: 18px; top: 96px; bottom: 18px; width: min(470px, 36vw); display: flex; flex-direction: column; padding: 16px 16px 12px; animation: tvSlide .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tvSlide { from { transform: translateX(40px); opacity: 0; } }
.tv-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tv-ph h2 { margin: 0; font-size: 30px; color: #4a2c0c; }
.tv-panel .banner-list { grid-template-columns: 1fr !important; max-height: none !important; flex: 1; overflow-y: auto; padding: 2px 6px 6px 2px; scrollbar-width: thin; scrollbar-color: rgba(122,74,12,.6) transparent; }
.tv-hint { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 999px;
  background: rgba(18,11,4,.78); border: 1px solid rgba(233,196,106,.5); color: #fbe7b5; font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,.5); white-space: nowrap; }
.tv-foot { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-radius: 14px; background: rgba(8,10,14,.62); color: #dfe8ef; text-shadow: 0 1px 3px #000; max-width: calc(100vw - 600px); }
.tv-foot .home-crew { margin: 0; }
.tv-foot .share { margin: 0; font-size: 13px; }
@media (max-width: 1250px) { .tv-ui .head-btns { right: -10vw; } }

/* décors animés sur la taverne */
.dc-lantern { scale: var(--z, 1); }
.dc-candle .a { width: calc(120px * var(--k, 1)); height: calc(120px * var(--k, 1)); }
.dc-candle .b { width: calc(40px * var(--k, 1)); height: calc(52px * var(--k, 1)); }
.dc-fire { width: 13%; aspect-ratio: 1.1; background: radial-gradient(ellipse, rgba(255,170,60,.45), rgba(255,120,30,.16) 45%, transparent 70%); animation: dcChest 1.9s ease-in-out infinite, dcFlick 1.4s steps(1) infinite; }
.dc-ember { width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #ffcf6a; box-shadow: 0 0 6px 2px rgba(255,140,40,.8); animation: dcEmber var(--d, 3s) ease-out infinite; }
@keyframes dcEmber { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x1, 0), calc(-90px * var(--k, 1))); } }
.dc-dust { background: radial-gradient(circle, #fff6d8, #ffd27a 45%, rgba(255,200,90,0) 72%); box-shadow: 0 0 8px 2px rgba(255,200,110,.3); }
.tv-tags { position: fixed; z-index: 1; pointer-events: none; }
.tv-tags[hidden] { display: none; }
.tv-panel .banner-list { align-content: start; }
/* bas de l'écran : bulle d'aide au-dessus du bloc de partage, jamais l'un sur l'autre */
.tv-bottom { position: absolute; left: 290px; right: 18px; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
body.tavern-home[data-tvcat]:not([data-tvcat=""]) .tv-bottom { right: calc(min(470px, 36vw) + 36px); }
.tv-bottom .tv-hint, .tv-bottom .tv-foot { position: static; transform: none; max-width: 100%; }
.tv-bottom .tv-hint { white-space: normal; text-align: center; }
.tv-bottom .tv-foot { flex-wrap: wrap; justify-content: center; }
.share.mini { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.share.mini .sm-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; }
.share.mini code { font-size: 12px; }
.tv-bottom .tv-foot { flex-wrap: nowrap; padding: 6px 12px; }

/* =================== Nom de code — Chacun pour soi =================== */
.ncs-wrap { gap: 8px; }
.ncs-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ncs-p { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px var(--pc); font-size: 13px; color: #f3ead6; }
.ncs-p.me { background: rgba(0,0,0,.65); }
.ncs-p.spy { box-shadow: inset 0 0 0 2px #f2cf73; background: rgba(60,40,6,.7); }
.ncs-p.out { opacity: .5; filter: grayscale(.6); }
.ncs-p.fin .ncs-n::after { content: ' ✋'; }
.ncs-p .ncs-n { font-weight: 800; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ncs-p .ncs-s small { color: #8ee07a; font-weight: 800; }
.ncs-top { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; min-height: 10px; }
.ncs-clue { --tc: #f2cf73; }
.ncs-timer { position: relative; width: min(260px, 50vw); height: 22px; border-radius: 999px; background: rgba(0,0,0,.5); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(242,207,115,.5); }
.ncs-timer i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #e05a3a, #f2cf73 40%, #7ad06b); animation: ncsTimer linear forwards; }
.ncs-timer.reveal i { background: rgba(242,207,115,.35); }
.ncs-timer b { position: relative; display: block; text-align: center; line-height: 22px; font-size: 13px; color: #1b1205; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
@keyframes ncsTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ncs-grid { grid-template-columns: repeat(var(--side, 5), 1fr); }
.ncs-grid .nc-word { min-height: clamp(34px, calc(46vh / var(--side, 5)), 70px); }
.ncs-grid .nc-word.hint.spyw { box-shadow: inset 0 0 0 4px #e0b23a, 0 3px 0 #9a8255; background: linear-gradient(180deg, #fff2c8, #ecd08a); }
.ncs-grid .nc-word.hint.bomb { box-shadow: inset 0 0 0 4px #111, 0 3px 0 #9a8255; background: linear-gradient(180deg, #c9bfae, #9e9278); }
.ncs-grid .nc-word.hint.bomb::before { content: '💣'; position: absolute; top: 3px; left: 5px; font-size: clamp(12px, 1.4vw, 18px); line-height: 1; }
.ncs-grid .nc-word.revealed.spyw { background: linear-gradient(180deg, #f6cf5c, #c08a1c); color: #2a1a05; box-shadow: inset 0 0 0 3px var(--pc, #fff), 0 3px 0 rgba(0,0,0,.4); }
.ncs-grid .nc-word.revealed.bomb { background: radial-gradient(circle at 50% 40%, #5a1a12, #111 70%); color: #ffb39a; }
.ncs-grid .nc-word.revealed.neutral { box-shadow: inset 0 0 0 3px var(--pc, transparent); }
.ncs-grid .nc-word.boom { animation: ncsBoom .6s ease-out; }
@keyframes ncsBoom { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-2deg); filter: brightness(2); } 100% { transform: scale(1); } }
.ncs-grid .nc-word.taken { box-shadow: inset 0 0 0 4px var(--pc), 0 0 14px var(--pc); transform: translateY(-2px); }
.ncs-grid .nc-word.back { outline: 3px dashed var(--pc); outline-offset: -5px; }
.ncs-tag { position: absolute; right: 3px; bottom: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px #fff; font-style: normal; font-size: 12px; color: #111; overflow: hidden; }
.ncs-tag .avatar { width: 100%; height: 100%; }
.ncs-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.ncs-chain { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 2px var(--pc); color: #f3ead6; font-size: 13px; }
.ncs-chain span { font-weight: 900; } .ncs-chain .r-ok { color: #8ee07a; } .ncs-chain .r-miss { color: #ff8a7a; } .ncs-chain .r-back { color: #bbb; }
.ncs-info { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: #e8dcc0; text-shadow: 0 1px 2px #000; }

/* =================== Échecs : replays =================== */
.rp-modal { width: min(1100px, 96vw); }
.rp-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-head h2 { margin: 0; }
.rp-res { margin: 4px 0 10px; }
.rp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 16px; align-items: start; }
.rp-left { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rp-board { width: min(56vh, 100%); }
.rp-board .ch-sq { cursor: default; }
.rp-name { font-weight: 800; }
.rp-ctrl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rp-ctrl .btn { min-width: 42px; }
.rp-count { font-weight: 700; margin-left: 6px; }
.rp-moves { max-height: 46vh; overflow: auto; line-height: 1.9; }
.rp-moves span { cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.rp-moves span:hover { background: rgba(184,134,11,.18); }
.rp-moves span.on { background: #c9962e; color: #1b1205; font-weight: 800; }
.rp-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.rp-list li { display: flex; gap: 8px; align-items: stretch; }
.rp-item { flex: 1; text-align: left; display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(242,207,115,.35); background: rgba(255,255,255,.06); cursor: pointer; font: inherit; color: inherit; }
.rp-item:hover { background: rgba(242,207,115,.18); }
.rp-item span { font-size: 13px; opacity: .8; }
@media (max-width: 760px) { .rp-main { grid-template-columns: 1fr; } .rp-board { width: min(92vw, 60vh); } .rp-moves { max-height: 22vh; } }
.ver-line { margin: 4px 0; line-height: 1.6; }
.ver-line.update { color: #f2cf73; }
.ver-warn { color: #ffb37a; font-weight: 700; }
.ver-badge { display: block; margin: 10px auto 0; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(233,196,106,.45); background: rgba(10,8,4,.6); color: #e9d7a8; font: 700 12px/1.2 'Nunito', system-ui, sans-serif; cursor: pointer; text-align: center; }
.ver-badge.ok { border-color: rgba(142,224,122,.6); }
.ver-badge.update { background: linear-gradient(180deg, #c9962e, #8a5a10); color: #1b1205; border-color: #f2cf73; animation: verPulse 2s ease-in-out infinite; }
@keyframes verPulse { 50% { box-shadow: 0 0 0 6px rgba(242,207,115,.25); } }
/* textes secondaires plus lisibles sur le parchemin */
.panel.framed .desc, .panel.framed .share, .logo-sub { font-weight: 600; }
.terms-chk { color: #24170a; font-weight: 600; }
.join .legal-links a { opacity: .95; }
.panel.framed input::placeholder, .panel input::placeholder { color: #5a4224; opacity: 1; }

/* =================== SITE : connexion, hub, tables, compte, modération =================== */
.auth .auth-tabs { margin: 10px 0 6px; justify-content: center; }
.auth-form { display: grid; gap: 10px; margin-top: 8px; }
.auth-note { font-size: 12.5px; margin: 0; }
.linkish { background: none; border: 0; color: #5a3a10; text-decoration: underline; cursor: pointer; font: 600 13px 'Nunito', sans-serif; justify-self: center; }
.ok-msg { color: #1f6a1a; font-weight: 700; text-align: center; margin-top: 6px; }
/* compteurs sur les étiquettes de la taverne */
.tv-tag .tv-n { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: rgba(242,207,115,.25); font-size: .9em; }
.tv-tag .tv-n:empty { display: none; }
.tv-tag .tv-n.zero { opacity: .6; }
.tv-tag.on .tv-n, .tv-tag.sel .tv-n { background: rgba(0,0,0,.18); }
/* jeux du panneau avec leur nombre de tables */
.tv-game { position: relative; }
.tv-gcount { display: block; margin: -4px 8px 2px; padding: 3px 10px; border-radius: 0 0 10px 10px; background: rgba(40,24,8,.82); color: #f3e2b8; font: 700 12px 'Nunito', sans-serif; text-align: right; }
.tv-gcount.none { color: #cdbb94; font-weight: 600; }
/* chat de la taverne : fond semi-transparent, sous la bulle d'aide */
.hub-chat { pointer-events: auto; width: min(640px, 100%); border-radius: 14px; background: rgba(12,9,5,.62); border: 1px solid rgba(233,196,106,.45); box-shadow: 0 10px 30px rgba(0,0,0,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #f3ead6; overflow: hidden; }
.hc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(0,0,0,.25); border: 0; color: inherit; font: 800 14px 'Nunito', sans-serif; cursor: pointer; }
.hc-head small { margin-left: auto; font-weight: 700; color: #8ee07a; }
.hc-head i { font-style: normal; opacity: .8; }
.hc-body { max-height: min(26vh, 220px); overflow-y: auto; padding: 6px 14px; font-size: 14px; line-height: 1.45; scrollbar-width: thin; }
.hc-line { padding: 2px 0; }
.hc-line b { color: #f2cf73; margin-right: 4px; }
.hc-line:hover .chat-acts { opacity: .85; }
.hc-form { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(233,196,106,.2); }
.hc-form input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(233,196,106,.35); background: rgba(255,255,255,.08); color: #fff; padding: 8px 14px; font: inherit; }
.hc-muted { padding: 8px 14px; color: #ffb37a; font-weight: 700; }
.tv-bottom .hub-chat { margin-top: 2px; }
/* fenêtre des tables */
.tb-head .banner-card { pointer-events: none; }
.tb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
.tb-priv { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.tb-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; max-height: 42vh; overflow: auto; }
.tb-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(242,207,115,.3); }
.tb-row.priv { border-style: dashed; }
.tb-who { display: flex; } .tb-who .avatar { margin-right: -6px; box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.tb-info { flex: 1; min-width: 0; display: grid; } .tb-info small { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* compte */
.acc-tabs { margin: 6px 0 12px; }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.av-picker.small { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); max-height: 46vh; overflow: auto; }
.acc-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.acc-row .field { flex: 1; min-width: 160px; }
.acc-stats { width: 100%; border-collapse: collapse; font-size: 14px; } .acc-stats th, .acc-stats td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(242,207,115,.2); }
.hist-list { list-style: none; padding: 0; display: grid; gap: 6px; max-height: 56vh; overflow: auto; }
.hist-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.hist-list li > div { flex: 1; display: grid; } .hist-r { width: 26px; text-align: center; } .hist-r.win { filter: drop-shadow(0 0 6px #f2cf73); }
.danger-t { color: #ff8a7a; }
/* modération */
.mod-list { list-style: none; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.mod-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.mod-list li > div:first-child { flex: 1; display: grid; gap: 2px; }
.mod-rep.closed { opacity: .6; }
.mod-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mod-list pre { white-space: pre-wrap; font-size: 12px; margin: 4px 0 0; }
.mod-sanction { padding: 12px; margin: 10px 0; border-radius: 12px; border: 1px solid rgba(242,207,115,.45); }
.mod-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-form .field { min-width: 120px; } .mod-dur { display: flex; gap: 6px; align-items: center; } .mod-dur .field { width: 90px; min-width: 0; }
/* hub sur téléphone */
.site-hub-m { padding-bottom: 20px; }
.shm-me { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; color: #f3ead6; flex-wrap: wrap; }
.shm-me b { flex: 1; }
.shm-tabs { width: 100%; margin-bottom: 10px; } .shm-tabs button { flex: 1; } .shm-tabs small { opacity: .8; }
.site-hub-m .hub-chat { margin: 14px auto 0; }
@media (max-width: 760px) { .acc-grid { grid-template-columns: 1fr; } }
.av-picker.small { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.av-picker.small .av-pick { width: auto; height: auto; min-width: 0; padding: 2px; }
.av-picker.small .av-pick .avatar { width: 100%; height: auto; aspect-ratio: 1; }
.shm-tabs { flex-wrap: nowrap; } .shm-tabs button { padding: 8px 4px; min-width: 0; }

/* =================== Taverne : écrans moyens (tablettes à l'horizontale, PC 1024 px…) =================== */
.tv-scene::before { content: ''; position: absolute; inset: -40px; background: url(img/ui/bg-taverne-accueil.webp) center / cover; filter: blur(18px) brightness(.45) saturate(.9); }
.tv-scene .tv-stage { box-shadow: 0 0 60px 30px rgba(6, 8, 12, .55); }
.tv-chip { display: none; }
body.tv-compact .tv-chip { pointer-events: auto; position: absolute; left: 14px; top: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 2px solid rgba(242,207,115,.75); background: rgba(14,10,6,.78); color: #f6e7c1; font: 700 15px 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.45); max-width: 46vw; }
body.tv-compact .tv-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tv-compact .tv-chip .avatar.sm { width: 38px; height: 38px; }
body.tv-compact .tv-chip .tv-chip-i { opacity: .8; }
body.tv-compact .tv-chip .tv-chip-x { display: grid; place-items: center; width: 38px; height: 38px; }
body.tv-compact .tv-chip.on { background: linear-gradient(180deg, #f2cf73, #c9962e); color: #2a1a05; }
body.tv-compact .tv-left { display: none; top: 70px; z-index: 5; max-height: calc(100vh - 86px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
body.tv-compact .tv-left.open { display: block; animation: tvSlide .3s cubic-bezier(.2,.8,.2,1); }
body.tv-compact .tv-bottom { left: 18px; }
body.tv-compact .tv-ui .app-head { width: min(620px, 56vw); }
body.tv-compact .tv-ui .app-head h1 { font-size: clamp(22px, 3.4vw, 34px); }
body.tv-compact .tv-ui .head-btns { right: auto; left: calc(100% + 10px); }
body.tv-compact .tv-panel { width: min(440px, 48vw); top: 84px; }
body.tv-compact[data-tvcat]:not([data-tvcat=""]) .tv-bottom { right: calc(min(440px, 48vw) + 36px); }
@media (max-height: 820px) { body.tv-compact .tv-panel { top: 76px; } }
body.tv-compact .tv-left.open ~ .tv-bottom { display: none; }

/* =================== Écrans 4:3 et 5:4 (tablettes à l'horizontale, vieux moniteurs) =================== */
/* La hauteur y est grande par rapport à la largeur : des cartes calées sur la hauteur mangeaient la table. */
@media (max-aspect-ratio: 3/2) and (min-height: 561px) and (min-width: 701px) {
  :root { --card-h: clamp(120px, 23vh, 270px); --card-h-mid: clamp(96px, 17.5vh, 210px); }
  .g-sixquiprend .hand .card.sqp { --card-h: clamp(90px, 15vh, 170px); }
  body:not(.m-phone) .g-sixquiprend .sqp-row { min-height: 52px; }
  .sqp-rv .card.small { --card-h: clamp(50px, 7vh, 80px); }
}
/* poker sur tablette / 1024 px : les sièges des côtés restaient à moitié hors de l'écran */
@media (min-width: 701px) and (max-width: 1150px) and (min-height: 561px) {
  .pk-arena { --rx: 37.5%; --ry: 37%; --bx: 25%; --by: 23%; }
  .pk-seat .seat { max-width: 150px; }
}
/* Le Troupeau sur écrans peu hauts (1280×720, 1366×768) : les 4 rangées restent visibles */
@media (max-height: 800px) and (min-height: 561px) and (min-width: 701px) {
  .g-sixquiprend .hand .card.sqp { --card-h: clamp(90px, 15vh, 170px); }
  body:not(.m-phone) .g-sixquiprend .sqp-row { min-height: 50px; }
  .sqp-rv .card.small { --card-h: clamp(48px, 7vh, 80px); }
}