:root {
  --ink: #08111f;
  --ice: #eef7ff;
  --slate: #11233d;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --accent-blue: #2f7ae5;
  --accent-blue-bright: #4ea4ff;
  --accent-red: #e03d46;
  --accent-gold: #f4c150;
  --accent-green: #5adb8a;
  --silver: #c7d6e6;
  --panel-bg: rgba(9, 19, 31, 0.78);
  --panel-bg-solid: #0c1726;
  --shadow: 0 18px 50px rgba(2, 9, 18, 0.4);
  --radius: 18px;
  --header-height: 70px;
  --footer-height: 38px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ice);
  background:
    radial-gradient(circle at 20% -10%, rgba(61, 115, 199, 0.22), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(224, 61, 70, 0.12), transparent 40%),
    linear-gradient(180deg, #0a1626 0%, #060e18 100%);
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

body.body--game,
body.body--home {
  height: 100dvh;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Typographie ────────────────────────────────────────────── */

h1, h2, h3 {
  margin-top: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.75rem; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.75rem; }
h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }

.kicker,
.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--silver);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-note,
.hero-text {
  color: rgba(238, 247, 255, 0.78);
  line-height: 1.6;
}

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.4rem;
  background: rgba(6, 14, 22, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-height);
}

.brand-lockup img { width: min(168px, 38vw); }

.site-nav {
  display: flex;
  gap: 1.4rem;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-nav a { opacity: 0.82; transition: opacity 0.15s, color 0.15s; }
.site-nav a:hover { opacity: 1; color: var(--accent-blue-bright); }

/* ── Footer persistant ──────────────────────────────────────── */

.site-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  padding: 0.4rem 1.4rem;
  min-height: var(--footer-height);
  background: rgba(5, 12, 20, 0.92);
  border-top: 1px solid var(--line-soft);
  font-size: 0.72rem;
  color: rgba(199, 214, 230, 0.62);
}

.footer-copy { white-space: nowrap; }

.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.footer-legal a {
  color: rgba(199, 214, 230, 0.62);
  transition: color 0.15s;
}

.footer-legal a:hover { color: var(--accent-blue-bright); }

.footer-btc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.footer-btc code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.7rem;
  color: var(--accent-gold);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-btc-icon { opacity: 0.8; }

.footer-debug {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.poll-badge {
  font-size: 0.65rem;
  background: #222;
  color: #0f0;
  padding: 3px 7px;
  border-radius: 4px;
  opacity: 0.85;
  white-space: nowrap;
}

main { flex: 1 1 auto; }

/* ── Boutons ────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s;
}

.button-primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-bright));
  color: white;
  box-shadow: 0 10px 26px rgba(47, 122, 229, 0.32);
}

.button-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(47, 122, 229, 0.42); }

.button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.button-secondary:hover { background: rgba(255, 255, 255, 0.1); }

.button-compact { min-height: 38px; padding: 0.45rem 1rem; font-size: 0.82rem; }

/* ── Champs de formulaire ───────────────────────────────────── */

.field { display: grid; gap: 0.4rem; min-width: 0; }

.field span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
}

.field input,
.field select {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font: inherit;
}

.field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.field input:focus,
.field select:focus { outline: 2px solid rgba(47, 122, 229, 0.5); border-color: transparent; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL
   ══════════════════════════════════════════════════════════════ */

.home {
  height: calc(100dvh - var(--header-height) - var(--footer-height));
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.6rem;
  align-items: center;
  padding: 1.4rem 2rem;
  background:
    linear-gradient(100deg, rgba(5, 11, 20, 0.94) 30%, rgba(5, 11, 20, 0.55)),
    var(--hero-image) center / cover no-repeat;
}

.home-title {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.01em;
  margin-bottom: 0.8rem;
}

.home-lead {
  max-width: 46ch;
  color: rgba(238, 247, 255, 0.82);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 1.1rem;
}

.home-points {
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.home-points li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 500;
  color: rgba(238, 247, 255, 0.9);
}

.point-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(47, 122, 229, 0.16);
  border: 1px solid rgba(47, 122, 229, 0.28);
  font-size: 1rem;
}

.home-cards {
  display: flex;
  gap: 0.7rem;
}

.home-cards img {
  height: clamp(92px, 15vh, 140px);
  width: auto;
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  transition: transform 0.18s ease;
}

.home-cards img:hover { transform: translateY(-6px) rotate(-1deg); }

.home-launch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-content: center;
  max-height: 100%;
  overflow-y: auto;
}

.launch-card {
  padding: 1.05rem 1.2rem;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Each 2×2 cell: equal height, content laid out top-to-bottom. */
.launch-cell {
  display: flex;
  flex-direction: column;
}
.launch-cell .solo-form { margin-top: auto; }
.launch-cell--disabled {
  opacity: 0.55;
  filter: grayscale(0.4);
}
.launch-empty {
  margin: auto 0 0;
  color: rgba(238, 247, 255, 0.55);
  font-size: 0.85rem;
  line-height: 1.5;
}

.launch-card--resume {
  background: linear-gradient(160deg, rgba(47, 122, 229, 0.16), rgba(9, 19, 31, 0.85));
  border-color: rgba(47, 122, 229, 0.3);
}

.launch-card .kicker { margin-bottom: 0.15rem; }
.launch-heading { margin: 0 0 0.8rem; font-size: 1.3rem; }
.launch-hint {
  margin: 0;
  color: rgba(238, 247, 255, 0.55);
  font-size: 0.8rem;
  line-height: 1.4;
}

.solo-form { display: grid; gap: 0.6rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.launch-go { width: 100%; margin-top: 0.3rem; }

.resume-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin: 0 0 1.3rem;
}

.resume-grid dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--silver);
}

.resume-grid dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 700; }

.launch-new {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-bg);
  padding: 0 1.2rem;
}

.launch-new summary {
  cursor: pointer;
  padding: 0.9rem 0;
  font-weight: 700;
  font-size: 0.9rem;
  list-style: none;
}

.launch-new summary::-webkit-details-marker { display: none; }
.launch-new summary::before { content: "＋ "; color: var(--accent-blue-bright); }
.launch-new[open] summary::before { content: "－ "; }
.launch-new[open] { padding-bottom: 1.2rem; }

/* ══════════════════════════════════════════════════════════════
   PAGE RÈGLES (et autres pages plein écran)
   ══════════════════════════════════════════════════════════════ */

.page-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.4rem 1.6rem 3rem;
}

.section-heading { margin-bottom: 1.6rem; }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.rules-grid .panel { padding: 1.4rem; }

.feature-list { margin: 0; padding-left: 1.1rem; line-height: 1.8; }

.progression { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }

.progression span {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver);
}

.progression code {
  display: inline-block;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #dff1ff;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   TABLE DE JEU — layout compact
   ══════════════════════════════════════════════════════════════ */

.main--game {
  min-height: 0;
  overflow: hidden;
}

.solo-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
}

/* ── Topbar ─────────────────────────────────────────────────── */

.g-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.g-title { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.g-title .kicker { margin: 0; white-space: nowrap; }

.g-heading {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.g-heading-total { font-size: 0.62em; opacity: 0.5; }

.lobby-settings {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.g-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; }

.g-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
}

.g-chip--blue { background: rgba(47, 122, 229, 0.18); border-color: rgba(47, 122, 229, 0.4); }

/* ── Fin de manche ──────────────────────────────────────────── */

.g-round-end {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-summary-card {
  width: 100%;
  max-width: 500px;
  max-height: 100%;
  overflow-y: auto;
  padding: 1.5rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.g-summary-title { margin: 0; }

.g-summary-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.g-summary-table th {
  padding: 0.4rem 0.7rem;
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  border-bottom: 1px solid var(--line);
}

.g-summary-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line-soft); }

.tc { text-align: center; }
.fw { font-weight: 700; }
.col-win { color: var(--accent-green); }
.col-loss { color: #ff8087; }

.g-end-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.3rem; }

/* ── Arène (atout + corps) ──────────────────────────────────── */

.g-arena {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0.55rem;
  overflow-y: auto;
}

/* ── Colonne atout (drawer) ─────────────────────────────────── */

.g-trump {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.g-trump-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.g-trump-summary::-webkit-details-marker { display: none; }

.g-trump-summary::after {
  content: "▾";
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform 0.15s;
}

.g-trump[open] .g-trump-summary::after { transform: rotate(180deg); }

.g-trump[open] .g-trump-img-wrap,
.g-trump[open] .g-trump-empty,
.g-trump[open] .g-trump-note {
  display: flex;
}

.g-trump:not([open]) .g-trump-img-wrap,
.g-trump:not([open]) .g-trump-empty,
.g-trump:not([open]) .g-trump-note {
  display: none;
}

.g-trump-img-wrap {
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
  padding: 0 0.5rem 0.5rem;
}

.g-trump-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
}

.g-trump-suit {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  flex: 1;
  text-align: center;
}

.g-trump-name {
  display: none;
}

.g-trump-img-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-trump-img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

.g-trump-empty {
  flex: 1;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: rgba(238, 247, 255, 0.4);
  font-size: 1.5rem;
}

.g-trump-note { margin: 0; font-size: 0.68rem; line-height: 1.35; color: rgba(238, 247, 255, 0.64); }

/* ── Corps (3 zones empilées) ───────────────────────────────── */

.g-body {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.55rem;
  align-content: start;
}

/* ── Adversaires ────────────────────────────────────────────── */

.g-opps {
  display: grid;
  grid-template-columns: repeat(var(--opp-count), 1fr);
  gap: 0.5rem;
}

.g-opp {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(9, 19, 31, 0.72);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.g-opp-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.g-opp-name { font-size: 0.85rem; font-weight: 700; }
.g-opp-badges { display: flex; gap: 0.3rem; }
.g-opp-stats { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.g-opp-backs {
  display: flex;
  margin-top: 0.3rem;
}

.g-opp-back {
  height: 48px;
  width: auto;
  border-radius: 6px;
  margin-left: -10px;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
}

.g-opp-back:first-child { margin-left: 0; }

.g-pill,
.g-badge {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.g-pill--blue,
.g-badge--blue { background: rgba(47, 122, 229, 0.24); }
.g-pill--dim { color: rgba(238, 247, 255, 0.42); }

.g-badge--icon {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  min-height: auto;
  position: relative;
  cursor: default;
}

.g-badge--icon::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 20, 35, 0.95);
  color: var(--ice);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.g-badge--icon:hover::after { opacity: 1; }

/* ── Panneau central (annonces / pli / revue) ───────────────── */

.g-state {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  overflow: hidden;
}

.g-state .kicker { margin: 0; flex-shrink: 0; }

.g-bid-list { display: flex; flex-direction: column; gap: 0.3rem; overflow-y: auto; }

.g-bid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
}

.g-bid-row strong { font-size: 1rem; }
.g-bid-row--me { background: rgba(47, 122, 229, 0.16); border: 1px solid rgba(47, 122, 229, 0.24); }
.g-dim { color: rgba(238, 247, 255, 0.4); }

/* Pli en cours + revue */
.g-trick { display: flex; gap: 0.4rem; flex-wrap: nowrap; align-items: flex-end; }

.g-trick-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.25rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.g-trick-slot.is-winner {
  border-color: rgba(244, 193, 80, 0.6);
  background: rgba(244, 193, 80, 0.12);
}

.g-trick-card { width: clamp(72px, 8vw, 112px); border-radius: 9px; }

.g-trick-name {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--silver);
}

.g-trick-empty {
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 60px;
  padding: 0.5rem 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: rgba(238, 247, 255, 0.6);
  font-size: 0.88rem;
}

.g-review-winner {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.g-review-action { margin-top: auto; }

.g-tracking { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; }

.g-track {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.g-track strong { font-weight: 800; }
.g-track--me { background: rgba(47, 122, 229, 0.2); }

/* ── Zone joueur ────────────────────────────────────────────── */

.g-player {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
}

.g-player-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.g-player-id .kicker { margin: 0 0 0.3rem; }
.g-player-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.g-turn-hint {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-blue-bright);
  white-space: nowrap;
}

.g-error {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 9px;
  background: rgba(224, 61, 70, 0.16);
  border: 1px solid rgba(224, 61, 70, 0.3);
  color: #ff9aa0;
  font-size: 0.82rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ── Main du joueur (fan groupé) ────────────────────────────── */

.hand-fan {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem 0;
  padding: 0.15rem 0.5rem;
}

.hand-card {
  position: relative;
  flex-shrink: 0;
  margin-left: -20px;
  z-index: calc(var(--card-index, 0) + 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.12s ease;
}

.hand-card:first-child { margin-left: 0; }
.hand-card:hover { z-index: 60; }

/* Saut visuel entre groupes */
.hand-card.is-group-start { margin-left: 6px; }
.hand-card.is-group-start::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.hand-card img { width: clamp(72px, 8vw, 112px); height: auto; border-radius: 11px; }

.hand-card--illegal { opacity: 0.32; }
.hand-card--illegal .card-btn { pointer-events: none; }

.card-btn {
  all: unset;
  cursor: pointer;
  display: block;
  height: 100%;
}

.card-btn img { transition: transform 0.12s ease; }
.card-btn:hover, .card-btn:focus-visible { z-index: 50; }
.card-btn:hover img,
.card-btn:focus-visible img { transform: translateY(-14px); }

/* ── Barre d'annonce (action principale) ────────────────────── */

.bid-bar {
  flex-shrink: 0;
  margin-top: 0.2rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(47, 122, 229, 0.18), rgba(47, 122, 229, 0.06));
  border: 1px solid rgba(47, 122, 229, 0.32);
}

.bid-bar-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.55rem;
}

.bid-bar-q { font-size: 0.96rem; font-weight: 700; }

.bid-bar-forbidden {
  font-size: 0.76rem;
  font-weight: 600;
  color: #ffb0b5;
}

.bid-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bid-num {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s, border-color 0.12s;
}

.bid-num:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-bright));
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(47, 122, 229, 0.4);
}

.bid-num.is-forbidden {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.bid-num.is-forbidden:hover { transform: none; background: rgba(255, 255, 255, 0.08); box-shadow: none; }

.bid-bar-error { margin-top: 0.5rem; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — tablette
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .home { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.8rem 1.4rem; }
  .rules-grid { grid-template-columns: 1fr; }
  .g-arena { grid-template-columns: 112px 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile (≤ 640px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Variables ── */
  :root {
    --header-height: 56px;
    --footer-height: 32px;
  }

  body { font-size: 14px; }

  /* ── Header compact ── */
  .site-header {
    padding: 0.5rem 1rem;
    min-height: var(--header-height);
    gap: 0.6rem;
    flex-wrap: wrap;
    height: auto;
  }
  .brand-lockup img { width: 100px; }
  .site-nav {
    gap: 0.5rem 0.7rem;
    font-size: 0.7rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 100%;
  }

  /* ── Footer compact — BTC masqué sur mobile, poller conservé ── */
  .site-footer { justify-content: center; text-align: center; padding: 0.25rem 1rem; }
  .footer-btc { display: none; }
  .footer-copy { font-size: 0.65rem; }
  /* le poller suit le centrage au lieu d'être collé à droite */
  .footer-debug { margin-left: 0; }

  /* ── Accueil ── */
  body.body--home { height: auto; overflow: auto; }
  .home {
    height: auto;
    overflow: visible;
    grid-template-columns: 1fr;
    padding: 1.2rem 1rem 1.4rem;
    gap: 1.4rem;
  }
  .home-title { font-size: 1.7rem; }
  .home-lead { font-size: 0.9rem; }
  .home-points li { font-size: 0.88rem; }
  .home-cards img { height: clamp(70px, 18vw, 100px); }
  .form-row { grid-template-columns: 1fr; }
  .home-launch { grid-template-columns: 1fr; overflow-y: visible; }

  /* ── Table de jeu ── */
  body.body--game { height: auto; overflow: auto; }
  .main--game { overflow: visible; }

  .solo-shell {
    height: auto;
    padding: 0.5rem 0.6rem;
    gap: 0.45rem;
  }

  /* Topbar mobile — une seule ligne compacte */
  .g-topbar { gap: 0.4rem; }
  .g-title .kicker { display: none; }
  .g-heading { font-size: 1.1rem; }
  .g-chips { gap: 0.25rem; }
  .g-chip { font-size: 0.58rem; min-height: 20px; padding: 0.05rem 0.4rem; }
  .button-compact { min-height: 30px; padding: 0.3rem 0.7rem; font-size: 0.75rem; }

  /* Arène : colonne unique */
  .g-arena {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: visible;
  }

  /* Atout mobile — summary reste en ligne, contenu se déplie en dessous */
  .g-trump-summary { padding: 0.35rem 0.6rem; }
  .g-trump-suit { font-size: 0.9rem; }
  .g-trump[open] .g-trump-img-wrap { padding: 0 0.4rem 0.4rem; height: 80px; }
  .g-trump-img { height: 72px; width: auto; }

  /* Adversaires : ligne unique compacte, sans dos de cartes */
  .g-opps { grid-template-columns: repeat(var(--opp-count, 3), 1fr); gap: 0.3rem; }
  .g-opp { padding: 0.3rem 0.45rem; gap: 0.2rem; }
  .g-opp-name { font-size: 0.72rem; }
  .g-opp-backs { display: none; }

  /* Panneau état */
  .g-state { padding: 0.5rem 0.6rem; gap: 0.35rem; }
  .g-state .kicker { font-size: 0.6rem; }
  .g-bid-row { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
  .g-tracking { gap: 0.25rem; }
  .g-track { font-size: 0.65rem; padding: 0.15rem 0.45rem; }
  .g-review-winner { font-size: 0.85rem; }

  /* Cartes du pli — plus grandes sur mobile pour être lisibles */
  .g-trick { gap: 0.3rem; justify-content: center; }
  .g-trick-card { width: clamp(56px, 17vw, 80px); }
  .g-trick-name { font-size: 0.58rem; }

  /* Zone joueur */
  .g-player { padding: 0.45rem 0.55rem; gap: 0.3rem; }
  .g-player-id .kicker { font-size: 0.6rem; margin-bottom: 0.2rem; }
  .g-turn-hint { font-size: 0.75rem; }
  .hand-fan { gap: 0; padding: 0.1rem 0.3rem; justify-content: center; flex-wrap: nowrap; }
  .hand-card { margin-right: 0; }
  .hand-card img { width: clamp(62px, 19vw, 88px); }
  /* Pas de séparateur ni de margin entre groupes sur mobile */
  .hand-card.is-group-start { margin-left: 0; }
  .hand-card.is-group-start::before { display: none; }

  /* 1-5 cartes : petit gap */
  .hand-fan:has(.hand-card:nth-child(1)):not(:has(.hand-card:nth-child(6))) .hand-card { margin-right: 3px; }
  .hand-fan:has(.hand-card:nth-child(1)):not(:has(.hand-card:nth-child(6))) .hand-card:last-child { margin-right: 0; }

  /* 6 cartes */
  .hand-fan:has(.hand-card:nth-child(6)):not(:has(.hand-card:nth-child(7))) .hand-card { margin-right: -10px; }
  .hand-fan:has(.hand-card:nth-child(6)):not(:has(.hand-card:nth-child(7))) .hand-card:last-child { margin-right: 0; }

  /* 7 cartes */
  .hand-fan:has(.hand-card:nth-child(7)):not(:has(.hand-card:nth-child(8))) .hand-card { margin-right: -16px; }
  .hand-fan:has(.hand-card:nth-child(7)):not(:has(.hand-card:nth-child(8))) .hand-card:last-child { margin-right: 0; }

  /* 8 cartes */
  .hand-fan:has(.hand-card:nth-child(8)):not(:has(.hand-card:nth-child(9))) .hand-card { margin-right: -22px; }
  .hand-fan:has(.hand-card:nth-child(8)):not(:has(.hand-card:nth-child(9))) .hand-card:last-child { margin-right: 0; }

  /* 9 cartes */
  .hand-fan:has(.hand-card:nth-child(9)):not(:has(.hand-card:nth-child(10))) .hand-card { margin-right: -26px; }
  .hand-fan:has(.hand-card:nth-child(9)):not(:has(.hand-card:nth-child(10))) .hand-card:last-child { margin-right: 0; }

  /* 10 cartes */
  .hand-fan:has(.hand-card:nth-child(10)) .hand-card { margin-right: -30px; }
  .hand-fan:has(.hand-card:nth-child(10)) .hand-card:last-child { margin-right: 0; }

  /* Barre d'annonce — boutons larges pour le pouce */
  .bid-bar { padding: 0.5rem 0.6rem; }
  .bid-bar-q { font-size: 0.84rem; }
  .bid-picker { gap: 0.4rem; }
  .bid-num { width: 44px; height: 44px; font-size: 1.1rem; border-radius: 10px; }

  /* Bouton principal plus grand pour le pouce */
  .button-primary { min-height: 48px; font-size: 0.95rem; }

  /* Résumé fin de manche */
  .g-round-end { padding: 0.4rem; }
  .g-summary-card { padding: 0.9rem 1rem; }
  .g-summary-table { font-size: 0.78rem; }
  .g-summary-table th, .g-summary-table td { padding: 0.35rem 0.4rem; }
}

/* ── Multijoueur : accueil ──────────────────────────────────── */
.launch-card--multi {
  background: linear-gradient(160deg, rgba(90, 219, 138, 0.10), rgba(9, 19, 31, 0.85));
  border-color: rgba(90, 219, 138, 0.22);
}
.launch-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.55rem 0;
  color: rgba(238, 247, 255, 0.5);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.launch-or::before,
.launch-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* ── Salon d'attente (lobby) ────────────────────────────────── */
.lobby-shell {
  width: min(960px, 96vw);
  margin: 0 auto;
  padding: 0.5rem 0 1.5rem;
}
.lobby-code {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}
.lobby-code-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(238, 247, 255, 0.55);
}
.lobby-code-value {
  font-family: "Bebas Neue", system-ui, sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.25em;
  color: var(--accent-gold);
  line-height: 1;
}
.lobby-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.lobby-players { padding: 1.2rem 1.3rem; }
.lobby-controls {
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.lobby-list {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lobby-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
}
.lobby-row--me {
  border-color: rgba(47, 122, 229, 0.4);
  background: rgba(47, 122, 229, 0.12);
}
.lobby-seat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 0.85rem;
}
.lobby-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-weight: 600;
}
.lobby-remove { margin-left: auto; }
.lobby-settings-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
}
.lobby-settings-form .field { flex: 1; min-width: 8rem; }
.lobby-addbot {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.lobby-addbot .field { flex: 1; }
.lobby-waiting {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 0;
  color: rgba(238, 247, 255, 0.7);
}
.lobby-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent-blue-bright);
  animation: lobby-spin 0.8s linear infinite;
}
@keyframes lobby-spin { to { transform: rotate(360deg); } }
.lobby-leave { margin-top: auto; }

/* ── Table multi : indices de tour ──────────────────────────── */
.g-opp--acting {
  border-color: var(--accent-blue-bright) !important;
  background: linear-gradient(135deg, rgba(18, 52, 96, 0.65), rgba(12, 33, 64, 0.65));
  box-shadow:
    0 0 0 2px rgba(78, 164, 255, 0.6),
    0 0 18px rgba(78, 164, 255, 0.35);
  animation: opp-glow 1.6s ease-in-out infinite;
}
@keyframes opp-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(78, 164, 255, 0.45), 0 0 12px rgba(78, 164, 255, 0.22); }
  50%      { box-shadow: 0 0 0 2px rgba(78, 164, 255, 0.75), 0 0 24px rgba(78, 164, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .g-opp--acting { animation: none; }
}
.g-badge--live {
  background: rgba(78, 164, 255, 0.3);
  animation: live-pulse 1.1s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.g-bid-row--acting { outline: 1px solid rgba(78, 164, 255, 0.4); }

/* Ma zone, quand c'est MON tour : fond bleu foncé + bordure lumineuse.
   Beaucoup plus visible que le seul libellé en haut à droite. */
.g-player--myturn {
  background: linear-gradient(135deg, rgba(18, 52, 96, 0.92), rgba(12, 33, 64, 0.92));
  border-color: var(--accent-blue-bright);
  box-shadow:
    0 0 0 1px rgba(78, 164, 255, 0.55),
    0 0 22px rgba(78, 164, 255, 0.35);
  animation: myturn-glow 1.6s ease-in-out infinite;
}
@keyframes myturn-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(78, 164, 255, 0.45), 0 0 16px rgba(78, 164, 255, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(78, 164, 255, 0.7), 0 0 28px rgba(78, 164, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .g-player--myturn { animation: none; }
}

/* ── Choix de l'atout (Arbitre) ─────────────────────────────── */
.g-trump-prompt {
  margin: 0.4rem 0 0.8rem;
  color: rgba(238, 247, 255, 0.85);
}
.g-trump-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.g-trump-choice { flex: 1 1 40%; }
.g-trump-choice--b { border-color: rgba(47, 122, 229, 0.5); }
.g-trump-choice--r { border-color: rgba(224, 61, 70, 0.5); }
.g-trump-choice--v { border-color: rgba(90, 219, 138, 0.5); }
.g-trump-choice--j { border-color: rgba(244, 193, 80, 0.5); }

@media (max-width: 720px) {
  .lobby-grid { grid-template-columns: 1fr; }
  .lobby-code-value { font-size: 1.8rem; }
}

/* ── Fin de partie — gagnant & feux d'artifices ─────────────── */

.g-round-end--finale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

/* Bannière gagnant */
.g-winner-banner {
  text-align: center;
  padding: 1rem 0 0.5rem;
  z-index: 2;
  position: relative;
}

.g-winner-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

.g-winner-name {
  margin: 0 0 0.2rem;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 30px rgba(244, 193, 80, 0.7),
    0 0 60px rgba(244, 193, 80, 0.35);
}

.g-winner-sub {
  margin: 0;
  font-size: 1rem;
  color: var(--silver);
}

/* Ligne gagnante dans le tableau */
.g-row-winner {
  background: rgba(244, 193, 80, 0.10);
  border-radius: 6px;
}

.g-row-winner td { color: #fff; font-weight: 700; }
.g-row-winner .tc.fw { color: var(--accent-gold); }

.g-winner-star {
  margin-right: 0.3rem;
  font-size: 0.9rem;
}

/* ── Feux d'artifices CSS ───────────────────────────────────── */

.fireworks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

@keyframes fw-rise {
  0%   { transform: translateY(0) scaleY(1); opacity: 1; }
  75%  { transform: translateY(var(--rise)) scaleY(1); opacity: 1; }
  88%  { transform: translateY(var(--rise)) scaleY(0); opacity: 0; }
  100% { transform: translateY(0) scaleY(1); opacity: 0; }
}

@keyframes fw-burst {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  85%  { transform: translate(-50%, -50%) scale(1.1); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

.fw-rocket {
  position: absolute;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--color);
  animation: fw-rise var(--cycle) var(--delay) ease-in infinite;
}

.fw-rocket::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: transparent;
  box-shadow: var(--sparks);
  animation: fw-burst var(--cycle) var(--delay) ease-out infinite;
}

/* 20 roquettes — cycle = durée totale montée+explosion+pause avant relance */
.fw-rocket--0  { --color:#f4c150; --size:90px;  --rise:-72vh; --cycle:3.2s; --delay:0.0s;  left:8%;
  --sparks: 0 -42px 0 2px #f4c150,30px -30px 0 2px #fff,42px 0 0 2px #f4c150,30px 30px 0 2px #fff,0 42px 0 2px #f4c150,-30px 30px 0 2px #fff,-42px 0 0 2px #f4c150,-30px -30px 0 2px #fff,0 -22px 0 2px #fff,22px 0 0 2px #fff,0 22px 0 2px #fff,-22px 0 0 2px #fff; }
.fw-rocket--1  { --color:#4ea4ff; --size:100px; --rise:-80vh; --cycle:3.5s; --delay:0.3s;  left:76%;
  --sparks: 0 -48px 0 2px #4ea4ff,34px -34px 0 2px #fff,48px 0 0 2px #4ea4ff,34px 34px 0 2px #fff,0 48px 0 2px #4ea4ff,-34px 34px 0 2px #fff,-48px 0 0 2px #4ea4ff,-34px -34px 0 2px #fff,0 -26px 0 2px #fff,26px 0 0 2px #fff,0 26px 0 2px #fff,-26px 0 0 2px #fff; }
.fw-rocket--2  { --color:#e03d46; --size:80px;  --rise:-68vh; --cycle:3.0s; --delay:0.7s;  left:43%;
  --sparks: 0 -38px 0 2px #e03d46,27px -27px 0 2px #f4c150,38px 0 0 2px #e03d46,27px 27px 0 2px #f4c150,0 38px 0 2px #e03d46,-27px 27px 0 2px #f4c150,-38px 0 0 2px #e03d46,-27px -27px 0 2px #f4c150,0 -20px 0 2px #f4c150,20px 0 0 2px #f4c150,0 20px 0 2px #f4c150,-20px 0 0 2px #f4c150; }
.fw-rocket--3  { --color:#5adb8a; --size:110px; --rise:-85vh; --cycle:3.8s; --delay:1.1s;  left:61%;
  --sparks: 0 -52px 0 2px #5adb8a,37px -37px 0 2px #fff,52px 0 0 2px #5adb8a,37px 37px 0 2px #fff,0 52px 0 2px #5adb8a,-37px 37px 0 2px #fff,-52px 0 0 2px #5adb8a,-37px -37px 0 2px #fff,0 -28px 0 2px #fff,28px 0 0 2px #fff,0 28px 0 2px #fff,-28px 0 0 2px #fff; }
.fw-rocket--4  { --color:#fff;    --size:85px;  --rise:-75vh; --cycle:3.3s; --delay:1.5s;  left:29%;
  --sparks: 0 -40px 0 2px #fff,28px -28px 0 2px #f4c150,40px 0 0 2px #fff,28px 28px 0 2px #f4c150,0 40px 0 2px #fff,-28px 28px 0 2px #f4c150,-40px 0 0 2px #fff,-28px -28px 0 2px #f4c150,0 -21px 0 2px #f4c150,21px 0 0 2px #f4c150,0 21px 0 2px #f4c150,-21px 0 0 2px #f4c150; }
.fw-rocket--5  { --color:#c7d6e6; --size:95px;  --rise:-78vh; --cycle:3.6s; --delay:1.9s;  left:83%;
  --sparks: 0 -45px 0 2px #c7d6e6,32px -32px 0 2px #4ea4ff,45px 0 0 2px #c7d6e6,32px 32px 0 2px #4ea4ff,0 45px 0 2px #c7d6e6,-32px 32px 0 2px #4ea4ff,-45px 0 0 2px #c7d6e6,-32px -32px 0 2px #4ea4ff,0 -24px 0 2px #4ea4ff,24px 0 0 2px #4ea4ff,0 24px 0 2px #4ea4ff,-24px 0 0 2px #4ea4ff; }
.fw-rocket--6  { --color:#e03d46; --size:105px; --rise:-82vh; --cycle:3.7s; --delay:2.3s;  left:13%;
  --sparks: 0 -50px 0 2px #e03d46,35px -35px 0 2px #f4c150,50px 0 0 2px #e03d46,35px 35px 0 2px #f4c150,0 50px 0 2px #e03d46,-35px 35px 0 2px #f4c150,-50px 0 0 2px #e03d46,-35px -35px 0 2px #f4c150,0 -27px 0 2px #f4c150,27px 0 0 2px #f4c150,0 27px 0 2px #f4c150,-27px 0 0 2px #f4c150; }
.fw-rocket--7  { --color:#5adb8a; --size:88px;  --rise:-70vh; --cycle:3.1s; --delay:2.7s;  left:53%;
  --sparks: 0 -42px 0 2px #5adb8a,30px -30px 0 2px #fff,42px 0 0 2px #5adb8a,30px 30px 0 2px #fff,0 42px 0 2px #5adb8a,-30px 30px 0 2px #fff,-42px 0 0 2px #5adb8a,-30px -30px 0 2px #fff,0 -22px 0 2px #fff,22px 0 0 2px #fff,0 22px 0 2px #fff,-22px 0 0 2px #fff; }
.fw-rocket--8  { --color:#f4c150; --size:92px;  --rise:-76vh; --cycle:3.4s; --delay:0.5s;  left:36%;
  --sparks: 0 -44px 0 2px #f4c150,31px -31px 0 2px #e03d46,44px 0 0 2px #f4c150,31px 31px 0 2px #e03d46,0 44px 0 2px #f4c150,-31px 31px 0 2px #e03d46,-44px 0 0 2px #f4c150,-31px -31px 0 2px #e03d46,0 -23px 0 2px #e03d46,23px 0 0 2px #e03d46,0 23px 0 2px #e03d46,-23px 0 0 2px #e03d46; }
.fw-rocket--9  { --color:#4ea4ff; --size:78px;  --rise:-65vh; --cycle:2.9s; --delay:0.9s;  left:91%;
  --sparks: 0 -36px 0 2px #4ea4ff,26px -26px 0 2px #5adb8a,36px 0 0 2px #4ea4ff,26px 26px 0 2px #5adb8a,0 36px 0 2px #4ea4ff,-26px 26px 0 2px #5adb8a,-36px 0 0 2px #4ea4ff,-26px -26px 0 2px #5adb8a,0 -19px 0 2px #5adb8a,19px 0 0 2px #5adb8a,0 19px 0 2px #5adb8a,-19px 0 0 2px #5adb8a; }
.fw-rocket--10 { --color:#fff;    --size:96px;  --rise:-83vh; --cycle:3.9s; --delay:1.3s;  left:22%;
  --sparks: 0 -46px 0 2px #fff,33px -33px 0 2px #f4c150,46px 0 0 2px #fff,33px 33px 0 2px #f4c150,0 46px 0 2px #fff,-33px 33px 0 2px #f4c150,-46px 0 0 2px #fff,-33px -33px 0 2px #f4c150,0 -25px 0 2px #f4c150,25px 0 0 2px #f4c150,0 25px 0 2px #f4c150,-25px 0 0 2px #f4c150; }
.fw-rocket--11 { --color:#e03d46; --size:82px;  --rise:-71vh; --cycle:3.2s; --delay:1.7s;  left:68%;
  --sparks: 0 -39px 0 2px #e03d46,28px -28px 0 2px #4ea4ff,39px 0 0 2px #e03d46,28px 28px 0 2px #4ea4ff,0 39px 0 2px #e03d46,-28px 28px 0 2px #4ea4ff,-39px 0 0 2px #e03d46,-28px -28px 0 2px #4ea4ff,0 -21px 0 2px #4ea4ff,21px 0 0 2px #4ea4ff,0 21px 0 2px #4ea4ff,-21px 0 0 2px #4ea4ff; }
.fw-rocket--12 { --color:#5adb8a; --size:102px; --rise:-87vh; --cycle:4.0s; --delay:2.1s;  left:47%;
  --sparks: 0 -49px 0 2px #5adb8a,35px -35px 0 2px #fff,49px 0 0 2px #5adb8a,35px 35px 0 2px #fff,0 49px 0 2px #5adb8a,-35px 35px 0 2px #fff,-49px 0 0 2px #5adb8a,-35px -35px 0 2px #fff,0 -26px 0 2px #fff,26px 0 0 2px #fff,0 26px 0 2px #fff,-26px 0 0 2px #fff; }
.fw-rocket--13 { --color:#f4c150; --size:86px;  --rise:-74vh; --cycle:3.3s; --delay:2.5s;  left:4%;
  --sparks: 0 -41px 0 2px #f4c150,29px -29px 0 2px #e03d46,41px 0 0 2px #f4c150,29px 29px 0 2px #e03d46,0 41px 0 2px #f4c150,-29px 29px 0 2px #e03d46,-41px 0 0 2px #f4c150,-29px -29px 0 2px #e03d46,0 -22px 0 2px #e03d46,22px 0 0 2px #e03d46,0 22px 0 2px #e03d46,-22px 0 0 2px #e03d46; }
.fw-rocket--14 { --color:#c7d6e6; --size:76px;  --rise:-63vh; --cycle:2.8s; --delay:2.9s;  left:57%;
  --sparks: 0 -35px 0 2px #c7d6e6,25px -25px 0 2px #5adb8a,35px 0 0 2px #c7d6e6,25px 25px 0 2px #5adb8a,0 35px 0 2px #c7d6e6,-25px 25px 0 2px #5adb8a,-35px 0 0 2px #c7d6e6,-25px -25px 0 2px #5adb8a,0 -18px 0 2px #5adb8a,18px 0 0 2px #5adb8a,0 18px 0 2px #5adb8a,-18px 0 0 2px #5adb8a; }
.fw-rocket--15 { --color:#4ea4ff; --size:108px; --rise:-88vh; --cycle:4.1s; --delay:3.3s;  left:87%;
  --sparks: 0 -52px 0 2px #4ea4ff,37px -37px 0 2px #f4c150,52px 0 0 2px #4ea4ff,37px 37px 0 2px #f4c150,0 52px 0 2px #4ea4ff,-37px 37px 0 2px #f4c150,-52px 0 0 2px #4ea4ff,-37px -37px 0 2px #f4c150,0 -28px 0 2px #f4c150,28px 0 0 2px #f4c150,0 28px 0 2px #f4c150,-28px 0 0 2px #f4c150; }
.fw-rocket--16 { --color:#e03d46; --size:84px;  --rise:-69vh; --cycle:3.0s; --delay:3.7s;  left:33%;
  --sparks: 0 -40px 0 2px #e03d46,28px -28px 0 2px #fff,40px 0 0 2px #e03d46,28px 28px 0 2px #fff,0 40px 0 2px #e03d46,-28px 28px 0 2px #fff,-40px 0 0 2px #e03d46,-28px -28px 0 2px #fff,0 -21px 0 2px #fff,21px 0 0 2px #fff,0 21px 0 2px #fff,-21px 0 0 2px #fff; }
.fw-rocket--17 { --color:#5adb8a; --size:94px;  --rise:-79vh; --cycle:3.6s; --delay:4.1s;  left:16%;
  --sparks: 0 -45px 0 2px #5adb8a,32px -32px 0 2px #f4c150,45px 0 0 2px #5adb8a,32px 32px 0 2px #f4c150,0 45px 0 2px #5adb8a,-32px 32px 0 2px #f4c150,-45px 0 0 2px #5adb8a,-32px -32px 0 2px #f4c150,0 -24px 0 2px #f4c150,24px 0 0 2px #f4c150,0 24px 0 2px #f4c150,-24px 0 0 2px #f4c150; }
.fw-rocket--18 { --color:#fff;    --size:88px;  --rise:-73vh; --cycle:3.1s; --delay:4.5s;  left:71%;
  --sparks: 0 -42px 0 2px #fff,30px -30px 0 2px #4ea4ff,42px 0 0 2px #fff,30px 30px 0 2px #4ea4ff,0 42px 0 2px #fff,-30px 30px 0 2px #4ea4ff,-42px 0 0 2px #fff,-30px -30px 0 2px #4ea4ff,0 -22px 0 2px #4ea4ff,22px 0 0 2px #4ea4ff,0 22px 0 2px #4ea4ff,-22px 0 0 2px #4ea4ff; }
.fw-rocket--19 { --color:#f4c150; --size:98px;  --rise:-84vh; --cycle:3.8s; --delay:4.9s;  left:40%;
  --sparks: 0 -47px 0 2px #f4c150,33px -33px 0 2px #e03d46,47px 0 0 2px #f4c150,33px 33px 0 2px #e03d46,0 47px 0 2px #f4c150,-33px 33px 0 2px #e03d46,-47px 0 0 2px #f4c150,-33px -33px 0 2px #e03d46,0 -25px 0 2px #e03d46,25px 0 0 2px #e03d46,0 25px 0 2px #e03d46,-25px 0 0 2px #e03d46; }

/* ── Page Acheter ───────────────────────────────────────────── */

.shop-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 2.5rem 1.4rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.shop-hero {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3rem;
  align-items: center;
}

.shop-hero__image img {
  width: 100%;
  border-radius: var(--radius);
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.55));
}

.shop-hero__text { display: flex; flex-direction: column; gap: 0.75rem; }

.shop-price-block {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.shop-price {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.4rem;
  color: var(--accent-gold);
  line-height: 1;
}

.shop-price-note {
  font-size: 0.85rem;
  color: var(--silver);
}

.shop-notice {
  font-size: 0.82rem;
  color: rgba(199, 214, 230, 0.7);
  margin: 0;
}

.btn-buy {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.8rem 1.8rem;
  background: var(--accent-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 10px;
  transition: background 0.15s, transform 0.1s;
  align-self: flex-start;
}

.btn-buy:hover {
  background: #c7343c;
  transform: translateY(-1px);
}

.shop-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.shop-detail-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}

.shop-detail-card h3 {
  color: var(--accent-blue-bright);
  margin-bottom: 0.8rem;
}

.shop-detail-card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(238, 247, 255, 0.82);
  line-height: 1.8;
}

@media (max-width: 860px) {
  .shop-hero { grid-template-columns: 1fr; }
  .shop-hero__image { max-width: 300px; margin: 0 auto; }
  .shop-details { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   POINTAGE (cartes physiques)
   ══════════════════════════════════════════════════════════════ */

.score-launch {
  grid-template-columns: 1fr 1fr;
}

.field-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.score-shell {
  width: min(1100px, 96vw);
  margin: 0 auto;
  padding: 0.5rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.score-shell .g-topbar { gap: 0.9rem; }
.score-shell .g-topbar .lobby-code { margin-left: auto; }

/* ── Salon de configuration ─────────────────────────────────── */

.score-setup {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}

.score-panel { padding: 1.2rem 1.3rem; min-width: 0; }

.score-player-row { gap: 0.6rem; }

.score-reorder {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.score-move-btn {
  width: 24px;
  height: 22px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ice);
  font-size: 0.65rem;
  line-height: 1;
  cursor: pointer;
}
.score-move-btn:disabled { opacity: 0.25; cursor: default; }
.score-move-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.1); }

.score-rename {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  min-width: 0;
}
.score-rename input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font: inherit;
}

.score-add-player {
  margin-top: 0.9rem;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.score-add-player .field { flex: 1; min-width: 0; }

/* ── Plateau de pointage ─────────────────────────────────────── */

.score-winner {
  padding: 1.1rem 1.4rem;
  text-align: center;
  border-color: rgba(255, 209, 102, 0.45);
  background: rgba(255, 209, 102, 0.08);
}
.score-winner-title {
  margin: 0.3rem 0;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.02em;
}

.score-layout {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 1rem;
  align-items: start;
}

.score-standings table { margin-top: 0.6rem; }

.score-row--winner td {
  color: var(--accent-gold);
  font-weight: 700;
}

.score-reset { margin-top: 1rem; }

.score-rounds { overflow: hidden; }

.score-table-wrap {
  overflow-x: auto;
  margin-top: 0.6rem;
}

.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.score-table th,
.score-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  white-space: nowrap;
}

.score-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  border-bottom: 1px solid var(--line);
}

.score-subheader th { padding-top: 0; padding-bottom: 0.3rem; }

.score-round-label {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.score-hand-size {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(238, 247, 255, 0.5);
}

.score-points-row td {
  font-size: 0.75rem;
  padding-top: 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.score-points-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--silver);
}

.score-cell-form { display: inline-flex; }

.score-input {
  width: 3.2em;
  min-height: 34px;
  padding: 0.3rem 0.4rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: white;
  font: inherit;
  font-weight: 700;
}
.score-input:focus {
  outline: 2px solid rgba(47, 122, 229, 0.5);
  border-color: transparent;
}

.score-readonly {
  display: inline-flex;
  min-width: 2em;
  justify-content: center;
  color: rgba(238, 247, 255, 0.65);
}

/* ── Vue cartes des manches (mobile uniquement) ── */
.score-cards { display: none; }

.score-card {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.8rem;
}
.score-card + .score-card { margin-top: 0.7rem; }

.score-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.score-card-round { font-weight: 700; letter-spacing: 0.02em; }
.score-card-hand { font-size: 0.75rem; color: rgba(238, 247, 255, 0.5); }

.score-card-grid {
  display: grid;
  grid-template-columns: 1fr 4.2em 4.2em 2.6em;
  gap: 0.45rem 0.5rem;
  align-items: center;
}
.score-card-col-head {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
  text-align: center;
}
.score-card-col-head--pts { text-align: right; }
.score-card-name {
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.score-card-cell { display: flex; justify-content: center; }
.score-card-pts {
  text-align: right;
  font-weight: 700;
  font-size: 0.85rem;
}

.score-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  cursor: pointer;
}

@media (max-width: 860px) {
  .score-launch { grid-template-columns: 1fr; }
  .score-setup { grid-template-columns: 1fr; }
  .score-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .score-shell { padding: 0.5rem 0 1.2rem; gap: 0.7rem; }

  .score-shell .g-topbar {
    flex-wrap: wrap;
    row-gap: 0.4rem;
  }
  .score-shell .g-topbar .lobby-code {
    margin-left: 0;
    align-items: flex-start;
  }
  .score-shell .lobby-code-value { font-size: 1.4rem; letter-spacing: 0.18em; }

  .score-panel { padding: 0.85rem 0.9rem; }

  .score-player-row { flex-wrap: wrap; }
  .score-rename {
    flex: 1 1 100%;
    order: 1;
    margin-top: 0.4rem;
    min-width: 0;
  }
  .score-rename input { min-width: 0; }

  .score-add-player { flex-direction: column; align-items: stretch; }

  .score-winner { padding: 0.85rem 1rem; }
  .score-winner-title { font-size: 1.1rem; }

  /* Sur mobile, la table large laisse place a une vue en cartes empilees. */
  .score-table-wrap { display: none; }
  .score-cards { display: block; }
  .score-card-cell .score-input {
    width: 100%;
    min-width: 3.4em;
    min-height: 40px;
  }
  .score-card-cell { width: 100%; }
}