/* Présages — interface (hors cartes : voir cards.css).
   Mobile d'abord. Nuit, or et plomb, comme les vitraux des cartes.
   Animations : transform et opacity seulement (voir docs/motion.md). */
:root {
  --font-display: Cinzel, "Cormorant Garamond", Georgia, serif;
  --font-serif: Alegreya, Georgia, serif;
  --font-body: "Alegreya Sans", "Avenir Next", system-ui, sans-serif;
  --bg: #0f0c1c; --bg2: #19142c; --bg3: #251d3e; --night: #0b0a18;
  --ink: #f3ead4; --muted: #b4a78c; --gold: #e0b866; --gold-hi: #ffe7a8; --lead: #17140f;
  --line: rgba(224,184,102,.24); --line2: rgba(224,184,102,.52);
  --team-A: #e9b949; --team-B: #a986ea; --team-C: #46c3b0;
  --ok: #82d692; --warn: #f0a35b; --bad: #ec7a6f;
  --r: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
body[data-screen="game"] { overflow: hidden; overscroll-behavior: none; }
#sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,240,210,.7), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255,240,210,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 62%, rgba(255,240,210,.5), transparent 60%),
    radial-gradient(1px 1px at 86% 48%, rgba(255,240,210,.55), transparent 60%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,240,210,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 32%, rgba(255,240,210,.5), transparent 60%),
    radial-gradient(1px 1px at 92% 88%, rgba(255,240,210,.5), transparent 60%),
    radial-gradient(80% 50% at 50% -10%, rgba(80,96,200,.22), transparent 70%),
    radial-gradient(60% 45% at 100% 100%, rgba(224,184,102,.10), transparent 70%),
    radial-gradient(50% 40% at 0% 70%, rgba(169,134,234,.10), transparent 70%),
    linear-gradient(180deg, #131027, #0b0916);
  background-size: 340px 340px, 420px 420px, 380px 380px, 300px 300px, 460px 460px, 520px 520px, 360px 360px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
a { color: var(--gold-hi); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .45em; letter-spacing: .02em; }
h2 { font-size: 1.2rem; color: var(--gold-hi); }
h3.sub { font-size: .95rem; margin: 1.1em 0 .5em; color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.center { text-align: center; }
.warn { color: var(--warn); font-size: .92rem; }
[hidden] { display: none !important; }

.screen.page { max-width: 560px; margin: 0 auto; padding: calc(10px + var(--safe-t)) 16px calc(28px + var(--safe-b)); }

/* ----------------------------------------------------------------- boutons */
.btn {
  appearance: none; border: 1px solid var(--line2); background: rgba(255,255,255,.045);
  color: var(--ink); font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 99px;
  cursor: pointer; transition: transform .12s, background .2s, border-color .2s; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; text-align: center;
}
.btn:hover { background: rgba(224,184,102,.12); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-gold {
  background: linear-gradient(180deg, #f2d48a, #cf9e4d); color: #231708; border-color: #f7dea0; font-weight: 800;
  box-shadow: 0 6px 22px rgba(224,184,102,.28), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-gold:hover { background: linear-gradient(180deg, #f8dc98, #d7a95b); }
.btn-big { width: 100%; font-size: 1.12rem; padding: 12px 18px; min-height: 58px; flex-direction: column; gap: 0; border-radius: 18px; }
.btn-big small { font-size: .78rem; font-weight: 500; opacity: .75; }
.btn-gold.btn-big span { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .06em; }
.btn-sm { padding: 6px 14px; min-height: 44px; font-size: .92rem; }
.btn-ghost { border-color: transparent; color: var(--muted); background: transparent; }
.btn-ghost-line { width: 100%; background: transparent; }
.btn-ghost-line small { font-weight: 400; color: var(--muted); }
.link-btn { appearance: none; background: none; border: 0; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 36px; padding: 4px 8px; }
.link-btn.small { font-size: .78rem; min-height: 28px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--gold-hi);
  font-size: 1.15rem; text-decoration: none; cursor: pointer; position: relative; flex: 0 0 auto; font-family: var(--font-body);
}
.icon-spacer { width: 44px; flex: 0 0 auto; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--bg); }

/* segments */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.seg button { flex: 1; appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 8px 6px; border-radius: 99px; cursor: pointer; min-height: 40px; transition: background .2s, color .2s; }
.seg button.on { background: linear-gradient(180deg, #3a2f5c, #2a2245); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--line2); font-weight: 700; }
.seg-sm button { min-height: 38px; font-size: .92rem; }
.seg.readonly button:not(.on) { display: none; }
.seg.readonly { display: inline-flex; background: transparent; border: 0; padding: 0; }
.seg.readonly button { cursor: default; }

/* panneaux : verre de nuit serti de plomb et d'or */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(36,29,62,.82), rgba(20,16,36,.86));
  border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 12px 0;
  box-shadow: inset 0 0 0 3px rgba(10,8,18,.55), inset 0 0 0 4px rgba(224,184,102,.08), 0 12px 30px rgba(0,0,0,.25);
}
.panel-kicker { font-family: var(--font-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); opacity: .8; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.set-row > span { color: var(--muted); font-size: .92rem; min-width: 5.5em; }
.set-row .seg { flex: 1 1 200px; margin: 0; }
.set-row.discreet .seg { flex: 0 1 140px; }

/* ------------------------------------------------------------------ accueil */
.home-head { text-align: center; padding: 8px 0 0; position: relative; }
.home-head .chip { position: absolute; right: 0; top: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; min-height: 44px;
  border-radius: 99px; border: 1px solid var(--line2); background: rgba(0,0,0,.25); color: var(--ink); font: inherit; cursor: pointer; text-align: left;
}
.chip > span:last-child { display: flex; flex-direction: column; line-height: 1.1; max-width: 9em; overflow: hidden; }
.chip-ava, .big-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-family: var(--font-display); font-weight: 800; color: #1c1408; background: radial-gradient(circle at 35% 30%, #fff1c4, var(--gold) 60%, #8a6526); }
.chip-sub { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.logo { font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1; margin: 52px 0 0; color: var(--gold-hi); text-shadow: 0 0 30px rgba(224,184,102,.4); letter-spacing: .06em; }
.logo-rose {
  display: block; width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold-hi) 0 12%, var(--lead) 12% 17%, transparent 17%),
    repeating-conic-gradient(from 0deg, var(--lead) 0 4deg, transparent 4deg 30deg),
    conic-gradient(var(--pc-green), var(--pc-yellow), var(--pc-red), var(--pc-blue), var(--pc-green));
  box-shadow: 0 0 0 2px var(--lead), 0 0 0 3.5px var(--gold), 0 0 26px rgba(224,184,102,.45);
}
.tagline { font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: var(--muted); margin: .5em 0 .4em; }
.home-fan { position: relative; height: 128px; width: 100%; margin: 4px auto 0; --pc-w-m: 66px; }
.hf-slot { position: absolute; left: 50%; bottom: 0; transform-origin: 50% 150%; }
.hf-slot .pc { cursor: pointer; }
.resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: rgba(224,184,102,.14); border: 1px solid var(--line2); margin-top: 12px; }
.panel-main { border-color: var(--line2); }
.panel-main h2 { font-size: 1.45rem; margin-bottom: .25em; }
.panel-main .btn-big { margin-top: 6px; }
.alt-modes { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
.join { display: flex; gap: 8px; margin-top: 12px; }
.join input { flex: 1; min-width: 0; }
input, select {
  font: inherit; color: var(--ink); background: rgba(0,0,0,.32); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 12px; min-height: 46px; width: 100%;
}
#join-code { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; font-family: var(--font-display); text-align: center; }
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.open-tables { list-style: none; padding: 0; margin: 0; }
.open-tables li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.open-tables li:first-child { border-top: 0; }
.home-links { display: flex; justify-content: center; gap: 28px; margin-top: 18px; font-family: var(--font-display); letter-spacing: .06em; }
.home-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------- barres */
.bar { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }
.bar-title { flex: 1; text-align: center; font-family: var(--font-display); font-size: 1.15rem; min-width: 0; }
.bar-title b { letter-spacing: .18em; color: var(--gold-hi); }

/* -------------------------------------------------------------------- salon */
.invite { text-align: center; }
.invite-code { display: flex; justify-content: center; gap: 6px; margin: 2px 0 8px; }
.invite-code span {
  display: grid; place-items: center; width: 44px; height: 54px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--lead);
  background: linear-gradient(170deg, #fff4d2, var(--gold) 70%, #a57a32);
  box-shadow: inset 0 0 0 2px var(--lead), 0 4px 14px rgba(0,0,0,.4);
}
.invite-link { display: block; color: var(--gold-hi); font-size: .85rem; margin: 4px 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-actions { display: flex; gap: 8px; justify-content: center; }
.invite-actions .btn { flex: 1; max-width: 220px; }
.lobby-ring { position: relative; width: min(100%, 360px); aspect-ratio: 1 / 1.08; margin: 0 auto; }
.ring-table {
  position: absolute; inset: 27% 25% 33%; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 10px;
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; color: var(--gold); text-transform: uppercase;
  background: radial-gradient(circle at 50% 40%, #2a2350, #141030 70%);
  box-shadow: inset 0 0 0 2px var(--lead), inset 0 0 0 3px rgba(224,184,102,.45), inset 0 0 40px rgba(0,0,0,.6);
}
.lseat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; text-align: center; }
.lseat .ava { width: 50px; height: 50px; }
.lseat .team-badge { position: absolute; right: -12px; top: -8px; width: 30px; height: 30px; font-size: .85rem; }
.lseat button.team-badge { width: 34px; height: 34px; right: -16px; top: -10px; }
.lseat.empty .ava { opacity: .55; }
.lseat.you .ava { box-shadow: 0 0 0 2px var(--lead), 0 0 0 4px var(--gold-hi), 0 0 18px rgba(255,214,120,.5); }
.lseat-name { font-weight: 700; font-size: .85rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseat.empty .lseat-name { color: var(--muted); font-weight: 500; font-style: italic; }
.lseat-tags { display: flex; gap: 3px; }
.tag { font-size: .68rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.tag.off { color: var(--warn); border-color: var(--warn); }
.team-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1a1208; border: 0; font: inherit; font-weight: 800; flex: 0 0 auto; background: var(--team); box-shadow: 0 0 0 2px var(--lead); }
button.team-badge { cursor: pointer; width: 34px; height: 34px; }
.team-A { --team: var(--team-A); } .team-B { --team: var(--team-B); } .team-C { --team: var(--team-C); }
.lobby-actions { position: sticky; bottom: calc(8px + var(--safe-b)); margin: 16px 0 0; z-index: 5; }
.lobby-actions .btn-big { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 6px 22px rgba(224,184,102,.28); }
.chat-details summary { list-style: none; cursor: pointer; }
.chat-details summary::-webkit-details-marker { display: none; }
.chat-details summary h2 { display: inline; }

/* --------------------------------------------------------------- discussion */
.chat { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.chat-msgs { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: .95rem; }
.chat-msgs .m b { color: var(--gold); font-weight: 700; }
.chat-msgs .m.sys { color: var(--muted); font-style: italic; }
.chat-msgs .m .emo { font-size: 1.3rem; }
.chat form { display: flex; gap: 6px; }
.chat form input { flex: 1; min-width: 0; }
.emotes { display: flex; gap: 4px; flex-wrap: wrap; }
.emotes button { appearance: none; border: 1px solid var(--line); background: rgba(0,0,0,.2); border-radius: 99px; padding: 4px 10px; font-size: 1.05rem; color: var(--ink); cursor: pointer; min-height: 40px; min-width: 44px; }

/* ------------------------------------------------------------------- profil */
.profile-head { text-align: center; }
.big-ava { width: 64px; height: 64px; font-size: 1.8rem; margin: 0 auto 8px; }
.stats { display: flex; gap: 10px; }
.stat { flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--gold-hi); line-height: 1.1; }
.form { display: grid; gap: 10px; }
.form label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.form-err { color: var(--bad); margin: 0; }
.games { list-style: none; padding: 0; margin: 0; }
.games li { padding: 8px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.games li:first-child { border-top: 0; }
.games .won { color: var(--ok); font-weight: 700; } .games .lost { color: var(--bad); }

/* ------------------------------------------------------------------- règles */
.rule { padding-top: 20px; }
.rule-num { position: absolute; top: -12px; left: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: var(--lead); background: radial-gradient(circle at 35% 30%, #fff1c4, var(--gold) 60%, #8a6526); box-shadow: 0 0 0 2px var(--lead); }
.rules p, .rules li { line-height: 1.5; }
.rules ol, .rules ul { padding-left: 1.2em; margin: .4em 0; }
.steps li { margin: 4px 0; }
.rule-cards { margin: 12px 0 4px; }
.rule-row { display: flex; gap: 10px; justify-content: center; --pc-w-m: 72px; }
.rule-row .pc, .rules-colors .pc { cursor: pointer; }
.rule-cap { text-align: center; font-family: var(--font-serif); font-style: italic; color: var(--muted); font-size: .92rem; margin: 8px 0 0; }
.rules-colors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 10px; --pc-w-s: 46px; }
.rules-colors .rc { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .78rem; text-align: center; line-height: 1.1; }
.rules-colors .rc b { color: var(--gold-hi); }
.kinds { list-style: none; padding: 0 !important; }
.credits { margin-top: 18px; }

/* ================================================================= PARTIE */
.screen-game {
  position: fixed; inset: 0; z-index: 1;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: var(--safe-t) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  overflow: hidden;
  --hand-w: 74px;
  --hand-h: calc(var(--hand-w) * 1.48 + 38px + var(--safe-b));
  --bar-h: 52px;
}
.screen-game > .g-bar, .screen-game > .g-table, .screen-game > .g-decide, .screen-game > .g-hand {
  width: min(100%, 1180px); justify-self: center;
}

/* barre */
.g-bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-height: var(--bar-h); z-index: 5; }
.g-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; font: inherit; padding: 2px; min-height: 44px; justify-content: center; }
#g-round { font-family: var(--font-display); font-size: .95rem; letter-spacing: .05em; color: var(--gold-hi); }
.g-score { display: flex; gap: 10px; justify-content: center; font-size: .8rem; color: var(--muted); flex-wrap: nowrap; white-space: nowrap; }
.g-score .sc { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.g-score .sc.mine { color: var(--ink); font-weight: 700; }
.stars { color: var(--gold); letter-spacing: .05em; margin-left: 2px; }
.tdot { width: 9px; height: 9px; border-radius: 50%; background: var(--team, var(--gold)); display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 1.5px var(--lead); }

/* la table */
.g-table {
  position: relative; min-height: 0;
  --pod-w: 78px; --pod-h: 84px; --pc-w-s: 44px;
}
.g-felt {
  position: absolute; inset: 3% 2% 2%; border-radius: 46% / 38%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(224,184,102,.07), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(224,184,102,.035) 0 1.2deg, transparent 1.2deg 15deg),
    radial-gradient(ellipse at 50% 45%, #241d47, #15112e 62%, #0e0b20);
  box-shadow: inset 0 0 0 2px rgba(8,6,14,.9), inset 0 0 0 3.5px rgba(224,184,102,.32), inset 0 0 70px rgba(0,0,0,.65), 0 10px 40px rgba(0,0,0,.4);
  transition: opacity .4s;
}
.g-seats { position: absolute; inset: 0; }
.resolving .g-felt { opacity: .78; }

/* joueurs */
.pod { position: absolute; width: var(--pod-w); transform: translate(-50%, -50%); z-index: 3; }
.pod-btn {
  appearance: none; background: none; border: 0; color: var(--ink); font: inherit; padding: 2px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; min-height: 44px; border-radius: 14px;
}
.ava {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  --ring: rgba(224,184,102,.55);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--team, #6b5fa8) 55%, #fff), var(--team, #6b5fa8) 58%, color-mix(in srgb, var(--team, #6b5fa8) 45%, #000));
  box-shadow: 0 0 0 2px var(--lead), 0 0 0 3.5px var(--ring), 0 4px 10px rgba(0,0,0,.5);
  transition: box-shadow .35s ease, transform .35s ease;
}
.ava-in { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #1b130a; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.ava-bot { position: absolute; left: -4px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .62rem; color: var(--gold-hi); background: var(--night); box-shadow: 0 0 0 1px var(--line2); }
.ava-know { position: absolute; right: -10px; top: -6px; font-size: .62rem; font-weight: 800; padding: 1px 4px; border-radius: 99px; background: #2b2150; color: var(--gold-hi); box-shadow: 0 0 0 1px var(--line2); }
.leader { position: absolute; left: -7px; top: -7px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: var(--lead); background: radial-gradient(circle at 35% 30%, #fff1c4, var(--gold) 60%, #8a6526); box-shadow: 0 0 0 1.5px var(--lead); }
.pod-name { font-weight: 700; font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; line-height: 1.1; }
.pod-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); line-height: 1.1; }
.partner-tag { color: var(--team, var(--gold)); font-weight: 800; }
.pod-tag.off { color: var(--warn); }
.pod-stats { display: flex; gap: 6px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.st { display: inline-flex; align-items: center; gap: 2px; }
.st.hot { color: var(--warn); font-weight: 800; }
.mini-back { display: inline-block; width: 8px; height: 12px; border-radius: 2px; background: radial-gradient(circle, var(--gold) 0 20%, #23408f 22% 60%, #0e1838); box-shadow: 0 0 0 1px var(--lead), 0 0 0 1.6px rgba(224,184,102,.5); }
.mini-disc { display: inline-block; width: 8px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(0deg, #6b5a45 0 2px, #2a2117 2px 3px); box-shadow: 0 0 0 1px rgba(224,184,102,.3); }
.pod.partner .ava { --ring: var(--team, var(--gold)); box-shadow: 0 0 0 2px var(--lead), 0 0 0 4.5px var(--ring), 0 0 16px color-mix(in srgb, var(--team, var(--gold)) 45%, transparent); }
.pod.away .ava { opacity: .6; }
.pod.turn .ava {
  box-shadow: 0 0 0 2px var(--lead), 0 0 0 4px var(--gold-hi), 0 0 0 7px rgba(255,214,120,.25), 0 0 26px 6px rgba(255,205,110,.55);
  transform: scale(1.08);
}
.pod.turn .pod-name { color: var(--gold-hi); }
.pod.is-target .pod-btn { background: rgba(224,184,102,.14); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pod.drop-seat .pod-btn { background: rgba(169,134,234,.2); box-shadow: inset 0 0 0 2px var(--team-B); }
.pod-me { left: 6px !important; top: auto !important; bottom: 4px; transform: none; }
.pod-me .pod-btn { align-items: center; }

/* cartes posées */
.board { position: absolute; display: flex; gap: 4px; align-items: flex-end; z-index: 2; }
.board.side-L, .board.side-R { transform: translateY(-50%); }
.board.side-T { transform: translateX(-50%); }
.board:empty::before {
  content: ""; width: var(--pc-w-s); height: calc(var(--pc-w-s) * 1.48); border-radius: calc(var(--pc-w-s) * .07);
  border: 1.5px dashed rgba(224,184,102,.18);
}
.board-me { left: 50%; bottom: 8px; transform: translateX(-50%); --pc-w-m: 66px; gap: 8px; }
.board-me:empty::before { width: var(--pc-w-m); height: calc(var(--pc-w-m) * 1.48); border-radius: calc(var(--pc-w-m) * .07); }
.my-turn .board-me:empty::before { border-color: rgba(255,214,120,.55); }
.drop-hot .board-me::before, .drop-hot .board-me { filter: none; }
.drop-hot .board-me:empty::before { border-color: var(--gold-hi); background: rgba(255,214,120,.1); }
.drop-hot .g-felt { box-shadow: inset 0 0 0 2px rgba(8,6,14,.9), inset 0 0 0 3.5px var(--gold-hi), inset 0 0 70px rgba(0,0,0,.5); }
.board .pc { cursor: pointer; }

/* La Loi */
.loi-pill {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 32px; border-radius: 99px;
  font: inherit; font-weight: 800; font-size: .82rem; color: var(--lead); cursor: pointer;
  background: linear-gradient(180deg, #fbe39b, #d6a64e); border: 0; box-shadow: 0 0 0 2px var(--lead), 0 0 0 3px rgba(255,231,168,.6), 0 4px 14px rgba(0,0,0,.5);
}
.loi-ico { font-size: 1rem; }

/* légende des effets */
.g-caption {
  position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none;
  transform: translate(-50%, 0); width: max-content; max-width: min(80%, 440px);
  padding: 8px 14px; border-radius: 14px; text-align: center;
  background: rgba(10,8,20,.9); border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .3s ease;
}
.g-caption.on { opacity: 1; }
.g-caption b { display: block; font-family: var(--font-display); font-size: .92rem; color: var(--gold-hi); letter-spacing: .03em; }
.g-caption span { display: block; font-size: .86rem; color: var(--ink); line-height: 1.25; margin-top: 2px; }
.g-caption.tone-win { border-color: var(--gold-hi); box-shadow: 0 0 30px rgba(255,205,110,.35), 0 10px 30px rgba(0,0,0,.5); }
.g-caption.tone-win b { font-size: 1.02rem; }
.g-caption.tone-amber b { color: #ffc977; }
.g-caption.tone-red b { color: #ff8f86; }
.g-caption.tone-blue b { color: #9cc0ff; }
.g-caption.tone-violet b { color: #cdb2ff; }
.g-caption.tone-quiet { border-color: var(--line); }
.g-caption.tone-quiet b { color: var(--ink); font-family: var(--font-body); font-size: .88rem; }
.g-caption.tone-title b { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; }

/* décision */
.g-decide {
  position: relative; z-index: 4; min-height: 58px; padding: 6px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,16,36,.95), rgba(14,11,26,.95));
}
.g-decide.mine { border-top-color: var(--gold); background: linear-gradient(180deg, rgba(224,184,102,.16), rgba(14,11,26,.96) 70%); box-shadow: 0 -8px 24px rgba(224,184,102,.12); }
.g-decide .prompt { font-weight: 700; text-align: center; line-height: 1.25; }
.g-decide .prompt .hint { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
.g-decide .prompt.wait { font-weight: 400; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.g-decide .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.g-decide .acts .btn { flex: 1 1 auto; max-width: 260px; }
.g-decide .acts-secret { align-items: center; }
.g-decide .acts-secret .btn { flex: 0 1 auto; }
.g-decide .group-label { font-size: .8rem; color: var(--muted); }
.g-decide.resolving { flex-direction: row; justify-content: space-between; }
.skip-btn { border-color: var(--gold); color: var(--gold-hi); }
.mini-ava { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: #1b130a; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--team, #6b5fa8) 55%, #fff), var(--team, #6b5fa8) 60%); box-shadow: 0 0 0 1.5px var(--lead), 0 0 0 3px rgba(255,214,120,.5); flex: 0 0 auto; }

/* la main en éventail */
.g-hand {
  position: relative; z-index: 4; height: var(--hand-h); padding-bottom: var(--safe-b);
  --pc-w-m: var(--hand-w);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.fan-slot { position: absolute; left: 0; top: 16px; transform-origin: 50% 130%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.fan-slot > .pc { transition: transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s, opacity .2s; }
.fan-slot.peek > .pc { transform: translateY(-18px) scale(1.04); }
.fan-slot.dragging { opacity: .22; }
.my-turn .g-hand .pc.is-selectable { box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--pc-lead), 0 0 0 max(1.5px, calc(2.4 * var(--u))) var(--gold), 0 0 16px rgba(255,205,110,.35); }
.g-hand .pc.is-dim { opacity: .9; }
.spect-note { text-align: center; color: var(--muted); margin: 0; padding-top: 36px; font-style: italic; }

.pick-open .g-decide > * { visibility: hidden; }

/* carte vue en grand */
.g-pick {
  position: absolute; left: 0; right: 0; top: var(--bar-h); bottom: var(--hand-h); z-index: 30;
  display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px 8px;
  background: linear-gradient(0deg, rgba(8,6,16,.94), rgba(8,6,16,.7) 60%, rgba(8,6,16,.35));
}
.pick-box { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 520px; --pc-w-l: min(200px, 52vw, calc((100dvh - var(--hand-h) - var(--bar-h) - 190px) / 1.48)); }
.pick-side { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pick-kind { font-size: .82rem; color: var(--muted); }
.pick-hint { margin: 0; font-size: .82rem; color: var(--muted); font-style: italic; }
.pick-side .acts { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.pick-side .acts .btn { width: 100%; }

/* bandeau (fin de manche, équipes) : ne bloque rien */
.g-banner { position: absolute; left: 0; right: 0; top: 22%; z-index: 40; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.bn-box {
  max-width: 420px; text-align: center; padding: 16px 20px 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(42,34,74,.97), rgba(18,14,34,.97));
  border: 1px solid var(--line2); box-shadow: inset 0 0 0 3px rgba(10,8,18,.6), inset 0 0 0 4px rgba(224,184,102,.18), 0 20px 50px rgba(0,0,0,.6);
}
.bn-kicker { font-family: var(--font-display); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.bn-big { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); margin: 6px 0; line-height: 1.2; }
.bn-big.good { color: var(--gold-hi); text-shadow: 0 0 20px rgba(255,205,110,.4); }
.bn-sub { font-size: .9rem; color: var(--muted); }
.bn-score { display: flex; justify-content: center; gap: 14px; margin-top: 10px; font-size: .9rem; flex-wrap: wrap; }
.bn-score .sc { display: inline-flex; align-items: center; gap: 4px; }

/* côté : journal, discussion, réglages */
.g-side { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(5,4,10,.55); }
.g-side.open { display: block; }
.side-inner {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(390px, 92vw); display: flex; flex-direction: column;
  padding: calc(12px + var(--safe-t)) 14px calc(12px + var(--safe-b));
  background: linear-gradient(180deg, #1d1734, #0f0c1d); border-left: 1px solid var(--line2);
  box-shadow: -20px 0 50px rgba(0,0,0,.5);
}
.side-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.side-tabs button { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: .9rem; cursor: pointer; min-height: 40px; }
.side-tabs button.on { color: var(--gold-hi); border-color: var(--line2); background: var(--bg3); }
.side-tabs .side-close { margin-left: auto; min-width: 44px; }
.side-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.g-log { overflow-y: auto; font-size: .88rem; color: var(--muted); display: flex; flex-direction: column; gap: 3px; flex: 1; }
.g-log .l-tour { color: var(--gold-hi); margin-top: 6px; }
.g-log .l-manche { color: var(--ok); font-weight: 700; margin-top: 8px; }
.g-side .chat { flex: 1; min-height: 0; }
.g-side .chat-msgs { max-height: none; flex: 1; }
.g-settings { overflow-y: auto; }
.g-settings .seg { margin-bottom: 6px; }
.g-settings .acts { margin-top: 14px; }

/* surcouches (fiches, dernier tour, fin de partie) */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; padding: 12px 10px calc(10px + var(--safe-b)); background: rgba(5,4,12,.7); }
.ov-box {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 24px); overflow-y: auto;
  background: linear-gradient(180deg, #261e42, #130f26); border: 1px solid var(--line2); border-radius: 20px; padding: 18px 16px 16px;
  box-shadow: inset 0 0 0 3px rgba(10,8,18,.5), inset 0 0 0 4px rgba(224,184,102,.12), 0 20px 60px rgba(0,0,0,.6);
}
.ov-box h2 { text-align: center; margin: 0 40px .3em; }
.ov-x { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.ov-why { text-align: center; color: var(--muted); margin: 0 0 12px; }
.ov-rows { display: grid; gap: 8px; }
.ov-row { display: grid; grid-template-columns: 5.8em 1fr; gap: 8px; align-items: center; }
.ov-row .who { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.ov-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.ov-card { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.25); border-radius: 10px; padding: 5px 8px 5px 5px; flex: 1 1 150px; }
.ov-card .fate { font-size: .84rem; line-height: 1.25; }
.ov-card .fate b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.ov-card .f-win b { color: var(--gold-hi); } .ov-card .f-discard b { color: var(--bad); } .ov-card .f-hand b { color: var(--ok); }
.ov-notes { margin: 12px 0 0; padding-left: 1.1em; color: var(--gold-hi); font-size: .92rem; }
.ov-next { text-align: center; margin: 12px 0 0; }
.ov-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ov-actions .btn { flex: 1 1 120px; }
.sheet-stats { display: flex; gap: 8px; margin: 6px 0 4px; }
.sheet-cards { display: flex; gap: 6px; flex-wrap: wrap; --pc-w-s: 46px; }
.sheet-cards .pc { cursor: pointer; }
.team-list { display: grid; gap: 8px; margin: 8px 0; }
.team-row { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.team-row.mine { border-color: var(--team, var(--gold)); }
.team-name { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.team-members { display: flex; flex-direction: column; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.tips { padding-left: 1.1em; margin: 0; }
.tips li { margin: 4px 0; line-height: 1.4; font-size: .94rem; }

/* fin de partie */
.overlay[data-kind="end"] { align-items: center; }
.end-box { text-align: center; overflow: hidden; padding-top: 26px; }
.end-rose {
  position: absolute; left: 50%; top: -120px; width: 320px; height: 320px; margin-left: -160px; border-radius: 50%; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(10,8,18,.9) 70%),
    repeating-conic-gradient(from 0deg, rgba(23,20,15,.9) 0 2deg, transparent 2deg 22.5deg),
    conic-gradient(var(--pc-green), var(--pc-yellow), var(--pc-red), var(--pc-blue), var(--pc-green));
}
.end-box.won .end-rose { opacity: .75; }
.end-box > *:not(.end-rose) { position: relative; }
.end-kicker { font-family: var(--font-display); letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; color: var(--gold); margin: 30px 0 0; }
.big-result { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-hi); margin: 4px 0 10px; text-shadow: 0 0 30px rgba(255,205,110,.45); }
.end-box:not(.won) .big-result { color: var(--ink); text-shadow: none; }
.end-team { display: flex; justify-content: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.end-ava { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; }
.end-ava .ava { width: 52px; height: 52px; }

/* calque des animations */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.fx-ghost { position: fixed; width: var(--w); will-change: transform, opacity; }
.fx-ghost > .pc, .fx-ghost > .pc-flip { --w: inherit; }
.fx-drag { z-index: 2; }
.fx-drag .pc { box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 2px var(--gold-hi); }
.fx-light { position: fixed; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, #fff8e0, rgba(255,214,120,.85) 40%, rgba(255,200,90,0) 72%); }
.fx-beam { position: fixed; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 4px; background: linear-gradient(90deg, rgba(255,230,160,0), rgba(255,230,160,.95) 50%, rgba(255,230,160,0)); }
.fx-beam-blue { background: linear-gradient(90deg, rgba(140,180,255,0), rgba(160,195,255,.95) 50%, rgba(140,180,255,0)); }
.fx-beam-violet { background: linear-gradient(90deg, rgba(200,170,255,0), rgba(210,185,255,.95) 50%, rgba(200,170,255,0)); }
.fx-halo { position: fixed; border-radius: 30%; background: radial-gradient(closest-side, rgba(255,226,150,.8), rgba(255,200,90,.28) 55%, rgba(255,200,90,0)); }
.halo-amber { background: radial-gradient(closest-side, rgba(255,190,100,.8), rgba(255,160,60,.28) 55%, rgba(255,160,60,0)); }
.halo-red { background: radial-gradient(closest-side, rgba(255,120,110,.75), rgba(220,50,50,.25) 55%, rgba(220,50,50,0)); }
.halo-blue { background: radial-gradient(closest-side, rgba(150,190,255,.8), rgba(70,110,230,.28) 55%, rgba(70,110,230,0)); }
.halo-violet { background: radial-gradient(closest-side, rgba(210,180,255,.8), rgba(150,100,240,.28) 55%, rgba(150,100,240,0)); }
.halo-quiet { background: radial-gradient(closest-side, rgba(220,210,190,.4), rgba(220,210,190,0)); }
.chat-bubble { position: fixed; z-index: 3; max-width: 180px; padding: 5px 10px; border-radius: 12px 12px 12px 3px; background: #f3ead4; color: #1c150b; font-size: .82rem; font-weight: 600; box-shadow: 0 6px 16px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-bubble.emo { font-size: 1.4rem; padding: 2px 8px; }
.g-deck { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: var(--pc-w-s); height: calc(var(--pc-w-s) * 1.48); z-index: 3; }
.g-deck .pc { position: absolute; left: 0; top: 0; }
.g-deck .pc:nth-child(2) { transform: translate(2px, -2px); }
.g-deck .pc:nth-child(3) { transform: translate(4px, -4px); }

.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 2000; background: #2c2347; border: 1px solid var(--line2); color: var(--ink); padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5); max-width: calc(100vw - 32px); animation: toast-in .25s; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
body[data-screen="game"] .toast { bottom: calc(var(--hand-h, 140px) + 70px); }
.net-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; text-align: center; padding: calc(6px + var(--safe-t)) 6px 6px; background: var(--warn); color: #241505; font-weight: 700; font-size: .9rem; }

/* ------------------------------------------------------------ téléphone : peu de joueurs, cartes plus grandes */
@media (max-width: 759px) and (min-height: 701px) {
  .screen-game[data-n="2"] .g-table, .screen-game[data-n="3"] .g-table, .screen-game[data-n="4"] .g-table { --pc-w-s: 54px; }
  .screen-game[data-n="5"] .g-table { --pc-w-s: 48px; }
  .board-me { --pc-w-m: 74px; }
}

/* ------------------------------------------------------------ petits écrans */
@media (max-height: 700px) {
  .screen-game { --hand-w: 64px; --bar-h: 46px; }
  .g-table { --pod-w: 72px; --pod-h: 74px; --pc-w-s: 40px; }
  .ava { width: 38px; height: 38px; }
  .board-me { --pc-w-m: 56px; }
  .g-decide { min-height: 52px; }
}
@media (max-width: 370px) {
  .g-table { --pod-w: 70px; --pc-w-s: 40px; }
  .screen-game { --hand-w: 68px; }
}

/* ------------------------------------------------------------ ordinateur */
@media (min-width: 760px) and (min-height: 640px) {
  .screen-game { --hand-w: 96px; --bar-h: 60px; }
  .g-table { --pod-w: 112px; --pod-h: 108px; --pc-w-s: 62px; }
  .ava { width: 58px; height: 58px; }
  .ava-in { font-size: 1.5rem; }
  .pod-name { font-size: .92rem; }
  .pod-stats { font-size: .85rem; }
  .board { gap: 6px; }
  .board-me { --pc-w-m: 88px; bottom: 14px; }
  .pod-me { left: 16px !important; bottom: 10px; }
  #g-round { font-size: 1.1rem; }
  .g-score { font-size: .9rem; }
  .g-caption { padding: 10px 18px; }
  .g-caption b { font-size: 1.05rem; }
  .g-caption span { font-size: .95rem; }
  .loi-pill { font-size: .95rem; padding: 6px 16px; }
  .pick-box { flex-direction: row; justify-content: center; align-items: flex-end; max-width: 640px; --pc-w-l: min(250px, calc((100dvh - var(--hand-h) - var(--bar-h) - 60px) / 1.48)); }
  .pick-side { align-items: flex-start; max-width: 300px; }
  .g-pick { align-items: center; }
  .overlay { align-items: center; }
  .g-decide { min-height: 64px; }
  .g-decide .prompt { font-size: 1.05rem; }
}
@media (min-width: 1200px) and (min-height: 820px) {
  .screen-game { --hand-w: 122px; --bar-h: 64px; }
  .g-table { --pod-w: 140px; --pod-h: 128px; --pc-w-s: 84px; }
  .ava { width: 70px; height: 70px; }
  .ava-in { font-size: 1.8rem; }
  .ava-know { font-size: .78rem; }
  .leader { width: 24px; height: 24px; font-size: .85rem; }
  .pod-name { font-size: 1.05rem; }
  .pod-tag { font-size: .72rem; }
  .pod-stats { font-size: .95rem; gap: 10px; }
  .mini-back, .mini-disc { width: 10px; height: 15px; }
  .board { gap: 8px; }
  .board-me { --pc-w-m: 110px; }
  .g-caption b { font-size: 1.15rem; }
  .g-caption span { font-size: 1.02rem; }
  #g-round { font-size: 1.2rem; }
  .g-score { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}